g2o-graphics
Version:
333 lines (327 loc) • 9.53 kB
JavaScript
/**
* g2o-graphics 1.0.0-alpha.0
* (c) David Geo Holmes david.geo.holmes@gmail.com
* Released under the MIT License.
*/
'use strict';
var g2o = require('g2o');
var g2oReactive = require('g2o-reactive');
const cos$1 = Math.cos;
const sin$1 = Math.sin;
class RegularPolygon extends g2o.Path {
#trash = [];
#radius = g2oReactive.state(1);
#twist = g2oReactive.state(0);
#sides = g2oReactive.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(g2oReactive.effect(() => {
this.update();
}));
this.flagReset(true);
}
dispose() {
g2o.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);
}
}
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 g2o.Anchor(g2o.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 g2o.Path {
#trash = [];
#width = g2oReactive.state(Math.SQRT2);
#height = g2oReactive.state(Math.SQRT2);
#radius = g2oReactive.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 = g2o.G20.vector(0, 0);
const command = (i === 0) ? 'M' : 'C';
points.push(new g2o.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(g2oReactive.effect(() => {
this.update();
}));
}
dispose() {
g2o.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);
}
}
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 g2o.Path {
#trash = [];
#innerRadius = g2oReactive.state(0.5);
#outerRadius = g2oReactive.state(1);
#points = g2oReactive.state(8);
#twist = g2oReactive.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(g2oReactive.effect(() => {
this.update();
}));
}
dispose() {
g2o.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);
}
}
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 g2o.Anchor(g2o.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;
}
exports.RegularPolygon = RegularPolygon;
exports.RoundedRectangle = RoundedRectangle;
exports.Star = Star;
//# sourceMappingURL=index.js.map