add dashed lines for simpleShapes, polygons, polylines, bezier

Author: wdubbert

src/codesys.pp.js

@@ -716,6 +716,12 @@ function parse_visu_elements(content) {
 						exprInvisible = parseExpression(expr_invisible);
 					}
 
+					var exprFrameFlags = [];
+					var expr_frameFlags = $myMedia.find('expr-frame-flags');
+					if (expr_frameFlags.length) {
+						exprFrameFlags = parseExpression(expr_frameFlags);
+					}
+
 					var objId = registerSimpleShape(
 							shape,
 							rectFields[0], rectFields[1], rectFields[2] - rectFields[0], rectFields[3] - rectFields[1],
@@ -728,7 +734,8 @@ function parse_visu_elements(content) {
 							"rgb(" + fill_color_alarm + ")",
 							exprToggleColor,
 							exprLeft, exprTop, exprRight, exprBottom,
-							exprInvisible
+							exprInvisible,
+							exprFrameFlags
 						);
 
 					parseTextInfo($myMedia, centerFields, rectFields, exprInvisible);
@@ -911,6 +918,12 @@ function parse_visu_elements(content) {
 				exprInvisible = parseExpression(expr_invisible);
 			}
 
+			var exprFrameFlags = [];
+			var expr_frame_flags = $myMedia.find('expr-frame-flags');
+			if (expr_frame_flags.length) {
+				exprFrameFlags = parseExpression(expr_frame_flags);
+			}
+
 			if ((polyShape == 'polygon') || (polyShape == 'polyline')) {
 				var objId = registerPolygon(
 						polyShape,
@@ -924,7 +937,8 @@ function parse_visu_elements(content) {
 						"rgb(" + fill_color_alarm + ")",
 						exprToggleColor,
 						exprLeft, exprTop,
-						exprInvisible
+						exprInvisible,
+						exprFrameFlags
 					);
 
 				if (polyShape == 'polygon') {
@@ -949,7 +963,8 @@ function parse_visu_elements(content) {
 					"rgb(" + fill_color_alarm + ")",
 					exprToggleColor,
 					exprLeft, exprTop,
-					exprInvisible
+					exprInvisible,
+					exprFrameFlags
 				);
 
 				var center = $myMedia.find('center').text();

src/drawing.pp.js

@@ -164,7 +164,8 @@ function newSimpleShape(
     hasInsideColor, fillStyle, fillStyleAlarm,
     alarmExpr,
     leftExpr, topExpr, rightExpr, bottomExpr,
-    invisibleExpr
+    invisibleExpr,
+    frameFlagsExpr
     )
 {
     this.isA = 'SimpleShape';
@@ -191,6 +192,7 @@ function newSimpleShape(
     this.rightExpr = rightExpr;
     this.bottomExpr = bottomExpr;
     this.invisibleExpr = invisibleExpr;
+    this.frameFlagsExpr = frameFlagsExpr;
 }
 
 function registerSimpleShape(
@@ -200,7 +202,8 @@ function registerSimpleShape(
     hasInsideColor, fillStyle, fillStyleAlarm,
     alarmExpr,
     leftExpr, topExpr, rightExpr, bottomExpr,
-    invisibleExpr
+    invisibleExpr,
+    frameFlagsExpr
     )
 {
     drawObjects.push(new newSimpleShape(
@@ -210,7 +213,8 @@ function registerSimpleShape(
             hasInsideColor, fillStyle, fillStyleAlarm,
             alarmExpr,
             leftExpr, topExpr, rightExpr, bottomExpr,
-            invisibleExpr
+            invisibleExpr,
+            frameFlagsExpr
         ));
     // Gib die ID (den Index) des eben registrierten Objekts zurück
     //Log("registerSimpleShape return "+(drawObjects.length-1))
@@ -358,7 +362,8 @@ function newPolygon(
     hasInsideColor, fillStyle, fillStyleAlarm,
     alarmExpr,
     leftExpr, topExpr,
-    invisibleExpr
+    invisibleExpr,
+    frameFlagsExpr
     ) {
     this.isA = 'Polygon';
     this.polyShape = polyShape;
@@ -379,6 +384,7 @@ function newPolygon(
     this.leftExpr = leftExpr;
     this.topExpr = topExpr;
     this.invisibleExpr = invisibleExpr;
+    this.frameFlagsExpr = frameFlagsExpr;
 }
 
 function registerPolygon(
@@ -388,7 +394,8 @@ function registerPolygon(
     hasInsideColor, fillStyle, fillStyleAlarm,
     alarmExpr,
     leftExpr, topExpr, 
-    invisibleExpr
+    invisibleExpr,
+    frameFlagsExpr
     ) {
     drawObjects.push(new newPolygon(
             polyShape,
@@ -397,7 +404,8 @@ function registerPolygon(
             hasInsideColor, fillStyle, fillStyleAlarm,
             alarmExpr,
             leftExpr, topExpr,
-            invisibleExpr
+            invisibleExpr,
+            frameFlagsExpr
         ));
     // Gib die ID (den Index) des eben registrierten Objekts zurück
     //Log("registerPolygon return "+(drawObjects.length-1))
@@ -1034,6 +1042,8 @@ function drawAllObjects(ctx, clickContext, objects) {
             if (obj.rightExpr.length > 0) { right = evalExpression(obj.rightExpr); }
             var bottom = 0;
             if (obj.bottomExpr.length > 0) { bottom = evalExpression(obj.bottomExpr); }
+            var frameStyle = 0;
+            if (obj.frameFlagsExpr.length > 0) { frameStyle = evalExpression(obj.frameFlagsExpr); }
 
             switch (obj.shape) {
                 case 'rectangle':
@@ -1079,8 +1089,10 @@ function drawAllObjects(ctx, clickContext, objects) {
             if (obj.hasFrameColor == 'true') {
                 ctx.lineWidth = obj.lineWidth;
                 ctx.strokeStyle = strokeStyle;
+                setLineDash(frameStyle, ctx);
                 ctx.stroke();
                 clickContext.stroke();
+                resetLineDash(ctx);
             }
 
             ctx.closePath();
@@ -1221,6 +1233,8 @@ function drawAllObjects(ctx, clickContext, objects) {
             if (obj.leftExpr.length > 0) { left = evalExpression(obj.leftExpr); }
             var top = 0;
             if (obj.topExpr.length > 0) { top = evalExpression(obj.topExpr); }
+            var lineStyle = 0;
+            if (obj.frameFlagsExpr.length > 0) { lineStyle = evalExpression(obj.frameFlagsExpr); }
 
             if (obj.polyShape == 'polyline' || obj.polyShape == 'polygon')
             {
@@ -1344,8 +1358,10 @@ function drawAllObjects(ctx, clickContext, objects) {
             if (obj.hasFrameColor == 'true') {
                 ctx.lineWidth = obj.lineWidth;
                 ctx.strokeStyle = strokeStyle;
+                setLineDash(lineStyle, ctx);
                 ctx.stroke();
                 clickContext.stroke();
+                resetLineDash(ctx);
             }
 
             ctx.closePath();