Update react refs

This commit is contained in:
Casper Lamboo 2021-05-19 19:51:34 +02:00
parent 1a5f0fd9d0
commit 31e9ec735f
5 changed files with 44 additions and 21 deletions

View File

@ -69,6 +69,11 @@ class D2Panel extends React.Component {
activeNeedRender = false;
inactiveNeedRender = false;
constructor(props) {
super(props);
this.canvasContainer = React.createRef();
}
componentWillMount() {
// Scene space
this.sceneActive = new EventGroup({
@ -97,12 +102,12 @@ class D2Panel extends React.Component {
}
componentDidMount() {
const { canvasContainer } = this.refs;
this.container = canvasContainer;
if (this.canvasContainer.current) {
this.container = this.canvasContainer.current;
this.container.appendChild(this.sceneInactive.image);
this.container.appendChild(this.sceneActive.image);
}
this.sceneActive.onClick = (event) => event.stopPropagation();
}
@ -218,7 +223,7 @@ class D2Panel extends React.Component {
return (
<div className={classes.container}>
<ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
<div className={classes.canvasContainer} ref="canvasContainer" />
<div className={classes.canvasContainer} ref={this.canvasContainer} />
<InputText screenMatrix={screenMatrix} />
</div>
);

View File

@ -50,6 +50,10 @@ const styles = {
};
class D3Panel extends React.Component {
constructor(props) {
super(props);
this.canvasContainer = React.createRef();
}
static propTypes = {
state: PropTypes.object.isRequired,
@ -73,11 +77,12 @@ class D3Panel extends React.Component {
}
componentDidMount() {
this.container = this.refs.canvasContainer;
if (this.canvasContainer.current) {
this.container = this.canvasContainer.current;
this.container.appendChild(this.renderer.domElement);
this.renderScene(); // immidiatly render because when THREE.JS inits, a black screen is generated
}
}
componentWillUnmount() {
this.scene.setCanvas(null);
@ -221,7 +226,7 @@ class D3Panel extends React.Component {
return (
<div className={classes.container}>
<ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
<div className={classes.canvasContainer} ref="canvasContainer"/>
<div className={classes.canvasContainer} ref={this.canvasContainer}/>
</div>
);
}

View File

@ -28,6 +28,11 @@ class DoodlePreview extends React.Component {
pixelRatio: 1
};
constructor(props) {
super(props);
this.canvas = React.createRef();
}
static propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
width: PropTypes.number.isRequired,
@ -49,14 +54,12 @@ class DoodlePreview extends React.Component {
if (docData) sketchData = await JSONToSketchData(docData);
const { canvas } = this.refs;
const sceneData = await createSceneData(sketchData);
const scene = createScene(sceneData, canvas);
const scene = createScene(sceneData, this.canvas.current);
this.setState(scene);
this.editorControls = new THREE.EditorControls(scene.camera, canvas);
this.editorControls = new THREE.EditorControls(scene.camera, this.canvas.current);
this.editorControls.addEventListener('change', () => rafOnce(scene.render));
}
@ -78,7 +81,7 @@ class DoodlePreview extends React.Component {
return (
<div className={classes.container}>
<ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
<canvas className={classes.canvas} ref="canvas" />
<canvas className={classes.canvas} ref={this.canvas} />
</div>
);
}

View File

@ -25,6 +25,11 @@ const styles = {
};
class InputText extends React.Component {
constructor(props) {
super(props);
this.text = React.createRef();
}
static propTypes = {
state: PropTypes.object.isRequired,
classes: PropTypes.objectOf(PropTypes.string),
@ -37,7 +42,7 @@ class InputText extends React.Component {
if (!shapeData) return;
const { changeText } = this.props;
const text = this.refs.text.value;
const text = this.text.current.value;
changeText(text);
};
@ -51,7 +56,7 @@ class InputText extends React.Component {
}
componentWillUpdate() {
if (this.refs.text) this.refs.text.focus();
if (this.text.current) this.text.current.focus();
}
render() {
@ -82,7 +87,7 @@ class InputText extends React.Component {
width: `${width}px`
}}
value={text}
ref="text"
ref={this.text}
spellCheck="false"
autoFocus
onChange={this.onInputChange}

View File

@ -8,6 +8,11 @@ import { hexToStyle } from '../utils/colorUtils.js';
// const debug = createDebug('d3d:ui:submenu');
class SubMenu extends React.Component {
constructor(props) {
super(props);
this.li = React.createRef();
}
static propTypes = {
onSelect: PropTypes.func,
onOpen: PropTypes.func,
@ -61,7 +66,7 @@ class SubMenu extends React.Component {
const { open, onClose, value } = this.props;
if (open && onClose) {
// was click on this submenu?
const onSubmenu = this.refs.li.contains(event.target);
const onSubmenu = this.li.current.contains(event.target);
// debug(`onDocumentClick ${event.type} ${onSubmenu ? 'onSubmenu' : ''}`);
if (!onSubmenu) onClose({ menuValue: value });
}
@ -79,7 +84,7 @@ class SubMenu extends React.Component {
let className = 'submenu';
if (open) className += ' open';
return (
<li id={id} className={className} ref="li" style={style}>
<li id={id} className={className} ref={this.li} style={style}>
<Button
id={`${selectedValue}-menu`}
value={selectedValue}