scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
927 lines (578 loc) • 51.9 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Core library</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="animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="document.html">
./source/core/document.js
</a>
<a class="source" href="events.html">
./source/core/events.js
</a>
<a class="source" href="init.html">
./source/core/init.js
</a>
<a class="source" href="library.html">
./source/core/library.js
</a>
<a class="source" href="random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="../factory/action.html">
./source/factory/action.js
</a>
<a class="source" href="../factory/anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="../factory/animation.html">
./source/factory/animation.js
</a>
<a class="source" href="../factory/bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="../factory/block.html">
./source/factory/block.js
</a>
<a class="source" href="../factory/canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="../factory/cell.html">
./source/factory/cell.js
</a>
<a class="source" href="../factory/cog.html">
./source/factory/cog.js
</a>
<a class="source" href="../factory/color.html">
./source/factory/color.js
</a>
<a class="source" href="../factory/conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="../factory/coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="../factory/crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="../factory/element.html">
./source/factory/element.js
</a>
<a class="source" href="../factory/emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="../factory/filter.html">
./source/factory/filter.js
</a>
<a class="source" href="../factory/filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="../factory/filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="../factory/fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="../factory/gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="../factory/grid.html">
./source/factory/grid.js
</a>
<a class="source" href="../factory/group.html">
./source/factory/group.js
</a>
<a class="source" href="../factory/imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="../factory/line.html">
./source/factory/line.js
</a>
<a class="source" href="../factory/lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="../factory/loom.html">
./source/factory/loom.js
</a>
<a class="source" href="../factory/mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="../factory/net.html">
./source/factory/net.js
</a>
<a class="source" href="../factory/noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="../factory/oval.html">
./source/factory/oval.js
</a>
<a class="source" href="../factory/palette.html">
./source/factory/palette.js
</a>
<a class="source" href="../factory/particle.html">
./source/factory/particle.js
</a>
<a class="source" href="../factory/particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="../factory/particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="../factory/particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="../factory/particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="../factory/pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="../factory/phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="../factory/picture.html">
./source/factory/picture.js
</a>
<a class="source" href="../factory/polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="../factory/polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="../factory/quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="../factory/quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="../factory/radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="../factory/rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="../factory/rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="../factory/rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="../factory/renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="../factory/shape.html">
./source/factory/shape.js
</a>
<a class="source" href="../factory/spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="../factory/spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="../factory/stack.html">
./source/factory/stack.js
</a>
<a class="source" href="../factory/star.html">
./source/factory/star.js
</a>
<a class="source" href="../factory/state.html">
./source/factory/state.js
</a>
<a class="source" href="../factory/tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="../factory/ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="../factory/tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="../factory/tween.html">
./source/factory/tween.js
</a>
<a class="source" href="../factory/unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="../factory/vector.html">
./source/factory/vector.js
</a>
<a class="source" href="../factory/videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="../factory/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="core-library">Core library</h1>
<p>Scrawl-canvas stores most of the objects it creates in a centralized space, so that they can be referenced from other places in the code base, and from user-written code. </p>
<p>While some sections are dedicated to a single type of object, other sections are aggregations - this may lead to name conflicts if coders are not rigorous in their naming conventions when creating objects (through the <strong>make</strong> factory functions).</p>
<p><code>Exported object</code> (to modules and scrawl object). Scrawl-canvas exposes the library, and its sections, for import into other script files</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<p>No imports required</p>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Current version</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> version = <span class="hljs-string">'8.9.4'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Objects created using the <strong>makeAnchor</strong> factory</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> anchor = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> anchornames = [];</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Objects created using the <strong>makeAnimation</strong> and <strong>makeRender</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> animation = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> animationnames = [];</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Objects - specifically tickers - created using the <strong>makeTicker</strong> and <strong>makeTween</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> animationtickers = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> animationtickersnames = [];</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>An aggregate of all contents in the canvas, element, entity and stack sections of the library.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> artefact = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> artefactnames = [];</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Scrawl-canvas wrappers for visual media (images, videos, sprites). Anything that a Picture entity or Pattern style can use as their asset source needs to be included in this section of the library</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> asset = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> assetnames = [];</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Canvas element wrappers created during Scrawl-canvas initialization, and the <strong>makeCanvas</strong>, <strong>getCanvas</strong> and <strong>addCanvas</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> canvas = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> canvasnames = [];</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Objects created using the <strong>makeCell</strong> and <strong>canvas.buildCell</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> cell = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> cellnames = [];</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>DOM element wrappers created during Scrawl-canvas initialization, and created using the <strong>makeElement</strong>, <strong>Stack.addExistingDomElement</strong> and <strong>Stack.addNewElement</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> element = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> elementnames = [];</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>All canvas-related artefacts (Blocks, Wheels, etc) get stored in the <strong>entity</strong> section of the library. </p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> entity = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> entitynames = [];</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Objects created using the <strong>makeFilter</strong> factory</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> filter = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> filternames = [];</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>Used internally by Phrase artefacts</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> fontattribute = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> fontattributenames = [];</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Objects created using the <strong>makeGroup</strong> factory, and generated as part of the process of creating Stack and Canvas artefacts, and Cell assets.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> group = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> groupnames = [];</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p>Used internally by Gradient and RadialGradient styles</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> palette = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> palettenames = [];</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p>Physics-related objects</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> particle = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> particlenames = [];
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> force = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> forcenames = [];
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> spring = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> springnames = [];
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> world = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> worldnames = [];</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>Section classes are used with Phrase entitys - we store the class definitions in the library so that they can be easily shared between Phrases</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> sectionClasses = {
<span class="hljs-string">'DEFAULTS'</span>: { <span class="hljs-attr">defaults</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">'b'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'bold'</span> },
<span class="hljs-string">'/b'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'strong'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'bold'</span> },
<span class="hljs-string">'/strong'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'BOLD'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'bold'</span> },
<span class="hljs-string">'/BOLD'</span>: { <span class="hljs-attr">weight</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'i'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'italic'</span> },
<span class="hljs-string">'/i'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'em'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'italic'</span> },
<span class="hljs-string">'/em'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'ITALIC'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'italic'</span> },
<span class="hljs-string">'/ITALIC'</span>: { <span class="hljs-attr">style</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'u'</span>: { <span class="hljs-attr">underline</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">'/u'</span>: { <span class="hljs-attr">underline</span>: <span class="hljs-literal">false</span> },
<span class="hljs-string">'UNDERLINE'</span>: { <span class="hljs-attr">underline</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">'/UNDERLINE'</span>: { <span class="hljs-attr">underline</span>: <span class="hljs-literal">false</span> },
<span class="hljs-string">'OVERLINE'</span>: { <span class="hljs-attr">overline</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">'/OVERLINE'</span>: { <span class="hljs-attr">overline</span>: <span class="hljs-literal">false</span> },
<span class="hljs-string">'SMALL-CAPS'</span>: { <span class="hljs-attr">variant</span>: <span class="hljs-string">'small-caps'</span> },
<span class="hljs-string">'/SMALL-CAPS'</span>: { <span class="hljs-attr">variant</span>: <span class="hljs-string">'normal'</span> },
<span class="hljs-string">'HIGHLIGHT'</span>: { <span class="hljs-attr">highlight</span>: <span class="hljs-literal">true</span> },
<span class="hljs-string">'/HIGHLIGHT'</span>: { <span class="hljs-attr">highlight</span>: <span class="hljs-literal">false</span> },
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Stack element wrappers created during Scrawl-canvas initialization, and created using the <strong>makeStack</strong> and <strong>addStack</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> stack = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> stacknames = [];</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>Objects created using the <strong>makeTween</strong> and <strong>makeAction</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> tween = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> tweennames = [];</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Objects created using the <strong>makeGradient</strong>, <strong>makeRadialGradient</strong>, <strong>makePattern</strong> and <strong>makeColor</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> styles = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> stylesnames = [];</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>DOM unstackedElement wrappers created using the <strong>makeUnstackedElement</strong> and <strong>makeSnippet</strong> factories</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> unstackedelement = {};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> unstackedelementnames = [];</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p>All <strong>makeXXX</strong> factory functions get added as references to the <strong>constructors</strong> section of the library - used mainly as part of Scrawl-canvas cloning functionality.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> constructors = {};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Convenience value, used internally</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> radian = <span class="hljs-title class_">Math</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180</span>;</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p>Convenience set, used internally</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> css = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>([<span class="hljs-string">'all'</span>, <span class="hljs-string">'background'</span>, <span class="hljs-string">'backgroundAttachment'</span>, <span class="hljs-string">'backgroundBlendMode'</span>, <span class="hljs-string">'backgroundClip'</span>, <span class="hljs-string">'backgroundColor'</span>, <span class="hljs-string">'backgroundOrigin'</span>, <span class="hljs-string">'backgroundPosition'</span>, <span class="hljs-string">'backgroundRepeat'</span>, <span class="hljs-string">'border'</span>, <span class="hljs-string">'borderBottom'</span>, <span class="hljs-string">'borderBottomColor'</span>, <span class="hljs-string">'borderBottomStyle'</span>, <span class="hljs-string">'borderBottomWidth'</span>, <span class="hljs-string">'borderCollapse'</span>, <span class="hljs-string">'borderColor'</span>, <span class="hljs-string">'borderLeft'</span>, <span class="hljs-string">'borderLeftColor'</span>, <span class="hljs-string">'borderLeftStyle'</span>, <span class="hljs-string">'borderLeftWidth'</span>, <span class="hljs-string">'borderRight'</span>, <span class="hljs-string">'borderRightColor'</span>, <span class="hljs-string">'borderRightStyle'</span>, <span class="hljs-string">'borderRightWidth'</span>, <span class="hljs-string">'borderSpacing'</span>, <span class="hljs-string">'borderStyle'</span>, <span class="hljs-string">'borderTop'</span>, <span class="hljs-string">'borderTopColor'</span>, <span class="hljs-string">'borderTopStyle'</span>, <span class="hljs-string">'borderTopWidth'</span>, <span class="hljs-string">'borderWidth'</span>, <span class="hljs-string">'clear'</span>, <span class="hljs-string">'color'</span>, <span class="hljs-string">'columns'</span>, <span class="hljs-string">'content'</span>, <span class="hljs-string">'counterIncrement'</span>, <span class="hljs-string">'counterReset'</span>, <span class="hljs-string">'cursor'</span>, <span class="hljs-string">'direction'</span>, <span class="hljs-string">'display'</span>, <span class="hljs-string">'emptyCells'</span>, <span class="hljs-string">'float'</span>, <span class="hljs-string">'font'</span>, <span class="hljs-string">'fontFamily'</span>, <span class="hljs-string">'fontSize'</span>, <span class="hljs-string">'fontSizeAdjust'</span>, <span class="hljs-string">'fontStretch'</span>, <span class="hljs-string">'fontStyle'</span>, <span class="hljs-string">'fontSynthesis'</span>, <span class="hljs-string">'fontVariant'</span>, <span class="hljs-string">'fontVariantAlternates'</span>, <span class="hljs-string">'fontVariantCaps'</span>, <span class="hljs-string">'fontVariantEastAsian'</span>, <span class="hljs-string">'fontVariantLigatures'</span>, <span class="hljs-string">'fontVariantNumeric'</span>, <span class="hljs-string">'fontVariantPosition'</span>, <span class="hljs-string">'fontWeight'</span>, <span class="hljs-string">'grid'</span>, <span class="hljs-string">'gridArea'</span>, <span class="hljs-string">'gridAutoColumns'</span>, <span class="hljs-string">'gridAutoFlow'</span>, <span class="hljs-string">'gridAutoPosition'</span>, <span class="hljs-string">'gridAutoRows'</span>, <span class="hljs-string">'gridColumn'</span>, <span class="hljs-string">'gridColumnStart'</span>, <span class="hljs-string">'gridColumnEnd'</span>, <span class="hljs-string">'gridRow'</span>, <span class="hljs-string">'gridRowStart'</span>, <span class="hljs-string">'gridRowEnd'</span>, <span class="hljs-string">'gridTemplate'</span>, <span class="hljs-string">'gridTemplateAreas'</span>, <span class="hljs-string">'gridTemplateRows'</span>, <span class="hljs-string">'gridTemplateColumns'</span>, <span class="hljs-string">'imageResolution'</span>, <span class="hljs-string">'imeMode'</span>, <span class="hljs-string">'inherit'</span>, <span class="hljs-string">'inlineSize'</span>, <span class="hljs-string">'isolation'</span>, <span class="hljs-string">'letterSpacing'</span>, <span class="hljs-string">'lineBreak'</span>, <span class="hljs-string">'lineHeight'</span>, <span class="hljs-string">'listStyle'</span>, <span class="hljs-string">'listStyleImage'</span>, <span class="hljs-string">'listStylePosition'</span>, <span class="hljs-string">'listStyleType'</span>, <span class="hljs-string">'margin'</span>, <span class="hljs-string">'marginBlockStart'</span>, <span class="hljs-string">'marginBlockEnd'</span>, <span class="hljs-string">'marginInlineStart'</span>, <span class="hljs-string">'marginInlineEnd'</span>, <span class="hljs-string">'marginBottom'</span>, <span class="hljs-string">'marginLeft'</span>, <span class="hljs-string">'marginRight'</span>, <span class="hljs-string">'marginTop'</span>, <span class="hljs-string">'marks'</span>, <span class="hljs-string">'mask'</span>, <span class="hljs-string">'maskType'</span>, <span class="hljs-string">'maxWidth'</span>, <span class="hljs-string">'maxHeight'</span>, <span class="hljs-string">'maxBlockSize'</span>, <span class="hljs-string">'maxInlineSize'</span>, <span class="hljs-string">'maxZoom'</span>, <span class="hljs-string">'minWidth'</span>, <span class="hljs-string">'minHeight'</span>, <span class="hljs-string">'minBlockSize'</span>, <span class="hljs-string">'minInlineSize'</span>, <span class="hljs-string">'minZoom'</span>, <span class="hljs-string">'mixBlendMode'</span>, <span class="hljs-string">'objectFit'</span>, <span class="hljs-string">'objectPosition'</span>, <span class="hljs-string">'offsetBlockStart'</span>, <span class="hljs-string">'offsetBlockEnd'</span>, <span class="hljs-string">'offsetInlineStart'</span>, <span class="hljs-string">'offsetInlineEnd'</span>, <span class="hljs-string">'orphans'</span>, <span class="hljs-string">'overflow'</span>, <span class="hljs-string">'overflowWrap'</span>, <span class="hljs-string">'overflowX'</span>, <span class="hljs-string">'overflowY'</span>, <span class="hljs-string">'pad'</span>, <span class="hljs-string">'padding'</span>, <span class="hljs-string">'paddingBlockStart'</span>, <span class="hljs-string">'paddingBlockEnd'</span>, <span class="hljs-string">'paddingInlineStart'</span>, <span class="hljs-string">'paddingInlineEnd'</span>, <span class="hljs-string">'paddingBottom'</span>, <span class="hljs-string">'paddingLeft'</span>, <span class="hljs-string">'paddingRight'</span>, <span class="hljs-string">'paddingTop'</span>, <span class="hljs-string">'pageBreakAfter'</span>, <span class="hljs-string">'pageBreakBefore'</span>, <span class="hljs-string">'pageBreakInside'</span>, <span class="hljs-string">'pointerEvents'</span>, <span class="hljs-string">'position'</span>, <span class="hljs-string">'prefix'</span>, <span class="hljs-string">'quotes'</span>, <span class="hljs-string">'rubyAlign'</span>, <span class="hljs-string">'rubyMerge'</span>, <span class="hljs-string">'rubyPosition'</span>, <span class="hljs-string">'scrollBehavior'</span>, <span class="hljs-string">'scrollSnapCoordinate'</span>, <span class="hljs-string">'scrollSnapDestination'</span>, <span class="hljs-string">'scrollSnapPointsX'</span>, <span class="hljs-string">'scrollSnapPointsY'</span>, <span class="hljs-string">'scrollSnapType'</span>, <span class="hljs-string">'scrollSnapTypeX'</span>, <span class="hljs-string">'scrollSnapTypeY'</span>, <span class="hljs-string">'shapeImageThreshold'</span>, <span class="hljs-string">'shapeMargin'</span>, <span class="hljs-string">'shapeOutside'</span>, <span class="hljs-string">'tableLayout'</span>, <span class="hljs-string">'textAlign'</span>, <span class="hljs-string">'textDecoration'</span>, <span class="hljs-string">'textIndent'</span>, <span class="hljs-string">'textOrientation'</span>, <span class="hljs-string">'textOverflow'</span>, <span class="hljs-string">'textRendering'</span>, <span class="hljs-string">'textShadow'</span>, <span class="hljs-string">'textTransform'</span>, <span class="hljs-string">'textUnderlinePosition'</span>, <span class="hljs-string">'unicodeRange'</span>, <span class="hljs-string">'unset'</span>, <span class="hljs-string">'verticalAlign'</span>, <span class="hljs-string">'widows'</span>, <span class="hljs-string">'willChange'</span>, <span class="hljs-string">'wordBreak'</span>, <span class="hljs-string">'wordSpacing'</span>, <span class="hljs-string">'wordWrap'</span>, <span class="hljs-string">'zIndex'</span>]);</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p>Convenience set, used internally</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> xcss = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>([<span class="hljs-string">'alignContent'</span>, <span class="hljs-string">'alignItems'</span>, <span class="hljs-string">'alignSelf'</span>, <span class="hljs-string">'animation'</span>, <span class="hljs-string">'animationDelay'</span>, <span class="hljs-string">'animationDirection'</span>, <span class="hljs-string">'animationDuration'</span>, <span class="hljs-string">'animationFillMode'</span>, <span class="hljs-string">'animationIterationCount'</span>, <span class="hljs-string">'animationName'</span>, <span class="hljs-string">'animationPlayState'</span>, <span class="hljs-string">'animationTimingFunction'</span>, <span class="hljs-string">'backfaceVisibility'</span>, <span class="hljs-string">'backgroundImage'</span>, <span class="hljs-string">'backgroundSize'</span>, <span class="hljs-string">'borderBottomLeftRadius'</span>, <span class="hljs-string">'borderBottomRightRadius'</span>, <span class="hljs-string">'borderImage'</span>, <span class="hljs-string">'borderImageOutset'</span>, <span class="hljs-string">'borderImageRepeat'</span>, <span class="hljs-string">'borderImageSlice'</span>, <span class="hljs-string">'borderImageSource'</span>, <span class="hljs-string">'borderImageWidth'</span>, <span class="hljs-string">'borderRadius'</span>, <span class="hljs-string">'borderTopLeftRadius'</span>, <span class="hljs-string">'borderTopRightRadius'</span>, <span class="hljs-string">'boxDecorationBreak'</span>, <span class="hljs-string">'boxShadow'</span>, <span class="hljs-string">'boxSizing'</span>, <span class="hljs-string">'columnCount'</span>, <span class="hljs-string">'columnFill'</span>, <span class="hljs-string">'columnGap'</span>, <span class="hljs-string">'columnRule'</span>, <span class="hljs-string">'columnRuleColor'</span>, <span class="hljs-string">'columnRuleStyle'</span>, <span class="hljs-string">'columnRuleWidth'</span>, <span class="hljs-string">'columnSpan'</span>, <span class="hljs-string">'columnWidth'</span>, <span class="hljs-string">'filter'</span>, <span class="hljs-string">'flex'</span>, <span class="hljs-string">'flexBasis'</span>, <span class="hljs-string">'flexDirection'</span>, <span class="hljs-string">'flexFlow'</span>, <span class="hljs-string">'flexGrow'</span>, <span class="hljs-string">'flexShrink'</span>, <span class="hljs-string">'flexWrap'</span>, <span class="hljs-string">'fontFeatureSettings'</span>, <span class="hljs-string">'fontKerning'</span>, <span class="hljs-string">'fontLanguageOverride'</span>, <span class="hljs-string">'h