From e652bfcd1e5940a2824562525f7f66cb02f5bd0c Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Thu, 13 Jan 2022 13:44:44 +0800 Subject: [PATCH] feat: add demo diamod node model and factory --- examples/entries-define.yaml | 3 +- quake_webapp/quake-board/src/QuakeBoard.tsx | 43 +++++--- .../src/components/SimplePortFactory.ts | 15 +++ .../base-model/DiamondNodeFactory.tsx | 19 ++++ .../components/base-model/DiamondNodeModel.ts | 18 ++++ .../base-model/DiamondNodeWidget.tsx | 99 +++++++++++++++++++ .../components/base-model/DiamondPortModel.ts | 15 +++ 7 files changed, 195 insertions(+), 17 deletions(-) create mode 100644 quake_webapp/quake-board/src/components/SimplePortFactory.ts create mode 100644 quake_webapp/quake-board/src/components/base-model/DiamondNodeFactory.tsx create mode 100644 quake_webapp/quake-board/src/components/base-model/DiamondNodeModel.ts create mode 100644 quake_webapp/quake-board/src/components/base-model/DiamondNodeWidget.tsx create mode 100644 quake_webapp/quake-board/src/components/base-model/DiamondPortModel.ts diff --git a/examples/entries-define.yaml b/examples/entries-define.yaml index 001ccf2b..a2575da8 100644 --- a/examples/entries-define.yaml +++ b/examples/entries-define.yaml @@ -164,7 +164,7 @@ entries: - updated_date: Date actions: ~ - type: graph - display: "Graph" + display: "Knowledge Graph" target: "quake-board" properties: - title: Title @@ -172,4 +172,3 @@ entries: - 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 index 9920cb1c..d2891fb8 100644 --- 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,29 +98,32 @@ 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] @@ -117,11 +131,10 @@ function QuakeBoard(props: 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 new file mode 100644 index 00000000..bd94c0e9 --- /dev/null +++ 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 { + 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 new file mode 100644 index 00000000..f7b5742c --- /dev/null +++ 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 { + constructor() { + super('diamond'); + } + + generateReactWidget(event: any): JSX.Element { + return ; + } + + 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 new file mode 100644 index 00000000..ae865982 --- /dev/null +++ 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 { + 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 new file mode 100644 index 00000000..afe4be69 --- /dev/null +++ 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 { + render() { + return ( +
+ + + + + + ` + }} + /> + + + + + + + + + + + + +
+ ); + } +} diff --git a/quake_webapp/quake-board/src/components/base-model/DiamondPortModel.ts b/quake_webapp/quake-board/src/components/base-model/DiamondPortModel.ts new file mode 100644 index 00000000..d75f1f9c --- /dev/null +++ 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(); + } +}