scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 005</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="../snippets/animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="../snippets/animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="../snippets/before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="../snippets/bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="../snippets/green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="../snippets/jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="../snippets/page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="../snippets/page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="../snippets/pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="../snippets/placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="../snippets/ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="../snippets/risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="../snippets/spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="../snippets/spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="../snippets/swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="../snippets/text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="../snippets/word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="../snippets/worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-modules-005">Demo Modules 005</h1> Accessible GUI-based simple canvas editor Related files: <ul> <li><a href="../modules-005.html">Accessible GUI-based simple canvas editor - main demo</a></li> </ul> <h4 id="usage">Usage</h4> This module creates a simple GUI control that appears when an entity, or a group of entitys, are selected. The control allows users to move, scale and rotate selected entitys. The control can be positioned in relation to the selected entitys using both drag, and keyboard, input. All the control’s actions can be replicated using the keyboard. The module adds the following zones to the supplied Canvas wrapper: <ul> <li>Three GUI drag zones -one for each part of the control - to manipulate the GUI control (processingOrder: 50, 51, 52)</li> <li>A keyboard zone - to handle <code>alphanumeric</code> and <code>SHIFT + alphanumeric</code> input to position, scale and rotate selected entitys. A function is also exported to allow users to customise the alphanumeric key mappings</li> </ul> Inputs to the <code>initializeEntityManipulationGui</code> function <ul> <li><code>canvas</code> - SC canvas wrapper object (required)</li> <li><code>cell</code> - the scene Cell wrapper object, from the canvas-minimap module (required)</li> <li><code>selectedEntitys</code> - the selected entitys group, from the entity-navigation module (required)</li> <li><code>updateControllerDisplay</code> - an object containing functions to update the canvas element’s cursor appearance during hover and drag actions, from the entity-navigation module (required)</li> <li><code>dashboard</code> - an object containing DOM form functions, from the dom-entity-editor module (required)</li> </ul> Output from the <code>initializeEntityManipulationGui</code> function - is an object containing the following attributes: <ul> <li><code>checkForSelectionUpdates</code> - a function to be added to an animation object elsewhere</li> <li><code>setGuiControlChars</code> - a function which allows users to adjust their keyboard mappings</li> <li><code>createGui</code> - the function to (re)create the GUI control</li> <li><code>killEntityManipulationGui</code> - kill function, to remove everything associated with the GUI control</li> </ul> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h4 id="initialization-function-exported">Initialization function (exported)</h4> </div> <div class="content"><div class='highlight'><pre>const initializeEntityManipulationGui = (items = {}, scrawl) => {</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> Check we have required arguments/values </div> <div class="content"><div class='highlight'><pre> const { canvas, cell, selectedEntitys, dashboard, updateControllerDisplay } = items; if (scrawl == null) throw new Error('SC entity manipulation GUI module error: missing Scrawl-canvas object argument'); let argsCheck = ''; if (canvas == null) argsCheck += ' Canvas wrapper;'; if (cell == null) argsCheck += ' - Cell wrapper'; if (selectedEntitys == null) argsCheck += ' - Selected entitys group'; if (updateControllerDisplay == null) argsCheck += ' - Controllers display functions'; if (dashboard == null) argsCheck += ' - DOM entity editor dashboard functionality'; if (argsCheck.length) throw new Error(`SC entity manipulation GUI module error: missing arguments${argsCheck}`);</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> All GUI operations happen in their own cell group </div> <div class="content"><div class='highlight'><pre> const gui = scrawl.makeGroup({ name: `${cell.name}-gui-group`, host: cell.name, order: 9999, visibility: false, checkForEntityHover: true, onEntityHover: updateControllerDisplay.setCursorTo.pointer, onEntityNoHover: updateControllerDisplay.setCursorTo.auto, });</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> Functions to switch the GUI display on/off </div> <div class="content"><div class='highlight'><pre> const showGui = () => { movePinGroup.addArtefacts(moveControl); rotatePinGroup.addArtefacts(rotateControl); scalePinGroup.addArtefacts(scaleControl); gui.set({ visibility: true, }); }; const hideGui = () => { gui.set({ visibility: false, }); };</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> We rebuild the GUI every time the user (un)selects entitys </div> <div class="content"><div class='highlight'><pre> let moveControl, scaleControl, rotateControl; const movePinGroup = scrawl.makeGroup({ name: 'gui-control-drag-group', }); const getGuiPinPosition = () => { const artefacts = selectedEntitys.artefacts; if (artefacts.length === 1) { const entity = selectedEntitys.getArtefact(artefacts[0]); return entity.get('position'); } else { let [minX, minY] = cell.get('dimensions'); let maxX = 0, maxY = 0; artefacts.forEach(name => { const entity = selectedEntitys.getArtefact(name); const [x, y] = entity.get('position'); if (minX > x) minX = x; if (minY > y) minY = y; if (maxX < x) maxX = x; if (maxY < y) maxY = y; }); return [ minX + ((maxX - minX) / 2), minY + ((maxY - minY) / 2), ]; } }; const createGui = () => {</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> get rid of the old GUI entitys </div> <div class="content"><div class='highlight'><pre> gui.killArtefacts(); if (!selectedEntitys.artefacts.length) hideGui(); else { const pinPosition = getGuiPinPosition(); moveControl = scrawl.makeWheel({ name: 'gui-move-control', group: gui, stampOrder: 20, radius: 22, start: pinPosition, handle: ['center', 'center'], fillStyle: 'white', strokeStyle: 'red', lineWidth: 2, method: 'fillThenDraw', bringToFrontOnDrag: false, }); const moveControlLabel = scrawl.makePhrase({ name: 'gui-move-control-label', group: gui, order: 21, text: 'MOVE', lineHeight: 0, handle: ['center', 'center'], pivot: moveControl, lockTo: 'pivot', }); scaleControl = moveControl.clone({ name: 'gui-scale-control', calculateOrder: 0, stampOrder: 10, pivot: moveControl, lockTo: 'pivot', offsetY: -100, }); moveControlLabel.clone({ name: 'gui-scale-control-label', order: 11, text: 'SCALE', pivot: scaleControl, }); rotateControl = moveControl.clone({ name: 'gui-rotate-control', stampOrder: 10, pivot: moveControl, lockTo: 'pivot', offsetX: 100, }); moveControlLabel.clone({ name: 'gui-rotate-control-label', order: 11, text: 'ROLL', pivot: rotateControl, }); scrawl.makeLine({ name: 'gui-scale-control-line', group: gui, calculateOrder: 2, method: 'draw', strokeStyle: 'red', lineWidth: 2, pivot: moveControl, lockTo: 'pivot', endPivot: scaleControl, endLockTo: 'pivot', useStartAsControlPoint: true, }).clone({ name: 'gui-rotate-control-line', endPivot: rotateControl, }); createGuiStrings(pinPosition); showGui(); } }; const createGuiStrings = (start) => { selectedEntitys.artefacts.forEach(name => { scrawl.makeLine({ name: `${name}-string`, group: gui, calculateOrder: 3, method: 'draw', strokeStyle: 'red', start, pivot: moveControl, lockTo: 'pivot', endPivot: name, endLockTo: 'pivot', useStartAsControlPoint: true, }); scrawl.makeWheel({ name: `${name}-pin`, group: gui, pivot: name, lockTo: 'pivot', handle: ['center', 'center'], radius: 5, fillStyle: 'white', strokeStyle: 'red', method: 'fillThenDraw', }); }); }; const restorePinDisplay = (pin) => { pin.set({ fillStyle: 'white', }); }; const setPinDisplayForMove = (pin) => { pin.set({ fillStyle: '#bfb', }); }; const setPinDisplayForGroup = (pin) => { pin.set({ fillStyle: '#fbb', }); }; const setPinDisplayForEntity = (pin) => { pin.set({ fillStyle: '#bbf', }); };</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> Functions common to the following code </div> <div class="content"><div class='highlight'><pre> let centerPosition; const getCenterPosition = () => centerPosition = moveControl.get('position'); let pinStartPosition, pinStartDistance; const getPinStartPosition = (pin) => { const coord = scrawl.requestCoordinate(); getCenterPosition(); pinStartPosition = pin.get('position'); pinStartDistance = coord.setFromArray(pinStartPosition).subtract(centerPosition).getMagnitude(); scrawl.releaseCoordinate(coord); }; const enqueueDashboardUpdates = () => { if (selectedEntitys.artefacts.length === 1) { const name = selectedEntitys.artefacts[0]; const artefact = selectedEntitys.getArtefact(name); const [startX, startY] = artefact.get('start'); dashboard.queue.push({ startX: Math.round(startX), startY: Math.round(startY), scale: parseFloat(artefact.get('scale').toFixed(4)), roll: artefact.get('roll'), }); } };</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> MOVE pin’s drag-drop functionality </div> <div class="content"><div class='highlight'><pre> const startMove = () => { updateControllerDisplay.onStart(); setPinDisplayForMove(moveControl); }; const whileMoveGroup = (e) => { selectedEntitys.updateArtefacts({ startX: e.movementX, startY: e.movementY, }); }; const endMove = () => { updateControllerDisplay.onEnd(); restorePinDisplay(moveControl); enqueueDashboardUpdates(); }; const movePinDragZone = scrawl.makeDragZone({ zone: canvas, coordinateSource: cell, collisionGroup: movePinGroup, endOn: ['up', 'leave'], preventTouchDefaultWhenDragging: true, updateOnStart: startMove, updateWhileMoving: whileMoveGroup, updateWhileShiftMoving: () => {}, updateOnEnd: endMove, processingOrder: 50, });</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> ROLL pin’s drag-drop functionality </div> <div class="content"><div class='highlight'><pre> const rotatePinGroup = scrawl.makeGroup({ name: `${cell.name}-gui-rotate-group`, }); let rotatingWithShift = false; let rotateStartValues; const radToDeg = 180 / Math.PI; const degToRad = Math.PI / 180; const calculateAngle = () => { const coord = scrawl.requestCoordinate(); const currentPinPosition = rotateControl.get('position'); const currentPinDistance = coord.setFromArray(currentPinPosition).subtract(centerPosition).getMagnitude(); const pinMoveDistance = coord.setFromArray(currentPinPosition).subtract(pinStartPosition).getMagnitude(); const isAbove = currentPinPosition[1] > centerPosition[1]; const angle = Math.acos(((currentPinDistance * currentPinDistance) + (pinStartDistance * pinStartDistance) - (pinMoveDistance * pinMoveDistance)) / (2 * currentPinDistance * pinStartDistance)) * radToDeg; scrawl.releaseCoordinate(coord); if (isAbove) return 360 - angle; return angle; }; const getRotateEntityStartValues = () => { rotateStartValues = {}; selectedEntitys.artefacts.forEach(name => { rotateStartValues[name] = selectedEntitys.getArtefact(name).get('roll'); }); }; const startRotateEntity = () => { rotatingWithShift = false; updateControllerDisplay.onStart(); setPinDisplayForEntity(rotateControl); getCenterPosition(); getPinStartPosition(rotateControl); getRotateEntityStartValues(); }; const whileRotateEntity = () => { if (rotatingWithShift) whileRotateGroup(); else { const angle = calculateAngle(); selectedEntitys.artefacts.forEach(name => { let roll = rotateStartValues[name] - angle; while (roll < 0) { roll += 360; } while (roll > 360) { roll -= 360; } selectedEntitys.getArtefact(name).set({ roll, }); }); } }; const endRotateEntity = () => { rotatingWithShift = false; updateControllerDisplay.onEnd(); restorePinDisplay(rotateControl); enqueueDashboardUpdates(); }; const getRotateGroupStartValues = () => { rotateStartValues = {}; const coord = scrawl.requestCoordinate(); selectedEntitys.artefacts.forEach(name => { const artefact = selectedEntitys.getArtefact(name); const pos = artefact.get('position'); rotateStartValues[name] = { position: [...coord.setFromArray(pos).subtract(centerPosition)], roll: artefact.get('roll'), }; }); scrawl.releaseCoordinate(coord); }; const startRotateGroup = () => { rotatingWithShift = true; updateControllerDisplay.onStart(); setPinDisplayForGroup(rotateControl); getCenterPosition(); getPinStartPosition(rotateControl); getRotateGroupStartValues(); }; const whileRotateGroup = () => { if (!rotatingWithShift) whileRotateEntity(); else { const angle = calculateAngle(); const coord = scrawl.requestCoordinate(); selectedEntitys.artefacts.forEach(name => { const artefactValues = rotateStartValues[name]; coord.setFromArray(artefactValues.position).rotate(-angle).add(centerPosition); let roll = artefactValues.roll - angle; while (roll < 0) { roll += 360; } while (roll > 360) { roll -= 360; } selectedEntitys.getArtefact(name).set({ start: [...coord], roll, }); }); scrawl.releaseCoordinate(coord); } }; const endRotateGroup = () => { rotatingWithShift = false; updateControllerDisplay.onEnd(); restorePinDisplay(rotateControl); enqueueDashboardUpdates(); }; const rotatePinDragZone = scrawl.makeDragZone({ zone: canvas, coordinateSource: cell, collisionGroup: rotatePinGroup, endOn: ['up', 'leave'], preventTouchDefaultWhenDragging: true, updateOnShiftStart: startRotateEntity, updateOnStart: startRotateGroup, updateWhileShiftMoving: whileRotateEntity, updateWhileMoving: whileRotateGroup, updateOnShiftEnd: endRotateEntity, updateOnEnd: endRotateGroup, processingOrder: 51, });</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> SCALE pin’s drag-drop functionality </div> <div class="content"><div class='highlight'><pre> const scalePinGroup = scrawl.makeGroup({ name: `${cell.name}-gui-scale-group`, }); let scalingWithShift = false; let scaleStartValues; const getScaleRatio = () => { const coord = scrawl.requestCoordinate(); const currentPinPosition = scaleControl.get('position'); const currentDistance = coord.setFromArray(currentPinPosition).subtract(centerPosition).getMagnitude(); scrawl.releaseCoordinate(coord); return currentDistance / pinStartDistance; }; const getScaleEntityStartValues = () => { scaleStartValues = {}; selectedEntitys.artefacts.forEach(name => { scaleStartValues[name] = selectedEntitys.getArtefact(name).get('scale'); }); }; const startScaleEntity = () => { scalingWithShift = false; updateControllerDisplay.onStart(); setPinDisplayForEntity(scaleControl); <span class="h