🎉 Support for images as fills

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -6,8 +6,11 @@
 
 (ns app.main.ui.components.color-bullet
   (:require
+   [app.config :as cfg]
    [app.util.color :as uc]
    [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (mf/defc color-bullet
@@ -31,8 +34,15 @@
                                  :is-gradient (some? (:gradient color)))
           :on-click on-click
           :title (uc/get-color-name color)}
-         (if  (:gradient color)
+         (cond
+           (:gradient color)
            [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
+           
+           (:image color)
+           (let [uri (cfg/resolve-file-media (:image color))]
+             [:div.color-bullet-wrapper {:style {:background-size "contain" :background-image (str/ffmt "url(%)" uri)}}])
+           
+           :else
            [:div.color-bullet-wrapper
             [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
             [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
@@ -40,10 +50,12 @@
 (mf/defc color-name
   {::mf/wrap-props false}
   [{:keys [color size on-click on-double-click]}]
-  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
+  (let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (= size :big))
       [:span.color-text
        {:on-click on-click
         :on-double-click on-double-click
         :title name}
-       (or name color (uc/gradient-type->string (:type gradient)))])))
+       (if (some? image)
+         (tr "media.image")
+         (or name color (uc/gradient-type->string (:type gradient))))])))

frontend/src/app/main/ui/components/color_bullet_new.cljs

@@ -7,7 +7,10 @@
 (ns app.main.ui.components.color-bullet-new
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.config :as cfg]
    [app.util.color :as uc]
+   [app.util.i18n :as i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (mf/defc color-bullet
@@ -26,7 +29,8 @@
       (let [color    (if (string? color) {:color color :opacity 1} color)
             id       (:id color)
             gradient (:gradient color)
-            opacity  (:opacity color)]
+            opacity  (:opacity color)
+            image    (:image color)]
         [:div
          {:class (stl/css-case
                   :color-bullet true
@@ -38,21 +42,27 @@
                   :grid-area area)
           :on-click on-click}
 
-         (if (some? gradient)
+         (cond
+           (some? gradient)
            [:div {:class (stl/css :color-bullet-wrapper)
                   :style {:background (uc/color->background color)}}]
 
+           (some? image)
+           (let [uri (cfg/resolve-file-media image)]
+             [:div {:class (stl/css :color-bullet-wrapper)
+                    :style {:background-image (str/ffmt "url(%)" uri)}}])
+
+           :else
            [:div {:class (stl/css :color-bullet-wrapper)}
             [:div {:class (stl/css :color-bullet-left)
                    :style {:background (uc/color->background (assoc color :opacity 1))}}]
             [:div {:class (stl/css :color-bullet-right)
                    :style {:background (uc/color->background color)}}]])]))))
 
-
 (mf/defc color-name
   {::mf/wrap-props false}
   [{:keys [color size on-click on-double-click]}]
-  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
+  (let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (> size 64))
       [:span {:class (stl/css-case
                       :color-text (< size 72)
@@ -60,4 +70,6 @@
                       :big-text   (>= size 72))
               :on-click on-click
               :on-double-click on-double-click}
-       (or name color (uc/gradient-type->string (:type gradient)))])))
+       (if (some? image)
+         (tr "media.image")
+         (or name color (uc/gradient-type->string (:type gradient))))])))

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -55,6 +55,9 @@
     height: 100%;
     width: 100%;
     clip-path: circle(50%);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
   }
   .color-bullet-wrapper > * {
     width: 100%;

frontend/src/app/main/ui/components/shape_icon.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.components.shape-icon
   (:require
    [app.common.types.component :as ctk]
+   [app.common.types.shape :as cts]
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
@@ -32,10 +33,10 @@
                :else
                i/artboard)
       :image i/image
-      :line i/line
-      :circle i/circle
-      :path i/curve
-      :rect i/box
+      :line (if (cts/has-images? shape) i/image i/line)
+      :circle (if (cts/has-images? shape) i/image i/circle)
+      :path (if (cts/has-images? shape) i/image i/curve)
+      :rect (if (cts/has-images? shape) i/image i/box)
       :text i/text
       :group (if (:masked-group shape)
                i/mask
@@ -47,39 +48,3 @@
               #_:default    i/bool-union)
       :svg-raw i/file-svg
       nil)))
-
-(mf/defc element-icon-refactor
-  [{:keys [shape main-instance?] :as props}]
-  (if (ctk/instance-head? shape)
-    (if main-instance?
-      i/component-refactor
-      i/copy-refactor)
-    (case (:type shape)
-      :frame (cond
-               (and (ctl/flex-layout? shape) (ctl/col? shape))
-               i/flex-vertical-refactor
-
-               (and (ctl/flex-layout? shape) (ctl/row? shape))
-               i/flex-horizontal-refactor
-
-               (ctl/grid-layout? shape)
-               i/grid-refactor
-
-               :else
-               i/board-refactor)
-      :image i/img-refactor
-      :line i/path-refactor
-      :circle i/elipse-refactor
-      :path i/curve-refactor
-      :rect i/rectangle-refactor
-      :text i/text-refactor
-      :group (if (:masked-group shape)
-               i/mask-refactor
-               i/group-refactor)
-      :bool (case (:bool-type shape)
-              :difference   i/boolean-difference-refactor
-              :exclude      i/boolean-exclude-refactor
-              :intersection i/boolean-intersection-refactor
-              #_:default    i/boolean-union-refactor)
-      :svg-raw i/svg-refactor
-      nil)))

frontend/src/app/main/ui/components/shape_icon_refactor.cljs

@@ -7,11 +7,11 @@
 (ns app.main.ui.components.shape-icon-refactor
   (:require
    [app.common.types.component :as ctk]
+   [app.common.types.shape :as cts]
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
 
-
 (mf/defc element-icon-refactor
   {::mf/wrap-props false}
   [{:keys [shape main-instance?]}]
@@ -33,10 +33,10 @@
                i/board-refactor)
       ;; TODO -> THUMBNAIL ICON
       :image i/img-refactor
-      :line i/path-refactor
-      :circle i/elipse-refactor
-      :path i/path-refactor
-      :rect i/rectangle-refactor
+      :line (if (cts/has-images? shape) i/img-refactor i/path-refactor)
+      :circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor)
+      :path (if (cts/has-images? shape) i/img-refactor i/curve-refactor)
+      :rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor)
       :text i/text-refactor
       :group (if (:masked-group shape)
                i/mask-refactor