g2o-graphics
Version:
343 lines (338 loc) • 13.5 kB
JavaScript
/**
* g2o-graphics 1.0.0-alpha.0
* (c) David Geo Holmes david.geo.holmes@gmail.com
* Released under the MIT License.
*/
System.register(['g2o', 'g2o-reactive'], (function (exports) {
'use strict';
var Path, dispose, Anchor, G20, state, effect;
return {
setters: [function (module) {
Path = module.Path;
dispose = module.dispose;
Anchor = module.Anchor;
G20 = module.G20;
}, function (module) {
state = module.state;
effect = module.effect;
}],
execute: (function () {
const cos$1 = Math.cos;
const sin$1 = Math.sin;
class RegularPolygon extends Path {
#trash = [];
#radius = state(1);
#twist = state(0);
#sides = state(6);
constructor(board, options = {}) {
super(board, [], true, false, true, path_attribs_from_regular_polygon_attribs(options));
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) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: options.fillColor,
fillOpacity: options.fillOpacity,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWidth: options.strokeWidth,
// 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 = state(Math.SQRT2);
#height = state(Math.SQRT2);
#radius = state(0.2);
constructor(board, 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(board, points, true, false, true, path_attribs_from_rounded_rectangle_attribs(options));
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_attribs_from_rounded_rectangle_attribs(options) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: options.fillColor,
fillOpacity: options.fillOpacity,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWidth: options.strokeWidth
};
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 = state(0.5);
#outerRadius = state(1);
#points = state(8);
#twist = state(0);
constructor(board, options = {}) {
super(board, [], true, false, true, path_attribs_from_star_attribs(options));
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_attribs_from_star_attribs(options) {
const retval = {
id: options.id,
attitude: options.attitude,
opacity: options.opacity,
position: options.position,
visibility: options.visibility,
fillColor: options.fillColor,
fillOpacity: options.fillOpacity,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWidth: options.strokeWidth
};
return retval;
}
})
};
}));
//# sourceMappingURL=index.js.map