feat: add sticky field to transaction

Author: salgum1114

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.84",
+	"version": "0.0.85",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.cjs.js",
 	"module": "dist/react-design-editor.es.js",

src/canvas/constants/defaults.ts

@@ -74,4 +74,4 @@ export const activeSelectionOption = {
 	hasControls: true,
 };
 
-export const propertiesToInclude = ['id', 'name', 'description', 'locked', 'editable', 'configuration'];
+export const propertiesToInclude = ['id', 'name', 'description', 'locked', 'editable', 'configuration', 'errors'];

src/canvas/handlers/TransactionHandler.ts

@@ -48,6 +48,7 @@ type StickyNodeFields = Partial<{
 	configuration: any;
 	name: string;
 	description: string;
+	errors: any;
 }>;
 
 class TransactionHandler extends AbstractHandler {
@@ -155,6 +156,9 @@ class TransactionHandler extends AbstractHandler {
 			// description
 			if ('description' in anyObj) next.description = anyObj.description;
 
+			// errors
+			if ('errors' in anyObj) next.errors = this.cloneDeep(anyObj.errors);
+
 			this.latestNodeSticky.set(id, next);
 		}
 	};
@@ -180,10 +184,13 @@ class TransactionHandler extends AbstractHandler {
 				anyObj.configuration = this.cloneDeep(sticky.configuration);
 			}
 			if (Object.prototype.hasOwnProperty.call(sticky, 'name')) {
-				anyObj.name = this.cloneDeep(sticky.name);
+				anyObj.name = sticky.name;
 			}
 			if (Object.prototype.hasOwnProperty.call(sticky, 'description')) {
-				anyObj.description = this.cloneDeep(sticky.description);
+				anyObj.description = sticky.description;
+			}
+			if (Object.prototype.hasOwnProperty.call(sticky, 'errors')) {
+				anyObj.errors = this.cloneDeep(sticky.errors);
 			}
 		}
 	};

src/canvas/objects/Node.ts

@@ -107,7 +107,7 @@ const Node = fabric.util.createClass(fabric.Group, {
 			left: this.nodeIcon.left + this.nodeIcon.width + 10,
 			top: this.nodeIcon.top + this.nodeIcon.height / 2 - this.label.height / 2,
 		});
-		this.errorFlag.set({ visible: options.errors });
+		this.setErrors(options.errors);
 		if (options.descriptor.actionButton) {
 			this.button.set({
 				left: this.rect.left + this.rect.width - this.button.width + 1,
@@ -359,6 +359,7 @@ const Node = fabric.util.createClass(fabric.Group, {
 			cloneable: this.get('cloneable'),
 			fromPort: this.get('fromPort'),
 			toPort: this.get('toPort'),
+			errors: this.get('errors'),
 		});
 	},
 	_render(ctx: CanvasRenderingContext2D) {

src/editors/workflow/WorkflowEditor.tsx

@@ -244,6 +244,7 @@ class WorkflowEditor extends React.Component {
 					} else {
 						selectedItem?.setErrors(false);
 					}
+					this.canvasRef.handler.transactionHandler.save('configuration');
 					this.canvasRef.canvas.renderAll();
 				}, 0);
 				const configuration = Object.assign({}, selectedItem?.configuration, changedValues.configuration);