diff --git a/backend/src/app/rpc/commands/profile.clj b/backend/src/app/rpc/commands/profile.clj index 5dfc56c523..c92a6c6c5b 100644 --- a/backend/src/app/rpc/commands/profile.clj +++ b/backend/src/app/rpc/commands/profile.clj @@ -75,7 +75,8 @@ [:workspace-visited {:optional true} ::sm/boolean] [:custom-shortcuts {:optional true} [:map-of {:gen/max 10} :keyword [:map-of :keyword :string]]] - [:nudge {:optional true} schema:nudge]]) + [:nudge {:optional true} schema:nudge] + [:stroke-per-side {:optional true} ::sm/boolean]]) (def schema:props-writeable "Props schema for user-writable fields (excludes system-managed keys)." diff --git a/common/src/app/common/render_wasm/api/props.cljs b/common/src/app/common/render_wasm/api/props.cljs index 816c154cab..c8f71571e5 100644 --- a/common/src/app/common/render_wasm/api/props.cljs +++ b/common/src/app/common/render_wasm/api/props.cljs @@ -85,13 +85,12 @@ ;; Per-side widths (rects/frames). Sides falling back to the ;; uniform width; skipped when all sides end up equal, so the ;; renderer keeps the uniform path (with dash/dot support). - (when (:stroke-per-side stroke) - (let [top (or (:stroke-width-top stroke) width) - right (or (:stroke-width-right stroke) width) - bottom (or (:stroke-width-bottom stroke) width) - left (or (:stroke-width-left stroke) width)] - (when-not (= top right bottom left) - (h/call wasm/internal-module "_set_shape_stroke_sides" top right bottom left)))) + (let [top (or (:stroke-width-top stroke) width) + right (or (:stroke-width-right stroke) width) + bottom (or (:stroke-width-bottom stroke) width) + left (or (:stroke-width-left stroke) width)] + (when-not (= top right bottom left) + (h/call wasm/internal-module "_set_shape_stroke_sides" top right bottom left))) (cond (some? gradient) diff --git a/common/src/app/common/render_wasm/api/upload.cljs b/common/src/app/common/render_wasm/api/upload.cljs index eb2e42f57c..f7a26712bc 100644 --- a/common/src/app/common/render_wasm/api/upload.cljs +++ b/common/src/app/common/render_wasm/api/upload.cljs @@ -248,12 +248,14 @@ cap-end (-> stroke :stroke-cap-end sr/translate-stroke-cap) dash (or (:stroke-dash stroke) -1) gap (or (:stroke-gap stroke) -1) - per-side? (boolean (:stroke-per-side stroke)) + top (or (:stroke-width-top stroke) width) right (or (:stroke-width-right stroke) width) bottom (or (:stroke-width-bottom stroke) width) left (or (:stroke-width-left stroke) width) - has-sides? (and per-side? (not= top right bottom left))] + + has-sides? (not= top right bottom left)] + (buf/write-f32 dview offset width) (buf/write-u8 dview (+ offset 4) style) (buf/write-u8 dview (+ offset 5) align) diff --git a/common/src/app/common/types/shape.cljc b/common/src/app/common/types/shape.cljc index 6a617c21cc..136010aa4e 100644 --- a/common/src/app/common/types/shape.cljc +++ b/common/src/app/common/types/shape.cljc @@ -139,8 +139,6 @@ [:stroke-style {:optional true} [::sm/one-of #{:solid :dotted :dashed :mixed}]] [:stroke-width {:optional true} ::sm/safe-number] - ;; wasm-render only, backwards compatible - [:stroke-per-side {:optional true} :boolean] [:stroke-width-top {:optional true} ::sm/safe-number] [:stroke-width-right {:optional true} ::sm/safe-number] [:stroke-width-bottom {:optional true} ::sm/safe-number] diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 433d9fea6f..35d5c5ba06 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -335,7 +335,6 @@ :stroke-width :stroke-dash :stroke-gap - :stroke-per-side :stroke-width-top :stroke-width-right :stroke-width-bottom diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 6bdc399d82..ef8b1492c3 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -36,6 +36,9 @@ (def custom-shortcuts (l/derived (fn [state] (get-in state [:profile :props :custom-shortcuts])) st/state)) +(def stroke-per-side + (l/derived (fn [state] (get-in state [:profile :props :stroke-per-side])) st/state)) + (def current-page-id (l/derived (l/key :current-page-id) st/state)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 1bd5bd2270..5547130ad5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -148,29 +148,6 @@ per-side-disabled? (not wasm-render?) - on-stroke-per-side-toggle - (fn [index] - (let [stroke (get-in values [:strokes index]) - active? (:stroke-per-side stroke) - width (:stroke-width stroke) - width (if (number? width) width 1)] - (st/emit! (udw/trigger-bounding-box-cloaking ids)) - (if active? - (st/emit! (dc/change-stroke-attrs ids {:stroke-per-side false} index)) - ;; Entering per-side mode seeds any missing side from the - ;; uniform width, so previous per-side edits are preserved. - ;; The top value doubles as the global :stroke-width. - (let [top (d/nilv (:stroke-width-top stroke) width)] - (st/emit! (dc/change-stroke-attrs - ids - {:stroke-per-side true - :stroke-width top - :stroke-width-top top - :stroke-width-right (d/nilv (:stroke-width-right stroke) width) - :stroke-width-bottom (d/nilv (:stroke-width-bottom stroke) width) - :stroke-width-left (d/nilv (:stroke-width-left stroke) width)} - index)))))) - on-stroke-width-side-change (fn [index attr value] (when (number? value) @@ -288,7 +265,6 @@ :on-stroke-width-change on-stroke-width-change :per-side-available per-side-available? :per-side-disabled per-side-disabled? - :on-stroke-per-side-toggle on-stroke-per-side-toggle :on-stroke-width-side-change on-stroke-width-side-change :on-stroke-dash-change on-stroke-dash-change :on-stroke-gap-change on-stroke-gap-change diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index b148e2977d..517f9d592c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -10,9 +10,11 @@ [app.common.data :as d] [app.common.types.color :as ctc] [app.common.types.token :as ctt] + [app.main.data.profile :as du] [app.main.data.workspace.colors :as dc] [app.main.data.workspace.tokens.application :as dwta] [app.main.features :as features] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :as deprecated-input] [app.main.ui.components.reorder-handler :refer [reorder-handler*]] @@ -39,7 +41,6 @@ on-stroke-width-change per-side-available per-side-disabled - on-stroke-per-side-toggle on-stroke-width-side-change on-stroke-dash-change on-stroke-gap-change @@ -104,12 +105,10 @@ stroke-width (:stroke-width stroke) + per-side-enabled (mf/deref refs/stroke-per-side) per-side? (and per-side-available (not per-side-disabled) - (true? (:stroke-per-side stroke))) - - per-side-expanded* (mf/use-state false) - per-side-expanded? (deref per-side-expanded*) + (true? per-side-enabled)) all-sides-equal? (mf/with-memo [stroke] @@ -120,7 +119,7 @@ left (d/nilv (:stroke-width-left stroke) width)] (= top right bottom left))) - show-multiple-placeholder? (or per-side-expanded? (not all-sides-equal?)) + show-multiple-placeholder? (or per-side? (not all-sides-equal?)) applied-token-width (mf/with-memo [applied-tokens] @@ -148,14 +147,9 @@ on-per-side-toggle (mf/use-fn - (mf/deps per-side? on-stroke-per-side-toggle index) + (mf/deps per-side?) (fn [] - (if per-side? - (swap! per-side-expanded* not) - (do - (when on-stroke-per-side-toggle - (on-stroke-per-side-toggle index)) - (reset! per-side-expanded* true))))) + (st/emit! (du/update-profile-props {:stroke-per-side (not per-side?)})))) on-width-top-change (mf/use-fn @@ -432,7 +426,7 @@ :on-change on-style-change}]) (when per-side-available [:> icon-button* {:variant "ghost" - :aria-pressed per-side-expanded? + :aria-pressed per-side? :aria-label per-side-toggle-label :disabled per-side-disabled :on-click on-per-side-toggle @@ -472,14 +466,14 @@ :on-change on-style-change}]]) (when per-side-available [:> icon-button* {:variant "ghost" - :aria-pressed per-side-expanded? + :aria-pressed per-side? :aria-label per-side-toggle-label :disabled per-side-disabled :on-click on-per-side-toggle :icon i/stroke-extended :data-testid "stroke.per-side-toggle"}])]) - (when per-side-expanded? + (when per-side? [:div {:class (stl/css :stroke-sides-options) :data-testid "stroke.per-side-options"} [:> numeric-input-wrapper* {:on-change on-width-top-change diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index 0b1dc28c7f..4052adba14 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -214,17 +214,16 @@ (fill->color (first fills))))) (defn stroke-per-side-widths - "Returns [top right bottom left] when the stroke has per-side widths - enabled and the sides actually differ; nil otherwise." + "Returns [top right bottom left] when the stroke sides actually + differ; nil otherwise." [stroke] - (when (:stroke-per-side stroke) - (let [width (:stroke-width stroke) - top (d/nilv (:stroke-width-top stroke) width) - right (d/nilv (:stroke-width-right stroke) width) - bottom (d/nilv (:stroke-width-bottom stroke) width) - left (d/nilv (:stroke-width-left stroke) width)] - (when-not (= top right bottom left) - [top right bottom left])))) + (let [width (:stroke-width stroke) + top (d/nilv (:stroke-width-top stroke) width) + right (d/nilv (:stroke-width-right stroke) width) + bottom (d/nilv (:stroke-width-bottom stroke) width) + left (d/nilv (:stroke-width-left stroke) width)] + (when-not (= top right bottom left) + [top right bottom left]))) (defn- get-border [shape]