@worktile/gantt 12.1.3 → 12.2.0

package/gantt-drag-container.d.ts

@@ -1,9 +1,23 @@
 import { EventEmitter } from '@angular/core';
 import { GanttDragEvent, GanttLinkDragEvent } from './class/event';
 import { GanttItemInternal } from './class/item';
+import { GanttUpper } from './gantt-upper';
 import * as i0 from "@angular/core";
-export declare type LinkDragFrom = 'source' | 'target';
+export declare enum InBarPosition {
+    start = "start",
+    finish = "finish"
+}
+export declare type LinkDragPosition = {
+    element: HTMLElement;
+    item: GanttItemInternal;
+    pos?: InBarPosition;
+};
+export interface LinkDragPath {
+    from?: LinkDragPosition;
+    to?: LinkDragPosition;
+}
 export declare class GanttDragContainer {
+    ganttUpper: GanttUpper;
     dragStarted: EventEmitter<GanttDragEvent<unknown>>;
     dragMoved: EventEmitter<GanttDragEvent<unknown>>;
     dragEnded: EventEmitter<GanttDragEvent<unknown>>;
@@ -11,14 +25,12 @@ export declare class GanttDragContainer {
     linkDragEntered: EventEmitter<GanttLinkDragEvent<unknown>>;
     linkDragEnded: EventEmitter<GanttLinkDragEvent<unknown>>;
     linkDraggingId: string;
-    private linkDragSource;
-    private linkDragTarget;
-    private linkDragFrom;
-    constructor();
-    emitLinkDragStarted(from: LinkDragFrom, item: GanttItemInternal): void;
-    emitLinkDragEntered(item: GanttItemInternal): void;
+    linkDragPath: LinkDragPath;
+    constructor(ganttUpper: GanttUpper);
+    emitLinkDragStarted(from: LinkDragPosition): void;
+    emitLinkDragEntered(to: LinkDragPosition): void;
     emitLinkDragLeaved(): void;
-    emitLinkDragEnded(): void;
+    emitLinkDragEnded(to: LinkDragPosition): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttDragContainer, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GanttDragContainer>;
 }

package/gantt-upper.d.ts

@@ -5,6 +5,7 @@ import { GanttView, GanttViewOptions } from './views/view';
 import { GanttStyles } from './gantt.styles';
 import { GanttDragContainer } from './gantt-drag-container';
 import { GanttGlobalConfig } from './gantt.config';
+import { GanttLinkOptions } from './class/link';
 import { SelectionModel } from '@angular/cdk/collections';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
@@ -12,7 +13,7 @@ export declare abstract class GanttUpper {
     protected elementRef: ElementRef<HTMLElement>;
     protected cdr: ChangeDetectorRef;
     protected ngZone: NgZone;
-    protected config: GanttGlobalConfig;
+    config: GanttGlobalConfig;
     originItems: GanttItem[];
     originGroups: GanttGroup[];
     viewType: GanttViewType;
@@ -22,6 +23,8 @@ export declare abstract class GanttUpper {
     draggable: boolean;
     styles: GanttStyles;
     viewOptions: GanttViewOptions;
+    set linkOptions(options: GanttLinkOptions);
+    get linkOptions(): GanttLinkOptions;
     disabledLoadOnScroll: boolean;
     set selectable(value: BooleanInput);
     get selectable(): boolean;
@@ -52,6 +55,7 @@ export declare abstract class GanttUpper {
     private groupsMap;
     private _selectable;
     private _multiple;
+    private _linkOptions;
     ganttClass: boolean;
     constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone, config: GanttGlobalConfig);
     private createView;
@@ -75,6 +79,6 @@ export declare abstract class GanttUpper {
     getGanttItems(ids: string[]): GanttItemInternal[];
     isSelected(id: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttUpper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GanttUpper, never, never, { "originItems": "items"; "originGroups": "groups"; "viewType": "viewType"; "start": "start"; "end": "end"; "showTodayLine": "showTodayLine"; "draggable": "draggable"; "styles": "styles"; "viewOptions": "viewOptions"; "disabledLoadOnScroll": "disabledLoadOnScroll"; "selectable": "selectable"; "multiple": "multiple"; }, { "loadOnScroll": "loadOnScroll"; "dragStarted": "dragStarted"; "dragMoved": "dragMoved"; "dragEnded": "dragEnded"; "barClick": "barClick"; }, ["barTemplate", "rangeTemplate", "itemTemplate", "groupTemplate", "groupHeaderTemplate"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GanttUpper, never, never, { "originItems": "items"; "originGroups": "groups"; "viewType": "viewType"; "start": "start"; "end": "end"; "showTodayLine": "showTodayLine"; "draggable": "draggable"; "styles": "styles"; "viewOptions": "viewOptions"; "linkOptions": "linkOptions"; "disabledLoadOnScroll": "disabledLoadOnScroll"; "selectable": "selectable"; "multiple": "multiple"; }, { "loadOnScroll": "loadOnScroll"; "dragStarted": "dragStarted"; "dragMoved": "dragMoved"; "dragEnded": "dragEnded"; "barClick": "barClick"; }, ["barTemplate", "rangeTemplate", "itemTemplate", "groupTemplate", "groupHeaderTemplate"]>;
 }
 export declare const GANTT_UPPER_TOKEN: InjectionToken<GanttUpper>;

package/gantt.config.d.ts

@@ -1,3 +1,4 @@
+import { GanttLinkType, GanttLinkOptions, GanttLinkLineType } from './class/link';
 import { InjectionToken } from '@angular/core';
 export interface GanttDateFormat {
     week?: string;
@@ -9,6 +10,7 @@ export interface GanttDateFormat {
 }
 export interface GanttGlobalConfig {
     dateFormat?: GanttDateFormat;
+    linkOptions?: GanttLinkOptions;
 }
 export declare const defaultConfig: {
     dateFormat: {
@@ -19,5 +21,10 @@ export declare const defaultConfig: {
         yearMonth: string;
         yearQuarter: string;
     };
+    linkOptions: {
+        dependencyTypes: GanttLinkType[];
+        showArrow: boolean;
+        lineType: GanttLinkLineType;
+    };
 };
 export declare const GANTT_GLOBAL_CONFIG: InjectionToken<GanttGlobalConfig>;

package/main.bundle.scss

@@ -410,6 +410,7 @@ $gantt-table-header-drag-line-color: #348fe4 !default;
 $gantt-bar-layer-append-width: 32px;
 $gantt-bar-layer-append-height: 42px;
 $gantt-bar-link-height: 16px;
+$gantt-bar-link-handle-size: 16px;
 $gantt-bar-link-drop-border: 5px;
 
 @mixin link-handles {
@@ -553,6 +554,7 @@ $gantt-bar-link-drop-border: 5px;
         background: $gantt-bar-background-color;
         overflow: hidden;
         box-sizing: border-box;
+
         .gantt-bar-content-progress {
             position: absolute;
             left: 0;
@@ -566,7 +568,7 @@ $gantt-bar-link-drop-border: 5px;
         @include active-bar();
     }
 
-    &-link-drop {
+    &-single-drop-active {
         .gantt-bar-border {
             display: block;
         }
@@ -575,6 +577,34 @@ $gantt-bar-link-drop-border: 5px;
             box-shadow: none;
         }
     }
+
+    &-drop-active {
+        @include active-bar();
+
+        .gantt-bar-layer {
+            .link-handles {
+                .handle {
+                    width: $gantt-bar-link-handle-size + 10px;
+                    height: 100%;
+
+                    &:first-child {
+                        left: -$gantt-bar-link-handle-size - 5px;
+                    }
+
+                    &:last-child {
+                        right: -$gantt-bar-link-handle-size - 5px;
+                    }
+
+                    &:hover {
+                        .point {
+                            width: 12px;
+                            height: 12px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .gantt-range {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/gantt",
-  "version": "12.1.3",
+  "version": "12.2.0",
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/common": "^12.0.0",