render(){
		let vb = this._buildViewBox();
		return(
			<div className="graphExplorer">
				<p>Graph Explorer</p>
				<div ref={(ref) => this.canvasContainer = ref}
					className="graphExplorerCanvasContainer">
					<svg className="graphExplorerTopSVG"
						ref={(ref) => this.svg = ref}
						version="1.1" viewBox={vb}
						onMouseMove={this._canvasMouseMove}
						>
						<GraphCanvas minX={this.state.viewbox.minX}
							minY={this.state.viewbox.minX}
							width={this.state.viewbox.width}
							height={this.state.viewbox.height}
							displayContextMenu={this.props.contextMenu.display}
							handleMouseClick={this._handleCanvasMouseClick}
							handleRightMouseClick={this._handleCanvasRightMouseClick}
							createItemHandler={this._createItem} />
						<GraphStandardLayout
							ref={(ref) => this.graphStandardLayout = ref}
							minX={this.state.graphLayoutViewbox.minX}
							minY={this.state.graphLayoutViewbox.minX}
							width={this.state.graphLayoutViewbox.width}
							height={this.state.graphLayoutViewbox.height}
							handleElementOnClick={this.props.elementClicked}
							handleElementOnRightClick={this.props.displayElementContexMenu}
							deleteSelectedItem={this.props.deleteElement}
							elementDragStart={this._elementDragStart}
							elementDrag={this._elementDrag}
							elementDragEnd={this.props.elementDragEnded}
							sceneGraph={this.props.sceneGraph} />
						<GraphHud minX={this.state.viewbox.minX}
							minY={this.state.viewbox.minX}
							width={this.state.viewbox.width}
							height={this.state.viewbox.height}
							handleZoomInClick={this._handleZoomInClicked}
							handleZoomOutClick={this._handleZoomOutClicked}
							handleZoomResetClicked = {this._handelZoomResetClicked}/>
					</svg>
				</div>
			</div>
		);
	}
/*
	SVG ViewBox Notes:
	https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions
	Width & Height are the size of the canvas. ViewBox is how much is visible.

	https://css-tricks.com/mega-list-svg-information/
	https://sarasoueidan.com/blog/svg-coordinate-systems/

	SVG Mouse Events
		click
		mousedown
		mouseup
		mouseover
		mousemove
		mouseout

	Pan & Zoom Solution
	http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control
	https://stackoverflow.com/questions/10298658/mouse-position-inside-autoscaled-svg

	Getting SVG Coordinates From Mouse
	http://svgdiscovery.com/E/Ed.htm
	https://msdn.microsoft.com/en-us/library/hh535760(v=vs.85).aspx

	Clicking a Path
	https://stackoverflow.com/questions/33878115/react-svg-how-do-i-make-path-support-onclick

	Current Problem:
	I can't seem to get the nested svg elements to have a size. They render
	their contents but they don't display a background or have a clickable
	surface. Their elements allow clicking.

	Possible Solutions:
	1. Create a Rect for the background and have the click handler attached to it.
	2. Abandon using multiple viewports for groups. (Will complicate panning & zooming.)
	3. Reach out on stackoverflow.
	*/




SVG Mouse Events
click
mousedown
mouseup
mouseover
mousemove
mouseout







Current Problem:
I can't seem to get the nested svg elements to have a size. They render
their contents but they don't display a background or have a clickable
surface. Their elements allow clicking.

Possible Solutions:
1. Create a Rect for the background and have the click handler attached to it.
2. Abandon using multiple viewports for groups. (Will complicate panning & zooming.)
3. Reach out on stackoverflow.
SVG Mouse Events click mousedown mouseup mouseover mousemove mouseout Current Problem : I can ' t seem to get the nested svg elements to have a size . They render their contents but they don ' t display a background or have a clickable surface . Their elements allow clicking . Possible Solutions : 1 . Create a Rect for the background and have the click handler attached to it . 2 . Abandon using multiple viewports for groups . ( Will complicate panning & zooming . ) 3 . Reach out on stackoverflow .
render(){
		let vb = this._buildViewBox();
		return(
			<div className="graphExplorer">
				<p>Graph Explorer</p>
				<div ref={(ref) => this.canvasContainer = ref}
					className="graphExplorerCanvasContainer">
					<svg className="graphExplorerTopSVG"
						ref={(ref) => this.svg = ref}
						version="1.1" viewBox={vb}
						onMouseMove={this._canvasMouseMove}
						>
						<GraphCanvas minX={this.state.viewbox.minX}
							minY={this.state.viewbox.minX}
							width={this.state.viewbox.width}
							height={this.state.viewbox.height}
							displayContextMenu={this.props.contextMenu.display}
							handleMouseClick={this._handleCanvasMouseClick}
							handleRightMouseClick={this._handleCanvasRightMouseClick}
							createItemHandler={this._createItem} />
						<GraphStandardLayout
							ref={(ref) => this.graphStandardLayout = ref}
							minX={this.state.graphLayoutViewbox.minX}
							minY={this.state.graphLayoutViewbox.minX}
							width={this.state.graphLayoutViewbox.width}
							height={this.state.graphLayoutViewbox.height}
							handleElementOnClick={this.props.elementClicked}
							handleElementOnRightClick={this.props.displayElementContexMenu}
							deleteSelectedItem={this.props.deleteElement}
							elementDragStart={this._elementDragStart}
							elementDrag={this._elementDrag}
							elementDragEnd={this.props.elementDragEnded}
							sceneGraph={this.props.sceneGraph} />
						<GraphHud minX={this.state.viewbox.minX}
							minY={this.state.viewbox.minX}
							width={this.state.viewbox.width}
							height={this.state.viewbox.height}
							handleZoomInClick={this._handleZoomInClicked}
							handleZoomOutClick={this._handleZoomOutClicked}
							handleZoomResetClicked = {this._handelZoomResetClicked}/>
					</svg>
				</div>
			</div>
		);
	}
render ( ) { let vb = this . _buildViewBox ( ) ; return ( < div className = "graphExplorer" > < p > Graph Explorer < / p > < div ref = { ( ref ) => this . canvasContainer = ref } className = "graphExplorerCanvasContainer" > < svg className = "graphExplorerTopSVG" ref = { ( ref ) => this . svg = ref } version = "1.1" viewBox = { vb } onMouseMove = { this . _canvasMouseMove } > < GraphCanvas minX = { this . state . viewbox . minX } minY = { this . state . viewbox . minX } width = { this . state . viewbox . width } height = { this . state . viewbox . height } displayContextMenu = { this . props . contextMenu . display } handleMouseClick = { this . _handleCanvasMouseClick } handleRightMouseClick = { this . _handleCanvasRightMouseClick } createItemHandler = { this . _createItem } / > < GraphStandardLayout ref = { ( ref ) => this . graphStandardLayout = ref } minX = { this . state . graphLayoutViewbox . minX } minY = { this . state . graphLayoutViewbox . minX } width = { this . state . graphLayoutViewbox . width } height = { this . state . graphLayoutViewbox . height } handleElementOnClick = { this . props . elementClicked } handleElementOnRightClick = { this . props . displayElementContexMenu } deleteSelectedItem = { this . props . deleteElement } elementDragStart = { this . _elementDragStart } elementDrag = { this . _elementDrag } elementDragEnd = { this . props . elementDragEnded } sceneGraph = { this . props . sceneGraph } / > < GraphHud minX = { this . state . viewbox . minX } minY = { this . state . viewbox . minX } width = { this . state . viewbox . width } height = { this . state . viewbox . height } handleZoomInClick = { this . _handleZoomInClicked } handleZoomOutClick = { this . _handleZoomOutClicked } handleZoomResetClicked = { this . _handelZoomResetClicked } / > < / svg > < / div > < / div > ) ; }
SVG ViewBox Notes:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions
Width & Height are the size of the canvas.
SVG ViewBox Notes : https : // developer . mozilla . org / en - US / docs / Web / SVG / Tutorial / Positions Width & Height are the size of the canvas .