mkarkowski/nope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fixing ui

Browse Source
This commit is contained in:
Martin Karkowski 2021-07-30 07:50:02 +02:00
parent efaa3f4d38
commit eba29dc9f8
4 changed files with 88 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/_app.tsx
View File

@ -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} />;

6
pages/graph.css
View File

@ -1,6 +0,0 @@
.diagram-component {
width: 90%;
height: 100px;
border: solid 1px black;
background-color: white;
}

51
resources/ui/gojs/graph-types/petri-net.ts
View File

@ -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")
)
);

97
resources/ui/gojs/nodes/transition.ts
View File

@ -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),
);
}