@worktile/gantt 12.1.2 → 12.2.0-next.0

package/bundles/worktile-gantt.umd.js

@@ -559,6 +559,20 @@
         GanttViewType["week"] = "week";
     })(exports.GanttViewType || (exports.GanttViewType = {}));
 
+    var GanttLinkType;
+    (function (GanttLinkType) {
+        GanttLinkType[GanttLinkType["fs"] = 0] = "fs";
+        GanttLinkType[GanttLinkType["ss"] = 1] = "ss";
+        GanttLinkType[GanttLinkType["ff"] = 2] = "ff";
+        GanttLinkType[GanttLinkType["sf"] = 3] = "sf";
+    })(GanttLinkType || (GanttLinkType = {}));
+    var LinkColors;
+    (function (LinkColors) {
+        LinkColors["default"] = "#cacaca";
+        LinkColors["blocked"] = "#FF7575";
+        LinkColors["active"] = "#348FE4";
+    })(LinkColors || (LinkColors = {}));
+
     exports.GanttItemType = void 0;
     (function (GanttItemType) {
         GanttItemType["bar"] = "bar";
@@ -571,7 +585,17 @@
             this.refs$ = new rxjs.BehaviorSubject(null);
             this.origin = item;
             this.id = this.origin.id;
-            this.links = this.origin.links || [];
+            this.links = (this.origin.links || []).map(function (link) {
+                if (typeof link === 'string') {
+                    return {
+                        type: GanttLinkType.fs,
+                        link: link
+                    };
+                }
+                else {
+                    return link;
+                }
+            });
             this.color = this.origin.color;
             this.barStyle = this.origin.barStyle;
             this.linkable = this.origin.linkable === undefined ? true : this.origin.linkable;
@@ -635,7 +659,7 @@
             this.origin.expanded = expanded;
         };
         GanttItemInternal.prototype.addLink = function (linkId) {
-            this.links = __spreadArray(__spreadArray([], __read(this.links)), [linkId]);
+            this.links = __spreadArray(__spreadArray([], __read(this.links)), [{ type: GanttLinkType.fs, link: linkId }]);
             this.origin.links = this.links;
         };
         return GanttItemInternal;
@@ -2253,12 +2277,6 @@
                     args: ['mainTemplate', { static: true }]
                 }] } });
 
-    var LinkColors;
-    (function (LinkColors) {
-        LinkColors["default"] = "#cacaca";
-        LinkColors["blocked"] = "#FF7575";
-        LinkColors["active"] = "#348FE4";
-    })(LinkColors || (LinkColors = {}));
     var GanttLinksComponent = /** @class */ (function () {
         function GanttLinksComponent(ganttUpper, cdr, elementRef, ganttDragContainer) {
             this.ganttUpper = ganttUpper;
@@ -2335,12 +2353,45 @@
                 });
             }
         };
-        GanttLinksComponent.prototype.generatePath = function (source, target) {
+        GanttLinksComponent.prototype.generatePath = function (source, target, type) {
             if (source.before && source.after && target.before && target.after) {
                 var x1 = source.after.x;
                 var y1 = source.after.y;
                 var x4 = target.before.x;
                 var y4 = target.before.y;
+                var isMirror = void 0;
+                var control = Math.abs(y4 - y1) / 2;
+                switch (type) {
+                    case GanttLinkType.ss:
+                        x1 = source.before.x;
+                        y1 = source.before.y;
+                        x4 = target.before.x;
+                        y4 = target.before.y;
+                        isMirror = y4 > y1 ? 0 : 1;
+                        if (x4 > x1) {
+                            return "M " + x1 + " " + y1 + "\n                            A " + control + " " + control + " 0 1 " + isMirror + " " + x1 + " " + y4 + "\n                            L " + x1 + " " + y4 + " " + x4 + " " + y4;
+                        }
+                        else {
+                            return "M " + x1 + " " + y1 + "\n                        L " + x1 + " " + y1 + " " + x4 + " " + y1 + "\n                        A " + control + " " + control + " 0 1 " + isMirror + " " + x4 + " " + y4;
+                        }
+                    case GanttLinkType.ff:
+                        x1 = source.after.x;
+                        y1 = source.after.y;
+                        x4 = target.after.x;
+                        y4 = target.after.y;
+                        isMirror = y4 > y1 ? 1 : 0;
+                        if (x4 > x1) {
+                            return "M " + x1 + " " + y1 + "\n                        L " + x1 + " " + y1 + " " + x4 + " " + y1 + "\n                        A " + control + " " + control + " 0 1 " + isMirror + " " + x4 + " " + y4;
+                        }
+                        else {
+                            return "M " + x1 + " " + y1 + "\n                            A " + control + " " + control + " 0 1 " + isMirror + " " + x1 + " " + y4 + "\n                            L " + x1 + " " + y4 + " " + x4 + " " + y4;
+                        }
+                    case GanttLinkType.sf:
+                        x1 = target.after.x;
+                        y1 = target.after.y;
+                        x4 = source.before.x;
+                        y4 = source.before.y;
+                }
                 var dx = Math.abs(x4 - x1) * this.bezierWeight;
                 var x2 = x1 - dx;
                 var x3 = x4 + dx;
@@ -2377,13 +2428,14 @@
             this.links = [];
             this.linkItems.forEach(function (source) {
                 if (source.origin.start || source.origin.end) {
-                    source.links.forEach(function (linkId) {
-                        var target = _this.linkItems.find(function (item) { return item.id === linkId; });
+                    source.links.forEach(function (link) {
+                        var target = _this.linkItems.find(function (item) { return item.id === link.link; });
                         if (target && (target.origin.start || target.origin.end)) {
                             _this.links.push({
-                                path: _this.generatePath(source, target),
+                                path: _this.generatePath(source, target, link.type),
                                 source: source.origin,
                                 target: target.origin,
+                                type: link.type,
                                 color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
                             });
                         }
@@ -2418,7 +2470,7 @@
         return GanttLinksComponent;
     }());
     GanttLinksComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: GanttDragContainer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttLinksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { groups: "groups", items: "items" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    GanttLinksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { groups: "groups", items: "items" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [style]=\"'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <!-- <defs>\n      <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n    </defs> -->\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinksComponent, decorators: [{
                 type: i0.Component,
                 args: [{