scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,428 lines (888 loc) • 55.4 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 002</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-001.html">
./demo/canvas-001.js
</a>
<a class="source" href="canvas-002.html">
./demo/canvas-002.js
</a>
<a class="source" href="canvas-003.html">
./demo/canvas-003.js
</a>
<a class="source" href="canvas-004.html">
./demo/canvas-004.js
</a>
<a class="source" href="canvas-005.html">
./demo/canvas-005.js
</a>
<a class="source" href="canvas-006.html">
./demo/canvas-006.js
</a>
<a class="source" href="canvas-007.html">
./demo/canvas-007.js
</a>
<a class="source" href="canvas-008.html">
./demo/canvas-008.js
</a>
<a class="source" href="canvas-009.html">
./demo/canvas-009.js
</a>
<a class="source" href="canvas-010.html">
./demo/canvas-010.js
</a>
<a class="source" href="canvas-011.html">
./demo/canvas-011.js
</a>
<a class="source" href="canvas-012.html">
./demo/canvas-012.js
</a>
<a class="source" href="canvas-013.html">
./demo/canvas-013.js
</a>
<a class="source" href="canvas-014.html">
./demo/canvas-014.js
</a>
<a class="source" href="canvas-015.html">
./demo/canvas-015.js
</a>
<a class="source" href="canvas-015a.html">
./demo/canvas-015a.js
</a>
<a class="source" href="canvas-016.html">
./demo/canvas-016.js
</a>
<a class="source" href="canvas-017.html">
./demo/canvas-017.js
</a>
<a class="source" href="canvas-018.html">
./demo/canvas-018.js
</a>
<a class="source" href="canvas-019.html">
./demo/canvas-019.js
</a>
<a class="source" href="canvas-019a.html">
./demo/canvas-019a.js
</a>
<a class="source" href="canvas-020.html">
./demo/canvas-020.js
</a>
<a class="source" href="canvas-021.html">
./demo/canvas-021.js
</a>
<a class="source" href="canvas-022.html">
./demo/canvas-022.js
</a>
<a class="source" href="canvas-023.html">
./demo/canvas-023.js
</a>
<a class="source" href="canvas-024.html">
./demo/canvas-024.js
</a>
<a class="source" href="canvas-025.html">
./demo/canvas-025.js
</a>
<a class="source" href="canvas-026.html">
./demo/canvas-026.js
</a>
<a class="source" href="canvas-027.html">
./demo/canvas-027.js
</a>
<a class="source" href="canvas-028.html">
./demo/canvas-028.js
</a>
<a class="source" href="canvas-029.html">
./demo/canvas-029.js
</a>
<a class="source" href="canvas-030.html">
./demo/canvas-030.js
</a>
<a class="source" href="canvas-031.html">
./demo/canvas-031.js
</a>
<a class="source" href="canvas-032.html">
./demo/canvas-032.js
</a>
<a class="source" href="canvas-033.html">
./demo/canvas-033.js
</a>
<a class="source" href="canvas-034.html">
./demo/canvas-034.js
</a>
<a class="source" href="canvas-035.html">
./demo/canvas-035.js
</a>
<a class="source" href="canvas-036.html">
./demo/canvas-036.js
</a>
<a class="source" href="canvas-037.html">
./demo/canvas-037.js
</a>
<a class="source" href="canvas-038.html">
./demo/canvas-038.js
</a>
<a class="source" href="canvas-039.html">
./demo/canvas-039.js
</a>
<a class="source" href="canvas-040.html">
./demo/canvas-040.js
</a>
<a class="source" href="canvas-041.html">
./demo/canvas-041.js
</a>
<a class="source" href="canvas-042.html">
./demo/canvas-042.js
</a>
<a class="source" href="canvas-043.html">
./demo/canvas-043.js
</a>
<a class="source" href="canvas-044.html">
./demo/canvas-044.js
</a>
<a class="source" href="canvas-045.html">
./demo/canvas-045.js
</a>
<a class="source" href="canvas-046.html">
./demo/canvas-046.js
</a>
<a class="source" href="canvas-047.html">
./demo/canvas-047.js
</a>
<a class="source" href="canvas-048.html">
./demo/canvas-048.js
</a>
<a class="source" href="canvas-049.html">
./demo/canvas-049.js
</a>
<a class="source" href="canvas-050.html">
./demo/canvas-050.js
</a>
<a class="source" href="canvas-051.html">
./demo/canvas-051.js
</a>
<a class="source" href="canvas-052.html">
./demo/canvas-052.js
</a>
<a class="source" href="canvas-053.html">
./demo/canvas-053.js
</a>
<a class="source" href="canvas-054.html">
./demo/canvas-054.js
</a>
<a class="source" href="canvas-055.html">
./demo/canvas-055.js
</a>
<a class="source" href="canvas-056.html">
./demo/canvas-056.js
</a>
<a class="source" href="canvas-057.html">
./demo/canvas-057.js
</a>
<a class="source" href="canvas-058.html">
./demo/canvas-058.js
</a>
<a class="source" href="canvas-059.html">
./demo/canvas-059.js
</a>
<a class="source" href="canvas-060.html">
./demo/canvas-060.js
</a>
<a class="source" href="canvas-061.html">
./demo/canvas-061.js
</a>
<a class="source" href="canvas-062.html">
./demo/canvas-062.js
</a>
<a class="source" href="canvas-063.html">
./demo/canvas-063.js
</a>
<a class="source" href="canvas-064.html">
./demo/canvas-064.js
</a>
<a class="source" href="core-001.html">
./demo/core-001.js
</a>
<a class="source" href="delaunator-001.html">
./demo/delaunator-001.js
</a>
<a class="source" href="delaunator-002.html">
./demo/delaunator-002.js
</a>
<a class="source" href="dom-001.html">
./demo/dom-001.js
</a>
<a class="source" href="dom-002.html">
./demo/dom-002.js
</a>
<a class="source" href="dom-003.html">
./demo/dom-003.js
</a>
<a class="source" href="dom-004.html">
./demo/dom-004.js
</a>
<a class="source" href="dom-005.html">
./demo/dom-005.js
</a>
<a class="source" href="dom-006.html">
./demo/dom-006.js
</a>
<a class="source" href="dom-007.html">
./demo/dom-007.js
</a>
<a class="source" href="dom-008.html">
./demo/dom-008.js
</a>
<a class="source" href="dom-009.html">
./demo/dom-009.js
</a>
<a class="source" href="dom-010.html">
./demo/dom-010.js
</a>
<a class="source" href="dom-011.html">
./demo/dom-011.js
</a>
<a class="source" href="dom-012.html">
./demo/dom-012.js
</a>
<a class="source" href="dom-013.html">
./demo/dom-013.js
</a>
<a class="source" href="dom-015.html">
./demo/dom-015.js
</a>
<a class="source" href="dom-016.html">
./demo/dom-016.js
</a>
<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
<a class="source" href="filters-002.html">
./demo/filters-002.js
</a>
<a class="source" href="filters-002a.html">
./demo/filters-002a.js
</a>
<a class="source" href="filters-003.html">
./demo/filters-003.js
</a>
<a class="source" href="filters-004.html">
./demo/filters-004.js
</a>
<a class="source" href="filters-005.html">
./demo/filters-005.js
</a>
<a class="source" href="filters-006.html">
./demo/filters-006.js
</a>
<a class="source" href="filters-007.html">
./demo/filters-007.js
</a>
<a class="source" href="filters-008.html">
./demo/filters-008.js
</a>
<a class="source" href="filters-009.html">
./demo/filters-009.js
</a>
<a class="source" href="filters-010.html">
./demo/filters-010.js
</a>
<a class="source" href="filters-011.html">
./demo/filters-011.js
</a>
<a class="source" href="filters-012.html">
./demo/filters-012.js
</a>
<a class="source" href="filters-013.html">
./demo/filters-013.js
</a>
<a class="source" href="filters-014.html">
./demo/filters-014.js
</a>
<a class="source" href="filters-015.html">
./demo/filters-015.js
</a>
<a class="source" href="filters-016.html">
./demo/filters-016.js
</a>
<a class="source" href="filters-017.html">
./demo/filters-017.js
</a>
<a class="source" href="filters-018.html">
./demo/filters-018.js
</a>
<a class="source" href="filters-019.html">
./demo/filters-019.js
</a>
<a class="source" href="filters-020.html">
./demo/filters-020.js
</a>
<a class="source" href="filters-021.html">
./demo/filters-021.js
</a>
<a class="source" href="filters-022.html">
./demo/filters-022.js
</a>
<a class="source" href="filters-023.html">
./demo/filters-023.js
</a>
<a class="source" href="filters-024.html">
./demo/filters-024.js
</a>
<a class="source" href="filters-025.html">
./demo/filters-025.js
</a>
<a class="source" href="filters-026.html">
./demo/filters-026.js
</a>
<a class="source" href="filters-027.html">
./demo/filters-027.js
</a>
<a class="source" href="filters-101.html">
./demo/filters-101.js
</a>
<a class="source" href="filters-102.html">
./demo/filters-102.js
</a>
<a class="source" href="filters-103.html">
./demo/filters-103.js
</a>
<a class="source" href="filters-104.html">
./demo/filters-104.js
</a>
<a class="source" href="filters-105.html">
./demo/filters-105.js
</a>
<a class="source" href="filters-501.html">
./demo/filters-501.js
</a>
<a class="source" href="filters-502.html">
./demo/filters-502.js
</a>
<a class="source" href="filters-503.html">
./demo/filters-503.js
</a>
<a class="source" href="filters-504.html">
./demo/filters-504.js
</a>
<a class="source" href="filters-505.html">
./demo/filters-505.js
</a>
<a class="source" href="mediapipe-001.html">
./demo/mediapipe-001.js
</a>
<a class="source" href="mediapipe-002.html">
./demo/mediapipe-002.js
</a>
<a class="source" href="mediapipe-003.html">
./demo/mediapipe-003.js
</a>
<a class="source" href="modules-001.html">
./demo/modules-001.js
</a>
<a class="source" href="modules-002.html">
./demo/modules-002.js
</a>
<a class="source" href="modules-003.html">
./demo/modules-003.js
</a>
<a class="source" href="modules-004.html">
./demo/modules-004.js
</a>
<a class="source" href="modules-005.html">
./demo/modules-005.js
</a>
<a class="source" href="packets-001.html">
./demo/packets-001.js
</a>
<a class="source" href="packets-002.html">
./demo/packets-002.js
</a>
<a class="source" href="particles-001.html">
./demo/particles-001.js
</a>
<a class="source" href="particles-002.html">
./demo/particles-002.js
</a>
<a class="source" href="particles-003.html">
./demo/particles-003.js
</a>
<a class="source" href="particles-004.html">
./demo/particles-004.js
</a>
<a class="source" href="particles-005.html">
./demo/particles-005.js
</a>
<a class="source" href="particles-006.html">
./demo/particles-006.js
</a>
<a class="source" href="particles-007.html">
./demo/particles-007.js
</a>
<a class="source" href="particles-008.html">
./demo/particles-008.js
</a>
<a class="source" href="particles-009.html">
./demo/particles-009.js
</a>
<a class="source" href="particles-010.html">
./demo/particles-010.js
</a>
<a class="source" href="particles-011.html">
./demo/particles-011.js
</a>
<a class="source" href="particles-012.html">
./demo/particles-012.js
</a>
<a class="source" href="particles-013.html">
./demo/particles-013.js
</a>
<a class="source" href="particles-014.html">
./demo/particles-014.js
</a>
<a class="source" href="particles-015.html">
./demo/particles-015.js
</a>
<a class="source" href="particles-016.html">
./demo/particles-016.js
</a>
<a class="source" href="rapier-001.html">
./demo/rapier-001.js
</a>
<a class="source" href="snippets-001.html">
./demo/snippets-001.js
</a>
<a class="source" href="snippets-002.html">
./demo/snippets-002.js
</a>
<a class="source" href="snippets-003.html">
./demo/snippets-003.js
</a>
<a class="source" href="snippets-004.html">
./demo/snippets-004.js
</a>
<a class="source" href="snippets-005.html">
./demo/snippets-005.js
</a>
<a class="source" href="snippets-006.html">
./demo/snippets-006.js
</a>
<a class="source" href="temp-000.html">
./demo/temp-000.js
</a>
<a class="source" href="temp-001.html">
./demo/temp-001.js
</a>
<a class="source" href="temp-001a.html">
./demo/temp-001a.js
</a>
<a class="source" href="temp-002.html">
./demo/temp-002.js
</a>
<a class="source" href="temp-003.html">
./demo/temp-003.js
</a>
<a class="source" href="temp-004.html">
./demo/temp-004.js
</a>
<a class="source" href="temp-005.html">
./demo/temp-005.js
</a>
<a class="source" href="temp-006.html">
./demo/temp-006.js
</a>
<a class="source" href="temp-007.html">
./demo/temp-007.js
</a>
<a class="source" href="temp-008.html">
./demo/temp-008.js
</a>
<a class="source" href="temp-009.html">
./demo/temp-009.js
</a>
<a class="source" href="temp-010.html">
./demo/temp-010.js
</a>
<a class="source" href="temp-011.html">
./demo/temp-011.js
</a>
<a class="source" href="temp-012.html">
./demo/temp-012.js
</a>
<a class="source" href="temp-013.html">
./demo/temp-013.js
</a>
<a class="source" href="temp-014.html">
./demo/temp-014.js
</a>
<a class="source" href="temp-015.html">
./demo/temp-015.js
</a>
<a class="source" href="temp-016.html">
./demo/temp-016.js
</a>
<a class="source" href="temp-017.html">
./demo/temp-017.js
</a>
<a class="source" href="temp-018.html">
./demo/temp-018.js
</a>
<a class="source" href="temp-018a.html">
./demo/temp-018a.js
</a>
<a class="source" href="temp-019.html">
./demo/temp-019.js
</a>
<a class="source" href="temp-020.html">
./demo/temp-020.js
</a>
<a class="source" href="temp-021.html">
./demo/temp-021.js
</a>
<a class="source" href="temp-022.html">
./demo/temp-022.js
</a>
<a class="source" href="temp-023.html">
./demo/temp-023.js
</a>
<a class="source" href="temp-024.html">
./demo/temp-024.js
</a>
<a class="source" href="temp-025.html">
./demo/temp-025.js
</a>
<a class="source" href="temp-026.html">
./demo/temp-026.js
</a>
<a class="source" href="temp-027.html">
./demo/temp-027.js
</a>
<a class="source" href="temp-028.html">
./demo/temp-028.js
</a>
<a class="source" href="temp-029.html">
./demo/temp-029.js
</a>
<a class="source" href="temp-030.html">
./demo/temp-030.js
</a>
<a class="source" href="temp-031.html">
./demo/temp-031.js
</a>
<a class="source" href="temp-032.html">
./demo/temp-032.js
</a>
<a class="source" href="temp-033.html">
./demo/temp-033.js
</a>
<a class="source" href="temp-034.html">
./demo/temp-034.js
</a>
<a class="source" href="temp-035.html">
./demo/temp-035.js
</a>
<a class="source" href="temp-036.html">
./demo/temp-036.js
</a>
<a class="source" href="temp-037.html">
./demo/temp-037.js
</a>
<a class="source" href="temp-100.html">
./demo/temp-100.js
</a>
<a class="source" href="temp-101.html">
./demo/temp-101.js
</a>
<a class="source" href="temp-102.html">
./demo/temp-102.js
</a>
<a class="source" href="temp-103.html">
./demo/temp-103.js
</a>
<a class="source" href="temp-104.html">
./demo/temp-104.js
</a>
<a class="source" href="temp-200.html">
./demo/temp-200.js
</a>
<a class="source" href="temp-201.html">
./demo/temp-201.js
</a>
<a class="source" href="temp-301.html">
./demo/temp-301.js
</a>
<a class="source" href="temp-inkscapeSvgFilters.html">
./demo/temp-inkscapeSvgFilters.js
</a>
<a class="source" href="temp-lottie.html">
./demo/temp-lottie.js
</a>
<a class="source" href="tensorflow-001.html">
./demo/tensorflow-001.js
</a>
<a class="source" href="tensorflow-002.html">
./demo/tensorflow-002.js
</a>
<a class="source" href="utilities.html">
./demo/utilities.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-canvas-002">Demo Canvas 002</h1>
<p>Block and wheel entity positioning (start, pivot, mimic, mouse)</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<p><a href="../../demo/canvas-002.html">Run code</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> {
addNativeListener,
library <span class="hljs-keyword">as</span> L,
makeBlock,
makeRender,
makeWheel,
observeAndUpdate,
} <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>
<span class="hljs-keyword">import</span> { reportSpeed, killArtefact } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utilities.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="scene-setup">Scene setup</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> canvas = L.<span class="hljs-property">artefact</span>.<span class="hljs-property">mycanvas</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Create and clone block and wheel entitys. For the sake of safety and sanity, create the (reference) entitys on which other artefacts will pivot and mimic first. Then create those other artefacts.</p>
<p>Note: setting this entity’s <code>method</code> value to <strong>none</strong> means that while it will perform all necessary calculations as part of the Display cycle, it will not complete its stamp action, thus will not appear on the display. This differs from setting its <code>visibility</code> attribute to false, which will make the entity skip both calculation and stamp operations</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> myPivot = <span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mouse-pivot'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'none'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">'center'</span>,
});
<span class="hljs-keyword">let</span> myblock = <span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'base-block'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">150</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">offsetX</span>: -<span class="hljs-number">140</span>,
<span class="hljs-attr">offsetY</span>: -<span class="hljs-number">50</span>,</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>To pivot this entity to the reference entity, we need to set both its <code>pivot</code> attribute (to the reference entity’s name, or the entity itself) <strong>and also</strong> set the <code>lockTo</code> attribute to the value <strong>‘pivot’</strong></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">pivot</span>: <span class="hljs-string">'mouse-pivot'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'darkblue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'gold'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillAndDraw'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: <span class="hljs-number">0.5</span>,
},
});
<span class="hljs-keyword">let</span> mywheel = <span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'base-wheel'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">60</span>,
<span class="hljs-attr">startAngle</span>: <span class="hljs-number">35</span>,
<span class="hljs-attr">endAngle</span>: -<span class="hljs-number">35</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">offsetX</span>: <span class="hljs-number">140</span>,
<span class="hljs-attr">offsetY</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'mouse-pivot'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'purple'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'gold'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillAndDraw'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: -<span class="hljs-number">0.5</span>,
},
});
myblock.<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pivot-block'</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'red'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'base-block'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">offsetX</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">offsetY</span>: <span class="hljs-number">110</span>,
<span class="hljs-attr">addPivotOffset</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: <span class="hljs-number">0</span>,
},
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pivot-wheel'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'base-wheel'</span>,
<span class="hljs-attr">addPivotRotation</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'50%'</span>,
<span class="hljs-attr">offsetY</span>: <span class="hljs-number">0</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mimic-wheel'</span>,</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p><code>mimic</code> is an extended form of <code>pivot</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">mimic</span>: <span class="hljs-string">'base-wheel'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'mimic'</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>When an entity mimics another entity’s dimensions, its own dimensions (width, height) can be added to the mimic dimensions</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">width</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">20</span>,</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Handles can be directly affected by mimic dimensions. If the entity adds its own dimensions to the mimics dimensions, then it may also need to add appropriate handle values to the mimic’s handle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">handleX</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkgreen'</span>,</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>The default values for the <strong>useMimic</strong> and <strong>addOwn</strong> variables is ‘false’ - including false attributes here only for convenience during development work</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">useMimicDimensions</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicScale</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicStart</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicHandle</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicOffset</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicRotation</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicFlip</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">addOwnDimensionsToMimic</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">addOwnScaleToMimic</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">addOwnStartToMimic</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">addOwnHandleToMimic</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">addOwnOffsetToMimic</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">addOwnRotationToMimic</span>: <span class="hljs-literal">false</span>,
});
mywheel.<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mimic-block'</span>,
<span class="hljs-attr">mimic</span>: <span class="hljs-string">'base-block'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'mimic'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">60</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkgreen'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">useMimicDimensions</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicScale</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicStart</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicOffset</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicRotation</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">addOwnDimensionsToMimic</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<h4 id="user-interaction">User interaction</h4>
<p>Function to check whether mouse cursor is over canvas, and lock the reference entity accordingly</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> mouseCheck = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> active = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (canvas.<span class="hljs-property">here</span>.<span class="hljs-property">active</span> !== active) {
active = canvas.<span class="hljs-property">here</span>.<span class="hljs-property">active</span>;
myPivot.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">lockTo</span>: (active) ? <span class="hljs-string">'mouse'</span> : <span class="hljs-string">'start'</span>
});
}
};
}();</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>For this demo we will suppress touchmove functionality over the canvas</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">addNativeListener</span>(<span class="hljs-string">'touchmove'</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {
e.<span class="hljs-title function_">preventDefault</span>();
e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>;
}, canvas.<span class="hljs-property">domElement</span>);</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Setup form observer functionality.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">observeAndUpdate</span>({
<span class="hljs-attr">event</span>: [<span class="hljs-string">'input'</span>, <span class="hljs-string">'change'</span>],
<span class="hljs-attr">origin</span>: <span class="hljs-string">'.controlItem'</span>,
<span class="hljs-attr">target</span>: canvas.<span class="hljs-property">base</span>,
<span class="hljs-attr">useNativeListener</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">preventDefault</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">updates</span>: {
<span class="hljs-attr">backgroundColor</span>: [<span class="hljs-string">'backgroundColor'</span>, <span class="hljs-string">'raw'</span>],
<span class="hljs-attr">clearAlpha</span>: [<span class="hljs-string">'clearAlpha'</span>, <span class="hljs-string">'float'</span>],
},
});
<span class="hljs-keyword">const</spa