demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

viewer: initial center

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
script/viewer/Analyse/Render/Building.tsx
View file

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

7
script/viewer/Panner/CenteredPanZoom.ts
View file

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

8
script/viewer/Panner/Panner.tsx
View file

@ -13,10 +13,6 @@ export interface PannerProps {
} }
export const Panner = (props: ParentProps<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({ const panner = new CenteredPanZoom({
screenHeight: props.height, screenHeight: props.height,
screenWidth: props.width, screenWidth: props.width,
@ -24,6 +20,10 @@ export const Panner = (props: ParentProps<PannerProps>) => {
contentSize: props.contentSize 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 startX = 0;
let startY = 0; let startY = 0;