The Scrawl-canvas Stack/Element system is an attempt to supplement DOM elements with Scrawl-canvas entity positioning and dimensioning functionality.
pivot, mimic, path)set, deltaSet), or through automation (delta object), or through the Scrawl-canvas tween functionalityA Stack is a wrapper object around a DOM element, whose direct children are given Scrawl-canvas Element wrappers:
Stack ~~> Canvas/Cell
Element ~~> Entity (eg Block) During initialization Scrawl-canvas will search the DOM tree and automatically create Stack wrappers for any element which has been given a data-stack attribute which resolves to true. Every direct (first level) child inside the stack element will have Element wrappers created for them (except for <canvas> elements). As part of this work, Scrawl-canvas will modify the affected elements’ position CSS style:
relative positioning within the DOMabsolute positioning within the StackThe makeElement function is not exported by the scrawl object. To create a new Element within a Stack, use mystack.addNewElement({}).
Element wrapper objects use the base, position, anchor and dom mixins. Thus Element wrappers are also artefact objects. As such, Elements can be used (almost) like any other artefact; in particular, other artefacts - including any canvas-based entity - can use Elements as their pivot or mimic targets.
Element wrappers are included in the Scrawl-canvas packet system; they can be saved and cloned. Killing an Element wrapper will remove its DOM element from the document.
import { element, elementnames, artefact, artefactnames, constructors } from '../core/library.js';
import { pushUnique, removeItem, isa_dom } from '../core/utilities.js';
import { uiSubscribedElements } from '../core/userInteraction.js';
import { makeCanvas } from './canvas.js';
import baseMix from '../mixin/base.js';
import domMix from '../mixin/dom.js';const Element = function (items = {}) {
let el = items.domElement;
this.makeName(items.name);
this.register();
if (el) {Scrawl-canvas does not retain an Element’s textContent or innerHTML values internally. However these can be set on initialization, and subsequently, by using the attributes text (for textContent, which automatically escapes all HTML-related tags and entities) and content (which should respect HTML tags and entities)
if (items.text) el.textContent = items.text;
else if (items.content) el.innerHTML = items.content;
}
this.initializePositions();
this.dimensions[0] = this.dimensions[1] = 100;
this.pathCorners = [];
this.css = {};
this.here = {};
this.initializeDomLayout(items);
this.set(this.defs);
this.set(items);
el = this.domElement;
if (el) el.id = this.name;
this.apply();
return this;
};let P = Element.prototype = Object.create(Object.prototype);
P.type = 'Element';
P.lib = 'element';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = domMix(P);No additional attributes required beyond those supplied by the mixins
P.factoryKill = function () {
removeItem(uiSubscribedElements, this.name);
this.domElement.remove();
};let S = P.setters;text - this is the preferred way to update an element’s text content because the text supplied in the argument is not treated as HTML by the browser.
When we update the DOM attribute element.textContent, it deletes any position-reporting corner divs we may have added to the element. Thus we need to repopulate the element with its ‘kids’ after updating the text
S.text = function (item) {
if (isa_dom(this.domElement)) {
let el = this.domElement,
kids = el.querySelectorAll('[data-corner-div="sc"]');
el.textContent = item;
kids.forEach(kid => el.appendChild(kid));
this.dirtyContent = true;
}
};content - WARNING - this is a dangerous function! It does not perform any character escaping before inserting the supplied argument into the element. Raw HTML (including, for instance, <script> tags) will be added to the DOM. It’s up to the developer to make sure this content is safe!
When we update the DOM attribute element.innerHTML, it deletes any position-reporting corner divs we may have added to the element. Thus we need to repopulate the element with its ‘kids’ after updating the text
S.content = function (item) {
if (this.domElement) {
let el = this.domElement,
kids = el.querySelectorAll('[data-corner-div="sc"]');
el.innerHTML = item;
kids.forEach(kid => el.appendChild(kid));
this.dirtyContent = true;
}
};cleanDimensionsAdditionalActions - overwrites mixin/position function.
P.cleanDimensionsAdditionalActions = function () {
this.dirtyDomDimensions = true;
};addCanvas - adds a new <canvas> element to Scrawl-canvas stack immediately before this element, and sets up the canvas to mimic the element (meaning it will mimic changes to the element’s dimensions, positioning, scale and 3D rotational values)
P.addCanvas = function (items = {}) {
if (!this.canvas) {
let canvas = document.createElement('canvas'),
el = this.domElement;
let rect = el.getBoundingClientRect(),
style = window.getComputedStyle(el);
el.parentNode.insertBefore(canvas, this.domElement);
let art = makeCanvas({
name: `${this.name}-canvas`,
domElement: canvas,
position: 'absolute',
width: rect.width,
height: rect.height,
mimic: this.name,
lockTo: 'mimic',
useMimicDimensions: true,
useMimicScale: true,
useMimicStart: true,
useMimicHandle: true,
useMimicOffset: true,
useMimicRotation: true,
addOwnDimensionsToMimic: false,
addOwnScaleToMimic: false,
addOwnStartToMimic: false,
addOwnHandleToMimic: false,
addOwnOffsetToMimic: false,
addOwnRotationToMimic: false,
});
art.set(items);
this.canvas = art;
return art;
}
};Get a handle to a Stack wrapper
let stack = scrawl.library.stack.mystack;
stack.addNewElement({
name: 'list',
tag: 'ul',
width: '25%',
height: 80,
startX: 400,
startY: 120,
handleX: 'center',
handleY: 'center',
roll: 30,
classes: 'red-text',
content: `<li>unordered list</li>
<li>with several</li>
<li>bullet points</li>`,
css: {
font: '12px fantasy',
paddingInlineStart: '20px',
paddingTop: '0.5em',
margin: '0',
border: '1px solid red',
cursor: 'grab',
},
}).clone({
name: 'list-no-border',
startY: 250,
scale: 1.25,
pitch: 60,
yaw: 80,
css: {
border: 0,
},
});const makeElement = function (items) {
return new Element(items);
};
constructors.Element = Element;export {
makeElement,
};