🐛 Fix several questions about frame background export

common/src/app/common/pages/common.cljc

@@ -20,7 +20,7 @@
    :fill-color-gradient   :fill-group
    :fill-color-ref-file   :fill-group
    :fill-color-ref-id     :fill-group
-   :show-fill-on-export?  :fill-group
+   :hide-fill-on-export   :fill-group
    :content               :content-group
    :hidden                :visibility-group
    :blocked               :modifiable-group

common/src/app/common/pages/init.cljc

@@ -36,7 +36,7 @@
    :fill-color clr/white
    :fill-opacity 1
    :shapes []
-   :show-fill-on-export? true})
+   :hide-fill-on-export false})
 
 (def ^:private minimal-shapes
   [{:type :rect

common/src/app/common/pages/spec.cljc

@@ -180,6 +180,7 @@
 (s/def :internal.shape/fill-color-gradient (s/nilable ::gradient))
 (s/def :internal.shape/fill-color-ref-file (s/nilable uuid?))
 (s/def :internal.shape/fill-color-ref-id (s/nilable uuid?))
+(s/def :internal.shape/hide-fill-on-export boolean?)
 
 (s/def :internal.shape/font-family string?)
 (s/def :internal.shape/font-size ::us/safe-integer)
@@ -286,6 +287,7 @@
                    :internal.shape/fill-color-gradient
                    :internal.shape/fill-color-ref-file
                    :internal.shape/fill-color-ref-id
+                   :internal.shape/hide-fill-on-export ;; only for frames
                    :internal.shape/font-family
                    :internal.shape/font-size
                    :internal.shape/font-style

frontend/resources/styles/common/framework.scss

@@ -724,6 +724,15 @@ input[type="radio"]:checked + label:before {
     }
   }
 
+  input[type="checkbox"][indeterminate] {
+    & + label {
+      &::after {
+        content: "?";
+        left: 4px;
+      }
+    }
+  }
+
   &.right {
     label {
       margin-right: 35px;

frontend/src/app/main/data/workspace/colors.cljs

@@ -148,17 +148,20 @@
          (rx/from (map #(dwt/update-text-attrs {:id % :attrs attrs}) text-ids))
          (rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs)))))))))
 
-(defn change-show-fill-on-export
+(defn change-hide-fill-on-export
-  [ids show-fill-on-export?]
+  [ids hide-fill-on-export]
-  (ptk/reify ::change-show-fill-on-export
+  (ptk/reify ::change-hide-fill-on-export
     ptk/WatchEvent
     (watch [_ state _]
       (let [page-id   (:current-page-id state)
             objects   (wsh/lookup-page-objects state page-id)
             is-text?  #(= :text (:type (get objects %)))
             shape-ids (filter (complement is-text?) ids)
-            attrs {:show-fill-on-export? show-fill-on-export?}]
+            attrs {:hide-fill-on-export hide-fill-on-export}]
-        (rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs))))))))
+        (rx/of (dch/update-shapes shape-ids (fn [shape]
+                                              (if (= (:type shape) :frame)
+                                                (d/merge shape attrs)
+                                                shape))))))))
 
 (defn change-stroke
   [ids color]

frontend/src/app/main/ui/render.cljs

@@ -69,8 +69,8 @@
         object   (get objects object-id)
 
         object (cond-> object
-                     (not (:show-fill-on-export? object))
+                 (:hide-fill-on-export object)
-                     (assoc :fill-color nil :fill-opacity 0))
+                 (assoc :fill-color nil :fill-opacity 0))
 
         {:keys [x y width height] :as bs} (calc-bounds object objects)
         [_ _ width height :as coords] (->> [x y width height] (map #(* % zoom)))

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

@@ -76,6 +76,7 @@
         (add! :type)
         (add! :stroke-style)
         (add! :stroke-alignment)
+        (add! :hide-fill-on-export)
         (add! :transform)
         (add! :transform-inverse)
         (add! :flip-x)

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -21,10 +21,11 @@
    :fill-opacity
    :fill-color-ref-id
    :fill-color-ref-file
-   :fill-color-gradient])
+   :fill-color-gradient
+   :hide-fill-on-export])
 
 (def fill-attrs-shape
-  (conj fill-attrs :show-fill-on-export?))
+  (conj fill-attrs :hide-fill-on-export))
 
 (mf/defc fill-menu
   {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]}
@@ -43,7 +44,9 @@
                :file-id (:fill-color-ref-file values)
                :gradient (:fill-color-gradient values)}
 
-        show-fill-on-export? (:show-fill-on-export? values true)
+        hide-fill-on-export? (:hide-fill-on-export values false)
+
+        checkbox-ref (mf/use-ref)
 
         on-add
         (mf/use-callback
@@ -80,7 +83,17 @@
          (mf/deps ids)
          (fn [event]
            (let [value (-> event dom/get-target dom/checked?)]
-             (st/emit! (dc/change-show-fill-on-export ids value)))))]
+             (st/emit! (dc/change-hide-fill-on-export ids (not value))))))]
+
+    (mf/use-layout-effect
+      (mf/deps hide-fill-on-export?)
+      #(let [checkbox (mf/ref-val checkbox-ref)]
+         (when checkbox
+           ;; Note that the "indeterminate" attribute only may be set by code, not as a static attribute.
+           ;; See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate
+           (if (= hide-fill-on-export? :multiple)
+             (dom/set-attribute checkbox "indeterminate" true)
+             (dom/remove-attribute checkbox "indeterminate")))))
 
     (if show?
       [:div.element-set
@@ -95,11 +108,13 @@
                        :on-change on-change
                        :on-detach on-detach}]
 
-        (when (contains? values :show-fill-on-export?)
+        (when (or (= type :frame)
+                  (and (= type :multiple) (some? hide-fill-on-export?)))
           [:div.input-checkbox
            [:input {:type "checkbox"
                     :id "show-fill-on-export"
-                    :checked show-fill-on-export?
+                    :ref checkbox-ref
+                    :checked (not hide-fill-on-export?)
                     :on-change on-change-show-fill-on-export}]
 
            [:label {:for "show-fill-on-export"}

frontend/src/app/util/import/parser.cljs

@@ -361,6 +361,7 @@
   [props node svg-data]
 
   (let [fill (:fill svg-data)
+        hide-fill-on-export (get-meta node :hide-fill-on-export str->bool)
         gradient (when (str/starts-with? fill "url")
                    (parse-gradient node fill))]
     (cond-> props
@@ -375,7 +376,10 @@
 
       (uc/hex? fill)
       (assoc :fill-color fill
-             :fill-opacity (-> svg-data (:fill-opacity "1") d/parse-double)))))
+             :fill-opacity (-> svg-data (:fill-opacity "1") d/parse-double))
+
+      (some? hide-fill-on-export)
+      (assoc :hide-fill-on-export hide-fill-on-export))))
 
 (defn add-stroke
   [props node svg-data]