diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..2f973a3 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,9 @@ +{ + "updateContentCommand": "yarn", + "postAttachCommand": "yarn start", + "customizations": { + "codespaces": { + "openFiles": ["src/App.vue"] + } + } +} diff --git a/.npmrc b/.npmrc index c6d3104..0e52e77 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -@dhx:registry=https://npm.dhtmlx.com/ \ No newline at end of file +@dhx:registry=https://npm.dhtmlx.com/ diff --git a/README.md b/README.md index 69d4ed8..991f979 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/) -![DHTMLX Diagram with Vue Demo](https://raw.githubusercontent.com/DHTMLX/vue-diagram-demo/master/diagram.png) +![DHTMLX Diagram with Vue Demo](diagram_editor.png) ## How to start diff --git a/diagram_editor.png b/diagram_editor.png new file mode 100644 index 0000000..ebe08b4 Binary files /dev/null and b/diagram_editor.png differ diff --git a/index.html b/index.html index 997feaf..8524ba3 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - DHX Diagram with Vue + DHX Diagram Vue
diff --git a/package.json b/package.json index 22e87dc..50362d2 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "deploy": "yarn build && gh-pages -d dist" }, "dependencies": { - "@dhx/trial-diagram": "^6.0.1", + "@dhx/trial-diagram": "^6.0.5", "vue": "^3.2.37" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index caf5d5b..00c6b69 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,17 +1,17 @@ diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue deleted file mode 100644 index 7bb22b7..0000000 --- a/src/components/Diagram.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/src/components/DiagramEditor.vue b/src/components/DiagramEditor.vue new file mode 100644 index 0000000..b3d7cc5 --- /dev/null +++ b/src/components/DiagramEditor.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/data.js b/src/data.js index 26817aa..7ca642e 100644 --- a/src/data.js +++ b/src/data.js @@ -1,91 +1,91 @@ export function getData() { return [ - { id: 1, x: 880, y: 105, text: "Does user remember his password?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 2, x: 1080, y: 125, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 3, x: 1160, y: 40, text: "User forgets his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 3.1, x: 1340, y: 40, text: "Send an E-mail with new password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 3.2, x: 1520, y: 40, text: "E-mail sent", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" }, - { id: 4, x: 1160, y: 180, text: "User remembers his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 5, x: 1340, y: 180, text: "User types in login and password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 6, x: 1520, y: 180, text: "Data typed in", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" }, - { id: 7, x: 1700, y: 180, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 7.1, x: 1745, y: 600, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 7.2, x: 1880, y: 320, text: "User logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 7.3, x: 1880, y: 450, text: "Complete logging in", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 7.4, x: 1880, y: 580, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 7.5, x: 1530, y: 580, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 8, x: 1700, y: 40, text: "System", type: "subroutine", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" }, - { id: 9, x: 1880, y: 180, text: "Database", type: "database", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" }, - { id: 10, x: 0, y: 220, text: "Visitor enters the website", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 11, x: 180, y: 220, text: "Logged in user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 12, x: 365, y: 240, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 13, x: 320, y: 120, text: "User is logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 14, x: 320, y: 320, text: "User is not logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 15, x: 490, y: 320, text: "Registered user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 16, x: 660, y: 340, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 17, x: 730, y: 240, text: "User is registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 18, x: 730, y: 400, text: "User is not registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 19, x: 905, y: 420, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 20, x: 860, y: 510, text: "User types in needed data", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 21, x: 860, y: 640, text: "Data typed in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 22, x: 860, y: 770, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 23, x: 700, y: 770, text: "System", type: "subroutine", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, - { id: 24, x: 860, y: 890, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, - { id: 25, x: 1065, y: 790, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 26, x: 1020, y: 640, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 27, x: 1020, y: 890, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 28, x: 1245, y: 910, width: 50, "height": 50, text: "AND", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, - { id: 29, x: 1200, y: 770, text: "Write account data into database", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 29.1, x: 1380, y: 770, text: "Data writing done", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 29.2, x: 1200, y: 640, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, - { id: 30, x: 1330, y: 890, text: "Send activation \n e-mail", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 31, x: 1510, y: 890, text: "Activation e-mail sent", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { id: 32, x: 1690, y: 890, text: "User activates his account", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, - { id: 33, x: 1870, y: 889, text: "Account activated", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 1, x: 880, y: 105, text: "Does user remember his password?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 2, x: 1080, y: 125, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 3, x: 1160, y: 40, text: "User forgets his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 3.1, x: 1340, y: 40, text: "Send an E-mail with new password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 3.2, x: 1520, y: 40, text: "E-mail sent", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" }, + { id: 4, x: 1160, y: 180, text: "User remembers his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 5, x: 1340, y: 180, text: "User types in login and password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 6, x: 1520, y: 180, text: "Data typed in", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" }, + { id: 7, x: 1700, y: 180, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 7.1, x: 1745, y: 600, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 7.2, x: 1880, y: 320, text: "User logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 7.3, x: 1880, y: 450, text: "Complete logging in", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 7.4, x: 1880, y: 580, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 7.5, x: 1530, y: 580, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 8, x: 1700, y: 40, text: "System", type: "subroutine", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" }, + { id: 9, x: 1880, y: 180, text: "Database", type: "database", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" }, + { id: 10, x: 0, y: 220, text: "Visitor enters the website", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 11, x: 180, y: 220, text: "Logged in user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 12, x: 365, y: 240, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 13, x: 320, y: 120, text: "User is logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 14, x: 320, y: 320, text: "User is not logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 15, x: 490, y: 320, text: "Registered user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 16, x: 660, y: 340, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 17, x: 730, y: 240, text: "User is registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 18, x: 730, y: 400, text: "User is not registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 19, x: 905, y: 420, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 20, x: 860, y: 510, text: "User types in needed data", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 21, x: 860, y: 640, text: "Data typed in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 22, x: 860, y: 770, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 23, x: 700, y: 770, text: "System", type: "subroutine", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, + { id: 24, x: 860, y: 890, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, + { id: 25, x: 1065, y: 790, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 26, x: 1020, y: 640, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 27, x: 1020, y: 890, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 28, x: 1245, y: 910, width: 50, "height": 50, text: "AND", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" }, + { id: 29, x: 1200, y: 770, text: "Write account data into database", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 29.1, x: 1380, y: 770, text: "Data writing done", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 29.2, x: 1200, y: 640, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" }, + { id: 30, x: 1330, y: 890, text: "Send activation \n e-mail", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 31, x: 1510, y: 890, text: "Activation e-mail sent", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, + { id: 32, x: 1690, y: 890, text: "User activates his account", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" }, + { id: 33, x: 1870, y: 889, text: "Account activated", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" }, - { from: 1, to: 2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 2, to: 3, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 2, to: 7.5, type: "dash", fromSide: "bottom", toSide: "top", backArrow: "filled", stroke: "#7D8495" }, - { from: 2, to: 3.2, type: "dash", fromSide: "top", toSide: "top", stroke: "#7D8495" }, - { from: 3, to: 3.1, type: "line", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 3.1, to: 3.2, type: "line", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 2, to: 4, type: "dash", toSide: "top", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 4, to: 5, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 5, to: 6, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 6, to: 7, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 7, to: 7.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 7.1, to: 7.4, type: "dash", toSide: "left", stroke: "#7D8495" }, - { from: 7.1, to: 7.5, type: "dash", toSide: "right", stroke: "#7D8495" }, - { from: 7.2, to: 7.3, type: "dash", backArrow: "filled", stroke: "#7D8495" }, - { from: 7.3, to: 7.4, type: "dash", backArrow: "filled", stroke: "#7D8495" }, - { from: 7, to: 8, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 7, to: 9, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 10, to: 11, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 11, to: 12, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 12, to: 13, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" }, - { from: 12, to: 14, type: "dash", forwardArrow: "filled", toSide: "top", stroke: "#7D8495" }, - { from: 14, to: 15, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 15, to: 16, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 16, to: 17, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" }, - { from: 16, to: 33, type: "dash", backArrow: "filled", fromSide: "bottom", toSide: "bottom", stroke: "#7D8495" }, - { from: 17, to: 1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 17, to: 18, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 18, to: 19, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 19, to: 20, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 19, to: 26, type: "dash", backArrow: "filled", fromSide: "right", stroke: "#7D8495" }, - { from: 20, to: 22, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 22, to: 23, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 22, to: 24, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 22, to: 25, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 25, to: 26, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 25, to: 27, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 27, to: 28, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 28, to: 29, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 29, to: 29.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 29, to: 29.2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 28, to: 30, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 30, to: 31, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 31, to: 32, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, - { from: 32, to: 33, type: "dash", forwardArrow: "filled", stroke: "#7D8495" } + { from: 1, to: 2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 2, to: 3, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 2, to: 7.5, type: "dash", fromSide: "bottom", toSide: "top", backArrow: "filled", stroke: "#7D8495" }, + { from: 2, to: 3.2, type: "dash", fromSide: "top", toSide: "top", stroke: "#7D8495" }, + { from: 3, to: 3.1, type: "line", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 3.1, to: 3.2, type: "line", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 2, to: 4, type: "dash", toSide: "top", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 4, to: 5, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 5, to: 6, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 6, to: 7, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 7, to: 7.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 7.1, to: 7.4, type: "dash", toSide: "left", stroke: "#7D8495" }, + { from: 7.1, to: 7.5, type: "dash", toSide: "right", stroke: "#7D8495" }, + { from: 7.2, to: 7.3, type: "dash", backArrow: "filled", stroke: "#7D8495" }, + { from: 7.3, to: 7.4, type: "dash", backArrow: "filled", stroke: "#7D8495" }, + { from: 7, to: 8, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 7, to: 9, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 10, to: 11, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 11, to: 12, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 12, to: 13, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" }, + { from: 12, to: 14, type: "dash", forwardArrow: "filled", toSide: "top", stroke: "#7D8495" }, + { from: 14, to: 15, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 15, to: 16, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 16, to: 17, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" }, + { from: 16, to: 33, type: "dash", backArrow: "filled", fromSide: "bottom", toSide: "bottom", stroke: "#7D8495" }, + { from: 17, to: 1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 17, to: 18, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 18, to: 19, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 19, to: 20, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 19, to: 26, type: "dash", backArrow: "filled", fromSide: "right", stroke: "#7D8495" }, + { from: 20, to: 22, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 22, to: 23, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 22, to: 24, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 22, to: 25, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 25, to: 26, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 25, to: 27, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 27, to: 28, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 28, to: 29, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 29, to: 29.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 29, to: 29.2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 28, to: 30, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 30, to: 31, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 31, to: 32, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }, + { from: 32, to: 33, type: "dash", forwardArrow: "filled", stroke: "#7D8495" } ] -} \ No newline at end of file +} diff --git a/src/style.css b/src/style.css index ef8ea91..315dfbc 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,4 @@ +/* specify styles for initial page */ html, body, #root { @@ -5,3 +6,9 @@ body, padding: 0; margin: 0; } + +/* specify styles for the Diagram Editor container */ +.widget { + height: 100%; + width: 100%; +} diff --git a/yarn.lock b/yarn.lock index a8a0a6d..059c9a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,10 +7,10 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85" integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw== -"@dhx/trial-diagram@^6.0.1": - version "6.0.1" - resolved "https://npm.dhtmlx.com/@dhx%2ftrial-diagram/-/trial-diagram-6.0.1.tgz#1edbd7cb59ed0a00a9eef31686174245b72d933c" - integrity sha512-Pq4Yt19e7tx+60nQtEMOdH0KeioJj3ZRpjK8yZs5bV6FvlTCCAtKXn9hcidhQXq+oDFgm32ArJAkofmac6QCRg== +"@dhx/trial-diagram@^6.0.5": + version "6.0.5" + resolved "https://npm.dhtmlx.com/@dhx%2ftrial-diagram/-/trial-diagram-6.0.5.tgz#ff10902a5e8b48fdb266f77e866be319b31d4ea9" + integrity sha512-m2q6lyUozbwlgMMuJchjXzJBrJCDkjeNR1jFyXXpDJfXb31+h6qYute/pxicOQhqAg6EEZdF+gFDq3kcwW8Y7g== "@esbuild/android-arm@0.15.18": version "0.15.18"