1085 lines
33 KiB
TypeScript
1085 lines
33 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2020-11-25 08:19:39
|
|
* @modify date 2020-11-25 12:05:20
|
|
* @desc [description]
|
|
*/
|
|
|
|
import * as React from "react";
|
|
import { Button, ListGroup } from "react-bootstrap";
|
|
import { v4 as generateID } from "uuid";
|
|
import {
|
|
parseWithFunctions,
|
|
stringifyWithFunctions
|
|
} from "../../../lib/helpers/jsonMethods";
|
|
import {
|
|
deepClone,
|
|
rgetattr,
|
|
rsetattr
|
|
} from "../../../lib/helpers/objectMethods";
|
|
import { IJsonSchema } from "../../../lib/types/IJSONSchema";
|
|
import { generateDefaultSelection } from "../graph/defaults/default.elements";
|
|
import { generateGraphOptions } from "../graph/defaults/default.graph-options";
|
|
import { defaultHotkeys } from "../graph/defaults/default.hotkeys";
|
|
import { defaultToolbar } from "../graph/defaults/default.toolbar";
|
|
import { readDataFromClipboard, writeToClipboard } from "../helpers/clipboard";
|
|
import { getCurrentThemeColors } from "../helpers/colors";
|
|
import DynamicLayout, { IDynamicLayoutProps } from "../layout/dynamicLayout";
|
|
import { ILayout } from "../layout/interfaces/ILayout";
|
|
import { ISelection } from "../layout/interfaces/ISelection";
|
|
import { ITab } from "../layout/interfaces/ITab";
|
|
import { ITabEntry } from "../layout/interfaces/ITabEntry";
|
|
import Selection from "../layout/selection";
|
|
import TabEntry, { ITabProps } from "../layout/tabs";
|
|
// Graph related imports:
|
|
|
|
export interface GraphicalEditorComponentProps<N, E> {
|
|
graphOptions?: any;
|
|
network?: any;
|
|
addEdgeCallback?: (edgeData: E, callback: (edgeData: E) => void) => void;
|
|
editOnSelect?: boolean;
|
|
editOnChange?: boolean;
|
|
parseFunctions?: boolean;
|
|
enableContextMenu?: boolean;
|
|
enableEditing?: boolean;
|
|
hidePanelOnDeselect?: boolean;
|
|
hideToolbar?: boolean;
|
|
hideRightPanel?: boolean;
|
|
allowSelfConnection?: boolean;
|
|
allowDoubleConnections?: boolean;
|
|
edgeTypes?: any[];
|
|
showEdgeSelction?: boolean;
|
|
}
|
|
|
|
export interface GraphicalEditorComponentState {
|
|
update: null;
|
|
}
|
|
|
|
class GraphicalEditorComponent<N, E> extends React.Component<
|
|
GraphicalEditorComponentProps<N, E>,
|
|
GraphicalEditorComponentState
|
|
> {
|
|
/**
|
|
* The Element containing the Network.
|
|
*/
|
|
public LayoutHandler: ILayout;
|
|
public TabHandler: ITabEntry;
|
|
public theme: {
|
|
colors: {
|
|
primary: string;
|
|
secondary: string;
|
|
success: string;
|
|
info: string;
|
|
warning: string;
|
|
danger: string;
|
|
light: string;
|
|
dark: string;
|
|
};
|
|
font: {
|
|
size: number;
|
|
type: string;
|
|
};
|
|
};
|
|
constructor(props) {
|
|
super(props);
|
|
this.theme = getCurrentThemeColors();
|
|
}
|
|
|
|
public tabs: { [index: string]: go.GraphLinksModel } = {};
|
|
|
|
/**
|
|
* Function to add an Edge.
|
|
* @param edgeData
|
|
* @param callback
|
|
*/
|
|
protected async _addEdge(edgeData: any, callback: (edge: any) => void) {
|
|
// Defaulty prevent self connections.
|
|
if (this.props.allowSelfConnection || edgeData.from !== edgeData.to) {
|
|
let addEdge = true;
|
|
|
|
// If multiple Connections from one node to the same node are
|
|
// for bidden, test if there already exists such an edge.
|
|
if (!this.props.allowDoubleConnections) {
|
|
this.Network.edges.forEach((edge) => {
|
|
if (edge.from === edgeData.from && edge.to === edgeData.to) {
|
|
addEdge = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// If adding an Edge is allowed => Add the Edge.
|
|
if (addEdge) {
|
|
// Manually add an ID to the Edge
|
|
edgeData.id = generateID();
|
|
|
|
// Extract the From and To Node.
|
|
const from = this.Network.getNode(edgeData.from);
|
|
const to = this.Network.getNode(edgeData.to);
|
|
|
|
const _this = this;
|
|
const _addEdge = (type: IEdgeTypeDefinition<N, E>) => {
|
|
if (typeof type.customAddFunction == "function") {
|
|
type.customAddFunction(from, to, _this.Network);
|
|
} else {
|
|
// Define the Edge Object
|
|
const edge = Object.assign(deepClone(type.visual), {
|
|
from: edgeData.from,
|
|
to: edgeData.to
|
|
});
|
|
|
|
// Add the Edge.
|
|
callback(edge);
|
|
}
|
|
};
|
|
|
|
switch (edgeData.type) {
|
|
case "automatic":
|
|
// Search for Possible Connection Types.
|
|
const possibleEdges: IEdgeTypeDefinition<N, E>[] = [];
|
|
|
|
for (const edgeType of this.props.edgeTypes || []) {
|
|
if (
|
|
(edgeType.fromTypes.includes(from.type) ||
|
|
edgeType.fromTypes.length === 0) &&
|
|
(edgeType.toTypes.includes(to.type) ||
|
|
edgeType.toTypes.length === 0)
|
|
) {
|
|
possibleEdges.push(edgeType);
|
|
}
|
|
}
|
|
|
|
// Test if Edges has been found
|
|
switch (possibleEdges.length) {
|
|
case 0:
|
|
this.LayoutHandler.showToast(
|
|
"No Matching Edge Type has been found. Please select the corresponding Edge Type manually",
|
|
"info"
|
|
);
|
|
return;
|
|
case 1:
|
|
// Define the New Edge.
|
|
return _addEdge(possibleEdges[0]);
|
|
default:
|
|
if (this.props.showEdgeSelction) {
|
|
// Create a Popup, on which the corresponding edge can be selected:
|
|
try {
|
|
const type: IEdgeTypeDefinition<
|
|
N,
|
|
E
|
|
> = await this.LayoutHandler.getDialogData({
|
|
content: {
|
|
props: {
|
|
possibleEdges
|
|
},
|
|
component(props: {
|
|
possibleEdges: IEdgeTypeDefinition<N, E>[];
|
|
onSubmit: (data: IEdgeTypeDefinition<N, E>) => void;
|
|
onCancel: (error: any) => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
Select a possible edge by clicking on the item
|
|
<ListGroup>
|
|
{props.possibleEdges.map((item, idx) => {
|
|
<ListGroup.Item
|
|
key={idx}
|
|
onClick={(_) => props.onSubmit(item)}
|
|
>
|
|
{item.type}
|
|
</ListGroup.Item>;
|
|
})}
|
|
</ListGroup>
|
|
<Button
|
|
variant="danger"
|
|
onClick={(e) => props.onCancel(e)}
|
|
>
|
|
Cancel{" "}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
},
|
|
header: "Please select an edge-type!",
|
|
closeButton: true
|
|
});
|
|
|
|
// Add the Edge itself.
|
|
return _addEdge(type);
|
|
} catch (e) {
|
|
// The User has aborted the selection.
|
|
return;
|
|
}
|
|
}
|
|
this.LayoutHandler.showToast(
|
|
"Mulitple Valid Edge Type has been found. Please select the corresponding Edge Type manually",
|
|
"info"
|
|
);
|
|
}
|
|
return;
|
|
default:
|
|
for (const type of this.props.edgeTypes || []) {
|
|
if (
|
|
edgeData.type === type.type &&
|
|
(type.fromTypes.includes(from.type) ||
|
|
type.fromTypes.length === 0) &&
|
|
(type.toTypes.includes(to.type) || type.toTypes.length === 0)
|
|
) {
|
|
// Quit the Method
|
|
return _addEdge(type);
|
|
}
|
|
}
|
|
this.LayoutHandler.showToast(
|
|
"You are not allowed to connect the desired Nodes with this edges",
|
|
"error"
|
|
);
|
|
break;
|
|
}
|
|
} else {
|
|
this.LayoutHandler.showToast(
|
|
"Double Connections not allowed! You can not connect these elements again",
|
|
"error"
|
|
);
|
|
}
|
|
} else {
|
|
this.LayoutHandler.showToast(
|
|
"Self-Connections forbidden! You can not connect elements to itself",
|
|
"error"
|
|
);
|
|
}
|
|
}
|
|
|
|
protected async _editNodes(
|
|
_template: IBasicTemplate<N, E>,
|
|
mode: "add" | "update" = "update"
|
|
) {
|
|
// Defaulty prevent self connections.
|
|
if (_template?.nodes.length > 0) {
|
|
try {
|
|
if (_template.nodes[0].editorComponentSelector && false) {
|
|
} else {
|
|
// Open up the corresponding Node Panel:
|
|
_template.nodes[0] = await this.LayoutHandler.getDialogData({
|
|
content: {
|
|
component: "DynamicForm",
|
|
props: {
|
|
schema: {
|
|
type: "object",
|
|
properties: {
|
|
label: {
|
|
description: "Label of the Node",
|
|
type: "string"
|
|
},
|
|
title: {
|
|
description: "Tooltip, presented on Hovering",
|
|
type: "string"
|
|
}
|
|
// color: {
|
|
// description: 'Color of the Node.',
|
|
// type: 'string'
|
|
// }
|
|
},
|
|
required: ["label"]
|
|
} as IJsonSchema,
|
|
uiSchema: {
|
|
// color: {
|
|
// "ui:widget": "color"
|
|
// }
|
|
},
|
|
data: Object.assign(
|
|
generateColors(_template.nodes[0].shape, this.theme),
|
|
_template.nodes[0]
|
|
)
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
switch (mode) {
|
|
case "add":
|
|
this.Network.addNode(_template.nodes);
|
|
this.Network.addEdge(_template.edges);
|
|
break;
|
|
case "update":
|
|
this.Network.updateNode(_template.nodes);
|
|
this.Network.updateEdge(_template.edges);
|
|
break;
|
|
}
|
|
|
|
// Tabs
|
|
this.tabs[this.TabSettings.tabs.active] = this.Network.getData();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
} else {
|
|
this.LayoutHandler.showToast("Please Select a Node Before.", "error");
|
|
}
|
|
}
|
|
|
|
public initEditor(ref: React.RefObject<any>) {
|
|
if (process.browser) {
|
|
const _this = this;
|
|
|
|
// Based on the Provided Options =>
|
|
// select the corresponding graph options,
|
|
// either use th provided one or use the
|
|
// default options.
|
|
if (this.props.graphOptions) {
|
|
this.graphOptions = this.props.graphOptions;
|
|
} else {
|
|
this.graphOptions = generateGraphOptions();
|
|
}
|
|
|
|
if (!rgetattr(this.graphOptions, "manipulation.enabled", false)) {
|
|
rsetattr(this.graphOptions, "manipulation.enabled", false);
|
|
}
|
|
|
|
// Generate the Default Callback for adding an Edge
|
|
rsetattr(this.graphOptions, "manipulation.addEdge", (data, callback) => {
|
|
_this._addEdge(data, callback).catch(console.error);
|
|
});
|
|
|
|
// Generate the Default Callback for adding a Node
|
|
rsetattr(this.graphOptions, "manipulation.addNode", (data, callback) => {
|
|
_this._addNode(data).catch(console.error);
|
|
});
|
|
|
|
// Create the Network
|
|
this.Network = new UndoRedoGraph(ref, this.graphOptions);
|
|
|
|
// Add a new item if possible.
|
|
const editItemIfPossible = (params) => {
|
|
if (params.nodes.length === 1) {
|
|
// A Node was Selected. Figure out, whether it is a cluster or not.
|
|
const nodeID = params.nodes[0];
|
|
|
|
if (_this.Network.network.isCluster(nodeID)) {
|
|
// Uncluster the Nodes
|
|
_this.Network.network.openCluster(nodeID);
|
|
} else {
|
|
// Open up the Settings Tab
|
|
const nodes = getSelectedElements(_this.Network, false);
|
|
_this._editNodes({
|
|
edges: [],
|
|
nodes,
|
|
type: "element"
|
|
});
|
|
}
|
|
} else if (params.edges.length === 1) {
|
|
// A Node was Selected. Figure out, whether it is a cluster or not.
|
|
const edges = _this.Network.data.edges.get(params.edges[0]);
|
|
_this.updateEdges(edges);
|
|
}
|
|
};
|
|
|
|
if (!this.Network) {
|
|
throw Error("Something went wrong");
|
|
}
|
|
|
|
// Make the Default behaviour adding new Nodes
|
|
this.Network.on("doubleClick", (params) => {
|
|
if (_this.props.enableEditing || true) {
|
|
// Test if no Element was Selected
|
|
if (params.nodes.length === 0 && params.edges.length === 0) {
|
|
// If so, just add the new Element
|
|
_this._addNode(params.pointer.canvas);
|
|
} else {
|
|
editItemIfPossible(params);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.Network.on("oncopy", (event) => {
|
|
try {
|
|
_this.LayoutHandler.showToast("Copied");
|
|
writeToClipboard(
|
|
stringifyWithFunctions(_this.createTemplateOfSelectedElements())
|
|
);
|
|
} catch (e) {}
|
|
});
|
|
|
|
this.Network.on("onpaste", async (event) => {
|
|
try {
|
|
const data = await readDataFromClipboard();
|
|
const mousePosition = _this.Network.network.DOMtoCanvas({
|
|
x: _this.LayoutHandler.currentMousePosition.offsetX,
|
|
y: _this.LayoutHandler.currentMousePosition.offsetY
|
|
});
|
|
_this.paste(parseWithFunctions(data), mousePosition, false);
|
|
_this.LayoutHandler.showToast("Pasted");
|
|
} catch (e) {
|
|
_this.LayoutHandler.showToast("Failed Pasting", "error");
|
|
console.error(e);
|
|
}
|
|
});
|
|
|
|
// // Make shure the Sidepanel is working correctly
|
|
this.Network.on("select", (params) => {
|
|
// if (_this.graphOptions.enableEditing){
|
|
// if (_this.graphOptions.editOnSelect && _this.graphOptions.hidePanelOnDeselect && params.nodes.length === 0 && params.edges.length === 0){
|
|
// _this.layout.panels.right.hide();
|
|
// } else if (_this.graphOptions.editOnSelect){
|
|
// editItemIfPossible(params);
|
|
// }
|
|
// }
|
|
});
|
|
|
|
// enableClusterPreview(this);
|
|
|
|
// this.network.addNode(this._nodes);
|
|
// this.network.addEdge(this._edges);
|
|
|
|
// editor.resize();
|
|
console.log("TABS", this.tabs);
|
|
this.Network.loadData(
|
|
this.tabs[this.TabSettings?.tabs?.active] || DEFAULT_NETWORK()
|
|
);
|
|
|
|
// Add all Addons as required.
|
|
this.addGraphAddons(this.Network);
|
|
}
|
|
|
|
return this.Network;
|
|
}
|
|
/**
|
|
* Function, which is used to provide a
|
|
*/
|
|
public createTemplateOfSelectedElements() {
|
|
const selected: IBasicTemplate<N, E> = {
|
|
nodes: [],
|
|
edges: [],
|
|
type: "element"
|
|
};
|
|
|
|
const selection = this.Network.network.getSelection(true);
|
|
|
|
selected.nodes = deepClone(
|
|
this.Network.nodes.filter(
|
|
(item) => selection.nodes.indexOf(item.id) !== -1
|
|
)
|
|
);
|
|
selected.edges = deepClone(
|
|
this.Network.edges.filter(
|
|
(item) => selection.edges.indexOf(item.id) !== -1
|
|
)
|
|
);
|
|
|
|
return selected;
|
|
}
|
|
|
|
public paste(
|
|
template: IBasicTemplate<N, E>,
|
|
position: {
|
|
x: number;
|
|
y: number;
|
|
},
|
|
useExistingNodesForEdges: boolean
|
|
) {
|
|
const data = adaptPositions(
|
|
adaptIDS(template, useExistingNodesForEdges),
|
|
position
|
|
);
|
|
|
|
this.Network.addNode(data.nodes);
|
|
this.Network.addEdge(data.edges);
|
|
}
|
|
|
|
/**
|
|
* Function to Update the Data of a Node.
|
|
* @param selection The Selected Node.
|
|
*/
|
|
public async updateNode(selection: Array<IBaseNodeOptions<N>>) {
|
|
const _self = this;
|
|
|
|
/** Extract the Component, which should be used in the Prompt */
|
|
let componentSelector = "default";
|
|
if (selection.length > 0 && selection[0].editorComponentSelector) {
|
|
componentSelector = selection[0].editorComponentSelector;
|
|
}
|
|
|
|
// const comp = this.editPanelDict.nodes[componentSelector];
|
|
|
|
// if (comp) {
|
|
// /** Open the Window, with the Edit-Prompt */
|
|
// this.openEditInterface(this.editPanelDict.nodes[componentSelector], {
|
|
// inputTemplate: {
|
|
// nodes: selection,
|
|
// edges: [],
|
|
// type: 'elements'
|
|
// },
|
|
// },
|
|
// 'Edit Node',
|
|
// (data) => {
|
|
// _self.network.updateNode(data.template.nodes);
|
|
// });
|
|
// } else {
|
|
// this.layout.showToast('Editor is Trying to open an Unkown Edit-Component', 'error');
|
|
// }
|
|
}
|
|
|
|
protected async _addNode(pos: { x: number; y: number }) {
|
|
// Defaulty prevent self connections.
|
|
if (this._template?.nodes.length > 0) {
|
|
try {
|
|
// Adapt its IDs. (Creates a Copy)
|
|
let _template = adaptIDS(this._template);
|
|
// Adapt its Position
|
|
_template = adaptPositions(_template, pos);
|
|
|
|
// Remove the Initial Label:
|
|
delete _template.nodes[0].label;
|
|
|
|
await this._editNodes(_template, "add");
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
} else {
|
|
this.LayoutHandler.showToast("Please Select a Node Before.", "error");
|
|
}
|
|
}
|
|
|
|
public EditorSettings: GraphicalEditorComponentProps<N, E>;
|
|
public LayoutSettings: IDynamicLayoutProps<IGraphCallbackData<N, E>>;
|
|
public TabSettings: ITabProps;
|
|
|
|
protected _template: IBasicTemplate<N, E>;
|
|
public selectTemplate(template: IBasicTemplate<N, E>) {
|
|
this._template = template;
|
|
}
|
|
|
|
public initializeGraph() {
|
|
const _this = this;
|
|
|
|
// Assign a default Network:
|
|
const networkToRender: INetwork<N, E> =
|
|
this.props.network ||
|
|
this.tabs[this.TabSettings?.tabs?.active] ||
|
|
DEFAULT_NETWORK();
|
|
|
|
// Initally store the Network to Render
|
|
this.tabs[networkToRender.id] = networkToRender;
|
|
|
|
this.TabSettings = {
|
|
onMount(item) {
|
|
_this.TabHandler = item;
|
|
},
|
|
|
|
async onNewTab() {
|
|
// Function to create a new tab.
|
|
try {
|
|
if (_this.TabHandler.tabs.length == 0) {
|
|
const tab = {
|
|
delteable: true,
|
|
id: generateID(),
|
|
label: "Unsaved Content"
|
|
};
|
|
|
|
await _this.TabHandler.createTab(tab);
|
|
|
|
// Store the Content of the tab:
|
|
_this.tabs[tab.id] = _this.Network.getData();
|
|
}
|
|
|
|
const label = await _this.LayoutHandler.getDialogData({
|
|
header: "Enter Network-Name",
|
|
content: {
|
|
component: "DynamicForm",
|
|
props: {
|
|
schema: {
|
|
type: "string",
|
|
description: "Name of the Element"
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
const id = Date.now().toString();
|
|
// const label = id;
|
|
|
|
_this.tabs[id] = DEFAULT_NETWORK();
|
|
|
|
return {
|
|
id,
|
|
label,
|
|
delteable: true
|
|
};
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
async onTabSelect(oldTab: ITab, newTab: ITab) {
|
|
if (_this.Network) {
|
|
// Contains the Main Logic for selecting another tab
|
|
// Therefore
|
|
if (oldTab) {
|
|
_this.tabs[oldTab.id] = _this.Network.getData();
|
|
}
|
|
// Use the content of the new Tab as rendering:
|
|
_this.Network.loadData(_this.tabs[newTab.id]);
|
|
}
|
|
return true;
|
|
},
|
|
|
|
async onTabDelete(tab: ITab, force: boolean) {
|
|
// A Tab should be deleted
|
|
|
|
if (force) {
|
|
return true;
|
|
}
|
|
|
|
try {
|
|
const saveData = await _this.LayoutHandler.getDialogData<boolean>({
|
|
header: "Close Tab",
|
|
content: {
|
|
component: (props) => {
|
|
return (
|
|
<>
|
|
<p>
|
|
You are about to close the tab "{tab.label}". Do you want
|
|
to save changes?
|
|
</p>
|
|
<Button
|
|
variant="success"
|
|
onClick={(_) => props.onSubmit(true)}
|
|
>
|
|
Yes
|
|
</Button>{" "}
|
|
<Button
|
|
variant="danger"
|
|
onClick={(_) => props.onSubmit(false)}
|
|
>
|
|
No
|
|
</Button>{" "}
|
|
<Button
|
|
variant="secondary"
|
|
onClick={(_) => props.onCancel(new Error("Canceled"))}
|
|
>
|
|
Cancel
|
|
</Button>{" "}
|
|
</>
|
|
);
|
|
},
|
|
props: {}
|
|
}
|
|
});
|
|
|
|
// The variable save Data contains the info, whether the user wants to save or discard the changes
|
|
return true;
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
async onNoTabSelected() {
|
|
// Nothing to Display!
|
|
|
|
if (_this.Network) {
|
|
console.log("No Tab");
|
|
// Use the content of the new Tab as rendering:
|
|
_this.Network.loadData(DEFAULT_NETWORK());
|
|
}
|
|
},
|
|
|
|
async onTabEdit(tab) {
|
|
const label = await _this.LayoutHandler.getDialogData<string>({
|
|
header: "Enter Network-Name",
|
|
content: {
|
|
component: "DynamicForm",
|
|
props: {
|
|
schema: {
|
|
type: "string",
|
|
description: "Name of the Element"
|
|
},
|
|
data: tab.label
|
|
}
|
|
}
|
|
});
|
|
|
|
tab.label = label;
|
|
|
|
return tab;
|
|
},
|
|
|
|
tabs: {
|
|
active: "-1",
|
|
allowNewTabs: true,
|
|
items: []
|
|
}
|
|
};
|
|
|
|
this.LayoutSettings = {
|
|
components: [
|
|
{
|
|
component() {
|
|
const graph = React.useRef(null);
|
|
// Similar to componentDidMount and componentDidUpdate:
|
|
// Createa a Function, that if mounted defines the Network.
|
|
React.useEffect(() => {
|
|
// Define the Network.
|
|
_this.initEditor(graph);
|
|
|
|
// Return a Function, that will destroy the network.
|
|
return () => {
|
|
_this.tabs[
|
|
_this.TabSettings.tabs.active
|
|
] = _this.Network.getData();
|
|
// Destroy the Network.
|
|
_this.Network.destroy();
|
|
_this.Network = null;
|
|
};
|
|
});
|
|
|
|
return (
|
|
<>
|
|
{React.createElement(TabEntry, { ..._this.TabSettings })}
|
|
<div
|
|
ref={graph}
|
|
style={{ height: "100%" }}
|
|
onMouseEnter={(e) => {
|
|
// Enable Hotkeys
|
|
_this.LayoutHandler.hotkeysEnabled = true;
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
// Disable Hotkeys
|
|
_this.LayoutHandler.hotkeysEnabled = false;
|
|
}}
|
|
></div>
|
|
</>
|
|
);
|
|
},
|
|
gridSettings: {
|
|
h: 6,
|
|
w: 11,
|
|
x: 5,
|
|
y: 0,
|
|
minW: 3,
|
|
minH: 3
|
|
},
|
|
id: "main",
|
|
label: "Editor",
|
|
props: {},
|
|
visible: true,
|
|
bg: "light",
|
|
text: "dark"
|
|
},
|
|
{
|
|
component(props: { selection: ISelection<IBasicTemplate<N, E>> }) {
|
|
return (
|
|
<Selection<IBasicTemplate<N, E>>
|
|
selection={props.selection}
|
|
allowUserSelect={true}
|
|
onItemSelected={(template) => _this.selectTemplate(template)}
|
|
></Selection>
|
|
);
|
|
},
|
|
gridSettings: {
|
|
h: 3,
|
|
w: 4,
|
|
x: 0,
|
|
y: 0,
|
|
maxW: 5
|
|
},
|
|
id: "selection",
|
|
label: "Selection",
|
|
props: {
|
|
selection: generateDefaultSelection()
|
|
},
|
|
hideable: true,
|
|
bg: "light",
|
|
visible: true,
|
|
text: "dark",
|
|
showLabel: true
|
|
},
|
|
{
|
|
component() {
|
|
const [img, setImg] = React.useState();
|
|
const [pos, setPos] = React.useState<{
|
|
left: number;
|
|
top: number;
|
|
height: number;
|
|
width: number;
|
|
}>({
|
|
left: 0,
|
|
top: 0,
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
const [style, setStyle] = React.useState<any>();
|
|
const radar = React.useRef(null);
|
|
const image = React.useRef(null);
|
|
|
|
// Similar to componentDidMount and componentDidUpdate:
|
|
// Createa a Function, that if mounted subscribe to changes
|
|
// of the Nework.
|
|
React.useEffect(() => {
|
|
const wait = () => {
|
|
return new Promise((resolve, reject) => {
|
|
_this.Network.once("afterDrawing", resolve);
|
|
});
|
|
};
|
|
|
|
const updateImage = async () => {
|
|
// Store the current View Settings
|
|
const scale = _this.Network.network.getScale();
|
|
const translate = _this.Network.network.getViewPosition();
|
|
|
|
// Zoom out for the Image.
|
|
_this.Network.fit({ animation: false });
|
|
|
|
// Wait for the Network to Redraw
|
|
await wait();
|
|
|
|
const canvas = _this.Network.network.body.container.getElementsByTagName(
|
|
"canvas"
|
|
)[0];
|
|
const imgData = canvas.toDataURL("image/png");
|
|
setImg(imgData);
|
|
|
|
/**
|
|
* Extract the Widht and Height
|
|
*/
|
|
const {
|
|
clientWidth,
|
|
clientHeight
|
|
} = _this.Network.network.body.container;
|
|
|
|
// Store the Position.
|
|
setPos({
|
|
left: translate.x - clientWidth / scale / 2,
|
|
top: translate.y - clientHeight / scale / 2,
|
|
width: clientWidth / scale,
|
|
height: clientHeight / scale
|
|
});
|
|
|
|
// Use inital View
|
|
_this.Network.network.moveTo({
|
|
position: translate,
|
|
scale: scale,
|
|
animation: false
|
|
});
|
|
};
|
|
|
|
const getScaling = (start, size, current, scale = true) => {
|
|
if (scale) {
|
|
return Math.min(1, Math.max(0, (current - start) / size));
|
|
}
|
|
return (current - start) / size;
|
|
};
|
|
|
|
/**
|
|
* Function to draw the current Positon of the View.
|
|
*/
|
|
const drawRadar = () => {
|
|
if (radar?.current && image?.current) {
|
|
const displayedWidth = image.current.clientWidth;
|
|
const displayedHeight = image.current.clientHeight;
|
|
|
|
/**
|
|
* Extract the Widht and Height
|
|
*/
|
|
const {
|
|
clientWidth,
|
|
clientHeight
|
|
} = _this.Network.network.body.container;
|
|
|
|
// Determine visible Nodes:
|
|
const scale = _this.Network.network.getScale();
|
|
const translate = _this.Network.network.getViewPosition();
|
|
|
|
// Contains the Left Position of the View.
|
|
// The following Transformation is used:
|
|
// _____
|
|
// |(top,left)-Original = 0,0
|
|
// | ___
|
|
// | |(top, left of the View)
|
|
//
|
|
|
|
const current = {
|
|
left: translate.x - clientWidth / scale / 2,
|
|
top: translate.y - clientHeight / scale / 2,
|
|
width: clientWidth / scale,
|
|
height: clientHeight / scale
|
|
};
|
|
|
|
const top = getScaling(pos.top, pos.height, current.top);
|
|
const bottom = getScaling(
|
|
pos.top,
|
|
pos.height,
|
|
current.top + current.height
|
|
);
|
|
const height = bottom - top;
|
|
const left = getScaling(pos.left, pos.width, current.left);
|
|
const right = getScaling(
|
|
pos.left,
|
|
pos.width,
|
|
current.left + current.width
|
|
);
|
|
const width = right - left;
|
|
|
|
setStyle({
|
|
position: "absolute",
|
|
backgroundColor: "rgba(16, 84, 154, 0.26)",
|
|
top:
|
|
(
|
|
image.current.offsetTop +
|
|
top * displayedHeight
|
|
).toString() + "px",
|
|
left:
|
|
(
|
|
image.current.offsetLeft +
|
|
left * displayedWidth
|
|
).toString() + "px",
|
|
height: (height * displayedHeight).toString() + "px",
|
|
width:
|
|
Math.max(
|
|
0,
|
|
width * displayedWidth - image.current.offsetLeft
|
|
).toString() + "px"
|
|
});
|
|
}
|
|
};
|
|
|
|
const listeners: Partial<{ [K in IEvent]: any }> = {
|
|
dataUpdate: updateImage,
|
|
afterDrawing: drawRadar
|
|
};
|
|
|
|
const subscriptions: Array<() => void> = [];
|
|
|
|
if (_this.Network) {
|
|
for (const key in listeners) {
|
|
subscriptions.push(
|
|
_this.Network.on(key as IEvent, listeners[key])
|
|
);
|
|
}
|
|
}
|
|
// Return a Function, that will destroy the network.
|
|
return () => {
|
|
for (const unsubscribe of subscriptions) {
|
|
unsubscribe();
|
|
}
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div style={{ overflow: "hidden" }}>
|
|
<img
|
|
ref={image}
|
|
src={img}
|
|
style={{
|
|
position: "absolute",
|
|
maxHeight: "100%",
|
|
maxWidth: "100%"
|
|
}}
|
|
></img>
|
|
<div ref={radar} style={style}></div>
|
|
</div>
|
|
);
|
|
},
|
|
gridSettings: {
|
|
h: 2,
|
|
w: 4,
|
|
x: 0,
|
|
y: 4,
|
|
maxW: 5
|
|
},
|
|
id: "minimap",
|
|
label: "Minimap",
|
|
props: {},
|
|
hideable: true,
|
|
bg: "light",
|
|
visible: true,
|
|
text: "dark",
|
|
showLabel: true
|
|
},
|
|
{
|
|
component() {
|
|
return <>Preview</>;
|
|
},
|
|
gridSettings: {
|
|
h: 3,
|
|
w: 3,
|
|
x: 3,
|
|
y: 5
|
|
},
|
|
id: "preview",
|
|
label: "Preview",
|
|
props: {},
|
|
hideable: true,
|
|
bg: "light",
|
|
visible: false,
|
|
text: "dark"
|
|
}
|
|
],
|
|
layoutSettings: {
|
|
width: process.browser ? window.innerWidth : 1920,
|
|
autoSize: false,
|
|
preventCollision: false,
|
|
cols: 15,
|
|
compactType: "horizontal",
|
|
onLayoutChange() {
|
|
if (_this.Network) {
|
|
_this.Network.resize();
|
|
}
|
|
}
|
|
},
|
|
generateData() {
|
|
// Get the Current Selection.
|
|
const selection = _this.Network.network.getSelection(true);
|
|
|
|
const ret: IGraphCallbackData<N, E> = {
|
|
network: _this.Network,
|
|
layout: _this.LayoutHandler,
|
|
selectedEdges: selection.edges,
|
|
selectedNodes: selection.nodes,
|
|
tabs: _this.TabHandler
|
|
};
|
|
|
|
Object.defineProperty(ret, "network", {
|
|
get() {
|
|
return _this.Network;
|
|
}
|
|
});
|
|
|
|
Object.defineProperty(ret, "layout", {
|
|
get() {
|
|
return _this.LayoutHandler;
|
|
}
|
|
});
|
|
|
|
return ret;
|
|
},
|
|
onResize() {
|
|
if (_this.Network) {
|
|
_this.Network.resize();
|
|
}
|
|
},
|
|
onMount(layout) {
|
|
_this.LayoutHandler = layout;
|
|
},
|
|
toolbar: defaultToolbar(),
|
|
hotkeys: defaultHotkeys()
|
|
};
|
|
|
|
return this.LayoutSettings;
|
|
}
|
|
|
|
public requestRerender() {
|
|
this.setState({
|
|
update: null
|
|
});
|
|
}
|
|
|
|
public componentDidMount() {
|
|
const _this = this;
|
|
}
|
|
|
|
public render() {
|
|
this.initializeGraph();
|
|
return React.createElement(DynamicLayout, { ...this.LayoutSettings });
|
|
}
|
|
}
|
|
|
|
export default GraphicalEditorComponent;
|