render nav lines if needed

KlausSchaefers · Aug 1, 2023 · c7ef174 · c7ef174
1 parent 7921ab0
commit c7ef174
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/src/canvas/Lines.vue b/src/canvas/Lines.vue
@@ -17,7 +17,8 @@ export default {
 			bendFactorX : 0.5,
 			bendFactorY : 0.5,
 			lineEventType :"receives", // emits
-			lineFromCorrect: 1
+			lineFromCorrect: 1,
+			renderNavLines: false,
         }
     },
     components: {},
@@ -94,7 +95,7 @@ export default {
 						/**
 						 * create new line
 						 */
-						 const svg = this.drawLine(line.id, layoutedLine);
+						const svg = this.drawLine(line.id, layoutedLine, line.style);
 						this.lineSVGs[line.id] = svg;
 
 						/**
@@ -114,7 +115,7 @@ export default {
 						/**
 						 * update line
 						 */
-						 const svg = this.lineSVGs[line.id];
+						const svg = this.lineSVGs[line.id];
 						svg.attr("d", this.lineFunction(layoutedLine));
 
 						if (this.mode === "edit") {
@@ -502,8 +503,8 @@ export default {
 		},
 
 
-		drawLine (id, line){
-			return this.drawSVGLine(id, line,this.defaultLineColor, this.defaultLineWidth, 1);
+		drawLine (id, line, style){
+			return this.drawSVGLine(id, line,this.defaultLineColor, this.defaultLineWidth, 1, style);
 		},
 
 		drawSVGLineWidthArrow (id, line, color, width, op) {
@@ -512,14 +513,14 @@ export default {
 						.attr("d", this.lineFunction(line))
 						.attr("stroke", color)
 						.attr("stroke-width", width )
-						.attr("fill", "none")
+						.attr("fill", "none")				
 						.style("opacity", op);
 
 			return line
 		},
 
 
-		drawSVGLine (id, line, color, width, op){
+		drawSVGLine (id, line, color, width, op, style){
 
 			this.svg.append("defs").append("marker")
 					.attr("id", "arrowhead_"+id)
@@ -542,6 +543,11 @@ export default {
 						.style("opacity", op)
 						.attr("marker-end", "url(#" + "arrowhead_"+id +")");
 
+			if (style === 'dashed') {
+				lineGraph.attr("stroke-dasharray", 4)
+			}
+
+
 			return lineGraph;
 		},
 

diff --git a/src/canvas/RenderFlow.vue b/src/canvas/RenderFlow.vue
@@ -28,32 +28,61 @@ export default {
 			}
 
 			for (let id in zoomedModel.screens){
-				let zoomedScreen = zoomedModel.screens[id]
+				const zoomedScreen = zoomedModel.screens[id]
 				this.updateScreenDnd(zoomedScreen)
 				this.updateCommentDnd(zoomedScreen)
 			}
 
 			for (let id in zoomedModel.widgets){
-				let zoomedWidget = zoomedModel.widgets[id]
+				const zoomedWidget = zoomedModel.widgets[id]
 				if (zoomedWidget && this.widgetDivs[id]) {
-					let dnd = this.widgetDivs[id]
+					const dnd = this.widgetDivs[id]
 					this.updateBox(zoomedWidget, dnd)
 				}
 			}
 
 			if (this.renderLines){
 				for (let id in zoomedModel.lines){
-					let line = zoomedModel.lines[id];
+					const line = zoomedModel.lines[id];
 					if (!line.hidden){
 						this.renderLine(line);
 					}
 				}
+
+				this._renderNavigationLines(zoomedModel)
+
 			}
 
 			this._updateDNDRendered = true
 
 		},
 
+		_renderNavigationLines (zoomedModel) {
+			if (!this.renderNavLines) {
+				return
+			}
+			for (let id in zoomedModel.widgets){
+				const zoomedWidget = zoomedModel.widgets[id]
+				if (zoomedWidget.props?.navigation) {
+					const navigation = zoomedWidget.props.navigation
+					for (let i=0; i < navigation.length; i++) {
+						const item = navigation[i]
+						if (item.to) {
+							const tempLine = {
+								id: i +'@' + zoomedWidget.id,
+								from: zoomedWidget.id,
+								to: item.to,
+								style: 'dashed',
+								points:[]
+							}
+							this.renderLine(tempLine);
+						}
+					}
+		
+				}
+			}
+		},
+
 		afterUpdateDnd () {
 			// can be implemented in child classes
 		},
@@ -149,6 +178,8 @@ export default {
 						this.renderLine(zoomedModel.lines[id]);
 					}
 				}
+
+				this._renderNavigationLines(zoomedModel)
 			}
 
 			/**