2019-04-14 00:24:21 -05:00
|
|
|
// 3rd party.
|
|
|
|
import React, {useEffect, useState} from 'react';
|
|
|
|
import {hot} from 'react-hot-loader/root';
|
|
|
|
// 2nd party.
|
|
|
|
import {compose} from '@avocado/core';
|
2019-04-14 01:03:09 -05:00
|
|
|
import {Vector} from '@avocado/math';
|
2019-04-14 00:24:21 -05:00
|
|
|
import contempo from 'contempo';
|
|
|
|
// 3rd party.
|
2019-04-14 01:03:09 -05:00
|
|
|
import SelfEntity from './self-entity';
|
2019-04-14 17:01:41 -05:00
|
|
|
import Connection from './connection';
|
2019-04-14 00:24:21 -05:00
|
|
|
|
|
|
|
const decorate = compose(
|
|
|
|
contempo(``),
|
|
|
|
hot,
|
|
|
|
);
|
|
|
|
|
2019-04-14 01:03:09 -05:00
|
|
|
const DebugUi = ({
|
|
|
|
actionRegistry,
|
2019-04-14 16:33:26 -05:00
|
|
|
app,
|
2019-04-14 17:01:41 -05:00
|
|
|
socket,
|
2019-04-14 01:03:09 -05:00
|
|
|
stage,
|
|
|
|
Parser,
|
|
|
|
}) => {
|
2019-04-14 00:24:21 -05:00
|
|
|
const [size, setSize] = useState([0, 0]);
|
|
|
|
const [position, setPosition] = useState([0, 0]);
|
|
|
|
const [transformRatio, setTransformRatio] = useState(1);
|
|
|
|
const [isDebugging, setIsDebugging] = useState(false);
|
|
|
|
// Sync debug UI size with stage size.
|
|
|
|
useEffect(() => {
|
|
|
|
const onStageResized = (size) => {
|
|
|
|
const rect = stage.element.getBoundingClientRect();
|
|
|
|
setPosition([rect.left, rect.top]);
|
|
|
|
setSize(size);
|
|
|
|
setTransformRatio(stage.transformRatio);
|
|
|
|
};
|
|
|
|
stage.on('displaySizeChanged', onStageResized);
|
|
|
|
onStageResized(stage.displaySize);
|
|
|
|
return () => {
|
2019-04-20 21:36:28 -05:00
|
|
|
stage.off('displaySizeChanged', onStageResized);
|
2019-04-14 00:24:21 -05:00
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
// F2 toggle debug.
|
|
|
|
useEffect(() => {
|
2019-04-14 16:46:22 -05:00
|
|
|
const onIsDebuggingChanged = () => {
|
|
|
|
setIsDebugging(app.isDebugging);
|
2019-04-14 00:24:21 -05:00
|
|
|
};
|
2019-04-14 16:46:22 -05:00
|
|
|
app.on('isDebuggingChanged', onIsDebuggingChanged);
|
2019-04-14 00:24:21 -05:00
|
|
|
return () => {
|
2019-04-14 16:46:22 -05:00
|
|
|
app.off('isDebuggingChanged', onIsDebuggingChanged);
|
2019-04-14 00:24:21 -05:00
|
|
|
};
|
|
|
|
}, [isDebugging]);
|
|
|
|
// Scale stage when debugging.
|
|
|
|
useEffect(() => {
|
|
|
|
stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`;
|
|
|
|
}, [isDebugging]);
|
|
|
|
return <div
|
|
|
|
className="debug"
|
|
|
|
style={{
|
2019-04-14 01:03:09 -05:00
|
|
|
display: Vector.isNull(size) ? 'none': 'block',
|
2019-04-14 00:24:21 -05:00
|
|
|
left: position[0],
|
|
|
|
top: position[1],
|
|
|
|
width: size[0],
|
|
|
|
height: size[1],
|
|
|
|
position: 'absolute',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="ui"
|
|
|
|
style={{
|
|
|
|
transform: `scale(${1 / transformRatio})`,
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
width: stage.size[0],
|
|
|
|
height: stage.size[1],
|
|
|
|
}}
|
|
|
|
>
|
2019-04-14 17:01:41 -05:00
|
|
|
<Connection Parser={Parser} socket={socket} />
|
2019-04-22 18:20:12 -05:00
|
|
|
{/* <SelfEntity app={app} /> */}
|
2019-04-14 00:24:21 -05:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default decorate(DebugUi);
|