Fixing ui
This commit is contained in:
parent
efaa3f4d38
commit
eba29dc9f8
@ -1,7 +1,8 @@
|
||||
import "@fortawesome/fontawesome-svg-core/styles.css";
|
||||
// import "bootstrap/dist/css/bootstrap.min.css";
|
||||
// import "bootswatch/dist/materia/bootstrap.min.css";
|
||||
import "bootswatch/dist/darkly/bootstrap.min.css";
|
||||
import "bootswatch/dist/yeti/bootstrap.min.css";
|
||||
// import "bootswatch/dist/darkly/bootstrap.min.css";
|
||||
import { useEffect } from "react";
|
||||
import "react-grid-layout/css/styles.css";
|
||||
import "reflect-metadata";
|
||||
@ -12,14 +13,13 @@ import { getDispatcher } from "../lib/dispatcher/getDispatcher";
|
||||
import { nopeDispatcherManager } from "../lib/dispatcher/nopeDispatcherManager";
|
||||
import { getNopeLogger } from "../lib/logger/getLogger";
|
||||
import { ICommunicationBridge } from "../lib/types/nope/nopeCommunication.interface";
|
||||
import "./graph.css";
|
||||
|
||||
export default function App({ Component, pageProps, hostname }) {
|
||||
const bridge = (new Bridge(
|
||||
const bridge = new Bridge(
|
||||
"browser",
|
||||
"bridge",
|
||||
"info"
|
||||
) as any) as ICommunicationBridge;
|
||||
) as any as ICommunicationBridge;
|
||||
bridge.addMirror(
|
||||
new IoSocketMirrorClient(require("os").hostname() + ":7000", "info"),
|
||||
true
|
||||
@ -28,7 +28,7 @@ export default function App({ Component, pageProps, hostname }) {
|
||||
const dispatcher: any = getDispatcher(
|
||||
{
|
||||
communicator: bridge,
|
||||
logger: getNopeLogger("dispatcher", "info")
|
||||
logger: getNopeLogger("dispatcher", "info"),
|
||||
},
|
||||
nopeDispatcherManager
|
||||
);
|
||||
@ -37,7 +37,7 @@ export default function App({ Component, pageProps, hostname }) {
|
||||
const dispatcher: any = getDispatcher(
|
||||
{
|
||||
communicator: bridge,
|
||||
logger: getNopeLogger("dispatcher", "info")
|
||||
logger: getNopeLogger("dispatcher", "info"),
|
||||
},
|
||||
nopeDispatcherManager
|
||||
);
|
||||
@ -51,7 +51,7 @@ export default function App({ Component, pageProps, hostname }) {
|
||||
|
||||
const params = {
|
||||
dispatcher,
|
||||
...pageProps
|
||||
...pageProps,
|
||||
};
|
||||
|
||||
return <Component {...params} />;
|
||||
|
@ -1,6 +0,0 @@
|
||||
.diagram-component {
|
||||
width: 90%;
|
||||
height: 100px;
|
||||
border: solid 1px black;
|
||||
background-color: white;
|
||||
}
|
@ -56,11 +56,13 @@ export function PETRINET(myDiagram: go.Diagram = null): go.Diagram {
|
||||
addNodeNextTo(
|
||||
node,
|
||||
{ category: "place" },
|
||||
{ category: "logicFlow", toPort: "LogicFlowIn" },
|
||||
{ category: "logicFlow", toPortId: "LogicFlowIn" },
|
||||
"to",
|
||||
"n"
|
||||
);
|
||||
},
|
||||
toolTip: make("ToolTip", make(go.TextBlock, "Adds an input-place to this transition.", { margin: 5 })),
|
||||
|
||||
},
|
||||
make(go.Shape, "PlusLine", { width: 6, height: 6 })
|
||||
),
|
||||
@ -74,15 +76,31 @@ export function PETRINET(myDiagram: go.Diagram = null): go.Diagram {
|
||||
addNodeNextTo(
|
||||
node,
|
||||
{ category: "place" },
|
||||
{ category: "logicFlow", fromPort: "LogicFlowOut" },
|
||||
{ category: "logicFlow", fromPortId: "LogicFlowOut" },
|
||||
"from",
|
||||
"s"
|
||||
);
|
||||
},
|
||||
toolTip: make("ToolTip", ""),
|
||||
toolTip: make("ToolTip", make(go.TextBlock, "Adds an output-place to this transition.", { margin: 5 })),
|
||||
},
|
||||
make(go.Shape, "PlusLine", { width: 6, height: 6 })
|
||||
),
|
||||
make("Button",
|
||||
{
|
||||
alignment: go.Spot.TopRight,
|
||||
click: (e, obj) => {
|
||||
const node = obj.part;
|
||||
if (node) {
|
||||
const diagram = node.diagram;
|
||||
diagram.startTransaction("changeVisibility");
|
||||
diagram.model.setDataProperty(node.data, "showDetails", typeof node.data.showDetails === "boolean" ? !node.data.showDetails : false);
|
||||
diagram.commitTransaction("changeVisibility");
|
||||
}
|
||||
},
|
||||
toolTip: make("ToolTip", make(go.TextBlock, "Toogle details of the node.", { margin: 5 })),
|
||||
},
|
||||
make(go.Shape, "Diamond", { width: 6, height: 6 })
|
||||
)
|
||||
])
|
||||
);
|
||||
|
||||
@ -118,13 +136,15 @@ export function PETRINET(myDiagram: go.Diagram = null): go.Diagram {
|
||||
make(
|
||||
go.Link, // the whole link panel
|
||||
{
|
||||
routing: go.Link.Normal,
|
||||
corner: 15,
|
||||
curve: go.Link.Bezier,
|
||||
// adjusting: go.Link.Scale,
|
||||
routing: go.Link.Bezier,
|
||||
// geometryString: "M0 0 M3 0 L6 0",
|
||||
// corner: 15,
|
||||
// curve: go.Link.JumpGap,
|
||||
// // curve: go.Link.Bezier,
|
||||
// adjusting: go.Link.Bezier,
|
||||
reshapable: true,
|
||||
resegmentable: true,
|
||||
curviness: 20,
|
||||
// curviness: 20,
|
||||
// relinkableFrom: true,
|
||||
// relinkableTo: true,
|
||||
// toShortLength: 1,
|
||||
@ -133,21 +153,11 @@ export function PETRINET(myDiagram: go.Diagram = null): go.Diagram {
|
||||
// new go.Binding("points").makeTwoWay(),
|
||||
// new go.Binding("curviness"),
|
||||
make(
|
||||
go.Shape, // the link shape
|
||||
{ strokeWidth: 1.5 },
|
||||
new go.Binding("stroke", "progress", function (progress) {
|
||||
return progress ? "#52ce60" /* green */ : "black";
|
||||
}),
|
||||
new go.Binding("strokeWidth", "progress", function (progress) {
|
||||
return progress ? 2.5 : 1.5;
|
||||
})
|
||||
go.Shape
|
||||
),
|
||||
make(
|
||||
go.Shape, // the arrowhead
|
||||
{ toArrow: "standard", stroke: null },
|
||||
new go.Binding("fill", "progress", function (progress) {
|
||||
return progress ? "#52ce60" /* green */ : "black";
|
||||
})
|
||||
),
|
||||
make(
|
||||
go.Panel,
|
||||
@ -191,7 +201,8 @@ export function PETRINET(myDiagram: go.Diagram = null): go.Diagram {
|
||||
},
|
||||
make(go.Shape),
|
||||
make(go.Shape, { toArrow: "Standard" }),
|
||||
make(go.TextBlock, new go.Binding("text", "text"))
|
||||
make(go.TextBlock, new go.Binding("text", "text")),
|
||||
new go.Binding("visible")
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import go from "gojs";
|
||||
import { parse } from "mathjs";
|
||||
import { copy, SPLITCHAR } from "../../../../lib/helpers/objectMethods";
|
||||
import { SPLITCHAR } from "../../../../lib/helpers/objectMethods";
|
||||
import { replaceAll } from "../../../../lib/helpers/stringMethods";
|
||||
|
||||
|
||||
@ -206,11 +206,14 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
mouseLeave: function (e, port) {
|
||||
port.fill = "transparent";
|
||||
}
|
||||
}, output ? {
|
||||
fromSpot: spot, // declare where links may connect at this port
|
||||
} : {}, input ? {
|
||||
toSpot: spot, // declare where links may connect at this port
|
||||
} : {}));
|
||||
},
|
||||
// output ? {
|
||||
// fromSpot: spot, // declare where links may connect at this port
|
||||
// } : {}, input ? {
|
||||
// toSpot: spot, // declare where links may connect at this port
|
||||
// } : {}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return make(
|
||||
@ -292,19 +295,19 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
},
|
||||
new go.Binding("text", "description")
|
||||
),
|
||||
make("PanelExpanderButton", "GUARD", {
|
||||
row: 0,
|
||||
column: 1,
|
||||
rowSpan: 2,
|
||||
margin: ml8
|
||||
}),
|
||||
// Expander for the Service
|
||||
make("PanelExpanderButton", "SERVICE", {
|
||||
row: 1,
|
||||
column: 1,
|
||||
rowSpan: 2,
|
||||
margin: ml8
|
||||
})
|
||||
// make("PanelExpanderButton", "GUARD", {
|
||||
// row: 0,
|
||||
// column: 1,
|
||||
// rowSpan: 2,
|
||||
// margin: ml8
|
||||
// }),
|
||||
// // Expander for the Service
|
||||
// make("PanelExpanderButton", "SERVICE", {
|
||||
// row: 1,
|
||||
// column: 1,
|
||||
// rowSpan: 2,
|
||||
// margin: ml8
|
||||
// })
|
||||
)
|
||||
),
|
||||
// Horizontal Lane as devider:
|
||||
@ -317,7 +320,7 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
height: 1,
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding("visible", "guardVisible").ofObject("GUARD").makeTwoWay() // only visible when info is expanded
|
||||
new go.Binding("visible", "showDetails")
|
||||
),
|
||||
// Vertiacal Layout Holding the Guard
|
||||
make(
|
||||
@ -338,7 +341,8 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
stroke: "rgba(0, 0, 0, .87)",
|
||||
margin: mrl8,
|
||||
editable: true,
|
||||
textValidation: (textblock: go.TextBlock, oldText, newText) => {
|
||||
maxLines: 1,
|
||||
textEdited: (textblock: go.TextBlock, oldText, newText) => {
|
||||
const node = textblock.part;
|
||||
|
||||
// Perform a Test.
|
||||
@ -347,29 +351,26 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
|
||||
// Now that we know which variable is contained,
|
||||
// we try to creat them.
|
||||
node.diagram.startTransaction("add_ports");
|
||||
node.diagram.model.setDataProperty(node.data, "guardInputs", result.vars.map(label => {
|
||||
return {
|
||||
label,
|
||||
portId: "guard." + label
|
||||
};
|
||||
}));
|
||||
node.diagram.model.setDataProperty(node.data, "guard", newText);
|
||||
node.diagram.commitTransaction("add_ports");
|
||||
} catch (e) {
|
||||
// The Equation is wrong, give a hint
|
||||
return false;
|
||||
}
|
||||
},
|
||||
textValidation: (textblock: go.TextBlock, oldText, newText) => {
|
||||
const node = textblock.part;
|
||||
|
||||
setTimeout(() => {
|
||||
node.diagram.startTransaction("add_ports");
|
||||
node.data.guardInputs = result.vars.map(label => {
|
||||
return {
|
||||
label,
|
||||
partId: "guard." + label
|
||||
};
|
||||
});
|
||||
node.data.guardOutputs = [
|
||||
{
|
||||
portId: "guard.result",
|
||||
label: "result",
|
||||
},
|
||||
];
|
||||
// Assign the New Text
|
||||
node.data.guard = newText;
|
||||
// Assing a copy to use this element
|
||||
node.data = copy(node.data);
|
||||
node.diagram.commitTransaction("add_ports");
|
||||
|
||||
console.log("data", node.data);
|
||||
}, 10);
|
||||
// Perform a Test.
|
||||
try {
|
||||
const result = analyseEquation(newText);
|
||||
return true;
|
||||
} catch (e) {
|
||||
// The Equation is wrong, give a hint
|
||||
@ -379,7 +380,8 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
},
|
||||
new go.Binding("text", "guard")
|
||||
),
|
||||
makeVerticalPanel("guardOutputs", "right")
|
||||
makeVerticalPanel("guardOutputs", "right"),
|
||||
new go.Binding("visible", "showDetails")
|
||||
),
|
||||
make(
|
||||
go.Shape,
|
||||
@ -390,7 +392,7 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
height: 1,
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding("visible").ofObject("SERVICE") // only visible when info is expanded
|
||||
new go.Binding("visible", "showDetails")
|
||||
),
|
||||
|
||||
make(
|
||||
@ -409,10 +411,11 @@ export function transitionTemplate(selctionExtension = []): go.Node {
|
||||
},
|
||||
new go.Binding("text", "serviceName")
|
||||
),
|
||||
makeVerticalPanel("serviceOutputs", "right")
|
||||
makeVerticalPanel("serviceOutputs", "right"),
|
||||
new go.Binding("visible", "showDetails")
|
||||
)
|
||||
),
|
||||
makePort("LogicFlowIn", go.Spot.Top, go.Spot.Top, false, true),
|
||||
makePort("LogicFlowOut", go.Spot.Bottom, go.Spot.Bottom, true, false)
|
||||
makePort("LogicFlowOut", go.Spot.Bottom, go.Spot.Bottom, true, false),
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user