From 168fe04cfc1ac1b0e5f72f86ccbc857be0aa5dc2 Mon Sep 17 00:00:00 2001
From: AdrySky <adry.aqil@skymind.my>
Date: Fri, 25 Mar 2022 10:57:59 +0800
Subject: [PATCH] Add context menu option to open node's script

---
 src/commands/NodeActionCommands.ts    | 15 +++++++++++++++
 src/components/xircuitBodyWidget.tsx  |  3 ++-
 src/context-menu/NodeActionsPanel.tsx |  6 ++++++
 src/context-menu/TrayItemPanel.tsx    |  2 +-
 src/tray_library/Sidebar.tsx          | 11 +++++++++--
 style/NodeActionPanel.css             |  2 +-
 6 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/commands/NodeActionCommands.ts b/src/commands/NodeActionCommands.ts
index 9a3971d2..309189fa 100644
--- a/src/commands/NodeActionCommands.ts
+++ b/src/commands/NodeActionCommands.ts
@@ -31,6 +31,21 @@ export function addNodeActionCommands(
         );
     }
 
+    //Add command to open canvas's node its script
+    commands.addCommand(commandIDs.openScript, {
+        execute:  () =>{
+            const widget = tracker.currentWidget?.content as XPipePanel;
+            const selectedEntities = widget.xircuitsApp.getDiagramEngine().getModel().getSelectedEntities();
+            _.forEach(selectedEntities, (model) => {
+                const filePath = model.extras.path
+                app.commands.execute(commandIDs.openDocManager, {
+                    path: filePath
+                });
+            });
+            widget.xircuitsApp.getDiagramEngine().repaintCanvas();
+        }
+    });
+
     //Add command to undo
     commands.addCommand(commandIDs.undo, {
         execute:  () =>{
diff --git a/src/components/xircuitBodyWidget.tsx b/src/components/xircuitBodyWidget.tsx
index b70df9ef..7c5ac764 100644
--- a/src/components/xircuitBodyWidget.tsx
+++ b/src/components/xircuitBodyWidget.tsx
@@ -95,6 +95,7 @@ export const commandIDs = {
 	runXircuit: 'Xircuit-editor:run-node',
 	debugXircuit: 'Xircuit-editor:debug-node',
 	lockXircuit: 'Xircuit-editor:lock-node',
+	openScript: 'Xircuit-editor:open-node-script',
 	undo: 'Xircuit-editor:undo',
 	redo: 'Xircuit-editor:redo',
 	cutNode: 'Xircuit-editor:cut-node',
@@ -1693,7 +1694,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 							if (current_node.header == "GENERAL") {
 								node = GeneralComponentLibrary({ name: data.name, color: current_node["color"], type: data.type });
 							} else if (current_node.header == "ADVANCED") {
-								node = new CustomNodeModel({ name: data.name, color: current_node["color"], extras: { "type": data.type } });
+								node = new CustomNodeModel({ name: data.name, color: data.color, extras: { "type": data.type, "path": data.path } });
 								node.addInPortEnhance('▶', 'in-0');
 								node.addOutPortEnhance('▶', 'out-0');
 
diff --git a/src/context-menu/NodeActionsPanel.tsx b/src/context-menu/NodeActionsPanel.tsx
index 8dd1fa2f..c620e9fc 100644
--- a/src/context-menu/NodeActionsPanel.tsx
+++ b/src/context-menu/NodeActionsPanel.tsx
@@ -51,6 +51,12 @@ export class NodeActionsPanel extends React.Component<NodeActionsPanelProps> {
 					}}>
 					Edit
 				</div>
+				<div className="option"
+					onClick={() => {
+						this.props.app.commands.execute(commandIDs.openScript)
+					}}>
+					Open Script
+				</div>
 				<div className="option"
 					onClick={() => {
 						this.props.app.commands.execute(commandIDs.deleteNode)
diff --git a/src/context-menu/TrayItemPanel.tsx b/src/context-menu/TrayItemPanel.tsx
index 65b0dd7a..8085ce86 100644
--- a/src/context-menu/TrayItemPanel.tsx
+++ b/src/context-menu/TrayItemPanel.tsx
@@ -41,7 +41,7 @@ export class TrayItemPanel extends React.Component<TrayItemWidgetProps> {
 			if (current_node.header == "GENERAL") {
 				node = GeneralComponentLibrary({ name: current_node["task"], color: current_node["color"], type: current_node["type"] });
 			} else {
-				node = new CustomNodeModel({ name: current_node["task"], color: current_node["color"], extras: { "type": current_node["type"] } });
+				node = new CustomNodeModel({ name: current_node["task"], color: current_node["color"], extras: { "type": current_node["type"], "path": current_node["file_path"] } });
 				node.addInPortEnhance('▶', 'in-0');
 				node.addOutPortEnhance('▶', 'out-0');
 
diff --git a/src/tray_library/Sidebar.tsx b/src/tray_library/Sidebar.tsx
index 5a469ce4..65a6b1eb 100644
--- a/src/tray_library/Sidebar.tsx
+++ b/src/tray_library/Sidebar.tsx
@@ -218,7 +218,9 @@ export default function Sidebar(props: SidebarProps) {
                                                                     <TrayItemWidget
                                                                         model={{
                                                                             type: componentVal.type,
-                                                                            name: componentVal.task
+                                                                            name: componentVal.task,
+                                                                            color: componentVal.color,
+                                                                            path: componentVal.file_path
                                                                         }}
                                                                         name={componentVal.task}
                                                                         color={componentVal.color}
@@ -245,7 +247,12 @@ export default function Sidebar(props: SidebarProps) {
                                 return (
                                     <div key={`index-3-${i}`}>
                                         <TrayItemWidget
-                                            model={{ type: val.type, name: val.task }}
+                                            model={{ 
+                                                type: val.type, 
+                                                name: val.task,
+                                                color: val.color,
+                                                path: val.file_path
+                                            }}
                                             name={val.task}
                                             color={val.color}
                                             app={props.lab}
diff --git a/style/NodeActionPanel.css b/style/NodeActionPanel.css
index 43ddf8de..f3ca03c4 100644
--- a/style/NodeActionPanel.css
+++ b/style/NodeActionPanel.css
@@ -8,7 +8,7 @@
   
   .option {
     cursor: pointer;
-    width: 50px;
+    width: 70px;
     height: 13px;
     font-size:small;
     padding: 5px 7px;