feat: add demo diamod node model and factory

phodal · Jan 13, 2022 · e652bfc · e652bfc
1 parent 231e1d1
commit e652bfc
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 17 deletions.
diff --git a/examples/entries-define.yaml b/examples/entries-define.yaml
@@ -164,12 +164,11 @@ entries:
       - updated_date: Date
     actions: ~
   - type: graph
-    display: "Graph"
+    display: "Knowledge Graph"
     target: "quake-board"
     properties:
       - title: Title
       - file: File
       - content: String
       - created_date: Date
       - updated_date: Date
-    actions: ~
diff --git a/quake_webapp/quake-board/src/QuakeBoard.tsx b/quake_webapp/quake-board/src/QuakeBoard.tsx
@@ -4,6 +4,8 @@ import {Item, Menu, useContextMenu} from "react-contexify";
 import {CanvasWidget} from "@projectstorm/react-canvas-core";
 import styled from "styled-components";
 import 'react-contexify/dist/ReactContexify.css';
+import {DiamondNodeFactory} from "./components/base-model/DiamondNodeFactory";
+import {DiamondNodeModel} from "./components/base-model/DiamondNodeModel";
 
 export type Props = {
   model: any,
@@ -26,7 +28,13 @@ function QuakeBoard(props: Props) {
     includeLinks: false,
   }), []);
 
-  const engine = React.useMemo(() => createEngine(), []);
+  const engine = React.useMemo(() => {
+    let engine = createEngine();
+    engine.getNodeFactories().registerFactory(new DiamondNodeFactory() as any);
+
+    return engine
+  }, []);
+
   const model = React.useMemo(() => new DiagramModel(), []);
 
   const data = React.useMemo(() => {
@@ -58,8 +66,8 @@ function QuakeBoard(props: Props) {
     })
   }
 
-  function addNode(event: MouseEvent, engine: DiagramEngine, type: string) {
-    let node: DefaultNodeModel;
+  function createNode(event: MouseEvent, engine: DiagramEngine, type: string) {
+    let node: any;
     switch (type) {
       case 'out':
         node = new DefaultNodeModel('Source', 'rgb(0,192,255)');
@@ -71,6 +79,9 @@ function QuakeBoard(props: Props) {
         node.addInPort('In');
         node.getOptions().extras = {"type": "in"};
         break;
+      case 'filter':
+        node = new DiamondNodeModel();
+        break;
       default:
         node = new DefaultNodeModel('default', 'rgb(0,192,192)');
         node.addInPort('In');
@@ -87,41 +98,43 @@ function QuakeBoard(props: Props) {
 
   const addSource = React.useCallback(
     ({event}) => {
-      let node = addNode(event, engine, 'out');
+      let node = createNode(event, engine, 'out');
       model.addNode(node);
 
-      let serialize = model.serialize();
-      props.onChange(serialize);
+      props.onChange(model.serialize());
 
       engine.repaintCanvas();
     }, [engine, model, props]
   );
 
   const addFilter = React.useCallback(
-    (props: any) => {
-      console.log(props)
-    }, []
+    ({event}) => {
+      let node = createNode(event, engine, 'filter');
+      model.addNode(node);
+
+      props.onChange(model.serialize());
+
+      engine.repaintCanvas();
+    }, [engine, model, props]
   );
 
   const addLambda = React.useCallback(
     ({event}) => {
-      let node = addNode(event, engine, 'default');
+      let node = createNode(event, engine, 'default');
       model.addNode(node);
 
-      let serialize = model.serialize();
-      props.onChange(serialize);
+      props.onChange(model.serialize());
 
       engine.repaintCanvas();
     }, [engine, model, props]
   );
 
   const addTarget = React.useCallback(
     ({event}) => {
-      let node = addNode(event, engine, 'in');
+      let node = createNode(event, engine, 'in');
       model.addNode(node);
 
-      let serialize = model.serialize();
-      props.onChange(serialize);
+      props.onChange(model.serialize());
 
       engine.repaintCanvas();
     }, [engine, model, props]

diff --git a/quake_webapp/quake-board/src/components/SimplePortFactory.ts b/quake_webapp/quake-board/src/components/SimplePortFactory.ts
@@ -0,0 +1,15 @@
+import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+
+export class SimplePortFactory extends AbstractModelFactory<PortModel, DiagramEngine> {
+	cb: (initialConfig?: any) => PortModel;
+
+	constructor(type: string, cb: (initialConfig?: any) => PortModel) {
+		super(type);
+		this.cb = cb;
+	}
+
+	generateModel(event: any): PortModel {
+		return this.cb(event.initialConfig);
+	}
+}
diff --git a/quake_webapp/quake-board/src/components/base-model/DiamondNodeFactory.tsx b/quake_webapp/quake-board/src/components/base-model/DiamondNodeFactory.tsx
@@ -0,0 +1,19 @@
+import { DiamondNodeWidget } from './DiamondNodeWidget';
+import { DiamondNodeModel } from './DiamondNodeModel';
+import * as React from 'react';
+import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+
+export class DiamondNodeFactory extends AbstractReactFactory<DiamondNodeModel, DiagramEngine> {
+	constructor() {
+		super('diamond');
+	}
+
+	generateReactWidget(event: any): JSX.Element {
+		return <DiamondNodeWidget engine={this.engine} size={50} node={event.model} />;
+	}
+
+	generateModel(event: any) {
+		return new DiamondNodeModel();
+	}
+}
diff --git a/quake_webapp/quake-board/src/components/base-model/DiamondNodeModel.ts b/quake_webapp/quake-board/src/components/base-model/DiamondNodeModel.ts
@@ -0,0 +1,18 @@
+import {NodeModel, NodeModelGenerics, PortModelAlignment} from '@projectstorm/react-diagrams';
+import {DiamondPortModel} from './DiamondPortModel';
+
+export interface DiamondNodeModelGenerics extends NodeModelGenerics {
+  PORT: DiamondPortModel;
+}
+
+export class DiamondNodeModel extends NodeModel<DiamondNodeModelGenerics> {
+  constructor() {
+    super({
+      type: 'diamond'
+    });
+    this.addPort(new DiamondPortModel(PortModelAlignment.TOP));
+    this.addPort(new DiamondPortModel(PortModelAlignment.LEFT));
+    this.addPort(new DiamondPortModel(PortModelAlignment.BOTTOM));
+    this.addPort(new DiamondPortModel(PortModelAlignment.RIGHT));
+  }
+}
diff --git a/quake_webapp/quake-board/src/components/base-model/DiamondNodeWidget.tsx b/quake_webapp/quake-board/src/components/base-model/DiamondNodeWidget.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { DiamondNodeModel } from './DiamondNodeModel';
+import { DiagramEngine, PortModelAlignment, PortWidget } from '@projectstorm/react-diagrams';
+import styled from '@emotion/styled';
+
+export interface DiamondNodeWidgetProps {
+	node: DiamondNodeModel;
+	engine: DiagramEngine;
+	size: number;
+}
+
+namespace S {
+	export const Port = styled.div`
+		width: 16px;
+		height: 16px;
+		z-index: 10;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 8px;
+		cursor: pointer;
+
+		&:hover {
+			background: rgba(0, 0, 0, 1);
+		}
+	`;
+}
+
+/**
+ * @author Dylan Vorster
+ */
+export class DiamondNodeWidget extends React.Component<DiamondNodeWidgetProps> {
+	render() {
+		return (
+			<div
+				className={'diamond-node'}
+				style={{
+					position: 'relative',
+					width: this.props.size,
+					height: this.props.size
+				}}>
+				<svg
+					width={this.props.size}
+					height={this.props.size}
+					dangerouslySetInnerHTML={{
+						__html:
+							`
+          <g id="Layer_1">
+          </g>
+          <g id="Layer_2">
+            <polygon fill="mediumpurple" stroke="${
+                this.props.node.isSelected() ? 'white' : '#000000'
+              }" stroke-width="3" stroke-miterlimit="10" points="10,${this.props.size / 2} ${this.props.size / 2},10 ${this.props.size - 10},${this.props.size / 2} ${this.props.size / 2},${this.props.size - 10} "/>
+          </g>
+        `
+					}}
+				/>
+				<PortWidget
+					style={{
+						top: this.props.size / 2 - 8,
+						left: -8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.LEFT) as any}
+					engine={this.props.engine}>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size / 2 - 8,
+						top: -8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.TOP) as any}
+					engine={this.props.engine}>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size - 8,
+						top: this.props.size / 2 - 8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.RIGHT) as any}
+					engine={this.props.engine}>
+					<S.Port />
+				</PortWidget>
+				<PortWidget
+					style={{
+						left: this.props.size / 2 - 8,
+						top: this.props.size - 8,
+						position: 'absolute'
+					}}
+					port={this.props.node.getPort(PortModelAlignment.BOTTOM) as any}
+					engine={this.props.engine}>
+					<S.Port />
+				</PortWidget>
+			</div>
+		);
+	}
+}
diff --git a/quake_webapp/quake-board/src/components/base-model/DiamondPortModel.ts b/quake_webapp/quake-board/src/components/base-model/DiamondPortModel.ts
@@ -0,0 +1,15 @@
+import {DefaultLinkModel, LinkModel, PortModel, PortModelAlignment} from '@projectstorm/react-diagrams';
+
+export class DiamondPortModel extends PortModel {
+	constructor(alignment: PortModelAlignment) {
+		super({
+			type: 'diamond',
+			name: alignment,
+			alignment: alignment
+		});
+	}
+
+	createLinkModel(): LinkModel {
+		return new DefaultLinkModel();
+	}
+}