From 5376c4aa23785c75f72cb6beb23d701f934a1c9b Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Mon, 29 Aug 2022 12:02:31 +0200 Subject: [PATCH 1/4] :bug: Fix Shadows doesn't work on nested artboards --- CHANGES.md | 8 ++++++++ frontend/src/app/main/ui/workspace/shapes/frame.cljs | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index c4cd604ba..0dab13014 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,13 @@ # CHANGELOG + +## 1.15.1-beta + +### :bug: Bugs fixed + +- Fix shadows doesn't work on nested artboards [Taiga #3886](https://tree.taiga.io/project/penpot/issue/3886) + + ## 1.15.0-beta ### :boom: Breaking changes & Deprecations diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 420eaaa44..2cacfc13d 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -40,7 +40,7 @@ childs (mf/deref childs-ref)] [:& (mf/provider embed/context) {:value true} - [:& shape-container {:shape shape :ref ref :disable-shadows? true} + [:& shape-container {:shape shape :ref ref :disable-shadows? (cph/root-frame? shape)} [:& frame-shape {:shape shape :childs childs} ]]])))) (defn check-props From 40130d1ca7cc43bf44cc98f6d3e74e7cdbc558ea Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 29 Aug 2022 12:27:43 +0200 Subject: [PATCH 2/4] :bug: Fix problems with double-click and selection --- CHANGES.md | 6 ++++++ common/src/app/common/pages/helpers.cljc | 21 +++++++------------ .../main/ui/workspace/viewport/actions.cljs | 2 +- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index c4cd604ba..b09e6aba9 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,6 +2,12 @@ ## 1.15.0-beta +### :bug: Bugs fixed + +- Fix problems with double-click and selection [Taiga #4005](https://tree.taiga.io/project/penpot/issue/4005) + +## 1.15.0-beta + ### :boom: Breaking changes & Deprecations - The `PENPOT_LOGIN_WITH_LDAP` environment variable is finally removed (after diff --git a/common/src/app/common/pages/helpers.cljc b/common/src/app/common/pages/helpers.cljc index 3f5ef1ce4..c7214af10 100644 --- a/common/src/app/common/pages/helpers.cljc +++ b/common/src/app/common/pages/helpers.cljc @@ -308,23 +308,18 @@ "Check if `parent-candidate` is parent of `shape-id`" [objects shape-id parent-candidate] - (loop [current (get objects parent-candidate) - done #{} - pending (:shapes current)] - + (loop [current-id shape-id] (cond - (contains? done (:id current)) - (recur (get objects (first pending)) - done - (rest pending)) + (= current-id parent-candidate) + true - (empty? pending) false - (and current (contains? (set (:shapes current)) shape-id)) true + (or (nil? current-id) + (= current-id uuid/zero) + (= current-id (get-in objects [current-id :parent-id]))) + false :else - (recur (get objects (first pending)) - (conj done (:id current)) - (concat (rest pending) (:shapes current)))))) + (recur (get-in objects [current-id :parent-id]))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; COMPONENTS HELPERS diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index c7e8b1eb4..2a75401ad 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -194,7 +194,7 @@ :else (let [;; We only get inside childrens of the hovering shape hover-ids (->> @hover-ids (filter (partial cph/is-child? objects id))) - selected (get objects (if (> (count hover-ids) 1) (second hover-ids) (first hover-ids)))] + selected (get objects (first hover-ids))] (when (some? selected) (reset! hover selected) (st/emit! (dw/select-shape (:id selected))))))))))))) From 282941d28445f6ca7a066be61d5fe04920124c6c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 30 Aug 2022 08:15:25 +0200 Subject: [PATCH 3/4] :bug: Fix problems with texts --- CHANGES.md | 8 ++------ .../main/ui/workspace/shapes/text/editor.cljs | 15 +++++++-------- .../src/app/main/ui/workspace/viewport.cljs | 18 +++++++++++------- frontend/src/app/util/dom.cljs | 8 ++++---- frontend/src/app/util/text_svg_position.cljs | 11 ++++++----- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 1b7d35aef..f1227c8e4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,13 +6,9 @@ ### :bug: Bugs fixed - Fix shadows doesn't work on nested artboards [Taiga #3886](https://tree.taiga.io/project/penpot/issue/3886) - - -## 1.15.0-beta - -### :bug: Bugs fixed - - Fix problems with double-click and selection [Taiga #4005](https://tree.taiga.io/project/penpot/issue/4005) +- Fix mismatch between editor and displayed text in workspace [Taiga #3975](https://tree.taiga.io/project/penpot/issue/3975) +- Fix validation error on text position [Taiga #4010](https://tree.taiga.io/project/penpot/issue/4010) ## 1.15.0-beta diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 052a8f7d6..1417c5d5b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -268,8 +268,7 @@ text-modifier (mf/deref text-modifier-ref) - bounding-box - (gsht/position-data-bounding-box text-modifier) + bounding-box (gsht/position-data-bounding-box (or text-modifier shape)) x (min (:x bounding-box) (:x shape)) y (min (:y bounding-box) (:y shape)) @@ -280,15 +279,15 @@ :transform (dm/str (gsh/transform-matrix shape))} [:defs [:clipPath {:id clip-id} - [:rect {:x (or x (:x shape)) - :y (or y (:y shape)) - :width (or width (:width shape)) - :height (or height (:height shape)) + [:rect {:x x + :y y + :width width + :height height :fill "red"}]]] - [:foreignObject {:x (:x shape) :y (:y shape) :width width :height height} + [:foreignObject {:x x :y y :width width :height height} [:div {:style {:position "absolute" :left 0 - :top 0 + :top (- (:y shape) y) :pointer-events "all"}} [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]]])) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 3dfbe8cb8..b0b0872a6 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -194,13 +194,17 @@ [:div.viewport [:div.viewport-overlays {:ref overlays-ref} - [:div {:style {:pointer-events "none" :opacity 0}} - [:& stvh/viewport-texts - {:key (dm/str "texts-" page-id) - :page-id page-id - :objects objects - :modifiers modifiers - :edition edition}]] + ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap + ;; inside a foreign object "dummy" so this awkward behaviour is take into account + [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity 0}} + [:foreignObject {:x 0 :y 0 :width "100%" :height "100%"} + [:div {:style {:pointer-events "none"}} + [:& stvh/viewport-texts + {:key (dm/str "texts-" page-id) + :page-id page-id + :objects objects + :modifiers modifiers + :edition edition}]]]] (when show-comments? [:& comments/comments-layer {:vbox vbox diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index f2a5da6ba..66614023a 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -332,10 +332,10 @@ (defn bounding-rect->rect [rect] (when (some? rect) - {:x (or (.-left rect) (:left rect)) - :y (or (.-top rect) (:top rect)) - :width (or (.-width rect) (:width rect)) - :height (or (.-height rect) (:height rect))})) + {:x (or (.-left rect) (:left rect) 0) + :y (or (.-top rect) (:top rect) 0) + :width (or (.-width rect) (:width rect) 1) + :height (or (.-height rect) (:height rect) 1)})) (defn get-window-size [] diff --git a/frontend/src/app/util/text_svg_position.cljs b/frontend/src/app/util/text_svg_position.cljs index f73655a19..6957d64fd 100644 --- a/frontend/src/app/util/text_svg_position.cljs +++ b/frontend/src/app/util/text_svg_position.cljs @@ -19,13 +19,14 @@ [parent-node direction text-node] (letfn [(parse-entry [^js entry] - {:node (.-node entry) - :position (dom/bounding-rect->rect (.-position entry)) - :text (.-text entry) - :direction direction})] + (when (some? (.-position entry)) + {:node (.-node entry) + :position (dom/bounding-rect->rect (.-position entry)) + :text (.-text entry) + :direction direction}))] (into [] - (map parse-entry) + (keep parse-entry) (tpd/parse-text-nodes parent-node text-node)))) (def load-promises (atom {})) From c69bf9fd352cce346949a548df92b7a7749f2586 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 30 Aug 2022 10:41:15 +0200 Subject: [PATCH 4/4] :bug: Fix jittering on firefox scroll fixed elements --- CHANGES.md | 1 + frontend/src/app/main/ui/viewer.cljs | 45 ++++++++++++++----- .../main/ui/workspace/viewport/actions.cljs | 2 +- frontend/src/app/util/dom.cljs | 10 +++++ frontend/src/app/util/dom/normalize_wheel.js | 10 +---- 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f1227c8e4..157fa194c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -9,6 +9,7 @@ - Fix problems with double-click and selection [Taiga #4005](https://tree.taiga.io/project/penpot/issue/4005) - Fix mismatch between editor and displayed text in workspace [Taiga #3975](https://tree.taiga.io/project/penpot/issue/3975) - Fix validation error on text position [Taiga #4010](https://tree.taiga.io/project/penpot/issue/4010) +- Fix objects jitter while scrolling [Github #2167](https://github.com/penpot/penpot/issues/2167) ## 1.15.0-beta diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 0ccf2d9bb..22ee371f0 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -32,7 +32,9 @@ [app.main.ui.viewer.login] [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]] [app.util.dom :as dom] + [app.util.dom.normalize-wheel :as nw] [app.util.i18n :as i18n :refer [tr]] + [app.util.keyboard :as kbd] [app.util.webapi :as wapi] [cuerdas.core :as str] [goog.events :as events] @@ -305,7 +307,28 @@ on-scroll (mf/use-fn (fn [event] - (reset! scroll (dom/get-target-scroll event))))] + (reset! scroll (dom/get-target-scroll event)))) + + on-wheel + (mf/use-fn + (fn [event] + (let [event (.getBrowserEvent ^js event) + norm-event ^js (nw/normalize-wheel event) + mod? (kbd/mod? event) + shift? (kbd/shift? event) + delta (.-pixelY norm-event) + viewer-section (mf/ref-val viewer-section-ref) + scroll-pos (if shift? + (dom/get-h-scroll-pos viewer-section) + (dom/get-scroll-pos viewer-section)) + new-scroll-pos (+ scroll-pos delta)] + (when-not mod? + (do + (dom/prevent-default event) + (dom/stop-propagation event) + (if shift? + (dom/set-h-scroll-pos! viewer-section new-scroll-pos) + (dom/set-scroll-pos! viewer-section new-scroll-pos)))))))] (hooks/use-shortcuts ::viewer sc/shortcuts) @@ -326,10 +349,12 @@ (mf/with-effect [] (dom/set-html-theme-color clr/gray-50 "dark") (let [key1 (events/listen js/window "click" on-click) - key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll)] + key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll #js {"passive" true}) + key3 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})] (fn [] (events/unlistenByKey key1) - (events/unlistenByKey key2)))) + (events/unlistenByKey key2) + (events/unlistenByKey key3)))) (mf/use-layout-effect (fn [] @@ -429,13 +454,13 @@ [:div.viewer-content [:& header/header {:project project - :index index - :file file - :page page - :frame frame - :permissions permissions - :zoom zoom - :section section}] + :index index + :file file + :page page + :frame frame + :permissions permissions + :zoom zoom + :section section}] [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel) :class (dom/classnames :invisible (not (:show-thumbnails local false)))}] [:& thumbnails-panel {:frames frames diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 2a75401ad..88ce201be 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -21,8 +21,8 @@ [app.main.ui.workspace.viewport.utils :as utils] [app.util.dom :as dom] [app.util.dom.dnd :as dnd] + [app.util.dom.normalize-wheel :as nw] [app.util.keyboard :as kbd] - [app.util.normalize-wheel :as nw] [app.util.object :as obj] [app.util.timers :as timers] [beicon.core :as rx] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 66614023a..56d8c68a8 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -484,11 +484,21 @@ (when (some? element) (.-scrollTop element))) +(defn get-h-scroll-pos + [^js element] + (when (some? element) + (.-scrollLeft element))) + (defn set-scroll-pos! [^js element scroll] (when (some? element) (obj/set! element "scrollTop" scroll))) +(defn set-h-scroll-pos! + [^js element scroll] + (when (some? element) + (obj/set! element "scrollLeft" scroll))) + (defn scroll-into-view! ([^js element] (scroll-into-view! element false)) diff --git a/frontend/src/app/util/dom/normalize_wheel.js b/frontend/src/app/util/dom/normalize_wheel.js index fc221e54c..69efb2bc1 100644 --- a/frontend/src/app/util/dom/normalize_wheel.js +++ b/frontend/src/app/util/dom/normalize_wheel.js @@ -15,15 +15,10 @@ 'use strict'; -goog.provide("app.util.normalize_wheel"); +goog.provide("app.util.dom.normalize_wheel"); goog.scope(function() { - const self = app.util.normalize_wheel; - - // const UserAgent_DEPRECATED = require('UserAgent_DEPRECATED'); - - // const isEventSupported = require('isEventSupported'); - + const self = app.util.dom.normalize_wheel; // Reasonable defaults const PIXEL_STEP = 10; @@ -174,6 +169,5 @@ goog.scope(function() { self.normalize_wheel = normalizeWheel; - });