3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 03:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Change column/row from cell options

Browse source
This commit is contained in:
alonso.torres 2023-05-10 12:42:43 +02:00
parent f5bb6b05f3
commit 47e927d571
9 changed files with 316 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

46
common/src/app/common/geom/shapes/grid_layout/positions.cljc
View file

@ -128,13 +128,13 @@
(let [hv #(gpo/start-hv layout-bounds %) (let [hv #(gpo/start-hv layout-bounds %)
vv #(gpo/start-vv layout-bounds %) vv #(gpo/start-vv layout-bounds %)
;;make-is-inside-track make-is-inside-track
;;(fn [type] (fn [type]
;; (let [[vfn ofn] (if (= type :column) [vv hv] [hv vv])] (let [[vfn ofn] (if (= type :column) [vv hv] [hv vv])]
;; (fn is-inside-track? [{:keys [start-p size] :as track}] (fn is-inside-track? [{:keys [start-p size] :as track}]
;; (let [unit-v (vfn 1) (let [unit-v (vfn 1)
;; end-p (gpt/add start-p (ofn size))] end-p (gpt/add start-p (ofn size))]
;; (is-inside-lines? [start-p unit-v] [end-p unit-v] position))))) (is-inside-lines? [start-p unit-v] [end-p unit-v] position)))))
make-min-distance-track make-min-distance-track
(fn [type] (fn [type]
@ -149,25 +149,29 @@
[[cur-idx track] (min dist-1 dist-2)] [[cur-idx track] (min dist-1 dist-2)]
[selected selected-dist]))))) [selected selected-dist])))))
;;[col-idx column] ;; Check if it's inside a track
;;(->> (d/enumerate column-tracks)
;; (d/seek (comp (make-is-inside-track :column) second)))
;;
;;[row-idx row]
;;(->> (d/enumerate row-tracks)
;; (d/seek (comp (make-is-inside-track :row) second)))
[col-idx column] [col-idx column]
(->> (d/enumerate column-tracks) (->> (d/enumerate column-tracks)
(reduce (make-min-distance-track :column) [[nil nil] ##Inf]) (d/seek (comp (make-is-inside-track :column) second)))
(first))
[row-idx row] [row-idx row]
(->> (d/enumerate row-tracks) (->> (d/enumerate row-tracks)
(reduce (make-min-distance-track :row) [[nil nil] ##Inf]) (d/seek (comp (make-is-inside-track :row) second)))
(first))
] ;; If not inside we find the closest start/end line
[col-idx column]
(if (some? column)
[col-idx column]
(->> (d/enumerate column-tracks)
(reduce (make-min-distance-track :column) [[nil nil] ##Inf])
(first)))
[row-idx row]
(if (some? row)
[row-idx row]
(->> (d/enumerate row-tracks)
(reduce (make-min-distance-track :row) [[nil nil] ##Inf])
(first)))]
(when (and (some? column) (some? row)) (when (and (some? column) (some? row))
[(inc row-idx) (inc col-idx)]))) [(inc row-idx) (inc col-idx)])))

152
common/src/app/common/types/shape/layout.cljc
View file

@ -593,8 +593,7 @@
(assoc result id (assoc result id
(merge {:id id (merge {:id id
:row (inc row-idx) :row (inc row-idx)
:column new-col-num :column new-col-num}
:track? true}
grid-cell-defaults)))) grid-cell-defaults))))
(:layout-grid-cells parent)))] (:layout-grid-cells parent)))]
(-> parent (-> parent
@ -617,8 +616,7 @@
(assoc result id (assoc result id
(merge {:id id (merge {:id id
:column (inc col-idx) :column (inc col-idx)
:row new-row-num :row new-row-num}
:track? true}
grid-cell-defaults)))) grid-cell-defaults))))
(:layout-grid-cells parent)))] (:layout-grid-cells parent)))]
(-> parent (-> parent
@ -852,86 +850,98 @@
(first))) (first)))
parent))) parent)))
(defn create-cells
"Create cells in an area. One cell per row/column "
[parent [column row column-span row-span]]
(->> (for [row (range row (+ row row-span))
column (range column (+ column column-span))]
(merge grid-cell-defaults
{:id (uuid/next)
:row row
:column column
:row-span 1
:column-span 1}))
(reduce #(assoc-in %1 [:layout-grid-cells (:id %2)] %2) parent)))
(defn resize-cell-area (defn resize-cell-area
"Increases/decreases the cell size" "Increases/decreases the cell size"
[parent row column new-row new-column new-row-span new-column-span] [parent row column new-row new-column new-row-span new-column-span]
(let [cells (vec (get-cells parent {:sort? true})) (if (and (>= new-row 0)
(>= new-column 0)
(>= new-row-span 1)
(>= new-column-span 1))
(let [prev-cell (cell-by-row-column parent row column)
prev-area (sga/make-area prev-cell)
prev-cell (cell-by-row-column parent row column) target-cell
prev-area (sga/make-area prev-cell) (-> prev-cell
(assoc
:row new-row
:column new-column
:row-span new-row-span
:column-span new-column-span))
target-cell target-area (sga/make-area target-cell)
(-> prev-cell
(assoc
:row new-row
:column new-column
:row-span new-row-span
:column-span new-column-span))
target-area (sga/make-area target-cell)] ;; Create columns/rows if necessary
parent
(->> (range (count (:layout-grid-columns parent))
(+ new-column new-column-span -1))
(reduce (fn [parent _] (add-grid-column parent default-track-value)) parent))
(if (sga/contains? prev-area target-area) parent
;; The new area is smaller than the previous. We need to create cells in the empty space (->> (range (count (:layout-grid-rows parent))
(let [parent (+ new-row new-row-span -1))
(-> parent (reduce (fn [parent _] (add-grid-row parent default-track-value)) parent))
(assoc-in [:layout-grid-cells (:id target-cell)] target-cell))
new-cells parent (create-cells parent prev-area)
(->> (sga/difference prev-area target-area)
(mapcat (fn [[column row column-span row-span]]
(for [new-col (range column (+ column column-span))
new-row (range row (+ row row-span))]
(merge grid-cell-defaults
{:id (uuid/next)
:row new-row
:column new-col
:row-span 1
:column-span 1})))))
parent cells (vec (get-cells parent {:sort? true}))
(->> new-cells remove-cells
(reduce #(assoc-in %1 [:layout-grid-cells (:id %2)] %2) parent))] (->> cells
(filter #(and (not= (:id target-cell) (:id %))
(sga/contains? target-area (sga/make-area %))))
(into #{}))
parent) split-cells
(->> cells
(filter #(and (not= (:id target-cell) (:id %))
(not (contains? remove-cells %))
(sga/intersects? target-area (sga/make-area %)))))
;; The new area is bigger we need to remove the cells filled and split the intersections [parent _]
(let [remove-cells (->> cells (->> (d/enumerate cells)
(filter #(and (not= (:id target-cell) (:id %)) (reduce (fn [[parent cells] [index cur-cell]]
(sga/contains? target-area (sga/make-area %)))) (if (contains? remove-cells cur-cell)
(into #{})) (let [[parent cells] (free-cell-push parent cells index)]
[parent (conj cells cur-cell)])
[parent cells]))
[parent cells]))
split-cells (->> cells (filter #(and (not= (:id target-cell) (:id %)) parent
(not (contains? remove-cells %)) (-> parent
(sga/intersects? target-area (sga/make-area %))))) (assoc-in [:layout-grid-cells (:id target-cell)] target-cell))
[parent _] parent
(->> (d/enumerate cells) (->> remove-cells
(reduce (fn [[parent cells] [index cur-cell]] (reduce (fn [parent cell]
(if (contains? remove-cells cur-cell) (update parent :layout-grid-cells dissoc (:id cell)))
(let [[parent cells] (free-cell-push parent cells index)] parent))
[parent (conj cells cur-cell)])
[parent cells]))
[parent cells]))
parent parent
(-> parent (->> split-cells
(assoc-in [:layout-grid-cells (:id target-cell)] target-cell)) (reduce (fn [parent cell]
(let [new-areas (sga/difference (sga/make-area cell) target-area)]
(as-> parent $
(update-in $ [:layout-grid-cells (:id cell)] merge (sga/area->cell-props (first new-areas)))
(reduce (fn [parent area]
(let [cell (merge (assoc grid-cell-defaults :id (uuid/next)) (sga/area->cell-props area))]
(assoc-in parent [:layout-grid-cells (:id cell)] cell))) $ new-areas))))
parent))]
parent)
parent ;; Not valid resize: we don't alter the layout
(->> remove-cells parent))
(reduce (fn [parent cell]
(update parent :layout-grid-cells dissoc (:id cell)))
parent))
parent
(->> split-cells
(reduce (fn [parent cell]
(let [new-areas (sga/difference (sga/make-area cell) target-area)]
(as-> parent $
(update-in $ [:layout-grid-cells (:id cell)] merge (sga/area->cell-props (first new-areas)))
(reduce (fn [parent area]
(let [cell (merge (assoc grid-cell-defaults :id (uuid/next)) (sga/area->cell-props area))]
(assoc-in parent [:layout-grid-cells (:id cell)] cell))) $ new-areas))))
parent))]
parent))))

1
frontend/src/app/main/data/workspace/grid_layout/editor.cljs
View file

@ -61,3 +61,4 @@
srect (gsh/make-selrect x y width height)] srect (gsh/make-selrect x y width height)]
(-> local (-> local
(update :vbox merge (select-keys srect [:x :y :x1 :x2 :y1 :y2]))))))))))) (update :vbox merge (select-keys srect [:x :y :x1 :x2 :y1 :y2])))))))))))

46
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -8,6 +8,7 @@
(:require (:require
[app.common.colors :as clr] [app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth] [app.common.math :as mth]
@ -52,13 +53,13 @@
:layout-padding-type :simple :layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}}) :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
(def initial-grid-layout ;; TODO (def initial-grid-layout
{:layout :grid {:layout :grid
:layout-grid-dir :row :layout-grid-dir :row
:layout-gap-type :multiple :layout-gap-type :multiple
:layout-gap {:row-gap 0 :column-gap 0} :layout-gap {:row-gap 0 :column-gap 0}
:layout-align-items :start :layout-align-items :start
:layout-align-content :stretch :layout-align-content :start
:layout-justify-items :start :layout-justify-items :start
:layout-justify-content :start :layout-justify-content :start
:layout-padding-type :simple :layout-padding-type :simple
@ -549,3 +550,44 @@
(dwc/update-shapes parent-ids (partial fix-parent-sizing objects (set ids) changes)) (dwc/update-shapes parent-ids (partial fix-parent-sizing objects (set ids) changes))
(ptk/data-event :layout/update ids) (ptk/data-event :layout/update ids)
(dwu/commit-undo-transaction undo-id)))))) (dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cell
[layout-id cell-id props]
(ptk/reify ::update-grid-cell
ptk/WatchEvent
(watch [_ _ _]
(let [undo-id (js/Symbol)]
(rx/of
(dwu/start-undo-transaction undo-id)
(dwc/update-shapes
[layout-id]
(fn [shape]
(-> shape
(d/update-in-when [:layout-grid-cells cell-id]
#(d/without-nils (merge % props))))))
(ptk/data-event :layout/update [layout-id])
(dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cell-position
[layout-id cell-id props]
(ptk/reify ::update-grid-cell-position
ptk/WatchEvent
(watch [_ _ _]
(let [undo-id (js/Symbol)]
(rx/of
(dwu/start-undo-transaction undo-id)
(dwc/update-shapes
[layout-id]
(fn [shape]
(let [prev-data (-> (dm/get-in shape [:layout-grid-cells cell-id])
(select-keys [:row :column :row-span :column-span]))
new-data (merge prev-data props)]
(-> shape
(ctl/resize-cell-area (:row prev-data) (:column prev-data)
(:row new-data) (:column new-data)
(:row-span new-data) (:column-span new-data))
(ctl/assign-cells)))))
(ptk/data-event :layout/update [layout-id])
(dwu/commit-undo-transaction undo-id))))))

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

@ -151,7 +151,8 @@
(dom/class? node "frame-title") (dom/class? node "frame-title")
(let [shape (gsh/transform-shape shape modifiers) (let [shape (gsh/transform-shape shape modifiers)
zoom (get-in @st/state [:workspace-local :zoom] 1) zoom (get-in @st/state [:workspace-local :zoom] 1)
mtx (vwu/title-transform shape zoom false)] edit-grid? (= (dom/get-data node "edit-grid") "true")
mtx (vwu/title-transform shape zoom edit-grid?)]
(override-transform-att! node "transform" mtx)) (override-transform-att! node "transform" mtx))
(or (= (dom/get-tag-name node) "mask") (or (= (dom/get-tag-name node) "mask")

150
frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs
View file

@ -8,6 +8,8 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc] [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
@ -16,7 +18,8 @@
(mf/defc set-self-alignment (mf/defc set-self-alignment
[{:keys [is-col? alignment set-alignment] :as props}] [{:keys [is-col? alignment set-alignment] :as props}]
(let [dir-v [:auto :start :center :end :stretch #_:baseline]] (let [dir-v [:auto :start :center :end :stretch #_:baseline]
alignment (or alignment :auto)]
[:div.align-self-style [:div.align-self-style
(for [align dir-v] (for [align dir-v]
[:button.align-self.tooltip.tooltip-bottom [:button.align-self.tooltip.tooltip-bottom
@ -31,51 +34,69 @@
(mf/defc options (mf/defc options
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [_shape cell] :as props}] [{:keys [shape cell] :as props}]
(let [position-mode (mf/use-state :auto) ;; TODO this should come from shape (let [{:keys [mode area-name align-self justify-self column column-span row row-span]} cell
column-end (+ column column-span)
row-end (+ row row-span)
set-position-mode (fn [mode] cell-mode (or mode :auto)
(reset! position-mode mode)) cell-mode (if (and (= :auto cell-mode)
(or (> (:column-span cell) 1)
(> (:row-span cell) 1)))
:manual
cell-mode)
set-alignment
(mf/use-callback
(mf/deps align-self (:id shape) (:id cell))
(fn [value]
(if (= align-self value)
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:align-self nil}))
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:align-self value})))))
align-self (mf/use-state :auto) ;; TODO this should come from shape set-justify-self
justify-alignment (mf/use-state :auto) ;; TODO this should come from shape (mf/use-callback
set-alignment (fn [value] (mf/deps justify-self (:id shape) (:id cell))
(reset! align-self value) (fn [value]
#_(if (= align-self value) (if (= justify-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil})) (st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:justify-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))) (st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:justify-self value})))))
set-justify-self (fn [value]
(reset! justify-alignment value)
#_(if (= align-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
column-start (:column cell)
column-end (+ (:column cell) (:column-span cell))
row-start (:row cell)
row-end (+ (:row cell) (:row-span cell))
on-change on-change
(fn [_side _orientation _value] (mf/use-callback
;; TODO (mf/deps column row (:id shape) (:id cell))
#_(if (= orientation :column) (fn [field type value]
(case side (let [[property value]
:all ((reset! column-start value) (cond
(reset! column-end value)) (and (= type :column) (or (= field :all) (= field :start)))
:start (reset! column-start value) [:column value]
:end (reset! column-end value))
(case side
:all ((reset! row-start value)
(reset! row-end value))
:start (reset! row-start value)
:end (reset! row-end value))))
area-name (mf/use-state "header") ;; TODO this should come from shape (and (= type :column) (= field :end))
[:column-span (max 1 (- value column))]
on-area-name-change (fn [value] (and (= type :row) (or (= field :all) (= field :start)))
(reset! area-name value)) [:row value]
on-key-press (fn [_event])]
(and (= type :row) (= field :end))
[:row-span (max 1 (- value row))])]
(st/emit! (dwsl/update-grid-cell-position (:id shape) (:id cell) {property value})))))
on-area-name-change
(mf/use-callback
(mf/deps (:id shape) (:id cell))
(fn [event]
(let [value (dom/get-value (dom/get-target event))]
(if (= value "")
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:area-name nil}))
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:area-name value}))))))
set-cell-mode
(mf/use-callback
(mf/deps (:id shape) (:id cell))
(fn [mode]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:mode mode}))))]
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
@ -86,16 +107,17 @@
[:div.row-title.sizing "Position"] [:div.row-title.sizing "Position"]
[:div.position-wrapper [:div.position-wrapper
[:button.position-btn [:button.position-btn
{:on-click #(set-position-mode :auto) {:on-click #(set-cell-mode :auto)
:class (dom/classnames :active (= :auto @position-mode))} "Auto"] :class (dom/classnames :active (= :auto cell-mode))} "Auto"]
[:button.position-btn [:button.position-btn
{:on-click #(set-position-mode :manual) {:on-click #(set-cell-mode :manual)
:class (dom/classnames :active (= :manual @position-mode))} "Manual"] :class (dom/classnames :active (= :manual cell-mode))} "Manual"]
[:button.position-btn [:button.position-btn
{:on-click #(set-position-mode :area) {:on-click #(set-cell-mode :area)
:class (dom/classnames :active (= :area @position-mode))} "Area"]]] :class (dom/classnames :active (= :area cell-mode))} "Area"]]]
[:div.manage-grid-columns [:div.manage-grid-columns
(when (= :auto @position-mode) (when (= :auto cell-mode)
[:div.grid-auto [:div.grid-auto
[:div.grid-columns-auto [:div.grid-columns-auto
[:span.icon i/layout-rows] [:span.icon i/layout-rows]
@ -103,42 +125,42 @@
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-change :all :column) ;; TODO cambiar este on-change y el value :on-change (partial on-change :all :column)
:value column-start}]]] :value column}]]]
[:div.grid-rows-auto [:div.grid-rows-auto
[:span.icon i/layout-columns] [:span.icon i/layout-columns]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-change :all :row) ;; TODO cambiar este on-change y el value :on-change (partial on-change :all :row)
:value row-start}]]]]) :value row}]]]])
(when (= :area @position-mode)
(when (= :area cell-mode)
[:div.input-wrapper [:div.input-wrapper
[:input.input-text [:input.input-text
{:key "grid-area-name" {:key (dm/str "name-" (:id cell))
:id "grid-area-name" :id "grid-area-name"
:type "text" :type "text"
:aria-label "grid-area-name" :aria-label "grid-area-name"
:placeholder "--" :placeholder "--"
:default-value @area-name :default-value area-name
:auto-complete "off" :auto-complete "off"
:on-change on-area-name-change :on-change on-area-name-change}]])
:on-key-press on-key-press}]])
(when (or (= :manual @position-mode) (= :area @position-mode)) (when (or (= :manual cell-mode) (= :area cell-mode))
[:div.grid-manual [:div.grid-manual
[:div.grid-columns-auto [:div.grid-columns-auto
[:span.icon i/layout-rows] [:span.icon i/layout-rows]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :column) :on-change (partial on-change :start :column)
:value column-start}] :value column}]
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :column) :on-change (partial on-change :end :column)
:value column-end}]]] :value column-end}]]]
[:div.grid-rows-auto [:div.grid-rows-auto
@ -146,12 +168,12 @@
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :row) :on-change (partial on-change :start :row)
:value row-start}] :value row}]
[:> numeric-input [:> numeric-input
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :row) :on-change (partial on-change :end :row)
:value row-end}]]]])] :value row-end}]]]])]
@ -159,13 +181,11 @@
[:div.row-title "Align"] [:div.row-title "Align"]
[:div.btn-wrapper [:div.btn-wrapper
[:& set-self-alignment {:is-col? false [:& set-self-alignment {:is-col? false
:alignment @align-self :alignment align-self
:set-alignment set-alignment}]]] :set-alignment set-alignment}]]]
[:div.layout-row [:div.layout-row
[:div.row-title "Justify"] [:div.row-title "Justify"]
[:div.btn-wrapper [:div.btn-wrapper
[:& set-self-alignment {:is-col? true [:& set-self-alignment {:is-col? true
:alignment @justify-alignment :alignment justify-self
:set-alignment set-justify-self}]]]]])) :set-alignment set-justify-self}]]]]]))

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

@ -204,8 +204,7 @@
(>= zoom 8)) (>= zoom 8))
show-text-editor? (and editing-shape (= :text (:type editing-shape))) show-text-editor? (and editing-shape (= :text (:type editing-shape)))
;; Debug utility hover-grid? (and (some? @hover-top-frame-id) (ctl/grid-layout? objects @hover-top-frame-id))
;; hover-grid? (and (some? @hover-top-frame-id) (ctl/grid-layout? objects @hover-top-frame-id))
show-grid-editor? (and editing-shape (ctl/grid-layout? editing-shape)) show-grid-editor? (and editing-shape (ctl/grid-layout? editing-shape))
show-presence? page-id show-presence? page-id
@ -591,8 +590,7 @@
:zoom zoom}]) :zoom zoom}])
(when show-grid-editor? (when (or show-grid-editor? hover-grid?)
#_(or show-grid-editor? hover-grid?) ;; Debug utility
[:& grid-layout/editor [:& grid-layout/editor
{:zoom zoom {:zoom zoom
:objects objects-modified :objects objects-modified

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

@ -572,7 +572,6 @@
:on-key-down handle-keydown-track-input :on-key-down handle-keydown-track-input
:on-blur handle-blur-track-input}]]] :on-blur handle-blur-track-input}]]]
[:& resize-track-handler [:& resize-track-handler
{:index index {:index index
:layout-data layout-data :layout-data layout-data
@ -662,85 +661,85 @@
[:& plus-btn {:start-p start-p [:& plus-btn {:start-p start-p
:zoom zoom :zoom zoom
:type :row :type :row
:on-click handle-add-row}])]) :on-click handle-add-row}])
(for [[idx column-data] (d/enumerate column-tracks)] (for [[idx column-data] (d/enumerate column-tracks)]
[:& track {:key (dm/str "column-track-" idx) [:& track {:key (dm/str "column-track-" idx)
:shape shape :shape shape
:zoom zoom :zoom zoom
:type :column :type :column
:index idx :index idx
:layout-data layout-data :layout-data layout-data
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:track-data column-data}]) :track-data column-data}])
;; Last track resize handler ;; Last track resize handler
(when-not (empty? column-tracks) (when-not (empty? column-tracks)
(let [last-track (last column-tracks) (let [last-track (last column-tracks)
start-p (:start-p (last column-tracks)) start-p (:start-p (last column-tracks))
relative (gpt/to-vec origin start-p) relative (gpt/to-vec origin start-p)
marker-p (-> origin marker-p (-> origin
(gpt/add (hv (:x relative))) (gpt/add (hv (:x relative)))
(gpt/subtract (vv (/ 20 zoom))) (gpt/subtract (vv (/ 20 zoom)))
(gpt/add (hv (:size last-track))))] (gpt/add (hv (:size last-track))))]
[:g.track [:g.track
[:& track-marker {:center marker-p [:& track-marker {:center marker-p
:index (count column-tracks) :index (count column-tracks)
:shape shape :shape shape
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:track-before (last column-tracks) :track-before (last column-tracks)
:type :column :type :column
:value (dm/str (inc (count column-tracks))) :value (dm/str (inc (count column-tracks)))
:zoom zoom}] :zoom zoom}]
[:& resize-track-handler [:& resize-track-handler
{:index (count column-tracks) {:index (count column-tracks)
:shape shape :shape shape
:layout-data layout-data :layout-data layout-data
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:start-p (-> start-p (gpt/add (hv (+ layout-gap-col (:size last-track))))) :start-p (-> start-p (gpt/add (hv (+ layout-gap-col (:size last-track)))))
:type :column :type :column
:track-before (last column-tracks) :track-before (last column-tracks)
:zoom zoom}]])) :zoom zoom}]]))
(for [[idx row-data] (d/enumerate row-tracks)] (for [[idx row-data] (d/enumerate row-tracks)]
[:& track {:index idx [:& track {:index idx
:key (dm/str "row-track-" idx) :key (dm/str "row-track-" idx)
:layout-data layout-data :layout-data layout-data
:shape shape :shape shape
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:track-data row-data :track-data row-data
:type :row :type :row
:zoom zoom}]) :zoom zoom}])
(when-not (empty? row-tracks) (when-not (empty? row-tracks)
(let [last-track (last row-tracks) (let [last-track (last row-tracks)
start-p (:start-p (last row-tracks)) start-p (:start-p (last row-tracks))
relative (gpt/to-vec origin start-p) relative (gpt/to-vec origin start-p)
marker-p marker-p
(-> origin (-> origin
(gpt/add (vv (:y relative))) (gpt/add (vv (:y relative)))
(gpt/subtract (hv (/ 20 zoom))) (gpt/subtract (hv (/ 20 zoom)))
(gpt/add (vv (:size last-track))))] (gpt/add (vv (:size last-track))))]
[:g.track [:g.track
[:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))} [:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))}
[:& track-marker {:center marker-p [:& track-marker {:center marker-p
:index (count row-tracks) :index (count row-tracks)
:shape shape :shape shape
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:track-before (last row-tracks) :track-before (last row-tracks)
:type :row :type :row
:value (dm/str (inc (count row-tracks))) :value (dm/str (inc (count row-tracks)))
:zoom zoom}]] :zoom zoom}]]
[:& resize-track-handler [:& resize-track-handler
{:index (count row-tracks) {:index (count row-tracks)
:shape shape :shape shape
:layout-data layout-data :layout-data layout-data
:start-p (-> start-p :start-p (-> start-p
(gpt/add (vv (+ layout-gap-row (:size last-track))))) (gpt/add (vv (+ layout-gap-row (:size last-track)))))
:type :row :type :row
:track-before (last row-tracks) :track-before (last row-tracks)
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:zoom zoom}]])) :zoom zoom}]]))])
(for [[_ cell] (:layout-grid-cells shape)] (for [[_ cell] (:layout-grid-cells shape)]
[:& grid-cell {:key (dm/str "cell-" (:id cell)) [:& grid-cell {:key (dm/str "cell-" (:id cell))

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

@ -171,6 +171,7 @@
(when (not (:hidden frame)) (when (not (:hidden frame))
[:g.frame-title {:id (dm/str "frame-title-" (:id frame)) [:g.frame-title {:id (dm/str "frame-title-" (:id frame))
:data-edit-grid grid-edition?
:transform (vwu/title-transform frame zoom grid-edition?) :transform (vwu/title-transform frame zoom grid-edition?)
:pointer-events (when (:blocked frame) "none")} :pointer-events (when (:blocked frame) "none")}
(cond (cond