mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-21 14:12:42 -05:00
feat(plugins-runtime): new geometry utils
This commit is contained in:
parent
fcf1e98200
commit
b464269a00
2 changed files with 116 additions and 11 deletions
95
libs/plugin-types/index.d.ts
vendored
95
libs/plugin-types/index.d.ts
vendored
|
@ -995,6 +995,11 @@ export interface PenpotShapeBase extends PenpotPluginData {
|
||||||
*/
|
*/
|
||||||
flipY: boolean;
|
flipY: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the rotation in degrees of the shape with respect to it's center.
|
||||||
|
*/
|
||||||
|
rotation: number;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The fills applied to the shape.
|
* The fills applied to the shape.
|
||||||
*/
|
*/
|
||||||
|
@ -1050,6 +1055,13 @@ export interface PenpotShapeBase extends PenpotPluginData {
|
||||||
*/
|
*/
|
||||||
resize(width: number, height: number): void;
|
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.
|
* Creates a clone of the shape.
|
||||||
* Returns a new instance of the shape with identical properties.
|
* 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.
|
* @param child The child shape to insert.
|
||||||
*/
|
*/
|
||||||
insertChild(index: number, child: PenpotShape): void;
|
insertChild(index: number, child: PenpotShape): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
|
isMask(): boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Converts the group into a mask.
|
* Converts the group into a mask.
|
||||||
*/
|
*/
|
||||||
|
@ -2134,6 +2152,72 @@ export interface PenpotContext {
|
||||||
removeListener(listenerId: symbol): void;
|
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.
|
* 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;
|
onMessage: <T>(callback: (message: T) => void) => void;
|
||||||
};
|
};
|
||||||
utils: {
|
/**
|
||||||
types: {
|
* TODO: utils
|
||||||
isText(shape: PenpotShape): shape is PenpotText;
|
*/
|
||||||
isRectangle(shape: PenpotShape): shape is PenpotRectangle;
|
utils: PenpotContextUtils;
|
||||||
isFrame(shape: PenpotShape): shape is PenpotFrame;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
/**
|
/**
|
||||||
* Closes the plugin. When this method is called the UI will be closed.
|
* Closes the plugin. When this method is called the UI will be closed.
|
||||||
*
|
*
|
||||||
|
|
|
@ -19,6 +19,7 @@ import type {
|
||||||
PenpotUser,
|
PenpotUser,
|
||||||
PenpotActiveUser,
|
PenpotActiveUser,
|
||||||
PenpotFontsContext,
|
PenpotFontsContext,
|
||||||
|
PenpotSvgRaw,
|
||||||
} from '@penpot/plugin-types';
|
} from '@penpot/plugin-types';
|
||||||
|
|
||||||
import { Manifest, Permissions } from '../models/manifest.model.js';
|
import { Manifest, Permissions } from '../models/manifest.model.js';
|
||||||
|
@ -119,15 +120,38 @@ export function createApi(context: PenpotContext, manifest: Manifest): Penpot {
|
||||||
},
|
},
|
||||||
|
|
||||||
utils: {
|
utils: {
|
||||||
|
geometry: {
|
||||||
|
center(shapes: PenpotShape[]) {
|
||||||
|
return (window as any).app.plugins.public_utils.centerShapes(shapes);
|
||||||
|
},
|
||||||
|
},
|
||||||
types: {
|
types: {
|
||||||
isText(shape: PenpotShape): shape is PenpotText {
|
isFrame(shape: PenpotShape): shape is PenpotFrame {
|
||||||
return shape.type === 'text';
|
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 {
|
isRectangle(shape: PenpotShape): shape is PenpotRectangle {
|
||||||
return shape.type === 'rect';
|
return shape.type === 'rect';
|
||||||
},
|
},
|
||||||
isFrame(shape: PenpotShape): shape is PenpotFrame {
|
isPath(shape: PenpotShape): shape is PenpotPath {
|
||||||
return shape.type === 'frame';
|
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';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Reference in a new issue