Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

✨ Post-review changes

Browse source
This commit is contained in:
alonso.torres 2022-02-03 14:15:23 +01:00
parent 03052ddd28
commit 9789b7081a
4 changed files with 71 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/refs.cljs
View file

@ -124,6 +124,11 @@
:move-overlay-index])
workspace-local =))
(def typography-data
(l/derived #(select-keys % [:rename-typography
:edit-typography])
workspace-local =))
(def local-displacement
(l/derived #(select-keys % [:modifiers :selected])
workspace-local =))
@ -158,9 +163,6 @@
(def current-hover-ids
(l/derived :hover-ids context-menu))
(def editors
(l/derived :editors workspace-local))
(def selected-assets
(l/derived :selected-assets workspace-local))

68
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -32,34 +32,38 @@
start-ref (mf/use-ref nil)
on-pointer-down
(fn [event]
(dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state)
(mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type))
(mf/use-callback
(mf/deps @size-state)
(fn [event]
(dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state)
(mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type)))
on-lost-pointer-capture
(fn [event]
(dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil)
(mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil)
(set! last-resize-type nil))
(mf/use-callback
(fn [event]
(dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil)
(mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil)
(set! last-resize-type nil)))
on-mouse-move
(fn [event]
(when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref)
pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate)
(get axis))
start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
(mf/use-callback
(mf/deps min-val max-val)
(fn [event]
(when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref)
pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate)
(get axis))
start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
@ -68,16 +72,18 @@
(defn use-resize-observer
[callback]
(assert (some? callback))
(let [prev-val-ref (mf/use-ref nil)
current-observer-ref (mf/use-ref nil)
;; We use the ref as a callback when the dom node is ready (or change)
node-ref
(mf/use-callback
(mf/deps callback)
(fn [node]
(let [current-observer (mf/ref-val current-observer-ref)
prev-val (mf/ref-val prev-val-ref)]
(fn [^js node]
(let [^js current-observer (mf/ref-val current-observer-ref)
^js prev-val (mf/ref-val prev-val-ref)]
(when (and (not= prev-val node) (some? current-observer))
(log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
@ -85,11 +91,8 @@
(mf/set-ref-val! current-observer-ref nil))
(when (and (not= prev-val node) (some? node))
(let [observer
(js/ResizeObserver.
(fn []
(let [size (dom/get-client-size node)]
(when callback (callback last-resize-type size)))))]
(let [^js observer
(js/ResizeObserver. #(callback last-resize-type (dom/get-client-size node)))]
(mf/set-ref-val! current-observer-ref observer)
(log/debug :action "observe" :js/node node :js/observer observer)
(.observe observer node))))
@ -97,6 +100,7 @@
(mf/use-effect
(fn []
;; On dismount we need to disconnect the current observer
(fn []
(let [current-observer (mf/ref-val current-observer-ref)]
(when (some? current-observer)

29
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -1087,7 +1087,7 @@
;; ---- Typography box ----
(mf/defc typographies-group
[{:keys [file-id prefix groups open-groups file local? selected-typographies local
[{:keys [file-id prefix groups open-groups file local? selected-typographies local-data
editing-id on-asset-click handle-change apply-typography
on-rename-group on-ungroup on-context-menu]}]
(let [group-open? (get open-groups prefix true)]
@ -1115,7 +1115,7 @@
:on-click #(on-asset-click % (:id typography)
(partial apply-typography typography))
:editing? (= editing-id (:id typography))
:focus-name? (= (:rename-typography local) (:id typography))}])])
:focus-name? (= (:rename-typography local-data) (:id typography))}])])
(for [[path-item content] groups]
(when-not (empty? path-item)
@ -1127,7 +1127,7 @@
:local? local?
:selected-typographies selected-typographies
:editing-id editing-id
:local local
:local-data local-data
:on-asset-click on-asset-click
:handle-change handle-change
:apply-typography apply-typography
@ -1141,11 +1141,9 @@
(let [state (mf/use-state {:detail-open? false
:id nil})
local-data (mf/deref refs/typography-data)
menu-state (mf/use-state auto-pos-menu-state)
local (deref refs/workspace-local)
groups (group-assets typographies reverse-sort?)
groups (group-assets typographies reverse-sort?)
selected-typographies (:typographies selected-assets)
multi-typographies? (> (count selected-typographies) 1)
@ -1174,7 +1172,11 @@
{:typography-ref-file file-id
:typography-ref-id (:id typography)}
(dissoc typography :id :name))]
(run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs}))
(run! #(st/emit!
(dwt/update-text-attrs
{:id %
:editor (get @refs/workspace-editor-state %)
:attrs attrs}))
ids)))
create-group
@ -1273,14 +1275,15 @@
(dwl/sync-file file-id file-id)
(dwu/commit-undo-transaction)))))
editing-id (or (:rename-typography local) (:edit-typography local))]
editing-id (or (:rename-typography local-data)
(:edit-typography local-data))]
(mf/use-effect
(mf/deps local)
(mf/deps local-data)
(fn []
(when (:rename-typography local)
(when (:rename-typography local-data)
(st/emit! #(update % :workspace-local dissoc :rename-typography)))
(when (:edit-typography local)
(when (:edit-typography local-data)
(st/emit! #(update % :workspace-local dissoc :edit-typography)))))
[:& asset-section {:file-id file-id
@ -1303,7 +1306,7 @@
:local? local?
:selected-typographies selected-typographies
:editing-id editing-id
:local local
:local-data local-data
:on-asset-click (partial on-asset-click groups)
:handle-change handle-change
:apply-typography apply-typography

29
frontend/src/app/main/ui/workspace/textpalette.cljs
View file

@ -12,30 +12,35 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf]))
(mf/defc typography-item
[{:keys [local file-id selected-ids typography name-only?]}]
[{:keys [file-id selected-ids typography name-only?]}]
(let [font-data (f/get-font-data (:font-id typography))
font-variant-id (:font-variant-id typography)
variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id)))
handle-click
(mf/use-callback
(mf/deps local typography selected-ids)
(mf/deps typography selected-ids)
(fn []
(let [attrs (merge
{:typography-ref-file file-id
:typography-ref-id (:id typography)}
(dissoc typography :id :name))]
(->> selected-ids
(run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})))))))]
(run! #(st/emit!
(dwt/update-text-attrs
{:id %
:editor (get @refs/workspace-editor-state %)
:attrs attrs}))
selected-ids))))]
[:div.typography-item {:on-click handle-click}
[:div.typography-name
@ -49,7 +54,7 @@
[:div.typography-data (str (:font-size typography) "pt | " (:name variant-data))]])]))
(mf/defc palette
[{:keys [local selected-ids current-file-id file-typographies shared-libs]}]
[{:keys [selected-ids current-file-id file-typographies shared-libs]}]
(let [state (mf/use-state {:show-menu false})
selected (mf/use-state :file)
@ -129,25 +134,19 @@
[:& typography-item
{:key idx
:file-id file-id
:local local
:selected-ids selected-ids
:typography item}])]]
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
(def local-data
(l/derived #(select-keys % [:editors]) refs/workspace-local =))
(mf/defc textpalette
{::mf/wrap [mf/memo]}
[]
(let [local (mf/deref local-data)
selected-ids (mf/deref refs/selected-shapes)
(let [selected-ids (mf/deref refs/selected-shapes)
file-typographies (mf/deref refs/workspace-file-typography)
shared-libs (mf/deref refs/workspace-libraries)
current-file-id (mf/deref refs/current-file-id)]
[:& palette {:local local
:current-file-id current-file-id
current-file-id (mf/use-ctx ctx/current-file-id)]
[:& palette {:current-file-id current-file-id
:selected-ids selected-ids
:file-typographies file-typographies
:shared-libs shared-libs}]))