mirror of
https://github.com/penpot/penpot.git
synced 2025-05-20 03:56:11 +02:00
🔧 Read component shapes from pages
This commit is contained in:
Andrés Moya
parent
a4dd5fccff
commit
0711fa700b
21 changed files with 588 additions and 403 deletions
|
|
@ -233,6 +233,19 @@
|
|||
(->> (filter (comp t/pointer? val) data)
|
||||
(resolve-pointers id)
|
||||
(rx/map #(update file :data merge %)))))
|
||||
(rx/mapcat
|
||||
(fn [{:keys [id data] :as file}]
|
||||
;; Resolve all pages of each library, if needed
|
||||
(->> (rx/from (seq (:pages-index data)))
|
||||
(rx/merge-map
|
||||
(fn [[_ page :as kp]]
|
||||
(if (t/pointer? page)
|
||||
(resolve-pointer id kp)
|
||||
(rx/of kp))))
|
||||
(rx/reduce conj {})
|
||||
(rx/map
|
||||
(fn [pages-index]
|
||||
(assoc-in file [:data :pages-index] pages-index))))))
|
||||
(rx/reduce conj [])
|
||||
(rx/map libraries-fetched))))))))
|
||||
|
||||
|
|
@ -808,8 +821,8 @@
|
|||
(not (:component-root? shape)))
|
||||
|
||||
parent (get objects parent-id)
|
||||
component-shape (cph/get-component-shape objects shape)
|
||||
component-shape-parent (cph/get-component-shape objects parent)
|
||||
component-shape (ctn/get-component-shape objects shape)
|
||||
component-shape-parent (ctn/get-component-shape objects parent)
|
||||
|
||||
detach? (and instance-part? (not= (:id component-shape)
|
||||
(:id component-shape-parent)))
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
[app.common.pages.helpers :as cph]
|
||||
[app.common.spec :as us]
|
||||
[app.common.types.color :as ctc]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.file :as ctf]
|
||||
|
|
@ -346,8 +347,9 @@
|
|||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(when (and (some? new-name) (not= "" new-name))
|
||||
(let [data (get state :workspace-data)
|
||||
[path name] (cph/parse-path-name new-name)
|
||||
(let [data (get state :workspace-data)
|
||||
[path name] (cph/parse-path-name new-name)
|
||||
components-v2 (features/active-feature? state :components-v2)
|
||||
|
||||
update-fn
|
||||
(fn [component]
|
||||
|
|
@ -355,12 +357,15 @@
|
|||
;; because there are small possibilities of race
|
||||
;; conditions with component deletion.
|
||||
(when component
|
||||
(-> component
|
||||
(assoc :path path)
|
||||
(assoc :name name)
|
||||
(update :objects
|
||||
(cond-> component
|
||||
:always
|
||||
(assoc :path path
|
||||
:name name)
|
||||
|
||||
(not components-v2)
|
||||
(update :objects
|
||||
;; Give the same name to the root shape
|
||||
#(assoc-in % [id :name] name)))))
|
||||
#(assoc-in % [id :name] name)))))
|
||||
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
|
|
@ -370,30 +375,33 @@
|
|||
|
||||
(defn duplicate-component
|
||||
"Create a new component copied from the one with the given id."
|
||||
[{:keys [id] :as params}]
|
||||
[library-id component-id]
|
||||
(ptk/reify ::duplicate-component
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [libraries (wsh/get-libraries state)
|
||||
component (cph/get-component libraries id)
|
||||
library (get libraries library-id)
|
||||
component (ctkl/get-component (:data library) component-id)
|
||||
new-name (:name component)
|
||||
|
||||
components-v2 (features/active-feature? state :components-v2)
|
||||
|
||||
main-instance-page (when components-v2
|
||||
(wsh/lookup-page state (:main-instance-page component)))
|
||||
main-instance-shape (when components-v2
|
||||
(ctn/get-shape main-instance-page (:main-instance-id component)))
|
||||
(ctf/get-component-page (:data library) component))
|
||||
|
||||
[new-component-shape new-component-shapes
|
||||
new-component (assoc component :id (uuid/next))
|
||||
|
||||
[new-component-shape new-component-shapes ; <- null in components-v2
|
||||
new-main-instance-shape new-main-instance-shapes]
|
||||
(dwlh/duplicate-component component main-instance-page main-instance-shape)
|
||||
(dwlh/duplicate-component new-component (:data library))
|
||||
|
||||
changes (-> (pcb/empty-changes it nil)
|
||||
(pcb/with-page main-instance-page)
|
||||
(pcb/with-objects (:objects main-instance-page))
|
||||
(pcb/add-objects new-main-instance-shapes {:ignore-touched true})
|
||||
(pcb/add-component (:id new-component-shape)
|
||||
(pcb/add-component (if components-v2
|
||||
(:id new-component)
|
||||
(:id new-component-shape))
|
||||
(:path component)
|
||||
new-name
|
||||
new-component-shapes
|
||||
|
|
@ -429,17 +437,22 @@
|
|||
(ptk/reify ::restore-component
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(assert "Restore component not implemented") ; until we allow a :deleted flag in shapes
|
||||
(let [file-data (wsh/get-file state library-id)
|
||||
component (ctf/get-deleted-component file-data component-id)
|
||||
page (ctpl/get-page file-data (:main-instance-page component))
|
||||
|
||||
; Make a new main instance, with the same id of the original
|
||||
components-v2
|
||||
(features/active-feature? state :components-v2)
|
||||
|
||||
; Make a new main instance, with the same id of the original
|
||||
[_main-instance shapes]
|
||||
(ctn/make-component-instance page
|
||||
component
|
||||
(:id file-data)
|
||||
file-data
|
||||
(gpt/point (:main-instance-x component)
|
||||
(:main-instance-y component))
|
||||
components-v2
|
||||
{:main-instance? true
|
||||
:force-id (:main-instance-id component)})
|
||||
|
||||
|
|
@ -600,53 +613,53 @@
|
|||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(log/info :msg "UPDATE-COMPONENT of shape" :id (str id))
|
||||
(let [page-id (get state :current-page-id)
|
||||
(let [page-id (get state :current-page-id)
|
||||
local-file (wsh/get-local-file state)
|
||||
container (cph/get-container local-file :page page-id)
|
||||
shape (ctn/get-shape container id)]
|
||||
|
||||
local-file (wsh/get-local-file state)
|
||||
libraries (wsh/get-libraries state)
|
||||
(when (ctk/in-component-instance? shape)
|
||||
(let [libraries (wsh/get-libraries state)
|
||||
|
||||
container (cph/get-container local-file :page page-id)
|
||||
shape (ctn/get-shape container id)
|
||||
changes
|
||||
(-> (pcb/empty-changes it)
|
||||
(pcb/with-container container)
|
||||
(dwlh/generate-sync-shape-inverse libraries container id))
|
||||
|
||||
changes
|
||||
(-> (pcb/empty-changes it)
|
||||
(pcb/with-container container)
|
||||
(dwlh/generate-sync-shape-inverse libraries container id))
|
||||
file-id (:component-file shape)
|
||||
file (wsh/get-file state file-id)
|
||||
|
||||
file-id (:component-file shape)
|
||||
file (wsh/get-file state file-id)
|
||||
xf-filter (comp
|
||||
(filter :local-change?)
|
||||
(map #(dissoc % :local-change?)))
|
||||
|
||||
xf-filter (comp
|
||||
(filter :local-change?)
|
||||
(map #(dissoc % :local-change?)))
|
||||
local-changes (-> changes
|
||||
(update :redo-changes #(into [] xf-filter %))
|
||||
(update :undo-changes #(into [] xf-filter %)))
|
||||
|
||||
local-changes (-> changes
|
||||
(update :redo-changes #(into [] xf-filter %))
|
||||
(update :undo-changes #(into [] xf-filter %)))
|
||||
xf-remove (comp
|
||||
(remove :local-change?)
|
||||
(map #(dissoc % :local-change?)))
|
||||
|
||||
xf-remove (comp
|
||||
(remove :local-change?)
|
||||
(map #(dissoc % :local-change?)))
|
||||
nonlocal-changes (-> changes
|
||||
(update :redo-changes #(into [] xf-remove %))
|
||||
(update :undo-changes #(into [] xf-remove %)))]
|
||||
|
||||
nonlocal-changes (-> changes
|
||||
(update :redo-changes #(into [] xf-remove %))
|
||||
(update :undo-changes #(into [] xf-remove %)))]
|
||||
(log/debug :msg "UPDATE-COMPONENT finished"
|
||||
:js/local-changes (log-changes
|
||||
(:redo-changes local-changes)
|
||||
file)
|
||||
:js/nonlocal-changes (log-changes
|
||||
(:redo-changes nonlocal-changes)
|
||||
file))
|
||||
|
||||
(log/debug :msg "UPDATE-COMPONENT finished"
|
||||
:js/local-changes (log-changes
|
||||
(:redo-changes local-changes)
|
||||
file)
|
||||
:js/nonlocal-changes (log-changes
|
||||
(:redo-changes nonlocal-changes)
|
||||
file))
|
||||
|
||||
(rx/of
|
||||
(when (seq (:redo-changes local-changes))
|
||||
(dch/commit-changes (assoc local-changes
|
||||
:file-id (:id local-file))))
|
||||
(when (seq (:redo-changes nonlocal-changes))
|
||||
(dch/commit-changes (assoc nonlocal-changes
|
||||
:file-id file-id))))))))
|
||||
(rx/of
|
||||
(when (seq (:redo-changes local-changes))
|
||||
(dch/commit-changes (assoc local-changes
|
||||
:file-id (:id local-file))))
|
||||
(when (seq (:redo-changes nonlocal-changes))
|
||||
(dch/commit-changes (assoc nonlocal-changes
|
||||
:file-id file-id))))))))))
|
||||
|
||||
(defn update-component-sync
|
||||
[shape-id file-id]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.data.workspace.libraries-helpers
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.logging :as log]
|
||||
|
|
@ -17,10 +18,12 @@
|
|||
[app.common.text :as txt]
|
||||
[app.common.types.color :as ctc]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.common.types.shape-tree :as ctst]
|
||||
[app.common.types.typography :as cty]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.workspace.groups :as dwg]
|
||||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
[cljs.spec.alpha :as s]
|
||||
|
|
@ -84,54 +87,75 @@
|
|||
name (:name group)
|
||||
[path name] (cph/parse-path-name name)
|
||||
|
||||
[new-shape new-shapes updated-shapes]
|
||||
(ctn/make-component-shape group objects file-id components-v2)
|
||||
[root-shape new-shapes updated-shapes]
|
||||
(if-not components-v2
|
||||
(ctn/make-component-shape group objects file-id components-v2)
|
||||
(let [new-id (uuid/next)]
|
||||
[(assoc group :id new-id)
|
||||
nil
|
||||
[(assoc group
|
||||
:component-id new-id
|
||||
:component-file file-id
|
||||
:component-root? true
|
||||
:main-instance? true)]]))
|
||||
|
||||
changes (-> changes
|
||||
(pcb/add-component (:id new-shape)
|
||||
(pcb/add-component (:id root-shape)
|
||||
path
|
||||
name
|
||||
new-shapes
|
||||
updated-shapes
|
||||
(:id group)
|
||||
page-id))]
|
||||
[group new-shape changes]))
|
||||
page-id))]
|
||||
[group (:id root-shape) changes]))
|
||||
|
||||
(defn duplicate-component
|
||||
"Clone the root shape of the component and all children. Generate new
|
||||
ids from all of them."
|
||||
[component main-instance-page main-instance-shape]
|
||||
(let [position (gpt/add (gpt/point (:x main-instance-shape) (:y main-instance-shape))
|
||||
(gpt/point (+ (:width main-instance-shape) 50) 0))
|
||||
[component library-data]
|
||||
(let [components-v2 (dm/get-in library-data [:options :components-v2])]
|
||||
(if components-v2
|
||||
|
||||
component-root (ctk/get-component-root component)
|
||||
(let [main-instance-page (ctf/get-component-page library-data component)
|
||||
main-instance-shape (ctf/get-component-root library-data component)
|
||||
|
||||
[new-component-shape new-component-shapes _]
|
||||
(ctst/clone-object component-root
|
||||
nil
|
||||
(get component :objects)
|
||||
identity)
|
||||
position (gpt/add (gpt/point (:x main-instance-shape) (:y main-instance-shape))
|
||||
(gpt/point (+ (:width main-instance-shape) 50) 0))
|
||||
|
||||
[new-instance-shape new-instance-shapes]
|
||||
(when (and (some? main-instance-page) (some? main-instance-shape))
|
||||
(ctn/make-component-instance main-instance-page
|
||||
component
|
||||
library-data
|
||||
position
|
||||
true))]
|
||||
|
||||
[nil nil new-instance-shape new-instance-shapes])
|
||||
|
||||
[new-instance-shape new-instance-shapes]
|
||||
(when (and (some? main-instance-page) (some? main-instance-shape))
|
||||
(ctn/make-component-instance main-instance-page
|
||||
{:id (:id new-component-shape)
|
||||
:name (:name new-component-shape)
|
||||
:objects (d/index-by :id new-component-shapes)}
|
||||
(:component-file main-instance-shape)
|
||||
position))]
|
||||
(let [component-root (d/seek #(nil? (:parent-id %)) (vals (:objects component)))
|
||||
|
||||
[new-component-shape new-component-shapes
|
||||
new-instance-shape new-instance-shapes]))
|
||||
[new-component-shape new-component-shapes _]
|
||||
(ctst/clone-object component-root
|
||||
nil
|
||||
(get component :objects)
|
||||
identity)]
|
||||
|
||||
[new-component-shape new-component-shapes nil nil]))))
|
||||
|
||||
(defn generate-instantiate-component
|
||||
"Generate changes to create a new instance from a component."
|
||||
[it file-id component-id position page libraries]
|
||||
(let [component (cph/get-component libraries file-id component-id)
|
||||
(let [component (ctf/get-component libraries file-id component-id)
|
||||
library (get libraries file-id)
|
||||
|
||||
components-v2 (dm/get-in library [:data :options :components-v2])
|
||||
|
||||
[new-shape new-shapes]
|
||||
(ctn/make-component-instance page component file-id position)
|
||||
(ctn/make-component-instance page
|
||||
component
|
||||
(:data library)
|
||||
position
|
||||
components-v2)
|
||||
|
||||
changes (reduce #(pcb/add-object %1 %2 {:ignore-touched true})
|
||||
(pcb/empty-changes it (:id page))
|
||||
|
|
@ -447,47 +471,47 @@
|
|||
;; but it's not touched.
|
||||
|
||||
(defn generate-sync-shape-direct
|
||||
"Generate changes to synchronize one shape that the root of a component
|
||||
"Generate changes to synchronize one shape that is the root of a component
|
||||
instance, and all its children, from the given component."
|
||||
[changes libraries container shape-id reset? components-v2]
|
||||
(log/debug :msg "Sync shape direct" :shape (str shape-id) :reset? reset?)
|
||||
(let [shape-inst (ctn/get-shape container shape-id)
|
||||
component (cph/get-component libraries
|
||||
(:component-file shape-inst)
|
||||
(:component-id shape-inst))
|
||||
component (or component
|
||||
(and reset?
|
||||
(ctf/get-deleted-component
|
||||
(get-in libraries [(:component-file shape-inst) :data])
|
||||
(:component-id shape-inst))))
|
||||
shape-main (when component
|
||||
(ctn/get-shape component (:shape-ref shape-inst)))
|
||||
(let [shape-inst (ctn/get-shape container shape-id)]
|
||||
(if (ctk/in-component-instance? shape-inst)
|
||||
(let [library (dm/get-in libraries [(:component-file shape-inst) :data])
|
||||
component (or (ctkl/get-component library (:component-id shape-inst))
|
||||
(and reset?
|
||||
(ctf/get-deleted-component library (:component-id shape-inst))))
|
||||
|
||||
initial-root? (:component-root? shape-inst)
|
||||
shape-main (when component
|
||||
(ctf/get-ref-shape library component shape-inst))
|
||||
|
||||
root-inst shape-inst
|
||||
root-main (when component
|
||||
(ctk/get-component-root component))]
|
||||
initial-root? (:component-root? shape-inst)
|
||||
|
||||
(if component
|
||||
(generate-sync-shape-direct-recursive changes
|
||||
container
|
||||
shape-inst
|
||||
component
|
||||
shape-main
|
||||
root-inst
|
||||
root-main
|
||||
reset?
|
||||
initial-root?
|
||||
components-v2)
|
||||
root-inst shape-inst
|
||||
root-main (when component
|
||||
(ctf/get-component-root library component))]
|
||||
|
||||
(if component
|
||||
(generate-sync-shape-direct-recursive changes
|
||||
container
|
||||
shape-inst
|
||||
component
|
||||
library
|
||||
shape-main
|
||||
root-inst
|
||||
root-main
|
||||
reset?
|
||||
initial-root?
|
||||
components-v2)
|
||||
; If the component is not found, because the master component has been
|
||||
; deleted or the library unlinked, do nothing in v2 or detach in v1.
|
||||
(if components-v2
|
||||
changes
|
||||
(generate-detach-instance changes container shape-id)))))
|
||||
(if components-v2
|
||||
changes
|
||||
(generate-detach-instance changes container shape-id))))
|
||||
changes)))
|
||||
|
||||
(defn- generate-sync-shape-direct-recursive
|
||||
[changes container shape-inst component shape-main root-inst root-main reset? initial-root? components-v2]
|
||||
[changes container shape-inst component library shape-main root-inst root-main reset? initial-root? components-v2]
|
||||
(log/debug :msg "Sync shape direct recursive"
|
||||
:shape (str (:name shape-inst))
|
||||
:component (:name component))
|
||||
|
|
@ -522,20 +546,22 @@
|
|||
set-remote-synced?
|
||||
(change-remote-synced shape-inst container true))
|
||||
|
||||
children-inst (mapv #(ctn/get-shape container %)
|
||||
(:shapes shape-inst))
|
||||
children-main (mapv #(ctn/get-shape component %)
|
||||
(:shapes shape-main))
|
||||
component-container (ctf/get-component-container library component)
|
||||
|
||||
children-inst (mapv #(ctn/get-shape container %)
|
||||
(:shapes shape-inst))
|
||||
children-main (mapv #(ctn/get-shape component-container %)
|
||||
(:shapes shape-main))
|
||||
|
||||
only-inst (fn [changes child-inst]
|
||||
(if-not (and omit-touched?
|
||||
(contains? (:touched shape-inst)
|
||||
:shapes-group))
|
||||
(remove-shape changes
|
||||
child-inst
|
||||
container
|
||||
omit-touched?)
|
||||
changes))
|
||||
(contains? (:touched shape-inst)
|
||||
:shapes-group))
|
||||
(remove-shape changes
|
||||
child-inst
|
||||
container
|
||||
omit-touched?)
|
||||
changes))
|
||||
|
||||
only-main (fn [changes child-main]
|
||||
(if-not (and omit-touched?
|
||||
|
|
@ -545,7 +571,7 @@
|
|||
child-main
|
||||
(d/index-of children-main
|
||||
child-main)
|
||||
component
|
||||
component-container
|
||||
container
|
||||
root-inst
|
||||
root-main
|
||||
|
|
@ -558,6 +584,7 @@
|
|||
container
|
||||
child-inst
|
||||
component
|
||||
library
|
||||
child-main
|
||||
root-inst
|
||||
root-main
|
||||
|
|
@ -567,12 +594,12 @@
|
|||
|
||||
moved (fn [changes child-inst child-main]
|
||||
(move-shape
|
||||
changes
|
||||
child-inst
|
||||
(d/index-of children-inst child-inst)
|
||||
(d/index-of children-main child-main)
|
||||
container
|
||||
omit-touched?))]
|
||||
changes
|
||||
child-inst
|
||||
(d/index-of children-inst child-inst)
|
||||
(d/index-of children-main child-main)
|
||||
container
|
||||
omit-touched?))]
|
||||
|
||||
(compare-children changes
|
||||
children-inst
|
||||
|
|
@ -588,22 +615,22 @@
|
|||
the values in the shape and all its children."
|
||||
[changes libraries container shape-id]
|
||||
(log/debug :msg "Sync shape inverse" :shape (str shape-id))
|
||||
(let [shape-inst (ctn/get-shape container shape-id)
|
||||
component (cph/get-component libraries
|
||||
(:component-file shape-inst)
|
||||
(:component-id shape-inst))
|
||||
shape-main (ctn/get-shape component (:shape-ref shape-inst))
|
||||
(let [shape-inst (ctn/get-shape container shape-id)
|
||||
library (dm/get-in libraries [(:component-file shape-inst) :data])
|
||||
component (ctkl/get-component library (:component-id shape-inst))
|
||||
shape-main (ctf/get-ref-shape library component shape-inst)
|
||||
|
||||
initial-root? (:component-root? shape-inst)
|
||||
initial-root? (:component-root? shape-inst)
|
||||
|
||||
root-inst shape-inst
|
||||
root-main (ctk/get-component-root component)]
|
||||
root-inst shape-inst
|
||||
root-main (ctf/get-component-root library component)]
|
||||
|
||||
(if component
|
||||
(generate-sync-shape-inverse-recursive changes
|
||||
container
|
||||
shape-inst
|
||||
component
|
||||
library
|
||||
shape-main
|
||||
root-inst
|
||||
root-main
|
||||
|
|
@ -611,7 +638,7 @@
|
|||
changes)))
|
||||
|
||||
(defn- generate-sync-shape-inverse-recursive
|
||||
[changes container shape-inst component shape-main root-inst root-main initial-root?]
|
||||
[changes container shape-inst component library shape-main root-inst root-main initial-root?]
|
||||
(log/trace :msg "Sync shape inverse recursive"
|
||||
:shape (str (:name shape-inst))
|
||||
:component (:name component))
|
||||
|
|
@ -619,7 +646,7 @@
|
|||
(if (nil? shape-main)
|
||||
;; This should not occur, but protect against it in any case
|
||||
changes
|
||||
(let [component-container (cph/make-container component :component)
|
||||
(let [component-container (ctf/get-component-container library component)
|
||||
|
||||
omit-touched? false
|
||||
set-remote-synced? (not initial-root?)
|
||||
|
|
@ -650,7 +677,7 @@
|
|||
|
||||
children-inst (mapv #(ctn/get-shape container %)
|
||||
(:shapes shape-inst))
|
||||
children-main (mapv #(ctn/get-shape component %)
|
||||
children-main (mapv #(ctn/get-shape component-container %)
|
||||
(:shapes shape-main))
|
||||
|
||||
only-inst (fn [changes child-inst]
|
||||
|
|
@ -659,6 +686,7 @@
|
|||
(d/index-of children-inst
|
||||
child-inst)
|
||||
component
|
||||
component-container
|
||||
container
|
||||
root-inst
|
||||
root-main))
|
||||
|
|
@ -674,6 +702,7 @@
|
|||
container
|
||||
child-inst
|
||||
component
|
||||
library
|
||||
child-main
|
||||
root-inst
|
||||
root-main
|
||||
|
|
@ -681,12 +710,12 @@
|
|||
|
||||
moved (fn [changes child-inst child-main]
|
||||
(move-shape
|
||||
changes
|
||||
child-main
|
||||
(d/index-of children-main child-main)
|
||||
(d/index-of children-inst child-inst)
|
||||
component-container
|
||||
false))
|
||||
changes
|
||||
child-main
|
||||
(d/index-of children-main child-main)
|
||||
(d/index-of children-inst child-inst)
|
||||
component-container
|
||||
false))
|
||||
|
||||
changes
|
||||
(compare-children changes
|
||||
|
|
@ -763,9 +792,9 @@
|
|||
(moved-cb child-inst' child-main)))))))))))
|
||||
|
||||
(defn- add-shape-to-instance
|
||||
[changes component-shape index component container root-instance root-main omit-touched? set-remote-synced?]
|
||||
[changes component-shape index component-page container root-instance root-main omit-touched? set-remote-synced?]
|
||||
(log/info :msg (str "ADD [P] " (:name component-shape)))
|
||||
(let [component-parent-shape (ctn/get-shape component (:parent-id component-shape))
|
||||
(let [component-parent-shape (ctn/get-shape component-page (:parent-id component-shape))
|
||||
parent-shape (d/seek #(ctk/is-main-of? component-parent-shape %)
|
||||
(cph/get-children-with-self (:objects container)
|
||||
(:id root-instance)))
|
||||
|
|
@ -793,7 +822,7 @@
|
|||
[_ new-shapes _]
|
||||
(ctst/clone-object component-shape
|
||||
(:id parent-shape)
|
||||
(get component :objects)
|
||||
(get component-page :objects)
|
||||
update-new-shape
|
||||
update-original-shape)
|
||||
|
||||
|
|
@ -831,14 +860,14 @@
|
|||
changes')))
|
||||
|
||||
(defn- add-shape-to-main
|
||||
[changes shape index component page root-instance root-main]
|
||||
[changes shape index component component-container page root-instance root-main]
|
||||
(log/info :msg (str "ADD [C] " (:name shape)))
|
||||
(let [parent-shape (ctn/get-shape page (:parent-id shape))
|
||||
component-parent-shape (d/seek #(ctk/is-main-of? % parent-shape)
|
||||
(cph/get-children-with-self (:objects component)
|
||||
(cph/get-children-with-self (:objects component-container)
|
||||
(:id root-main)))
|
||||
all-parents (into [(:id component-parent-shape)]
|
||||
(cph/get-parent-ids (:objects component)
|
||||
(cph/get-parent-ids (:objects component-container)
|
||||
(:id component-parent-shape)))
|
||||
|
||||
update-new-shape (fn [new-shape _original-shape]
|
||||
|
|
@ -854,20 +883,24 @@
|
|||
|
||||
[_new-shape new-shapes updated-shapes]
|
||||
(ctst/clone-object shape
|
||||
(:id component-parent-shape)
|
||||
(get page :objects)
|
||||
update-new-shape
|
||||
update-original-shape)
|
||||
(:id component-parent-shape)
|
||||
(get page :objects)
|
||||
update-new-shape
|
||||
update-original-shape)
|
||||
|
||||
add-obj-change (fn [changes shape']
|
||||
(update changes :redo-changes conj
|
||||
{:type :add-obj
|
||||
:id (:id shape')
|
||||
:component-id (:id component)
|
||||
:parent-id (:parent-id shape')
|
||||
:index index
|
||||
:ignore-touched true
|
||||
:obj shape'}))
|
||||
(cond-> (make-change
|
||||
component-container
|
||||
{:type :add-obj
|
||||
:id (:id shape')
|
||||
:parent-id (:parent-id shape')
|
||||
:index index
|
||||
:ignore-touched true
|
||||
:obj shape'})
|
||||
|
||||
(ctn/page? component-container)
|
||||
(assoc :frame-id (:frame-id shape')))))
|
||||
|
||||
mod-obj-change (fn [changes shape']
|
||||
(update changes :redo-changes conj
|
||||
|
|
@ -899,8 +932,8 @@
|
|||
|
||||
changes' (reduce add-obj-change changes new-shapes)
|
||||
changes' (update changes' :redo-changes conj {:type :reg-objects
|
||||
:component-id (:id component)
|
||||
:shapes all-parents})
|
||||
:component-id (:id component)
|
||||
:shapes all-parents})
|
||||
changes' (reduce mod-obj-change changes' updated-shapes)
|
||||
changes' (reduce del-obj-change changes' new-shapes)]
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.common.pages.helpers :as cph]
|
||||
[app.common.spec :as us]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.page :as ctp]
|
||||
[app.common.types.shape :as cts]
|
||||
[app.common.types.shape-tree :as ctst]
|
||||
|
|
@ -171,7 +172,7 @@
|
|||
;; not the root. In this case, they must not be deleted,
|
||||
;; but hidden (to be able to recover them more easily).
|
||||
(let [shape (get objects shape-id)
|
||||
component-shape (cph/get-component-shape objects shape)]
|
||||
component-shape (ctn/get-component-shape objects shape)]
|
||||
(and (ctk/in-component-instance? shape)
|
||||
(not= shape component-shape)
|
||||
(not (ctk/main-instance? component-shape)))))
|
||||
|
|
|
|||
|
|
@ -208,7 +208,10 @@
|
|||
data (:workspace-data state)]
|
||||
(-> file
|
||||
(dissoc :data)
|
||||
(assoc :pages (:pages data)))))
|
||||
(assoc :options (:options data)
|
||||
:components (:components data)
|
||||
:pages (:pages data)
|
||||
:pages-index (:pages-index data)))))
|
||||
st/state =))
|
||||
|
||||
(def workspace-data
|
||||
|
|
|
|||
|
|
@ -310,16 +310,16 @@
|
|||
update-fn #(update %1 %2 gsh/transform-shape (ctm/move-modifiers vector))]
|
||||
(reduce update-fn objects children-ids))))
|
||||
|
||||
root-shape (get objects root-shape-id)
|
||||
width (* (:width root-shape) zoom)
|
||||
height (* (:height root-shape) zoom)
|
||||
vbox (format-viewbox {:width (:width root-shape 0)
|
||||
:height (:height root-shape 0)})
|
||||
root-shape' (get objects root-shape-id)
|
||||
width (* (:width root-shape') zoom)
|
||||
height (* (:height root-shape') zoom)
|
||||
vbox (format-viewbox {:width (:width root-shape' 0)
|
||||
:height (:height root-shape' 0)})
|
||||
root-shape-wrapper
|
||||
(mf/use-memo
|
||||
(mf/deps objects root-shape)
|
||||
(mf/deps objects root-shape')
|
||||
(fn []
|
||||
(case (:type root-shape)
|
||||
(case (:type root-shape')
|
||||
:group (group-wrapper-factory objects)
|
||||
:frame (frame-wrapper-factory objects))))]
|
||||
|
||||
|
|
@ -332,9 +332,9 @@
|
|||
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
|
||||
:fill "none"}
|
||||
|
||||
[:> shape-container {:shape root-shape}
|
||||
[:> shape-container {:shape root-shape'}
|
||||
[:& (mf/provider muc/is-component?) {:value true}
|
||||
[:& root-shape-wrapper {:shape root-shape :view-box vbox}]]]]))
|
||||
[:& root-shape-wrapper {:shape root-shape' :view-box vbox}]]]]))
|
||||
|
||||
(mf/defc object-svg
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
|
|||
|
|
@ -243,7 +243,9 @@
|
|||
(events/unlistenByKey key1))))
|
||||
|
||||
(mf/use-effect on-resize)
|
||||
[:div.dashboard-content {:on-click #(st/emit! (dd/clear-selected-files)) :ref container}
|
||||
|
||||
[:div.dashboard-content {:on-click #(st/emit! (dd/clear-selected-files))
|
||||
:ref container}
|
||||
(case section
|
||||
:dashboard-projects
|
||||
[:*
|
||||
|
|
|
|||
|
|
@ -105,12 +105,13 @@
|
|||
[:span.num-assets (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space
|
||||
[:div.asset-list
|
||||
(for [component (:sample components)]
|
||||
[:div.asset-list-item {:key (str "assets-component-" (:id component))}
|
||||
[:& component-svg {:group (get-in component [:objects (:id component)])
|
||||
:objects (:objects component)}]
|
||||
[:div.name-block
|
||||
[:span.item-name {:title (:name component)}
|
||||
(:name component)]]])
|
||||
(let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
|
||||
[:div.asset-list-item {:key (str "assets-component-" (:id component))}
|
||||
[:& component-svg {:root-shape (get-in component [:objects root-id])
|
||||
:objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
|
||||
[:div.name-block
|
||||
[:span.item-name {:title (:name component)}
|
||||
(:name component)]]]))
|
||||
(when (> (:count components) (count (:sample components)))
|
||||
[:div.asset-list-item
|
||||
[:div.name-block
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
[app.common.pages.helpers :as cph]
|
||||
[app.common.spec :as us]
|
||||
[app.common.text :as txt]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.config :as cf]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.modal :as modal]
|
||||
|
|
@ -365,13 +365,17 @@
|
|||
;;---- Components box ----
|
||||
|
||||
(mf/defc components-item
|
||||
[{:keys [component renaming listing-thumbs? selected-components
|
||||
[{:keys [component renaming listing-thumbs? selected-components file
|
||||
on-asset-click on-context-menu on-drag-start do-rename cancel-rename
|
||||
selected-components-full selected-components-paths]}]
|
||||
(let [item-ref (mf/use-ref)
|
||||
dragging? (mf/use-state false)
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
|
||||
file (or (:data file) file)
|
||||
|
||||
unselect-all
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
|
|
@ -440,15 +444,17 @@
|
|||
:on-drag-over on-drag-over
|
||||
:on-drop on-drop}
|
||||
|
||||
[:& component-svg {:root-shape (ctk/get-component-root component)
|
||||
:objects (:objects component)}]
|
||||
[:& component-svg {:root-shape (ctf/get-component-root file component)
|
||||
:objects (:objects (if components-v2
|
||||
(ctf/get-component-page file component)
|
||||
component))}]
|
||||
(let [renaming? (= renaming (:id component))]
|
||||
[:*
|
||||
[:& editable-label
|
||||
{:class-name (dom/classnames
|
||||
:cell-name listing-thumbs?
|
||||
:item-name (not listing-thumbs?)
|
||||
:editing renaming?)
|
||||
:cell-name listing-thumbs?
|
||||
:item-name (not listing-thumbs?)
|
||||
:editing renaming?)
|
||||
:value (cph/merge-path-item (:path component) (:name component))
|
||||
:tooltip (cph/merge-path-item (:path component) (:name component))
|
||||
:display-value (:name component)
|
||||
|
|
@ -460,7 +466,7 @@
|
|||
[:div.dragging])])]))
|
||||
|
||||
(mf/defc components-group
|
||||
[{:keys [file-id prefix groups open-groups renaming listing-thumbs? selected-components on-asset-click
|
||||
[{:keys [file prefix groups open-groups renaming listing-thumbs? selected-components on-asset-click
|
||||
on-drag-start do-rename cancel-rename on-rename-group on-group on-ungroup on-context-menu
|
||||
selected-components-full]}]
|
||||
(let [group-open? (get open-groups prefix true)
|
||||
|
|
@ -495,7 +501,7 @@
|
|||
:on-drag-leave on-drag-leave
|
||||
:on-drag-over on-drag-over
|
||||
:on-drop on-drop}
|
||||
[:& asset-group-title {:file-id file-id
|
||||
[:& asset-group-title {:file-id (:id file)
|
||||
:box :components
|
||||
:path prefix
|
||||
:group-open? group-open?
|
||||
|
|
@ -528,6 +534,7 @@
|
|||
:key (:id component)
|
||||
:renaming renaming
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:file file
|
||||
:selected-components selected-components
|
||||
:on-asset-click on-asset-click
|
||||
:on-context-menu on-context-menu
|
||||
|
|
@ -539,7 +546,7 @@
|
|||
:selected-components-paths selected-components-paths}])])
|
||||
(for [[path-item content] groups]
|
||||
(when-not (empty? path-item)
|
||||
[:& components-group {:file-id file-id
|
||||
[:& components-group {:file file
|
||||
:prefix (cph/merge-path-item prefix path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
|
|
@ -556,7 +563,7 @@
|
|||
:selected-components-full selected-components-full}]))])]))
|
||||
|
||||
(mf/defc components-box
|
||||
[{:keys [file-id local? components listing-thumbs? open? reverse-sort? open-groups selected-assets
|
||||
[{:keys [file local? components listing-thumbs? open? reverse-sort? open-groups selected-assets
|
||||
on-asset-click on-assets-delete on-clear-selection] :as props}]
|
||||
(let [input-ref (mf/use-ref nil)
|
||||
state (mf/use-state {:renaming nil
|
||||
|
|
@ -579,14 +586,14 @@
|
|||
add-component
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
#(st/emit! (dwl/set-assets-box-open file-id :components true))
|
||||
#(st/emit! (dwl/set-assets-box-open (:id file) :components true))
|
||||
(dom/click (mf/ref-val input-ref))))
|
||||
|
||||
on-file-selected
|
||||
(mf/use-fn
|
||||
(mf/deps file-id)
|
||||
(mf/deps file)
|
||||
(fn [blobs]
|
||||
(let [params {:file-id file-id
|
||||
(let [params {:file-id (:id file)
|
||||
:blobs (seq blobs)}]
|
||||
(st/emit! (dwm/upload-media-components params)
|
||||
(ptk/event ::ev/event {::ev/name "add-asset-to-library"
|
||||
|
|
@ -598,22 +605,22 @@
|
|||
(fn []
|
||||
(let [undo-id (js/Symbol)]
|
||||
(if (empty? selected-components)
|
||||
(st/emit! (dwl/duplicate-component {:id (:component-id @state)}))
|
||||
(do
|
||||
(st/emit! (dwu/start-undo-transaction undo-id))
|
||||
(apply st/emit! (map #(dwl/duplicate-component {:id %}) selected-components))
|
||||
(st/emit! (dwu/commit-undo-transaction undo-id)))))))
|
||||
(st/emit! (dwl/duplicate-component (:id file) (:component-id @state)))
|
||||
(do
|
||||
(st/emit! (dwu/start-undo-transaction undo-id))
|
||||
(apply st/emit! (map (partial dwl/duplicate-component (:id file)) selected-components))
|
||||
(st/emit! (dwu/commit-undo-transaction undo-id)))))))
|
||||
|
||||
on-delete
|
||||
(mf/use-fn
|
||||
(mf/deps @state file-id multi-components? multi-assets?)
|
||||
(mf/deps @state file multi-components? multi-assets?)
|
||||
(fn []
|
||||
(let [undo-id (js/Symbol)]
|
||||
(if (or multi-components? multi-assets?)
|
||||
(on-assets-delete)
|
||||
(st/emit! (dwu/start-undo-transaction undo-id)
|
||||
(dwl/delete-component {:id (:component-id @state)})
|
||||
(dwl/sync-file file-id file-id :components (:component-id @state))
|
||||
(dwl/sync-file (:id file) (:id file) :components (:component-id @state))
|
||||
(dwu/commit-undo-transaction undo-id))))))
|
||||
|
||||
on-rename
|
||||
|
|
@ -716,7 +723,7 @@
|
|||
on-drag-start
|
||||
(mf/use-fn
|
||||
(fn [component event]
|
||||
(dnd/set-data! event "penpot/component" {:file-id file-id
|
||||
(dnd/set-data! event "penpot/component" {:file-id (:id file)
|
||||
:component component})
|
||||
(dnd/set-allowed-effect! event "move")))
|
||||
|
||||
|
|
@ -734,7 +741,7 @@
|
|||
(when (and main-instance-id main-instance-page) ;; Only when :components-v2 is enabled
|
||||
(st/emit! (dw/go-to-main-instance main-instance-page main-instance-id))))))]
|
||||
|
||||
[:& asset-section {:file-id file-id
|
||||
[:& asset-section {:file-id (:id file)
|
||||
:title (tr "workspace.assets.components")
|
||||
:box :components
|
||||
:assets-count (count components)
|
||||
|
|
@ -750,7 +757,7 @@
|
|||
:on-selected on-file-selected}]])])
|
||||
|
||||
[:& asset-section-block {:role :content}
|
||||
[:& components-group {:file-id file-id
|
||||
[:& components-group {:file file
|
||||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
|
|
@ -2158,7 +2165,7 @@
|
|||
i/listing-thumbs)]]
|
||||
|
||||
(when show-components?
|
||||
[:& components-box {:file-id (:id file)
|
||||
[:& components-box {:file file
|
||||
:local? local?
|
||||
:components components
|
||||
:listing-thumbs? listing-thumbs?
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue