Closes #5 redesign shapes nodes so we can use external .svg files

CHANGELOG.md

@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file. This change
 
 ## [Unreleased]
 
+- Add database node
 - Add proportional node support + user svg node
 - Move node collapsed to node :extra-data
 - Upgrade clindex to 0.3.2

src/cljs/clograms/core.cljs

@@ -44,10 +44,12 @@
   (re/register-node-component! :clograms/re-frame-fx-node    {:type :div :comp nodes/re-frame-fx-node-component})
   (re/register-node-component! :clograms/re-frame-cofx-node  {:type :div :comp nodes/re-frame-cofx-node-component})
   (re/register-node-component! :clograms/spec-node           {:type :div :comp nodes/spec-node-component})
-  (re/register-node-component! :clograms/rectangle-node      {:type :svg :comp nodes/rectangle-node-component})
-  (re/register-node-component! :clograms/circle-node         {:type :svg :comp nodes/circle-node-component :prop-resize? true})
-  (re/register-node-component! :clograms/group-node          {:type :svg :comp nodes/group-node-component})
-  (re/register-node-component! :clograms/user-node           {:type :svg :comp nodes/user-node-component :prop-resize? true})
+  (re/register-node-component! :clograms/rectangle-node      {:type :svg :prop-resize? false :comp nodes/rectangle-node-component})
+  (re/register-node-component! :clograms/circle-node         {:type :svg :svg-url "/svg/circle.svg" :prop-resize? true :comp nodes/svg-node-component})
+  (re/register-node-component! :clograms/group-node          {:type :svg :prop-resize? false :comp nodes/group-node-component})
+  (re/register-node-component! :clograms/user-node           {:type :svg :svg-url "/svg/man-user.svg" :prop-resize? true :comp nodes/svg-node-component})
+  (re/register-node-component! :clograms/database-node       {:type :svg :svg-url "/svg/database.svg" :prop-resize? true :comp nodes/svg-node-component})
+
   (re/register-link-component! :clograms/line-link links/line-link-component)
   (re-frame/clear-subscription-cache!)
   (reagent/render [main-screen/main-panel]

src/cljs/clograms/re_grams/re_grams.cljs

@@ -251,7 +251,7 @@
        ^{:key (:id p)}
        [port n (merge p (port-position n (:id p)))])
 
-     [(:comp node-comp) n]
+     [(:comp node-comp) n (:svg-url node-comp)]
      [:circle.resizer {:cx (:w n)
                        :cy (:h n)
                        :r 20
@@ -401,14 +401,36 @@
    [:marker {:id "arrow-start" :marker-width 10 :marker-height 10 :ref-x 0 :ref-y 2 :orient "auto" :marker-units "strokeWidth"}
     [:path {:d "M0,2 L6,4 L6,0 z" :fill "gray"}]]])
 
+(defn svg-nodes-components []
+  (let [nodes-comp @node-components
+        svg-keys (keep (fn [[k c]] (when (= :svg (:type c)) k)) nodes-comp)]
+    (select-keys nodes-comp svg-keys )))
+
+(defn div-nodes-components []
+  (let [nodes-comp @node-components
+        div-keys (keep (fn [[k c]] (when (= :div (:type c)) k)) nodes-comp)]
+    (select-keys nodes-comp div-keys)))
+
+(defn svg-nodes-comparator [type1 type2]
+  ;; let put groups first so they don't oclude other svg nodes
+  (cond
+    (= type1 type2) 0
+    (= type1 :clograms/group-node) -1
+    (= type2 :clograms/group-node) 1
+    :else 0))
+
 (defn diagram [dia]
   (r/create-class
    {:component-did-mount (fn [this])
     :reagent-render (fn [dia]
                       (let [{:keys [nodes links link-config grab translate scale scale-origin]} dia
                             [tx ty] translate
-                            div-nodes (filter #(= (:type (get @node-components (:diagram.node/type %))) :div) (vals nodes))
-                            svg-nodes (filter #(= (:type (get @node-components (:diagram.node/type %))) :svg) (vals nodes))]
+                            div-nodes (filter (fn [n] (contains? (div-nodes-components) (:diagram.node/type n))) (vals nodes))
+                            ;; the order in which we render the nodes matters since nodes rendered after
+                            ;; ocludes nodes rendered first
+                            svg-nodes (->> (vals nodes)
+                                           (filter (fn [n] (contains? (svg-nodes-components) (:diagram.node/type n))))
+                                           (sort-by :diagram.node/type svg-nodes-comparator))]
                         [:div.diagram-layer {:style {:overflow :hidden}
                                                :on-mouse-down (fn [evt]
                                                                 (.stopPropagation evt)

src/cljs/clograms/ui/components/nodes.cljs

@@ -225,19 +225,6 @@
   [(menues/remove-node-ctx-menu-option node)
    (menues/edit-node-label-ctx-menu-option node)])
 
-(defn circle-node-component [node]
-  (let [cx (quot (:w node) 2)
-        cy (quot (:h node) 2)]
-    [shape-wrapper
-     {:ctx-menu (shape-menu node)
-      :child [:g.circle-shape.custom-node
-              [:circle {:cx cx
-                        :cy cy
-                        :r (quot (max (:w node) (:h node)) 2)}]
-              [:text {:x cx :y cy
-                      :text-anchor :middle}
-               (-> node :extra-data :label)]]}]))
-
 (defn rectangle-node-component [node]
   [shape-wrapper
    {:ctx-menu (shape-menu node)
@@ -247,7 +234,7 @@
                     :text-anchor :middle}
              (-> node :extra-data :label)]]}])
 
-(defn group-node-component [node]
+(defn group-node-component [node _]
   [shape-wrapper
    {:ctx-menu (shape-menu node)
     :child
@@ -258,23 +245,13 @@
      [:text {:x 5 :y 20}
       (or (-> node :extra-data :label) "<group title>") ]]}])
 
-
-(defn user-node-component [node]
-  (let [draw-height 350
-        draw-width 266
-        scale (/ (:h node) draw-height)]
-    [shape-wrapper
-     {:ctx-menu (shape-menu node)
-      :child
-      [:g.user-shape.custom-node
-       [:g {:transform (gstring/format "translate(0,0) scale(%f)" scale)}
-        [:path {:d "M175,171.173c38.914,0,70.463-38.318,70.463-85.586C245.463,38.318,235.105,0,175,0s-70.465,38.318-70.465,85.587 C104.535,132.855,136.084,171.173,175,171.173z"}]
-        [:path {:d "M41.909,301.853C41.897,298.971,41.885,301.041,41.909,301.853L41.909,301.853z"}]
-        [:path {:d "M308.085,304.104C308.123,303.315,308.098,298.63,308.085,304.104L308.085,304.104z"}]
-        [:path {:d "M307.935,298.397c-1.305-82.342-12.059-105.805-94.352-120.657c0,0-11.584,14.761-38.584,14.761
-        s-38.586-14.761-38.586-14.761c-81.395,14.69-92.803,37.805-94.303,117.982c-0.123,6.547-0.18,6.891-0.202,6.131
-        c0.005,1.424,0.011,4.058,0.011,8.651c0,0,19.592,39.496,133.08,39.496c113.486,0,133.08-39.496,133.08-39.496
-        c0-2.951,0.002-5.003,0.005-6.399C308.062,304.575,308.018,303.664,307.935,298.397z"}]]
-       [:text {:x (quot (:w node) 2) :y (:h node)
-                    :text-anchor :middle}
-        (-> node :extra-data :label)]]}]))
+(defn svg-node-component [node svg-url]
+  [shape-wrapper
+   {:ctx-menu (shape-menu node)
+    :child
+    [:g.custom-svg-node
+     [:image {:width (:w node) :height (:h node) :href svg-url}]
+     [:text {:x (quot (:w node) 2) :y (quot (:h node) 2)
+             :text-anchor :middle
+             :fill "white"}
+      (-> node :extra-data :label)]]}])

src/cljs/clograms/ui/components/toolbars.cljs

@@ -196,18 +196,12 @@
                                                             :w 80
                                                             :h 80})))})]
     [:div
-     [:div.draggable-shape (drag-map :clograms/rectangle-node)
-      [:svg {:width 30 :height 30}
-       (nodes/rectangle-node-component {:w 30 :h 30 :extra-data {:label ""}})]]
-     [:div.draggable-shape (drag-map :clograms/circle-node)
-      [:svg {:width 30 :height 30}
-       (nodes/circle-node-component {:w 30 :h 30 :extra-data {:label ""}})]]
-     [:div.draggable-shape (drag-map :clograms/group-node)
-      [:svg {:width 30 :height 30}
-       (nodes/group-node-component {:w 30 :h 30 :extra-data {:label ""}})]]
-     [:div.draggable-shape (drag-map :clograms/user-node)
-      [:svg {:width 30 :height 30}
-       (nodes/user-node-component {:w 30 :h 30 :extra-data {:label ""}})]]]))
+     (for [[k c] (rg/svg-nodes-components)]
+       ^{:key (str k)}
+       [:div.draggable-shape (drag-map k)
+        [:svg {:width 30 :height 30}
+         ((:comp c) {:w 30 :h 30 :extra-data {:label ""}}
+          (:svg-url c))]])]))
 
 (defn side-bar []
   (let [namespace-node (fn [n]