Arrow type change to 「Grid」

src/components/cardObjects.ts

@@ -2,14 +2,17 @@ import logger from '../utils/logger';
 import Card from './card';
 import PlainDraggable from '../plugins/plain-draggable.min';
 import LeaderLine from '../plugins/leader-line.min';
-import { ICardAnswer, ICard, ILine, INextCard } from '../types';
+import { ICardAnswer, ICard, ILine, INextCard, IDrawingPath, IDrawingOptions } from '../types';
 import bus from './bus';
 
 class CardObjects {
   container: any;
   items: Card[] = [];
   lines: ILine = {};
 
+  drawingPath: IDrawingPath = 'fluid';
+  drawingColor: string = 'coral';
+
   setContainer(container: any) {
     this.container = container;
   }
@@ -94,6 +97,8 @@ class CardObjects {
           const line = new LeaderLine(fromEl, toEl, {
             lineId,
             middleLabel: (LeaderLine as any).captionLabel(answer.title),
+            path: this.drawingPath,
+            color: this.drawingColor,
           });
 
           this.addLine(lineId, line);
@@ -247,6 +252,11 @@ class CardObjects {
       }
     });
   }
+
+  setDrawingOptions(options: IDrawingOptions) {
+    this.drawingPath = options?.path || 'fluid';
+    this.drawingColor = options?.color || 'coral';
+  }
 }
 
 export default new CardObjects();

src/components/mouseDrawer.ts

@@ -1,4 +1,4 @@
-import { IDrawClickedNodeFrom, INextCard } from '../types';
+import { IDrawClickedNodeFrom, IDrawingOptions, IDrawingPath, INextCard } from '../types';
 import LeaderLine from '../plugins/leader-line.min';
 import { uniqBy } from '../utils/helper';
 import logger from '../utils/logger';
@@ -15,6 +15,9 @@ class MouseDrawer {
   boundingClientRectBeforeZoom:any
   directionType = 1
 
+  drawingPath: IDrawingPath = 'fluid';
+  drawingColor: string = 'coral';
+
   get endMovingNodeId() {
     return 'sgbmk-end-moving-node';
   }
@@ -95,7 +98,10 @@ class MouseDrawer {
       return;
     }
 
-    this.movingLine = new LeaderLine(fromEl, toEl);
+    this.movingLine = new LeaderLine(fromEl, toEl, {
+      path: this.drawingPath,
+      color: this.drawingColor,
+    });
   };
 
   addMovingNode = () => {
@@ -293,6 +299,11 @@ class MouseDrawer {
       this.drawDoneCallback();
     }
   }
+
+  setDrawingOptions(options: IDrawingOptions) {
+    this.drawingPath = options?.path || 'fluid';
+    this.drawingColor = options?.color || 'coral';
+  }
 }
 
 export default new MouseDrawer();

src/index.ts

@@ -1,5 +1,5 @@
 import './assets/scss/styles.scss';
-import { ICard, ICardType } from './types';
+import { ICard, ICardType, IDrawingOptions } from './types';
 import Card from './components/card';
 import cardType from './components/cardType';
 import bus from './components/bus';
@@ -23,16 +23,20 @@ export class ChatBotFlowsMaker {
   directionType = 0;
   currentZoom = 100;
 
-  constructor(container: any, btnNext:HTMLButtonElement
-    , btnAdd: HTMLButtonElement
-    , btnEdit: HTMLButtonElement
-    , btnDelete: HTMLButtonElement
-    , iconStart: HTMLElement
-    , iconMessage: HTMLElement
-    , iconQuestion: HTMLElement
-    , iconGoal: HTMLElement
-    ,isReport:boolean
-    ,isReadOnly:boolean=false) {
+  constructor(
+    container: any,
+    btnNext: HTMLButtonElement,
+    btnAdd: HTMLButtonElement,
+    btnEdit: HTMLButtonElement,
+    btnDelete: HTMLButtonElement,
+    iconStart: HTMLElement,
+    iconMessage: HTMLElement,
+    iconQuestion: HTMLElement,
+    iconGoal: HTMLElement,
+    isReport: boolean,
+    isReadOnly: boolean = false,
+    drawingOptions?: IDrawingOptions,
+  ) {
     logger.debug('Init...');
     this.container = container || document.body;
     this.isReadOnly = isReadOnly
@@ -48,6 +52,9 @@ export class ChatBotFlowsMaker {
 
     mouseDrawer.setContainer(container);
     cardObjects.setContainer(container);
+    drawingOptions && mouseDrawer.setDrawingOptions(drawingOptions);
+    drawingOptions && cardObjects.setDrawingOptions(drawingOptions);
+
     return this;
   }
 

src/types.ts

@@ -43,3 +43,10 @@ export interface IDrawClickedNodeTo {
 }
 
 export type ILine = Record<string, any>;
+
+export type IDrawingPath = 'fluid' | 'straight' | 'arc' | 'magnet' | 'grid';
+
+export interface IDrawingOptions {
+  path?: IDrawingPath;
+  color?: string;
+}