73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2021-07-22 11:16:03
|
|
* @modify date 2021-07-22 11:16:03
|
|
* @desc [description]
|
|
*/
|
|
|
|
import * as go from "gojs";
|
|
import { ReactPalette } from "gojs-react";
|
|
import * as React from "react";
|
|
|
|
interface PaletteProps {
|
|
nodeTemplates: {
|
|
name: string;
|
|
template: go.Part;
|
|
sampleData: any;
|
|
}[];
|
|
}
|
|
|
|
/**
|
|
* Renders a Palette.
|
|
*/
|
|
export class PaletteWrapper extends React.Component<PaletteProps, never> {
|
|
/**
|
|
* Ref to keep a reference to the Diagram component, which provides access to the GoJS diagram via getDiagram().
|
|
*/
|
|
private paletteRef: React.RefObject<ReactPalette>;
|
|
|
|
/** @internal */
|
|
constructor(props: PaletteProps) {
|
|
super(props);
|
|
this.paletteRef = React.createRef();
|
|
}
|
|
|
|
public componentDidMount(): void {
|
|
if (!this.paletteRef.current) return;
|
|
const palette = this.paletteRef.current.getPalette();
|
|
|
|
// Adapt its size
|
|
palette.div.style.height = "100%";
|
|
palette.div.style.width = "100%";
|
|
}
|
|
|
|
public render(): JSX.Element {
|
|
// Firstly, we extract the Template
|
|
const _nodeTemplates = Array.isArray(this.props.nodeTemplates)
|
|
? this.props.nodeTemplates
|
|
: [];
|
|
// Inhere we store the Sample-Data of the Elements.
|
|
const _renderedTemplates = _nodeTemplates.map((item) => item.sampleData);
|
|
|
|
// Now we use the Go-JS Palette Element to render our Palette
|
|
return (
|
|
<ReactPalette
|
|
ref={this.paletteRef}
|
|
initPalette={(...args) => {
|
|
const paletteObject = new go.Palette();
|
|
// the list of data to show in the Palette
|
|
|
|
for (const item of _nodeTemplates) {
|
|
paletteObject.nodeTemplateMap.add(item.name, item.template);
|
|
}
|
|
|
|
return paletteObject;
|
|
}}
|
|
divClassName="none"
|
|
nodeDataArray={_renderedTemplates}
|
|
></ReactPalette>
|
|
);
|
|
}
|
|
}
|