73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from '@microsoft/msfs-sdk';
|
|
import { Controls } from '../controls/controls';
|
|
|
|
interface OFPProps extends ComponentProps {
|
|
content: Subscribable<string>;
|
|
reload: () => void;
|
|
position: Subscribable<number>;
|
|
}
|
|
|
|
export class OFP extends DisplayComponent<OFPProps> {
|
|
private containerRef = FSComponent.createRef<HTMLDivElement>();
|
|
private ofpRef = FSComponent.createRef<HTMLDivElement>();
|
|
|
|
constructor(props: OFPProps) {
|
|
super(props);
|
|
}
|
|
|
|
private defineDragScroll = (horizontalScroll = true, verticalScroll = true): void => {
|
|
if (!this.containerRef.instance) return;
|
|
|
|
let pos = { top: 0, left: 0, x: 0, y: 0 };
|
|
|
|
const mouseDownHandler = (e: MouseEvent) => {
|
|
pos = {
|
|
left: this.containerRef.instance.scrollLeft,
|
|
top: this.containerRef.instance.scrollTop,
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
};
|
|
document.addEventListener('mousemove', mouseMoveHandler);
|
|
document.addEventListener('mouseup', mouseUpHandler);
|
|
document.removeEventListener('mouseleave', mouseUpHandler);
|
|
};
|
|
|
|
const mouseMoveHandler = (e: MouseEvent) => {
|
|
const dx = e.clientX - pos.x;
|
|
const dy = e.clientY - pos.y;
|
|
|
|
if (verticalScroll) {
|
|
this.containerRef.instance.scrollTop = pos.top - dy;
|
|
}
|
|
if (horizontalScroll) {
|
|
this.containerRef.instance.scrollLeft = pos.left - dx;
|
|
}
|
|
};
|
|
|
|
const mouseUpHandler = (e: MouseEvent) => {
|
|
document.removeEventListener('mousemove', mouseMoveHandler);
|
|
document.removeEventListener('mouseup', mouseUpHandler);
|
|
document.removeEventListener('mouseleave', mouseUpHandler);
|
|
};
|
|
|
|
this.containerRef.instance.addEventListener('mousedown', mouseDownHandler);
|
|
};
|
|
|
|
public render = (): VNode => (
|
|
<>
|
|
<div ref={this.containerRef} id="KH_FE_FPLAN">
|
|
<div ref={this.ofpRef} id="OFP" />
|
|
</div>
|
|
<Controls containerRef={this.containerRef} position={this.props.position} reload={this.props.reload} page={0} />
|
|
</>
|
|
);
|
|
|
|
public onAfterRender = (): void => {
|
|
this.defineDragScroll();
|
|
|
|
this.props.content.sub((content) => {
|
|
this.ofpRef.instance.innerHTML = content;
|
|
});
|
|
};
|
|
}
|