setting menu on machines

msarilar · May 15, 2024 · 3d067c6 · 3d067c6
1 parent bdabd30
commit 3d067c6
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/src/layout/LayoutStyling.ts b/src/layout/LayoutStyling.ts
@@ -69,8 +69,9 @@ export namespace S {
         pointer-events: auto;
     `;
 
-    export const Node = styled.div<{ background: string; selected: boolean }>`
+    export const Node = styled.div<{ background: string; selected: boolean; enabled: boolean }>`
         background-color: ${(p) => p.background};
+        opacity: ${(p) => p.enabled ? "1" : "0.5"};
         border-radius: 5px;
         font-family: sans-serif;
         color: white;

diff --git a/src/layout/Node.tsx b/src/layout/Node.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
 
+import SettingsIcon from "@mui/icons-material/Settings";
 import { NodeModel, PortModelAlignment, NodeModelGenerics, DiagramEngine } from "@projectstorm/react-diagrams";
 import { BaseEvent, AbstractReactFactory, GenerateWidgetEvent, GenerateModelEvent, BasePositionModelOptions } from "@projectstorm/react-canvas-core";
 
 import { Machine, MachineFactory, machineTypeToColor } from "./../machines/Machines";
 import { MachinePortLabel, MachinePortModel } from "./Port";
 import { S } from "./LayoutStyling";
+import { IconButton, Menu, MenuItem } from "@mui/material";
 
 interface DefaultNodeModelOptions extends BasePositionModelOptions {
 
@@ -178,13 +180,70 @@ export const MachineNodeWidget: React.FunctionComponent<MachineNodeProps> = prop
         props.node.setLocked(!draggable);
     }
 
+    const [settingsAnchor, setSettingsAnchor] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(settingsAnchor);
+    const handleSettingsClose = () => {
+
+        setSettingsAnchor(null);
+    };
+
+    const handleSettingsClick = (event: React.MouseEvent<HTMLElement>) => {
+
+        setSettingsAnchor(event.currentTarget);
+    };
+
+    const handleDuplicate = () => {
+
+        console.log(props.node.machine.getFactory().getType());
+        const clone = new MachineNodeModel(props.node.machine.getFactory().createMachine(props.node.machine.getState()), props.node.machine.getFactory().getMachineCode());
+        props.engine.getModel().addNode(clone);
+        handleSettingsClose();
+        props.engine.repaintCanvas();
+    };
+
+    const toggleEnabled = () => {
+
+        props.node.machine.setEnabled(!props.node.machine.isEnabled());
+        handleSettingsClose();
+        props.engine.repaintCanvas();
+    };
+
+    const handleDelete = () => {
+
+        Object.keys(props.node.getMachinePorts()).forEach(key => {
+
+            const port = props.node.getMachinePorts()[key];
+
+            Object.keys(port.getLinks()).forEach(link => port.getLinks()[link].remove());
+        });
+
+        props.engine.getModel().removeNode(props.node);
+        handleSettingsClose();
+        props.engine.repaintCanvas();
+    };
+
     return (
         <S.Node
             data-default-node-name={props.node.getOptions().name}
             selected={props.node.isSelected()}
-            background={props.node.getOptions().color}>
+            background={props.node.getOptions().color}
+            enabled={props.node.machine.isEnabled()}>
             <S.Title>
-                <S.TitleName>{props.node.getOptions().name}</S.TitleName>
+                <S.TitleName>{props.node.getOptions().name + (props.node.machine.isEnabled() ? "" : " (disabled)")}</S.TitleName>
+
+                <IconButton aria-label="settings"
+                            size="small"
+                            style={{margin: 0}}
+                            onClick={handleSettingsClick}>
+                    <SettingsIcon fontSize="inherit" style={{margin: 0, color: "white"}}/>
+                </IconButton>
+                <Menu anchorEl={settingsAnchor}
+                      open={open}
+                      onClose={handleSettingsClose}>
+                    <MenuItem style={{margin: 0}} onClick={handleDuplicate}>Duplicate</MenuItem>
+                    <MenuItem style={{margin: 0}} onClick={toggleEnabled}>{props.node.machine.isEnabled() ? "Disable" : "Enable"}</MenuItem>
+                    <MenuItem style={{margin: 0}} onClick={handleDelete}>Delete</MenuItem>
+                </Menu>
             </S.Title>
             <S.Ports>
                 <S.PortsContainer>{Object.values(props.node.getInPorts()).map(generatePort)}</S.PortsContainer>

diff --git a/src/machines/MachineRoutings.tsx b/src/machines/MachineRoutings.tsx
@@ -43,6 +43,11 @@ export class MachineRoutings {
 
         const callback = (e: MachineMessage) => {
 
+            if (!target.isEnabled()) {
+
+                return;
+            }
+
             const port = link.getTargetPort() as MachinePortModel;
             port.setSending(true);
             try {

diff --git a/src/machines/Machines.tsx b/src/machines/Machines.tsx
@@ -25,6 +25,8 @@ export interface Machine {
     setNode(node: MachineNodeModel): void;
     getState(): any;
     getFactory(): MachineFactory;
+    isEnabled(): boolean;
+    setEnabled(enabled: boolean): void;
 }
 
 export interface CustomNodeWidgetProps<T extends Machine> {
@@ -39,6 +41,7 @@ export abstract class AbstractMachine extends EventTarget implements Machine {
     private static counters: { [machineName: string]: number } = {};
     abstract getState(): any;
     private readonly node: MachineNodeModel;
+    private enabled: boolean = true;
     getNode(): MachineNodeModel {
 
         return this.node;
@@ -65,6 +68,16 @@ export abstract class AbstractMachine extends EventTarget implements Machine {
         this.node = new MachineNodeModel(this, (factory ?? this.getFactory()).getMachineCode(), factory);
     }
 
+    isEnabled(): boolean {
+
+        return this.enabled;
+    }
+
+    setEnabled(enabled: boolean): void {
+
+        this.enabled = enabled;
+    }
+
     getId() {
 
         return this.id;
@@ -76,6 +89,11 @@ export abstract class AbstractMachine extends EventTarget implements Machine {
     setEmit(emit: (messageEvent: MachineMessage, channel: number) => void) { this.emitter = emit; }
     emit(messageEvent: MachineMessage, channel: number) {
 
+        if (!this.enabled) {
+
+            return;
+        }
+
         (this.machineNode ?? this.getNode()).getOutPorts()[channel]?.setSending(true);
         this.emitter?.(messageEvent, channel);
     };