61 lines
1.2 KiB
JavaScript
61 lines
1.2 KiB
JavaScript
|
export function addZoomButtons(map) {
|
||
|
|
// Zoom buttons
|
||
|
|
const plus = map.kp.loadSprite(null, "/assets/images/plus.png", {
|
||
|
|
sliceX: 2,
|
||
|
|
});
|
||
|
|
|
||
|
|
const minus = map.kp.loadSprite(null, "/assets/images/minus.png", {
|
||
|
|
sliceX: 2,
|
||
|
|
});
|
||
|
|
|
||
|
|
const zoomIn = map.kp.make([
|
||
|
|
map.kp.sprite(plus),
|
||
|
|
map.kp.pos(16),
|
||
|
|
map.kp.scale(2),
|
||
|
|
map.kp.area(),
|
||
|
|
map.kp.opacity(1),
|
||
|
|
"ui",
|
||
|
|
]);
|
||
|
|
const zoomOut = map.kp.make([
|
||
|
|
map.kp.sprite(minus),
|
||
|
|
map.kp.pos(16, 42),
|
||
|
|
map.kp.scale(2),
|
||
|
|
map.kp.area(),
|
||
|
|
map.kp.opacity(1),
|
||
|
|
"ui",
|
||
|
|
]);
|
||
|
|
|
||
|
|
let ziw;
|
||
|
|
zoomIn.onClick(() => {
|
||
|
|
map.mouseMode = "ui";
|
||
|
|
map.zoomLevel += 1;
|
||
|
|
zoomIn.frame = 1;
|
||
|
|
if (ziw?.finish) ziw.finish();
|
||
|
|
ziw = map.kp.wait(0.25, () => (zoomIn.frame = 0));
|
||
|
|
|
||
|
|
map.clearMouseMode();
|
||
|
|
});
|
||
|
|
|
||
|
|
zoomIn.onUpdate(() => {
|
||
|
|
zoomIn.opacity = map.zoomLevelLimit > 0 ? 0.25 : 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
let zow;
|
||
|
|
zoomOut.onClick(() => {
|
||
|
|
map.mouseMode = "ui";
|
||
|
|
map.zoomLevel -= 1;
|
||
|
|
zoomOut.frame = 1;
|
||
|
|
if (zow?.finish) zow.finish();
|
||
|
|
zow = map.kp.wait(0.25, () => (zoomOut.frame = 0));
|
||
|
|
|
||
|
|
map.clearMouseMode();
|
||
|
|
});
|
||
|
|
|
||
|
|
zoomOut.onUpdate(() => {
|
||
|
|
zoomOut.opacity = map.zoomLevelLimit < 0 ? 0.25 : 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
map.uiLayer.add(zoomIn);
|
||
|
|
map.uiLayer.add(zoomOut);
|
||
|
|
}
|