scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
458 lines (308 loc) • 21.8 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 initializes keyboard-based copy, paste and delete functionality. The module adds the following zone to the supplied Canvas wrapper:</p>
<ul>
<li>A keyboard zone - for the <code>CTRL + X</code>, <code>CTRL + C</code> and <code>CTRL + V</code> keystrokes</li>
</ul>
<p><strong>Inputs to the <code>initializeEntityCopyPaste</code> function</strong></p>
<ul>
<li><code>canvas</code> - SC canvas wrapper object (required)</li>
<li><code>selectedEntitys</code> - A reference to the selected entitys Group object, from the entity-navigation module (required)</li>
<li><code>addControllerAttributes</code> - an object containing attributes that need to be added to entitys which will be controlled by the scene editor, from the entity-navigation module (required)</li>
<li><code>updateControllerDisplay</code> - an object containing functions for showing and hiding highlighted/selected entitys, 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>
<li><code>createGui</code> - function to create and show an editor GUI, from the entity-manipulation-gui module (required)</li>
</ul>
<p><strong>Output from the <code>initializeEntityCopyPaste</code> function</strong> - is an object containing the following attributes:</p>
<ul>
<li><code>killEntityCopyPaste</code> - kill function, to remove everything associated with the scene editor’s copy/paste/delete functionality</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><span class="hljs-keyword">const</span> <span class="hljs-title function_">initializeEntityCopyPaste</span> = (<span class="hljs-params">items = {}, scrawl</span>) => {</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Check we have required arguments/values</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> {
canvas,
selectedEntitys,
addControllerAttributes,
updateControllerDisplay,
dashboard,
createGui,
} = 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> (canvas == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' Canvas wrapper;'</span>;
<span class="hljs-keyword">if</span> (selectedEntitys == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' - Selected entitys group'</span>;
<span class="hljs-keyword">if</span> (addControllerAttributes == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' - Entity controller attributes'</span>;
<span class="hljs-keyword">if</span> (updateControllerDisplay == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' - Controllers display functions'</span>;
<span class="hljs-keyword">if</span> (dashboard == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' - DOM entity editor dashboard functionality'</span>;
<span class="hljs-keyword">if</span> (createGui == <span class="hljs-literal">null</span>) argsCheck += <span class="hljs-string">' - Create GUI function'</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-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<h4 id="packet-related-code">Packet-related code</h4>
<ul>
<li>Copying (and deleting) entitys generates SC packets (stringified JSON) which we can then insert into the browser’s Navigator clipboard</li>
<li>These packets can then be added/restored onto the canvas by reading the clipboard and actioning the results on the Canvas wrapper</li>
<li>There’s unsolved issues around entity function attributes which will currently fail (because: scope), hence the need to reinstall those functions on the newly generated entity objects</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">entityGroupGetPackets</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">const</span> packets = [];
selectedEntitys.<span class="hljs-property">artefacts</span>.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">name</span> =></span> {
<span class="hljs-keyword">let</span> packet = selectedEntitys.<span class="hljs-title function_">getArtefact</span>(name).<span class="hljs-title function_">saveAsPacket</span>();
packet = packet.<span class="hljs-title function_">replaceAll</span>(name, <span class="hljs-string">`<span class="hljs-subst">${name}</span>-copy`</span>);
packets.<span class="hljs-title function_">push</span>(packet);
});
<span class="hljs-keyword">return</span> <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(packets);
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">entityGroupCopy</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span> (<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {
<span class="hljs-keyword">const</span> packetsString = <span class="hljs-title function_">entityGroupGetPackets</span>();
navigator.<span class="hljs-property">clipboard</span>.<span class="hljs-title function_">writeText</span>(packetsString)
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> <span class="hljs-title function_">resolve</span>(packetsString))
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'entityGroupCopy error'</span>, e.<span class="hljs-property">message</span>);
<span class="hljs-title function_">reject</span>(e);
});
})
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">entityGroupPaste</span> = (<span class="hljs-params"></span>) => {
navigator.<span class="hljs-property">clipboard</span>.<span class="hljs-title function_">readText</span>()
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
<span class="hljs-keyword">const</span> packets = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(res);
selectedEntitys.<span class="hljs-title function_">clearArtefacts</span>();
packets.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">packet</span> =></span> {
<span class="hljs-keyword">const</span> entity = canvas.<span class="hljs-title function_">actionPacket</span>(packet);
entity.<span class="hljs-title function_">set</span>({
...addControllerAttributes,
});
selectedEntitys.<span class="hljs-title function_">addArtefacts</span>(entity);
});
updateControllerDisplay.<span class="hljs-title function_">onEnd</span>();
dashboard.<span class="hljs-title function_">refresh</span>(selectedEntitys);
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> <span class="hljs-title function_">createGui</span>(), <span class="hljs-number">10</span>);
})
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'entityGroupPaste error'</span>, e.<span class="hljs-property">message</span>));
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">entityGroupDelete</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-title function_">entityGroupCopy</span>()
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
selectedEntitys.<span class="hljs-title function_">killArtefacts</span>();
updateControllerDisplay.<span class="hljs-title function_">onEnd</span>();
dashboard.<span class="hljs-title function_">refresh</span>(selectedEntitys);
})
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'entityGroupDelete error'</span>, e.<span class="hljs-property">message</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="keyboard-event-listener-functions">Keyboard event listener functions</h4>
<ul>
<li>Using the standard <code>CTRL+C</code>, <code>CTRL+V</code>, <code>CTRL+X</code> keyboard shortcuts as these are well understood UX for end users</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> keyboard = scrawl.<span class="hljs-title function_">makeKeyboardZone</span>({
<span class="hljs-attr">zone</span>: canvas,
<span class="hljs-attr">ctrlOnly</span>: {
<span class="hljs-attr">c</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">entityGroupCopy</span>(),
<span class="hljs-attr">v</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">entityGroupPaste</span>(),
<span class="hljs-attr">x</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">entityGroupDelete</span>(),
},
});</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="cleanup-and-return">Cleanup and return</h4>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">killEntityCopyPaste</span> = (<span class="hljs-params"></span>) => keyboard.<span class="hljs-title function_">kill</span>();</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Return object</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> {
killEntityCopyPaste,
};
};</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<h4 id="export">Export</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> {
initializeEntityCopyPaste,
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>