feat(board): init basic drag

phodal · Jan 12, 2022 · 84246ef · 84246ef
1 parent 7dcf488
commit 84246ef
Show file tree

Hide file tree

Showing 8 changed files with 7,077 additions and 10,032 deletions.
diff --git a/quake_webapp/quake-board/README.md b/quake_webapp/quake-board/README.md
@@ -1,4 +1,4 @@
-# Editor
+# Board 
 
-to webcomponents: https://levelup.gitconnected.com/convert-existing-react-components-intowebcomponents-2b33b842ff9a
+samples: http://tiddlymap.org/
 
diff --git a/quake_webapp/quake-board/config-overrides.js b/quake_webapp/quake-board/config-overrides.js
@@ -8,7 +8,7 @@ module.exports = {
 
     config.output = {
       ...config.output,
-      filename: `static/quake-editor.min.js`,
+      filename: `static/quake-board.min.js`,
     };
 
     config.optimization.runtimeChunk = false;

diff --git a/quake_webapp/quake-board/package.json b/quake_webapp/quake-board/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": false,
   "dependencies": {
+    "@projectstorm/react-canvas-core": "^6.6.1",
+    "@projectstorm/react-diagrams": "^6.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -20,7 +22,7 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "export PORT=4002 && react-app-rewired start",
+    "start": "export PORT=4005 && react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject"
@@ -44,7 +46,16 @@
     ]
   },
   "devDependencies": {
+    "@projectstorm/react-diagrams": "^6.6.1",
+    "@projectstorm/react-diagrams-core": "^6.6.1",
+    "@projectstorm/react-diagrams-defaults": "^6.6.1",
+    "@projectstorm/react-diagrams-routing": "^6.6.1",
     "@types/styled-components": "^5.1.15",
-    "react-app-rewired": "^2.1.8"
+    "react-app-rewired": "^2.1.8",
+    "pathfinding": "^0.4.18",
+    "paths-js": "^0.4.11",
+    "dagre": "^0.8.5",
+    "@emotion/react": "^11.*",
+    "@emotion/styled": "^11.*"
   }
 }
diff --git a/quake_webapp/quake-board/pnpm-lock.yaml b/quake_webapp/quake-board/pnpm-lock.yaml
diff --git a/quake_webapp/quake-board/public/index.html b/quake_webapp/quake-board/public/index.html
@@ -24,6 +24,58 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style>
+      *{
+        margin: 0;
+        padding: 0;
+      }
+
+      html, body, #application{
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .diagram-container{
+        background: #333333;
+        width: 100%;
+        height: 100%;
+      }
+
+      .custom-node{
+        border: solid 2px gray;
+        border-radius: 5px;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        position: relative;
+      }
+
+      .custom-node-color{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 20px;
+        height: 20px;
+        transform: translate(-50%, -50%);
+        border-radius: 10px;
+      }
+
+      .circle-port{
+        width: 12px;
+        height: 12px;
+        margin: 2px;
+        border-radius: 4px;
+        background: darkgray;
+        cursor: pointer;
+      }
+
+      .circle-port:hover{
+        background: mediumpurple;
+      }
+
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/quake_webapp/quake-board/src/BodyWidget.tsx b/quake_webapp/quake-board/src/BodyWidget.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DiagramEngine } from '@projectstorm/react-diagrams';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
+import styled from "styled-components";
+
+export interface BodyWidgetProps {
+  engine: DiagramEngine;
+}
+
+export class BodyWidget extends React.Component<BodyWidgetProps> {
+  render() {
+    return <StyledCanvasWidget engine={this.props.engine} />;
+  }
+}
+
+const StyledCanvasWidget = styled(CanvasWidget)`
+  background: #333333;
+  width: 100%;
+  height: 100%;
+`
diff --git a/quake_webapp/quake-board/src/QuakeBoard.tsx b/quake_webapp/quake-board/src/QuakeBoard.tsx
@@ -1,17 +1,55 @@
 import React from 'react';
+import createEngine, {DefaultNodeModel, DiagramModel} from '@projectstorm/react-diagrams';
+import {BodyWidget} from "./BodyWidget";
 
 export type Props = {
-  title: string,
-  onSave: (content: object) => any
 }
 
 function QuakeBoard(props: Props) {
-  const [title] = React.useState(props.title);
+  function getDefaultEngine() {
+    const engine = createEngine();
+    const model = new DiagramModel();
+    engine.setModel(model);
+    return engine;
+  }
+
+  const [engine, setEngine] = React.useState(getDefaultEngine());
+
+  const buildEngine = () => {
+    //1) setup the diagram engine
+    const engine = createEngine();
+
+    //2) setup the diagram model
+    const model = new DiagramModel();
+
+    //3-A) create a default node
+    const node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
+    const port1 = node1.addOutPort('Out');
+    node1.setPosition(100, 100);
+
+    //3-B) create another default node
+    const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+    const port2 = node2.addInPort('In');
+    node2.setPosition(400, 100);
+
+    //3-C) link the 2 nodes together
+    const link1 = port1.link(port2);
+
+    //4) add the models to the root graph
+    model.addAll(node1, node2, link1);
+
+    //5) load model into engine
+    engine.setModel(model);
+    setEngine(engine);
+
+  }
+
+  React.useEffect(() => {
+    buildEngine();
+  },[]);
 
   return (
-    <div>
-      {title}
-    </div>
+    <BodyWidget engine={engine}/>
   );
 }
 

diff --git a/quake_webapp/quake-board/src/index.tsx b/quake_webapp/quake-board/src/index.tsx
@@ -82,4 +82,4 @@ class ReactElement extends HTMLElement {
 
 }
 
-customElements.define('quake-editor', ReactElement);
+customElements.define('quake-board', ReactElement);