@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
277 lines (276 loc) • 7.15 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ShapeUtil_exports = {};
__export(ShapeUtil_exports, {
ShapeUtil: () => ShapeUtil
});
module.exports = __toCommonJS(ShapeUtil_exports);
var import_state = require("@tldraw/state");
class ShapeUtil {
constructor(editor) {
this.editor = editor;
}
/** Configure this shape utils {@link ShapeUtil.options | `options`}. */
static configure(options) {
return class extends this {
// @ts-expect-error
options = { ...this.options, ...options };
};
}
/**
* Options for this shape util. If you're implementing a custom shape util, you can override
* this to provide customization options for your shape. If using an existing shape util, you
* can customizing this by calling {@link ShapeUtil.configure}.
*/
options = {};
/**
* Props allow you to define the shape's properties in a way that the editor can understand.
* This has two main uses:
*
* 1. Validation. Shapes will be validated using these props to stop bad data from being saved.
* 2. Styles. Each {@link @tldraw/tlschema#StyleProp} in the props can be set on many shapes at
* once, and will be remembered from one shape to the next.
*
* @example
* ```tsx
* import {T, TLBaseShape, TLDefaultColorStyle, DefaultColorStyle, ShapeUtil} from 'tldraw'
*
* type MyShape = TLBaseShape<'mine', {
* color: TLDefaultColorStyle,
* text: string,
* }>
*
* class MyShapeUtil extends ShapeUtil<MyShape> {
* static props = {
* // we use tldraw's built-in color style:
* color: DefaultColorStyle,
* // validate that the text prop is a string:
* text: T.string,
* }
* }
* ```
*/
static props;
/**
* Migrations allow you to make changes to a shape's props over time. Read the
* {@link https://www.tldraw.dev/docs/persistence#Shape-props-migrations | shape prop migrations}
* guide for more information.
*/
static migrations;
/**
* The type of the shape util, which should match the shape's type.
*
* @public
*/
static type;
/**
* Get the font faces that should be rendered in the document in order for this shape to render
* correctly.
*
* @param shape - The shape.
* @public
*/
getFontFaces(shape) {
return import_state.EMPTY_ARRAY;
}
/**
* Whether the shape can be snapped to by another shape.
*
* @param shape - The shape.
* @public
*/
canSnap(_shape) {
return true;
}
/**
* Whether the shape can be tabbed to.
*
* @param shape - The shape.
* @public
*/
canTabTo(_shape) {
return true;
}
/**
* Whether the shape can be scrolled while editing.
*
* @public
*/
canScroll(_shape) {
return false;
}
/**
* Whether the shape can be bound to. See {@link TLShapeUtilCanBindOpts} for details.
*
* @public
*/
canBind(_opts) {
return true;
}
/**
* Whether the shape can be double clicked to edit.
*
* @public
*/
canEdit(_shape) {
return false;
}
/**
* Whether the shape can be resized.
*
* @public
*/
canResize(_shape) {
return true;
}
/**
* When the shape is resized, whether the shape's children should also be resized.
*
* @public
*/
canResizeChildren(_shape) {
return true;
}
/**
* Whether the shape can be edited in read-only mode.
*
* @public
*/
canEditInReadonly(_shape) {
return false;
}
/**
* Whether the shape can be cropped.
*
* @public
*/
canCrop(_shape) {
return false;
}
/**
* Whether the shape can participate in layout functions such as alignment or distribution.
*
* @param shape - The shape.
* @param info - Additional context information: the type of action causing the layout and the
* @public
*
* @public
*/
canBeLaidOut(_shape, _info) {
return true;
}
/**
* Does this shape provide a background for its children? If this is true,
* then any children with a `renderBackground` method will have their
* backgrounds rendered _above_ this shape. Otherwise, the children's
* backgrounds will be rendered above either the next ancestor that provides
* a background, or the canvas background.
*
* @internal
*/
providesBackgroundForChildren(_shape) {
return false;
}
/**
* Whether the shape should hide its resize handles when selected.
*
* @public
*/
hideResizeHandles(_shape) {
return false;
}
/**
* Whether the shape should hide its rotation handles when selected.
*
* @public
*/
hideRotateHandle(_shape) {
return false;
}
/**
* Whether the shape should hide its selection bounds background when selected.
*
* @public
*/
hideSelectionBoundsBg(_shape) {
return false;
}
/**
* Whether the shape should hide its selection bounds foreground when selected.
*
* @public
*/
hideSelectionBoundsFg(_shape) {
return false;
}
/**
* Whether the shape's aspect ratio is locked.
*
* @public
*/
isAspectRatioLocked(_shape) {
return false;
}
/**
* Get whether the shape can receive children of a given type.
*
* @param shape - The shape.
* @param type - The shape type.
* @public
*/
canReceiveNewChildrenOfType(_shape, _type) {
return false;
}
/** @internal */
expandSelectionOutlinePx(shape) {
return 0;
}
/**
* Return elements to be added to the \<defs\> section of the canvases SVG context. This can be
* used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg
* elements returned by `component`.
*
* Each def should have a unique `key`. If multiple defs from different shapes all have the same
* key, only one will be used.
*/
getCanvasSvgDefs() {
return [];
}
/**
* Get the geometry to use when snapping to this this shape in translate/resize operations. See
* {@link BoundsSnapGeometry} for details.
*/
getBoundsSnapGeometry(_shape) {
return {};
}
/**
* Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry}
* for details.
*/
getHandleSnapGeometry(_shape) {
return {};
}
getText(_shape) {
return void 0;
}
getAriaDescriptor(_shape) {
return void 0;
}
}
//# sourceMappingURL=ShapeUtil.js.map