Using child element in ContainmentCanvas (9e386f7f) · Commits · Patrik Meijer / react-components

demo/demoApp.jsx

+0 −1

Original line number	Diff line number	Diff line
		@@ -6,7 +6,6 @@ import Typography from '@material-ui/core/Typography';

		import {DragDropContext} from 'react-dnd';
		import HTML5Backend from 'react-dnd-html5-backend';
		import reducers from '../src/utils/reducers';

		import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
		import DemoAttributeEditor from '../src/components/AttributeEditor/demo';

src/components/BasicConnection/index.jsx

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		export {default} from './BasicConnection';
		No newline at end of file

src/components/ContainmentCanvas/ContainmentCanvas.jsx

+35 −11

Original line number	Diff line number	Diff line
		@@ -30,8 +30,10 @@ function getChildrenNames(gmeClient, nodeId) {

		const canvasTarget = {
		drop(props, monitor, canvas) {
		console.log('dropping...');
		const dragItem = monitor.getItem();
		if (dragItem.move) {
		console.log('dropping...move');
		const offset = monitor.getDifferenceFromInitialOffset();
		const node = props.gmeClient.getNode(dragItem.gmeId);
		const position = node.getRegistry('position');
		@@ -44,6 +46,7 @@ const canvasTarget = {

		props.gmeClient.setRegistry(dragItem.gmeId, 'position', position);
		} else if (dragItem.create) {
		console.log('dropping...create');
		const dragOffset = monitor.getClientOffset();
		const metaNode = props.gmeClient.getNode(dragItem.gmeId);
		const position = {
		@@ -130,6 +133,14 @@ class ContainmentCanvas extends SingleConnectedNode {
		super(props);
		this.cm = new ConnectionManager();
		this.em = new BasicEventManager();
		this.item = React.createElement(SVGRegistryBasedCanvasItem);
		if (this.props.children !== undefined) {
		if (this.props.children[0] !== undefined) {
		this.item = this.props.children[0];
		} else {
		this.item = this.props.children;
		}
		}
		}

		populateChildren(nodeObj) {
		@@ -180,15 +191,17 @@ class ContainmentCanvas extends SingleConnectedNode {
		const {connectDropTarget, activeNode, gmeClient} = this.props;
		const {children, dragMode} = this.state;

		const childrenItems = children.map(child => (<SVGRegistryBasedCanvasItem
		key={child.id}
		gmeClient={gmeClient}
		activeNode={child.id}
		contextNode={activeNode}
		connectionManager={this.cm}
		eventManager={this.em}
		scale={1}
		/>));
		const childrenItems = children.map(child => {
		return React.cloneElement(this.item, {
		key: child.id,
		gmeClient: gmeClient,
		activeNode: child.id,
		contextNode: activeNode,
		connectionManager: this.cm,
		eventManager: this.em,
		scale: 1,
		});
		});

		const content = (
		<div
		@@ -212,7 +225,8 @@ class ContainmentCanvas extends SingleConnectedNode {
		}}
		role="presentation"
		onClick={this.onMouseClick}
		onKeyDown={() => {}}
		onKeyDown={() => {
		}}
		onContextMenu={this.onMouseClick}
		onMouseLeave={this.onMouseLeave}
		onMouseMove={this.onMouseMove}
		@@ -225,4 +239,14 @@ class ContainmentCanvas extends SingleConnectedNode {
		}
		}

		export default DropTarget(DRAG_TYPES.GME_NODE, canvasTarget, collect)(ContainmentCanvas);
		export default DropTarget(DRAG_TYPES

		.GME_NODE
		,
		canvasTarget
		,
		collect
		)(
		ContainmentCanvas
		)
		;

src/components/ContainmentCanvas/index.jsx

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		import {default} from './ContainmentCanvas';
		No newline at end of file

src/utils/actions.jsx

deleted100644 → 0

+0 −91

Original line number	Diff line number	Diff line
		export const setActiveNode = activeNode => ({
		type: 'SET_ACTIVE_NODE',
		activeNode,
		});

		export const setActiveSelection = activeSelection => ({
		type: 'SET_ACTIVE_SELECTION',
		activeSelection,
		});

		export const toggleLeftDrawer = (show) => {
		if (show) {
		return {
		type: 'SHOW_LEFT_DRAWER',
		};
		}
		return {
		type: 'HIDE_LEFT_DRAWER',
		};
		};

		export const toggleRightDrawer = (show) => {
		if (show) {
		return {
		type: 'SHOW_RIGHT_DRAWER',
		};
		}
		return {
		type: 'HIDE_RIGHT_DRAWER',
		};
		};

		export const setScale = scale => ({
		type: 'SET_SCALE',
		scale,
		});

		export const addPlotVariable = variable => ({
		type: 'ADD_PLOT_VARIABLE',
		variable,
		});

		export const removePlotVariable = variable => ({
		type: 'REMOVE_PLOT_VARIABLE',
		variable,
		});

		export const clearPlotVariables = () => ({
		type: 'CLEAR_PLOT_VARIABLES',
		});

		export const setPlotNode = nodeId => ({
		type: 'SET_PLOT_NODE',
		nodeId,
		});

		export const setSimResData = simRes => ({
		type: 'SET_SIM_RES_DATA',
		simRes,
		});

		export const setResultNode = resultNode => ({
		type: 'SET_RESULT_NODE',
		resultNode,
		});

		export const toggleModelingView = (show) => {
		if (show) {
		return {
		type: 'MODELING_VIEW',
		};
		}
		return {
		type: 'SIMULATION_VIEW',
		};
		};

		export const setSystemWaiting = systemWaiting => ({
		type: 'SET_SYSTEM_WAITING',
		systemWaiting,
		});

		export const setCurrentUser = currentUser => ({
		type: 'SET_CURRENT_USER',
		currentUser,
		});

		export const setIdToDisplayName = userIdToDisplayName => ({
		type: 'SET_ID_TO_DISPLAY_NAME_MAP',
		userIdToDisplayName,
		});

Admin message