✨ Add support for components in plugins

frontend/src/app/main/data/workspace/libraries.cljs

@@ -340,49 +340,56 @@
 
 (defn- add-component2
   "This is the second step of the component creation."
-  [selected components-v2]
+  ([selected components-v2]
-  (ptk/reify ::add-component2
+   (add-component2 selected components-v2))
-    ev/Event
+  ([id-ref selected components-v2]
-    (-data [_]
+   (ptk/reify ::add-component2
-      {::ev/name "add-component"
+     ev/Event
-       :shapes (count selected)})
+     (-data [_]
+       {::ev/name "add-component"
+        :shapes (count selected)})
 
-    ptk/WatchEvent
+     ptk/WatchEvent
-    (watch [it state _]
+     (watch [it state _]
-      (let [file-id  (:current-file-id state)
+       (let [file-id  (:current-file-id state)
-            page-id  (:current-page-id state)
+             page-id  (:current-page-id state)
-            objects  (wsh/lookup-page-objects state page-id)
+             objects  (wsh/lookup-page-objects state page-id)
-            shapes   (dwg/shapes-for-grouping objects selected)
+             shapes   (dwg/shapes-for-grouping objects selected)
-            parents  (into #{} (map :parent-id) shapes)]
+             parents  (into #{} (map :parent-id) shapes)]
-        (when-not (empty? shapes)
+         (when-not (empty? shapes)
-          (let [[root _ changes]
+           (let [[root component-id changes]
-                (cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id components-v2
+                 (cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id components-v2
-                                            dwg/prepare-create-group
+                                             dwg/prepare-create-group
-                                            cfsh/prepare-create-artboard-from-selection)]
+                                             cfsh/prepare-create-artboard-from-selection)]
-            (when-not (empty? (:redo-changes changes))
+             (when id-ref
-              (rx/of (dch/commit-changes changes)
+               (reset! id-ref component-id))
-                     (dws/select-shapes (d/ordered-set (:id root)))
+             (when-not (empty? (:redo-changes changes))
-                     (ptk/data-event :layout/update {:ids parents})))))))))
+               (rx/of (dch/commit-changes changes)
+                      (dws/select-shapes (d/ordered-set (:id root)))
+                      (ptk/data-event :layout/update {:ids parents}))))))))))
 
 (defn add-component
   "Add a new component to current file library, from the currently selected shapes.
   This operation is made in two steps, first one for calculate the
   shapes that will be part of the component and the second one with
   the component creation."
-  []
+  ([]
-  (ptk/reify ::add-component
+   (add-component nil nil))
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects            (wsh/lookup-page-objects state)
-            selected           (->> (wsh/lookup-selected state)
-                                    (cfh/clean-loops objects))
-            selected-objects   (map #(get objects %) selected)
-            components-v2      (features/active-feature? state "components/v2")
-            ;; We don't want to change the structure of component copies
-            can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))]
 
-        (when can-make-component
+  ([id-ref ids]
-          (rx/of (add-component2 selected components-v2)))))))
+   (ptk/reify ::add-component
+     ptk/WatchEvent
+     (watch [_ state _]
+       (let [objects            (wsh/lookup-page-objects state)
+             selected           (->> (d/nilv ids (wsh/lookup-selected state))
+                                     (cfh/clean-loops objects))
+             selected-objects   (map #(get objects %) selected)
+             components-v2      (features/active-feature? state "components/v2")
+             ;; We don't want to change the structure of component copies
+             can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))]
+
+         (when can-make-component
+           (rx/of (add-component2 id-ref selected components-v2))))))))
 
 (defn add-multiple-components
   "Add several new components to current file library, from the currently selected shapes."
@@ -535,7 +542,7 @@
   in the given file library. Then selects the newly created instance."
   ([file-id component-id position]
    (instantiate-component file-id component-id position nil))
-  ([file-id component-id position {:keys [start-move? initial-point]}]
+  ([file-id component-id position {:keys [start-move? initial-point id-ref]}]
    (dm/assert! (uuid? file-id))
    (dm/assert! (uuid? component-id))
    (dm/assert! (gpt/point? position))
@@ -558,6 +565,10 @@
                                                  page
                                                  libraries)
              undo-id (js/Symbol)]
+
+         (when id-ref
+           (reset! id-ref (:id new-shape)))
+
          (rx/of (dwu/start-undo-transaction undo-id)
                 (dch/commit-changes changes)
                 (ptk/data-event :layout/update {:ids [(:id new-shape)]})

frontend/src/app/plugins/library.cljs

@@ -10,6 +10,7 @@
    [app.common.colors :as cc]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.geom.point :as gpt]
    [app.common.record :as cr]
    [app.common.schema :as sm]
    [app.common.types.color :as ctc]
@@ -18,7 +19,9 @@
    [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.texts :as dwt]
    [app.main.store :as st]
-   [app.plugins.utils :as u]))
+   [app.plugins.shape :as shapes]
+   [app.plugins.utils :as u]
+   [app.util.object :as obj]))
 
 (declare lib-color-proxy)
 (declare lib-typography-proxy)
@@ -152,11 +155,12 @@
 
   (applyToText
     [_ shape]
-    (let [typography (u/locate-library-typography $file $id)]
+    (let [shape-id   (obj/get shape "$id")
-      (st/emit! (dwt/apply-typography #{(:id typography)} typography $file))))
+          typography (u/locate-library-typography $file $id)]
+      (st/emit! (dwt/apply-typography #{shape-id} typography $file))))
 
   (applyToTextRange
-    [_ shape from to]
+    [_ _shape _from _to]
     ;; TODO
     ))
 
@@ -282,7 +286,17 @@
         (u/display-not-valid :library-typography-text-transform value)))}))
 
 (deftype LibraryComponentProxy [$file $id]
-  Object)
+  Object
+
+  (remove
+    [_]
+    (st/emit! (dwl/delete-component {:id $id})))
+
+  (instance
+    [_]
+    (let [id-ref (atom nil)]
+      (st/emit! (dwl/instantiate-component $file $id (gpt/point 0 0) {:id-ref id-ref}))
+      (shapes/shape-proxy @id-ref))))
 
 (defn lib-component-proxy
   [file-id id]
@@ -294,7 +308,26 @@
    {:name "$id" :enumerable false :get (constantly id)}
    {:name "$file" :enumerable false :get (constantly file-id)}
    {:name "id" :get (fn [_] (dm/str id))}
-   {:name "name" :get #(-> % u/proxy->library-component :name)}))
+
+   {:name "name"
+    :get #(-> % u/proxy->library-component :name)
+    :set
+    (fn [self value]
+      (if (and (some? value) (string? value))
+        (let [component (u/proxy->library-component self)
+              value (dm/str (d/nilv (:path component) "") " / " value)]
+          (st/emit! (dwl/rename-component id value)))
+        (u/display-not-valid :library-component-name value)))}
+
+   {:name "path"
+    :get #(-> % u/proxy->library-component :path)
+    :set
+    (fn [self value]
+      (if (and (some? value) (string? value))
+        (let [component (u/proxy->library-component self)
+              value (dm/str value " / " (:name component))]
+          (st/emit! (dwl/rename-component id value)))
+        (u/display-not-valid :library-component-path value)))}))
 
 (deftype Library [$id]
   Object
@@ -309,7 +342,14 @@
     [_]
     (let [typography-id (uuid/next)]
       (st/emit! (dwl/add-typography (ctt/make-typography {:id typography-id :name "Typography"}) false))
-      (lib-typography-proxy $id typography-id))))
+      (lib-typography-proxy $id typography-id)))
+
+  (createComponent
+    [_ shapes]
+    (let [id-ref (atom nil)
+          ids (into #{} (map #(obj/get % "$id")) shapes)]
+      (st/emit! (dwl/add-component id-ref ids))
+      (lib-component-proxy $id @id-ref))))
 
 (defn library-proxy
   [file-id]
@@ -343,7 +383,12 @@
     :get
     (fn [_]
       (let [file (u/locate-file file-id)
-            components (->> file :data :componentes keys (map #(lib-component-proxy file-id %)))]
+            components (->> file
+                            :data
+                            :components
+                            (remove (comp :deleted second))
+                            (map first)
+                            (map #(lib-component-proxy file-id %)))]
         (apply array components)))}))
 
 (deftype PenpotLibrarySubcontext []