@worktile/gantt 12.2.0-next.1 → 12.2.0

package/fesm2015/worktile-gantt.js

@@ -212,11 +212,11 @@ var GanttLinkType;
     GanttLinkType[GanttLinkType["ss"] = 3] = "ss";
     GanttLinkType[GanttLinkType["sf"] = 4] = "sf";
 })(GanttLinkType || (GanttLinkType = {}));
-var GanttLinkPathType;
-(function (GanttLinkPathType) {
-    GanttLinkPathType["curve"] = "curve";
-    GanttLinkPathType["line"] = "line";
-})(GanttLinkPathType || (GanttLinkPathType = {}));
+var GanttLinkLineType;
+(function (GanttLinkLineType) {
+    GanttLinkLineType["curve"] = "curve";
+    GanttLinkLineType["straight"] = "straight";
+})(GanttLinkLineType || (GanttLinkLineType = {}));
 var LinkColors;
 (function (LinkColors) {
     LinkColors["default"] = "#cacaca";
@@ -303,8 +303,9 @@ class GanttItemInternal {
         this.expanded = expanded;
         this.origin.expanded = expanded;
     }
-    addLink(linkId) {
-        this.links = [...this.links, { type: GanttLinkType.fs, link: linkId }];
+    addLink(link) {
+        console.log(link);
+        this.links = [...this.links, link];
         this.origin.links = this.links;
     }
 }
@@ -338,7 +339,7 @@ const defaultConfig = {
     linkOptions: {
         dependencyTypes: [GanttLinkType.fs],
         showArrow: false,
-        linkPathType: GanttLinkPathType.curve
+        lineType: GanttLinkLineType.curve
     }
 };
 const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
@@ -812,6 +813,12 @@ class GanttUpper {
         this._multiple = false;
         this.ganttClass = true;
     }
+    set linkOptions(options) {
+        this._linkOptions = options;
+    }
+    get linkOptions() {
+        return Object.assign({}, defaultConfig.linkOptions, this.config.linkOptions, this._linkOptions);
+    }
     set selectable(value) {
         var _a;
         this._selectable = coerceBooleanProperty(value);
@@ -1033,7 +1040,7 @@ class GanttUpper {
     }
 }
 GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive });
-GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0 });
+GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
@@ -1059,6 +1066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 type: Input
             }], viewOptions: [{
                 type: Input
+            }], linkOptions: [{
+                type: Input
             }], disabledLoadOnScroll: [{
                 type: Input
             }], selectable: [{
@@ -1567,63 +1576,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+function getDependencyType(path, dependencyTypes) {
+    if (dependencyTypes.includes(GanttLinkType.ss) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.start) {
+        return GanttLinkType.ss;
+    }
+    if (dependencyTypes.includes(GanttLinkType.ff) && path.from.pos === InBarPosition.finish && path.to.pos === InBarPosition.finish) {
+        return GanttLinkType.ff;
+    }
+    if (dependencyTypes.includes(GanttLinkType.sf) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.finish) {
+        return GanttLinkType.sf;
+    }
+    return GanttLinkType.fs;
+}
+var InBarPosition;
+(function (InBarPosition) {
+    InBarPosition["start"] = "start";
+    InBarPosition["finish"] = "finish";
+})(InBarPosition || (InBarPosition = {}));
 class GanttDragContainer {
-    constructor() {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
         this.dragStarted = new EventEmitter();
         this.dragMoved = new EventEmitter();
         this.dragEnded = new EventEmitter();
         this.linkDragStarted = new EventEmitter();
         this.linkDragEntered = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
+        this.linkDragPath = { from: null, to: null };
     }
-    emitLinkDragStarted(from, item) {
-        this.linkDraggingId = item.id;
-        this.linkDragFrom = from;
-        this.linkDragSource = this.linkDragFrom === 'source' ? item : null;
-        this.linkDragTarget = this.linkDragFrom === 'target' ? item : null;
+    emitLinkDragStarted(from) {
+        this.linkDraggingId = from.item.id;
+        this.linkDragPath.from = from;
         this.linkDragStarted.emit({
-            source: this.linkDragSource && this.linkDragSource.origin,
-            target: this.linkDragTarget && this.linkDragTarget.origin
+            source: from.item.origin,
+            target: null
         });
     }
-    emitLinkDragEntered(item) {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = item;
-        }
-        else {
-            this.linkDragSource = item;
-        }
+    emitLinkDragEntered(to) {
+        this.linkDragPath.to = to;
         this.linkDragEntered.emit({
-            source: this.linkDragSource.origin,
-            target: this.linkDragTarget.origin
+            source: this.linkDragPath.from.item.origin,
+            target: to.item.origin
         });
     }
     emitLinkDragLeaved() {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = null;
-        }
-        else {
-            this.linkDragSource = null;
-        }
+        this.linkDragPath.to = null;
     }
-    emitLinkDragEnded() {
+    emitLinkDragEnded(to) {
+        var _a;
+        this.linkDragPath.to = to;
+        const dependencyType = getDependencyType(this.linkDragPath, (_a = this.ganttUpper.linkOptions) === null || _a === void 0 ? void 0 : _a.dependencyTypes);
+        this.linkDragPath.from.item.addLink({
+            link: this.linkDragPath.to.item.id,
+            type: dependencyType
+        });
+        this.linkDragEnded.emit({
+            source: this.linkDragPath.from.item.origin,
+            target: this.linkDragPath.to.item.origin,
+            type: dependencyType
+        });
         this.linkDraggingId = null;
-        if (this.linkDragSource && this.linkDragTarget) {
-            this.linkDragSource.addLink(this.linkDragTarget.id);
-            this.linkDragEnded.emit({
-                source: this.linkDragSource.origin,
-                target: this.linkDragTarget.origin
-            });
-        }
-        this.linkDragSource = null;
-        this.linkDragTarget = null;
+        this.linkDragPath = { from: null, to: null };
     }
 }
-GanttDragContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDragContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
 GanttDragContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttDragContainer, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; } });
 
 class GanttPrintService {
     constructor() { }
@@ -1919,7 +1942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 args: ['mainTemplate', { static: true }]
             }] } });
 
-class GanttLinkPath {
+class GanttLinkLine {
     constructor() { }
     generatePath(source, target, type) {
         if (source.before && source.after && target.before && target.after) {
@@ -1941,17 +1964,11 @@ class GanttLinkPath {
         }
     }
 }
-GanttLinkPath.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttLinkPath, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GanttLinkPath.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttLinkPath });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: GanttLinkPath, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
 
-let GanttLinkPathCurve = class GanttLinkPathCurve extends GanttLinkPath {
+let GanttLinkLineCurve = class GanttLinkLineCurve extends GanttLinkLine {
     constructor(ganttUpper) {
         super();
         this.ganttUpper = ganttUpper;
-        this.bezierWeight = -0.5;
     }
     generateSSPath(source, target) {
         const x1 = source.before.x;
@@ -1990,76 +2007,55 @@ let GanttLinkPathCurve = class GanttLinkPathCurve extends GanttLinkPath {
         }
     }
     generateFSAndSFPath(source, target, type) {
+        var _a;
         let x1 = source.after.x;
         let y1 = source.after.y;
         let x4 = target.before.x;
         let y4 = target.before.y;
+        const bezierWeight = 0.5;
         if (type === GanttLinkType.sf) {
             x1 = target.after.x;
             y1 = target.after.y;
             x4 = source.before.x;
             y4 = source.before.y;
         }
-        const dx = Math.abs(x4 - x1) * this.bezierWeight;
-        const x2 = x1 - dx;
-        const x3 = x4 + dx;
+        let dx = Math.abs(x4 - x1) * bezierWeight;
+        let x2 = x1 + dx;
+        let x3 = x4 - dx;
         const centerX = (x1 + x4) / 2;
         const centerY = (y1 + y4) / 2;
         let controlX = this.ganttUpper.styles.lineHeight / 2;
         const controlY = this.ganttUpper.styles.lineHeight / 2;
         if (x1 >= x4) {
-            if (y4 > y1) {
-                if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                    return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
-                    L ${x4} ${y4 - controlY}
-                    C ${x4 - controlY} ${y4 - controlY}  ${x4 - controlX} ${y4} ${x4} ${y4}`;
-                }
-                else {
-                    controlX = this.ganttUpper.styles.lineHeight;
-                    return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
-                    C ${x4 - controlX} ${y4 - controlX} ${x4 - controlX} ${y4} ${x4} ${y4}
+            if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                return `M ${x1} ${y1}
+                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${x1} ${y4 > y1 ? y1 + controlY : y1 - controlY}
+                    L ${x4} ${y4 > y1 ? y4 - controlY : y4 + controlY}
+                    C ${x4 - controlY} ${y4 > y1 ? y4 - controlY : y4 + controlY}  ${x4 - controlX} ${y4} ${x4} ${y4}
                     `;
-                }
             }
             else {
-                if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                    return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
-                    L ${x4} ${y4 + controlY}
-                    C ${x4 - controlY} ${y4 + controlY} ${x4 - controlX} ${y4} ${x4} ${y4}
+                controlX = this.ganttUpper.styles.lineHeight;
+                return `M ${x1} ${y1}
+                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${centerX} ${centerY}
+                    C ${x4 - controlX} ${y4 > y1 ? y4 - controlX : y4 + controlX} ${x4 - controlX} ${y4} ${x4} ${y4}
                     `;
-                }
-                else {
-                    controlX = this.ganttUpper.styles.lineHeight;
-                    return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
-                    C ${x4 - controlX} ${y4 + controlX} ${x4 - controlX} ${y4} ${x4} ${y4}
-                    `;
-                }
             }
         }
-        else if (x4 - x1 < 100) {
-            const radius = Math.abs(y4 - y1) / 4;
-            let lindWidth = x4 - x1 - radius;
-            lindWidth = Math.max(lindWidth, radius);
-            return `M ${x1} ${y1}
-                    L ${x1 + lindWidth} ${y1}
-                    A ${radius} ${radius} 0 1 ${y4 > y1 ? 1 : 0} ${x1 + lindWidth} ${y4 > y1 ? y1 + 2 * radius : y1 - 2 * radius}
-                    L ${x4 - lindWidth} ${y4 > y1 ? y1 + 2 * radius : y1 - 2 * radius}
-                    A ${radius} ${radius} 0 1 ${y4 > y1 ? 0 : 1} ${x4 - lindWidth} ${y4}
-                    L ${x4} ${y4}
-                    `;
+        else if (((_a = this.ganttUpper.linkOptions) === null || _a === void 0 ? void 0 : _a.showArrow) && x4 - x1 < 200) {
+            dx = Math.max(Math.abs(y4 - y1) * bezierWeight, 60);
+            x2 = x1 + dx;
+            x3 = x4 - dx;
+            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
         }
         return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
     }
 };
-GanttLinkPathCurve = __decorate([
+GanttLinkLineCurve = __decorate([
     __param(0, Inject(GANTT_UPPER_TOKEN))
-], GanttLinkPathCurve);
+], GanttLinkLineCurve);
 
-class GanttLinkPathLine extends GanttLinkPath {
+class GanttLinkLineStraight extends GanttLinkLine {
     constructor() {
         super();
         this.pathControl = 20;
@@ -2070,7 +2066,6 @@ class GanttLinkPathLine extends GanttLinkPath {
         const x4 = target.before.x;
         const y4 = target.before.y;
         const control = this.pathControl;
-        const centerY = (y1 + y4) / 2;
         return `M ${x1} ${y1}
                         L ${x4 > x1 ? x1 - control : x4 - control} ${y1}
                         L ${x4 > x1 ? x1 - control : x4 - control} ${y4}
@@ -2116,12 +2111,12 @@ class GanttLinkPathLine extends GanttLinkPath {
     }
 }
 
-function generatePathFactory(type, ganttUpper) {
+function createLineGenerator(type, ganttUpper) {
     switch (type) {
-        case GanttLinkPathType.curve:
-            return new GanttLinkPathCurve(ganttUpper);
-        case GanttLinkPathType.line:
-            return new GanttLinkPathLine();
+        case GanttLinkLineType.curve:
+            return new GanttLinkLineCurve(ganttUpper);
+        case GanttLinkLineType.straight:
+            return new GanttLinkLineStraight();
         default:
             throw new Error('gantt link path type invalid');
     }
@@ -2145,7 +2140,7 @@ class GanttLinksComponent {
         this.ganttLinksOverlay = true;
     }
     ngOnInit() {
-        this.linkPath = generatePathFactory(this.ganttUpper.linkOptions.linkPathType, this.ganttUpper);
+        this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);
         this.showArrow = this.ganttUpper.linkOptions.showArrow;
         this.buildLinks();
         this.firstChange = false;
@@ -2217,7 +2212,7 @@ class GanttLinksComponent {
                             color = LinkColors.blocked;
                         }
                         this.links.push({
-                            path: this.linkPath.generatePath(source, target, link.type),
+                            path: this.linkLine.generatePath(source, target, link.type),
                             source: source.origin,
                             target: target.origin,
                             type: link.type,
@@ -2358,7 +2353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
 
 const dragMinWidth = 10;
 const activeClass = 'gantt-bar-active';
-const linkDropClass = 'gantt-bar-link-drop';
+const dropActiveClass = 'gantt-bar-drop-active';
+const singleDropActiveClass = 'gantt-bar-single-drop-active';
 function createSvgElement(qualifiedName, className) {
     const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
     element.classList.add(className);
@@ -2379,13 +2375,21 @@ class GanttBarDrag {
         return !this.item.linkable || !this.ganttUpper.linkable;
     }
     createMouseEvents() {
+        var _a, _b, _c;
+        const dropClass = ((_b = (_a = this.ganttUpper.config.linkOptions) === null || _a === void 0 ? void 0 : _a.dependencyTypes) === null || _b === void 0 ? void 0 : _b.length) === 1 &&
+            ((_c = this.ganttUpper.config.linkOptions) === null || _c === void 0 ? void 0 : _c.dependencyTypes[0]) === GanttLinkType.fs
+            ? singleDropActiveClass
+            : dropActiveClass;
         fromEvent(this.barElement, 'mouseenter')
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+            .subscribe((event) => {
             if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
                 if (this.item.linkable) {
-                    this.barElement.classList.add(linkDropClass);
-                    this.dragContainer.emitLinkDragEntered(this.item);
+                    this.barElement.classList.add(dropClass);
+                    this.dragContainer.emitLinkDragEntered({
+                        item: this.item,
+                        element: this.barElement
+                    });
                 }
             }
             else {
@@ -2394,14 +2398,14 @@ class GanttBarDrag {
         });
         fromEvent(this.barElement, 'mouseleave')
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+            .subscribe((event) => {
             if (!this.dragContainer.linkDraggingId) {
                 this.barElement.classList.remove(activeClass);
             }
             else {
                 this.dragContainer.emitLinkDragLeaved();
             }
-            this.barElement.classList.remove(linkDropClass);
+            this.barElement.classList.remove(dropClass);
         });
     }
     createBarDrag() {
@@ -2501,7 +2505,7 @@ class GanttBarDrag {
         const dragRefs = [];
         const handles = this.barElement.querySelectorAll('.link-handles .handle');
         handles.forEach((handle, index) => {
-            const isBefore = index === 0;
+            const isBegin = index === 0;
             const dragRef = this.dragDrop.createDrag(handle);
             dragRef.withBoundaryElement(this.dom.root);
             dragRef.beforeStarted.subscribe(() => {
@@ -2510,24 +2514,35 @@ class GanttBarDrag {
                     this.barDragRef.disabled = true;
                 }
                 this.createLinkDraggingLine();
-                this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', this.item);
+                this.dragContainer.emitLinkDragStarted({
+                    element: this.barElement,
+                    item: this.item,
+                    pos: isBegin ? InBarPosition.start : InBarPosition.finish
+                });
             });
             dragRef.moved.subscribe(() => {
-                const positions = this.calcLinkLinePositions(handle, isBefore);
+                const positions = this.calcLinkLinePositions(handle, isBegin);
                 this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
                 this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
                 this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
                 this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
             });
             dragRef.ended.subscribe((event) => {
-                event.source.reset();
                 handle.style.pointerEvents = '';
                 if (this.barDragRef) {
                     this.barDragRef.disabled = false;
                 }
+                // 计算line拖动的落点位于目标Bar的值，如果值大于Bar宽度的一半，说明是拖动到Begin位置，否则则为拖动到End位置
+                if (this.dragContainer.linkDragPath.to) {
+                    const placePointX = event.source.getRootElement().getBoundingClientRect().x -
+                        this.dragContainer.linkDragPath.to.element.getBoundingClientRect().x;
+                    this.dragContainer.emitLinkDragEnded(Object.assign(Object.assign({}, this.dragContainer.linkDragPath.to), { pos: placePointX < this.dragContainer.linkDragPath.to.item.refs.width / 2
+                            ? InBarPosition.start
+                            : InBarPosition.finish }));
+                }
+                event.source.reset();
                 this.barElement.classList.remove(activeClass);
                 this.destroyLinkDraggingLine();
-                this.dragContainer.emitLinkDragEnded();
             });
             dragRefs.push(dragRef);
         });
@@ -2576,6 +2591,7 @@ class GanttBarDrag {
         if (!this.linkDraggingLine) {
             const svgElement = createSvgElement('svg', 'gantt-link-drag-container');
             const linElement = createSvgElement('line', 'link-dragging-line');
+            linElement.style.pointerEvents = 'none';
             svgElement.appendChild(linElement);
             this.dom.root.appendChild(svgElement);
             this.linkDraggingLine = linElement;
@@ -2762,9 +2778,7 @@ class NgxGanttComponent extends GanttUpper {
         this.sideTableWidth = sideWidth;
     }
     ngOnInit() {
-        var _a;
         super.onInit();
-        this.linkOptions = Object.assign({}, defaultConfig.linkOptions, (_a = this.config) === null || _a === void 0 ? void 0 : _a.linkOptions, this.linkOptions);
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
                 this.linkDragStarted.emit(event);
@@ -2822,12 +2836,12 @@ class NgxGanttComponent extends GanttUpper {
         this.selectionModel.toggle(selectedValue.id);
         const selectedIds = this.selectionModel.selected;
         if (this.multiple) {
-            const selectedValue = this.getGanttItems(selectedIds).map((item) => item.origin);
-            this.selectedChange.emit({ event, selectedValue });
+            const _selectedValue = this.getGanttItems(selectedIds).map((item) => item.origin);
+            this.selectedChange.emit({ event, selectedValue: _selectedValue });
         }
         else {
-            const selectedValue = (_a = this.getGanttItem(selectedIds[0])) === null || _a === void 0 ? void 0 : _a.origin;
-            this.selectedChange.emit({ event, selectedValue });
+            const _selectedValue = (_a = this.getGanttItem(selectedIds[0])) === null || _a === void 0 ? void 0 : _a.origin;
+            this.selectedChange.emit({ event, selectedValue: _selectedValue });
         }
     }
     ngOnDestroy() {
@@ -2835,7 +2849,7 @@ class NgxGanttComponent extends GanttUpper {
     }
 }
 NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", linkOptions: "linkOptions" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
+NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
         {
             provide: GANTT_UPPER_TOKEN,
             useExisting: NgxGanttComponent
@@ -2873,8 +2887,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
                 type: Input
             }], linkable: [{
                 type: Input
-            }], linkOptions: [{
-                type: Input
             }], linkDragStarted: [{
                 type: Output
             }], linkDragEnded: [{
@@ -2969,5 +2981,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLoadOnScrollEvent, GanttPrintService, GanttSelectedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, NgxGanttBarComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultConfig, primaryDatePointTop, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttPrintService, GanttSelectedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultConfig, primaryDatePointTop, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.js.map