scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
927 lines (632 loc) • 43.1 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 creates a large Cell wrapper which we can use to host the entitys to be used in the scene, alongside a draggable, keyboard accessible minimap for navigating around the Cell. The module will also add the following zones to the supplied Canvas wrapper:</p>
<ul>
<li>A frame drag zone, to drag the frame around the map - the main navigation functionality (processingOrder: 20)</li>
<li>A map drag zone, to drag the map around the Canvas wrapper’s base Cell (processingOrder: 21)</li>
<li>A keyboard zone - the frame and map can be moved using <code>ALT + arrows</code> keystrokes, and can be hidden/revealed using the <code>ALT + backspace</code> keystroke</li>
</ul>
<p><strong>Inputs to the <code>initializeMinimap</code> function</strong></p>
<ul>
<li><code>canvas</code> - SC canvas wrapper object (required)</li>
<li><code>mainDimensions</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>mapDimensions</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>initializeMinimap</code> function</strong> - is an object containing the following attributes:</p>
<ul>
<li><code>checkForMinimapChanges</code> - a function that can be invoked by an animation object, to adjust responsively to changes in the host DOM canvas element’s dimensions (responsive canvas)</li>
<li><code>mainCell</code> - the scene Cell wrapper object</li>
<li><code>killCanvasMinimap</code> - kill function, to remove everything associated with the scene Cell and minimap 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="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_">initializeMinimap</span> = (<span class="hljs-params">args = {}, 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">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 navigation module error: missing Scrawl-canvas object argument'</span>);
<span class="hljs-keyword">let</span> { mainDimensions, mapDimensions, supportedKey, canvas } = args;
<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> (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 canvas minimap 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>
<p>Magic numbers</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> mainDimensionX = <span class="hljs-number">1600</span>,
mainDimensionY = <span class="hljs-number">1600</span>,
mapDimensionX = <span class="hljs-number">200</span>,
mapDimensionY = <span class="hljs-number">200</span>;
<span class="hljs-keyword">if</span> (mainDimensions) {
<span class="hljs-keyword">if</span> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(mainDimensions)){
mainDimensionX = mainDimensions[<span class="hljs-number">0</span>] || <span class="hljs-number">1600</span>;
mainDimensionY = mainDimensions[<span class="hljs-number">1</span>] || <span class="hljs-number">1600</span>;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (mainDimensions.<span class="hljs-property">toFixed</span>) {
mainDimensionX = mainDimensions || <span class="hljs-number">1600</span>;
mainDimensionY = mainDimensions || <span class="hljs-number">1600</span>;
}
}
<span class="hljs-keyword">if</span> (mapDimensions) {
<span class="hljs-keyword">if</span> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(mapDimensions)){
mapDimensionX = mapDimensions[<span class="hljs-number">0</span>] || <span class="hljs-number">200</span>;
mapDimensionY = mapDimensions[<span class="hljs-number">1</span>] || <span class="hljs-number">200</span>;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (mapDimensions.<span class="hljs-property">toFixed</span>) {
mapDimensionX = mapDimensions || <span class="hljs-number">200</span>;
mapDimensionY = mapDimensions || <span class="hljs-number">200</span>;
}
}
<span class="hljs-keyword">const</span> mainMapRatioX = mainDimensionX / mapDimensionX,
mainMapRatioY = mainDimensionY / mapDimensionY;
<span class="hljs-keyword">let</span> [displayWidth, displayHeight] = canvas.<span class="hljs-title function_">get</span>(<span class="hljs-string">"dimensions"</span>);
<span class="hljs-keyword">let</span> frameWidth = (displayWidth / mainDimensionX) * mapDimensionX;
<span class="hljs-keyword">let</span> frameHeight = (displayHeight / mainDimensionY) * mapDimensionY;
canvas.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">includeInTabNavigation</span>: <span class="hljs-literal">true</span>,
}).<span class="hljs-title function_">setBase</span>({</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>The base Cell needs to compile after the other Cells</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">compileOrder</span>: <span class="hljs-number">2</span>
});</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Build out the main Cell (default: 1600px x 1600px)</p>
<ul>
<li>we don’t actually display this Cell</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> mainCell = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"main-cell"</span>,
<span class="hljs-attr">dimensions</span>: [mainDimensionX, mainDimensionY],
<span class="hljs-attr">shown</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">compileOrder</span>: <span class="hljs-number">0</span>,
});</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Rely on the main code to populate the main Cell with entitys, and the functionality required to interact with them. We only care here about displaying the main map in the canvas element</p>
</div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Display the main Cell in the base Cell</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> mainCellPicture = scrawl.<span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"main-cell-picture"</span>,
<span class="hljs-attr">group</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">asset</span>: <span class="hljs-string">"main-cell"</span>,
<span class="hljs-attr">dimensions</span>: [displayWidth, displayHeight],
<span class="hljs-attr">copyDimensions</span>: [displayWidth, displayHeight]
});</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Build out the smaller map Cell (default: 200px x 200px)</p>
<ul>
<li>this will initially display in the top right corner</li>
<li>it will be draggable too</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> pivotGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell-pivot-group"</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>
});
<span class="hljs-keyword">const</span> mapPivot = scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell-pivot"</span>,
<span class="hljs-attr">group</span>: <span class="hljs-string">"map-cell-pivot-group"</span>,
<span class="hljs-attr">start</span>: [displayWidth - mapDimensionX, <span class="hljs-number">0</span>],
<span class="hljs-attr">dimensions</span>: [mapDimensionX, mapDimensionY],
<span class="hljs-attr">method</span>: <span class="hljs-string">"none"</span>
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Functionality so we can drag-drop the map Cell around the base Cell</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> mapDragZone = scrawl.<span class="hljs-title function_">makeDragZone</span>({
<span class="hljs-attr">zone</span>: canvas,
<span class="hljs-attr">collisionGroup</span>: <span class="hljs-string">"map-cell-pivot-group"</span>,
<span class="hljs-attr">coordinateSource</span>: canvas.<span class="hljs-property">base</span>,
<span class="hljs-attr">endOn</span>: [<span class="hljs-string">"up"</span>, <span class="hljs-string">"leave"</span>],
<span class="hljs-attr">preventTouchDefaultWhenDragging</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">processingOrder</span>: <span class="hljs-number">21</span>,
});
<span class="hljs-keyword">const</span> mapCell = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell"</span>,
<span class="hljs-attr">dimensions</span>: [mapDimensionX, mapDimensionY],</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>We pivot the map Cell to the draggable Block entity</p>
<ul>
<li>wherever the Block goes, the map Cell will follow</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">pivot</span>: <span class="hljs-string">"map-cell-pivot"</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">"pivot"</span>,
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"white"</span>,</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>The map Cell needs to compile after the large Cell</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">compileOrder</span>: <span class="hljs-number">1</span>
});</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Now we can copy the large Cell into the map Cell</p>
</div>
<div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell-picture"</span>,
<span class="hljs-attr">group</span>: <span class="hljs-string">"map-cell"</span>,
<span class="hljs-attr">asset</span>: <span class="hljs-string">"main-cell"</span>,
<span class="hljs-attr">dimensions</span>: [<span class="hljs-string">"100%"</span>, <span class="hljs-string">"100%"</span>],
<span class="hljs-attr">copyDimensions</span>: [<span class="hljs-string">"100%"</span>, <span class="hljs-string">"100%"</span>],
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">"fillThenDraw"</span>,
});</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>Add the draggable map frame</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> myFrameGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell-frame-group"</span>,
<span class="hljs-attr">host</span>: mapCell.<span class="hljs-property">name</span>
});
<span class="hljs-keyword">const</span> frame = scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">"map-cell-frame"</span>,
<span class="hljs-attr">group</span>: <span class="hljs-string">"map-cell-frame-group"</span>,
<span class="hljs-attr">dimensions</span>: [frameWidth, frameHeight],
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">"red"</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">"draw"</span>
});</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Functionality so we can drag-drop the frame around the map Cell</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">checkPermittedFramePosition</span> = (<span class="hljs-params">x, y</span>) => {
<span class="hljs-keyword">if</span> (x < <span class="hljs-number">0</span> || y < <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (x + frameWidth > mapDimensionX) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (y + frameHeight > mapDimensionY) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">updateFrames</span> = (<span class="hljs-params">x, y</span>) => {
<span class="hljs-keyword">let</span> newX = x * mainMapRatioX,
newY = y * mainMapRatioY;</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p>Adjust the position of the Picture wrt to the frame in the map</p>
</div>
<div class="content"><div class='highlight'><pre> mainCellPicture.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">copyStartX</span>: newX,
<span class="hljs-attr">copyStartY</span>: newY
});</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p>Adjust the position of the large Cell wrt the base Cell</p>
</div>
<div class="content"><div class='highlight'><pre> mainCell.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startX</span>: -newX,
<span class="hljs-attr">startY</span>: -newY
});
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">exitDrag</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">let</span> [x, y] = frame.<span class="hljs-title function_">get</span>(<span class="hljs-string">'position'</span>);
<span class="hljs-keyword">if</span> (x < <span class="hljs-number">0</span>) x = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (y < <span class="hljs-number">0</span>) y = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (x + frameWidth > mapDimensionX) x = mapDimensionX - frameWidth;
<span class="hljs-keyword">if</span> (y + frameHeight > mapDimensionY) y = mapDimensionY - frameHeight;
frame.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">start</span>: [x, y],
});
<span class="hljs-title function_">updateFrames</span>(x, y);
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">checkMinimapFrameDrag</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">let</span> [x, y] = frame.<span class="hljs-title function_">get</span>(<span class="hljs-string">'position'</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">checkPermittedFramePosition</span>(x, y)) <span class="hljs-title function_">updateFrames</span>(x, y);
<span class="hljs-keyword">else</span> <span class="hljs-title function_">frameDragZone</span>(<span class="hljs-string">'exit'</span>);
};
<span class="hljs-keyword">const</span> frameDragZone = scrawl.<span class="hljs-title function_">makeDragZone</span>({
<span class="hljs-attr">zone</span>: canvas,
<span class="hljs-attr">collisionGroup</span>: <span class="hljs-string">"map-cell-frame-group"</span>,
<span class="hljs-attr">coordinateSource</span>: mapCell,
<span class="hljs-attr">endOn</span>: [<span class="hljs-string">"up"</span>, <span class="hljs-string">"leave"</span>],
<span class="hljs-attr">updateWhileMoving</span>: checkMinimapFrameDrag,
<span class="hljs-attr">updateOnPrematureExit</span>: exitDrag,
<span class="hljs-attr">preventTouchDefaultWhenDragging</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">exposeCurrentArtefact</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">processingOrder</span>: <span class="hljs-number">20</span>,
});
<span class="hljs-keyword">const</span> <span class="hljs-title function_">checkForMinimapChanges</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">const</span> [w, h] = canvas.<span class="hljs-title function_">get</span>(<span class="hljs-string">"dimensions"</span>);
<span class="hljs-keyword">if</span> (w !== displayWidth || h !== displayHeight) {
displayWidth = w;
displayHeight = h;
frameWidth = (displayWidth / mainDimensionX) * mapDimensionX;
frameHeight = (displayHeight / mainDimensionY) * mapDimensionY;
mainCellPicture.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">dimensions</span>: [displayWidth, displayHeight],
<span class="hljs-attr">copyDimensions</span>: [displayWidth, displayHeight]
});
frame.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">dimensions</span>: [frameWidth, frameHeight]
});
mapPivot.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">start</span>: [displayWidth - mapDimensionX, <span class="hljs-number">0</span>]
});
}
mainCell.<span class="hljs-title function_">updateHere</span>();
mapCell.<span class="hljs-title function_">updateHere</span>();
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>Keyboard navigation</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">moveFrame</span> = (<span class="hljs-params">direction</span>) => {
<span class="hljs-keyword">let</span> [x, y] = frame.<span class="hljs-title function_">get</span>(<span class="hljs-string">'position'</span>);
<span class="hljs-keyword">switch</span> (direction) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span> :
x -= <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'up'</span> :
y -= <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span> :
x += <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'down'</span> :
y += <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">if</span>(<span class="hljs-title function_">checkPermittedFramePosition</span>(x, y)) {
<span class="hljs-keyword">let</span> newX = x * mainMapRatioX,
newY = y * mainMapRatioY;
frame.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startX</span>: x,
<span class="hljs-attr">startY</span>: y,
});</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Adjust the position of the Picture wrt to the frame in the map</p>
</div>
<div class="content"><div class='highlight'><pre> mainCellPicture.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">copyStartX</span>: newX,
<span class="hljs-attr">copyStartY</span>: newY
});</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>Adjust the position of the large Cell wrt the base Cell</p>
</div>
<div class="content"><div class='highlight'><pre> mainCell.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startX</span>: -newX,
<span class="hljs-attr">startY</span>: -newY
});
}
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">moveMinimap</span> = (<span class="hljs-params">direction</span>) => {
<span class="hljs-keyword">let</span> [x, y] = mapPivot.<span class="hljs-title function_">get</span>(<span class="hljs-string">'position'</span>);
<span class="hljs-keyword">switch</span> (direction) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span> :
x -= <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'up'</span> :
y -= <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span> :
x += <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'down'</span> :
y += <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
}
mapPivot.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startX</span>: x,
<span class="hljs-attr">startY</span>: y,
});
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Show/hide minimap</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> minimapIsShowing = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title function_">displayMinimap</span> = (<span class="hljs-params"></span>) => {
minimapIsShowing = !minimapIsShowing;
mapPivot.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">visibility</span>: minimapIsShowing,
});
mapCell.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">shown</span>: minimapIsShowing,
});
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>Keyboard event listener functions</p>
</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">shiftAlt</span>: {
<span class="hljs-title class_">Backspace</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">displayMinimap</span>(),
<span class="hljs-title class_">ArrowLeft</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveMinimap</span>(<span class="hljs-string">'left'</span>),
<span class="hljs-title class_">ArrowUp</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveMinimap</span>(<span class="hljs-string">'up'</span>),
<span class="hljs-title class_">ArrowRight</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveMinimap</span>(<span class="hljs-string">'right'</span>),
<span class="hljs-title class_">ArrowDown</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveMinimap</span>(<span class="hljs-string">'down'</span>),
},
<span class="hljs-attr">altOnly</span>: {
<span class="hljs-title class_">Backspace</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">displayMinimap</span>(),
<span class="hljs-title class_">ArrowLeft</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveFrame</span>(<span class="hljs-string">'left'</span>),
<span class="hljs-title class_">ArrowUp</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveFrame</span>(<span class="hljs-string">'up'</span>),
<span class="hljs-title class_">ArrowRight</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveFrame</span>(<span class="hljs-string">'right'</span>),
<span class="hljs-title class_">ArrowDown</span>: <span class="hljs-function">() =></span> <span class="hljs-title function_">moveFrame</span>(<span class="hljs-string">'down'</span>),
},
});</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</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_">killCanvasMinimap</span> = (<span class="hljs-params"></span>) => {
pivotGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
myFrameGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[mainCell.<span class="hljs-property">name</span>].<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[mapCell.<span class="hljs-property">name</span>].<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
keyboard.<span class="hljs-title function_">kill</span>();
<span class="hljs-title function_">frameDragZone</span>();
<span class="hljs-title function_">mapDragZone</span>();
};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Return object</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> {
mainCell,
checkForMinimapChanges,
killCanvasMinimap,
};
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<h4 id="export">Export</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> {
initializeMinimap,
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>