Add stroke style to mark (#245)

* add strokeStyle

* common StrokeStyle

* formatting

* remove strokeStyle

* remove comments

* strokeStyle on triangle & ellipse

* whiespace

* added stroke icons

resources/icons/icons_stroke-dashed.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <title>
+        icons
+    </title>
+    <line x1="4.59046" y1="16" x2="27.40954" y2="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:4,4"/>
+</svg>

resources/icons/icons_stroke-dotted.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <title>
+        icons
+    </title>
+    <line x1="4.59046" y1="16" x2="27.40954" y2="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1.5,4"/>
+</svg>

resources/icons/icons_stroke-solid.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <title>
+        icons
+    </title>
+    <line x1="4.59046" y1="16" x2="27.40954" y2="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10"/>
+</svg>

src/app/resources/icons.ts

@@ -356,6 +356,19 @@ addSVGIcon(
   "mark/nested-chart",
   require("url-loader!resources/icons/icons_nested-chart.svg")
 );
+addSVGIcon(
+  "stroke/dashed",
+  require("url-loader!resources/icons/icons_stroke-dashed.svg")
+);
+addSVGIcon(
+  "stroke/dotted",
+  require("url-loader!resources/icons/icons_stroke-dotted.svg")
+);
+addSVGIcon(
+  "stroke/solid",
+  require("url-loader!resources/icons/icons_stroke-solid.svg")
+);
+
 // Handle icons
 addSVGIcon(
   "sublayout/overlap",

src/core/prototypes/common.ts

@@ -463,3 +463,19 @@ export function getProperty(
     return getField(object.properties[property.property], property.field);
   }
 }
+
+export type StrokeStyle = "solid" | "dashed" | "dotted";
+
+export function strokeStyleToDashArray(strokeStyle: StrokeStyle) {
+  switch (strokeStyle) {
+    case "dashed": {
+      return "8";
+    }
+    case "dotted": {
+      return "1 10";
+    }
+    default: {
+      return "";
+    }
+  }
+}

src/core/prototypes/marks/rect.attrs.ts

@@ -5,6 +5,7 @@ import { AttributeDescriptions } from "../object";
 import { Color } from "../../common";
 import { AttributeMap } from "../../specification/index";
 import { AttrBuilder } from "../attrs";
+import { StrokeStyle } from "../common";
 
 export const rectAttributes: AttributeDescriptions = {
   ...AttrBuilder.line(),
@@ -31,4 +32,5 @@ export interface RectElementAttributes extends AttributeMap {
 
 export interface RectElementProperties extends AttributeMap {
   shape: "rectangle" | "ellipse" | "triangle";
+  strokeStyle: StrokeStyle;
 }

src/core/prototypes/marks/rect.ts

@@ -14,6 +14,7 @@ import {
   LinkAnchor,
   ObjectClassMetadata,
   SnappingGuides,
+  strokeStyleToDashArray,
   TemplateParameters
 } from "../common";
 import { ChartStateManager } from "../state";
@@ -29,7 +30,7 @@ export { RectElementAttributes, RectElementProperties };
 export class RectElementClass extends EmphasizableMarkClass<
   RectElementProperties,
   RectElementAttributes
-> {
+  > {
   public static classID = "mark.rect";
   public static type = "mark";
 
@@ -44,6 +45,7 @@ export class RectElementClass extends EmphasizableMarkClass<
 
   public static defaultProperties: Partial<RectElementProperties> = {
     visible: true,
+    strokeStyle: "solid",
     shape: "rectangle"
   };
 
@@ -193,6 +195,21 @@ export class RectElementClass extends EmphasizableMarkClass<
           numberOptions: { showSlider: true, sliderRange: [0, 5], minimum: 0 }
         })
       );
+      widgets.push(
+        manager.row(
+          "Line Style",
+          manager.inputSelect(
+            { property: "strokeStyle" },
+            {
+              type: "dropdown",
+              showLabel: true,
+              icons: ["stroke/solid", "stroke/dashed", "stroke/dotted"],
+              labels: ["Solid", "Dashed", "Dotted"],
+              options: ["solid", "dashed", "dotted"]
+            }
+          )
+        )
+      );
     }
     widgets = widgets.concat([
       manager.mappingEditor("Opacity", "opacity", {
@@ -253,6 +270,9 @@ export class RectElementClass extends EmphasizableMarkClass<
             strokeColor: attrs.stroke,
             strokeWidth: attrs.strokeWidth,
             strokeLinejoin: "miter",
+            strokeDasharray: strokeStyleToDashArray(
+              this.object.properties.strokeStyle
+            ),
             fillColor: attrs.fill,
             opacity: attrs.opacity,
             ...this.generateEmphasisStyle(empasized)
@@ -283,6 +303,9 @@ export class RectElementClass extends EmphasizableMarkClass<
           strokeColor: attrs.stroke,
           strokeWidth: attrs.strokeWidth,
           strokeLinejoin: "miter",
+          strokeDasharray: strokeStyleToDashArray(
+            this.object.properties.strokeStyle
+          ),
           fillColor: attrs.fill,
           opacity: attrs.opacity,
           ...this.generateEmphasisStyle(empasized)
@@ -300,6 +323,9 @@ export class RectElementClass extends EmphasizableMarkClass<
             strokeColor: attrs.stroke,
             strokeWidth: attrs.strokeWidth,
             strokeLinejoin: "miter",
+            strokeDasharray: strokeStyleToDashArray(
+              this.object.properties.strokeStyle
+            ),
             fillColor: attrs.fill,
             opacity: attrs.opacity,
             ...this.generateEmphasisStyle(empasized)