Add basic impl for change the stroke type.

src/uxbox/data/workspace.cljs

@@ -227,13 +227,14 @@
                  (when opacity {:opacity opacity})))))
 
 (defn update-shape-stroke
-  [sid {:keys [color opacity width] :as opts}]
+  [sid {:keys [color opacity width type] :as opts}]
   (sc/validate! +shape-update-stroke-schema+ opts)
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
       (update-in state [:shapes-by-id sid]
                  merge
+                 {:stroke-type type}
                  (when width {:stroke-width width})
                  (when color {:stroke color})
                  (when opacity {:stroke-opacity opacity})))))

src/uxbox/ui/shapes.cljs

@@ -18,7 +18,24 @@
 (defn- extract-style-attrs
   "Extract predefinet attrs from shapes."
   [shape]
-  (select-keys shape [:fill :opacity :stroke :stroke-opacity :stroke-width]))
+  (select-keys shape [:fill :opacity :stroke :stroke-opacity :stroke-width
+                      :stroke-type]))
+
+(defn- transform-stroke-type
+  [attrs]
+  (if-let [type (:stroke-type attrs)]
+    (let [value (case type
+                  :dotted "1,1"
+                  :dashed "10,10")]
+      (-> attrs
+          (assoc :stroke-dasharray value)
+          (dissoc :stroke-type)))
+    attrs))
+
+(defn- transform-attrs
+  [attrs]
+  (-> attrs
+      (transform-stroke-type)))
 
 (defn- make-debug-attrs
   [shape]
@@ -35,19 +52,25 @@
   [{:keys [data id] :as shape} _]
   (let [key (str id)
         rfm (svg/calculate-transform shape)
+        attrs (-> (extract-style-attrs shape)
+                  (transform-attrs))
         attrs (merge {:id key :key key :transform rfm}
                      ;; (select-keys shape [:x :y :width :height])
                      (make-debug-attrs shape)
-                     (extract-style-attrs shape))]
+                     attrs)]
     (html
      [:g attrs data])))
 
 (defmethod sh/-render :builtin/line
-  [{:keys [id x1 y1 x2 y2]}]
-  (html
-   [:line {:x1 x1 :y1 y1 :x2 x2 :y2 y2
-           :stroke "black"
-           :stroke-width "1"}]))
+  [{:keys [id x1 y1 x2 y2] :as shape}]
+  (let [key (str id)
+        props (select-keys shape [:x1 :x2 :y2 :y1])
+        attrs (-> (extract-style-attrs shape)
+                  (transform-attrs)
+                  (merge {:id key :key key})
+                  (merge props))]
+    (html
+     [:line attrs])))
 
 ;; FIXME: the impl should be more clear.
 

src/uxbox/ui/workspace/options.cljs

@@ -11,7 +11,7 @@
             [uxbox.ui.colorpicker :refer (colorpicker)]
             [uxbox.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.ui.workspace.base :as wb]
-            [uxbox.util.data :refer (parse-int parse-float)]))
+            [uxbox.util.data :refer (parse-int parse-float read-string)]))
 
 (def +menus-map+
   {:builtin/icon [:menu/icon-measures :menu/fill :menu/stroke]
@@ -66,7 +66,11 @@
               (change-stroke {:opacity value})))
           (on-color-change [event]
             (let [value (dom/event->value event)]
-              (change-stroke {:color value})))]
+              (change-stroke {:color value})))
+          (on-stroke-style-change [event]
+            (let [value (dom/event->value event)
+                  value (read-string value)]
+              (change-stroke {:type value})))]
     (html
      [:div.element-set {:key (str (:id menu))}
       [:div.element-set-title (:name menu)]
@@ -79,11 +83,11 @@
           :min "0"
           :value (:stroke-width shape "")
           :on-change on-width-change}]
-        [:select#style {:placeholder "Style"}
-         [:option {:value "none"} "None"]
-         [:option {:value "none"} "Solid"]
-         [:option {:value "none"} "Dotted"]
-         [:option {:value "none"} "Dashed"]]]
+        [:select#style {:placeholder "Style"
+                        :on-change on-stroke-style-change}
+         [:option {:value "nil"} "Solid"]
+         [:option {:value ":dotted"} "Dotted"]
+         [:option {:value ":dashed"} "Dashed"]]]
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Color"]