viewer: initial center

This commit is contained in:
Robin Appelman 2023-09-30 17:29:27 +02:00
commit be6ff11093
3 changed files with 10 additions and 11 deletions

View file

@ -22,7 +22,7 @@ function getBuildingType(type: BuildingType) {
case BuildingType.Dispenser:
return require("inline://images/building_icons/dispenser.png");
case BuildingType.Level1Sentry:
return require("inline://images/building_icons/sentry_1.png");
return require("inline://images/building_icons/sentry_1.svg");
case BuildingType.Level2Sentry:
return require("inline://images/building_icons/sentry_2.png");
case BuildingType.Level3Sentry:
@ -57,9 +57,7 @@ export function Building(props: BuildingProp) {
opacity={alpha()}>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/>
<image href={image()} className={"player-icon"} height={32}
width={32}
transform={`translate(-16 -16)`}/>
<image href={image()} className={"player-icon"} height={32} width={32} transform={`translate(-16 -16)`}/>
<Show when={props.building.angle}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
transform={rotate()}/>

View file

@ -20,6 +20,7 @@ export class CenteredPanZoom {
};
constructor(options: CenteredPanZoomOptions) {
const scale = options.scale || (options.screenWidth / options.contentSize.width);
this.screen = new Viewport({
x: 0,
y: 0,
@ -27,12 +28,12 @@ export class CenteredPanZoom {
height: options.screenHeight
});
this.viewport = new Viewport({
x: 0,
y: 0,
x: (options.screenWidth - (options.contentSize.width * scale)) / 2,
y: ( options.screenHeight - (options.contentSize.height * scale)) / 2,
width: options.screenWidth,
height: options.screenHeight
});
this.scale = options.scale || 1;
this.scale = scale;
this.contentSize = options.contentSize;
}

View file

@ -13,10 +13,6 @@ export interface PannerProps {
}
export const Panner = (props: ParentProps<PannerProps>) => {
const [scale, setScale] = createSignal(0);
const [translateX, setTranslateX] = createSignal(0);
const [translateY, setTranslateY] = createSignal(0);
const panner = new CenteredPanZoom({
screenHeight: props.height,
screenWidth: props.width,
@ -24,6 +20,10 @@ export const Panner = (props: ParentProps<PannerProps>) => {
contentSize: props.contentSize
});
const [scale, setScale] = createSignal(props.scale);
const [translateX, setTranslateX] = createSignal(Math.floor(panner.viewport.x));
const [translateY, setTranslateY] = createSignal(Math.floor(panner.viewport.y));
let startX = 0;
let startY = 0;