Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Add border radius specific context menu functions

Browse source
This commit is contained in:
Akshay Gupta 2024-05-28 02:22:25 +05:30
parent 370a5d9bb8
commit 9066ad9e39
2 changed files with 54 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -9,16 +9,19 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.types.shape.radius :as ctsr]
[app.main.data.events :as ev]
[app.main.data.modal :as modal]
[app.main.data.shortcuts :as scd]
[app.main.data.tokens :as dt]
[app.main.data.workspace :as dw]
[app.main.data.workspace.changes :as dch]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]]
[app.main.ui.workspace.tokens.core :as wtc]
[app.util.dom :as dom]
[app.util.timers :as timers]
[okulary.core :as l]
@ -27,46 +30,68 @@
(def tokens-menu-ref
(l/derived :token-context-menu refs/workspace-local))
(defn additional-actions [token-type token-id]
(case token-type
:border-radius [{:title "Top Left Corner" :action #(js/console.log "Top Left Corner")}
{:title "Bottom Left Corner" :action #(js/console.log "Bottom Left Corner")}
{:title "Top Right Corner" :action #(js/console.log "Top Right Corner")}
{:title "Bottom Right Corner" :action #(js/console.log "Bottom Right Corner")}]
[]))
(defn update-shape-radius-single-corner [value shape-ids attribute]
(st/emit!
(dch/update-shapes shape-ids
(fn [shape]
(when (ctsr/has-radius? shape)
(ctsr/set-radius-4 shape (first attribute) value)))
{:reg-objects? true
:attrs [:rx :ry :r1 :r2 :r3 :r4]})))
(defn generate-menu-entries [token-type-props token-id token-type]
(defn apply-border-radius-token [token-id token-type-props attribute selected-shapes]
(let [token (dt/get-token-data-from-token-id token-id)
updated-token-type-props (if (#{:r1 :r2 :r3 :r4} attribute)
(assoc token-type-props
:on-update-shape update-shape-radius-single-corner
:attributes #{attribute})
token-type-props)]
(wtc/on-apply-token {:token token
:token-type-props updated-token-type-props
:selected-shapes selected-shapes})))
(defn additional-actions [token-type token-id selected-shapes token-type-props]
(case token-type
:border-radius [{:title "All" :action #(apply-border-radius-token token-id token-type-props :all selected-shapes)}
{:title "Top Left" :action #(apply-border-radius-token token-id token-type-props :r1 selected-shapes)}
{:title "Top Right" :action #(apply-border-radius-token token-id token-type-props :r2 selected-shapes)}
{:title "Bottom Right" :action #(apply-border-radius-token token-id token-type-props :r3 selected-shapes)}
{:title "Bottom Left" :action #(apply-border-radius-token token-id token-type-props :r4 selected-shapes)}]
[]))
(defn generate-menu-entries [token-type-props token-id token-type selected-shapes]
(let [{:keys [modal]} token-type-props
default-actions [{:title "Delete Token" :action #(st/emit! (dt/delete-token token-id))}
{:title "Duplicate Token" :action #(st/emit! (dt/duplicate-token token-id))}
{:title "Edit Token" :action (fn [event]
(let [{:keys [key fields]} modal
token (dt/get-token-data-from-token-id token-id)]
(st/emit! dt/hide-token-context-menu)
(dom/stop-propagation event)
(modal/show! key {:x (.-clientX ^js event)
:y (.-clientY ^js event)
:position :right
:fields fields
:token token})))}]
specific-actions (additional-actions token-type token-id)
(let [{:keys [key fields]} modal
token (dt/get-token-data-from-token-id token-id)]
(st/emit! dt/hide-token-context-menu)
(dom/stop-propagation event)
(modal/show! key {:x (.-clientX ^js event)
:y (.-clientY ^js event)
:position :right
:fields fields
:token token})))}]
specific-actions (additional-actions token-type token-id selected-shapes token-type-props)
all-actions (concat default-actions specific-actions)]
(map (fn [{:keys [title action]}]
[:& menu-entry {:title title :on-click action}])
all-actions)))
all-actions))
(mf/defc token-pill-context-menu
[{:keys [token-id token-type-props token-type]}]
(let [menu-entries (generate-menu-entries token-type-props token-id token-type)]
(into [:*] menu-entries)
))
[{:keys [token-id token-type-props token-type selected-shapes]}]
(let [menu-entries (generate-menu-entries token-type-props token-id token-type selected-shapes)]
[:* (for [[index entry] (d/enumerate menu-entries)]
[:& menu-entry {:title (:title entry) :on-click (:action entry)}])]))
(mf/defc token-context-menu
[]
(let [mdata (mf/deref tokens-menu-ref)
top (- (get-in mdata [:position :y]) 20)
left (get-in mdata [:position :x])
dropdown-ref (mf/use-ref)]
dropdown-ref (mf/use-ref)
objects (mf/deref refs/workspace-page-objects)
selected (mf/deref refs/selected-shapes)
selected-shapes (into [] (keep (d/getf objects)) selected)]
(mf/use-effect
(mf/deps mdata)
@ -91,4 +116,5 @@
[:ul {:class (stl/css :context-list)}
[:& token-pill-context-menu {:token-id (:token-id mdata)
:token-type-props (:token-type-props mdata)
:token-type (:token-type mdata)}]])]]))
:token-type (:token-type mdata)
:selected-shapes selected-shapes}]])]]))

2
frontend/src/app/main/ui/workspace/tokens/core.cljs
View file

@ -83,7 +83,7 @@
(st/emit! (on-apply {:token-id (:id token)
:shape-id (:id shape)
:attributes attributes}))
(on-update-shape token-value shape-ids))))
(on-update-shape token-value shape-ids attributes))))
(defn update-shape-radius [value shape-ids]
(st/emit!