3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 12:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1865 from penpot/alotor-bugfixing

Browse source 
Alotor bugfixing
This commit is contained in:
Eva Marco 2022-05-06 14:10:12 +02:00 • committed by GitHub
commit 8298d460e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 117 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -10,6 +10,7 @@
[app.common.math :as mth] [app.common.math :as mth]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -141,13 +142,19 @@
[:div.editable-select {:class class [:div.editable-select {:class class
:ref on-node-load} :ref on-node-load}
[:input.input-text {:value (or (some-> @state :current-value value->label) "") (if (= type "number")
:on-change handle-change-input [:> numeric-input {:value (or (some-> @state :current-value value->label) "")
:on-key-down handle-key-down :on-change set-value
:on-focus handle-focus :on-focus handle-focus
:on-blur handle-blur :on-blur handle-blur
:placeholder placeholder :placeholder placeholder}]
:type type}] [:input.input-text {:value (or (some-> @state :current-value value->label) "")
:on-change handle-change-input
:on-key-down handle-key-down
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder
:type type}])
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down] [:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
[:& dropdown {:show (get @state :is-open? false) [:& dropdown {:show (get @state :is-open? false)

44
frontend/src/app/main/ui/shapes/frame.cljs
View file

@ -45,15 +45,32 @@
[props] [props]
(let [shape (obj/get props "shape")] (let [shape (obj/get props "shape")]
(when (:thumbnail shape) (when (:thumbnail shape)
[:image.frame-thumbnail (let [{:keys [x y width height]} shape
{:id (dm/str "thumbnail-" (:id shape)) transform (gsh/transform-matrix shape)
:xlinkHref (:thumbnail shape) props (-> (attrs/extract-style-attrs shape)
:x (:x shape) (obj/merge!
:y (:y shape) #js {:x x
:width (:width shape) :y y
:height (:height shape) :transform (str transform)
;; DEBUG :width width
:style {:filter (when (debug? :thumbnails) "sepia(1)")}}]))) :height height
:className "frame-background"}))
path? (some? (.-d props))]
[:*
[:image.frame-thumbnail
{:id (dm/str "thumbnail-" (:id shape))
:xlinkHref (:thumbnail shape)
:x (:x shape)
:y (:y shape)
:width (:width shape)
:height (:height shape)
;; DEBUG
:style {:filter (when (debug? :thumbnails) "sepia(1)")}}]
[:& shape-strokes {:shape shape}
(if path?
[:> :path props]
[:> :rect props])]]))))
(defn frame-shape (defn frame-shape
[shape-wrapper] [shape-wrapper]
@ -88,8 +105,9 @@
(for [item childs] (for [item childs]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item
:key (dm/str (:id item))}]) :key (dm/str (:id item))}])
[:& shape-strokes {:shape shape} ]]
(if path? [:& shape-strokes {:shape shape}
[:> :path props] (if path?
[:> :rect props])]]]]))) [:> :path props]
[:> :rect props])]])))

6
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -82,11 +82,13 @@
:fontWeight (:font-weight data) :fontWeight (:font-weight data)
:textTransform (:text-transform data) :textTransform (:text-transform data)
:textDecoration (:text-decoration data) :textDecoration (:text-decoration data)
:letterSpacing (:letter-spacing data)
:fontStyle (:font-style data) :fontStyle (:font-style data)
:direction (if (:rtl data) "rtl" "ltr") :direction (if (:rtl data) "rtl" "ltr")
:whiteSpace "pre"} :whiteSpace "pre"}
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))}) (obj/set! "fill" (str "url(#fill-" index "-" render-id ")")))})
shape (assoc shape :fills (:fills data))] shape (assoc shape :fills (:fills data))]
[:& shape-custom-strokes {:shape shape :key index} [:& (mf/provider muc/render-ctx) {:value (str render-id "_" (:id shape) "_" index)}
[:> :text props (:text data)]]))]])) [:& shape-custom-strokes {:shape shape :key index}
[:> :text props (:text data)]]]))]]))

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

@ -65,7 +65,7 @@
[:& frame-wrapper {:shape item [:& frame-wrapper {:shape item
:key (:id item) :key (:id item)
:objects (get frame-objects (:id item)) :objects (get frame-objects (:id item))
:thumbnail? (not (get active-frames (:id item) false))}] :thumbnail? (not (contains? active-frames (:id item)))}]
[:& shape-wrapper {:shape item [:& shape-wrapper {:shape item
:key (:id item)}]))])) :key (:id item)}]))]))

8
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -114,10 +114,10 @@
(when (not @rendered?) (reset! rendered? true))))) (when (not @rendered?) (reset! rendered? true)))))
[:g.frame-container {:key "frame-container" :ref on-frame-load} [:g.frame-container {:key "frame-container" :ref on-frame-load}
thumb-renderer [:g.frame-thumbnail {:id (dm/str "thumbnail-container-" (:id shape))}
[:g.frame-thumbnail
[:> frame/frame-thumbnail {:key (dm/str (:id shape)) [:> frame/frame-thumbnail {:key (dm/str (:id shape))
:shape (cond-> shape :shape (cond-> shape
(some? thumbnail-data) (some? thumbnail-data)
(assoc :thumbnail thumbnail-data))}]]])))) (assoc :thumbnail thumbnail-data))}]
thumb-renderer]]))))

79
frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
View file

@ -14,16 +14,22 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.timers :as ts] [app.util.timers :as ts]
[beicon.core :as rx]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn- draw-thumbnail-canvas (defn- draw-thumbnail-canvas
[canvas-node img-node] [canvas-node img-node]
(let [canvas-context (.getContext canvas-node "2d") (try
canvas-width (.-width canvas-node) (when (and (some? canvas-node) (some? img-node))
canvas-height (.-height canvas-node)] (let [canvas-context (.getContext canvas-node "2d")
(.clearRect canvas-context 0 0 canvas-width canvas-height) canvas-width (.-width canvas-node)
(.drawImage canvas-context img-node 0 0 canvas-width canvas-height) canvas-height (.-height canvas-node)]
(.toDataURL canvas-node "image/jpeg" 0.8))) (.clearRect canvas-context 0 0 canvas-width canvas-height)
(.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
(.toDataURL canvas-node "image/png")))
(catch :default err
(.error js/console err)
nil)))
(defn use-render-thumbnail (defn use-render-thumbnail
"Hook that will create the thumbnail thata" "Hook that will create the thumbnail thata"
@ -44,43 +50,52 @@
thumbnail-ref? (mf/use-var thumbnail?) thumbnail-ref? (mf/use-var thumbnail?)
updates-str (mf/use-memo #(rx/subject))
on-image-load on-image-load
(mf/use-callback (mf/use-callback
(fn [] (fn []
(let [canvas-node (mf/ref-val frame-canvas-ref) (ts/raf
img-node (mf/ref-val frame-image-ref) #(let [canvas-node (mf/ref-val frame-canvas-ref)
thumb-data (draw-thumbnail-canvas canvas-node img-node)] img-node (mf/ref-val frame-image-ref)
(st/emit! (dw/update-thumbnail id thumb-data)) thumb-data (draw-thumbnail-canvas canvas-node img-node)]
(reset! image-url nil)))) (when (some? thumb-data)
(st/emit! (dw/update-thumbnail id thumb-data))
(reset! image-url nil))))))
on-change on-update-frame
(mf/use-callback (fn []
(fn [] (when (and (some? @node-ref) (not @disable-ref?))
(when (and (some? @node-ref) (not @disable-ref?)) (let [node @node-ref
(let [node @node-ref] frame-html (dom/node->xml node)
(ts/schedule-on-idle {:keys [x y width height]} @shape-ref
#(let [frame-html (dom/node->xml node) svg-node
{:keys [x y width height]} @shape-ref (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
svg-node (dom/set-property! "version" "1.1")
(-> (dom/make-node "http://www.w3.org/2000/svg" "svg") (dom/set-property! "viewBox" (dm/str x " " y " " width " " height))
(dom/set-property! "version" "1.1") (dom/set-property! "width" width)
(dom/set-property! "viewBox" (dm/str x " " y " " width " " height)) (dom/set-property! "height" height)
(dom/set-property! "width" width) (dom/set-property! "fill" "none")
(dom/set-property! "height" height) (obj/set! "innerHTML" frame-html))
(dom/set-property! "fill" "none") img-src (-> svg-node dom/node->xml dom/svg->data-uri)]
(obj/set! "innerHTML" frame-html)) (reset! image-url img-src))))
img-src (-> svg-node dom/node->xml dom/svg->data-uri)]
(reset! image-url img-src)))))))
on-load-frame-dom on-load-frame-dom
(mf/use-callback (mf/use-callback
(fn [node] (fn [node]
(when (and (some? node) (nil? @observer-ref)) (when (and (some? node) (nil? @observer-ref))
(on-change []) (rx/push! updates-str :update)
(let [observer (js/MutationObserver. on-change)] (let [observer (js/MutationObserver. (partial rx/push! updates-str))]
(.observe observer node #js {:childList true :attributes true :characterData true :subtree true}) (.observe observer node #js {:childList true :attributes true :characterData true :subtree true})
(reset! observer-ref observer)))))] (reset! observer-ref observer)))))]
(mf/use-effect
(fn []
(let [subid (->> updates-str
(rx/debounce 200)
(rx/subs on-update-frame))]
#(rx/dispose! subid))))
(mf/use-effect (mf/use-effect
(mf/deps disable?) (mf/deps disable?)
(fn [] (fn []
@ -104,7 +119,7 @@
[on-load-frame-dom [on-load-frame-dom
(when (some? @image-url) (when (some? @image-url)
(mf/html (mf/html
[:g.thumbnail-rendering {:opacity 0} [:g.thumbnail-rendering
[:foreignObject {:x x :y y :width width :height height} [:foreignObject {:x x :y y :width width :height height}
[:canvas {:ref frame-canvas-ref [:canvas {:ref frame-canvas-ref
:width fixed-width :width fixed-width

4
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -90,7 +90,7 @@
hover (mf/use-state nil) hover (mf/use-state nil)
hover-disabled? (mf/use-state false) hover-disabled? (mf/use-state false)
frame-hover (mf/use-state nil) frame-hover (mf/use-state nil)
active-frames (mf/use-state {}) active-frames (mf/use-state #{})
;; REFS ;; REFS
viewport-ref (mf/use-ref nil) viewport-ref (mf/use-ref nil)
@ -183,7 +183,7 @@
(hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids @hover-disabled? focus zoom) (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids @hover-disabled? focus zoom)
(hooks/setup-viewport-modifiers modifiers base-objects) (hooks/setup-viewport-modifiers modifiers base-objects)
(hooks/setup-shortcuts node-editing? drawing-path?) (hooks/setup-shortcuts node-editing? drawing-path?)
(hooks/setup-active-frames base-objects vbox hover active-frames zoom) (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom)
[:div.viewport [:div.viewport
[:div.viewport-overlays {:ref overlays-ref} [:div.viewport-overlays {:ref overlays-ref}

35
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -219,32 +219,21 @@
(gsh/overlaps? frame vbox)))) (gsh/overlaps? frame vbox))))
(defn setup-active-frames (defn setup-active-frames
[objects vbox hover active-frames zoom] [objects hover-ids selected active-frames zoom]
(mf/use-effect (mf/use-effect
(mf/deps vbox) (mf/deps objects @hover-ids selected zoom)
(fn [] (fn []
(swap! active-frames (when (some? @hover-ids)
(fn [active-frames] (let [hover-frame (when (> zoom 0.25) (last @hover-ids))
(let [set-active-frames new-active-frames (if (some? hover-frame) #{hover-frame} #{})
(fn [active-frames id active?] new-active-frames
(cond-> active-frames (into new-active-frames
(and active? (inside-vbox vbox objects id)) (comp
(assoc id true)))] (filter #(not= :frame (get-in objects [% :type])))
(reduce-kv set-active-frames {} active-frames)))))) (map #(get-in objects [% :frame-id])))
selected) ]
(mf/use-effect (reset! active-frames new-active-frames))))))
(mf/deps @hover @active-frames zoom)
(fn []
(let [frame-id (if (= :frame (:type @hover))
(:id @hover)
(:frame-id @hover))]
(if (< zoom 0.25)
(when (some? @active-frames)
(reset! active-frames nil))
(when (and (some? frame-id)(not (contains? @active-frames frame-id)))
(reset! active-frames {frame-id true})))))))
;; NOTE: this is executed on each page change, maybe we need to move ;; NOTE: this is executed on each page change, maybe we need to move
;; this shortcuts outside the viewport? ;; this shortcuts outside the viewport?

2
frontend/src/app/main/ui/workspace/viewport/utils.cljs
View file

@ -86,7 +86,7 @@
mask? (and group? masked-group?) mask? (and group? masked-group?)
;; When the shape is a frame we maybe need to move its thumbnail ;; When the shape is a frame we maybe need to move its thumbnail
thumb-node (when frame? (dom/query (str "#thumbnail-" id)))] thumb-node (when frame? (dom/query (str "#thumbnail-container-" id)))]
(cond (cond
frame? frame?

1
frontend/src/app/util/text_svg_position.cljs
View file

@ -119,6 +119,7 @@
:font-weight (str (get "font-weight")) :font-weight (str (get "font-weight"))
:text-transform (str (get "text-transform")) :text-transform (str (get "text-transform"))
:text-decoration (str (get "text-decoration")) :text-decoration (str (get "text-decoration"))
:letter-spacing (str (get "letter-spacing"))
:font-style (str (get "font-style")) :font-style (str (get "font-style"))
:fills (transit/decode-str (get "--fills")) :fills (transit/decode-str (get "--fills"))
:text text})))))))))) :text text}))))))))))