@g20/graphics
Version:
372 lines (364 loc) • 15.2 kB
JavaScript
/**
* @g20/graphics 1.0.0-alpha.46
* (c) David Geo Holmes david.geo.holmes@gmail.com
* Released under the MIT License.
*/
System.register(['@g20/core', '@g20/reactive'], (function (exports) {
'use strict';
var is_color, Path, dispose, Anchor, G20, signal, effect;
return {
setters: [function (module) {
is_color = module.is_color;
Path = module.Path;
dispose = module.dispose;
Anchor = module.Anchor;
G20 = module.G20;
}, function (module) {
signal = module.signal;
effect = module.effect;
}],
execute: (function () {
function default_color(attributeValue, defaultValue) {
if (is_color(attributeValue)) {
return attributeValue;
}
else {
return defaultValue;
}
}
function default_number(value, defaultValue) {
if (typeof value === "number") {
return value;
}
else {
return defaultValue;
}
}
const STROKE_WIDTH_CLOSED_PATH_PIXELS = 3;
function default_closed_path_stroke_width(strokeWidth, owner) {
if (typeof strokeWidth === "number") {
return strokeWidth;
}
else {
return STROKE_WIDTH_CLOSED_PATH_PIXELS / owner.sx;
}
}
const cos$1 = Math.cos;
const sin$1 = Math.sin;
class RegularPolygon extends Path {
#trash = [];
#radius = signal(1);
#twist = signal(0);
#sides = signal(6);
constructor(owner, options = {}) {
super(owner, [], true, false, true, path_attribs_from_regular_polygon_attribs(options, owner));
if (typeof options.radius === "number") {
this.radius = options.radius;
}
if (typeof options.sides === "number") {
const MIN = 3;
const MAX = 24;
this.sides = Math.min(Math.max(options.sides, MIN), MAX);
}
if (typeof options.twist === "number") {
this.twist = options.twist;
}
this.#trash.push(effect(() => {
this.update();
}));
this.flagReset(true);
}
dispose() {
dispose(this.#trash);
super.dispose();
}
update() {
update_vertices$2(this.radius, this.sides, this.twist, this.vertices);
super.update();
return this;
}
flagReset(dirtyFlag = false) {
super.flagReset(dirtyFlag);
return this;
}
get radius() {
return this.#radius.get();
}
set radius(radius) {
this.#radius.set(radius);
}
get sides() {
return this.#sides.get();
}
set sides(sides) {
this.#sides.set(sides);
}
get twist() {
return this.#twist.get();
}
set twist(twist) {
this.#twist.set(twist);
}
} exports("RegularPolygon", RegularPolygon);
function path_attribs_from_regular_polygon_attribs(options, owner) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: default_color(options.fillColor, owner.defaults.polygon.fillColor),
fillOpacity: default_number(options.fillOpacity, owner.defaults.polygon.fillOpacity),
strokeColor: default_color(options.strokeColor, owner.defaults.polygon.strokeColor),
strokeOpacity: default_number(options.strokeOpacity, owner.defaults.polygon.strokeOpacity),
strokeWidth: default_closed_path_stroke_width(options.strokeWidth, owner)
// plumb: attributes.plumb
};
return retval;
}
function update_vertices$2(radius, sides, twist, vertices) {
const N = sides + 1;
if (vertices.length > N) {
vertices.splice(N, vertices.length - N);
}
while (vertices.length < N) {
vertices.push(new Anchor(G20.vector(0, 0)));
}
for (let i = 0; i < N; i++) {
const theta = (2 * Math.PI * i) / sides + twist;
const x = radius * cos$1(theta);
const y = radius * sin$1(theta);
const vertex = vertices.getAt(i);
vertex.origin.set(x, y);
vertex.command = i === 0 ? "M" : "L";
}
}
class RoundedRectangle extends Path {
#trash = [];
#width = signal(Math.SQRT2);
#height = signal(Math.SQRT2);
#radius = signal(0.2);
constructor(owner, options = {}) {
if (typeof options.radius === "undefined" && typeof options.width === "number" && typeof options.height === "number") {
options.radius = Math.floor(Math.min(options.width, options.height) / 12);
}
const points = [];
for (let i = 0; i < 10; i++) {
const origin = G20.vector(0, 0);
const command = i === 0 ? "M" : "C";
points.push(new Anchor(origin, command));
}
super(owner, points, true, false, true, path_options_from_rounded_rectangle_options(options, owner));
if (typeof options.width === "number") {
this.width = options.width;
}
if (typeof options.height === "number") {
this.height = options.height;
}
if (typeof options.radius === "number") {
this.radius = options.radius;
}
this.#trash.push(effect(() => {
this.update();
}));
}
dispose() {
dispose(this.#trash);
super.dispose();
}
update() {
update_vertices$1(this.width, this.height, this.radius, this.vertices);
super.update();
return this;
}
get width() {
return this.#width.get();
}
set width(width) {
this.#width.set(width);
}
get height() {
return this.#height.get();
}
set height(height) {
this.#height.set(height);
}
get radius() {
return this.#radius.get();
}
set radius(radius) {
this.#radius.set(radius);
}
} exports("RoundedRectangle", RoundedRectangle);
function path_options_from_rounded_rectangle_options(options, owner) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: default_color(options.fillColor, owner.defaults.polygon.fillColor),
fillOpacity: default_number(options.fillOpacity, owner.defaults.polygon.fillOpacity),
strokeColor: default_color(options.strokeColor, owner.defaults.polygon.strokeColor),
strokeOpacity: default_number(options.strokeOpacity, owner.defaults.polygon.strokeOpacity),
strokeWidth: default_closed_path_stroke_width(options.strokeWidth, owner)
};
return retval;
}
function update_vertices$1(width, height, radius, vertices) {
const rx = radius;
const ry = radius;
let v;
const w = width / 2;
const h = height / 2;
v = vertices.getAt(0);
v.x = -(w - rx);
v.y = -h;
// Upper Right Corner
v = vertices.getAt(1);
v.x = w - rx;
v.y = -h;
v.controls.a.clear();
v.controls.b.x = rx;
v.controls.b.y = 0;
v = vertices.getAt(2);
v.x = w;
v.y = -(h - ry);
v.controls.b.clear();
v.controls.a.clear();
// Bottom Right Corner
v = vertices.getAt(3);
v.x = w;
v.y = h - ry;
v.controls.a.clear();
v.controls.b.x = 0;
v.controls.b.y = ry;
v = vertices.getAt(4);
v.x = w - rx;
v.y = h;
v.controls.b.clear();
v.controls.a.clear();
// Bottom Left Corner
v = vertices.getAt(5);
v.x = -(w - rx);
v.y = h;
v.controls.a.clear();
v.controls.b.x = -rx;
v.controls.b.y = 0;
v = vertices.getAt(6);
v.x = -w;
v.y = h - ry;
v.controls.a.clear();
v.controls.b.clear();
// Upper Left Corner
v = vertices.getAt(7);
v.x = -w;
v.y = -(h - ry);
v.controls.a.clear();
v.controls.b.x = 0;
v.controls.b.y = -ry;
v = vertices.getAt(8);
v.x = -(w - rx);
v.y = -h;
v.controls.a.clear();
v.controls.b.clear();
v = vertices.getAt(9);
v.copy(vertices.getAt(8));
}
const cos = Math.cos, sin = Math.sin;
class Star extends Path {
#trash = [];
#innerRadius = signal(0.5);
#outerRadius = signal(1);
#points = signal(8);
#twist = signal(0);
constructor(owner, options = {}) {
super(owner, [], true, false, true, path_options_from_star_options(options, owner));
if (typeof options.innerRadius === "number") {
this.innerRadius = options.innerRadius;
}
if (typeof options.outerRadius === "number") {
this.outerRadius = options.outerRadius;
}
if (typeof options.points === "number") {
this.points = options.points;
}
if (typeof options.twist === "number") {
this.twist = options.twist;
}
this.#trash.push(effect(() => {
this.update();
}));
}
dispose() {
dispose(this.#trash);
super.dispose();
}
update() {
update_vertices(this.points, this.innerRadius, this.outerRadius, this.twist, this.vertices);
super.update();
return this;
}
get innerRadius() {
return this.#innerRadius.get();
}
set innerRadius(innerRadius) {
this.#innerRadius.set(innerRadius);
}
get outerRadius() {
return this.#outerRadius.get();
}
set outerRadius(outerRadius) {
this.#outerRadius.set(outerRadius);
}
get points() {
return this.#points.get();
}
set points(points) {
this.#points.set(points);
}
get twist() {
return this.#twist.get();
}
set twist(twist) {
this.#twist.set(twist);
}
} exports("Star", Star);
function update_vertices(points, innerRadius, outerRadius, twist, vertices) {
const sides = 2 * points;
const N = sides + 1;
if (vertices.length > N) {
vertices.splice(N, vertices.length - N);
}
while (vertices.length < N) {
vertices.push(new Anchor(G20.vector(0, 0)));
}
for (let i = 0; i < N; i++) {
const theta = (2 * Math.PI * i) / sides + twist;
const r = i % 2 === 0 ? outerRadius : innerRadius;
const x = r * cos(theta);
const y = r * sin(theta);
const vertex = vertices.getAt(i);
vertex.origin.set(x, y);
vertex.command = i === 0 ? "M" : "L";
}
}
function path_options_from_star_options(options, owner) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: default_color(options.fillColor, owner.defaults.polygon.fillColor),
fillOpacity: default_number(options.fillOpacity, owner.defaults.polygon.fillOpacity),
strokeColor: default_color(options.strokeColor, owner.defaults.polygon.strokeColor),
strokeOpacity: default_number(options.strokeOpacity, owner.defaults.polygon.strokeOpacity),
strokeWidth: default_closed_path_stroke_width(options.strokeWidth, owner)
};
return retval;
}
})
};
}));
//# sourceMappingURL=index.js.map