import { constructors } from '../core/library.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';
import curveMix from '../mixin/shapeCurve.js';A factory for generating straight linbe 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 } from '../core/library.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';
import curveMix from '../mixin/shapeCurve.js';const Line = function (items = {}) {
this.curveInit(items);
this.shapeInit(items);
return this;
};let P = Line.prototype = Object.create(Object.prototype);
P.type = 'Line';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = shapeMix(P);
P = curveMix(P);No additional attributes required
cleanSpecies - internal helper function - called by prepareStamp
P.cleanSpecies = function () {
this.dirtySpecies = false;
let p = 'M0,0';
p = this.makeLinePath();
this.pathDefinition = p;
};makeLinePath - internal helper function - called by cleanSpecies
P.makeLinePath = function () {
let [startX, startY] = this.currentStampPosition;
let [endX, endY] = this.currentEnd;
let x = (endX - startX).toFixed(2),
y = (endY - startY).toFixed(2);
return `m0,0l${x},${y}`;
};cleanDimensions - internal helper function called by prepareStamp
P.cleanDimensions = function () {
this.dirtyDimensions = false;
this.dirtyHandle = true;
this.dirtyOffset = true;
this.dirtyStart = true;
this.dirtyEnd = true;
};
P.preparePinsForStamp = function () {
let ePivot = this.endPivot,
ePath = this.endPath;
this.dirtyPins.forEach(name => {
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:
end coordinate: endPivotCorner, addEndPivotHandle, addEndPivotOffset, endPathPosition, addEndPathHandle, addEndPathOffsetscrawl.makeLine({
name: 'my-line',
startX: 20,
startY: 300,
endX: 580,
endY: 275,
lineWidth: 3,
lineCap: 'round',
strokeStyle: 'darkgoldenrod',
method: 'draw',
});const makeLine = function (items = {}) {
items.species = 'line';
return new Line(items);
};
constructors.Line = Line;export {
makeLine,
};