@pacem/pacem-ui 1.0.0-abel

package/dist/esm/binder.js

@@ -0,0 +1,678 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, CustomElement, Watch, Utils, PropertyConverters, Components, CustomUIEvent, CustomElementUtils } from '@pacem/pacem-core';
+import { Point } from '@pacem/pacem-foundation';
+import { ElementOrPointPropertyConverter } from './types';
+// namespace Pacem.Components.UI {
+export var BinderAnchor;
+(function (BinderAnchor) {
+    BinderAnchor["Auto"] = "auto";
+    BinderAnchor["Left"] = "left";
+    BinderAnchor["Top"] = "top";
+    BinderAnchor["Right"] = "right";
+    BinderAnchor["Bottom"] = "bottom";
+    BinderAnchor["Center"] = "center";
+})(BinderAnchor || (BinderAnchor = {}));
+export var BinderEnd;
+(function (BinderEnd) {
+    BinderEnd["Default"] = "default";
+    BinderEnd["Arrow"] = "arrow";
+    BinderEnd["FatArrow"] = "fatarrow";
+    BinderEnd["None"] = "none";
+})(BinderEnd || (BinderEnd = {}));
+export var BinderTension;
+(function (BinderTension) {
+    BinderTension["Mass"] = "mass";
+    BinderTension["Path"] = "path";
+})(BinderTension || (BinderTension = {}));
+export const BinderInteractionEventName = 'interact';
+export class BinderInteractionEvent extends CustomUIEvent {
+    constructor(orig) {
+        super(BinderInteractionEventName, null, orig);
+    }
+}
+const UI_BINDERS = 'pacem:components:ui:binders';
+class BindersCollector {
+    constructor(element) {
+        this.binders = [];
+        this.fire = (evt) => {
+            for (var binder of this.binders) {
+                binder.refresh(this.resize.target, evt.detail);
+            }
+        };
+        const watcher = this.resize = new Components.PacemResizeElement();
+        watcher.target = element;
+        watcher.watchPosition = true;
+        document.body.appendChild(watcher);
+    }
+    dispose() {
+        this.resize.remove();
+    }
+}
+class BinderUtils {
+    static { this._pageBinders = []; }
+    static _updateResizeListener() {
+        const binders = this._pageBinders;
+        if (Utils.isNull(this._bodyResizeListener)) {
+            const resize = this._bodyResizeListener = new Components.PacemResizeElement();
+            resize.target = document.body;
+            document.body.appendChild(resize);
+            document.addEventListener(Components.ResizeEventName, () => {
+                for (let binder of binders) {
+                    binder.invalidateSize();
+                }
+            }, false);
+        }
+        this._bodyResizeListener.disabled = binders.length === 0;
+    }
+    static register(element, binder) {
+        var collector = CustomElementUtils.getAttachedPropertyValue(element, UI_BINDERS), binders = this._pageBinders;
+        if (Utils.isNull(collector)) {
+            collector = new BindersCollector(element);
+            CustomElementUtils.setAttachedPropertyValue(element, UI_BINDERS, collector);
+        }
+        if (collector.binders.indexOf(binder) == -1) {
+            if (collector.binders.length === 0) {
+                collector.resize.addEventListener(Components.ResizeEventName, collector.fire, false);
+            } //else {
+            binder.refresh(element, collector.resize.currentSize);
+            //}
+            collector.binders.push(binder);
+        }
+        if (binders.indexOf(binder) === -1) {
+            binders.push(binder);
+            this._updateResizeListener();
+        }
+    }
+    static unregister(element, binder) {
+        var collector = CustomElementUtils.getAttachedPropertyValue(element, UI_BINDERS), ndx, binders = this._pageBinders, ndx2;
+        if (!Utils.isNull(collector) && (ndx = collector.binders.indexOf(binder)) > -1) {
+            collector.binders.splice(ndx, 1);
+            if (collector.binders.length === 0) {
+                collector.resize.removeEventListener(Components.ResizeEventName, collector.fire, false);
+                collector.dispose();
+                CustomElementUtils.deleteAttachedPropertyValue(element, UI_BINDERS);
+            }
+        }
+        if ((ndx2 = binders.indexOf(binder)) >= 0) {
+            binders.splice(ndx2, 1);
+            this._updateResizeListener();
+        }
+    }
+}
+const STD_EVENTS = ['click', 'dblclick', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'mousedown', 'mouseup', 'mousemove', 'contextmenu'];
+let PacemBinderElement = class PacemBinderElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._broadcastHandler = (evt) => {
+            var ui = new BinderInteractionEvent(evt);
+            this.dispatchEvent(ui);
+        };
+        this._state = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._ensurePath();
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        if (this.from instanceof Element)
+            BinderUtils.register(this.from, this);
+        if (this.to instanceof Element)
+            BinderUtils.register(this.to, this);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'from':
+            case 'to':
+                if (old instanceof Element) {
+                    BinderUtils.unregister(old, this);
+                }
+                if (val instanceof Element) {
+                    // `BinderUtils.register` eventually calls `.refresh`
+                    BinderUtils.register(val, this);
+                }
+                else {
+                    this.refresh(val);
+                }
+                break;
+            case 'fromLimit':
+            case 'toLimit':
+            case 'fromEnd':
+            case 'toEnd':
+            case 'tension':
+                this._draw();
+                break;
+            case 'fromAnchor':
+                this.refresh(this.from);
+                break;
+            case 'toAnchor':
+                this.refresh(this.to);
+                break;
+            case 'cssClass':
+                if (!Utils.isNull(this._svg)) {
+                    this._svg.setAttribute('class', PCSS + '-binder ' + this.className);
+                }
+                break;
+            case 'hide':
+                if (!first) {
+                    this._setPathVisibility();
+                }
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this._path)) {
+            STD_EVENTS.forEach(e => {
+                this._path.removeEventListener(e, this._broadcastHandler, false);
+            });
+            this._svg.remove();
+            this._path = undefined;
+        }
+        if (this.from instanceof Element)
+            BinderUtils.unregister(this.from, this);
+        if (this.to instanceof Element)
+            BinderUtils.unregister(this.to, this);
+        super.disconnectedCallback();
+    }
+    _setPathVisibility(path = this._path, hide = this.hide, interactive = this.interactive) {
+        if (!Utils.isNull(path)) {
+            if (hide) {
+                path.setAttribute('display', 'none');
+            }
+            else {
+                path.removeAttribute('display');
+            }
+            if (interactive) {
+                path.setAttribute('pointer-events', 'visibleStroke');
+                path.tabIndex = 0;
+            }
+            else {
+                path.removeAttribute('pointer-events');
+                path.tabIndex = -1;
+            }
+        }
+    }
+    _ensurePath() {
+        if (Utils.isNull(this._path)) {
+            let svg = this._svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.style.position = 'absolute';
+            Utils.addClass(svg, PCSS + '-binder ' + this.className);
+            svg.style.top = '0';
+            svg.style.left = '0';
+            svg.style.overflow = 'hidden';
+            svg.style.pointerEvents = 'none';
+            const path = this._path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('fill', 'none');
+            path.setAttribute('display', 'none');
+            this._setPathVisibility();
+            svg.appendChild(path);
+            this.invalidateSize();
+            document.body.appendChild(svg);
+            STD_EVENTS.forEach(e => {
+                path.addEventListener(e, this._broadcastHandler, false);
+            });
+        }
+    }
+    invalidateSize() {
+        const svg = this._svg;
+        if (!Utils.isNull(svg)) {
+            svg.setAttribute('width', document.body.scrollWidth.toString());
+            svg.setAttribute('height', document.body.scrollHeight.toString());
+        }
+    }
+    _computeAnchorPoints(target, anchor, end, ref, refAnchor, refEnd, tension) {
+        var p1, p2, c1, c2;
+        const top = target.top, left = target.left, w = target.width, h = target.height, w2 = w / 2, h2 = h / 2;
+        const r_top = ref.top, r_left = ref.left, r_w = ref.width, r_h = ref.height, r_w2 = r_w / 2, r_h2 = r_h / 2;
+        const p1_center = { x: left + w2, y: top + h2 };
+        const p2_center = { x: r_left + r_w2, y: r_top + r_h2 };
+        const p1_top = { x: left + w2, y: top };
+        const p1_bottom = { x: left + w2, y: top + h };
+        const p1_left = { x: left, y: top + h2 };
+        const p1_right = { x: left + w, y: top + h2 };
+        const p2_top = { x: r_left + r_w2, y: r_top };
+        const p2_bottom = { x: r_left + r_w2, y: r_top + r_h };
+        const p2_left = { x: r_left, y: r_top + r_h2 };
+        const p2_right = { x: r_left + r_w, y: r_top + r_h2 };
+        const points = {
+            'p1_top': p1_top,
+            'p1_bottom': p1_bottom,
+            'p1_left': p1_left,
+            'p1_right': p1_right,
+            'p2_top': p2_top,
+            'p2_bottom': p2_bottom,
+            'p2_left': p2_left,
+            'p2_right': p2_right,
+        };
+        var distance_memoizer = {};
+        function getDistance(suffix1, suffix2) {
+            const key = suffix1 + '_' + suffix2;
+            return distance_memoizer[key] = distance_memoizer[key] || Point.distance(points['p1_' + suffix1], points['p2_' + suffix2]);
+        }
+        if (anchor == BinderAnchor.Auto || refAnchor == BinderAnchor.Auto) {
+            //if (anchor == BinderAnchor.Auto && refAnchor == BinderAnchor.Auto) {
+            // algorithm for finding the closest edges (1 atan + 4 distances)
+            // 1. compute atan of the segment joining the two centers
+            const a = { x: p1_center.x, y: -p1_center.y }, b = { x: p2_center.x, y: -p2_center.y };
+            const slope = Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI;
+            switch (slope) {
+                case 0:
+                    if (anchor == BinderAnchor.Auto)
+                        anchor = BinderAnchor.Right;
+                    if (refAnchor == BinderAnchor.Auto)
+                        refAnchor = BinderAnchor.Left;
+                    break;
+                case 90:
+                    if (anchor == BinderAnchor.Auto)
+                        anchor = BinderAnchor.Top;
+                    if (refAnchor == BinderAnchor.Auto)
+                        refAnchor = BinderAnchor.Bottom;
+                    break;
+                case 180:
+                    if (anchor == BinderAnchor.Auto)
+                        anchor = BinderAnchor.Left;
+                    if (refAnchor == BinderAnchor.Auto)
+                        refAnchor = BinderAnchor.Right;
+                    break;
+                case -90:
+                    if (anchor == BinderAnchor.Auto)
+                        anchor = BinderAnchor.Bottom;
+                    if (refAnchor == BinderAnchor.Auto)
+                        refAnchor = BinderAnchor.Top;
+                    break;
+                default:
+                    // 2. compute distances combining the 4 points (compare 4 distances)
+                    if (slope < 90 && slope > 0) {
+                        // right | top vs left | bottom
+                        let top_2_left = getDistance('top', 'left'), right_2_left = getDistance('right', 'left'), right_2_bottom = getDistance('right', 'bottom'), top_2_bottom = getDistance('top', 'bottom');
+                        var d = Math.min(top_2_left, right_2_left, right_2_bottom, top_2_bottom);
+                        switch (d) {
+                            case top_2_left:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Top;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Left;
+                                break;
+                            case top_2_bottom:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Top;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Bottom;
+                                break;
+                            case right_2_bottom:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Right;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Bottom;
+                                break;
+                            default:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Right;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Left;
+                                break;
+                        }
+                    }
+                    else if (slope < 180 && slope > 90) {
+                        // left | top vs right | bottom
+                        let top_2_right = getDistance('top', 'right'), left_2_right = getDistance('left', 'right'), left_2_bottom = getDistance('left', 'bottom'), top_2_bottom = getDistance('top', 'bottom');
+                        var d = Math.min(top_2_right, left_2_right, left_2_bottom, top_2_bottom);
+                        switch (d) {
+                            case top_2_right:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Top;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Right;
+                                break;
+                            case left_2_right:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Left;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Right;
+                                break;
+                            case left_2_bottom:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Left;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Bottom;
+                                break;
+                            default:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Top;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Bottom;
+                                break;
+                        }
+                    }
+                    else if (slope < -90) {
+                        // left | bottom vs right | top
+                        let bottom_2_right = getDistance('bottom', 'right'), left_2_right = getDistance('left', 'right'), left_2_top = getDistance('left', 'top'), bottom_2_top = getDistance('bottom', 'top');
+                        var d = Math.min(bottom_2_right, left_2_right, left_2_top, bottom_2_top);
+                        switch (d) {
+                            case bottom_2_right:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Bottom;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Right;
+                                break;
+                            case left_2_right:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Left;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Right;
+                                break;
+                            case left_2_top:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Left;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Top;
+                                break;
+                            default:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Bottom;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Top;
+                                break;
+                        }
+                    }
+                    else {
+                        // right | bottom vs left | top
+                        let bottom_2_left = getDistance('bottom', 'left'), right_2_left = getDistance('right', 'left'), right_2_top = getDistance('right', 'top'), bottom_2_top = getDistance('bottom', 'top');
+                        var d = Math.min(bottom_2_left, right_2_left, right_2_top, bottom_2_top);
+                        switch (d) {
+                            case bottom_2_left:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Bottom;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Left;
+                                break;
+                            case right_2_left:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Right;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Left;
+                                break;
+                            case right_2_top:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Right;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Top;
+                                break;
+                            default:
+                                if (anchor == BinderAnchor.Auto)
+                                    anchor = BinderAnchor.Bottom;
+                                if (refAnchor == BinderAnchor.Auto)
+                                    refAnchor = BinderAnchor.Top;
+                                break;
+                        }
+                    }
+                    break;
+            }
+            //}
+        }
+        function computeF(e) {
+            switch (e) {
+                case BinderEnd.Arrow:
+                case BinderEnd.FatArrow:
+                    return 2.0;
+                default:
+                    return 1.0;
+            }
+        }
+        const f = computeF(end), refF = computeF(refEnd);
+        // anchor points calc
+        switch (anchor) {
+            case BinderAnchor.Bottom:
+                p1 = p1_bottom;
+                break;
+            case BinderAnchor.Center:
+                p1 = { x: left + w2, y: top + h2 };
+                c1 = p1;
+                break;
+            case BinderAnchor.Left:
+                p1 = p1_left;
+                break;
+            case BinderAnchor.Right:
+                p1 = p1_right;
+                break;
+            case BinderAnchor.Top:
+                p1 = p1_top;
+                break;
+        }
+        switch (refAnchor) {
+            case BinderAnchor.Bottom:
+                p2 = p2_bottom;
+                break;
+            case BinderAnchor.Center:
+                p2 = { x: r_left + r_w2, y: r_top + r_h2 };
+                c2 = p2;
+                break;
+            case BinderAnchor.Left:
+                p2 = p2_left;
+                break;
+            case BinderAnchor.Right:
+                p2 = p2_right;
+                break;
+            case BinderAnchor.Top:
+                p2 = p2_top;
+                break;
+        }
+        // control points calc
+        switch (tension) {
+            case BinderTension.Path:
+                // adjust the control points based on the path (not on the masses of the element ends)
+                const t = .333; // < tension (fraction of the distance)
+                switch (anchor) {
+                    case BinderAnchor.Bottom:
+                        c1 = { x: p1.x, y: p1.y + Math.abs(f * t * (p2.y - p1.y)) };
+                        break;
+                    case BinderAnchor.Left:
+                        c1 = { x: p1.x - Math.abs(f * t * (p2.x - p1.x)), y: p1.y };
+                        break;
+                    case BinderAnchor.Right:
+                        c1 = { x: p1.x + Math.abs(f * t * (p2.x - p1.x)), y: p1.y };
+                        break;
+                    case BinderAnchor.Top:
+                        c1 = { x: p1.x, y: p1.y - Math.abs(f * t * (p1.y - p2.y)) };
+                        break;
+                }
+                switch (refAnchor) {
+                    case BinderAnchor.Bottom:
+                        c2 = { x: p2.x, y: p2.y + Math.abs(refF * t * (p2.y - p1.y)) };
+                        break;
+                    case BinderAnchor.Left:
+                        c2 = { x: p2.x - Math.abs(refF * t * (p2.x - p1.x)), y: p2.y };
+                        break;
+                    case BinderAnchor.Right:
+                        c2 = { x: p2.x + Math.abs(refF * t * (p2.x - p1.x)), y: p2.y };
+                        break;
+                    case BinderAnchor.Top:
+                        c2 = { x: p2.x, y: p2.y - Math.abs(refF * t * (p2.y - p1.y)) };
+                        break;
+                }
+                break;
+            default:
+                // control points computed based on the mass (size) of the element ends
+                switch (anchor) {
+                    case BinderAnchor.Bottom:
+                        c1 = { x: p1.x, y: p1.y + Math.abs(f * (p1_bottom.y - p1_center.y)) };
+                        break;
+                    case BinderAnchor.Left:
+                        c1 = { x: p1.x - Math.abs(f * (p1_center.x - p1_left.x)), y: p1.y };
+                        break;
+                    case BinderAnchor.Right:
+                        c1 = { x: p1.x + Math.abs(f * (p1_right.x - p1_center.x)), y: p1.y };
+                        break;
+                    case BinderAnchor.Top:
+                        c1 = { x: p1.x, y: p1.y - Math.abs(f * (p1_top.y - p1_center.y)) };
+                        break;
+                }
+                switch (refAnchor) {
+                    case BinderAnchor.Bottom:
+                        c2 = { x: p2.x, y: p2.y + Math.abs(refF * (p2_bottom.y - p2_center.y)) };
+                        break;
+                    case BinderAnchor.Left:
+                        c2 = { x: p2.x - Math.abs(refF * (p2_center.x - p2_left.x)), y: p2.y };
+                        break;
+                    case BinderAnchor.Right:
+                        c2 = { x: p2.x + Math.abs(refF * (p2_right.x - p2_center.x)), y: p2.y };
+                        break;
+                    case BinderAnchor.Top:
+                        c2 = { x: p2.x, y: p2.y - Math.abs(refF * (p2_top.y - p2_center.y)) };
+                        break;
+                }
+        }
+        return { points: [p1, c1, p2, c2], anchors: [anchor, refAnchor] };
+    }
+    refresh(element, args) {
+        var path;
+        if (Utils.isNull(element) || Utils.isNull(path = this._path)) {
+            return;
+        }
+        const draw = !Utils.isNull(this.from) && !Utils.isNull(this.to);
+        const leave = Utils.isNull(this.from) && Utils.isNull(this.to);
+        if (this.disabled || !draw) {
+            path.removeAttribute('d');
+            if (leave) {
+                return;
+            }
+        }
+        // compute anchor points
+        const key = element === this.from ? 'from' : 'to';
+        var anchor = (key === 'from' ? this.fromAnchor : this.toAnchor) || BinderAnchor.Auto;
+        if (Utils.isNull(args)) {
+            if (!(element instanceof Element)) {
+                args = { height: 0, width: 0, left: element.x, top: element.y };
+                anchor = BinderAnchor.Center;
+            }
+            else if (key in this._state) {
+                args = this._state[key].size;
+            }
+        }
+        if (Utils.isNull(args)) {
+            return;
+        }
+        this._state[key] = { size: args, anchor };
+        if (draw) {
+            this._draw();
+        }
+    }
+    //@Debounce()
+    _draw() {
+        var state1 = this._state['from'], state2 = this._state['to'], path = this._path;
+        if (Utils.isNull(path)) {
+            return;
+        }
+        if (Utils.isNullOrEmpty(state1)
+            || Utils.isNullOrEmpty(state2)
+            || (this.from instanceof HTMLElement && !Utils.isVisible(this.from))
+            || (this.to instanceof HTMLElement && !Utils.isVisible(this.to))) {
+            path.setAttribute('d', '');
+            return;
+        }
+        const { points, anchors } = this._computeAnchorPoints(state1.size, state1.anchor, this.fromEnd, state2.size, state2.anchor, this.toEnd, this.tension), p0 = points[0], c0 = points[1], p1 = points[2], c1 = points[3], anchor0 = anchors[0], anchor1 = anchors[1];
+        const x0 = p0.x;
+        const y0 = p0.y;
+        const cx0 = c0.x;
+        const cy0 = c0.y;
+        const x1 = p1.x;
+        const y1 = p1.y;
+        const cx1 = c1.x;
+        const cy1 = c1.y;
+        let dStart = this._getDefaultEndingPath(x0, y0);
+        switch (this.fromEnd) {
+            case BinderEnd.Arrow:
+                dStart = this._getArrowEndingPath(x0, y0, anchor0);
+                break;
+            case BinderEnd.FatArrow:
+                dStart = this._getFatArrowEndingPath(x0, y0, anchor0);
+                break;
+            case BinderEnd.None:
+                dStart = '';
+                break;
+        }
+        let dEnd = this._getDefaultEndingPath(x1, y1);
+        switch (this.toEnd) {
+            case BinderEnd.Arrow:
+                dEnd = this._getArrowEndingPath(x1, y1, anchor1);
+                break;
+            case BinderEnd.FatArrow:
+                dEnd = this._getFatArrowEndingPath(x1, y1, anchor1);
+                break;
+            case BinderEnd.None:
+                dEnd = '';
+                break;
+        }
+        const d = dStart + `M${x0},${y0} C${cx0},${cy0} ${cx1},${cy1} ${x1},${y1}` + dEnd;
+        if (d.indexOf('NaN') === -1) {
+            path.setAttribute('d', d);
+        }
+        if (!Utils.isNullOrEmpty(this.color))
+            path.style.stroke = this.color;
+    }
+    _getDefaultEndingPath(x, y) {
+        return `M${x - 2},${y - 2} h4 v4 h-4 z`;
+    }
+    _getArrowEndingPath(x, y, anchor) {
+        switch (anchor) {
+            case BinderAnchor.Bottom:
+                return `M${x - 4},${y + 4} l4,-4 l4,4`;
+            case BinderAnchor.Top:
+                return `M${x - 4},${y - 4} l4,4 l4,-4`;
+            case BinderAnchor.Left:
+                return `M${x - 4},${y - 4} l4,4 l-4,4`;
+            case BinderAnchor.Right:
+                return `M${x + 4},${y - 4} l-4,4 l4,4`;
+            default:
+                return '';
+        }
+    }
+    _getFatArrowEndingPath(x, y, anchor) {
+        switch (anchor) {
+            case BinderAnchor.Bottom:
+            case BinderAnchor.Top:
+            case BinderAnchor.Left:
+            case BinderAnchor.Right:
+                return this._getArrowEndingPath(x, y, anchor) + ' z';
+            default:
+                return '';
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: ElementOrPointPropertyConverter })
+], PacemBinderElement.prototype, "from", void 0);
+__decorate([
+    Watch({ emit: false, converter: ElementOrPointPropertyConverter })
+], PacemBinderElement.prototype, "to", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "fromAnchor", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "toAnchor", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "fromEnd", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "toEnd", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "tension", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBinderElement.prototype, "color", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemBinderElement.prototype, "interactive", void 0);
+PacemBinderElement = __decorate([
+    CustomElement({ tagName: P + '-binder' })
+], PacemBinderElement);
+export { PacemBinderElement };