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

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
alonso.torres 2022-05-03 10:29:19 +02:00
commit 4363e32aae
32 changed files with 391 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

20
CHANGES.md
View file

@ -18,39 +18,44 @@
### :boom: Breaking changes ### :boom: Breaking changes
- We've changed the behaviour of the border-radius so it works as CSS that [has some limits](https://www.w3.org/TR/css-backgrounds-3/#corner-overlap). - We've changed the behaviour of the border-radius so it works as CSS that [has some limits](https://www.w3.org/TR/css-backgrounds-3/#corner-overlap).
- Now exported text are SVG's native `text` tag instead of paths. This could break when opening the file depending on your engine. Some SVG's may require fonts to be installed at system level.
### :sparkles: New features ### :sparkles: New features
- Group assets by drag and drop [Taiga #2831](https://tree.taiga.io/project/penpot/us/2831) - Group assets by drag and drop [Taiga #2831](https://tree.taiga.io/project/penpot/us/2831)
- Search and filter layers [Taiga #2564](https://tree.taiga.io/project/penpot/us/2564) - Search and filter layers [Taiga #2564](https://tree.taiga.io/project/penpot/us/2564)
- Constraints are not well assigned when default and multiselection [Taiga #3069](https://tree.taiga.io/project/penpot/issue/3069)
- Exporting big files flow [Taiga #2218](https://tree.taiga.io/project/penpot/us/2218) - Exporting big files flow [Taiga #2218](https://tree.taiga.io/project/penpot/us/2218)
- Multiexport from main menu [Taiga #520](https://tree.taiga.io/project/penpot/us/28541) - Multiexport from main menu [Taiga #520](https://tree.taiga.io/project/penpot/us/28541)
- Multiexport assets (aka bulk export) [Taiga #520](https://tree.taiga.io/project/penpot/us/520) - Multiexport assets (aka bulk export) [Taiga #520](https://tree.taiga.io/project/penpot/us/520)
- Set the artboard layer fixed at the top side of the layers [Taiga #2636](https://tree.taiga.io/project/penpot/us/2636) - Set the artboard layer fixed at the top side of the layers [Taiga #2636](https://tree.taiga.io/project/penpot/us/2636)
- Set an artboard as the file thumbnail [Taiga #1526](https://tree.taiga.io/project/penpot/us/1526) - Set an artboard as the file thumbnail [Taiga #1526](https://tree.taiga.io/project/penpot/us/1526)
- Social login redesign [Taiga #2974](https://tree.taiga.io/project/penpot/task/2974) - Social login redesign [Taiga #2974](https://tree.taiga.io/project/penpot/task/2974)
- Add border radius to our artboards [Taiga #2056](https://tree.taiga.io/project/penpot/us/2056) - Add border radius to artboards [Taiga #2056](https://tree.taiga.io/project/penpot/us/2056)
- Allow send multiple team invitations at once [Taiga #2798](https://tree.taiga.io/project/penpot/us/2798) - Allow send multiple team invitations at once [Taiga #2798](https://tree.taiga.io/project/penpot/us/2798)
- Persist color palette and color picker across refresh [Taiga #1660](https://tree.taiga.io/project/penpot/issue/1660) - Persist color palette and color picker across refresh [Taiga #1660](https://tree.taiga.io/project/penpot/issue/1660)
- Ability to add multiple strokes to a shape [Taiga #2778](https://tree.taiga.io/project/penpot/us/2778) - Ability to add multiple strokes to a shape [Taiga #2778](https://tree.taiga.io/project/penpot/us/2778)
- Scroll to selected size in font size selector [Taiga #2825](https://tree.taiga.io/project/penpot/us/2825) - Scroll to selected size in font size selector [Taiga #2825](https://tree.taiga.io/project/penpot/us/2825)
- Duplicate artboards create new flows if needed [Taiga #2221](https://tree.taiga.io/project/penpot/issue/2221)
- Add new invitations section [Taiga #2797](https://tree.taiga.io/project/penpot/us/2797) - Add new invitations section [Taiga #2797](https://tree.taiga.io/project/penpot/us/2797)
- Ability to add multiple fills to a shape [Taiga #1394](https://tree.taiga.io/project/penpot/us/1394) - Ability to add multiple fills to a shape [Taiga #1394](https://tree.taiga.io/project/penpot/us/1394)
- Team members redesign [Taiga #2283](https://tree.taiga.io/project/penpot/us/2283) - Team members redesign [Taiga #2283](https://tree.taiga.io/project/penpot/us/2283)
- New focus mode in workspace [Taiga #2748](https://tree.taiga.io/project/penpot/us/2748) - New focus mode in workspace [Taiga #2748](https://tree.taiga.io/project/penpot/us/2748)
- Changed text shapes to be displayed as natives SVG text elements [Taiga #2759](https://tree.taiga.io/project/penpot/us/2759) - Changed text shapes to be displayed as natives SVG text elements [Taiga #2759](https://tree.taiga.io/project/penpot/us/2759)
- Texts now can have strokes, multiple fills and can be used as masks - Texts now can have strokes, multiple fills and can be used as masks
- Add the ability to specify the attr for retrieve the email on OIDC integration [#1460](https://github.com/penpot/penpot/issues/1460) - Add the ability to specify the attribute for retrieve the email on OIDC integration [#1460](https://github.com/penpot/penpot/issues/1460)
- Allow registration with invitation token when registration is disabled - Allow registration with invitation token when registration is disabled
- Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999) - Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999)
- Don't stop SVG import when an image cannot be imported [#1531](https://github.com/penpot/penpot/issues/1531) - Don't stop SVG import when an image cannot be imported [#1531](https://github.com/penpot/penpot/issues/1531)
- Fix paste shapes while editing text [Taiga #2396](https://tree.taiga.io/project/penpot/issue/2396)
- Show Penpot color in Safari tab bar [#1803](https://github.com/penpot/penpot/issues/1803) - Show Penpot color in Safari tab bar [#1803](https://github.com/penpot/penpot/issues/1803)
- Added option to disable snap to pixel and improved behaviour for sub-pixel drawing [#2552](https://tree.taiga.io/project/penpot/us/2552)
- Delete guides while supr on hover [#2823](https://tree.taiga.io/project/penpot/us/2823)
- Opt-in subscription on on-premise instances [#2772](https://tree.taiga.io/project/penpot/us/2772)
- Optimizations in frame thumbnails [#3147](https://tree.taiga.io/project/penpot/us/3147)
### :bug: Bugs fixed ### :bug: Bugs fixed
- Constraints are not well assigned when default and multiselection [Taiga #3069](https://tree.taiga.io/project/penpot/issue/3069)
- Duplicate artboards create new flows if needed [Taiga #2221](https://tree.taiga.io/project/penpot/issue/2221)
- Fix paste shapes while editing text [Taiga #2396](https://tree.taiga.io/project/penpot/issue/2396)
- Round the size values on handoff to two decimals [Taiga #3227](https://tree.taiga.io/project/penpot/issue/3227) - Round the size values on handoff to two decimals [Taiga #3227](https://tree.taiga.io/project/penpot/issue/3227)
- Fix blend modes ignored in component updates [Taiga #2626](https://tree.taiga.io/project/penpot/issue/2626) - Fix blend modes ignored in component updates [Taiga #2626](https://tree.taiga.io/project/penpot/issue/2626)
- Fix internal error when hoverin over shape [Taiga #3237](https://tree.taiga.io/project/penpot/issue/3237) - Fix internal error when hoverin over shape [Taiga #3237](https://tree.taiga.io/project/penpot/issue/3237)
@ -99,6 +104,11 @@
- Fix resize rotated shape with top&down constraints [Taiga #3167](https://tree.taiga.io/project/penpot/issue/3167) - Fix resize rotated shape with top&down constraints [Taiga #3167](https://tree.taiga.io/project/penpot/issue/3167)
- Fix multi user not working [Taiga #3195](https://tree.taiga.io/project/penpot/issue/3195) - Fix multi user not working [Taiga #3195](https://tree.taiga.io/project/penpot/issue/3195)
- Fix guides are not duplicated with the artboard [Taiga #3072](https://tree.taiga.io/project/penpot/issue/3072) - Fix guides are not duplicated with the artboard [Taiga #3072](https://tree.taiga.io/project/penpot/issue/3072)
- Fix problem when changing group size with decimal values [Taiga #3203](https://tree.taiga.io/project/penpot/issue/3203)
- Fix error when drawing curves with only one point [Taiga #3282](https://tree.taiga.io/project/penpot/issue/3282)
- Fix issue with paste ordering sometimes not being respected [Taiga #3268](https://tree.taiga.io/project/penpot/issue/3268)
- Fix problem when export/importing guides attached to frame [#1838](https://github.com/penpot/penpot/issues/1838)
- Fix problem when resizing a group with texts with auto-width/height [#3171](https://tree.taiga.io/project/penpot/issue/3171)
### :arrow_up: Deps updates ### :arrow_up: Deps updates
### :heart: Community contributions by (Thank you!) ### :heart: Community contributions by (Thank you!)

34
common/src/app/common/geom/shapes/constraints.cljc
View file

@ -103,25 +103,25 @@
(defmethod constraint-modifier :scale (defmethod constraint-modifier :scale
[_ axis _ _ modifiers _] [_ axis _ _ modifiers _]
(let [{:keys [resize-vector resize-vector-2 displacement]} modifiers] (let [{:keys [resize-vector resize-vector-2 displacement]} modifiers]
(cond-> {} (cond-> {}
(and (some? resize-vector) (and (some? resize-vector)
(not (mth/close? (axis resize-vector) 1))) (not= (axis resize-vector) 1))
(assoc :resize-origin (:resize-origin modifiers) (assoc :resize-origin (:resize-origin modifiers)
:resize-vector (if (= :x axis) :resize-vector (if (= :x axis)
(gpt/point (:x resize-vector) 1) (gpt/point (:x resize-vector) 1)
(gpt/point 1 (:y resize-vector)))) (gpt/point 1 (:y resize-vector))))
(and (= :y axis) (some? resize-vector-2) (and (= :y axis) (some? resize-vector-2)
(not (mth/close? (:y resize-vector-2) 1))) (not (mth/close? (:y resize-vector-2) 1)))
(assoc :resize-origin (:resize-origin-2 modifiers) (assoc :resize-origin (:resize-origin-2 modifiers)
:resize-vector (gpt/point 1 (:y resize-vector-2))) :resize-vector (gpt/point 1 (:y resize-vector-2)))
(some? displacement) (some? displacement)
(assoc :displacement (assoc :displacement
(get-displacement axis (-> (gpt/point 0 0) (get-displacement axis (-> (gpt/point 0 0)
(gpt/transform displacement) (gpt/transform displacement)
(gpt/transform (:resize-transform-inverse modifiers (gmt/matrix))) (gpt/transform (:resize-transform-inverse modifiers (gmt/matrix)))
axis)))))) axis))))))
(defmethod constraint-modifier :default [_ _ _ _ _] (defmethod constraint-modifier :default [_ _ _ _ _]
{}) {})

2
frontend/deps.edn
View file

@ -9,7 +9,7 @@
funcool/beicon {:mvn/version "2021.07.05-1"} funcool/beicon {:mvn/version "2021.07.05-1"}
funcool/okulary {:mvn/version "2022.04.11-16"} funcool/okulary {:mvn/version "2022.04.11-16"}
funcool/potok {:mvn/version "2021.09.20-0"} funcool/potok {:mvn/version "2022.04.28-67"}
funcool/rumext {:mvn/version "2022.04.19-148"} funcool/rumext {:mvn/version "2022.04.19-148"}
funcool/tubax {:mvn/version "2021.05.20-0"} funcool/tubax {:mvn/version "2021.05.20-0"}

BIN
frontend/resources/images/features/1.13-focus.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 889 KiB

BIN
frontend/resources/images/features/1.13-members.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 726 KiB

BIN
frontend/resources/images/features/1.13-multi-export.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 352 KiB

BIN
frontend/resources/images/features/1.13-multiple-fills.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 404 KiB

11
frontend/src/app/main/data/workspace.cljs
View file

@ -1482,12 +1482,11 @@
(let [set-index (fn [[result index] id] (let [set-index (fn [[result index] id]
[(assoc result id index) (inc index)]) [(assoc result id index) (inc index)])
map-ids (when index map-ids
(->> (vals paste-objects) (->> selected
(filter #(not (selected (:parent-id %)))) (map #(get-in paste-objects [% :id]))
(map :id) (reduce set-index [{} (inc index)])
(reduce set-index [{} (inc index)]) first)]
first))]
(if (and (= :add-obj (:type change)) (if (and (= :add-obj (:type change))
(contains? map-ids (:old-id change))) (contains? map-ids (:old-id change)))
(assoc change :index (get map-ids (:old-id change))) (assoc change :index (get map-ids (:old-id change)))

3
frontend/src/app/main/data/workspace/common.cljs
View file

@ -107,7 +107,8 @@
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :expanded id] true)))) (assoc-in state [:workspace-local :expanded id] true))))
(def collapse-all (defn collapse-all
[]
(ptk/reify ::collapse-all (ptk/reify ::collapse-all
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]

36
frontend/src/app/main/data/workspace/drawing.cljs
View file

@ -37,29 +37,29 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ stream] (watch [_ _ stream]
(let [stoper (rx/filter (ptk/type? ::clear-drawing) stream)] (rx/merge
(rx/merge (when (= tool :path)
(when (= tool :path) (rx/of (start-drawing :path)))
(rx/of (start-drawing :path)))
(when (= tool :curve) (when (= tool :curve)
(let [stopper (->> stream (rx/filter dwc/interrupt?))] (let [stopper (->> stream (rx/filter dwc/interrupt?))]
(->> stream (->> stream
(rx/filter (ptk/type? ::common/handle-finish-drawing)) (rx/filter (ptk/type? ::common/handle-finish-drawing))
(rx/take 1) (rx/take 1)
(rx/observe-on :async) (rx/observe-on :async)
(rx/map #(select-for-drawing tool data)) (rx/map #(select-for-drawing tool data))
(rx/take-until stopper)))) (rx/take-until stopper))))
;; NOTE: comments are a special case and they manage they ;; NOTE: comments are a special case and they manage they
;; own interrupt cycle.q ;; own interrupt cycle.q
(when (and (not= tool :comments) (when (and (not= tool :comments)
(not= tool :path)) (not= tool :path))
(let [stopper (rx/filter (ptk/type? ::clear-drawing) stream)]
(->> stream (->> stream
(rx/filter dwc/interrupt?) (rx/filter dwc/interrupt?)
(rx/take 1) (rx/take 1)
(rx/map (constantly common/clear-drawing)) (rx/map common/clear-drawing)
(rx/take-until stoper))))))))) (rx/take-until stopper)))))))))
;; NOTE/TODO: when an exception is raised in some point of drawing the ;; NOTE/TODO: when an exception is raised in some point of drawing the

2
frontend/src/app/main/data/workspace/drawing/box.cljs
View file

@ -101,4 +101,4 @@
#(update-drawing % (cond-> point snap-pixel? gpt/round) shift?))) #(update-drawing % (cond-> point snap-pixel? gpt/round) shift?)))
(rx/take-until stoper)) (rx/take-until stoper))
(rx/of common/handle-finish-drawing)))))) (rx/of (common/handle-finish-drawing)))))))

9
frontend/src/app/main/data/workspace/drawing/common.cljs
View file

@ -16,13 +16,15 @@
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk])) [potok.core :as ptk]))
(def clear-drawing (defn clear-drawing
[]
(ptk/reify ::clear-drawing (ptk/reify ::clear-drawing
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-drawing dissoc :tool :object)))) (update state :workspace-drawing dissoc :tool :object))))
(def handle-finish-drawing (defn handle-finish-drawing
[]
(ptk/reify ::handle-finish-drawing (ptk/reify ::handle-finish-drawing
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
@ -71,5 +73,6 @@
(rx/empty))))) (rx/empty)))))
;; Delay so the mouse event can read the drawing state ;; Delay so the mouse event can read the drawing state
(->> (rx/of clear-drawing) (->> (rx/of (clear-drawing))
(rx/delay 0))))))) (rx/delay 0)))))))

27
frontend/src/app/main/data/workspace/drawing/curve.cljs
View file

@ -59,15 +59,22 @@
(dissoc :segments) (dissoc :segments)
(assoc :content content) (assoc :content content)
(assoc :selrect selrect) (assoc :selrect selrect)
(assoc :points points)))) (assoc :points points)
(defn finish-drawing-curve [state] (cond-> (or (empty? points) (nil? selrect) (<= (count content) 1))
(update-in (assoc :initialized? false)))))
state [:workspace-drawing :object]
(fn [shape] (defn finish-drawing-curve
(-> shape []
(update :segments #(ups/simplify % simplify-tolerance)) (ptk/reify ::finish-drawing-curve
(curve-to-path))))) ptk/UpdateEvent
(update [_ state]
(letfn [(update-curve [shape]
(-> shape
(update :segments #(ups/simplify % simplify-tolerance))
(curve-to-path)))]
(-> state
(update-in [:workspace-drawing :object] update-curve))))))
(defn handle-drawing-curve [] (defn handle-drawing-curve []
(ptk/reify ::handle-drawing-curve (ptk/reify ::handle-drawing-curve
@ -81,6 +88,6 @@
(rx/map (fn [pt] #(insert-point-segment % pt))) (rx/map (fn [pt] #(insert-point-segment % pt)))
(rx/take-until stoper)) (rx/take-until stoper))
(rx/of (setup-frame-curve) (rx/of (setup-frame-curve)
finish-drawing-curve (finish-drawing-curve)
common/handle-finish-drawing)))))) (common/handle-finish-drawing)))))))

2
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

@ -275,7 +275,7 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(rx/of (setup-frame-path) (rx/of (setup-frame-path)
dwdc/handle-finish-drawing (dwdc/handle-finish-drawing)
(dwc/start-edition-mode shape-id) (dwc/start-edition-mode shape-id)
(change-edit-mode :draw))))) (change-edit-mode :draw)))))

2
frontend/src/app/main/data/workspace/persistence.cljs
View file

@ -246,7 +246,7 @@
(ptk/reify ::fetch-bundle (ptk/reify ::fetch-bundle
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(->> (rx/zip (rp/query :file {:id file-id}) (->> (rx/zip (rp/query :file-raw {:id file-id})
(rp/query :team-users {:file-id file-id}) (rp/query :team-users {:file-id file-id})
(rp/query :project {:id project-id}) (rp/query :project {:id project-id})
(rp/query :file-libraries {:file-id file-id})) (rp/query :file-libraries {:file-id file-id}))

16
frontend/src/app/main/data/workspace/svg_upload.cljs
View file

@ -124,7 +124,7 @@
(get-in shape [:svg-attrs :style :stroke-opacity]) (get-in shape [:svg-attrs :style :stroke-opacity])
(-> (update-in [:svg-attrs :style] dissoc :stroke-opacity) (-> (update-in [:svg-attrs :style] dissoc :stroke-opacity)
(assoc-in [:fills 0 :stroke-opacity] (-> (get-in shape [:svg-attrs :style :stroke-opacity]) (assoc-in [:strokes 0 :stroke-opacity] (-> (get-in shape [:svg-attrs :style :stroke-opacity])
(d/parse-double)))) (d/parse-double))))
(get-in shape [:svg-attrs :stroke-width]) (get-in shape [:svg-attrs :stroke-width])
@ -395,14 +395,12 @@
:image (create-image-shape name frame-id svg-data element-data) :image (create-image-shape name frame-id svg-data element-data)
#_other (create-raw-svg name frame-id svg-data element-data)))] #_other (create-raw-svg name frame-id svg-data element-data)))]
(when (some? shape) (when (some? shape)
(let [shape (assoc shape :fills []) (let [shape (-> shape
shape (assoc shape :strokes []) (assoc :fills [])
(assoc :strokes [])
shape (when (some? shape) (assoc :svg-defs (select-keys (:defs svg-data) references))
(-> shape (setup-fill)
(assoc :svg-defs (select-keys (:defs svg-data) references)) (setup-stroke))
(setup-fill)
(setup-stroke)))
children (cond->> (:content element-data) children (cond->> (:content element-data)
(or (= tag :g) (= tag :svg)) (or (= tag :g) (= tag :svg))

12
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -384,6 +384,11 @@
(defn commit-position-data (defn commit-position-data
[] []
(ptk/reify ::commit-position-data (ptk/reify ::commit-position-data
ptk/UpdateEvent
(update [_ state]
(let [ids (keys (::update-position-data state))]
(update state :workspace-text-modifiers #(apply dissoc % ids))))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [position-data (::update-position-data state)] (let [position-data (::update-position-data state)]
@ -404,9 +409,10 @@
(ptk/reify ::update-position-data (ptk/reify ::update-position-data
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(if (nil? (::update-position-data-debounce state)) (let [state (assoc-in state [:workspace-text-modifier id :position-data] position-data)]
(assoc state ::update-position-data-debounce start) (if (nil? (::update-position-data-debounce state))
(assoc-in state [::update-position-data id] position-data))) (assoc state ::update-position-data-debounce start)
(assoc-in state [::update-position-data id] position-data))))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]

115
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -110,7 +110,7 @@
;; geometric attributes of the shapes. ;; geometric attributes of the shapes.
(declare clear-local-transform) (declare clear-local-transform)
(declare set-modifiers-recursive) (declare set-objects-modifiers)
(declare get-ignore-tree) (declare get-ignore-tree)
(defn- set-modifiers (defn- set-modifiers
@ -139,7 +139,7 @@
(fn [state id] (fn [state id]
(let [shape (get objects id)] (let [shape (get objects id)]
(update state :workspace-modifiers (update state :workspace-modifiers
#(set-modifiers-recursive % objects shape modifiers ignore-constraints snap-pixel?))))] #(set-objects-modifiers % objects shape modifiers ignore-constraints snap-pixel?))))]
(reduce setup-modifiers state ids)))))) (reduce setup-modifiers state ids))))))
@ -166,6 +166,20 @@
(update state :workspace-modifiers #(reduce update-shape % shapes))))))) (update state :workspace-modifiers #(reduce update-shape % shapes)))))))
(defn- update-grow-type
[shape old-shape]
(let [auto-width? (= :auto-width (:grow-type shape))
auto-height? (= :auto-height (:grow-type shape))
changed-width? (not (mth/close? (:width shape) (:width old-shape)))
changed-height? (not (mth/close? (:height shape) (:height old-shape)))
change-to-fixed? (or (and auto-width? (or changed-height? changed-width?))
(and auto-height? changed-height?))]
(cond-> shape
change-to-fixed?
(assoc :grow-type :fixed))))
(defn- apply-modifiers (defn- apply-modifiers
[ids] [ids]
(us/verify (s/coll-of uuid?) ids) (us/verify (s/coll-of uuid?) ids)
@ -182,27 +196,33 @@
(rx/of (dwu/start-undo-transaction) (rx/of (dwu/start-undo-transaction)
(dwg/move-frame-guides ids-with-children) (dwg/move-frame-guides ids-with-children)
(dch/update-shapes (dch/update-shapes
ids-with-children ids-with-children
(fn [shape] (fn [shape]
(let [modif (get object-modifiers (:id shape))] (let [modif (get object-modifiers (:id shape))
(gsh/transform-shape (merge shape modif)))) text-shape? (cph/text-shape? shape)]
{:reg-objects? true (-> shape
:ignore-tree ignore-tree (merge modif)
;; Attributes that can change in the transform. This way we don't have to check (gsh/transform-shape)
;; all the attributes (cond-> text-shape?
:attrs [:selrect (update-grow-type shape)))))
:points {:reg-objects? true
:x :ignore-tree ignore-tree
:y ;; Attributes that can change in the transform. This way we don't have to check
:width ;; all the attributes
:height :attrs [:selrect
:content :points
:transform :x
:transform-inverse :y
:rotation :width
:position-data :height
:flip-x :content
:flip-y]}) :transform
:transform-inverse
:rotation
:position-data
:flip-x
:flip-y
:grow-type]})
(clear-local-transform) (clear-local-transform)
(dwu/commit-undo-transaction)))))) (dwu/commit-undo-transaction))))))
@ -330,25 +350,28 @@
(assoc :displacement (gmt/translate-matrix delta-v))))] (assoc :displacement (gmt/translate-matrix delta-v))))]
modifiers))) modifiers)))
(defn- set-modifiers-recursive (defn- set-objects-modifiers
[modif-tree objects shape modifiers ignore-constraints snap-pixel?] [modif-tree objects shape modifiers ignore-constraints snap-pixel?]
(letfn [(set-modifiers-rec
[modif-tree shape modifiers]
(let [children (map (d/getf objects) (:shapes shape)) (let [children (map (d/getf objects) (:shapes shape))
modifiers (cond-> modifiers snap-pixel? (set-pixel-precision shape)) modifiers (cond-> modifiers snap-pixel? (set-pixel-precision shape))
transformed-rect (gsh/transform-selrect (:selrect shape) modifiers) transformed-rect (gsh/transform-selrect (:selrect shape) modifiers)
set-child set-child
(fn [modif-tree child] (fn [modif-tree child]
(let [child-modifiers (gsh/calc-child-modifiers shape child modifiers ignore-constraints transformed-rect)] (let [child-modifiers (gsh/calc-child-modifiers shape child modifiers ignore-constraints transformed-rect)]
(cond-> modif-tree (cond-> modif-tree
(not (gsh/empty-modifiers? child-modifiers)) (not (gsh/empty-modifiers? child-modifiers))
(set-modifiers-recursive objects child child-modifiers ignore-constraints snap-pixel?)))) (set-modifiers-rec child child-modifiers))))
modif-tree modif-tree
(-> modif-tree (-> modif-tree
(assoc-in [(:id shape) :modifiers] modifiers))] (assoc-in [(:id shape) :modifiers] modifiers))]
(reduce set-child modif-tree children))) (reduce set-child modif-tree children)))]
(set-modifiers-rec modif-tree shape modifiers)))
(defn- get-ignore-tree (defn- get-ignore-tree
"Retrieves a map with the flag `ignore-geometry?` given a tree of modifiers" "Retrieves a map with the flag `ignore-geometry?` given a tree of modifiers"
@ -480,12 +503,8 @@
focus (:workspace-focus-selected state) focus (:workspace-focus-selected state)
zoom (get-in state [:workspace-local :zoom] 1) zoom (get-in state [:workspace-local :zoom] 1)
objects (wsh/lookup-page-objects state page-id) objects (wsh/lookup-page-objects state page-id)
resizing-shapes (map #(get objects %) ids) resizing-shapes (map #(get objects %) ids)]
text-shapes-ids (->> resizing-shapes
(filter #(= :text (:type %)))
(map :id))]
(rx/concat (rx/concat
(rx/of (dch/update-shapes text-shapes-ids #(assoc % :grow-type :fixed)))
(->> ms/mouse-position (->> ms/mouse-position
(rx/with-latest-from ms/mouse-position-shift ms/mouse-position-alt) (rx/with-latest-from ms/mouse-position-shift ms/mouse-position-alt)
(rx/map normalize-proportion-lock) (rx/map normalize-proportion-lock)
@ -507,15 +526,17 @@
(ptk/reify ::update-dimensions (ptk/reify ::update-dimensions
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [page-id (:current-page-id state) (let [objects (wsh/lookup-page-objects state)
objects (get-in state [:workspace-data :pages-index page-id :objects]) layout (get state :workspace-layout)
snap-pixel? (contains? layout :snap-pixel-grid)
update-modifiers update-modifiers
(fn [state id] (fn [state id]
(let [shape (get objects id) (let [shape (get objects id)
modifiers (gsh/resize-modifiers shape attr value)] modifiers (gsh/resize-modifiers shape attr value)]
(update state :workspace-modifiers (-> state
#(set-modifiers-recursive % objects shape modifiers false false))))] (update :workspace-modifiers
#(set-objects-modifiers % objects shape modifiers false (and snap-pixel? (int? value)))))))]
(reduce update-modifiers state ids))) (reduce update-modifiers state ids)))
ptk/WatchEvent ptk/WatchEvent

6
frontend/src/app/main/repo.cljs
View file

@ -82,9 +82,9 @@
[id params] [id params]
(send-query! id params)) (send-query! id params))
(defmethod query :file (defmethod query :file-raw
[id params] [_id params]
(send-query! id params {:raw-transit? true})) (send-query! :file params {:raw-transit? true}))
(defmethod mutation :default (defmethod mutation :default
[id params] [id params]

3
frontend/src/app/main/ui/releases.cljs
View file

@ -13,6 +13,7 @@
[app.main.ui.releases.v1-10] [app.main.ui.releases.v1-10]
[app.main.ui.releases.v1-11] [app.main.ui.releases.v1-11]
[app.main.ui.releases.v1-12] [app.main.ui.releases.v1-12]
[app.main.ui.releases.v1-13]
[app.main.ui.releases.v1-4] [app.main.ui.releases.v1-4]
[app.main.ui.releases.v1-5] [app.main.ui.releases.v1-5]
[app.main.ui.releases.v1-6] [app.main.ui.releases.v1-6]
@ -83,4 +84,4 @@
(defmethod rc/render-release-notes "0.0" (defmethod rc/render-release-notes "0.0"
[params] [params]
(rc/render-release-notes (assoc params :version "1.12"))) (rc/render-release-notes (assoc params :version "1.13")))

108
frontend/src/app/main/ui/releases/v1_13.cljs Normal file
View file

@ -0,0 +1,108 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.ui.releases.v1-13
(:require
[app.main.ui.releases.common :as c]
[rumext.alpha :as mf]))
(defmethod c/render-release-notes "1.13"
[{:keys [slide klass next finish navigate version]}]
(mf/html
(case @slide
:start
[:div.modal-overlay
[:div.animated {:class @klass}
[:div.modal-container.onboarding.feature
[:div.modal-left
[:img {:src "images/login-on.jpg" :border "0" :alt "What's new Beta release 1.13"}]]
[:div.modal-right
[:div.modal-title
[:h2 "What's new?"]]
[:span.release "Beta version " version]
[:div.modal-content
[:p "Penpot continues growing with new features that improve performance, user experience and visual design."]
[:p "We are happy to show you a sneak peak of the most important stuff that the Beta 1.13 version brings."]]
[:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"]]]
[:img.deco {:src "images/deco-left.png" :border "0"}]
[:img.deco.right {:src "images/deco-right.png" :border "0"}]]]]
0
[:div.modal-overlay
[:div.animated {:class @klass}
[:div.modal-container.onboarding.feature
[:div.modal-left
[:img {:src "images/features/1.13-multi-export.gif" :border "0" :alt "Multiple exports"}]]
[:div.modal-right
[:div.modal-title
[:h2 "Multiple exports"]]
[:div.modal-content
[:p "Speed your workflow exporting multiple elements simultaneously."]
[:p "Use the export window to manage your multiple exports and be informed about the download progress. Big exports will happen in the background so you can continue designing in the meantime ;)"]]
[:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets
{:slide @slide
:navigate navigate
:total 4}]]]]]]
1
[:div.modal-overlay
[:div.animated {:class @klass}
[:div.modal-container.onboarding.feature
[:div.modal-left
[:img {:src "images/features/1.13-multiple-fills.gif" :border "0" :alt "Multiple fills and strokes"}]]
[:div.modal-right
[:div.modal-title
[:h2 "Multiple fills and strokes"]]
[:div.modal-content
[:p "Now you can add multiple color fills and strokes to a single element, including shapes and texts."]
[:p "This opens endless graphic possibilities such as combining gradients and blending modes in the same element to create visual effects."]]
[:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets
{:slide @slide
:navigate navigate
:total 4}]]]]]]
2
[:div.modal-overlay
[:div.animated {:class @klass}
[:div.modal-container.onboarding.feature
[:div.modal-left
[:img {:src "images/features/1.13-members.gif" :border "0" :alt "Members area redesign"}]]
[:div.modal-right
[:div.modal-title
[:h2 "Members area redesign"]]
[:div.modal-content
[:p "Penpot is meant for teams, that’s why we decided to give some love to the members area."]
[:p "A refreshed interface and two new features: the Invitations section where you can check the state of the team invites and the ability to invite multiple members at the same time."]]
[:div.modal-navigation
[:button.btn-secondary {:on-click next} "Continue"]
[:& c/navigation-bullets
{:slide @slide
:navigate navigate
:total 4}]]]]]]
3
[:div.modal-overlay
[:div.animated {:class @klass}
[:div.modal-container.onboarding.feature
[:div.modal-left
[:img {:src "images/features/1.13-focus.gif" :border "0" :alt "Focus mode"}]]
[:div.modal-right
[:div.modal-title
[:h2 "Focus mode"]]
[:div.modal-content
[:p "Select the elements of a page you want to work with in a specific moment hiding the rest so they don’t get in the way of your attention."]
[:p "This option is also useful to improve the performance in cases where the page has a large number of elements."]]
[:div.modal-navigation
[:button.btn-secondary {:on-click finish} "Start!"]
[:& c/navigation-bullets
{:slide @slide
:navigate navigate
:total 4}]]]]]])))

9
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.shapes.custom-stroke (ns app.main.ui.shapes.custom-stroke
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
@ -382,6 +383,14 @@
(some? style) (some? style)
(obj/set! "style" style))) (obj/set! "style" style)))
(some? (:svg-attrs shape))
(let [style
(-> (obj/get props "style")
(obj/clone)
(obj/set! "fill" clr/black))]
(-> props
(obj/set! "style" style)))
(and (= :path (:type shape)) (empty? (:fills shape))) (and (= :path (:type shape)) (empty? (:fills shape)))
(let [style (let [style
(-> (obj/get props "style") (-> (obj/get props "style")

18
frontend/src/app/main/ui/shapes/svg_defs.cljs
View file

@ -72,11 +72,13 @@
[:> (name tag) (clj->js attrs) [:> (name tag) (clj->js attrs)
[:> wrapper wrapper-props [:> wrapper wrapper-props
(for [node content] [:& svg-node {:type type (for [[index node] (d/enumerate content)]
:node node [:& svg-node {:key (dm/str "node-" index)
:prefix-id prefix-id :type type
:transform transform :node node
:bounds bounds}])]]))) :prefix-id prefix-id
:transform transform
:bounds bounds}])]])))
(defn svg-def-bounds [svg-def shape transform] (defn svg-def-bounds [svg-def shape transform]
(let [{:keys [tag]} svg-def] (let [{:keys [tag]} svg-def]
@ -107,10 +109,10 @@
(cond->> id (cond->> id
(contains? svg-defs id) (str render-id "-")))] (contains? svg-defs id) (str render-id "-")))]
;; TODO: no key?
(when (seq svg-defs) (when (seq svg-defs)
(for [svg-def (vals svg-defs)] (for [[key svg-def] svg-defs]
[:& svg-node {:type (:type shape) [:& svg-node {:key (dm/str key)
:type (:type shape)
:node svg-def :node svg-def
:prefix-id prefix-id :prefix-id prefix-id
:transform transform :transform transform

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

@ -117,6 +117,7 @@
thumb-renderer thumb-renderer
[:g.frame-thumbnail [:g.frame-thumbnail
[:> frame/frame-thumbnail {:shape (cond-> shape [:> frame/frame-thumbnail {:key (dm/str (:id shape))
:shape (cond-> shape
(some? thumbnail-data) (some? thumbnail-data)
(assoc :thumbnail thumbnail-data))}]]])))) (assoc :thumbnail thumbnail-data))}]]]))))

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

@ -38,15 +38,18 @@
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps transforms) (mf/deps transforms)
(fn [] (fn []
(when (and (empty? @prev-modifiers) (d/not-empty? modifiers)) (let [is-prev-val? (d/not-empty? @prev-modifiers)
(utils/start-transform! node shapes)) is-cur-val? (d/not-empty? modifiers)]
(when (d/not-empty? modifiers) (when (and (not is-prev-val?) is-cur-val?)
(utils/update-transform! node shapes transforms modifiers)) (utils/start-transform! node shapes))
(when (and (d/not-empty? @prev-modifiers) (empty? modifiers)) (when is-cur-val?
(utils/remove-transform! node @prev-shapes)) (utils/update-transform! node shapes transforms modifiers))
(reset! prev-modifiers modifiers) (when (and is-prev-val? (not is-cur-val?))
(reset! prev-transforms transforms) (utils/remove-transform! node @prev-shapes))
(reset! prev-shapes shapes)))))
(reset! prev-modifiers modifiers)
(reset! prev-transforms transforms)
(reset! prev-shapes shapes))))))

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

@ -48,11 +48,10 @@
(mf/use-callback (mf/use-callback
(fn [] (fn []
(let [canvas-node (mf/ref-val frame-canvas-ref) (let [canvas-node (mf/ref-val frame-canvas-ref)
img-node (mf/ref-val frame-image-ref)] img-node (mf/ref-val frame-image-ref)
(ts/raf thumb-data (draw-thumbnail-canvas canvas-node img-node)]
#(let [thumb-data (draw-thumbnail-canvas canvas-node img-node)] (st/emit! (dw/update-thumbnail id thumb-data))
(st/emit! (dw/update-thumbnail id thumb-data)) (reset! image-url nil))))
(reset! image-url nil))))))
on-change on-change
(mf/use-callback (mf/use-callback
@ -70,7 +69,6 @@
(dom/set-property! "height" height) (dom/set-property! "height" height)
(dom/set-property! "fill" "none") (dom/set-property! "fill" "none")
(obj/set! "innerHTML" frame-html)) (obj/set! "innerHTML" frame-html))
img-src (-> svg-node dom/node->xml dom/svg->data-uri)] img-src (-> svg-node dom/node->xml dom/svg->data-uri)]
(reset! image-url img-src))))))) (reset! image-url img-src)))))))

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

@ -108,7 +108,7 @@
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(if (and expanded? (kbd/shift? event)) (if (and expanded? (kbd/shift? event))
(st/emit! dwc/collapse-all) (st/emit! (dwc/collapse-all))
(st/emit! (dwc/toggle-collapse id)))) (st/emit! (dwc/toggle-collapse id))))
toggle-blocking toggle-blocking

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

@ -158,9 +158,10 @@
show-outlines? (and (nil? transform) (not edition) (not drawing-obj) (not (#{:comments :path :curve} drawing-tool))) show-outlines? (and (nil? transform) (not edition) (not drawing-obj) (not (#{:comments :path :curve} drawing-tool)))
show-pixel-grid? (and (contains? layout :show-pixel-grid) show-pixel-grid? (and (contains? layout :show-pixel-grid)
(>= zoom 8)) (>= zoom 8))
show-text-editor? (and editing-shape (= :text (:type editing-shape)))
show-presence? page-id show-presence? page-id
show-prototypes? (= options-mode :prototype) show-prototypes? (= options-mode :prototype)
show-selection-handlers? (and (seq selected) (not edition)) show-selection-handlers? (and (seq selected) (not show-text-editor?))
show-snap-distance? (and (contains? layout :dynamic-alignment) show-snap-distance? (and (contains? layout :dynamic-alignment)
(= transform :move) (= transform :move)
(seq selected)) (seq selected))
@ -172,7 +173,6 @@
show-artboard-names? (contains? layout :display-artboard-names) show-artboard-names? (contains? layout :display-artboard-names)
show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui))) show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui)))
show-text-editor? (and editing-shape (= :text (:type editing-shape)))
disabled-guides? (or drawing-tool transform)] disabled-guides? (or drawing-tool transform)]

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

@ -123,81 +123,75 @@
h-scrollbar-x) h-scrollbar-x)
on-mouse-move on-mouse-move
(mf/use-callback (fn [event axis]
(mf/deps zoom v-scrolling?) (when-let [_ (or @v-scrolling? @h-scrolling?)]
(fn [event axis] (let [viewport (mf/ref-val viewport-ref)
(when-let [_ (or @v-scrolling? @h-scrolling?)] start-pt (mf/ref-val start-ref)
(let [viewport (mf/ref-val viewport-ref) current-pt (dom/get-client-position event)
start-pt (mf/ref-val start-ref) current-pt-viewport (utils/translate-point-to-viewport viewport zoom current-pt)
current-pt (dom/get-client-position event) y-delta (/ (* (mf/ref-val height-factor-ref) (- (:y current-pt) (:y start-pt))) zoom)
current-pt-viewport (utils/translate-point-to-viewport viewport zoom current-pt) x-delta (/ (* (mf/ref-val width-factor-ref) (- (:x current-pt) (:x start-pt))) zoom)
y-delta (/ (* (mf/ref-val height-factor-ref) (- (:y current-pt) (:y start-pt))) zoom) new-v-scrollbar-y (-> current-pt-viewport
x-delta (/ (* (mf/ref-val width-factor-ref) (- (:x current-pt) (:x start-pt))) zoom) (:y)
new-v-scrollbar-y (-> current-pt-viewport (+ (mf/ref-val v-scrollbar-y-padding-ref)))
(:y) new-h-scrollbar-x (-> current-pt-viewport
(+ (mf/ref-val v-scrollbar-y-padding-ref))) (:x)
new-h-scrollbar-x (-> current-pt-viewport (+ (mf/ref-val h-scrollbar-x-padding-ref)))
(:x) viewport-update (-> {}
(+ (mf/ref-val h-scrollbar-x-padding-ref))) (cond-> (= axis :y) (assoc :y #(+ % y-delta)))
viewport-update (-> {} (cond-> (= axis :x) (assoc :x #(+ % x-delta))))]
(cond-> (= axis :y) (assoc :y #(+ % y-delta))) (mf/set-ref-val! vbox-y-ref vbox-y)
(cond-> (= axis :x) (assoc :x #(+ % x-delta))))] (mf/set-ref-val! vbox-x-ref vbox-x)
(mf/set-ref-val! vbox-y-ref vbox-y) (st/emit! (dw/update-viewport-position viewport-update))
(mf/set-ref-val! vbox-x-ref vbox-x) (mf/set-ref-val! v-scrollbar-y-ref new-v-scrollbar-y)
(st/emit! (dw/update-viewport-position viewport-update)) (mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! v-scrollbar-y-ref new-v-scrollbar-y) (mf/set-ref-val! start-ref current-pt))))
(mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! start-ref current-pt)))))
on-mouse-down on-mouse-down
(mf/use-callback (fn [event axis]
(mf/deps v-scrollbar-y scrollbar-height) (let [viewport (mf/ref-val viewport-ref)
(fn [event axis] start-pt (dom/get-client-position event)
(let [viewport (mf/ref-val viewport-ref) viewport-point (utils/translate-point-to-viewport viewport zoom start-pt)
start-pt (dom/get-client-position event) new-h-scrollbar-x (:x viewport-point)
viewport-point (utils/translate-point-to-viewport viewport zoom start-pt) new-v-scrollbar-y (:y viewport-point)
new-h-scrollbar-x (:x viewport-point) v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y)
new-v-scrollbar-y (:y viewport-point) h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x)
v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y) vbox-rect {:x vbox-x
h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x) :y vbox-y
vbox-rect {:x vbox-x :x1 vbox-x
:y vbox-y :y1 vbox-y
:x1 vbox-x :x2 (+ vbox-x (:width vbox))
:y1 vbox-y :y2 (+ vbox-y (:height vbox))
:x2 (+ vbox-x (:width vbox)) :width (:width vbox)
:y2 (+ vbox-y (:height vbox)) :height (:height vbox)}
:width (:width vbox) containing-rect (gsh/join-selrects [base-objects-rect vbox-rect])
:height (:height vbox)} height-factor (/ (:height containing-rect) vbox-height)
containing-rect (gsh/join-selrects [base-objects-rect vbox-rect]) width-factor (/ (:width containing-rect) vbox-width)]
height-factor (/ (:height containing-rect) vbox-height) (mf/set-ref-val! start-ref start-pt)
width-factor (/ (:width containing-rect) vbox-width)] (mf/set-ref-val! v-scrollbar-y-padding-ref v-scrollbar-y-padding)
(mf/set-ref-val! start-ref start-pt) (mf/set-ref-val! h-scrollbar-x-padding-ref h-scrollbar-x-padding)
(mf/set-ref-val! v-scrollbar-y-padding-ref v-scrollbar-y-padding) (mf/set-ref-val! v-scrollbar-y-ref (+ new-v-scrollbar-y v-scrollbar-y-padding))
(mf/set-ref-val! h-scrollbar-x-padding v-scrollbar-y-padding) (mf/set-ref-val! h-scrollbar-x-ref (+ new-h-scrollbar-x h-scrollbar-x-padding))
(mf/set-ref-val! v-scrollbar-y-ref (+ new-v-scrollbar-y v-scrollbar-y-padding)) (mf/set-ref-val! vbox-y-ref vbox-y)
(mf/set-ref-val! h-scrollbar-x-ref (+ new-h-scrollbar-x h-scrollbar-x-padding)) (mf/set-ref-val! vbox-x-ref vbox-x)
(mf/set-ref-val! vbox-y-ref vbox-y) (mf/set-ref-val! scrollbar-height-ref scrollbar-height)
(mf/set-ref-val! vbox-x-ref vbox-x) (mf/set-ref-val! scrollbar-width-ref scrollbar-width)
(mf/set-ref-val! scrollbar-height-ref scrollbar-height) (mf/set-ref-val! height-factor-ref height-factor)
(mf/set-ref-val! scrollbar-width-ref scrollbar-width) (mf/set-ref-val! width-factor-ref width-factor)
(mf/set-ref-val! height-factor-ref height-factor) (reset! v-scrolling? (= axis :y))
(mf/set-ref-val! width-factor-ref width-factor) (reset! h-scrolling? (= axis :x))))
(reset! v-scrolling? (= axis :y))
(reset! h-scrolling? (= axis :x)))))
on-mouse-up on-mouse-up
(mf/use-callback (fn []
(mf/deps) (reset! v-scrolling? false)
(fn [_] (reset! h-scrolling? false))]
(reset! v-scrolling? false)
(reset! h-scrolling? false)))]
[:* [:*
(when show-v-scroll? (when show-v-scroll?
[:g.v-scroll [:g.v-scroll
[:rect {:on-mouse-move #(on-mouse-move % :y) [:rect {:on-mouse-move #(on-mouse-move % :y)
:on-mouse-down #(on-mouse-down % :y) :on-mouse-down #(on-mouse-down % :y)
:on-mouse-up #(on-mouse-up % :y) :on-mouse-up on-mouse-up
:width (* inv-zoom 7) :width (* inv-zoom 7)
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)
@ -211,7 +205,7 @@
[:g.h-scroll [:g.h-scroll
[:rect {:on-mouse-move #(on-mouse-move % :x) [:rect {:on-mouse-move #(on-mouse-move % :x)
:on-mouse-down #(on-mouse-down % :x) :on-mouse-down #(on-mouse-down % :x)
:on-mouse-up #(on-mouse-up % :x) :on-mouse-up on-mouse-up
:width scrollbar-width :width scrollbar-width
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)

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

@ -91,7 +91,7 @@
(cond (cond
frame? frame?
[thumb-node [thumb-node
(dom/query shape-node ".frame-background") (dom/get-parent (dom/query shape-node ".frame-background"))
(dom/query shape-node ".frame-clip")] (dom/query shape-node ".frame-clip")]
;; For groups we don't want to transform the whole group but only ;; For groups we don't want to transform the whole group but only
@ -223,8 +223,7 @@
:else :else
(let [old-transform (dom/get-attribute node "data-old-transform")] (let [old-transform (dom/get-attribute node "data-old-transform")]
(if (some? old-transform) (if (some? old-transform)
(do (dom/remove-attribute! node "data-old-transform") (dom/remove-attribute! node "data-old-transform")
(dom/set-attribute! node "transform" old-transform))
(dom/remove-attribute! node "transform"))))))))) (dom/remove-attribute! node "transform")))))))))
(defn format-viewbox [vbox] (defn format-viewbox [vbox]

8
frontend/src/app/worker/import.cljs
View file

@ -344,7 +344,13 @@
(assoc :id (resolve page-id))) (assoc :id (resolve page-id)))
flows (->> (get-in page-data [:options :flows]) flows (->> (get-in page-data [:options :flows])
(mapv #(update % :starting-frame resolve))) (mapv #(update % :starting-frame resolve)))
page-data (d/assoc-in-when page-data [:options :flows] flows)
guides (-> (get-in page-data [:options :guides])
(d/update-vals #(update % :frame-id resolve)))
page-data (-> page-data
(d/assoc-in-when [:options :flows] flows)
(d/assoc-in-when [:options :guides] guides))
file (-> file (fb/add-page page-data)) file (-> file (fb/add-page page-data))
;; Preprocess nodes to parallel upload the images. Store the result in a table ;; Preprocess nodes to parallel upload the images. Store the result in a table

2
frontend/src/app/worker/thumbnails.cljs
View file

@ -79,7 +79,7 @@
(let [objects (:objects page) (let [objects (:objects page)
frame (some->> page :thumbnail-frame-id (get objects)) frame (some->> page :thumbnail-frame-id (get objects))
element (if frame element (if frame
(mf/element render/frame-svg #js {:objects objects :frame frame}) (mf/element render/frame-svg #js {:objects objects :frame frame :show-thumbnails? true})
(mf/element render/page-svg #js {:data page :thumbnails? true}))] (mf/element render/page-svg #js {:data page :thumbnails? true}))]
{:data (rds/renderToStaticMarkup element) {:data (rds/renderToStaticMarkup element)
:fonts @fonts/loaded :fonts @fonts/loaded