Crescent entitys are formed by the intersection of two circles, rendered onto a DOM <canvas> element using the Canvas 2D API’s Path2D interface - specifically the arc() method.
import { constructors } from '../core/library.js';
import { addStrings, doCreate, mergeOver, xta, xto, Ωempty } from '../helper/utilities.js';
import { releaseCoordinate, requestCoordinate } from '../untracked-factory/coordinate.js';
import { releaseCell, requestCell } from '../untracked-factory/cell-fragment.js';
import baseMix from '../mixin/base.js';
import entityMix from '../mixin/entity.js';Shared constants
import { _radian, DESTINATION_OUT, ENTITY } from '../helper/shared-vars.js';Local constants
const T_CRESCENT = 'Crescent';const Crescent = function (items = Ωempty) {
if (!xto(items.dimensions, items.width, items.height, items.radius)) items.radius = 5;
this.currentOuterRadius = 5;
this.currentInnerRadius = 5;
this.currentDisplacement = 0;
this.currentDimensions = [];
this.outerCircleStart = 0;
this.outerCircleEnd = 0;
this.innerCircleStart = 0;
this.innerCircleEnd = 0;
this.drawOuterCircle = false;
this.drawDonut = false;
this.pathObjectOuter = null;
this.pathObjectInner = null;
this.entityInit(items);
return this;
};const P = Crescent.prototype = doCreate();
P.type = T_CRESCENT;
P.lib = ENTITY;
P.isArtefact = true;
P.isAsset = false;baseMix(P);
entityMix(P);const defaultAttributes = {outerRadius, innerRadius - the circles’ radius measured in Number pixels, or as a String% - '10%' - of the Cell’s width
outerRadius: 20,
innerRadius: 10,displacement - the displacement (rightwards) of the inner circle relative to the outer circle. Measured in positive Number pixels; negative values will be set to 0
displacement: 0,displayIntersect - a Boolean flag determining which of the two parts of the combined circles to display. Defaults to false, which shows the portion of the outer circle not covered by the inner circle; set to true, will display the intersection of the inner and outer circles
displayIntersect: false,
};
P.defs = mergeOver(P.defs, defaultAttributes);const S = P.setters,
D = P.deltaSetters;width and height (and dimensions) values are largely irrelevant to Crescent entitys; they get used internally purely as part of the Display cycle stamp functionality.
If they are used to (delta)set the entity’s values then outerRadius will be set to the supplied width value with String% values calculated from the entity’s host’s width, while innerRadius will be set to the supplied height value with String% values calculated from the entity’s host’s height
S.outerRadius = function (val) {
if (val != null) {
this.outerRadius = val;
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
D.outerRadius = function (val) {
if (val != null) {
this.outerRadius = addStrings(this.outerRadius, val);
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
S.innerRadius = function (val) {
if (val != null) {
this.innerRadius = val;
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
D.innerRadius = function (val) {
if (val != null) {
this.innerRadius = addStrings(this.innerRadius, val);
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
S.width = S.outerRadius;
D.width = D.outerRadius;
S.height = S.innerRadius;
D.height = D.innerRadius;
S.displacement = function (val) {
if (val != null && val.toFixed && val >= 0) {
let d = val;
if (d < 0) d = 0;
this.displacement = d;
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
D.displacement = function (val) {
if (val != null && val.toFixed) {
let d = addStrings(this.displacement, val);
if (d.toFixed && d < 0) d = 0;
this.displacement = d;
this.dirtyDimensions = true;
this.dirtyFilterIdentifier = true;
}
};
S.displayIntersect = function (val) {
this.displayIntersect = val;
this.dirtyPathObject = true;
this.dirtyFilterIdentifier = true;
};Dimensions calculations - overwrites mixin/position.js function
P.cleanDimensionsAdditionalActions = function () {
const { outerRadius:oR, innerRadius:iR, displacement:disp } = this;
const host = this.getHost();
let hostDims;
if (host) hostDims = (host.currentDimensions) ? host.currentDimensions : [host.w, host.h];
else hostDims = [300, 150];
const [w, h] = hostDims;
this.currentOuterRadius = (oR.substring) ? (parseFloat(oR) / 100) * w : oR;
this.currentInnerRadius = (iR.substring) ? (parseFloat(iR) / 100) * h : iR;
this.currentDisplacement = (disp.substring) ? (parseFloat(disp) / 100) * w : disp;
this.currentDimensions[0] = this.currentDimensions[1] = this.currentOuterRadius * 2;
this.dirtyPathObject = true;
};calculateInterception - internal function to calculate how the two circles interact
P.calculateInterception = function () {
if (!xta(this.currentOuterRadius, this.currentInnerRadius, this.currentDisplacement)) this.cleanDimensionsAdditionalActions();
const { currentOuterRadius:oR, currentInnerRadius:iR, currentDisplacement:disp } = this;
this.outerCircleStart = 0;
this.outerCircleEnd = 360 * _radian;
this.innerCircleStart = 0;
this.innerCircleEnd = 360 * _radian;
this.drawOuterCircle = false;
this.drawDonut = false;
const dMax = oR + iR,
dMin = oR - iR;
const equalCircles = (!dMin) ? true : false;
if (equalCircles && !disp) this.drawOuterCircle = true;
else {
if (disp >= dMax) this.drawOuterCircle = true;
else if (disp < dMax && disp > dMin) {
const cell = requestCell();
const {engine, element} = cell;
const v = requestCoordinate();
let a, b;Decided to calculate the start/end angles for each circle through brute force
/* eslint-disable-next-line */
element.width = element.width;
engine.fillStyle = 'black';
engine.save();
engine.beginPath();
engine.arc(0, 0, oR, 0, Math.PI * 2);
v.setFromArray([iR, 0]);
for (a = 0; a < 360; a += 0.5) {
v.rotate(0.5);
if(engine.isPointInPath(v[0] + disp, v[1])) break;
}
engine.restore();
engine.save();
engine.beginPath();
engine.arc(disp, 0, iR, 0, Math.PI * 2);
v.setFromArray([oR, 0]);
for (b = 0; b < 360; b += 0.5) {
v.rotate(0.5);
if(!engine.isPointInPath(...v)) break;
}
engine.restore();
this.outerCircleStart = -b * _radian;
this.outerCircleEnd = b * _radian;
this.innerCircleStart = a * _radian;
this.innerCircleEnd = -a * _radian;
releaseCoordinate(v);
releaseCell(cell);
}
else this.drawDonut = true;
}
};Calculate the Crescent entity’s Path2D object
P.cleanPathObject = function () {
this.dirtyPathObject = false;
if (!this.noPathUpdates || !this.pathObject) {
this.calculateInterception();
const { currentStampHandlePosition:handle, currentScale:scale, outerCircleStart:ocs, outerCircleEnd:oce, innerCircleStart:ics, innerCircleEnd:ice, drawOuterCircle, displayIntersect } = this;
let { currentOuterRadius:oR, currentInnerRadius:iR, currentDisplacement:disp } = this;
const p = this.pathObject = new Path2D();
oR *= scale;
iR *= scale;
disp *= scale;
const x = oR - (handle[0] * scale),
y = oR - (handle[1] * scale);
if (drawOuterCircle) {
p.arc(x, y, oR, ocs, oce);
p.closePath();
this.pathObjectOuter = false;
this.pathObjectInner = false;
}
else {
const pOuter = this.pathObjectOuter = new Path2D();
const pInner = this.pathObjectInner = new Path2D();
if (displayIntersect) p.arc(x, y, oR, ocs, oce);
else p.arc(x, y, oR, ocs, oce, true);
p.arc(x + disp, y, iR, ics, ice);
p.closePath();
pOuter.arc(x, y, oR, ocs, oce, true);
pOuter.closePath();
pInner.arc(x + disp, y, iR, ics, ice);
pInner.closePath();
}
}
};draw - stroke the entity outline with the entity’s strokeStyle color, gradient or pattern - including shadow
P.draw = function (engine) {
if (!this.drawDonut) engine.stroke(this.pathObject);
else {
engine.stroke(this.pathObjectOuter);
engine.stroke(this.pathObjectInner);
}
};fill - fill the entity with the entity’s fillStyle color, gradient or pattern - including shadow
P.fill = function (engine) {
engine.fill(this.pathObject, this.winding);
};drawAndFill - stamp the entity stroke, then fill, then remove shadow and repeat
P.drawAndFill = function (engine) {
if (!this.drawDonut) {
const p = this.pathObject;
engine.stroke(p);
engine.fill(p, this.winding);
this.currentHost.clearShadow();
engine.stroke(p);
engine.fill(p, this.winding);
}
else {
const p = this.pathObject,
pOuter = this.pathObjectOuter,
pInner = this.pathObjectInner;
engine.stroke(pOuter);
engine.stroke(pInner);
engine.fill(p, this.winding);
this.currentHost.clearShadow();
engine.stroke(pOuter);
engine.stroke(pInner);
engine.fill(p, this.winding);
}
};drawAndFill - stamp the entity fill, then stroke, then remove shadow and repeat
P.fillAndDraw = function (engine) {
if (!this.drawDonut) {
const p = this.pathObject;
engine.fill(p, this.winding);
engine.stroke(p);
this.currentHost.clearShadow();
engine.fill(p, this.winding);
engine.stroke(p);
}
else {
const p = this.pathObject,
pOuter = this.pathObjectOuter,
pInner = this.pathObjectInner;
engine.fill(p, this.winding);
engine.stroke(pOuter);
engine.stroke(pInner);
this.currentHost.clearShadow();
engine.fill(p, this.winding);
engine.stroke(pOuter);
engine.stroke(pInner);
}
};drawThenFill - stroke the entity’s outline, then fill it (shadow applied twice)
P.drawThenFill = function (engine) {
if (!this.drawDonut) {
const p = this.pathObject;
engine.stroke(p);
engine.fill(p, this.winding);
}
else {
const p = this.pathObject,
pOuter = this.pathObjectOuter,
pInner = this.pathObjectInner;
engine.stroke(pOuter);
engine.stroke(pInner);
engine.fill(p, this.winding);
}
};fillThenDraw - fill the entity’s outline, then stroke it (shadow applied twice)
P.fillThenDraw = function (engine) {
if (!this.drawDonut) {
const p = this.pathObject;
engine.fill(p, this.winding);
engine.stroke(p);
}
else {
const p = this.pathObject,
pOuter = this.pathObjectOuter,
pInner = this.pathObjectInner;
engine.fill(p, this.winding);
engine.stroke(pOuter);
engine.stroke(pInner);
}
};clip - restrict drawing activities to the entity’s enclosed area
P.clip = function (engine) {
engine.clip(this.pathObject, this.winding);
};clear - remove everything that would have been covered if the entity had performed fill (including shadow)
P.clear = function (engine) {
const gco = engine.globalCompositeOperation;
engine.globalCompositeOperation = DESTINATION_OUT;
engine.fill(this.pathObject, this.winding);
engine.globalCompositeOperation = gco;
};export const makeCrescent = function (items) {
if (!items) return false;
return new Crescent(items);
};
constructors.Crescent = Crescent;