sprotty - npm Package Compare versions

Comparing version 0.5.0-next.507226f3 to 0.5.0-next.90d9d8c2

lib/lib/html-views.js

@@ -9,3 +9,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx svg */
+/** @jsx html */
 var snabbdom_jsx_1 = require("snabbdom-jsx");
@@ -17,3 +17,3 @@ var vnode_utils_1 = require("../base/views/vnode-utils");
     HtmlRootView.prototype.render = function (model, context) {
-        var root = snabbdom_jsx_1.svg("div", null, context.renderChildren(model));
+        var root = snabbdom_jsx_1.html("div", null, context.renderChildren(model));
         for (var _i = 0, _a = model.classes; _i < _a.length; _i++) {
@@ -20,0 +20,0 @@ var c = _a[_i];

lib/lib/model.d.ts

@@ -23,2 +23,9 @@ import { SModelRoot, SModelRootSchema, SChildElement, SModelElementSchema } from "../base/model/smodel";
 /**
+ * A node that is represented by a diamond.
+ */
+export declare class DiamondNode extends SNode {
+    strokeWidth: number;
+    getAnchor(refPoint: Point, offset?: number): Point;
+}
+/**
  * A port that is represented by a circle.
@@ -25,0 +32,0 @@ */

lib/lib/model.js

@@ -71,2 +71,20 @@ "use strict";
 /**
+ * A node that is represented by a diamond.
+ */
+var DiamondNode = /** @class */ (function (_super) {
+    __extends(DiamondNode, _super);
+    function DiamondNode() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.strokeWidth = 0;
+        return _this;
+    }
+    DiamondNode.prototype.getAnchor = function (refPoint, offset) {
+        if (offset === void 0) { offset = 0; }
+        var strokeCorrection = 0.5 * this.strokeWidth;
+        return anchors_1.computeDiamondAnchor(this.bounds, refPoint, offset + strokeCorrection);
+    };
+    return DiamondNode;
+}(sgraph_1.SNode));
+exports.DiamondNode = DiamondNode;
+/**
  * A port that is represented by a circle.
@@ -73,0 +91,0 @@ */

lib/lib/svg-views.d.ts

@@ -17,2 +17,5 @@ import { VNode } from "snabbdom/vnode";
 }
+export declare class DiamondNodeView implements IView {
+    render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode;
+}
 //# sourceMappingURL=svg-views.d.ts.map

lib/lib/svg-views.js

@@ -12,2 +12,3 @@ "use strict";
 var sgraph_1 = require("../graph/sgraph");
+var geometry_1 = require("../utils/geometry");
 var SvgViewportView = /** @class */ (function () {
@@ -51,2 +52,18 @@ function SvgViewportView() {
 exports.RectangularNodeView = RectangularNodeView;
+var DiamondNodeView = /** @class */ (function () {
+    function DiamondNodeView() {
+    }
+    DiamondNodeView.prototype.render = function (node, context) {
+        var diamond = new geometry_1.Diamond({ height: Math.max(node.size.height, 0), width: Math.max(node.size.width, 0), x: 0, y: 0 });
+        var points = svgStr(diamond.topPoint) + " " + svgStr(diamond.rightPoint) + " " + svgStr(diamond.bottomPoint) + " " + svgStr(diamond.leftPoint);
+        return snabbdom_jsx_1.svg("g", null,
+            snabbdom_jsx_1.svg("polygon", { "class-sprotty-node": node instanceof sgraph_1.SNode, "class-sprotty-port": node instanceof sgraph_1.SPort, "class-mouseover": node.hoverFeedback, "class-selected": node.selected, points: points }),
+            context.renderChildren(node));
+    };
+    return DiamondNodeView;
+}());
+exports.DiamondNodeView = DiamondNodeView;
+function svgStr(point) {
+    return point.x + "," + point.y;
+}
 //# sourceMappingURL=svg-views.js.map

lib/utils/anchors.d.ts

 import { Point, Bounds } from './geometry';
 export declare function computeCircleAnchor(position: Point, radius: number, refPoint: Point, offset?: number): Point;
 export declare function computeRectangleAnchor(bounds: Bounds, refPoint: Point, offset: number): Point;
+export declare function computeDiamondAnchor(bounds: Bounds, refPoint: Point, offset: number): Point;
 //# sourceMappingURL=anchors.d.ts.map

lib/utils/anchors.js

@@ -85,2 +85,9 @@ "use strict";
 exports.computeRectangleAnchor = computeRectangleAnchor;
+function computeDiamondAnchor(bounds, refPoint, offset) {
+    var referenceLine = new geometry_1.PointToPointLine(geometry_1.center(bounds), refPoint);
+    var closestDiamondSide = new geometry_1.Diamond(bounds).closestSideLine(refPoint);
+    var anchorPoint = closestDiamondSide.intersection(referenceLine);
+    return geometry_1.shiftTowards(anchorPoint, refPoint, offset);
+}
+exports.computeDiamondAnchor = computeDiamondAnchor;
 //# sourceMappingURL=anchors.js.map

lib/utils/geometry.d.ts

@@ -130,2 +130,21 @@ /**
 /**
+ * Computes a point that is the original `point` shifted towards `refPoint` by the given `distance`.
+ * @param {Point} point - Point to shift
+ * @param {Point} refPoint - Point to shift towards
+ * @param {Point} distance - Distance to shift
+ */
+export declare function shiftTowards(point: Point, refPoint: Point, distance: number): Point;
+/**
+ * Computes the normalized vector from the vector given in `point`; that is, computing its unit vector.
+ * @param {Point} point - Point representing the vector to be normalized
+ * @returns {Point} The normalized point
+ */
+export declare function normalize(point: Point): Point;
+/**
+ * Computes the magnitude of the vector given in `point`.
+ * @param {Point} point - Point representing the vector to compute the magnitude for
+ * @returns {number} The magnitude or also known as length of the `point`
+ */
+export declare function magnitude(point: Point): number;
+/**
  * Converts from radians to degrees
@@ -149,2 +168,47 @@ * @param {number} a - A value in radians
 export declare function almostEquals(a: number, b: number): boolean;
+/**
+ * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
+ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,
+ * which are connected by four lines -- the `topRightSideLight`, `topLeftSideLine`, `bottomRightSideLine`,
+ * and the `bottomLeftSideLine`.
+ */
+export declare class Diamond {
+    protected bounds: Bounds;
+    constructor(bounds: Bounds);
+    readonly topPoint: Point;
+    readonly rightPoint: Point;
+    readonly bottomPoint: Point;
+    readonly leftPoint: Point;
+    readonly topRightSideLine: Line;
+    readonly topLeftSideLine: Line;
+    readonly bottomRightSideLine: Line;
+    readonly bottomLeftSideLine: Line;
+    /**
+     * Return the closest side of this diamond to the specified `refPoint`.
+     * @param {Point} refPoint a reference point
+     * @returns {Line} a line representing the closest side
+     */
+    closestSideLine(refPoint: Point): Line;
+}
+/**
+ * A line represented in its standard form `a*x + b*y = c`.
+ */
+export interface Line {
+    readonly a: number;
+    readonly b: number;
+    readonly c: number;
+    intersection(otherLine: Line): Point;
+}
+/**
+ * A line made up from two points.
+ */
+export declare class PointToPointLine implements Line {
+    protected p1: Point;
+    protected p2: Point;
+    constructor(p1: Point, p2: Point);
+    readonly a: number;
+    readonly b: number;
+    readonly c: number;
+    intersection(other: Line): Point;
+}
 //# sourceMappingURL=geometry.d.ts.map

lib/utils/geometry.js

@@ -199,2 +199,40 @@ "use strict";
 /**
+ * Computes a point that is the original `point` shifted towards `refPoint` by the given `distance`.
+ * @param {Point} point - Point to shift
+ * @param {Point} refPoint - Point to shift towards
+ * @param {Point} distance - Distance to shift
+ */
+function shiftTowards(point, refPoint, distance) {
+    var diff = subtract(refPoint, point);
+    var normalized = normalize(diff);
+    var shift = { x: normalized.x * distance, y: normalized.y * distance };
+    return add(point, shift);
+}
+exports.shiftTowards = shiftTowards;
+/**
+ * Computes the normalized vector from the vector given in `point`; that is, computing its unit vector.
+ * @param {Point} point - Point representing the vector to be normalized
+ * @returns {Point} The normalized point
+ */
+function normalize(point) {
+    var mag = magnitude(point);
+    if (mag === 0 || mag === 1) {
+        return exports.ORIGIN_POINT;
+    }
+    return {
+        x: point.x / mag,
+        y: point.y / mag
+    };
+}
+exports.normalize = normalize;
+/**
+ * Computes the magnitude of the vector given in `point`.
+ * @param {Point} point - Point representing the vector to compute the magnitude for
+ * @returns {number} The magnitude or also known as length of the `point`
+ */
+function magnitude(point) {
+    return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
+}
+exports.magnitude = magnitude;
+/**
  * Converts from radians to degrees
@@ -227,2 +265,145 @@ * @param {number} a - A value in radians
 exports.almostEquals = almostEquals;
+/**
+ * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
+ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,
+ * which are connected by four lines -- the `topRightSideLight`, `topLeftSideLine`, `bottomRightSideLine`,
+ * and the `bottomLeftSideLine`.
+ */
+var Diamond = /** @class */ (function () {
+    function Diamond(bounds) {
+        this.bounds = bounds;
+    }
+    Object.defineProperty(Diamond.prototype, "topPoint", {
+        get: function () {
+            return {
+                x: this.bounds.x + this.bounds.width / 2,
+                y: this.bounds.y
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "rightPoint", {
+        get: function () {
+            return {
+                x: this.bounds.x + this.bounds.width,
+                y: this.bounds.y + this.bounds.height / 2
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "bottomPoint", {
+        get: function () {
+            return {
+                x: this.bounds.x + this.bounds.width / 2,
+                y: this.bounds.y + this.bounds.height
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "leftPoint", {
+        get: function () {
+            return {
+                x: this.bounds.x,
+                y: this.bounds.y + this.bounds.height / 2
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "topRightSideLine", {
+        get: function () {
+            return new PointToPointLine(this.topPoint, this.rightPoint);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "topLeftSideLine", {
+        get: function () {
+            return new PointToPointLine(this.topPoint, this.leftPoint);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "bottomRightSideLine", {
+        get: function () {
+            return new PointToPointLine(this.bottomPoint, this.rightPoint);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Diamond.prototype, "bottomLeftSideLine", {
+        get: function () {
+            return new PointToPointLine(this.bottomPoint, this.leftPoint);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Return the closest side of this diamond to the specified `refPoint`.
+     * @param {Point} refPoint a reference point
+     * @returns {Line} a line representing the closest side
+     */
+    Diamond.prototype.closestSideLine = function (refPoint) {
+        var c = center(this.bounds);
+        if (refPoint.x > c.x) {
+            if (refPoint.y > c.y) {
+                return this.bottomRightSideLine;
+            }
+            else {
+                return this.topRightSideLine;
+            }
+        }
+        else {
+            if (refPoint.y > c.y) {
+                return this.bottomLeftSideLine;
+            }
+            else {
+                return this.topLeftSideLine;
+            }
+        }
+    };
+    return Diamond;
+}());
+exports.Diamond = Diamond;
+/**
+ * A line made up from two points.
+ */
+var PointToPointLine = /** @class */ (function () {
+    function PointToPointLine(p1, p2) {
+        this.p1 = p1;
+        this.p2 = p2;
+    }
+    Object.defineProperty(PointToPointLine.prototype, "a", {
+        get: function () {
+            return this.p1.y - this.p2.y;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PointToPointLine.prototype, "b", {
+        get: function () {
+            return this.p2.x - this.p1.x;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PointToPointLine.prototype, "c", {
+        get: function () {
+            return this.p2.x * this.p1.y - this.p1.x * this.p2.y;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PointToPointLine.prototype.intersection = function (other) {
+        return {
+            x: (this.c * other.b - other.c * this.b) / (this.a * other.b - other.a * this.b),
+            y: (this.a * other.c - other.a * this.c) / (this.a * other.b - other.a * this.b)
+        };
+    };
+    return PointToPointLine;
+}());
+exports.PointToPointLine = PointToPointLine;
 //# sourceMappingURL=geometry.js.map

package.json

 {
   "name": "sprotty",
-  "version": "0.5.0-next.507226f3",
+  "version": "0.5.0-next.90d9d8c2",
   "description": "A next-gen framework for graphical views",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

src/lib/model.ts

@@ -10,3 +10,3 @@ /*
 import { Point, Dimension, ORIGIN_POINT, EMPTY_DIMENSION, Bounds } from "../utils/geometry";
-import { computeCircleAnchor, computeRectangleAnchor } from '../utils/anchors';
+import { computeCircleAnchor, computeRectangleAnchor, computeDiamondAnchor } from '../utils/anchors';
 import { BoundsAware, boundsFeature, Alignable, alignFeature } from "../features/bounds/model";
@@ -47,2 +47,14 @@ import { Locateable, moveFeature } from "../features/move/model";
 /**
+ * A node that is represented by a diamond.
+ */
+export class DiamondNode extends SNode {
+    strokeWidth: number = 0;
+
+    getAnchor(refPoint: Point, offset: number = 0): Point {
+        const strokeCorrection = 0.5 * this.strokeWidth;
+        return computeDiamondAnchor(this.bounds, refPoint, offset + strokeCorrection);
+    }
+}
+
+/**
  * A port that is represented by a circle.
@@ -49,0 +61,0 @@ */

src/utils/anchors.ts

@@ -8,3 +8,3 @@ /*
 
-import { Point, Bounds, center, almostEquals } from './geometry';
+import { Point, Bounds, center, almostEquals, PointToPointLine, Diamond, shiftTowards } from './geometry';
 
@@ -84,1 +84,8 @@ export function computeCircleAnchor(position: Point, radius: number, refPoint: Point, offset: number = 0): Point {
 }
+
+export function computeDiamondAnchor(bounds: Bounds, refPoint: Point, offset: number): Point {
+    const referenceLine = new PointToPointLine(center(bounds), refPoint);
+    const closestDiamondSide = new Diamond(bounds).closestSideLine(refPoint);
+    const anchorPoint = closestDiamondSide.intersection(referenceLine);
+    return shiftTowards(anchorPoint, refPoint, offset);
+}

src/utils/geometry.ts

@@ -228,2 +228,40 @@ /*
 /**
+ * Computes a point that is the original `point` shifted towards `refPoint` by the given `distance`.
+ * @param {Point} point - Point to shift
+ * @param {Point} refPoint - Point to shift towards
+ * @param {Point} distance - Distance to shift
+ */
+export function shiftTowards(point: Point, refPoint: Point, distance: number): Point {
+    const diff = subtract(refPoint, point);
+    const normalized = normalize(diff);
+    const shift = {x: normalized.x * distance, y: normalized.y * distance};
+    return add(point, shift);
+}
+
+/**
+ * Computes the normalized vector from the vector given in `point`; that is, computing its unit vector.
+ * @param {Point} point - Point representing the vector to be normalized
+ * @returns {Point} The normalized point
+ */
+export function normalize(point: Point): Point {
+    const mag = magnitude(point);
+    if (mag === 0 || mag === 1) {
+        return ORIGIN_POINT;
+    }
+    return {
+        x: point.x / mag,
+        y: point.y / mag
+    };
+}
+
+/**
+ * Computes the magnitude of the vector given in `point`.
+ * @param {Point} point - Point representing the vector to compute the magnitude for
+ * @returns {number} The magnitude or also known as length of the `point`
+ */
+export function magnitude(point: Point): number {
+    return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
+}
+
+/**
  * Converts from radians to degrees
@@ -255,1 +293,117 @@ * @param {number} a - A value in radians
 }
+
+/**
+ * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
+ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,
+ * which are connected by four lines -- the `topRightSideLight`, `topLeftSideLine`, `bottomRightSideLine`,
+ * and the `bottomLeftSideLine`.
+ */
+export class Diamond {
+
+    constructor(protected bounds: Bounds) { }
+
+    get topPoint(): Point {
+        return {
+            x: this.bounds.x + this.bounds.width / 2,
+            y: this.bounds.y
+        };
+    }
+
+    get rightPoint(): Point {
+        return {
+            x: this.bounds.x + this.bounds.width,
+            y: this.bounds.y + this.bounds.height / 2
+        };
+    }
+
+    get bottomPoint(): Point {
+        return {
+            x: this.bounds.x + this.bounds.width / 2,
+            y: this.bounds.y + this.bounds.height
+        };
+    }
+
+    get leftPoint(): Point {
+        return {
+            x: this.bounds.x,
+            y: this.bounds.y + this.bounds.height / 2
+        };
+    }
+
+    get topRightSideLine(): Line {
+        return new PointToPointLine(this.topPoint, this.rightPoint);
+    }
+
+    get topLeftSideLine(): Line {
+        return new PointToPointLine(this.topPoint, this.leftPoint);
+    }
+
+    get bottomRightSideLine(): Line {
+        return new PointToPointLine(this.bottomPoint, this.rightPoint);
+    }
+
+    get bottomLeftSideLine(): Line {
+        return new PointToPointLine(this.bottomPoint, this.leftPoint);
+    }
+
+    /**
+     * Return the closest side of this diamond to the specified `refPoint`.
+     * @param {Point} refPoint a reference point
+     * @returns {Line} a line representing the closest side
+     */
+    closestSideLine(refPoint: Point): Line {
+        const c = center(this.bounds);
+        if (refPoint.x > c.x) {
+            if (refPoint.y > c.y) {
+                return this.bottomRightSideLine;
+            } else {
+                return this.topRightSideLine;
+            }
+        } else {
+            if (refPoint.y > c.y) {
+                return this.bottomLeftSideLine;
+            } else {
+                return this.topLeftSideLine;
+            }
+        }
+    }
+}
+
+/**
+ * A line represented in its standard form `a*x + b*y = c`.
+ */
+export interface Line {
+
+    readonly a: number
+    readonly b: number
+    readonly c: number
+
+    intersection(otherLine: Line): Point
+}
+
+/**
+ * A line made up from two points.
+ */
+export class PointToPointLine implements Line {
+
+    constructor(protected p1: Point, protected p2: Point) { }
+
+    get a(): number {
+        return this.p1.y - this.p2.y;
+    }
+
+    get b(): number {
+        return this.p2.x - this.p1.x;
+    }
+
+    get c(): number {
+        return this.p2.x * this.p1.y - this.p1.x * this.p2.y;
+    }
+
+    intersection(other: Line): Point {
+        return {
+            x: (this.c * other.b - other.c * this.b) / (this.a * other.b - other.a * this.b),
+            y: (this.a * other.c - other.a * this.c) / (this.a * other.b - other.a * this.b)
+        };
+    }
+}

No alert changes

Improved metrics

Total package byte prevSize

1459887

increased by1.61%

Lines of code

25354

increased by1.85%

No dependency changes