70 lines
1.9 KiB
JavaScript
70 lines
1.9 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';
|
|
// 1st party.
|
|
import {usePropertyChange} from '../hooks/use-property-change';
|
|
import SelfEntity from './self-entity';
|
|
import Timers from './timers';
|
|
|
|
const decorate = compose(
|
|
contempo(``),
|
|
hot,
|
|
);
|
|
|
|
const DebugUi = ({
|
|
app,
|
|
}) => {
|
|
const [size, setSize] = useState([0, 0]);
|
|
const [position, setPosition] = useState([0, 0]);
|
|
const [transformRatio, setTransformRatio] = useState(1);
|
|
const isDebugging = usePropertyChange(app, 'isDebugging', false);
|
|
// Sync debug UI size with stage size.
|
|
useEffect(() => {
|
|
const onStageResized = (size) => {
|
|
const rect = app.stage.element.getBoundingClientRect();
|
|
setPosition([rect.left, rect.top]);
|
|
setSize(size);
|
|
setTransformRatio(app.stage.transformRatio);
|
|
};
|
|
app.stage.on('displaySizeChanged', onStageResized);
|
|
onStageResized(app.stage.displaySize);
|
|
return () => {
|
|
app.stage.off('displaySizeChanged', onStageResized);
|
|
};
|
|
}, []);
|
|
// Scale stage when debugging.
|
|
useEffect(() => {
|
|
app.stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`;
|
|
}, [isDebugging]);
|
|
return isDebugging && <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: app.stage.size[0],
|
|
height: app.stage.size[1],
|
|
}}
|
|
>
|
|
<Timers app={app} />
|
|
<SelfEntity app={app} />
|
|
</div>
|
|
</div>;
|
|
};
|
|
|
|
export default decorate(DebugUi);
|