// Hlavní komponent aplikace
class ExampleApp1 extends React.Component {
// konstruktor komponentu
constructor(props) {
super(props);
this.state = {
text: 'Hello world!',
diffuseColor: '#dd3300',
specularColor: '#ee9966'
};
}
// metoda pro vykreslení scény
renderScene() {
return (
<x3d is="x3d">
<scene is="x3d">
<shape is="x3d">
<appearance is="x3d">
<material diffusecolor={this.state.diffuseColor} specularcolor={this.state.specularColor} is="x3d"></material>
</appearance>
<text solid="false" string={this.state.text} is="x3d">
<fontstyle
family="TYPEWRITER"
justify="MIDDLE"
quality={200}
size={2}
is="x3d">
</fontstyle>
</text>
</shape>
</scene>
</x3d>
);
}
// metoda pro vykreslení ovládacích prvků
renderControls() {
return (
<form>
<div>
<label>Text</label>
<input type="text" value={this.state.text} onChange={(e) => this.setState({ text: e.target.value })} />
</div>
<div>
<div className="grid">
<div>
<label>Základní barva</label>
<div>
<input type="color" value={this.state.diffuseColor} onChange={(e) => this.setState({ diffuseColor: e.target.value })} />
<span style={{ color: this.state.diffuseColor }}>{this.state.diffuseColor}</span>
</div>
</div>
<div>
<label>Barva lesku</label>
<div>
<input type="color" value={this.state.specularColor} onChange={(e) => this.setState({ specularColor: e.target.value })} />
<span style={{ color: this.state.specularColor }}>{this.state.specularColor}</span>
</div>
</div>
</div>
</div>
</form>
);
}
// hlavní vykreslovací metoda
render() {
return (
<div>
{this.renderScene()}
{this.renderControls()}
</div>
);
}
}
// vykreslení aplikace do HTML elementu
ReactDOM.render(<ExampleApp1 />, document.getElementById('app1'));
// zavolání X3Dom parseru
x3dom.reload();
// Bezstavový komponent pro 3D kostku
const BoxX3D = ({ instance, index }) => {
const { position, size, color } = instance;
return (
<transform translation={(index * 2) + ' 0 0'} is="x3d">
<transform translation={position.x + ' ' + position.y + ' ' + position.z} is="x3d">
<shape is="x3d">
<appearance is="x3d">
<material diffusecolor={color} is="x3d"></material>
</appearance>
<box size={size.x + ' ' + size.y + ' ' + size.z} usegeocache="false" is="x3d"></box>
</shape>
</transform>
</transform>
);
}
// Bezstavový komponent pro ovládání kostky
const BoxControl = ({ instance, index, onChange, remove }) => {
const { position, size, color } = instance;
return (
<li>
<div>
<div className="grid">
<div>
<label>Objekt {index + 1}</label>
<div>
<input type="color" value={color} onChange={onChange((box, value) => box.color = value)} />
<span style={{ color: color }}> { color } </span>
</div>
</div>
<div>
<div className="grid">
<div>
<label>↔ W { Math.floor(size.x * 100) }%</label>
<input type="range" value={size.x} min={0.1} max={2} step={0.1} onChange={onChange((box, value) => box.size.x = value)} />
</div>
<div>
<label>↕ H { Math.floor(size.y * 100) }%</label>
<input type="range" value={size.y} min={0.1} max={2} step={0.1} onChange={onChange((box, value) => box.size.y = value)} />
</div>
<div>
<label>⤢ L { Math.floor(size.z * 100) }%</label>
<input type="range" value={size.z} min={0.1} max={2} step={0.1} onChange={onChange((box, value) => box.size.z = value)} />
</div>
<div>
<label>→ X { position.x }</label>
<input type="range" value={position.x} min={-1} max={1} step={0.1} onChange={onChange((box, value) => box.position.x = value)} />
</div>
<div>
<label">↑ Y { position.y }</label>
<input type="range" value={position.y} min={-1} max={1} step={0.1} onChange={onChange((box, value) => box.position.y = value)} />
</div>
<div>
<label">↗ Z { position.z }</label>
<input type="range" value={position.z} min={-1} max={1} step={0.1} onChange={onChange((box, value) => box.position.z = value)} />
</div>
</div>
</div>
<div>
<a onClick={() => remove()}>Smazat</a>
</div>
</div>
</div>
</li>
);
}
// Hlavní komponent aplikace
class ExampleApp2 extends React.Component {
// konstruktor komponentu
constructor(props) {
super(props);
// stav komponentu
this.state = {
boxes: []
};
}
// metoda pro získání funkce pro změnu stavu kostky
changeState(index) {
var that = this;
return (boxStateHandler) => {
return (e) => {
var value = e.target.value;
return that.setState((state) => {
boxStateHandler(state.boxes[index], value);
return state;
});
}
}
}
// metoda volaná při připojení komponentu
componentDidMount() {
this.add();
this.add();
}
// metoda pro smazání kostky
remove(index) {
var that = this;
return () => {
return that.setState((state) => {
state.boxes.splice(index, 1);
return state;
});
}
}
// metoda pro přidání kostky
add() {
this.setState((state) => {
state.boxes.push({
position: { x: 0, y: 0, z: 0 },
size: { x: 1, y: 1, z: 1 },
color: "#ff9900" // nebo jiná náhodná barva
});
return state;
});
};
// hlavní vykreslovací metoda
render() {
return (
<div>
<x3d is="x3d">
<scene is="x3d">
<transform translation={( - this.state.boxes.length + 1) + ' 0 0'} is="x3d">
{this.state.boxes.map((box, index) => (
<BoxX3D instance={box} index={index} key={index} />
))}
</transform>
</scene>
</x3d>
<form>
<ul>
{this.state.boxes.map((box, index) => (
<BoxControl instance={box} index={index} key={index} onChange={this.changeState(index)} remove={this.remove(index)} />
))}
</ul>
<a onClick={(e) => this.add()} className="uk-link-reset"><span uk-icon="plus"></span> Přidat nový objekt</a>
</form>
</div>
);
}
}
// vykreslení aplikace do HTML elementu
ReactDOM.render(<ExampleApp2 />, document.getElementById('app2'));
// zavolání X3Dom parseru
x3dom.reload();
// Bezstavový komponent 3D sedadla
const Seat = ({ row, column, enabled, picker }) => {
const click = 'window.SeatPicker(' + row + ',' + column + ')()';
return (
<transform translation={(column * 1.4) + ' ' + (row * -0.5) + ' ' + (row * 2.5)} is="x3d">
<shape is="x3d" onclick={click}>
<appearance is="x3d">
<material diffusecolor={enabled ? '#0099ff' : '#ff9900'} is="x3d"></material>
</appearance>
<box size="0.6 0.5 0.5" usegeocache="false" is="x3d"></box>
</shape>
<transform translation="0.4 0.15 0" is="x3d">
<shape is="x3d" onclick={click}>
<appearance is="x3d">
<material diffusecolor={enabled ? '#0055ee' : '#ee5500'} is="x3d"></material>
</appearance>
<box size="0.2 0.8 0.6" usegeocache="false" is="x3d"></box>
</shape>
</transform>
<transform translation="-0.4 0.15 0" is="x3d">
<shape is="x3d" onclick={click}>
<appearance is="x3d">
<material diffusecolor={enabled ? '#0055ee' : '#ee5500'} is="x3d"></material>
</appearance>
<box size="0.2 0.8 0.6" usegeocache="false" is="x3d"></box>
</shape>
</transform>
<transform translation="0 0.35 -0.25" is="x3d">
<shape is="x3d" onclick={click}>
<appearance is="x3d">
<material diffusecolor={enabled ? '#0077ff' : '#ff7700'} is="x3d"></material>
</appearance>
<box size="0.8 1.2 0.1" usegeocache="false" is="x3d"></box>
</shape>
</transform>
</transform>
);
}
// Bezstavový komponent tlačítka pro výběr sedadla
const SeatButton = ({ row, column, enabled, picker }) => {
const click = () => picker(row, column);
return (
<input type='button' className={enabled ? 'uk-button seat-free' : 'uk-button seat-taken'} onClick={click} value={'S ' + (column + 1)} />
);
}
// Hlavní komponent aplikace
class ExampleApp3 extends React.Component {
// konstruktor komponentu
constructor(props) {
super(props);
// stav komponentu
this.state = {
seats: [
[true, true, true, true, true, true, true],
[true, true, true, true, true, true, true],
[true, true, true, true, true, true, true],
[true, true, true, true, true, true, true]
],
free: 28,
taken: 0
};
}
// metoda pro získání funkce na vybrání sedadla
getSeatPicker() {
var that = this;
return (row, column) => {
that.setState((state) => {
state.seats[row][column] = !state.seats[row][column];
state.seats[row][column] ? (state.free++ , state.taken--) : (state.taken++ , state.free--);
return state;
});
}
}
// metoda volaná při připojení komponentu
componentDidMount() {
// zpřístupnění funkce pro X3Dom
window.SeatPicker = this.getSeatPicker();
}
// metoda pro vykreslování
render() {
return (
<div>
<!-- 3D scéna -->
<x3d is="x3d">
<scene is="x3d">
<transform rotation={'1 0 0 ' + Math.PI / 6} is="x3d">
<transform translation={((-this.state.seats[0].length / 2) - 0.5) + ' 0 ' + (-this.state.seats.length * 1.2)} is="x3d">
{this.state.seats.map((row, rowIndex) => (
row.map((enabled, colIndex) => (
<Seat row={rowIndex} column={colIndex} enabled={enabled} key={rowIndex + 'x' + colIndex} />
))
))}
</transform>
</transform>
</scene>
</x3d>
<!-- tabulka -->
<form>
<h3>Vyberte sedadlo</h3>
<table>
<caption>Obsazeno je {this.state.taken}, zbývá {this.state.free} volných míst</caption>
<tbody>
<!-- cyklus pro tabulku sedadel -->
{this.state.seats.map((row, rowIndex) => (
<tr key={rowIndex}>
<td>Řada {rowIndex+1}</td>
{row.map((enabled, colIndex) => (
<td key={rowIndex + 'x' + colIndex}>
<SeatButton row={rowIndex} column={colIndex} enabled={enabled} picker={this.getSeatPicker()} />
</td>
))}
</tr>
))}
</tbody>
</table>
</form>
</div>
);
}
}
// vykreslení aplikace do HTML elementu
ReactDOM.render(<ExampleApp3 />, document.getElementById('app3'));
// zavolání X3Dom parseru
x3dom.reload();