feat(plugins-runtime): new geometry utils

libs/plugin-types/index.d.ts

@@ -995,6 +995,11 @@ export interface PenpotShapeBase extends PenpotPluginData {
    */
   flipY: boolean;
 
+  /**
+   * Returns the rotation in degrees of the shape with respect to it's center.
+   */
+  rotation: number;
+
   /**
    * The fills applied to the shape.
    */
@@ -1050,6 +1055,13 @@ export interface PenpotShapeBase extends PenpotPluginData {
    */
   resize(width: number, height: number): void;
 
+  /**
+   * Rotates the shape in relation with the given center.
+   * @param angle Angle in degrees to rotate.
+   * @param center Center of the transform rotation. If not send will use the geometri center of the shapes.
+   */
+  rotate(angle: number, center?: { x: number; y: number } | null): void;
+
   /**
    * Creates a clone of the shape.
    * Returns a new instance of the shape with identical properties.
@@ -1150,6 +1162,12 @@ export interface PenpotGroup extends PenpotShapeBase {
    * @param child The child shape to insert.
    */
   insertChild(index: number, child: PenpotShape): void;
+
+  /**
+   * TODO
+   */
+  isMask(): boolean;
+
   /**
    * Converts the group into a mask.
    */
@@ -2134,6 +2152,72 @@ export interface PenpotContext {
   removeListener(listenerId: symbol): void;
 }
 
+/**
+ * TODO PenpotContextGeometryUtils
+ */
+export interface PenpotContextGeometryUtils {
+  /**
+   * TODO center
+   */
+  center(shapes: PenpotShape[]): { x: number; y: number } | null;
+}
+
+/**
+ * TODO PenpotContextTypesUtils
+ */
+export interface PenpotContextTypesUtils {
+  /**
+   * TODO isFrame
+   */
+  isFrame(shape: PenpotShape): shape is PenpotFrame;
+  /**
+   * TODO isGroup
+   */
+  isGroup(shape: PenpotShape): shape is PenpotGroup;
+  /**
+   * TODO isMask
+   */
+  isMask(shape: PenpotShape): shape is PenpotGroup;
+  /**
+   * TODO isBool
+   */
+  isBool(shape: PenpotShape): shape is PenpotBool;
+  /**
+   * TODO isRectangle
+   */
+  isRectangle(shape: PenpotShape): shape is PenpotRectangle;
+  /**
+   * TODO isPath
+   */
+  isPath(shape: PenpotShape): shape is PenpotPath;
+  /**
+   * TODO isText
+   */
+  isText(shape: PenpotShape): shape is PenpotText;
+  /**
+   * TODO isEllipse
+   */
+  isEllipse(shape: PenpotShape): shape is PenpotEllipse;
+  /**
+   * TODO isSVG
+   */
+  isSVG(shape: PenpotShape): shape is PenpotSvgRaw;
+}
+
+/**
+ * TODO PenpotContextUtils
+ */
+export interface PenpotContextUtils {
+  /**
+   * TODO PenpotContextGeometryUtils
+   */
+  readonly geometry: PenpotContextGeometryUtils;
+  /**
+   * TODO PenpotContextTypesUtils
+   */
+  readonly types: PenpotContextTypesUtils;
+}
+
 /**
  * These are methods and properties available on the `penpot` global object.
  *
@@ -2182,13 +2266,10 @@ export interface Penpot
      */
     onMessage: <T>(callback: (message: T) => void) => void;
   };
-  utils: {
-    types: {
-      isText(shape: PenpotShape): shape is PenpotText;
-      isRectangle(shape: PenpotShape): shape is PenpotRectangle;
-      isFrame(shape: PenpotShape): shape is PenpotFrame;
-    };
-  };
+  /**
+   * TODO: utils
+   */
+  utils: PenpotContextUtils;
   /**
    * Closes the plugin. When this method is called the UI will be closed.
    *

libs/plugins-runtime/src/lib/api/index.ts

@@ -19,6 +19,7 @@ import type {
   PenpotUser,
   PenpotActiveUser,
   PenpotFontsContext,
+  PenpotSvgRaw,
 } from '@penpot/plugin-types';
 
 import { Manifest, Permissions } from '../models/manifest.model.js';
@@ -119,15 +120,38 @@ export function createApi(context: PenpotContext, manifest: Manifest): Penpot {
     },
 
     utils: {
+      geometry: {
+        center(shapes: PenpotShape[]) {
+          return (window as any).app.plugins.public_utils.centerShapes(shapes);
+        },
+      },
       types: {
-        isText(shape: PenpotShape): shape is PenpotText {
-          return shape.type === 'text';
+        isFrame(shape: PenpotShape): shape is PenpotFrame {
+          return shape.type === 'frame';
+        },
+        isGroup(shape: PenpotShape): shape is PenpotGroup {
+          return shape.type === 'group';
+        },
+        isMask(shape: PenpotShape): shape is PenpotGroup {
+          return shape.type === 'group' && shape.isMask();
+        },
+        isBool(shape: PenpotShape): shape is PenpotBool {
+          return shape.type === 'bool';
         },
         isRectangle(shape: PenpotShape): shape is PenpotRectangle {
           return shape.type === 'rect';
         },
-        isFrame(shape: PenpotShape): shape is PenpotFrame {
-          return shape.type === 'frame';
+        isPath(shape: PenpotShape): shape is PenpotPath {
+          return shape.type === 'path';
+        },
+        isText(shape: PenpotShape): shape is PenpotText {
+          return shape.type === 'text';
+        },
+        isEllipse(shape: PenpotShape): shape is PenpotEllipse {
+          return shape.type === 'circle';
+        },
+        isSVG(shape: PenpotShape): shape is PenpotSvgRaw {
+          return shape.type === 'svg-raw';
         },
       },
     },