82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
// 3rd party.
|
|
import React, {useEffect, useState} from 'react';
|
|
import {hot} from 'react-hot-loader/root';
|
|
// 2nd party.
|
|
import {compose} from '@avocado/core';
|
|
import {Vector} from '@avocado/math';
|
|
import contempo from 'contempo';
|
|
// 3rd party.
|
|
import SelfEntity from './self-entity';
|
|
import Throughput from './throughput';
|
|
|
|
const decorate = compose(
|
|
contempo(``),
|
|
hot,
|
|
);
|
|
|
|
const DebugUi = ({
|
|
actionRegistry,
|
|
app,
|
|
stage,
|
|
Parser,
|
|
}) => {
|
|
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 () => {
|
|
stage.off('resized', onStageResized);
|
|
};
|
|
}, []);
|
|
// F2 toggle debug.
|
|
useEffect(() => {
|
|
const onIsDebuggingChanged = () => {
|
|
setIsDebugging(app.isDebugging);
|
|
};
|
|
app.on('isDebuggingChanged', onIsDebuggingChanged);
|
|
return () => {
|
|
app.off('isDebuggingChanged', onIsDebuggingChanged);
|
|
};
|
|
}, [isDebugging]);
|
|
// Scale stage when debugging.
|
|
useEffect(() => {
|
|
stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`;
|
|
}, [isDebugging]);
|
|
return <div
|
|
className="debug"
|
|
style={{
|
|
display: Vector.isNull(size) ? 'none': 'block',
|
|
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],
|
|
}}
|
|
>
|
|
<Throughput Parser={Parser} />
|
|
<SelfEntity app={app} />
|
|
</div>
|
|
</div>;
|
|
};
|
|
|
|
export default decorate(DebugUi);
|