✨ Add viewport information to the plugin

frontend/src/app/plugins/api.cljs

@@ -17,7 +17,8 @@
    [app.plugins.events :as events]
    [app.plugins.file :as file]
    [app.plugins.page :as page]
-   [app.plugins.shape :as shape]))
+   [app.plugins.shape :as shape]
+   [app.plugins.viewport :as viewport]))
 
 ;;
 ;; PLUGINS PUBLIC API - The plugins will able to access this functions
@@ -28,12 +29,30 @@
    (map val)
    (map shape/data->shape-proxy)))
 
+(defn create-shape
+  [type]
+  (let [page-id (:current-page-id @st/state)
+        page (dm/get-in @st/state [:workspace-data :pages-index page-id])
+        shape (cts/setup-shape {:type :type
+                                :x 0 :y 0 :width 100 :height 100})
+        changes
+        (-> (cb/empty-changes)
+            (cb/with-page page)
+            (cb/with-objects (:objects page))
+            (cb/add-object shape))]
+    (st/emit! (ch/commit-changes changes))
+    (shape/data->shape-proxy shape)))
+
 (deftype PenpotContext []
   Object
   (addListener
     [_ type callback]
     (events/add-listener type callback))
 
+  (getViewport
+    [_]
+    (viewport/create-proxy))
+
   (getFile
     [_]
     (file/data->file-proxy (:workspace-file @st/state) (:workspace-data @st/state)))
@@ -70,19 +89,13 @@
         "dark"
         (get-in @st/state [:profile :theme]))))
 
+  (createFrame
+    [_]
+    (create-shape :frame))
+
   (createRectangle
     [_]
-    (let [page-id (:current-page-id @st/state)
-          page (dm/get-in @st/state [:workspace-data :pages-index page-id])
-          shape (cts/setup-shape {:type :rect
-                                  :x 0 :y 0 :width 100 :height 100})
-          changes
-          (-> (cb/empty-changes)
-              (cb/with-page page)
-              (cb/with-objects (:objects page))
-              (cb/add-object shape))]
-      (st/emit! (ch/commit-changes changes))
-      (shape/data->shape-proxy shape))))
+    (create-shape :rect)))
 
 (defn create-context
   []
@@ -90,4 +103,5 @@
    (PenpotContext.)
    {:name "root" :get #(.getRoot ^js %)}
    {:name "currentPage" :get #(.getPage ^js %)}
-   {:name "selection" :get #(.getSelectedShapes ^js %)}))
+   {:name "selection" :get #(.getSelectedShapes ^js %)}
+   {:name "viewport" :get #(.getViewport ^js %)}))

frontend/src/app/plugins/shape.cljs

@@ -69,7 +69,8 @@
 
   (clone [_] (.log js/console (clj->js _data)))
   (delete [_] (.log js/console (clj->js _data)))
-  (appendChild [_] (.log js/console (clj->js _data))))
+  (appendChild [_ child] (.log js/console (clj->js _data)))
+  (insertChild [_ index child] (.log js/console (clj->js _data))))
 
 (crc/define-properties!
   ShapeProxy

frontend/src/app/plugins/viewport.cljs

@@ -0,0 +1,79 @@
+;; 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) KALEIDOS INC
+
+(ns app.plugins.viewport
+  "RPC for plugins runtime."
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.geom.point :as gpt]
+   [app.common.record :as crc]
+   [app.common.record :as crc]
+   [app.common.uuid :as uuid]
+   [app.main.data.workspace.viewport :as dwv]
+   [app.main.data.workspace.zoom :as dwz]
+   [app.main.store :as st]
+   [app.plugins.page :as page]
+   [app.plugins.utils :refer [get-data-fn]]
+   [app.util.object :as obj]))
+
+(deftype ViewportProxy []
+  Object
+  (zoomIntoView [_ shapes]
+    (let [ids
+          (->> shapes
+               (map (fn [v]
+                      (if (string? v)
+                        (uuid/uuid v)
+                        (uuid/uuid (obj/get v "x"))))))]
+      (st/emit! (dwz/fit-to-shapes ids)))))
+
+(crc/define-properties!
+  ViewportProxy
+  {:name js/Symbol.toStringTag
+   :get (fn [] (str "ViewportProxy"))})
+
+(defn create-proxy
+  []
+  (crc/add-properties!
+   (ViewportProxy.)
+   {:name "center"
+    :get
+    (fn [_]
+      (let [vp (dm/get-in @st/state [:workspace-local :vbox])
+            x (+ (:x vp) (/ (:width vp) 2))
+            y (+ (:y vp) (/ (:height vp) 2))]
+        (.freeze js/Object #js {:x x :y y})))
+
+    :set
+    (fn [_ value]
+      (let [new-x (obj/get value "x")
+            new-y (obj/get value "y")
+            vb (dm/get-in @st/state [:workspace-local :vbox])
+            old-x (+ (:x vb) (/ (:width vb) 2))
+            old-y (+ (:y vb) (/ (:height vb) 2))
+            delta-x (- new-x old-x)
+            delta-y (- new-y old-y)
+            to-position
+            {:x #(+ % delta-x)
+             :y #(+ % delta-y)}]
+        (st/emit! (dwv/update-viewport-position to-position))))}
+
+   {:name "zoom"
+    :get
+    (fn [_]
+      (dm/get-in @st/state [:workspace-local :zoom]))
+    :set
+    (fn [_ value]
+      (let [z (dm/get-in @st/state [:workspace-local :zoom])]
+        (st/emit! (dwz/set-zoom (/ value z)))))}
+
+   {:name "bounds"
+    :get
+    (fn [_]
+      (let [vport (dm/get-in @st/state [:workspace-local :vport])]
+        (.freeze js/Object (clj->js vport))))}))
+
+