Skip to content

Commit 777250d

Browse files
shivanmodhashivanmodha
committed
Element React Design
1 parent f5012e0 commit 777250d

2 files changed

Lines changed: 112 additions & 24 deletions

File tree

‎src/public/component/component.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,8 @@ function Initialize()
125125
obj = new Object3D(ME, Vertices, Indices, "OBJ");
126126
graph = new Graph();
127127

128-
let el = new Element(obj);
129-
graph.RegisterElement(el);
128+
//let el = new Element(obj);
129+
//graph.RegisterElement(el);
130130

131131
/*let el = new Element(obj);
132132

‎src/src/App.js‎

Lines changed: 110 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ class App extends Component
7777
<InputGroup.Addon>{int + 1}</InputGroup.Addon>
7878
<FormControl type="text" value={"pathTo={" + node.Neighbors[int].EndNode.ID + ", " + node.Neighbors[int].EndNode.Name + "}, distance={" + node.Neighbors[int].Distance + "}"} readOnly />
7979
<InputGroup.Button>
80-
<Button href="#" bsStyle="danger" onClick={() => this._event_modal_onDeleteNeighbor(int)}><Glyphicon glyph="remove" /></Button>
80+
<Button href="#" bsStyle="danger" onClick={() => this._event_modal_onDeleteNeighbor(int)}><Glyphicon glyph="minus" /></Button>
8181
</InputGroup.Button>
8282
</InputGroup>
8383
)
8484
}
8585
CreateNeighbors()
8686
{
87-
if (this.state.Properties)
87+
if (this.state.Properties && this.state.SelectedNode.Neighbors.length > 0)
8888
{
8989
let node = this.state.SelectedNode;
9090
let itms = [];
@@ -100,7 +100,7 @@ class App extends Component
100100
}
101101
else
102102
{
103-
return (<p>No Neighbors</p>)
103+
return (<p style={{ paddingTop: 10 }}>Looks like this node is a bit lonely. Add a neighbor association by clicking on the {"\""}+{"\""} button below and selecting another node.</p>)
104104
}
105105
}
106106
NavigationCollapse()
@@ -355,6 +355,111 @@ class App extends Component
355355
<canvas id="studios.vanish.component.3D" style={this.GetStyle()}></canvas>
356356
<canvas id="studios.vanish.component.2D" style={this.GetStyle()}></canvas>
357357
</div>
358+
<Modal bsSize="large" show={false}>
359+
<Modal.Header closeButton>
360+
<Modal.Title>Element Properties</Modal.Title>
361+
</Modal.Header>
362+
<Modal.Body>
363+
<Form horizontal>
364+
<p>General</p>
365+
<FormGroup>
366+
<Col sm={2} style={{ textAlign: "right", paddingTop: 5 }}>
367+
Element
368+
</Col>
369+
<Col sm={10}>
370+
<InputGroup>
371+
<InputGroup.Addon>name</InputGroup.Addon>
372+
<FormControl type="text" value={""} placeholder={"name"} onChange={null} />
373+
<InputGroup.Addon>type</InputGroup.Addon>
374+
<FormControl type="text" value={""} placeholder={"type"} onChange={null} />
375+
</InputGroup>
376+
</Col>
377+
</FormGroup>
378+
<FormGroup>
379+
<Col sm={2} style={{ textAlign: "right", paddingTop: 5 }}>
380+
Node
381+
</Col>
382+
<Col sm={10}>
383+
<InputGroup>
384+
<InputGroup.Addon>name</InputGroup.Addon>
385+
<FormControl type="text" value={""} placeholder={"name"} onChange={null} />
386+
<InputGroup.Addon>type</InputGroup.Addon>
387+
<FormControl type="text" value={""} placeholder={"type"} onChange={null} />
388+
</InputGroup>
389+
</Col>
390+
</FormGroup>
391+
<FormGroup style={{ height: 1, backgroundColor: "rgba(10, 10, 10, 0.10)" }}></FormGroup>
392+
<p>Object</p>
393+
<FormGroup>
394+
<Col sm={2} style={{ textAlign: "right", paddingTop: 5 }}>
395+
Vertices
396+
</Col>
397+
<Col sm={10}>
398+
<InputGroup style={{ paddingBottom: 10 }}>
399+
<InputGroup.Addon>01</InputGroup.Addon>
400+
<InputGroup style={{ boxShadow: "none" }}>
401+
<InputGroup.Addon style={{ borderRadius: 0 }}>x</InputGroup.Addon>
402+
<FormControl type="text" value={""} placeholder={"0"} onChange={null} />
403+
<InputGroup.Addon>y</InputGroup.Addon>
404+
<FormControl type="text" value={""} placeholder={"0"} onChange={null} />
405+
<InputGroup.Addon>z</InputGroup.Addon>
406+
<FormControl style={{ borderRadius: 0 }} type="text" value={""} placeholder={"0"} onChange={null} />
407+
</InputGroup>
408+
<InputGroup style={{ boxShadow: "none" }}>
409+
<InputGroup.Addon style={{ paddingLeft: 13, paddingRight: 13, borderRadius: 0, }}>r</InputGroup.Addon>
410+
<FormControl type="text" value={""} placeholder={"0"} onChange={null} />
411+
<InputGroup.Addon style={{ paddingLeft: 12, paddingRight: 11 }}>g</InputGroup.Addon>
412+
<FormControl type="text" value={""} placeholder={"0"} onChange={null} />
413+
<InputGroup.Addon style={{ paddingLeft: 12, paddingRight: 11 }}>b</InputGroup.Addon>
414+
<FormControl style={{ borderRadius: 0 }} type="text" value={""} placeholder={"0"} onChange={null} />
415+
</InputGroup>
416+
<InputGroup.Button>
417+
<Button style={{ height: 68, paddingTop: "60%" }} href="#" bsStyle="danger" onClick={null}><Glyphicon glyph="minus" /></Button>
418+
</InputGroup.Button>
419+
</InputGroup>
420+
<div style={{ textAlign: "right", paddingTop: 0 }}>
421+
<ButtonGroup>
422+
<Button href="#" onClick={null}>Clear</Button>
423+
<Button href="#" onClick={null}>Create</Button>
424+
<Button href="#" bsStyle="success" onClick={null}><Glyphicon glyph="plus" /></Button>
425+
</ButtonGroup>
426+
</div>
427+
</Col>
428+
</FormGroup>
429+
<FormGroup>
430+
<Col sm={2} style={{ textAlign: "right", paddingTop: 5 }}>
431+
Faces
432+
</Col>
433+
<Col sm={10}>
434+
<InputGroup style={{ paddingBottom: 10 }}>
435+
<InputGroup.Addon>index 01</InputGroup.Addon>
436+
<FormControl type="text" value={""} placeholder={""} onChange={null} />
437+
<InputGroup.Addon>index 02</InputGroup.Addon>
438+
<FormControl type="text" value={""} placeholder={""} onChange={null} />
439+
<InputGroup.Addon>index 03</InputGroup.Addon>
440+
<FormControl type="text" value={""} placeholder={""} onChange={null} />
441+
<InputGroup.Button>
442+
<Button href="#" bsStyle="danger" onClick={null}><Glyphicon glyph="minus" /></Button>
443+
</InputGroup.Button>
444+
</InputGroup>
445+
<div style={{ textAlign: "right", paddingTop: 0 }}>
446+
<ButtonGroup>
447+
<Button href="#" onClick={null}>Clear</Button>
448+
<Button href="#" bsStyle="success" onClick={null}><Glyphicon glyph="plus" /></Button>
449+
</ButtonGroup>
450+
</div>
451+
</Col>
452+
</FormGroup>
453+
<FormGroup style={{ height: 1, backgroundColor: "rgba(10, 10, 10, 0.10)" }}></FormGroup>
454+
<FormGroup style={{ textAlign: "right", marginRight: 0 }}>
455+
<ButtonGroup>
456+
<Button bsStyle="danger" href="#" onClick={null}>Delete</Button>
457+
<Button bsStyle="success" href="#" onClick={null}>Ok</Button>
458+
</ButtonGroup>
459+
</FormGroup>
460+
</Form>
461+
</Modal.Body>
462+
</Modal>
358463
<Modal show={this.state.Properties} onHide={this._event_modal_onOk}>
359464
<Modal.Header closeButton>
360465
<Modal.Title>Node Properties</Modal.Title>
@@ -388,11 +493,6 @@ class App extends Component
388493
<InputGroup.Addon>z</InputGroup.Addon>
389494
<FormControl type="number" value={node_location_z} placeholder="z" onChange={this._event_modal_onLocationZ} />
390495
</InputGroup>
391-
<div style={{ textAlign: "left", paddingTop: 15 }}>
392-
<ButtonGroup>
393-
<Button href="#">Center Camera</Button>
394-
</ButtonGroup>
395-
</div>
396496
</Col>
397497
</FormGroup>
398498
<FormGroup style={{ height: 1, backgroundColor: "rgba(10, 10, 10, 0.10)" }}></FormGroup>
@@ -403,22 +503,10 @@ class App extends Component
403503
</Col>
404504
<Col sm={10}>
405505
{this.CreateNeighbors()}
406-
<div style={{ textAlign: "left", paddingTop: 0 }}>
506+
<div style={{ textAlign: "right", paddingTop: 0 }}>
407507
<ButtonGroup>
408508
<Button href="#" onClick={this._event_modal_onIsolateNeighbors}>Isolate</Button>
409-
<Button href="#" bsStyle="success" onClick={this._event_modal_onCreateNeighbor}>Create</Button>
410-
</ButtonGroup>
411-
</div>
412-
</Col>
413-
</FormGroup>
414-
<FormGroup>
415-
<Col sm={2} style={{ textAlign: "right", paddingTop: 5 }}>
416-
Element
417-
</Col>
418-
<Col sm={10}>
419-
<div style={{ textAlign: "right", paddingBottom: 10 }}>
420-
<ButtonGroup>
421-
<Button href="#">Bind Element</Button>
509+
<Button href="#" bsStyle="success" onClick={this._event_modal_onCreateNeighbor}><Glyphicon glyph="plus" /></Button>
422510
</ButtonGroup>
423511
</div>
424512
</Col>

0 commit comments

Comments
 (0)