scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,439 lines (890 loc) • 61.7 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 036</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-036">Demo Canvas 036</h1>
<p>Cell functionality (functionality and associated tests needs to be expanded)</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-036.html">Run code</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>;
<span class="hljs-keyword">import</span> { reportSpeed } <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">const</span> canvas = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">canvas</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 a Cell on the canvas</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> cell1 = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'cell-1'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">150</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">150</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'40%'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'40%'</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: -<span class="hljs-number">0.6</span>,
},
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lightblue'</span>,
});</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Cells cannot be cloned (yet - may introduce that functionality in a future update)</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> cell2 = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'cell-2'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-string">'20%'</span>,
<span class="hljs-attr">height</span>: <span class="hljs-string">'20%'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">'60%'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">'50%'</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: <span class="hljs-number">0.4</span>,
},
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lightblue'</span>,
});</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Create a shape track along which we can animate a Cell</p>
</div>
<div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">makeOval</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mytrack'</span>,
<span class="hljs-attr">radiusX</span>: <span class="hljs-string">'40%'</span>,
<span class="hljs-attr">radiusY</span>: <span class="hljs-string">'40%'</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">handle</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'#808080'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">precision</span>: <span class="hljs-number">0.1</span>,
});</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>This Cell will animate along the track we created earlier</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> cell3 = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'cell-3'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'bottom'</span>,
<span class="hljs-attr">path</span>: <span class="hljs-string">'mytrack'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">addPathRotation</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">constantPathSpeed</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">pathPosition</span>: -<span class="hljs-number">0.001</span>,
},
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'black'</span>,
});</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Create some entitys to which we can pivot and mimic Cells</p>
<ul>
<li>Cells cannot take part in artefact functionality such as drag-and-drop because they are assets who use positional mixins to gain artefact-like behaviour, but they can’t be included in Groups because they are limited to grouping Artefacts together</li>
<li>One way to get around this limitation is to use Block entitys for testing collision detection, and then route mouse hover functionality through to any Cells pivoting or mimicking them. This should also allow us to drag-and-drop Cells (by proxy)</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> myGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'target-group'</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
});
scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'block-1'</span>,
<span class="hljs-attr">group</span>: <span class="hljs-string">'target-group'</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'80%'</span>, <span class="hljs-string">'10%'</span>],
<span class="hljs-attr">handle</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">dimensions</span>: [<span class="hljs-string">'18%'</span>, <span class="hljs-string">'18%'</span>],
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'coral'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: -<span class="hljs-number">0.2</span>,
},
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillThenDraw'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'block-2'</span>,
<span class="hljs-attr">dimensions</span>: [<span class="hljs-number">120</span>, <span class="hljs-number">100</span>],
<span class="hljs-attr">handle</span>: [<span class="hljs-string">'left'</span>, <span class="hljs-string">'top'</span>],
<span class="hljs-attr">startY</span>: <span class="hljs-string">'80%'</span>,
<span class="hljs-attr">roll</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">roll</span>: <span class="hljs-number">0</span>,
},
});</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Create the drag-and-drop zone</p>
</div>
<div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">makeDragZone</span>({
<span class="hljs-attr">zone</span>: canvas,
<span class="hljs-attr">collisionGroup</span>: myGroup,
<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>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Check to see if a Cell will mimic on an entity</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> cell4 = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'cell-4'</span>,
<span class="hljs-attr">mimic</span>: <span class="hljs-string">'block-1'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'mimic'</span>,
<span class="hljs-attr">width</span>: -<span class="hljs-number">20</span>,
<span class="hljs-attr">height</span>: -<span class="hljs-number">20</span>,
<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">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">false</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>,
<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>,
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lavender'</span>,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Check to see if a Cell will pivot to an entity</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> cell5 = canvas.<span class="hljs-title function_">buildCell</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'cell-5'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'block-2'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">dimensions</span>: [<span class="hljs-number">110</span>, <span class="hljs-number">90</span>],
<span class="hljs-attr">handle</span>: [-<span class="hljs-number">5</span>, -<span class="hljs-number">5</span>],
<span class="hljs-attr">addPivotRotation</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lavender'</span>,
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Add in a hover check</p>
</div>
<div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">entity</span>[<span class="hljs-string">'block-1'</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">onEnter</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1.2</span>,
});
cell4.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'pink'</span>,
});
},
<span class="hljs-attr">onLeave</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1</span>,
});
cell4.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lavender'</span>,
});
},
});
scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">entity</span>[<span class="hljs-string">'block-2'</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">onEnter</span>: <span class="hljs-function">() =></span> cell5.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'pink'</span> }),
<span class="hljs-attr">onLeave</span>: <span class="hljs-function">() =></span> cell5.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'lavender'</span> }),
});
scrawl.<span class="hljs-title function_">addListener</span>(<span class="hljs-string">'move'</span>, <span class="hljs-function">() =></span> canvas.<span class="hljs-propert