diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 286e7eac1..65d86d8a7 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -14,14 +14,14 @@ } }, "auth.create-demo-profile" : { - "used-in" : [ "src/uxbox/main/ui/auth/register.cljs:116", "src/uxbox/main/ui/auth/login.cljs:115" ], + "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:115", "src/uxbox/main/ui/auth/register.cljs:116" ], "translations" : { "en" : "Create demo account", "fr" : null } }, "auth.create-demo-profile-label" : { - "used-in" : [ "src/uxbox/main/ui/auth/register.cljs:113", "src/uxbox/main/ui/auth/login.cljs:112" ], + "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:112", "src/uxbox/main/ui/auth/register.cljs:113" ], "translations" : { "en" : "Just wanna try it?" } @@ -33,7 +33,7 @@ } }, "auth.email-label" : { - "used-in" : [ "src/uxbox/main/ui/auth/register.cljs:82", "src/uxbox/main/ui/auth/recovery_request.cljs:45", "src/uxbox/main/ui/auth/login.cljs:73" ], + "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:73", "src/uxbox/main/ui/auth/recovery_request.cljs:45", "src/uxbox/main/ui/auth/register.cljs:82" ], "translations" : { "en" : "Email", "fr" : "adresse email" @@ -119,7 +119,7 @@ } }, "auth.password-label" : { - "used-in" : [ "src/uxbox/main/ui/auth/register.cljs:86", "src/uxbox/main/ui/auth/login.cljs:79" ], + "used-in" : [ "src/uxbox/main/ui/auth/login.cljs:79", "src/uxbox/main/ui/auth/register.cljs:86" ], "translations" : { "en" : "Password", "fr" : "Mot de passe" @@ -343,7 +343,7 @@ } }, "dashboard.sidebar.drafts" : { - "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:111" ], + "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:112" ], "translations" : { "en" : "Drafts" } @@ -355,7 +355,7 @@ } }, "dashboard.sidebar.recent" : { - "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:104" ], + "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:105" ], "translations" : { "en" : "Recent" } @@ -456,7 +456,7 @@ } }, "ds.search.placeholder" : { - "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:168" ], + "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:171" ], "translations" : { "en" : "Search...", "fr" : "Rechercher..." @@ -533,32 +533,32 @@ } }, "errors.email-already-exists" : { - "used-in" : [ "src/uxbox/main/ui/auth.cljs:87", "src/uxbox/main/ui/settings/change_email.cljs:38" ], + "used-in" : [ "src/uxbox/main/ui/settings/change_email.cljs:38", "src/uxbox/main/ui/auth.cljs:87" ], "translations" : { "en" : "Email already used" } }, "errors.generic" : { - "used-in" : [ "src/uxbox/main/ui.cljs:184", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui/settings/profile.cljs:37" ], + "used-in" : [ "src/uxbox/main/ui/settings/profile.cljs:37", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui.cljs:190" ], "translations" : { "en" : "Something wrong has happened.", "fr" : "Quelque chose c'est mal passé." } }, "errors.image-format-unsupported" : { - "used-in" : [ "src/uxbox/main/data/images.cljs:375", "src/uxbox/main/data/workspace/persistence.cljs:318" ], + "used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:317", "src/uxbox/main/data/images.cljs:375" ], "translations" : { "en" : "The image format is not supported (must be svg, jpg or png)." } }, "errors.image-too-large" : { - "used-in" : [ "src/uxbox/main/data/images.cljs:373", "src/uxbox/main/data/workspace/persistence.cljs:316" ], + "used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:315", "src/uxbox/main/data/images.cljs:373" ], "translations" : { "en" : "The image is too large to be inserted (must be under 5mb)." } }, "errors.network" : { - "used-in" : [ "src/uxbox/main/ui.cljs:178" ], + "used-in" : [ "src/uxbox/main/ui.cljs:184" ], "translations" : { "en" : "Unable to connect to backend server.", "fr" : "Impossible de se connecter au serveur principal." @@ -585,7 +585,7 @@ } }, "errors.unexpected-error" : { - "used-in" : [ "src/uxbox/main/data/images.cljs:384", "src/uxbox/main/data/workspace/persistence.cljs:327", "src/uxbox/main/ui/auth/register.cljs:54", "src/uxbox/main/ui/settings/change_email.cljs:42" ], + "used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:326", "src/uxbox/main/data/images.cljs:384", "src/uxbox/main/ui/settings/change_email.cljs:42", "src/uxbox/main/ui/auth/register.cljs:54" ], "translations" : { "en" : "An unexpected error occurred.", "fr" : "Une erreur inattendue c'est produite" @@ -626,7 +626,7 @@ "unused" : true }, "image.loading" : { - "used-in" : [ "src/uxbox/main/data/images.cljs:392", "src/uxbox/main/data/workspace/persistence.cljs:335" ], + "used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:334", "src/uxbox/main/data/images.cljs:392" ], "translations" : { "en" : "Loading image..." } @@ -861,7 +861,7 @@ } }, "settings.profile-submit-label" : { - "used-in" : [ "src/uxbox/main/ui/settings/password.cljs:94", "src/uxbox/main/ui/settings/options.cljs:65", "src/uxbox/main/ui/settings/profile.cljs:89" ], + "used-in" : [ "src/uxbox/main/ui/settings/options.cljs:65", "src/uxbox/main/ui/settings/password.cljs:94", "src/uxbox/main/ui/settings/profile.cljs:89" ], "translations" : { "en" : "Update settings", "fr" : "Mettre à jour les paramètres" @@ -1140,41 +1140,47 @@ } }, "workspace.library.all" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:121" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:123" ], "translations" : { "en" : "All libraries" } }, "workspace.library.icons" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:171" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:173" ], "translations" : { "en" : "Icons" } }, "workspace.library.images" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:176" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:178" ], "translations" : { "en" : "Images" } }, "workspace.library.libraries" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:153" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:155" ], "translations" : { "en" : "Libraries" } }, "workspace.library.own" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:122" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:124" ], "translations" : { "en" : "My libraries" } }, "workspace.library.store" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:123" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:125" ], "translations" : { "en" : "Store libraries" } }, + "workspace.options.canvas_background" : { + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/page.cljs:39" ], + "translations" : { + "en" : "Canvas background" + } + }, "workspace.options.color" : { "translations" : { "en" : "Color", @@ -1189,7 +1195,7 @@ } }, "workspace.options.fill" : { - "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383" ], + "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383", "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41" ], "translations" : { "en" : "Fill", "fr" : "Fond" @@ -1644,21 +1650,21 @@ } }, "workspace.toolbar.circle" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:63" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:64" ], "translations" : { "en" : "Circle (E)", "fr" : "Cercle (E)" } }, "workspace.toolbar.color-palette" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:107" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:108" ], "translations" : { "en" : "Color Palette (---)", "fr" : "Palette de couleurs (---)" } }, "workspace.toolbar.curve" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:82" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:83" ], "translations" : { "en" : "Curve", "fr" : "Courbe" @@ -1672,7 +1678,7 @@ "unused" : true }, "workspace.toolbar.frame" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:53" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:54" ], "translations" : { "en" : "Artboard (A)", "fr" : null @@ -1693,20 +1699,20 @@ "unused" : true }, "workspace.toolbar.image" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:73" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:74" ], "translations" : { "en" : "Image (Ctrl + I)", "fr" : "Image (Ctrl + I)" } }, "workspace.toolbar.libraries" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:99" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:100" ], "translations" : { "en" : "Libraries (Ctrl + Shift + L)" } }, "workspace.toolbar.path" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:87" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:88" ], "translations" : { "en" : "Path", "fr" : "Chemin" @@ -1720,7 +1726,7 @@ "unused" : true }, "workspace.toolbar.rect" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:58" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:59" ], "translations" : { "en" : "Box (B)", "fr" : "Boîte (B)" @@ -1734,14 +1740,14 @@ "unused" : true }, "workspace.toolbar.text" : { - "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:68" ], + "used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:69" ], "translations" : { "en" : "Text (T)", "fr" : "Texte (T)" } }, "workspace.viewport.click-to-close-path" : { - "used-in" : [ "src/uxbox/main/ui/workspace/drawarea.cljs:373" ], + "used-in" : [ "src/uxbox/main/ui/workspace/drawarea.cljs:54" ], "translations" : { "en" : "Click to close the path" } diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 2618c3fad..63f4a0b0a 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -225,11 +225,4 @@ input { margin-bottom: auto; } - - & > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) { - width: 25px !important; - height: 25px !important; - border-radius: 20px !important; - margin: 0 !important; - } } diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 39751a6be..52498c17b 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -158,10 +158,6 @@ .empty-rule-square { grid-column: 1 / span 1; grid-row: 1 / span 1; - background-color: $color-canvas; - z-index: 13; - border-right: 1px solid $color-gray-30; - border-bottom: 1px solid $color-gray-30; } .horizontal-rule { diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 70beb5c54..31a4b0fb5 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -1329,6 +1329,26 @@ (rx/of (update-shape shape-id {:interactions []})))))))) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; CANVAS OPTIONS +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn change-canvas-color + [color] + (ptk/reify ::change-canvas-color + ptk/WatchEvent + (watch [_ state stream] + (let [pid (get state :current-page-id) + current-color (get-in state [:workspace-data pid :options :background])] + (rx/of (dwc/commit-changes + [{:type :set-option + :option :background + :value color}] + [{:type :set-option + :option :background + :value current-color}] + {:commit-local? true})))))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Exports ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index 67e3036c4..b5eb81780 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -26,15 +26,16 @@ [uxbox.main.ui.shapes.text :as text] [uxbox.main.ui.shapes.group :as group])) -(def ^:private background-color "#E8E9EA") ;; $color-canvas +(def ^:private default-color "#E8E9EA") ;; $color-canvas (mf/defc background - [] + [{:keys [vbox color]}] [:rect - {:x 0 :y 0 - :width "100%" - :height "100%" - :fill background-color}]) + {:x (:x vbox) + :y (:y vbox) + :width (:width vbox) + :height (:height vbox) + :fill color}]) (defn- calculate-dimensions [{:keys [objects] :as data} vport] @@ -100,7 +101,7 @@ (:y dim 0) " " (:width dim 100) " " (:height dim 100)) - + background-color (get-in data [:options :background] default-color) frame-wrapper (mf/use-memo (mf/deps objects) @@ -114,7 +115,7 @@ :version "1.1" :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns "http://www.w3.org/2000/svg"} - [:& background] + [:& background {:vbox dim :color background-color}] (for [item shapes] (if (= (:type item) :frame) [:& frame-wrapper {:shape item diff --git a/frontend/src/uxbox/main/ui/colorpicker.cljs b/frontend/src/uxbox/main/ui/colorpicker.cljs index d94ab358e..55c754df9 100644 --- a/frontend/src/uxbox/main/ui/colorpicker.cljs +++ b/frontend/src/uxbox/main/ui/colorpicker.cljs @@ -14,7 +14,7 @@ ["react-color/lib/components/chrome/Chrome" :as pickerskin])) (mf/defc colorpicker - [{:keys [on-change value opacity colors] :as props}] + [{:keys [on-change value opacity colors disable-opacity] :as props}] (let [hex-value (mf/use-state (or value "#FFFFFF")) alpha-value (mf/use-state (or opacity 1)) [r g b] (hex->rgb @hex-value) @@ -25,9 +25,10 @@ (on-change hex opacity))] [:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value} - :presetColors colors - :onChange on-change-complete - :style {:box-shadow "none"}}])) + :presetColors colors + :onChange on-change-complete + :disableAlpha disable-opacity + :style {:box-shadow "none"}}])) (def most-used-colors (letfn [(selector [{:keys [objects]}] diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs index 78e01a962..8b18ada61 100644 --- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/grid.cljs @@ -34,7 +34,8 @@ (run! fonts/ensure-loaded! fonts) (when-let [node (mf/ref-val container)] (set! (.-innerHTML ^js node) svg))))))) - [:div.grid-item-th {:ref container}])) + [:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])} + :ref container}])) ;; --- Grid Item diff --git a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs index bc0dbba1f..da00f9235 100644 --- a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs @@ -14,13 +14,14 @@ ;; --- Color Picker Modal (mf/defc colorpicker-modal - [{:keys [x y default value opacity page on-change] :as props}] + [{:keys [x y default value opacity page on-change disable-opacity] :as props}] [:div.colorpicker-tooltip {:style {:left (str (- x 260) "px") :top (str (- y 50) "px")}} [:& cp/colorpicker {:value (or value default) :opacity (or opacity 1) :colors (into-array @cp/most-used-colors) - :on-change on-change}]]) + :on-change on-change + :disable-opacity disable-opacity}]]) diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs index 9d2a7f63b..160ef7bf8 100644 --- a/frontend/src/uxbox/main/ui/workspace/rules.cljs +++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs @@ -37,14 +37,10 @@ minv (mth/round start) maxv (mth/round (+ start (/ size zoom))) step (calculate-step-size zoom)] - (obj/set! dctx "fillStyle" "#E8E9EA") + (if (= type :horizontal) - (do - (.fillRect dctx 0 0 size 20) - (.translate dctx txfm 0)) - (do - (.fillRect dctx 0 0 20 size) - (.translate dctx 0 txfm))) + (.translate dctx txfm 0) + (.translate dctx 0 txfm)) (obj/set! dctx "font" "12px sourcesanspro") (obj/set! dctx "fillStyle" "#7B7D85") diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs index 98b3c2252..46cebb712 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs @@ -12,12 +12,33 @@ (:require [rumext.alpha :as mf] [okulary.core :as l] - [uxbox.main.refs :as refs])) + [uxbox.main.refs :as refs] + [uxbox.main.store :as st] + [uxbox.main.data.workspace :as dw] + [uxbox.util.i18n :as i18n :refer [t]] + [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]])) (def options-iref (l/derived :options refs/workspace-data)) -(mf/defc options - ;; TODO: Define properties for page - [{:keys [page] :as props}]) +(defn use-change-color [page] + (mf/use-callback + (mf/deps page) + (fn [value] + (st/emit! (dw/change-canvas-color value))))) + +(mf/defc options + [{:keys [page] :as props}] + + (let [locale (i18n/use-locale) + options (mf/deref refs/workspace-page-options) + handle-change-color (use-change-color page)] + [:div.element-set + [:div.element-set-title (t locale "workspace.options.canvas_background")] + [:div.element-set-content + [:& color-row {:disable-opacity true + :value {:value (get options :background "#E8E9EA") + :opacity 1} + :on-change handle-change-color}]]]) + ) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs index 6bf7aee51..ca6df4003 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -16,7 +16,7 @@ [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]] [uxbox.common.data :as d])) -(defn color-picker-callback [color handle-change-color] +(defn color-picker-callback [color handle-change-color disable-opacity] (fn [event] (let [x (.-clientX event) y (.-clientY event) @@ -25,7 +25,8 @@ :on-change handle-change-color :value (:value color) :opacity (:opacity color) - :transparent? true}] + :transparent? true + :disable-opacity disable-opacity}] (modal/show! colorpicker-modal props)))) (defn opacity->string [opacity] @@ -42,7 +43,7 @@ (d/parse-integer 1) (/ 100)))) -(mf/defc color-row [{:keys [value on-change]}] +(mf/defc color-row [{:keys [value on-change disable-opacity]}] (let [default-value {:value "#000000" :opacity 1} parse-value (fn [value] @@ -85,19 +86,20 @@ [:div.row-flex.color-data [:span.color-th {:style {:background-color (-> @state :value)} - :on-click (color-picker-callback @state handle-pick-color)}] + :on-click (color-picker-callback @state handle-pick-color disable-opacity)}] [:div.color-info [:input {:value (-> @state :value (subs 1)) :pattern "^[0-9a-fA-F]{0,6}$" :on-change handle-input-color-change}]] - [:div.input-element.percentail - [:input.input-text {:type "number" - :value (-> @state :opacity opacity->string) - :on-change handle-opacity-change - :min "0" - :max "100"}]] + (when (not disable-opacity) + [:div.input-element.percentail + [:input.input-text {:type "number" + :value (-> @state :opacity opacity->string) + :on-change handle-opacity-change + :min "0" + :max "100"}]]) #_[:input.slidebar {:type "range" :min "0" diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index b54b233d6..0924a267f 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -377,6 +377,7 @@ (events/unlistenByKey key5) ))) + options (mf/deref refs/workspace-page-options) ] (mf/use-effect on-mount) @@ -399,7 +400,8 @@ (= drawing-tool :path) cur/pen (= drawing-tool :curve)cur/pencil drawing-tool cur/create-shape - :else cur/pointer-inner)} + :else cur/pointer-inner) + :background-color (get options :background "#E8E9EA")} :on-context-menu on-context-menu :on-click on-click :on-double-click on-double-click @@ -410,6 +412,7 @@ :on-drag-enter on-drag-enter :on-drag-over on-drag-over :on-drop on-drop} + [:g [:& frames {:key (:id page)}]