github.com/jbendotnet/noms@v0.0.0-20190904222105-c43e4293ea92/cmd/noms/splore/src/node.js (about) 1 // Copyright 2017 Attic Labs, Inc. All rights reserved. 2 // Licensed under the Apache License, version 2.0: 3 // http://www.apache.org/licenses/LICENSE-2.0 4 5 // @flow 6 7 import React, {Component, Element} from 'react'; 8 9 type Props = { 10 hasChildren: boolean, 11 isOpen: boolean, 12 text: string, 13 fromX: number, 14 fromY: number, 15 x: number, 16 y: number, 17 spaceX: number, 18 onClick: (e: MouseEvent, s: string) => any, 19 }; 20 21 type State = { 22 x: number, 23 y: number, 24 }; 25 26 export default class Node extends Component<void, Props, State> { 27 state: State; 28 29 constructor(props: Props) { 30 super(props); 31 32 this.state = { 33 x: this.props.fromX, 34 y: this.props.fromY, 35 }; 36 } 37 38 render(): Element<any> { 39 const {hasChildren, isOpen, onClick, text, x, y} = this.props; 40 41 if (this.state.x !== x || this.state.y !== y) { 42 window.requestAnimationFrame(() => this.setState({x, y})); 43 } 44 45 const gStyle = { 46 transition: 'transform 200ms', 47 transform: `translate3d(${this.state.x}px, ${this.state.y}px, 0)`, 48 }; 49 50 const circleStyle = { 51 cursor: hasChildren ? (isOpen ? 'zoom-out' : 'zoom-in') : 'default', 52 fill: hasChildren && !isOpen ? 'rgb(176, 196, 222)' : 'white', 53 stroke: 'steelblue', 54 strokeWidth: '1.5px', 55 }; 56 57 const foreignObjStyle = { 58 overflow: 'visible', // Firefox like 59 }; 60 61 const paraStyle = { 62 fontFamily: '"Menlo", monospace', 63 fontSize: '11px', 64 overflow: 'hidden', 65 textAlign: 'right', 66 textOverflow: 'ellipsis', 67 whiteSpace: 'nowrap', 68 }; 69 70 const spanStyle = { 71 backgroundColor: 'rgba(255, 255, 255, 0.7)', 72 }; 73 74 return ( 75 <g onClick={onClick} style={gStyle}> 76 <circle style={circleStyle} r="4.5" /> 77 <foreignObject 78 style={foreignObjStyle} 79 x={-this.props.spaceX + 10} 80 y="-.35em" 81 width={this.props.spaceX - 20} 82 height="0.7em" 83 > 84 <div title={text} style={paraStyle}> 85 <span style={spanStyle}> 86 {text} 87 </span> 88 </div> 89 </foreignObject> 90 </g> 91 ); 92 } 93 }