WIP Add GraphEditor pieces (10877b23) · Commits · Patrik Meijer / react-components

demo/demoApp.jsx

+5 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,7 @@ import DemoBasicContainmentCanvas from '../src/components/BasicContainmentCanvas
		import DemoSingleConnectedNode from '../src/components/SingleConnectedNode/demo';
		import DemoInfoCard from '../src/components/InfoCard/demo';
		import DemoPartBrowser from '../src/components/PartBrowser/demo';
		import DemoGraphEditor from '../src/components/GraphEditor/demo';


		class demoApp extends Component {
		@@ -72,6 +73,10 @@ class demoApp extends Component {
		component: <DemoPartBrowser/>,
		title: 'PartBrowser',
		},
		{
		component: <DemoGraphEditor/>,
		title: 'GraphEditor',
		},
		];

		return (

demo/static/gme-dist/webgme.classes.build.js

+22 −1

Original line number	Diff line number	Diff line
		@@ -177,13 +177,34 @@

		return {
		getId: () => id,
		getParentId: () => {
		const arr = id.split('/');
		arr.pop();
		return arr.join('/');
		},
		getGuid: () => 'a5008758-e9e8-7eb1-e995-e1793ef92a37',
		getValidAttributeNames: () => attrNames,
		getAttributeNames: () => attrNames,
		getValidPointerNames: () => {
		if (id.indexOf('/0') !== -1)
		return ['src', 'dst'];
		return [];
		},
		getPointerNames: () => {
		return ['ptr', 'base'];
		},
		getValidSetNames: () => {
		return ['set1', 'set2'];
		},
		getSetNames: () => {
		return ['set1', 'set2'];
		},
		getMemberIds: () => {
		return childrenIds;
		},
		getRegistryNames: () => {
		return ['SVGIcon', 'position'];
		},
		getPointerId: (name) => {
		return childrenIds[cnt % 5];
		},

package-lock.json

+45 −2

Original line number	Diff line number	Diff line
		@@ -2450,6 +2450,37 @@
		"integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
		"dev": true
		},
		"cytoscape": {
		"version": "3.2.12",
		"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.2.12.tgz",
		"integrity": "sha512-epagPckuFpLO2hiKgKMXmCFBFM2K7XbJhYDQj8fH3riiEH+yFXpLYA30jV18TEbVcsq2c58ETOGnHE2YzSBr/Q==",
		"requires": {
		"heap": "^0.2.6",
		"lodash.debounce": "^4.0.8"
		}
		},
		"cytoscape-cose-bilkent": {
		"version": "4.0.0",
		"resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.0.0.tgz",
		"integrity": "sha1-Xwr75cVaegJkQrdWyjiM53wmKWc="
		},
		"cytoscape-dagre": {
		"version": "2.2.2",
		"resolved": "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.2.2.tgz",
		"integrity": "sha512-zsg36qNwua/L2stJSWkcbSDcvW3E6VZf6KRe6aLnQJxuXuz89tMqI5EVYVKEcNBgzTEzFMFv0PE3T0nD4m6VDw==",
		"requires": {
		"dagre": "^0.8.2"
		}
		},
		"dagre": {
		"version": "0.8.4",
		"resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.4.tgz",
		"integrity": "sha512-Dj0csFDrWYKdavwROb9FccHfTC4fJbyF/oJdL9LNZJ8WUvl968P6PAKEriGqfbdArVJEmmfA+UyumgWEwcHU6A==",
		"requires": {
		"graphlib": "^2.1.7",
		"lodash": "^4.17.4"
		}
		},
		"damerau-levenshtein": {
		"version": "1.0.4",
		"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz",
		@@ -4203,6 +4234,14 @@
		"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
		"dev": true
		},
		"graphlib": {
		"version": "2.1.7",
		"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.7.tgz",
		"integrity": "sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==",
		"requires": {
		"lodash": "^4.17.5"
		}
		},
		"handle-thing": {
		"version": "1.2.5",
		"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
		@@ -4282,6 +4321,11 @@
		"minimalistic-assert": "^1.0.1"
		}
		},
		"heap": {
		"version": "0.2.6",
		"resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
		"integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
		},
		"hmac-drbg": {
		"version": "1.0.1",
		"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
		@@ -5187,8 +5231,7 @@
		"lodash.debounce": {
		"version": "4.0.8",
		"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
		"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
		"dev": true
		"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
		},
		"lodash.isarguments": {
		"version": "3.1.0",

package.json

+3 −0

Original line number	Diff line number	Diff line
		@@ -23,6 +23,9 @@
		"@material-ui/core": "3.1.0",
		"@material-ui/icons": "3.0.1",
		"blockies": "0.0.2",
		"cytoscape": "3.2.12",
		"cytoscape-cose-bilkent": "^4.0.0",
		"cytoscape-dagre": "^2.2.2",
		"immutability-helper": "^2.8.1",
		"react-color": "^2.14.1",
		"react-samy-svg": "^3.0.1",

src/components/GraphEditor/ContextMenu.jsx

0 → 100644

+126 −0

Original line number	Diff line number	Diff line
		/* globals document */
		/**
		* DISTRIBUTION STATEMENT C: U.S. Government agencies and their contractors.
		* Other requests shall be referred to DARPA’s Public Release Center via email at prc@darpa.mil.
		* @author pmeijer / https://github.com/pmeijer
		*/
		import React, {Component} from 'react';
		import PropTypes from 'prop-types';

		import Menu from '@material-ui/core/Menu';
		import MenuItem from '@material-ui/core/MenuItem';

		export default class ContextMenu extends Component {
		static propTypes = {
		gmeClient: PropTypes.object.isRequired,
		data: PropTypes.object.isRequired,
		nodeId: PropTypes.string.isRequired, // FIXME: should be nodeIds
		eventX: PropTypes.number.isRequired,
		eventY: PropTypes.number.isRequired,
		onClose: PropTypes.func.isRequired,
		setActiveNode: PropTypes.func.isRequired,

		readOnly: PropTypes.bool,
		};

		static defaultProps = {
		readOnly: false,
		}

		setActiveNode = () => {
		const {nodeId, onClose, setActiveNode} = this.props;

		setActiveNode(nodeId);
		onClose();
		}

		deleteNode = () => {
		const {gmeClient, nodeId, onClose} = this.props;

		gmeClient.deleteNode(nodeId);

		onClose();
		}

		render() {
		const {
		gmeClient,
		nodeId,
		eventX,
		eventY,
		readOnly,
		data,
		} = this.props;

		// console.log(data);
		const menuItems = [];
		const nodeObj = gmeClient.getNode(nodeId);
		if (false) {
		const metaNodeObj = gmeClient.getNode(nodeObj.getMetaTypeId());

		menuItems.push((
		<MenuItem key="meta-type" onClick={this.props.onClose} disabled={readOnly}>
		{`<<${metaNodeObj.getAttribute('name')}>>`}
		</MenuItem>));

		if (metaNodeObj.getAttribute('name') === 'System') {
		menuItems.push((
		<MenuItem key="open-sub-system" onClick={this.setActiveNode} >
		Open Subsystem ...
		</MenuItem>));
		}
		} else if (data.memberAttrs && data.memberAttrs.length > 0) {
		let args;
		data.memberAttrs.forEach((memAttr) => {
		if (memAttr.name === 'args') {
		args = memAttr.value ? `(${memAttr.value})` : '()';
		}
		});

		if (args) {
		menuItems.push((
		<MenuItem key="invocation-args" onClick={this.props.onClose}>
		Invocation arguments: {args}
		</MenuItem>));
		}
		} else if (data.pointerName === 'post' \|\| data.pointerName === 'pre') {
		const methodNode = gmeClient.getNode(data.source);
		const modeNode = gmeClient.getNode(data.target);
		if (methodNode && modeNode) {
		// const parentName = gmeClient.getNode(modeNode.getParentId()).getAttribute('name');
		// const modeName = modeNode.getAttribute('name');
		const methodName = methodNode.getAttribute('name');
		menuItems.push((
		<MenuItem key="pre-post-condition" onClick={this.props.onClose}>
		{`${data.pointerName}-condition for ${methodName}`}
		</MenuItem>));
		}
		} else if (data.setName === 'network-nodes') {
		menuItems.push((
		<MenuItem key="cell-network-nodes" onClick={this.props.onClose}>
		{`${data.setName}`}
		</MenuItem>));
		}

		if (menuItems.length === 0) {
		this.props.onClose();
		return <div/>;
		}

		return (
		<Menu
		id="simple-menu"
		anchorEl={document.body}
		style={{
		position: 'absolute',
		top: eventY - (document.body.clientHeight / 2),
		left: eventX,
		}}
		open
		onClose={this.props.onClose}
		>
		{menuItems}
		</Menu>
		);
		}
		}

Admin message