scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
546 lines (383 loc) • 23 kB
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>
<p>Accessible GUI-based simple canvas editor</p>
<p>Related files:</p>
<ul>
<li><a href="../modules-005.html">Accessible GUI-based simple canvas editor - main demo</a></li>
</ul>
<h4 id="usage">Usage</h4>
<p>This module coordinates the setting up of a basic GUI-based editor of a SC scene. Once run, it returns (among other things) a Cell wrapper (created in a sub-module) which we can use to host the entitys to be used in the scene. To help edit the scene, it gives us:</p>
<ul>
<li>A moveable, responsive minimap which we can use to navigate around the Cell</li>
<li>Drag-drop functionality for the entitys defined as part of the Cell</li>
<li>The ability to select an entity, or a group of entitys, for editing</li>
<li>A simple GUI control which users can use to move, rotate and scale the selected entity or group of entitys</li>
<li>Full accessibility via a set of keyboard commands to move, rotate and/or scale the selected entitys, the GUI control and the minimap</li>
<li>When an entity, or group of entitys, are selected for editing, a keyboard accessible form will appear which allows users to edit a comprehensive subset of that entity’s attributes </li>
<li>Cut|Copy|Paste functionality for selected entitys using keyboard <code>CTRL + X</code>, <code>CTRL + C</code>, <code>CTRL + V</code> keystrokes</li>
</ul>
<p><strong>Inputs to the <code>initializeCanvasSceneEditor</code> function</strong></p>
<ul>
<li><code>sceneCanvas</code> - SC canvas wrapper object (required)</li>
<li><code>domEntityEditor</code> - CSS query string to locate the DOM element where the entity editor form will appear (required)</li>
<li><code>sceneDimensions</code> - a Number, or an array of <code>[width, height]</code> Numbers, setting the size of the scene Cell which will be returned to the calling code (default: 1600)</li>
<li><code>minimapDimensions</code> - a Number, or an array of <code>[width, height]</code> Numbers, setting the size of minimap that appears on the scene Cell (default: 200)</li>
</ul>
<p><strong>Output from the <code>initializeCanvasSceneEditor</code> function</strong> - is an object containing the following attributes:</p>
<ul>
<li><code>animation</code> - the scene editor’s animation object</li>
<li><code>sceneLayer</code> - the scene Cell wrapper object</li>
<li><code>addControllerAttributes</code> - an object containing attributes that need to be added to entitys which will be controlled by the scene editor</li>
<li><code>setGuiControlChars</code> - a function to allow users to map keyboard action keys to better suit their preferred keyboard layout</li>
<li><code>killSceneEditor</code> - kill function, to remove everything associated with the scene editor from the SC library</li>
</ul>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="import-required-sub-modules">Import required sub-modules</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { initializeMinimap } <span class="hljs-keyword">from</span> <span class="hljs-string">'./canvas-minimap.js'</span>
<span class="hljs-keyword">import</span> { initializeDomEntityEditor } <span class="hljs-keyword">from</span> <span class="hljs-string">'./dom-entity-editor.js'</span>
<span class="hljs-keyword">import</span> { initializeEntityNavigation } <span class="hljs-keyword">from</span> <span class="hljs-string">'./entity-navigation.js'</span>
<span class="hljs-keyword">import</span> { initializeEntityManipulationGui } <span class="hljs-keyword">from</span> <span class="hljs-string">'./entity-manipulation-gui.js'</span>
<span class="hljs-keyword">import</span> { initializeEntityCopyPaste } <span class="hljs-keyword">from</span> <span class="hljs-string">'./entity-copy-paste.js'</span></pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="initialization-function-exported">Initialization function (exported)</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">initializeCanvasSceneEditor</span> = (<span class="hljs-params">items = {}, scrawl</span>) => {</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Check we have required arguments/values</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> { sceneCanvas, domEntityEditor, sceneDimensions, minimapDimensions } = items;
<span class="hljs-keyword">if</span> (scrawl == <span class="hljs-literal">null</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">'SC entity manipulation GUI module error: missing Scrawl-canvas object argument'</span>);
<span class="hljs-keyword">let</span> argsCheck = <span class="hljs-string">''</span>;
<span class="hljs-keyword">if</span> (sceneCanvas == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' Scene canvas wrapper;'</span>;
<span class="hljs-keyword">if</span> (domEntityEditor == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' DOM entity editor CSS query string;'</span>;
<span class="hljs-keyword">if</span> (argsCheck.<span class="hljs-property">length</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`SC entity manipulation GUI module error: missing arguments<span class="hljs-subst">${argsCheck}</span>`</span>);</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="build-the-editor">Build the editor</h4>
<p>This is mostly plumbing work, making sure each sub-module gets the right attributes they need</p>
<ul>
<li>Because some sub-modules require access to objects/functionality supplied by other sub-modules, the order in which we initialize the modules becomes important</li>
</ul>
<p>Initialize minimap</p>
<ul>
<li>Adds a minimap to our scene, which can be drag/dropped and controlled via keyboard</li>
<li>Returns a new Cell wrapper, which we can supply to the entity navigation module</li>
<li>Supplies a function which will adapt the minimap display during responsive canvas resizing</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
mainCell,
checkForMinimapChanges,
killCanvasMinimap,
} = <span class="hljs-title function_">initializeMinimap</span>({
<span class="hljs-attr">canvas</span>: sceneCanvas,
<span class="hljs-attr">mainDimensions</span>: sceneDimensions,
<span class="hljs-attr">mapDimensions</span>: minimapDimensions,
}, scrawl);</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Initialize DOM entity editor functionality</p>
<ul>
<li>Will build HTML on a per-entity or group basis, which can be displayed in our dashboard element</li>
<li>Returns an object containing functions that we can supply to the entity navigation module, where all the work happens</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
dashboard,
killDomEntityEditor,
} = <span class="hljs-title function_">initializeDomEntityEditor</span>({
<span class="hljs-attr">queryString</span>: domEntityEditor,
}, scrawl);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Initialize entity navigation</p>
<ul>
<li>Adds ability to navigate/select entitys using mouse or keyboard</li>
<li>Adds ability to move selected entitys using mouse or keyboard</li>
<li>Supplies a set of objects to be added to entitys that should include this functionality</li>
<li>Opens up access to selected entitys via an array</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
selectedEntitys,
addControllerAttributes,
checkForEntityNavigationHoverActions,
updateControllerDisplay,
killEntityNavigation,
} = <span class="hljs-title function_">initializeEntityNavigation</span>({
<span class="hljs-attr">canvas</span>: sceneCanvas,
<span class="hljs-attr">cell</span>: mainCell,
dashboard,
}, scrawl);</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Initialize entity manipulation GUI</p>
<ul>
<li>Builds the GUI editor controls that appear on the canvas when a user selects one or more entitys for editing</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
checkForSelectionUpdates,
setGuiControlChars,
createGui,
killEntityManipulationGui,
} = <span class="hljs-title function_">initializeEntityManipulationGui</span>({
<span class="hljs-attr">canvas</span>: sceneCanvas,
<span class="hljs-attr">cell</span>: mainCell,
selectedEntitys,
dashboard,
updateControllerDisplay,
}, scrawl);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Initialize entity copy-paste</p>
<ul>
<li>Builds the GUI editor controls that appear on the canvas when a user selects one or more entitys for editing</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
killEntityCopyPaste,
} = <span class="hljs-title function_">initializeEntityCopyPaste</span>({
<span class="hljs-attr">canvas</span>: sceneCanvas,
selectedEntitys,
addControllerAttributes,
updateControllerDisplay,
dashboard,
createGui,
}, scrawl);</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<h4 id="scene-animation">Scene animation</h4>
<p>Create the Display cycle animation</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> animation = scrawl.<span class="hljs-title function_">makeRender</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'canvas-scene-editor-animation'</span>,
<span class="hljs-attr">target</span>: sceneCanvas,
<span class="hljs-attr">commence</span>: <span class="hljs-function">() =></span> {
<span class="hljs-title function_">checkForMinimapChanges</span>();
<span class="hljs-title function_">checkForSelectionUpdates</span>();
dashboard.<span class="hljs-title function_">update</span>(selectedEntitys);
},
<span class="hljs-attr">afterShow</span>: checkForEntityNavigationHoverActions,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<h4 id="cleanup-and-return">Cleanup and return</h4>
<p>For the kill/cleanup sequence, we run through the module kill functions in the reverse order in which we created them</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">killSceneEditor</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-title function_">killEntityCopyPaste</span>();
<span class="hljs-title function_">killEntityManipulationGui</span>();
<span class="hljs-title function_">killEntityNavigation</span>();
<span class="hljs-title function_">killDomEntityEditor</span>();
<span class="hljs-title function_">killCanvasMinimap</span>();
};</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Return object</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> {
animation,
<span class="hljs-attr">sceneLayer</span>: mainCell,
addControllerAttributes,
setGuiControlChars,
killSceneEditor,
};
};</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<h4 id="export">Export</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> {
initializeCanvasSceneEditor,
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>