@rifrocket/fdt-plugin-shapes-basic

20 default shape object types for Fabric Design Tool — text, rects, ellipses, and 14 polygons.

A pure engine plugin that registers the default shape set: text, rect, circle, line, ellipse, rounded-rectangle, plus 14 polygon shapes registered directly from a coordinate table (triangle, pentagon, hexagon, star, diamond, heart, arrow, cloud, lightning, speechBubble, cross, parallelogram, trapezoid, octagon).

Features

• 20 object types registered via registerBasicShapes, all addressable through engine.addObjectOfType(<type>, config)
• SHAPE_COORDINATES — the raw coordinate table backing the 14 polygon shapes, exported if you want to build your own polygon type from the same data shape (PolygonShapeType)
• SHAPE_COLORS — the default fill/stroke palette used when a shape is created without explicit colors

interface ShapeConfig {
  left?: number;
  top?: number;
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  selectable?: boolean;
  evented?: boolean;
}

Included in both <DesignEditor preset="default"> and preset="minimal".

Install

npm install @rifrocket/fdt-plugin-shapes-basic

Peer dependencies: fabric, react, react-dom. Depends on @rifrocket/fabricjs-design-tool and @rifrocket/fdt-properties.

Quick start

import { shapesBasicPlugin } from "@rifrocket/fdt-plugin-shapes-basic";

engine.use(shapesBasicPlugin);

await engine.addObjectOfType("rect", { left: 10, top: 10, fill: "#3b82f6" });
await engine.addObjectOfType("star", { fill: "#f59e0b", stroke: "#000" });

Documentation

• Full plugin reference

License

MIT © Fabric Design Tool Contributors