diff --git a/libs/arrow.js b/libs/arrow.js
new file mode 100644
index 0000000..6d5ef84
--- /dev/null
+++ b/libs/arrow.js
@@ -0,0 +1,300 @@
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.arrow = (function (exports, draw) {
+    'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+    function __decorate(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;
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    class ArrowData extends draw.LineData {
+    }
+
+    exports.Arrow = class Arrow extends draw.Line {
+        get __tag() { return 'Arrow'; }
+        constructor(data) {
+            super(data);
+            this.__.__useArrow = true;
+        }
+    };
+    __decorate([
+        draw.dataProcessor(ArrowData)
+    ], exports.Arrow.prototype, "__", void 0);
+    __decorate([
+        draw.strokeType('angle')
+    ], exports.Arrow.prototype, "endArrow", void 0);
+    exports.Arrow = __decorate([
+        draw.registerUI()
+    ], exports.Arrow);
+
+    const { M: M$1, L: L$1, C: C$1, Q: Q$1, O: O$1 } = draw.PathCommandMap;
+    const { rotate: rotate$1, copyFrom: copyFrom$1, scale } = draw.PointHelper;
+    const point = {};
+    const PathMatrixHelper = {
+        layout(data, x, y, scaleX, scaleY, rotation, origin) {
+            let command, i = 0, j, len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M$1:
+                    case L$1:
+                        setPoint$1(data, i + 1, x, y, scaleX, scaleY, rotation, origin);
+                        i += 3;
+                        break;
+                    case C$1:
+                        for (j = 1; j < 6; j += 2)
+                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                        i += 7;
+                        break;
+                    case Q$1:
+                        for (j = 1; j < 4; j += 2)
+                            setPoint$1(data, i + j, x, y, scaleX, scaleY, rotation, origin);
+                        i += 5;
+                        break;
+                    case O$1:
+                        data[i + 1] += x;
+                        data[i + 2] += y;
+                        if (scaleX)
+                            data[i + 3] *= scaleX;
+                        if (rotation) {
+                            data[i + 4] += rotation;
+                            data[i + 5] += rotation;
+                        }
+                        i += 7;
+                        break;
+                }
+            }
+        },
+        rotate(data, rotation, center) {
+            PathMatrixHelper.layout(data, 0, 0, 1, 1, rotation, center);
+        }
+    };
+    function setPoint$1(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
+        copyFrom$1(point, data[startIndex], data[startIndex + 1]);
+        if (rotation)
+            rotate$1(point, rotation, origin);
+        if (scaleX)
+            scale(point, scaleX, scaleY);
+        data[startIndex] = x + point.x;
+        data[startIndex + 1] = y + point.y;
+    }
+
+    const { layout, rotate } = PathMatrixHelper;
+    const { getAngle } = draw.PointHelper;
+    const half = { x: -0.5 };
+    const angle = { connect: half, offset: { x: -0.71, bevelJoin: 0.36, roundJoin: 0.22 }, path: [1, -3, -3, 2, 0, 0, 2, -3, 3] };
+    const angleSide = { connect: half, offset: { x: -1.207, bevelJoin: 0.854, roundJoin: 0.707 }, path: [1, -3, -3, 2, 0, 0, 2, -1, 0] };
+    const triangleLinePath = [1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0];
+    const triangle = { connect: half, offset: { x: -0.9, bevelJoin: 0.624, roundJoin: 0.4 }, path: [...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1] };
+    const arrowLinePath = [1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0];
+    const arrow = { connect: half, offset: { x: -1.1, bevelJoin: 0.872, roundJoin: 0.6 }, path: [...arrowLinePath, 1, -2.25, 0.95, 2, -2.25, -0.95] };
+    const triangleFlip = { offset: half, path: [...triangle.path], };
+    rotate(triangleFlip.path, 180, { x: -1.5, y: 0 });
+    const circleLine = { connect: { x: -1.3 }, path: [1, 1.8, -0.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0], };
+    const circle = { connect: { x: 0.5 }, path: [...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0] };
+    const squareLine = { connect: { x: -1.3 }, path: [1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0] };
+    const square = { path: [...squareLine.path, 2, -1.4, -0.49, 2, 1, -0.49, 1, -1.4, 0.49, 2, 1, 0.49] };
+    const diamondLine = draw.DataHelper.clone(squareLine);
+    const diamond = draw.DataHelper.clone(square);
+    rotate(diamondLine.path, 45);
+    rotate(diamond.path, 45);
+    const mark = { offset: half, path: [1, 0, -2, 2, 0, 2] };
+    const arrows = {
+        angle,
+        'angle-side': angleSide,
+        arrow,
+        triangle,
+        'triangle-flip': triangleFlip,
+        circle,
+        'circle-line': circleLine,
+        square,
+        'square-line': squareLine,
+        diamond,
+        'diamond-line': diamondLine,
+        mark,
+    };
+    function getArrowPath(ui, arrow, from, to, scale, connectOffset) {
+        const { strokeCap, strokeJoin } = ui.__;
+        const { offset, connect, path } = (typeof arrow === 'object' ? arrow : arrows[arrow]);
+        let connectX = connect ? connect.x : 0;
+        let offsetX = offset ? offset.x : 0;
+        const data = [...path];
+        if (strokeCap !== 'none')
+            connectX -= 0.5;
+        if (offset) {
+            if (strokeJoin === 'round' && offset.roundJoin)
+                offsetX += offset.roundJoin;
+            else if (strokeJoin === 'bevel' && offset.bevelJoin)
+                offsetX += offset.bevelJoin;
+        }
+        if (offsetX)
+            layout(data, offsetX, 0);
+        layout(data, to.x, to.y, scale, scale, getAngle(from, to));
+        connectOffset.x = (connectX + offsetX) * scale;
+        return data;
+    }
+
+    const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = draw.PathCommandMap;
+    const { copy, copyFrom, getDistancePoint, } = draw.PointHelper;
+    const connectPoint = {};
+    const first = {}, second = {};
+    const last = {}, now = {};
+    const PathArrowModule = {
+        list: arrows,
+        addArrows(ui, changeRenderPath) {
+            const { startArrow, endArrow, strokeWidth, __pathForRender: data } = ui.__;
+            let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== 'none';
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        if (count < 2 || i + 6 >= len) {
+                            copyFrom(now, data[i + 1], data[i + 2]);
+                            if (!count && useStartArrow)
+                                copy(first, now);
+                        }
+                        i += 3;
+                        break;
+                    case C:
+                        if (count === 1 || i + 7 === len)
+                            copyPoints(data, last, now, i + 3);
+                        i += 7;
+                        break;
+                    case Q:
+                        if (count === 1 || i + 5 === len)
+                            copyPoints(data, last, now, i + 1);
+                        i += 5;
+                        break;
+                    case Z:
+                        return;
+                    case N:
+                        i += 5;
+                        break;
+                    case D:
+                        i += 9;
+                        break;
+                    case X:
+                        i += 6;
+                        break;
+                    case G:
+                        i += 9;
+                        break;
+                    case F:
+                        i += 5;
+                        break;
+                    case O:
+                        i += 7;
+                        break;
+                    case P:
+                        i += 4;
+                        break;
+                    case U:
+                        if (count === 1 || i + 6 === len)
+                            copyPoints(data, last, now, i + 1);
+                        i += 6;
+                        break;
+                }
+                count++;
+                if (count === 1 && command !== M)
+                    return;
+                if (count === 2 && useStartArrow)
+                    copy(second, command === L ? now : last);
+                if (i === len) {
+                    const p = ui.__.__pathForRender = changeRenderPath ? [...data] : data;
+                    if (useStartArrow) {
+                        p.push(...getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint));
+                        if (connectPoint.x) {
+                            getDistancePoint(first, second, -connectPoint.x, true);
+                            p[1] = second.x;
+                            p[2] = second.y;
+                        }
+                    }
+                    if (endArrow && endArrow !== 'none') {
+                        p.push(...getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint));
+                        if (connectPoint.x) {
+                            getDistancePoint(now, last, -connectPoint.x, true);
+                            let index;
+                            switch (command) {
+                                case L:
+                                    index = i - 3 + 1;
+                                    break;
+                                case C:
+                                    index = i - 7 + 5;
+                                    break;
+                                case Q:
+                                    index = i - 5 + 3;
+                                    break;
+                                case U:
+                                    index = i - 6 + 3;
+                                    break;
+                            }
+                            if (index)
+                                setPoint(p, last, index);
+                        }
+                    }
+                }
+                else {
+                    copy(last, now);
+                }
+            }
+        }
+    };
+    function copyPoints(data, from, to, startIndex) {
+        copyFrom(from, data[startIndex], data[startIndex + 1]);
+        copyFrom(to, data[startIndex + 2], data[startIndex + 3]);
+    }
+    function setPoint(data, point, startIndex) {
+        data[startIndex] = point.x;
+        data[startIndex + 1] = point.y;
+    }
+
+    function arrowType(defaultValue) {
+        return draw.decorateLeafAttr(defaultValue, (key) => draw.attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                    draw.doStrokeType(this);
+                }
+            }
+        }));
+    }
+
+    const ui = draw.UI.prototype;
+    arrowType('none')(ui, 'startArrow');
+    arrowType('none')(ui, 'endArrow');
+    Object.assign(draw.PathArrow, PathArrowModule);
+
+    exports.ArrowData = ArrowData;
+    exports.PathArrowModule = PathArrowModule;
+    exports.PathMatrixHelper = PathMatrixHelper;
+    exports.arrowType = arrowType;
+
+    return exports;
+
+})({}, LeaferUI);
diff --git a/libs/link.js b/libs/link.js
new file mode 100644
index 0000000..f498657
--- /dev/null
+++ b/libs/link.js
@@ -0,0 +1,512 @@
+this.LeaferX = this.LeaferX || {};
+this.LeaferX.connector = (function (exports, core, arrow) {
+    'use strict';
+
+    const QnConnectorProxy = (target, property, newValue, receiver) => {
+        const before = target[property];
+        if (property in watcher && newValue !== before) {
+            const params = { val: newValue, before, target, receiver };
+            const after = watcher[property].call(target, params);
+            target[property] = after;
+            target._draw();
+        }
+        else {
+            target[property] = newValue;
+        }
+        return true;
+    };
+    const watcher = {
+        'padding': ({ val }) => val,
+        'margin': ({ val }) => val,
+        'addPoint': ({ val }) => val,
+        'type': ({ val }) => val,
+    };
+
+    function calcAngle(A, B, C) {
+        let BA = { x: B.x - A.x, y: B.y - A.y };
+        let BC = { x: B.x - C.x, y: B.y - C.y };
+        let dotProduct = BA.x * BC.x + BA.y * BC.y;
+        let magnitudeBA = Math.sqrt(BA.x * BA.x + BA.y * BA.y);
+        let magnitudeBC = Math.sqrt(BC.x * BC.x + BC.y * BC.y);
+        let angle = Math.acos(dotProduct / (magnitudeBA * magnitudeBC)) * (180 / Math.PI);
+        let crossProduct = BA.x * BC.y - BA.y * BC.x;
+        if (crossProduct < 0) {
+            angle = 360 - angle;
+        }
+        return angle;
+    }
+    function calcDistance(a, b) {
+        const x1 = a.x;
+        const y1 = a.y;
+        const x2 = b.x;
+        const y2 = b.y;
+        const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+        return distance;
+    }
+    function loadValue(...args) {
+        return args.find(arg => arg !== undefined);
+    }
+
+    class ExRect {
+        constructor(target, opt, tOpt) {
+            this.getConnectionPoints = () => {
+                let a = [];
+                let bounds = this.getBounds(this.padding + this.margin);
+                a.push(bounds.t, bounds.b, bounds.l, bounds.r);
+                return a;
+            };
+            this.getValidPoints = (bound) => {
+                this.setValidSide(bound);
+                let a = [];
+                let bounds = this.getBounds(this.margin);
+                let bounds2 = this.getBounds(this.padding + this.margin);
+                if (this.side != undefined) {
+                    a.push({
+                        'linkPoint': bounds[this.side],
+                        'padding': bounds2[this.side],
+                        'side': this.side,
+                        'anglePoint': bounds[this.side]
+                    });
+                    return a;
+                }
+                for (const s of this.validSide) {
+                    let anglePoint = bounds[s];
+                    switch (s) {
+                        case 't':
+                            anglePoint.y = bounds[s].y + 1;
+                            break;
+                        case 'b':
+                            anglePoint.y = bounds[s].y - 1;
+                            break;
+                        case 'l':
+                            anglePoint.x = bounds[s].x + 1;
+                            break;
+                        case 'r':
+                            anglePoint.x = bounds[s].x - 1;
+                            break;
+                    }
+                    a.push({
+                        'linkPoint': bounds[s],
+                        'padding': bounds2[s],
+                        'side': s,
+                        'anglePoint': anglePoint
+                    });
+                }
+                return a;
+            };
+            this.getBounds = (spread) => {
+                const bounds = this.target.getLayoutBounds(this.boundType, 'local');
+                const { width, height, x, y } = bounds;
+                let percent = this.percent || 0.5;
+                spread = spread || 0;
+                bounds.x = x - spread;
+                bounds.y = y - spread;
+                bounds.width = width + spread * 2;
+                bounds.height = height + spread * 2;
+                let t = {
+                    x: x + percent * width,
+                    y: y - spread,
+                };
+                let b = {
+                    x: x + (1 - percent) * width,
+                    y: y + height + spread,
+                };
+                let l = {
+                    x: x - spread,
+                    y: y + (1 - percent) * height,
+                };
+                let r = {
+                    x: x + width + spread,
+                    y: y + percent * height,
+                };
+                return { t, b, l, r, bounds };
+            };
+            this.padding = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.padding, opt === null || opt === void 0 ? void 0 : opt.padding, 8);
+            this.margin = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.margin, opt === null || opt === void 0 ? void 0 : opt.margin, 0);
+            this.side = tOpt === null || tOpt === void 0 ? void 0 : tOpt.side;
+            this._autoSide = 'b';
+            this.boundType = (opt === null || opt === void 0 ? void 0 : opt.boundType) || 'stroke';
+            this.arrowType = (tOpt === null || tOpt === void 0 ? void 0 : tOpt.arrow) || 'none';
+            this.target = target;
+            this.percent = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.percent, 0.5);
+        }
+        checkInSide(p, bound) {
+            let x1 = bound.x;
+            let x2 = bound.x + bound.width;
+            let y1 = bound.y;
+            let y2 = bound.y + bound.height;
+            let isX = p.x >= x1 && p.x <= x2;
+            let isY = p.y >= y1 && p.y <= y2;
+            return !(isX && isY);
+        }
+        setValidSide(bound) {
+            let myBound = this.getBounds(this.padding + this.margin);
+            let obj = [];
+            this.checkInSide(myBound.t, bound) && obj.push('t');
+            this.checkInSide(myBound.b, bound) && obj.push('b');
+            this.checkInSide(myBound.l, bound) && obj.push('l');
+            this.checkInSide(myBound.r, bound) && obj.push('r');
+            this.validSide = obj;
+        }
+    }
+
+    class ExStandard {
+        constructor(target, opt, tOpt) {
+            this.getConnectionPoints = () => {
+                let a = [];
+                let bounds = this.getBounds(this.padding + this.margin);
+                a.push(bounds.t, bounds.b, bounds.l, bounds.r);
+                return a;
+            };
+            this.getValidPoints = (bound) => {
+                this.setValidSide(bound);
+                let a = [];
+                let bounds = this.getBounds(this.margin);
+                let bounds2 = this.getBounds(this.padding + this.margin);
+                if (this.side != undefined) {
+                    a.push({
+                        'linkPoint': bounds[this.side],
+                        'padding': bounds2[this.side],
+                        'side': this.side,
+                        'anglePoint': bounds[this.side]
+                    });
+                    return a;
+                }
+                for (const s of this.validSide) {
+                    let anglePoint = bounds[s];
+                    switch (s) {
+                        case 't':
+                            anglePoint.y = bounds[s].y + 1;
+                            break;
+                        case 'b':
+                            anglePoint.y = bounds[s].y - 1;
+                            break;
+                        case 'l':
+                            anglePoint.x = bounds[s].x + 1;
+                            break;
+                        case 'r':
+                            anglePoint.x = bounds[s].x - 1;
+                            break;
+                    }
+                    a.push({
+                        'linkPoint': bounds[s],
+                        'padding': bounds2[s],
+                        'side': s,
+                        'anglePoint': anglePoint
+                    });
+                }
+                return a;
+            };
+            this.getBounds = (spread) => {
+                const bounds = this.target.getLayoutBounds(this.boundType, 'local');
+                const { width, height, x, y } = bounds;
+                let percent = this.percent || 0.5;
+                spread = spread || 0;
+                bounds.x = x - spread;
+                bounds.y = y - spread;
+                bounds.width = width + spread * 2;
+                bounds.height = height + spread * 2;
+                let t = {
+                    x: x + percent * width,
+                    y: y - spread,
+                };
+                let b = {
+                    x: x + (1 - percent) * width,
+                    y: y + height + spread,
+                };
+                let l = {
+                    x: x - spread,
+                    y: y + (1 - percent) * height,
+                };
+                let r = {
+                    x: x + width + spread,
+                    y: y + percent * height,
+                };
+                return { t, b, l, r, bounds };
+            };
+            this.padding = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.padding, opt === null || opt === void 0 ? void 0 : opt.padding, 8);
+            this.margin = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.margin, opt === null || opt === void 0 ? void 0 : opt.margin, 0);
+            this.side = tOpt === null || tOpt === void 0 ? void 0 : tOpt.side;
+            this._autoSide = 'b';
+            this.boundType = (opt === null || opt === void 0 ? void 0 : opt.boundType) || 'stroke';
+            this.arrowType = (tOpt === null || tOpt === void 0 ? void 0 : tOpt.arrow) || 'none';
+            this.target = target;
+            this.percent = loadValue(tOpt === null || tOpt === void 0 ? void 0 : tOpt.percent, 0.5);
+        }
+        checkInSide(p, bound) {
+            let x1 = bound.x;
+            let x2 = bound.x + bound.width;
+            let y1 = bound.y;
+            let y2 = bound.y + bound.height;
+            let isX = p.x >= x1 && p.x <= x2;
+            let isY = p.y >= y1 && p.y <= y2;
+            return !(isX && isY);
+        }
+        setValidSide(bound) {
+            let myBound = this.getBounds(this.padding + this.margin);
+            let obj = [];
+            this.checkInSide(myBound.t, bound) && obj.push('t');
+            this.checkInSide(myBound.b, bound) && obj.push('b');
+            this.checkInSide(myBound.l, bound) && obj.push('l');
+            this.checkInSide(myBound.r, bound) && obj.push('r');
+            this.validSide = obj;
+        }
+    }
+
+    class TargetObj {
+        constructor(target, opt, tOpt) {
+            this.target = target;
+            var instance;
+            switch (target.tag) {
+                case 'Rect':
+                    instance = new ExRect(target, opt, tOpt);
+                    break;
+                case 'Ellipse':
+                    instance = new ExStandard(target, opt, tOpt);
+                default:
+                    instance = new ExStandard(target, opt, tOpt);
+                    break;
+            }
+            this.padding = instance.padding || 8;
+            this.margin = instance.margin || 0;
+            this.boundType = instance.boundType;
+            this.arrowType = instance.arrowType;
+            this.connPoints = instance.getConnectionPoints();
+            this.getBounds = instance.getBounds;
+            this.updateConnPoints = () => {
+                this.connPoints = instance.getConnectionPoints();
+                return this.connPoints;
+            };
+            this.updateValidPoints = (targetObj) => {
+                var bound = targetObj.target.getLayoutBounds(targetObj.boundType, 'local');
+                var space = this.padding + this.margin;
+                var spreadBound = new core.Bounds(bound).spread(space);
+                this.validPoints = instance.getValidPoints({
+                    width: spreadBound.width,
+                    height: spreadBound.height,
+                    x: spreadBound.x,
+                    y: spreadBound.y,
+                    rotation: bound.rotation,
+                    scaleX: bound.scaleX,
+                    scaleY: bound.scaleY,
+                    skewX: bound.skewX,
+                    skewY: bound.skewY
+                });
+                return this.validPoints;
+            };
+        }
+    }
+
+    class LeaferXQnConnector extends arrow.Arrow {
+        constructor(target1, target2, opt) {
+            super();
+            this.path = "";
+            this.setDirection = (r1, r2) => {
+                const center1 = {
+                    x: r1.x + r1.width / 2,
+                    y: r1.y + r1.height / 2
+                };
+                const center2 = {
+                    x: r2.x + r2.width / 2,
+                    y: r2.y + r2.height / 2
+                };
+                const dx = center2.x - center1.x;
+                const dy = center2.y - center1.y;
+                var vertical = '';
+                var horizontal = '';
+                if (dy > 0) {
+                    vertical = 'b';
+                }
+                else if (dy < 0) {
+                    vertical = 't';
+                }
+                if (dx > 0) {
+                    horizontal = 'r';
+                }
+                else if (dx < 0) {
+                    horizontal = 'l';
+                }
+                return (vertical + horizontal);
+            };
+            this.obj1 = new TargetObj(target1, opt, opt === null || opt === void 0 ? void 0 : opt.opt1);
+            this.obj2 = new TargetObj(target2, opt, opt === null || opt === void 0 ? void 0 : opt.opt2);
+            this.opt = opt;
+            this.type = (opt === null || opt === void 0 ? void 0 : opt.type) || 'default';
+            this.strokeWidth = 3;
+            this.stroke = 'rgb(50,89,34)';
+            this.direction = this.setDirection(target1, target2);
+            const that = this;
+            target1.on(core.MoveEvent.DRAG, function (e) {
+                if (e.type === core.MoveEvent.DRAG) {
+                    that._draw();
+                }
+            });
+            target2.on(core.MoveEvent.DRAG, function (e) {
+                if (e.type === core.MoveEvent.DRAG) {
+                    that._draw();
+                }
+            });
+            this._draw();
+            this._draw();
+            return new Proxy(this, {
+                set: (target, property, newValue, receiver) => QnConnectorProxy(target, property, newValue, receiver)
+            });
+        }
+        drawPath(s, e) {
+            var _a, _b, _c, _d;
+            let s1 = `M ${s.linkPoint.x} ${s.linkPoint.y}`;
+            let s2 = ` L ${s.padding.x} ${s.padding.y}`;
+            if (((_a = s.pathPoint) === null || _a === void 0 ? void 0 : _a.x) && ((_b = s.pathPoint) === null || _b === void 0 ? void 0 : _b.y)) {
+                s2 += ` L ${s.pathPoint.x} ${s.pathPoint.y}`;
+            }
+            let e2 = '';
+            if (((_c = e.pathPoint) === null || _c === void 0 ? void 0 : _c.x) && ((_d = e.pathPoint) === null || _d === void 0 ? void 0 : _d.y)) {
+                e2 = ` L ${e.pathPoint.x} ${e.pathPoint.y}`;
+            }
+            e2 += ` L ${e.padding.x} ${e.padding.y}`;
+            let e1 = ` L ${e.linkPoint.x} ${e.linkPoint.y}`;
+            return `${s1}${s2}${e2}${e1}`;
+        }
+        checkInSide(p, bound) {
+            let x1 = bound.x;
+            let x2 = bound.x + bound.width;
+            let y1 = bound.y;
+            let y2 = bound.y + bound.height;
+            let isX = p.x >= x1 && p.x <= x2;
+            let isY = p.y >= y1 && p.y <= y2;
+            return !(isX && isY);
+        }
+        setValidSide() {
+            let bound1 = this.obj1.getBounds(this.obj1.padding + this.obj1.margin);
+            let bound2 = this.obj2.getBounds(this.obj2.padding + this.obj2.margin);
+            let obj1 = [];
+            let obj2 = [];
+            this.checkInSide(bound1.t, bound2.bounds) && obj1.push('t');
+            this.checkInSide(bound1.b, bound2.bounds) && obj1.push('b');
+            this.checkInSide(bound1.l, bound2.bounds) && obj1.push('l');
+            this.checkInSide(bound1.r, bound2.bounds) && obj1.push('r');
+            this.checkInSide(bound2.t, bound1.bounds) && obj2.push('t');
+            this.checkInSide(bound2.b, bound1.bounds) && obj2.push('b');
+            this.checkInSide(bound2.l, bound1.bounds) && obj2.push('l');
+            this.checkInSide(bound2.r, bound1.bounds) && obj2.push('r');
+            this.validSide = {
+                obj1,
+                obj2,
+            };
+        }
+        _draw() {
+            var _a;
+            this.renderCount = 0;
+            this.setValidSide();
+            var pdPoints1 = this.obj1.updateValidPoints(this.obj2);
+            var pdPoints2 = this.obj2.updateValidPoints(this.obj1);
+            if (pdPoints1.length == 0 || pdPoints2.length == 0) {
+                this.path = 'M 0 0 Z';
+                return;
+            }
+            var distance = 0;
+            var point1, point2;
+            for (const p1 of pdPoints1) {
+                for (const p2 of pdPoints2) {
+                    let d2 = calcDistance(p1.padding, p2.padding);
+                    if (distance == 0 || distance > d2) {
+                        distance = d2;
+                        point1 = p1;
+                        point2 = p2;
+                    }
+                }
+            }
+            point1.angle = calcAngle(point1.anglePoint, point1.padding, point2.padding);
+            point2.angle = calcAngle(point2.anglePoint, point2.padding, point1.padding);
+            const getLen = (a, b) => {
+                if (a > b) {
+                    return a - b;
+                }
+                else {
+                    return b - a;
+                }
+            };
+            let validAngle1 = point1.angle < 90 || point1.angle > 270;
+            let validAngle2 = point2.angle < 90 || point2.angle > 270;
+            if (validAngle1 || validAngle2) {
+                let horizontal = getLen(point1.padding.x, point2.padding.x);
+                let vertical = getLen(point1.padding.y, point2.padding.y);
+                if (horizontal < vertical) {
+                    if (point1.side == point2.side) {
+                        if (validAngle1) {
+                            point2.pathPoint = {
+                                y: point2.padding.y,
+                                x: point2.padding.x + (point2.padding.x > point1.padding.x ? -horizontal : horizontal),
+                            };
+                        }
+                        else {
+                            point1.pathPoint = {
+                                y: point1.padding.y,
+                                x: point1.padding.x + (point1.padding.x > point2.padding.x ? -horizontal : horizontal),
+                            };
+                        }
+                    }
+                    else {
+                        if (['b', 't'].indexOf(point1.side) > -1) {
+                            point1.pathPoint = {
+                                y: point1.padding.y,
+                                x: point1.padding.x + (point1.padding.x > point2.padding.x ? -horizontal : horizontal),
+                            };
+                        }
+                        else {
+                            point2.pathPoint = {
+                                y: point2.padding.y,
+                                x: point2.padding.x + (point2.padding.x > point1.padding.x ? -horizontal : horizontal),
+                            };
+                        }
+                    }
+                }
+                else {
+                    if (point1.side == point2.side) {
+                        if (validAngle1) {
+                            point2.pathPoint = {
+                                x: point2.padding.x,
+                                y: point2.padding.y + (point2.padding.y > point1.padding.y ? -vertical : vertical),
+                            };
+                        }
+                        else {
+                            point1.pathPoint = {
+                                x: point1.padding.x,
+                                y: point1.padding.y + (point1.padding.y > point2.padding.y ? -vertical : vertical),
+                            };
+                        }
+                    }
+                    else {
+                        if (['r', 'l'].indexOf(point1.side) > -1) {
+                            point1.pathPoint = {
+                                x: point1.padding.x,
+                                y: point1.padding.y + (point1.padding.y > point2.padding.y ? -vertical : vertical),
+                            };
+                        }
+                        else {
+                            point2.pathPoint = {
+                                x: point2.padding.x,
+                                y: point2.padding.y + (point2.padding.y > point1.padding.y ? -vertical : vertical),
+                            };
+                        }
+                    }
+                }
+            }
+            this.path = this.drawPath(point1, point2);
+            if (typeof ((_a = this.opt) === null || _a === void 0 ? void 0 : _a.onDraw) == 'function') {
+                this.path = this.opt.onDraw({
+                    s: point1,
+                    e: point2,
+                    path: this.path
+                });
+            }
+            this.startArrow = this.obj1.arrowType;
+            this.endArrow = this.obj2.arrowType;
+        }
+    }
+
+    exports.LeaferXQnConnector = LeaferXQnConnector;
+
+    return exports;
+
+})({}, LeaferUI, LeaferIN.arrow);
diff --git a/link.html b/link.html
new file mode 100644
index 0000000..67fb6d4
--- /dev/null
+++ b/link.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Demo | Leafer UI</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <script src="./libs/web.js"></script>
+    <script src="./libs/arrow.js"></script>
+    <script src="./libs/link.js"></script>
+  </head>
+  <body onload="init()">
+    <script>
+      function init() {
+        var leafer = new LeaferUI.Leafer({ view: window })
+
+        const from = new LeaferUI.Box({
+          x: 100,
+          y: 100,
+          width: 100,
+          height: 80,
+          fill: '#FF4B4B',
+          cornerRadius: 20,
+          children: [
+            {
+              tag: 'Text',
+              text: 'From',
+              fill: 'black',
+              padding: [30, 40],
+            },
+          ],
+          draggable: true,
+        })
+
+        leafer.add(from)
+
+        const to = new LeaferUI.Box({
+          x: 500,
+          y: 500,
+          width: 100,
+          height: 80,
+          fill: '#FF4B4B',
+          cornerRadius: 20,
+          children: [
+            {
+              tag: 'Text',
+              text: 'To',
+              fill: 'black',
+              padding: [30, 40],
+            },
+          ],
+          draggable: true,
+        })
+
+        leafer.add(to)
+
+       
+        const link = new LeaferX.connector.LeaferXQnConnector(from, to)
+        leafer.add(link);
+      }
+    </script>
+  </body>
+</html>