A factory for generating quadratic curve shape-based entitys
Path-defined entitys represent a diverse range of shapes rendered onto a DOM <canvas> element using the Canvas API’s Path2D interface. They use the shapeBasic and shapePathCalculation (some also use shapeCurve) mixins to define much of their functionality.
All path-defined entitys can be positioned, cloned, filtered etc:
scale instead.A path is a track - straight, or curved, or as complex as required - placed across a container which artefacts can use as a source of their positioning data. We can animate an artifact to move along the path:
useAsPath flag to true.path attribute to the path-defined entity’s name-String (or the entity itself), and set its lockTo Array values to "path".pathPosition attribute to a float Number value between 0.0 - 1.0, with 0 being the start of the path, and 1 being its end.addPathRotation flag to true.delta object, or triggering a Tween to perform the movement.import { constructors, artefact } from '../core/library.js';
import { mergeOver, addStrings, pushUnique } from '../core/utilities.js';
import { makeCoordinate } from './coordinate.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';
import curveMix from '../mixin/shapeCurve.js';const Quadratic = function (items = {}) {
this.control = makeCoordinate();
this.currentControl = makeCoordinate();
this.controlLockTo = 'coord';
this.curveInit(items);
this.shapeInit(items);
this.dirtyControl = true;
return this;
};let P = Quadratic.prototype = Object.create(Object.prototype);
P.type = 'Quadratic';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = shapeMix(P);
P = curveMix(P);let defaultAttributes = {The control coordinate (‘pin’) defines the quadratic curve’s control point.
start coordinate, the control coordinate can be updated using the pseudo-attributes controlX and controlY. control: null,controlPivot, controlPivotCorner, addControlPivotHandle, addControlPivotOffset
start coordinate, the control coordinate can be pivoted to another artefact. These attributes are used in the same way as the pivot, ‘pivotCorner’, addPivotHandle and addPivotOffset attributes. controlPivot: '',
controlPivotCorner: '',
addControlPivotHandle: false,
addControlPivotOffset: false,controlPath, controlPathPosition, addControlPathHandle, addControlPathOffset
start coordinate, the control coordinate can be pathed to another artefact. These attributes are used in the same way as the path, ‘pathPosition’, addPathHandle and addPathOffset attributes. controlPath: '',
controlPathPosition: 0,
addControlPathHandle: false,
addControlPathOffset: true,controlParticle - attribute to store any particle the artefact mey be using for its position reference
controlParticle: '',controlLockTo
start coordinate, the control coordinate can swap between using absolute and relative positioning by setting this attribute. Accepted values are: coord (default, for absolute positioning), pivot, path, mouse.x and y coordinates separately - its value is a string argument, not an [x, y] array! controlLockTo: '',
};
P.defs = mergeOver(P.defs, defaultAttributes);P.packetExclusions = pushUnique(P.packetExclusions, []);
P.packetExclusionsByRegex = pushUnique(P.packetExclusionsByRegex, []);
P.packetCoordinates = pushUnique(P.packetCoordinates, ['control']);
P.packetObjects = pushUnique(P.packetObjects, ['controlPivot', 'controlPath']);
P.packetFunctions = pushUnique(P.packetFunctions, []);let G = P.getters,
S = P.setters,
D = P.deltaSetters;controlPivot
S.controlPivot = function (item) {
this.setControlHelper(item, 'controlPivot', 'control');
this.updateDirty();
this.dirtyControl = true;
};controlParticle
S.controlParticle = function (item) {
this.setControlHelper(item, 'controlParticle', 'control');
this.updateDirty();
this.dirtyControl = true;
};controlPath
S.controlPath = function (item) {
this.setControlHelper(item, 'controlPath', 'control');
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
};controlPathPosition
S.controlPathPosition = function (item) {
this.controlPathPosition = item;
this.dirtyControl = true;
this.currentControlPathData = false;
};
D.controlPathPosition = function (item) {
this.controlPathPosition += item;
this.dirtyControl = true;
this.currentControlPathData = false;
};S.controlX = function (coord) {
if (coord != null) {
this.control[0] = coord;
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
}
};
S.controlY = function (coord) {
if (coord != null) {
this.control[1] = coord;
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
}
};
S.control = function (x, y) {
this.setCoordinateHelper('control', x, y);
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
};
D.controlX = function (coord) {
let c = this.control;
c[0] = addStrings(c[0], coord);
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
};
D.controlY = function (coord) {
let c = this.control;
c[1] = addStrings(c[1], coord);
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
};
D.control = function (x, y) {
this.setDeltaCoordinateHelper('control', x, y);
this.updateDirty();
this.dirtyControl = true;
this.currentControlPathData = false;
};controlLockTo
S.controlLockTo = function (item) {
this.controlLockTo = item;
this.updateDirty();
this.dirtyControlLock = true;
this.currentControlPathData = false;
};cleanSpecies - internal helper function - called by prepareStamp
P.cleanSpecies = function () {
this.dirtySpecies = false;
let p = 'M0,0';
p = this.makeQuadraticPath();
this.pathDefinition = p;
};makeQuadraticPath - internal helper function - called by cleanSpecies
P.makeQuadraticPath = function () {
let [startX, startY] = this.currentStampPosition;
let [controlX, controlY] = this.currentControl;
let [endX, endY] = this.currentEnd;
let cx = (controlX - startX).toFixed(2),
cy = (controlY - startY).toFixed(2),
ex = (endX - startX).toFixed(2),
ey = (endY - startY).toFixed(2);
return `m0,0q${cx},${cy} ${ex},${ey}`;
};cleanDimensions - internal helper function called by prepareStamp
P.cleanDimensions = function () {
this.dirtyDimensions = false;
this.dirtyHandle = true;
this.dirtyOffset = true;
this.dirtyStart = true;
this.dirtyControl = true;
this.dirtyEnd = true;
};
P.preparePinsForStamp = function () {
let ePivot = this.endPivot,
ePath = this.endPath,
cPivot = this.controlPivot,
cPath = this.controlPath;
this.dirtyPins.forEach(name => {
if ((cPivot && cPivot.name === name) || (cPath && cPath.name === name)) {
this.dirtyControl = true;
if (this.controlLockTo.includes('path')) this.currentControlPathData = false;
}
if ((ePivot && ePivot.name === name) || (ePath && ePath.name === name)) {
this.dirtyEnd = true;
if (this.endLockTo.includes('path')) this.currentEndPathData = false;
}
});
this.dirtyPins.length = 0;
};Accepts argument with attributes:
control coordinate: controlPivotCorner, addControlPivotHandle, addControlPivotOffset, controlPathPosition, addControlPathHandle, addControlPathOffsetend coordinate: endPivotCorner, addEndPivotHandle, addEndPivotOffset, endPathPosition, addEndPathHandle, addEndPathOffsetscrawl.makeQuadratic({
name: 'my-quadratic',
startX: '5%',
startY: '26.5%',
controlX: '50%',
controlY: '18%',
endX: '95%',
endY: '26.5%',
handleY: 'center',
lineWidth: 3,
lineCap: 'round',
strokeStyle: 'darkseagreen',
method: 'draw',
});const makeQuadratic = function (items = {}) {
items.species = 'quadratic';
return new Quadratic(items);
};
constructors.Quadratic = Quadratic;export {
makeQuadratic,
};