scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,087 lines (702 loc) • 51.8 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Wheel factory</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="../core/animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="../core/document.html">
./source/core/document.js
</a>
<a class="source" href="../core/events.html">
./source/core/events.js
</a>
<a class="source" href="../core/init.html">
./source/core/init.js
</a>
<a class="source" href="../core/library.html">
./source/core/library.js
</a>
<a class="source" href="../core/random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="../core/snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="../core/userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="../core/utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="action.html">
./source/factory/action.js
</a>
<a class="source" href="anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="animation.html">
./source/factory/animation.js
</a>
<a class="source" href="bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="block.html">
./source/factory/block.js
</a>
<a class="source" href="canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="cell.html">
./source/factory/cell.js
</a>
<a class="source" href="cog.html">
./source/factory/cog.js
</a>
<a class="source" href="color.html">
./source/factory/color.js
</a>
<a class="source" href="conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="element.html">
./source/factory/element.js
</a>
<a class="source" href="emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="filter.html">
./source/factory/filter.js
</a>
<a class="source" href="filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="grid.html">
./source/factory/grid.js
</a>
<a class="source" href="group.html">
./source/factory/group.js
</a>
<a class="source" href="imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="line.html">
./source/factory/line.js
</a>
<a class="source" href="lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="loom.html">
./source/factory/loom.js
</a>
<a class="source" href="mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="net.html">
./source/factory/net.js
</a>
<a class="source" href="noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="oval.html">
./source/factory/oval.js
</a>
<a class="source" href="palette.html">
./source/factory/palette.js
</a>
<a class="source" href="particle.html">
./source/factory/particle.js
</a>
<a class="source" href="particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="picture.html">
./source/factory/picture.js
</a>
<a class="source" href="polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="shape.html">
./source/factory/shape.js
</a>
<a class="source" href="spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="stack.html">
./source/factory/stack.js
</a>
<a class="source" href="star.html">
./source/factory/star.js
</a>
<a class="source" href="state.html">
./source/factory/state.js
</a>
<a class="source" href="tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="tween.html">
./source/factory/tween.js
</a>
<a class="source" href="unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="vector.html">
./source/factory/vector.js
</a>
<a class="source" href="videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="../mixin/anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="../mixin/asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="../mixin/assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="../mixin/assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="../mixin/base.html">
./source/mixin/base.js
</a>
<a class="source" href="../mixin/cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="../mixin/delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="../mixin/displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="../mixin/dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="../mixin/entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="../mixin/filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="../mixin/mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="../mixin/path.html">
./source/mixin/path.js
</a>
<a class="source" href="../mixin/pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="../mixin/pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="../mixin/position.html">
./source/mixin/position.js
</a>
<a class="source" href="../mixin/shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="../mixin/shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="../mixin/shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="../mixin/styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="../mixin/tween.html">
./source/mixin/tween.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="wheel-factory">Wheel factory</h1>
<p>Wheel entitys are circles and part-circles rendered onto a DOM <canvas> element using the Canvas 2D API’s <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D">Path2D interface</a> - specifically the arc() and lineTo() methods.</p>
<ul>
<li>Positioning functionality for the Wheel is supplied by the <strong>position</strong> mixin, while rendering functionality comes from the <strong>entity</strong> mixin. </li>
<li>Wheel dimensions are tied closely to its <strong>radius</strong> attribute; relative dimensions are calculated using the Wheel’s Cell container’s width.</li>
<li>Wheels can use CSS color Strings for their fillStyle and strokeStyle values, alongside <strong>Gradient</strong>, <strong>RadialGradient</strong>, <strong>Color</strong> and <strong>Pattern</strong> objects. </li>
<li>They will also accept <strong>Filter</strong> objects.</li>
<li>They can use <strong>Anchor</strong> objects for user navigation. </li>
<li>They can be rendered to the canvas by including them in a <strong>Cell</strong> object’s <strong>Group</strong>. </li>
<li>They can be animated directly, or using delta animation, or act as the target for <strong>Tween</strong> animations.</li>
<li>Wheels can be cloned, and killed.</li>
</ul>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-001.html">Canvas-001</a> - Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys</li>
<li><a href="../../demo/canvas-005.html">Canvas-005</a> - Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween</li>
<li><a href="../../demo/canvas-007.html">Canvas-007</a> - Apply filters at the entity, group and cell level</li>
<li><a href="../../demo/packets-002.html">Packets-002</a> - Scrawl-canvas packets; save and load a range of different entitys</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors, radian } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, xt, xto, isa_number, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;
<span class="hljs-keyword">import</span> entityMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/entity.js'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p><strong>ensureFloat</strong> - return the value provided as a floating point number of given precision; return 0 if not a number</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">ensureFloat</span> = (<span class="hljs-params">val, precision</span>) => {
val = <span class="hljs-built_in">parseFloat</span>(val);
<span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isa_number</span>(val)) val = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isa_number</span>(precision)) precision = <span class="hljs-number">0</span>;
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(val.<span class="hljs-title function_">toFixed</span>(precision));
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="wheel-constructor">Wheel constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Wheel</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-title function_">xto</span>(items.<span class="hljs-property">dimensions</span>, items.<span class="hljs-property">width</span>, items.<span class="hljs-property">height</span>, items.<span class="hljs-property">radius</span>)) items.<span class="hljs-property">radius</span> = <span class="hljs-number">5</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">entityInit</span>(items);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</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="wheel-prototype">Wheel prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Wheel</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);
P.<span class="hljs-property">type</span> = <span class="hljs-string">'Wheel'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'entity'</span>;
P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">true</span>;
P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="mixins">Mixins</h4>
<ul>
<li><a href="../mixin/base.html">base</a></li>
<li><a href="../mixin/entity.html">entity</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);
P = <span class="hljs-title function_">entityMix</span>(P);</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<h4 id="wheel-attributes">Wheel attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li>
<li>Attributes defined in the <a href="../mixin/position.html">position mixin</a>: <strong>group, visibility, order, calculateOrder, stampOrder, start, <em>startX</em>, <em>startY</em>, handle, <em>handleX</em>, <em>handleY</em>, offset, <em>offsetX</em>, <em>offsetY</em>, dimensions, <em>width</em>, <em>height</em>, pivoted, mimicked, lockTo, <em>lockXTo</em>, <em>lockYTo</em>, scale, roll, noUserInteraction, noPositionDependencies, noCanvasEngineUpdates, noFilters, noPathUpdates, purge, bringToFrontOnDrag</strong>.</li>
<li>Attributes defined in the <a href="../mixin/delta.html">delta mixin</a>: <strong>delta, noDeltaUpdates</strong>.</li>
<li>Attributes defined in the <a href="../mixin/pivot.html">pivot mixin</a>: <strong>pivot, pivotCorner, addPivotHandle, addPivotOffset, addPivotRotation</strong>.</li>
<li>Attributes defined in the <a href="../mixin/mimic.html">mimic mixin</a>: <strong>mimic, useMimicDimensions, useMimicScale, useMimicStart, useMimicHandle, useMimicOffset, useMimicRotation, useMimicFlip, addOwnDimensionsToMimic, addOwnScaleToMimic, addOwnStartToMimic, addOwnHandleToMimic, addOwnOffsetToMimic, addOwnRotationToMimic</strong>.</li>
<li>Attributes defined in the <a href="../mixin/path.html">path mixin</a>: <strong>path, pathPosition, addPathHandle, addPathOffset, addPathRotation, constantPathSpeed</strong>.</li>
<li>Attributes defined in the <a href="../mixin/entity.html">entity mixin</a>: <strong>method, pathObject, winding, flipReverse, flipUpend, scaleOutline, lockFillStyleToEntity, lockStrokeStyleToEntity, onEnter, onLeave, onDown, onUp, <em>fillStyle, strokeStyle, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, lineDash, lineDashOffset, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, filter</em></strong>.</li>
<li>Attributes defined in the <a href="../mixin/anchor.html">anchor mixin</a>: <strong>anchor</strong>.</li>
<li>Attributes defined in the <a href="../mixin/filter.html">filter mixin</a>: <strong>filters, isStencil</strong>.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p><strong>radius</strong> - the circle’s radius measured in Number pixels, or as a String% - `’10%’ - of the Cell’s width</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">radius</span>: <span class="hljs-number">5</span>,</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p><strong>startAngle</strong>, <strong>endAngle</strong> - the Number angles at which the rendered arc starts and ends, in <strong>degrees</strong> (not radians), with 0° and 360° set horizontally to the right (+ve x axis) of the circle’s center.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">startAngle</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">endAngle</span>: <span class="hljs-number">360</span>,</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><strong>clockwise</strong> - a Boolean flag which, when true, draws the arc in a clockwise rotation between the start and end angles; a false value causes the arc to be drawn in an anti-clockwise direction.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">clockwise</span>: <span class="hljs-literal">true</span>,</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p><strong>includeCenter</strong> - a Boolean flag which, when true, draws a line from the end angle to the center of the circle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">includeCenter</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>closed</strong> - a Boolean flag which, when true, draws a line from the end angle to the start angle. If includeCenter has been set to true, the line will be drawn from the center of the circle to the start angle position on the circle circumference.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">closed</span>: <span class="hljs-literal">true</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>No additional packet functionality required</p>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>No additional clone functionality required</p>
</div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality required</p>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>,
S = P.<span class="hljs-property">setters</span>,
D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><strong>width</strong> and <strong>height</strong> (and dimensions) values are largely irrelevant to Wheel entitys; they get used internally purely as part of the Display cycle stamp functionality. </p>
</div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>If they are used to (delta)set the entity’s values then the radius will be set to half the supplied value with String% values calculated from the entity’s host’s width, while height and width will equalize to maintain dimensional integrity.</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">width</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-keyword">if</span> (val != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">let</span> dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>;
dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = val;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
}
};
D.<span class="hljs-property">width</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-keyword">let</span> dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>;
dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = <span class="hljs-title function_">addStrings</span>(dims[<span class="hljs-number">0</span>], val);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
};
S.<span class="hljs-property">height</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-keyword">if</span> (val != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">let</span> dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>;
dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = val;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
}
};
D.<span class="hljs-property">height</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-keyword">let</span> dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>;
dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = <span class="hljs-title function_">addStrings</span>(dims[<span class="hljs-number">0</span>], val);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
};
S.<span class="hljs-property">dimensions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">w, h</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setCoordinateHelper</span>(<span class="hljs-string">'dimensions'</span>, w, h);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
};
D.<span class="hljs-property">dimensions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">w, h</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setDeltaCoordinateHelper</span>(<span class="hljs-string">'dimensions'</span>, w, h);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">dimensionsHelper</span>();
}</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>Setters for attributes specific to the Wheel entity</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">radius</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span> = val;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">radiusHelper</span>();
};
D.<span class="hljs-property">radius</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span> = <span class="hljs-title function_">addStrings</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span>, val);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">radiusHelper</span>();
};
S.<span class="hljs-property">startAngle</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">startAngle</span> = <span class="hljs-title function_">ensureFloat</span>(val, <span class="hljs-number">4</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};
D.<span class="hljs-property">startAngle</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">startAngle</span> += <span class="hljs-title function_">ensureFloat</span>(val, <span class="hljs-number">4</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};
S.<span class="hljs-property">endAngle</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">endAngle</span> = <span class="hljs-title function_">ensureFloat</span>(val, <span class="hljs-number">4</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};
D.<span class="hljs-property">endAngle</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">endAngle</span> += <span class="hljs-title function_">ensureFloat</span>(val, <span class="hljs-number">4</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};
S.<span class="hljs-property">closed</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">bool</span>) {
<span class="hljs-keyword">if</span>(<span class="hljs-title function_">xt</span>(bool)) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">closed</span> = !!bool;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">includeCenter</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">bool</span>) {
<span class="hljs-keyword">if</span>(<span class="hljs-title function_">xt</span>(bool)) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">includeCenter</span> = !!bool;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">clockwise</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">bool</span>) {
<span class="hljs-keyword">if</span>(<span class="hljs-title function_">xt</span>(bool)) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">clockwise</span> = !!bool;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>Internal functions for reconciling dimensions and radius attribute values</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">dimensionsHelper</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> width = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>[<span class="hljs-number">0</span>];
<span class="hljs-keyword">if</span> (width.<span class="hljs-property">substring</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span> = <span class="hljs-string">`<span class="hljs-subst">${(<span class="hljs-built_in">parseFloat</span>(width) / <span class="hljs-number">2</span>)}</span>%`</span>;
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span> = (width / <span class="hljs-number">2</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};
P.<span class="hljs-property">radiusHelper</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> radius = <span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span>,
dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>;
<span class="hljs-keyword">if</span> (radius.<span class="hljs-property">substring</span>) dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = (<span class="hljs-built_in">parseFloat</span>(radius) * <span class="hljs-number">2</span>) + <span class="hljs-string">'%'</span>;
<span class="hljs-keyword">else</span> dims[<span class="hljs-number">0</span>] = dims[<span class="hljs-number">1</span>] = (radius * <span class="hljs-number">2</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p>Dimensions calculations - overwrites mixin/position.js function</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">cleanDimensionsAdditionalActions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> radius = <span class="hljs-variable language_">this</span>.<span class="hljs-property">radius</span>,
dims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentDimensions</span>,
calculatedRadius = (radius.<span class="hljs-property">substring</span>) ? (<span class="hljs-built_in">parseFloat</span>(radius) / <span class="hljs-number">100</span>) * dims[<span class="hljs-number">0</span>] : radius;
<span class="hljs-keyword">if</span> (dims[<span class="hljs-number">0</span>] !== calculatedRadius * <span class="hljs-number">2</span>) {
dims[<span class="hljs-number">1</span>] = dims[<span class="hljs-number">0</span>];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentRadius</span> = dims[<span class="hljs-number">0</span>] / <span class="hljs-number">2</span>;
}
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentRadius</span> = calculatedRadius;
};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Calculate the Wheel entity’s <strong>Path2D object</strong></p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">cleanPathObject</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPathObject</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">noPathUpdates</span> || !<span class="hljs-variable language_">this</span>.<span class="hljs-property">pathObject</span>) {
<span class="hljs-keyword">let</span> p = <span class="hljs-variable language_">this</span>.<span class="hljs-property">pathObject</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Path2</span>D();
<span class="hljs-keyword">let</span> handle = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentStampHandlePosition</span>,
scale = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentScale</span>,
radius = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentRadius</span> * scale,
x = radius - (handle[<span class="hljs-number">0</span>] * scale),
y = radius - (handle[<span class="hljs-number">1</span>] * scale),
starts = <span class="hljs-variable language_">this</span>.<span class="hljs-property">startAngle</span> * radian,
ends = <span class="hljs-variable language_">this</span>.<span class="hljs-property">endAngle</span> * radian;
p.<span class="hljs-title function_">arc</span>(x, y, radius, starts, ends, !<span class="hljs-variable language_">this</span>.<span class="hljs-property">clockwise</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">includeCenter</span>) {
p.<span class="hljs-title function_">lineTo</span>(x, y);
p.<span class="hljs-title function_">closePath</span>();
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">closed</span>) p.<span class="hljs-title function_">closePath</span>();
}
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<h4 id="factory">Factory</h4>
<pre><code>scrawl.<span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-fill'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">startAngle</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">endAngle</span>: -<span class="hljs-number">15</span>,
<span class="hljs-attr">includeCenter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">475</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">475</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">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">shadowOffsetX</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">shadowOffsetY</span>: <span