✨ Add support for components in plugins

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

@@ -340,7 +340,9 @@
 
 (defn- add-component2
   "This is the second step of the component creation."
-  [selected components-v2]
+  ([selected components-v2]
+   (add-component2 selected components-v2))
+  ([id-ref selected components-v2]
    (ptk/reify ::add-component2
      ev/Event
      (-data [_]
@@ -355,26 +357,31 @@
              shapes   (dwg/shapes-for-grouping objects selected)
              parents  (into #{} (map :parent-id) 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
                                              dwg/prepare-create-group
                                              cfsh/prepare-create-artboard-from-selection)]
+             (when id-ref
+               (reset! id-ref component-id))
              (when-not (empty? (:redo-changes changes))
                (rx/of (dch/commit-changes changes)
                       (dws/select-shapes (d/ordered-set (:id root)))
-                     (ptk/data-event :layout/update {:ids parents})))))))))
+                      (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."
-  []
+  ([]
+   (add-component nil nil))
+
+  ([id-ref ids]
    (ptk/reify ::add-component
      ptk/WatchEvent
      (watch [_ state _]
        (let [objects            (wsh/lookup-page-objects state)
-            selected           (->> (wsh/lookup-selected 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")
@@ -382,7 +389,7 @@
              can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))]
 
          (when can-make-component
-          (rx/of (add-component2 selected components-v2)))))))
+           (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)]
-      (st/emit! (dwt/apply-typography #{(:id typography)} typography $file))))
+    (let [shape-id   (obj/get shape "$id")
+          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 []