Fix image loading on view app.

And add cosmetic improvements to the
main image shape component.

frontend/src/uxbox/main/ui/shapes/image.cljs

@@ -27,20 +27,18 @@
 
 (declare image-shape)
 
-(defn- will-mount
-  [own]
-  (let [{:keys [image]} (first (:rum/args own))]
-    (st/emit! (udi/fetch-image image))
-    own))
-
 (mx/defcs image-component
   {:mixins [mx/static mx/reactive]
-   :will-mount will-mount}
+   :will-mount (fn [own]
+                 ;; TODO: maybe do it conditionally
+                 ;; (only fetch when it's not fetched)
+                 (when-let [id (-> own :rum/args first :image)]
+                   (st/emit! (udi/fetch-image id)))
+                 own)}
   [own {:keys [id image] :as shape}]
   (let [selected (mx/react common/selected-ref)
         image (mx/react (image-ref image))
         selected? (contains? selected id)
-        local (:rum/local own)
         on-mouse-down #(common/on-mouse-down % shape selected)]
     (when image
       [:g.shape {:class (when selected? "selected")

frontend/src/uxbox/view/data/viewer.cljs

@@ -98,4 +98,36 @@
   {:pre [(keyword? key)]}
   (ToggleFlag. key))
 
+;; --- Fetch Image
 
+(declare image-fetched)
+
+(defrecord FetchImage [id]
+  ptk/WatchEvent
+  (watch [_ state stream]
+    (let [existing (get-in state [:images id])]
+      (if existing
+        (rx/empty)
+        (->> (rp/req :fetch/image {:id id})
+             (rx/map :payload)
+             (rx/map image-fetched))))))
+
+(defn fetch-image
+  "Conditionally fetch image by its id. If image
+  is already loaded, this event is noop."
+  [id]
+  {:pre [(uuid? id)]}
+  (FetchImage. id))
+
+;; --- Image Fetched
+
+(defrecord ImageFetched [image]
+  ptk/UpdateEvent
+  (update [_ state]
+    (let [id (:id image)]
+      (update state :images assoc id image))))
+
+(defn image-fetched
+  [image]
+  {:pre [(map? image)]}
+  (ImageFetched. image))

frontend/src/uxbox/view/ui/viewer/shapes.cljs

@@ -7,18 +7,19 @@
 (ns uxbox.view.ui.viewer.shapes
   (:require [goog.events :as events]
             [lentes.core :as l]
-            [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.view.store :as st]
-            [uxbox.main.geom :as geom]
-            [uxbox.main.ui.shapes.rect :refer (rect-shape)]
-            [uxbox.main.ui.shapes.icon :refer (icon-shape)]
-            [uxbox.main.ui.shapes.text :refer (text-shape)]
-            [uxbox.main.ui.shapes.group :refer (group-shape)]
-            [uxbox.main.ui.shapes.path :refer (path-shape)]
-            [uxbox.main.ui.shapes.circle :refer (circle-shape)]
-            [uxbox.main.ui.shapes.image :refer (image-shape)]
             [uxbox.builtins.icons :as i]
-            [uxbox.view.ui.viewer.interactions :as itx])
+            [uxbox.view.store :as st]
+            [uxbox.view.data.viewer :as udv]
+            [uxbox.view.ui.viewer.interactions :as itx]
+            [uxbox.main.geom :as geom]
+            [uxbox.main.ui.shapes.rect :refer [rect-shape]]
+            [uxbox.main.ui.shapes.icon :refer [icon-shape]]
+            [uxbox.main.ui.shapes.text :refer [text-shape]]
+            [uxbox.main.ui.shapes.group :refer [group-shape]]
+            [uxbox.main.ui.shapes.path :refer [path-shape]]
+            [uxbox.main.ui.shapes.circle :refer [circle-shape]]
+            [uxbox.main.ui.shapes.image :refer [image-shape image-ref]]
+            [uxbox.util.mixins :as mx :include-macros true])
   (:import goog.events.EventType))
 
 (def itx-flag-ref
@@ -63,6 +64,21 @@
                  :cy (:y1 rect)
                  :r 5}])]))
 
+;; --- Image Shape Wrapper
+;;
+;; NOTE: This wrapper is needed for preload the referenced
+;; image object which is need for properly show the shape.
+
+(mx/defc image-shape-wrapper
+  {:mixins [mx/static mx/reactive]
+   :will-mount (fn [own]
+                 (when-let [image-id (-> own :rum/args first :image)]
+                   (st/emit! (udv/fetch-image image-id)))
+                 own)}
+  [{:keys [image] :as item}]
+  (when-let [image (mx/react (image-ref image))]
+    (image-shape (assoc item :image image))))
+
 ;; --- Shapes
 
 (declare shape)
@@ -71,7 +87,7 @@
   [{:keys [type] :as item}]
   (case type
     :group (group-shape item shape)
-    :image (image-shape item)
+    :image (image-shape-wrapper item)
     :text (text-shape item)
     :icon (icon-shape item)
     :rect (rect-shape item)