Merge pull request #15 from Grihail/master

javdome · web-flow · commit fa1db973c3d9 · 2025-09-19T15:48:41.000+02:00
Individual arrow colors, directions and line types.
Add color parameter for individual arrow colors
Add direction parameter (0=no arrows, 1=forward, 2=backward, 3=both)
Add line parameter (0=solid, 1=dashed)
Update README with new parameters documentation
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Following the issue of vis https://github.com/almende/vis/issues/1699, and thanks to the comments of @frboyer and @JimmyCheng, I have created a class to easily draw lines to connect items in the vis Timeline module.
 
-![CapturaTime](https://user-images.githubusercontent.com/36993404/59111595-9d830600-8941-11e9-8cb8-8d7b72701a71.JPG)
+![CapturaTime](https://github.com/user-attachments/assets/a8b85ee1-d147-407e-8132-d749804362f3)
 
 
 ## Install & initialize
@@ -32,15 +32,18 @@ const myTimeline = new vis.Timeline(container, items, groups, options);
 
 And optionally:
 * title (insert a text and it will show a title if you hover the mouse in the arrow)
+* color (set individual arrow color, overrides the global color option)
+* direction (arrow direction: 0=no arrows, 1=forward only, 2=backward only, 3=both directions)
+* line (line type: 0=solid line, 1=dashed line)
 
 For instance:
 
 ```javascript
 var arrowsSpecs = [
     { id: 2, id_item_1: 1, id_item_2: 2 },
-    { id: 5, id_item_1: 3, id_item_2: 5, title:'Hello!!!' },
-    { id: 7, id_item_1: 6, id_item_2: 7 },
-    { id: 10, id_item_1: 3, id_item_2: 8, title:'I am a title!!!' }
+    { id: 5, id_item_1: 3, id_item_2: 5, title:'Hello!!!', color: '#ff0000', direction: 1 },
+    { id: 7, id_item_1: 6, id_item_2: 7, line: 1 },
+    { id: 10, id_item_1: 3, id_item_2: 8, title:'I am a title!!!', color: '#00ff00', direction: 3, line: 1 }
 ];
 ```
 
@@ -86,6 +89,41 @@ This method takes two arguments, `el` - the arrow - and `title` - the content of
 **hideWhenItemsNotVisible** - defaults to `true`.
 When you zoom the timeline and both items go out of the screen. You can set if the arrow is still visible. By default, the arrow hides, but you can change it setting this option to `false`.
 
+## Arrow Properties
+
+Each arrow can have the following individual properties:
+
+**color** - Optional. Set individual arrow color (including the arrowhead). This overrides the global color option.
+Example: `color: '#ff0000'`
+
+**direction** - Optional. Controls arrow direction. Defaults to `1`.
+
+* `0` = No arrows (simple line connection)
+* `1` = Forward arrow only (from item_1 to item_2)
+* `2` = Backward arrow only (from item_2 to item_1)
+* `3` = Both directions (arrows on both ends)
+
+**line** - Optional. Controls line style. Defaults to `0`.
+
+* `0` = Solid line (default)
+* `1` = Dashed line
+
+**title** - Optional. Text that appears on hover.
+
+Example with all properties:
+
+```javascript
+{ 
+    id: 1, 
+    id_item_1: 3, 
+    id_item_2: 8, 
+    title: 'Custom arrow', 
+    color: '#00ff00', 
+    direction: 3, 
+    line: 1 
+}
+```
+
 ## Methods
 
 I have created the following methods:
diff --git a/arrow.js b/arrow.js
@@ -40,6 +40,9 @@
  * @property {VisIdType} id_item_1 start timeline item id
  * @property {VisIdType} id_item_2 end timeline item id
  * @property {string} [title] optional arrow title
+ * @property {string} [color] optional arrow color
+ * @property {number} [direction] arrow direction: 0=no arrows, 1=forward only, 2=backward only, 3=both directions
+ * @property {number} [line] line type: 0=solid (default), 1=dashed
  */
 
 /**
@@ -78,16 +81,8 @@ export default class Arrow {
         /** @private @type {boolean} if true, arrows will be hidden when both items is not visible due to timeline zoom  */
         this._hideWhenItemsNotVisible = options?.hideWhenItemsNotVisible ?? true;
 
-        /** @private @type {SVGMarkerElement} */
-        this._arrowHead = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "marker"
-        );
-        /** @private @type {SVGPathElement} */
-        this._arrowHeadPath = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-        );
+        /** @private @type {Map<string, string>} map of color to marker id */
+        this._colorMarkers = new Map();
         
         this._dependency = [...dependencies];
 
@@ -111,23 +106,9 @@ export default class Arrow {
         this._svg.style.pointerEvents = "none"; // To click through, if we decide to put it above other elements.
         this._timeline.dom.center.appendChild(this._svg);
 
-        //Configure the arrowHead
-        this._arrowHead.setAttribute("id", this._arrowHeadId);
-        this._arrowHead.setAttribute("viewBox", "-10 -5 10 10");
-        this._arrowHead.setAttribute("refX", "-7");
-        this._arrowHead.setAttribute("refY", "0");
-        this._arrowHead.setAttribute("markerUnits", "strokeWidth");
-        this._arrowHead.setAttribute("markerWidth", "3");
-        this._arrowHead.setAttribute("markerHeight", "3");
-        this._arrowHead.setAttribute("orient", "auto-start-reverse");
-        //Configure the path of the arrowHead (arrowHeadPath)
-        this._arrowHeadPath.setAttribute("d", "M 0 0 L -10 -5 L -7.5 0 L -10 5 z");
-        this._arrowHeadPath.style.fill = this._arrowsColor;
-        this._arrowHead.appendChild(this._arrowHeadPath);
-        this._svg.appendChild(this._arrowHead);
         //Create paths for the started dependency array
         for (let i = 0; i < this._dependency.length; i++) {
-            this._createPath();
+            this._createPath(this._dependency[i].color, this._dependency[i].line);
         }
         
         //NOTE: We hijack the on "changed" event to draw the arrows.
@@ -136,19 +117,68 @@ export default class Arrow {
         });
 
     }
+
+    /** @private */
+    _getOrCreateMarker(color) {
+        const arrowColor = color || this._arrowsColor;
+        
+        if (!this._colorMarkers.has(arrowColor)) {
+            const markerId = `arrowhead-${arrowColor.replace('#', '')}-${Math.random().toString(36).substring(2)}`;
+            
+            const arrowHead = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+            arrowHead.setAttribute("id", markerId);
+            arrowHead.setAttribute("viewBox", "-10 -5 10 10");
+            arrowHead.setAttribute("refX", "-7");
+            arrowHead.setAttribute("refY", "0");
+            arrowHead.setAttribute("markerUnits", "strokeWidth");
+            arrowHead.setAttribute("markerWidth", "3");
+            arrowHead.setAttribute("markerHeight", "3");
+            arrowHead.setAttribute("orient", "auto-start-reverse");
+            
+            const arrowHeadPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            arrowHeadPath.setAttribute("d", "M 0 0 L -10 -5 L -7.5 0 L -10 5 z");
+            arrowHeadPath.style.fill = arrowColor;
+            
+            arrowHead.appendChild(arrowHeadPath);
+            this._svg.appendChild(arrowHead);
+            
+            this._colorMarkers.set(arrowColor, markerId);
+        }
+        
+        return this._colorMarkers.get(arrowColor);
+    }
     
     /** @private */
-    _createPath(){
+    _createPath(color, lineType){
         //Add a new path to array dependencyPath and to svg
         let somePath = document.createElementNS(
             "http://www.w3.org/2000/svg",
             "path"
           );
           somePath.setAttribute("d", "M 0 0");
-          somePath.style.stroke = this._arrowsColor;
+          somePath.style.stroke = color || this._arrowsColor;
           somePath.style.strokeWidth = this._arrowsStrokeWidth + "px";
           somePath.style.fill = "none";
           somePath.style.pointerEvents = "auto";
+          
+          // Устанавливаем тип линии
+          const line = lineType !== undefined ? lineType : 0; // По умолчанию сплошная линия
+          if (line === 0) {
+              // Тип 0: Сплошная линия (по умолчанию)
+              somePath.style.strokeDasharray = "none";
+          } else if (line === 1) {
+              // Тип 1: Пунктирная линия
+              somePath.style.strokeDasharray = "7,5";
+          }
+          // Здесь можно добавить дополнительные типы линий:
+          // } else if (line === 2) {
+          //     // Тип 2: Точечная линия
+          //     somePath.style.strokeDasharray = "2,3";
+          // } else if (line === 3) {
+          //     // Тип 3: Штрих-пунктир
+          //     somePath.style.strokeDasharray = "10,5,2,5";
+          // }
+          
           this._dependencyPath.push(somePath);
           this._svg.appendChild(somePath);
     }
@@ -215,10 +245,48 @@ export default class Arrow {
 
             var curveLen = item_1.height * 2; // Length of straight Bezier segment out of the item.
 
+            const markerId = this._getOrCreateMarker(dep.color);
+            const direction = dep.direction !== undefined ? dep.direction : 1; // По умолчанию направление вперед
+
+            // Определяем какие маркеры нужно установить в зависимости от direction
+            let markerStart = "";
+            let markerEnd = "";
+            
+            if (direction === 0) {
+                // Без стрелок
+                markerStart = "";
+                markerEnd = "";
+            } else if (direction === 1) {
+                // Направление вперед (по умолчанию)
+                if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
+                    markerStart = `url(#${markerId})`;
+                    markerEnd = "";
+                } else {
+                    markerStart = "";
+                    markerEnd = `url(#${markerId})`;
+                }
+            } else if (direction === 2) {
+                // Направление назад
+                if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
+                    markerStart = "";
+                    markerEnd = `url(#${markerId})`;
+                } else {
+                    markerStart = `url(#${markerId})`;
+                    markerEnd = "";
+                }
+            } else if (direction === 3) {
+                // Обе стороны
+                markerStart = `url(#${markerId})`;
+                markerEnd = `url(#${markerId})`;
+            }
+
             if (this._followRelationships && item_2.mid_x < item_1.mid_x) {
-                item_2.right += 10; // Space for the arrowhead.
-                this._dependencyPath[index].setAttribute("marker-start", `url(#${this._arrowHeadId})`);
-                this._dependencyPath[index].setAttribute("marker-end", "");
+                // Добавляем отступы только там, где есть стрелки
+                if (markerStart !== "") item_2.right += 10; // Space for the arrowhead at start
+                if (markerEnd !== "") item_1.left -= 10; // Space for the arrowhead at end
+                
+                this._dependencyPath[index].setAttribute("marker-start", markerStart);
+                this._dependencyPath[index].setAttribute("marker-end", markerEnd);
                 this._dependencyPath[index].setAttribute(
                     "d",
                     "M " +
@@ -239,9 +307,12 @@ export default class Arrow {
                     item_1.mid_y
                 );
             } else {
-                item_2.left -= 10; // Space for the arrowhead.
-                this._dependencyPath[index].setAttribute("marker-end", `url(#${this._arrowHeadId})`);
-                this._dependencyPath[index].setAttribute("marker-start", "");
+                // Добавляем отступы только там, где есть стрелки
+                if (markerEnd !== "") item_2.left -= 10; // Space for the arrowhead at end
+                if (markerStart !== "") item_1.right += 10; // Space for the arrowhead at start
+                
+                this._dependencyPath[index].setAttribute("marker-end", markerEnd);
+                this._dependencyPath[index].setAttribute("marker-start", markerStart);
                 this._dependencyPath[index].setAttribute(
                     "d",
                     "M " +
@@ -304,7 +375,7 @@ export default class Arrow {
      */
     addArrow(dep) {
         this._dependency.push(dep);
-        this._createPath();
+        this._createPath(dep.color, dep.line);
         this._timeline.redraw();
     }
 
@@ -332,19 +403,21 @@ export default class Arrow {
      * Función que recibe el id de una flecha y la elimina.
      * @param {ArrowIdType} id arrow id
      */
-    removeArrow(id) {
+     removeArrow(id) {
         const index = this._dependency.findIndex(dep => dep.id === id);
 
         if (index >= 0) {
+            // Get the path element from our specific array before modifying the arrays
+            const pathToRemove = this._dependencyPath[index];
 
-            //var list = document.getElementsByTagName("path"); //FALTA QUE ESTA SELECCION LA HAGA PARA EL DOM DEL TIMELINE INSTANCIADO!!!!
-            const list = document.querySelectorAll("#" + this._timeline.dom.container.id + " path");
+            // Remove the SVG element from the DOM
+            if (pathToRemove && pathToRemove.parentNode) {
+                pathToRemove.parentNode.removeChild(pathToRemove);
+            }
 
-            this._dependency.splice(index, 1); //Elimino del array dependency
-            this._dependencyPath.splice(index, 1); //Elimino del array dependencyPath
-            
-            list[index + 1].parentNode?.removeChild(list[index + 1]); //Lo elimino del dom
-            
+            // Now, remove the arrow from internal arrays
+            this._dependency.splice(index, 1);
+            this._dependencyPath.splice(index, 1);
         }
     }
 
@@ -391,4 +464,4 @@ export default class Arrow {
         this.removeItemArrows(id);
     }
 
-  }
+  }
diff --git a/examples/basic_example.js b/examples/basic_example.js
