react-design-editor 0.0.60 → 0.0.62

package/lib/objects/Link.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
-const uuidv4_1 = require("uuidv4");
+const svg_path_properties_1 = require("svg-path-properties");
+const uuid_1 = require("uuid");
 const Node_1 = require("./Node");
-const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
+const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     type: 'link',
     superType: 'link',
     initialize(fromNode, fromPort, toNode, toPort, options) {
-        options = options || {};
-        const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
-        Object.assign(options, {
-            strokeWidth: 4,
-            id: options.id || (0, uuidv4_1.uuid)(),
+        const { left, top, ...other } = options || {};
+        this.fromNode = fromNode;
+        this.fromPort = fromPort;
+        this.toNode = toNode;
+        this.toPort = toPort;
+        console.log(options);
+        const { line, arrow } = this.draw(fromPort, toPort, options);
+        this.line = line;
+        this.arrow = arrow;
+        Object.assign(other, {
+            id: options.id || (0, uuid_1.v4)(),
             originX: 'center',
             originY: 'center',
             lockScalingX: true,
@@ -29,8 +36,9 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
             toNode,
             toPort,
             hoverCursor: 'pointer',
+            objectCaching: false,
         });
-        this.callSuper('initialize', coords, options);
+        this.callSuper('initialize', [line, arrow], other);
     },
     setPort(fromNode, fromPort, _toNode, toPort) {
         if (fromNode.type === 'BroadcastNode') {
@@ -42,28 +50,147 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
     },
     setPortEnabled(node, port, enabled) {
         if (node.descriptor.outPortType !== Node_1.OUT_PORT_TYPE.BROADCAST) {
-            port.set({
-                enabled,
-                fill: enabled ? port.originFill : port.selectFill,
-            });
+            port.set({ enabled, fill: enabled ? port.originFill : port.selectFill });
         }
         else {
             if (node.toPort.id === port.id) {
                 return;
             }
-            port.links.forEach((link, index) => {
-                link.set({
-                    fromPort: port,
-                    fromPortIndex: index,
-                });
-            });
-            node.set({
-                configuration: {
-                    outputCount: port.links.length,
-                },
-            });
+            port.links.forEach((link, index) => link.set({ fromPort: port, fromPortIndex: index }));
+            node.set({ configuration: { outputCount: port.links.length } });
         }
     },
+    setColor(color) {
+        this.line.set({ stroke: color });
+        this.arrow.set({ fill: color });
+    },
+    /**
+     * fabric.Path용 setPath 헬퍼 (FabricJS v4.6.0)
+     * @param {string} pathStr - 새로운 SVG path 문자열
+     */
+    parsePath(pathStr) {
+        const tempPathObj = new fabric_1.fabric.Path(pathStr);
+        return tempPathObj.path;
+    },
+    getPortPosition(node, direction) {
+        const { left, top, width, height } = node || {};
+        switch (direction) {
+            case 'R':
+                return { x: left + width, y: top + height / 2 };
+            case 'L':
+                return { x: left, y: top + height / 2 };
+            case 'T':
+                return { x: width ? left + width / 2 : left, y: top };
+            case 'B':
+                return { x: left, y: top };
+            default:
+                return { x: 0, y: 0 };
+        }
+    },
+    draw(fromPort, toPort, options = {}) {
+        const { strokeWidth = 4, stroke = '#999' } = options;
+        const { path, midX, midY, angle } = this.calculatePath(fromPort, toPort);
+        const line = new fabric_1.fabric.Path(path, {
+            strokeWidth: strokeWidth || 4,
+            fill: '',
+            originX: 'center',
+            originY: 'center',
+            stroke: stroke || '#999',
+            selectable: false,
+            evented: false,
+            strokeLineJoin: 'round',
+            objectCaching: false,
+        });
+        const arrow = new fabric_1.fabric.Triangle({
+            left: midX,
+            top: midY,
+            originX: 'center',
+            originY: 'center',
+            angle: angle,
+            width: 13,
+            height: 13,
+            fill: stroke,
+            selectable: false,
+            evented: false,
+        });
+        return { line, arrow };
+    },
+    update(fromPort, toPort) {
+        const { path, midX, midY, angle } = this.calculatePath(fromPort, toPort);
+        this.removeWithUpdate(this.line);
+        this.line = new fabric_1.fabric.Path(path, {
+            strokeWidth: this.strokeWidth || 4,
+            fill: '',
+            originX: 'center',
+            originY: 'center',
+            stroke: this.stroke || '#999',
+            selectable: false,
+            evented: false,
+            strokeLineJoin: 'round',
+            objectCaching: false,
+        });
+        this.addWithUpdate(this.line);
+        this.arrow.set({ left: midX - this.left, top: midY - this.top, angle: angle });
+        this.arrow.setCoords();
+        this.canvas.requestRenderAll();
+    },
+    calculatePath(fromPort, toPort) {
+        const p1 = this.getPortPosition(fromPort, 'B');
+        const p2 = this.getPortPosition(toPort, 'T');
+        const width = this.fromNode?.width || 200;
+        const height = this.fromNode?.height || 40;
+        const offset = 40;
+        let x1 = p1.x;
+        let y1 = p1.y;
+        let x2 = x1;
+        let y2 = y1 + height / 2;
+        let x3 = x2 - fromPort.left + this.fromNode.left - offset;
+        let y3 = p2.y - height / 2;
+        let x4 = p2.x;
+        let y4 = p2.y;
+        const useCurve = p2.y > p1.y;
+        const diff = x3 - (x2 - width);
+        let path;
+        if (useCurve) {
+            path = `M ${p1.x} ${p1.y} C ${p1.x} ${p1.y + 40}, ${p2.x} ${p1.y === p2.y ? p2.y : p2.y - 40}, ${p2.x} ${p2.y}`;
+        }
+        else {
+            const baseRadius = 10;
+            const dx = p1.x - p2.x;
+            const isUpward = width - diff <= dx && dx >= 0;
+            const distance = Math.abs(width - diff - dx);
+            let ratio = Math.min(1, distance / offset);
+            let radius = baseRadius * ratio;
+            path = [
+                `M ${x1} ${y1}`,
+                `L ${x2} ${y2 - baseRadius}`,
+                `Q ${x2} ${y2} ${x2 - baseRadius} ${y2}`,
+                `L ${x3 + baseRadius} ${y2}`,
+                `Q ${x3} ${y2} ${x3} ${y2 - baseRadius}`,
+                `L ${x3} ${y3 + radius}`,
+                `Q ${x3} ${y3} ${isUpward ? x3 - radius : x3 + radius} ${y3}`,
+                `L ${isUpward ? x4 + radius : x4 - radius} ${y3}`,
+                `Q ${x4} ${y3} ${x4} ${y3 + radius}`,
+                `L ${x4} ${y4}`,
+            ].join(' ');
+        }
+        let midX = x3;
+        let midY = (y3 + y2) / 2;
+        let angle = 0;
+        if (useCurve) {
+            const properties = new svg_path_properties_1.svgPathProperties(path);
+            const totalLength = properties.getTotalLength();
+            const delta = 1;
+            const ahead = properties.getPointAtLength(totalLength / 2 + delta);
+            const behind = properties.getPointAtLength(totalLength / 2 - delta);
+            const dx = ahead.x - behind.x;
+            const dy = ahead.y - behind.y;
+            midX = (p1.x + p2.x) / 2;
+            midY = (p1.y + p2.y) / 2;
+            angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+        }
+        return { path, midX, midY, angle };
+    },
     toObject() {
         return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
             id: this.get('id'),
@@ -71,32 +198,13 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
             superType: this.get('superType'),
             configuration: this.get('configuration'),
             fromNode: this.get('fromNode'),
+            fromNodeId: this.get('fromNodeId'),
             fromPort: this.get('fromPort'),
             toNode: this.get('toNode'),
+            toNodeId: this.get('toNodeId'),
             toPort: this.get('toPort'),
         });
     },
-    _render(ctx) {
-        this.callSuper('_render', ctx);
-        ctx.save();
-        const xDiff = this.x2 - this.x1;
-        const yDiff = this.y2 - this.y1;
-        const angle = Math.atan2(yDiff, xDiff);
-        ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
-        ctx.rotate(angle);
-        ctx.beginPath();
-        if (this.arrow) {
-            // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
-            ctx.moveTo(5, 0);
-            ctx.lineTo(-5, 5);
-            ctx.lineTo(-5, -5);
-        }
-        ctx.closePath();
-        ctx.lineWidth = this.strokeWidth;
-        ctx.fillStyle = this.stroke;
-        ctx.fill();
-        ctx.restore();
-    },
 });
 Link.fromObject = (options, callback) => {
     const { fromNode, fromPort, toNode, toPort } = options;

package/lib/objects/Node.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEllipsis = exports.DESCRIPTIONS = exports.OUT_PORT_TYPE = exports.NODE_COLORS = void 0;
 const fabric_1 = require("fabric");
 const i18next_1 = __importDefault(require("i18next"));
-const uuidv4_1 = require("uuidv4");
+const uuid_1 = require("uuid");
 const Port_1 = __importDefault(require("./Port"));
 exports.NODE_COLORS = {
     TRIGGER: {
@@ -97,7 +97,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         });
         const node = [rect, icon, this.label, this.errorFlag];
         const option = Object.assign({}, options, {
-            id: options.id || (0, uuidv4_1.uuid)(),
+            id: options.id || (0, uuid_1.v4)(),
             width: 200,
             height: 40,
             originX: 'left',
@@ -252,7 +252,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     duplicate() {
         const options = this.toObject();
-        options.id = (0, uuidv4_1.uuid)();
+        options.id = (0, uuid_1.v4)();
         options.name = `${options.name}_clone`;
         return new Node(options);
     },

package/lib/objects/index.d.ts

@@ -7,9 +7,13 @@ export { default as Element } from './Element';
 export { default as Gif } from './Gif';
 export { default as Iframe } from './Iframe';
 export { default as Line } from './Line';
+export { default as LineLink } from './LineLink';
 export { default as Link } from './Link';
+export type { LinkedNodePropeties, LinkObject } from './Link';
 export { default as Node } from './Node';
+export type { NodeObject } from './Node';
 export { default as OrthogonalLink } from './OrthogonalLink';
 export { default as Port } from './Port';
+export type { PortObject } from './Port';
 export { default as Svg } from './Svg';
 export { default as Video } from './Video';

package/lib/objects/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Video = exports.Svg = exports.Port = exports.OrthogonalLink = exports.Node = exports.Link = exports.Line = exports.Iframe = exports.Gif = exports.Element = exports.CurvedLink = exports.Cube = exports.CirclePort = exports.Chart = exports.Arrow = void 0;
+exports.Video = exports.Svg = exports.Port = exports.OrthogonalLink = exports.Node = exports.Link = exports.LineLink = exports.Line = exports.Iframe = exports.Gif = exports.Element = exports.CurvedLink = exports.Cube = exports.CirclePort = exports.Chart = exports.Arrow = void 0;
 var Arrow_1 = require("./Arrow");
 Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return __importDefault(Arrow_1).default; } });
 var Chart_1 = require("./Chart");
@@ -22,6 +22,8 @@ var Iframe_1 = require("./Iframe");
 Object.defineProperty(exports, "Iframe", { enumerable: true, get: function () { return __importDefault(Iframe_1).default; } });
 var Line_1 = require("./Line");
 Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return __importDefault(Line_1).default; } });
+var LineLink_1 = require("./LineLink");
+Object.defineProperty(exports, "LineLink", { enumerable: true, get: function () { return __importDefault(LineLink_1).default; } });
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
 var Node_1 = require("./Node");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.60",
+	"version": "0.0.62",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -46,11 +46,15 @@
 		"react-dom": "^16.14.0"
 	},
 	"dependencies": {
+		"@dagrejs/dagre": "^1.1.4",
+		"@flomon-ui/icons": "^0.0.68",
 		"animejs": "^3.0.0",
 		"antd": "3.15.0",
 		"classnames": "^2.2.6",
+		"clsx": "^2.1.1",
 		"color": "^3.1.2",
 		"echarts": "^4.7.0",
+		"elkjs": "^0.10.0",
 		"fabric": "^4.6.0",
 		"gifler": "^0.1.0",
 		"honeycomb-grid": "^3.1.7",
@@ -65,16 +69,15 @@
 		"react-custom-scrollbars": "^4.2.1",
 		"react-dom": "^16.14.0",
 		"react-helmet": "^5.2.0",
-		"react-hot-loader": "^4.12.20",
 		"react-json-view": "^1.19.1",
 		"resize-observer-polyfill": "^1.5.1",
 		"store": "^2.0.12",
-		"uuid": "^7.0.3",
-		"uuidv4": "^6.2.8",
+		"svg-path-properties": "^1.3.0",
+		"uuid": "^11.1.0",
 		"warning": "^4.0.3"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.16.0",
+		"@babel/core": "^7.27.3",
 		"@babel/plugin-proposal-class-properties": "^7.16.0",
 		"@babel/plugin-proposal-decorators": "^7.16.4",
 		"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
@@ -98,6 +101,8 @@
 		"@types/uuid": "^7.0.2",
 		"@types/warning": "^3.0.0",
 		"@types/webpack-env": "^1.16.0",
+		"@typescript-eslint/eslint-plugin": "^8.33.0",
+		"@typescript-eslint/parser": "^8.33.0",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"babel-plugin-dynamic-import-webpack": "^1.1.0",
@@ -106,30 +111,32 @@
 		"css-loader": "^3.5.2",
 		"del": "^5.1.0",
 		"eslint": "^8.3.0",
-		"eslint-config-airbnb": "^19.0.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-airbnb-typescript": "^18.0.0",
+		"eslint-import-resolver-typescript": "^4.4.1",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-import": "^2.20.2",
 		"eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-react": "^7.19.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
 		"file-loader": "^6.0.0",
 		"fs-extra": "^9.0.0",
 		"gh-pages": "^2.2.0",
-		"html-webpack-plugin": "^3.2.0",
+		"html-webpack-plugin": "^5.6.3",
 		"http-server": "^14.1.0",
 		"less": "^2.7.3",
 		"less-loader": "^5.0.0",
 		"path": "^0.12.7",
 		"style-loader": "^1.1.4",
-		"terser-webpack-plugin": "^4.2.3",
-		"tslint": "^6.1.1",
-		"tslint-react": "^5.0.0",
+		"terser-webpack-plugin": "^5.3.14",
+		"tslib": "^2.8.1",
 		"typedoc": "^0.17.4",
 		"typescript": "^4.7.4",
 		"url-loader": "^4.1.0",
-		"webpack": "^4.46.0",
-		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.15.1",
-		"webpack-merge": "^4.2.2",
-		"workbox-webpack-plugin": "^5.1.2"
+		"webpack": "^5.99.9",
+		"webpack-cli": "^5.1.4",
+		"webpack-dev-server": "^5.2.1",
+		"webpack-merge": "^6.0.1",
+		"workbox-webpack-plugin": "^6.6.1"
 	}
 }

package/lib/handlers/FiberHandler.d.ts

@@ -1,6 +0,0 @@
-import CustomHandler from './CustomHandler';
-declare class FiberHandler extends CustomHandler {
-    protected initialze(): void;
-    private mousedown;
-}
-export default FiberHandler;

package/lib/handlers/FiberHandler.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const CustomHandler_1 = __importDefault(require("./CustomHandler"));
-class FiberHandler extends CustomHandler_1.default {
-    initialze() {
-        this.handler.canvas.on('mouse:down', this.mousedown);
-    }
-    mousedown(opt) {
-        const { subTargets } = opt;
-        if (subTargets.length) {
-            const target = subTargets[0];
-            console.log(target);
-            if (target.type === 'container') {
-            }
-            else if (target.type === 'coreContainer') {
-            }
-        }
-    }
-}
-exports.default = FiberHandler;