@wobble/touch

Creates a touch overlay on a given element that allows moving all of the children of that element. Uses multitouch events to detect pinch, zoom and rotate, as well as creating handles to update the elements. The overlay directly mutates the html of the underlying children, by setting the "transform" attributes.

• In default state, all events are captured and nothing is passed to the underlying elements (including for iframes). Tapping on an element makes it possible to interact with the underlying element. Using "contenteditable=true" on an element makes it possible to edit the text of that element.

• The container element is automatically resized to fit the child elements.

• Most recently touched elements are moved to the front using automatic z indexing (only applies when absolutely positioned)

Usage

<WobbleTouch
  selectedEl={/* reference to currently selected element */}
  contentEl={/* container element; all direct children will become moveable via touching and dragging */}
  scrollParent={/* reference to parent element that is scrollable */}
  setSelectedElement={/* function for updating the currently selected element */}
/>

Known Limitations

• This is experimental and has not been tested outside of wobble editor
• the wobble touch element must be a descendant of the scrollParent element for scroll events to correctly register

To do

• create web component
• try in different contexts
• move layout (work area) code to separate package
• make some settings optional, such as container resizing and automatic z-indexing