repository·master·Indexed 23 days ago
https://github.com/salgum1114/react-design-editorA React module for building design tools, featuring an Image Editor and a Business Process Modelling (BPM) tool for workflows and flowcharts. Built with React.js, ant.design, and fabric.js, it provides a core Canvas component and a Handler API for manipulating objects, managing undo/redo history, and exporting/importing JSON data. Supports specialized editor modes including imagemap, workflow, hexgrid, and fiber.
The project currently targets antd@6. Because antd@6 requires React >= 18, the package metadata has been updated to support React 18.x and 19.x.
Note: If your environment requires React 16 or 17, this version of the project is incompatible as it cannot support antd@6 while maintaining those older React versions.
The project includes a compatibility layer located at src/antd-compat.tsx (aliased in vite.config.ts) to allow legacy Ant Design v3 patterns to function with antd@6.
If you are extending the codebase or maintaining existing components, be aware that the following mappings are handled by the compatibility layer:
| Legacy Pattern | Modern Mapping (antd@6) |
|---|---|
Form.create() | Modern Form internals |
getFieldDecorator() | Form.Item |
validateFields, resetFields, getFieldsError | Newer Form API |
Modal visible | open |
Modal bodyStyle / maskStyle | semantic styles |
Tooltip / Popover visible | open (or equivalent) |
Tabs.TabPane children | items prop |
Tabs tabPosition | tabPlacement |
If you are updating dependencies or performing a fresh installation, verify the project integrity by running the following commands:
npm install
npm run build:demo
npm run build:libThe Canvas component is the core of the editor. You can control it using a ref of type CanvasInstance. The canvasRef.current.handler provides an API to manipulate the canvas, such as adding objects, exporting/importing JSON, and managing undo/redo history.
Key Props:
ref: A CanvasInstance ref to access the handler.style: Must provide a visible height (especially for responsive sizing).canvasOption: Configuration for the canvas (e.g., backgroundColor).workareaOption: Configuration for the drawing area (e.g., width, height, backgroundColor).canvasActions: Enables features like clipboard and transaction (undo/redo).onSelect: Callback triggered when an object is selected.import { useRef } from 'react';
import { Canvas, type CanvasInstance } from 'react-design-editor';
import 'react-design-editor/react-design-editor.css';
export default function DesignCanvas() {
const canvasRef = useRef<CanvasInstance | null>(null);
const addRectangle = () => {
canvasRef.current?.handler.add({
type: 'rect',
name: 'Rectangle',
width: 160,
height: 90,
fill: '#5ee0bd',
rx: 8,
ry: 8,
});
};
const saveCanvas = () => {
const objects = canvasRef.current?.handler.exportJSON() ?? [];
localStorage.setItem('design', JSON.stringify(objects));
};
const loadCanvas = async () => {
const saved = localStorage.getItem('design');
if (saved) {
await canvasRef.current?.handler.importJSON(JSON.parse(saved));
}
};
return (
<div>
<button type="button" onClick={addRectangle}>Add rectangle</button>
<button type="button" onClick={saveCanvas}>Save</button>
<button type="button" onClick={loadCanvas}>Load</button>
<Canvas
ref={canvasRef}
style={{ width: '100%', height: 600 }}
canvasOption={{ backgroundColor: '#f4f7f9' }}
workareaOption={
{
width: 800,
height: 500,
backgroundColor: '#ffffff',
},
}
canvasActions={
{
clipboard: true,
transaction: true,
},
}
onSelect={object => {
console.log('Selected object:', object);
}},
/>
</div>
);
}Install the package using npm or yarn, and ensure you import the bundled CSS file in your application entry point to apply the editor's styles.
npm install react-design-editor
# or
yarn add react-design-editorimport 'react-design-editor/react-design-editor.css';When using getFontsExtended() or getFontsExtendedSync(), the library returns an array of ExtendedFont objects. This structure groups multiple font files (sub-families) under a single family name.
An ExtendedFont object contains:
family: The primary font family name.systemFont: A boolean indicating if the font is a system-installed font.subFamilies: An array of strings representing the different sub-families (e.g., ['Regular', 'Bold', 'Italic']).files: A mapping where keys are sub-family names and values are the absolute file paths.postscriptNames: A mapping where keys are sub-family names and values are the PostScript names.Once you have a reference to the Canvas component via useRef<CanvasInstance>, you can use canvasRef.current.handler to perform the following tasks:
.add({ type, ...options }) to insert elements like 'rect'..exportJSON() to get a JSON representation of the canvas objects..importJSON(data) to load previously saved JSON data.transaction: true option in canvasActions.clipboard: true option in canvasActions.The ResizeFilter controls how an image is scaled.
Options:
resizeType (string): The interpolation method. Supported values: 'bilinear', 'hermite', 'sliceHack', 'lanczos'.scaleX (number): Horizontal scale factor.scaleY (number): Vertical scale factor.lanczosLobes (number): Specific to the lanczos algorithm.The SystemFontsOptions object allows you to control how the SystemFonts class scans for files and filters results.
| Key | Type | Default | Description |
|---|---|---|---|
ignoreSystemFonts | boolean | false | If true, only fonts located in customDirs are returned. |
customDirs | string[] | [] | An array of folder paths to be scanned for fonts in addition to standard system paths. |
The RemoveWhiteFilter removes white areas from an image based on a threshold and distance.
Options:
threshold (number): The sensitivity for white detection. Defaults to 30.distance (number): The color distance threshold. Defaults to 20.The BlendColorFilter allows you to blend a specific color with the image using various modes.
Options:
color (string): The color to blend (e.g., #ff0000). Defaults to #000000.mode (string): The blend mode. Supported values: 'multiply', 'add', 'difference', 'screen', 'subtract', 'darken', 'lighten', 'overlay', 'exclusion', 'tint'.alpha (number): The opacity of the blend.The Monaco integration package exports several specialized components for different editing contexts:
MonacoEditor: The core editor component.MonacoModal: A modal wrapper designed to host a Monaco editor.MonacoPreview: A read-only or preview-focused implementation of the Monaco editor.