✨ Transform simple shapes to path on double click

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -81,6 +81,10 @@
                      (contains? shape :fill-color)
                      {:fill (:fill-color shape)}
 
+                     (contains? shape :fill-image)
+                     (let [fill-image-id (str "fill-image-" render-id)]
+                       {:fill (str/format "url(#%s)" fill-image-id) })
+
                      ;; If contains svg-attrs the origin is svg. If it's not svg origin
                      ;; we setup the default fill as transparent (instead of black)
                      (and (not (contains? shape :svg-attrs))

frontend/src/app/main/ui/shapes/fill_image.cljs

@@ -0,0 +1,38 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.shapes.fill-image
+  (:require
+   [app.common.geom.shapes :as gsh]
+   [app.config :as cfg]
+   [app.util.object :as obj]
+   [rumext.alpha :as mf]
+   [app.common.geom.point :as gpt]
+   [app.main.ui.shapes.image :as image]))
+
+(mf/defc fill-image-pattern
+  {::mf/wrap-props false}
+  [props]
+
+  (let [shape     (obj/get props "shape")
+        render-id (obj/get props "render-id")]
+    (when (contains? shape :fill-image)
+      (let [{:keys [x y width height]} (:selrect shape)
+            fill-image-id (str "fill-image-" render-id)
+            media (:fill-image shape)
+            uri (image/use-image-uri media)
+            transform (gsh/transform-matrix shape)]
+
+        [:pattern {:id fill-image-id
+                   :patternUnits "userSpaceOnUse"
+                   :x x
+                   :y y
+                   :height height
+                   :width width
+                   :patternTransform transform}
+         [:image {:xlinkHref uri
+                  :width width
+                  :height height}]]))))

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

@@ -17,13 +17,10 @@
    [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
-(mf/defc image-shape
-  {::mf/wrap-props false}
-  [props]
-
-  (let [shape (unchecked-get props "shape")
-        {:keys [id x y width height rotation metadata]} shape
-        uri              (cfg/resolve-file-media metadata)
+(defn use-image-uri
+  [media]
+  (let [uri              (mf/use-memo (mf/deps (:id media))
+                                      #(cfg/resolve-file-media media))
         embed-resources? (mf/use-ctx muc/embed-ctx)
         data-uri         (mf/use-state (when (not embed-resources?) uri))]
 
@@ -38,6 +35,16 @@
               (rx/mapcat wapi/read-file-as-data-url)
               (rx/subs #(reset! data-uri  %))))))
 
+    (or @data-uri uri)))
+
+(mf/defc image-shape
+  {::mf/wrap-props false}
+  [props]
+
+  (let [shape (unchecked-get props "shape")
+        {:keys [id x y width height rotation metadata]} shape
+        uri (use-image-uri metadata)]
+
     (let [transform (geom/transform-matrix shape)
           props (-> (attrs/extract-style-attrs shape)
                     (obj/merge!
@@ -53,5 +60,5 @@
 
       [:> "image" (obj/merge!
                    props
-                   #js {:xlinkHref (or @data-uri uri)
+                   #js {:xlinkHref uri
                         :onDragStart on-drag-start})])))

frontend/src/app/main/ui/shapes/shape.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
+   [app.main.ui.shapes.fill-image :as fim]
    [app.main.ui.shapes.filters :as filters]
    [app.main.ui.shapes.gradients :as grad]
    [app.main.ui.shapes.svg-defs :as defs]
@@ -51,8 +52,9 @@
     [:& (mf/provider muc/render-ctx) {:value render-id}
      [:> wrapper-tag group-props
       [:defs
-       [:& defs/svg-defs   {:shape shape :render-id render-id}]
-       [:& filters/filters {:shape shape :filter-id filter-id}]
-       [:& grad/gradient   {:shape shape :attr :fill-color-gradient}]
-       [:& grad/gradient   {:shape shape :attr :stroke-color-gradient}]]
+       [:& defs/svg-defs          {:shape shape :render-id render-id}]
+       [:& filters/filters        {:shape shape :filter-id filter-id}]
+       [:& grad/gradient          {:shape shape :attr :fill-color-gradient}]
+       [:& grad/gradient          {:shape shape :attr :stroke-color-gradient}]
+       [:& fim/fill-image-pattern {:shape shape :render-id render-id}]]
       children]]))