105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import { DOMOrientation, DOMOrientationType } from "../dom/DOMOrientation";
|
|
import { EventSlot } from "../events/EventSlot";
|
|
import { ElementType } from "./ElementType";
|
|
|
|
|
|
|
|
export class LandscapeScale
|
|
{
|
|
private _styleElement:Element;
|
|
private _lastWidth:number;
|
|
private _lastHeight:number;
|
|
private _lastOrientation:DOMOrientationType;
|
|
private _ultraWideRatio:number = 2.2;
|
|
private _sw:number;
|
|
private _sh:number;
|
|
private _swidth:number;
|
|
private _sheight:number;
|
|
private _sx:number;
|
|
private _sy:number;
|
|
private _spx:number;
|
|
|
|
get sw()
|
|
{
|
|
return this._sw;
|
|
}
|
|
|
|
onScreenSizeChange = new EventSlot<LandscapeScale>();
|
|
onOrientationChange = new EventSlot<LandscapeScale>();
|
|
|
|
|
|
update()
|
|
{
|
|
let newWidth = window.innerWidth;
|
|
let newHeight = window.innerHeight;
|
|
let newOrientation = DOMOrientation.type;
|
|
|
|
if ( newWidth === this._lastWidth && newHeight === this._lastHeight )
|
|
{
|
|
return;
|
|
}
|
|
|
|
|
|
this.onScreenSizeChange.dispatch( this );
|
|
|
|
if ( this._lastOrientation != newOrientation )
|
|
{
|
|
this._lastOrientation = newOrientation;
|
|
this.onOrientationChange.dispatch( this );
|
|
}
|
|
|
|
if ( this._styleElement == null )
|
|
{
|
|
this._styleElement = ElementType.style.create();
|
|
document.body.appendChild( this._styleElement );
|
|
}
|
|
|
|
let ratio = newWidth / newHeight;
|
|
this._lastWidth = newWidth;
|
|
this._lastHeight = newHeight;
|
|
|
|
this._sw = newWidth / 100;
|
|
|
|
if ( ratio > this._ultraWideRatio )
|
|
{
|
|
this._sw *= ( this._ultraWideRatio / ratio );
|
|
this._sh = this._sw / 16 * 9;
|
|
|
|
this._sx = ( newWidth - ( this._sw * 100 ) ) / 2;
|
|
this._sy = 0;
|
|
|
|
this._spx = ratio / this._ultraWideRatio;
|
|
|
|
}
|
|
else
|
|
{
|
|
this._spx = 1;
|
|
this._sx = 0;
|
|
this._sy = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._swidth = this._sw * 100;
|
|
this._sheight = this._sh * 100;
|
|
|
|
|
|
this._styleElement.innerHTML =
|
|
`
|
|
:root
|
|
{
|
|
--sw:${this._sw}px;
|
|
--sh:${this._sh}px;
|
|
--sx:${this._sx}px;
|
|
--sy:${this._sy}px;
|
|
--swidth:${this._swidth}px;
|
|
--sheight:${this._sheight}px;
|
|
--spx:${this._spx}px;
|
|
--spx-raw:${this._spx};
|
|
--spx-inv:${1/this._spx}px;
|
|
}
|
|
`
|
|
|
|
}
|
|
} |