johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Alejandro Alonso
2025-07-18 08:48:08 +02:00
parent f3f3190881
commit 82ba30703e
2 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/main/ui/shapes/text/styles.cljs
View File

@@ -17,7 +17,7 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[app.main.refs :as refs] [app.main.refs :as refs]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn generate-root-styles (defn generate-root-styles
([props node] ([props node]
(generate-root-styles props node false)) (generate-root-styles props node false))
@@ -96,7 +96,6 @@
fontsdb (deref fonts/fontsdb) fontsdb (deref fonts/fontsdb)
_ (js/console.log "Preview font for" shape-id ":" preview-font)
base #js {:textDecoration text-decoration base #js {:textDecoration text-decoration
:textTransform text-transform :textTransform text-transform

85
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@@ -17,6 +17,7 @@
[app.main.data.fonts :as fts] [app.main.data.fonts :as fts]
[app.main.data.shortcuts :as dsc] [app.main.data.shortcuts :as dsc]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.shapes :as dwsh]
[app.main.features :as features] [app.main.features :as features]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.main.refs :as refs] [app.main.refs :as refs]
@@ -35,7 +36,12 @@
[app.util.timers :as tm] [app.util.timers :as tm]
[cuerdas.core :as str] [cuerdas.core :as str]
[goog.events :as events] [goog.events :as events]
[rumext.v2 :as mf])) [rumext.v2 :as mf]
[app.util.text-svg-position :as tsp]
[app.main.data.workspace.texts :as dwt]
[app.common.text :as common-text]))
(defonce preview-position-data* (atom {}))
(defn- attr->string [value] (defn- attr->string [value]
(if (= value :multiple) (if (= value :multiple)
@@ -66,11 +72,9 @@
on-click (mf/use-fn (mf/deps font) #(on-click font)) on-click (mf/use-fn (mf/deps font) #(on-click font))
on-mouse-enter (mf/use-fn (mf/deps font on-hover) on-mouse-enter (mf/use-fn (mf/deps font on-hover)
(fn [] (fn []
(js/console.log "Mouse enter on font" (:name font))
(when on-hover (on-hover font)))) (when on-hover (on-hover font))))
on-mouse-leave (mf/use-fn (mf/deps on-leave) on-mouse-leave (mf/use-fn (mf/deps on-leave)
(fn [] (fn []
(js/console.log "Mouse leave on font")
(when on-leave (on-leave))))] (when on-leave (on-leave))))]
(mf/use-effect (mf/use-effect
@@ -175,54 +179,61 @@
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [font] (fn [font]
(js/console.log "Font hover triggered" font ids)
(when (and ids (seq ids)) (when (and ids (seq ids))
(let [{:keys [family] :as font-data} font (let [{:keys [family] :as font-data} font
{:keys [id name weight style]} (fonts/get-default-variant font)] {:keys [id name weight style]} (fonts/get-default-variant font)
(js/console.log "Setting preview font" {:font-id (:id font) font-family family
:font-family family font-weight weight
:font-variant-id (or id name) font-style style]
:font-weight weight
:font-style style})
(st/emit! (dw/set-preview-font ids {:font-id (:id font) (st/emit! (dw/set-preview-font ids {:font-id (:id font)
:font-family family :font-family font-family
:font-variant-id (or id name) :font-variant-id (or id name)
:font-weight weight :font-weight font-weight
:font-style style})))))) :font-style font-style}))
(doseq [shape-id ids]
(when-not (get @preview-position-data* shape-id)
(let [shape (get-in @st/state [:workspace-page-objects shape-id])
original-pos (:position-data shape)]
(swap! preview-position-data* assoc shape-id original-pos)))
;; Espera a que la fuente esté cargada antes de recalcular, y añade un pequeño delay
(-> (fonts/ensure-loaded! (:id font))
(.then (fn [_]
(js/Promise.
(fn [resolve _]
(js/setTimeout #(resolve true) 50)))))
(.then (fn [_]
(tsp/calc-position-data shape-id)))
(.then (fn [new-pos]
(js/console.log "Preview position-data" shape-id new-pos)
(when (and new-pos (not (empty? new-pos)))
(st/emit! (dwt/update-position-data shape-id new-pos)))))))))))
on-font-leave on-font-leave
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [_] (fn [_]
(js/console.log "Font leave triggered" ids)
(when (and ids (seq ids)) (when (and ids (seq ids))
(js/console.log "Unsetting preview font") (doseq [shape-id ids]
(when-let [original-pos (get @preview-position-data* shape-id)]
(st/emit! (dwt/update-position-data shape-id original-pos))
(swap! preview-position-data* dissoc shape-id)))
(st/emit! (dw/unset-preview-font ids)))))] (st/emit! (dw/unset-preview-font ids)))))]
(mf/with-effect [fonts] ;; Removed the effect that was calling on-select automatically
(let [key (events/listen js/document "keydown" on-key-down)] ;; (mf/with-effect [@selected]
#(events/unlistenByKey key))) ;; (on-select @selected))
(mf/with-effect [@selected] (mf/with-effect []
(when-let [inst (mf/ref-val flist)] (st/emit! (dsc/push-shortcuts :typography {}))
(when-let [index (:index @selected)] (fn []
(.scrollToRow ^js inst index)))) (st/emit! (dsc/pop-shortcuts :typography))))
;; Removed the effect that was calling on-select automatically (mf/with-effect []
;; (mf/with-effect [@selected] (let [index (d/index-of-pred fonts #(= (:id %) (:id current-font)))
;; (on-select @selected)) inst (mf/ref-val flist)]
(tm/schedule
(mf/with-effect [] #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
(st/emit! (dsc/push-shortcuts :typography {})) (.scrollToPosition ^js inst offset)))))
(fn []
(st/emit! (dsc/pop-shortcuts :typography))))
(mf/with-effect []
(let [index (d/index-of-pred fonts #(= (:id %) (:id current-font)))
inst (mf/ref-val flist)]
(tm/schedule
#(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
(.scrollToPosition ^js inst offset)))))
[:div {:class (stl/css :font-selector)} [:div {:class (stl/css :font-selector)}
[:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)} [:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)}