diff --git a/cache.js b/cache.js
new file mode 100644
index 0000000..eee3deb
--- /dev/null
+++ b/cache.js
@@ -0,0 +1,20 @@
+class LRUCache {
+    #map = new Map;
+    #capacity;
+    constructor(capacity) {
+        this.#capacity = capacity;
+    }
+    get(key) {
+        if (!this.#map.has(key))
+            return null;
+        const value = this.#map.get(key);
+        this.#map.delete(key);
+        this.#map.set(key, value);
+        return value;
+    }
+    put(key, value) {
+        while (this.#map.size >= this.#capacity)
+            this.#map.delete(this.#map.keys().next().value);
+        this.#map.set(key, value);
+    }
+}
diff --git a/webalign.html b/webalign.html
index dd8d42f..ba63af1 100644
--- a/webalign.html
+++ b/webalign.html
@@ -128,6 +128,8 @@
         <script src="dppick.js"></script>
         <script src="https://cdn.jsdelivr.net/gh/Tevemadar/NetUnzip/inflater.min.js"></script>
         <script src="https://cdn.jsdelivr.net/gh/Tevemadar/NetUnzip/netunzip.min.js"></script>
+        <script src="cache.js"></script>
+        <script src="zoomer.js"></script>
         <script>
             let args = JSON.parse(decodeURIComponent(location.search.substring(1)));
             const bucket = args["clb-collab-id"];
@@ -528,6 +530,9 @@
                 active_image = images[idx];
                 document.getElementById("image").innerText = active_image.filename + "\n" + active_image.width + " x " + active_image.height;
                 ouv = active_image.ouv.slice();
+                
+                init_zoomer();
+                
                 imagenavi();
 //                drawimage();
                 drawstrip();
@@ -535,6 +540,138 @@
 //                drawcut();
                 init_undo();
             }
+            
+            let zoomer;
+            function init_zoomer() {
+                if(zoomer)
+                    zoomer.stop();
+                zoomer=false;
+
+                const {width, height, tilesize, overlap, format, base, dzip, maxlevel, fullcanvas/*,ouv*/} = active_image;
+                if(typeof dzip === "string") {
+                    active_image.callback = init_zoomer;
+                    return;
+                }
+                const DZIcfg={
+                    Width:width,
+                    Height:height,
+                    TileSize:tilesize,
+                    MaxLevel:maxlevel
+                };
+                DZIcfg.Overlay=(ctx, canvaswidth, canvasheight, cutx, cuty, cutw, cuth)=>{
+                    let x = 0, y = 0;
+                    let w = canvaswidth, h = canvasheight;
+                    if (w / h < width / height) {
+                        h = Math.floor(w * height / width);
+                        y = (canvasheight - h) / 2;
+                    } else {
+                        w = Math.floor(h * width / height);
+                        x = (canvaswidth - w) / 2;
+                    }
+                    mainimg = {x, y, w, h};
+
+                    let alpha = document.getElementById("mainalpha").valueAsNumber;
+                    if (alpha > 0) { // todo: rate limit
+                        let mo = document.getElementById("mainoutline");
+                        mo.disabled = alpha < 100;
+                        if (mo.disabled)
+                            alpha = -alpha;
+                        else
+                            alpha = parseInt(mo.value.substring(1), 16);
+                        slice = {...drawslice(ouv, ctx, x, y, w, h, alpha), x, y, w, h};
+                        drawpop();
+                        if (marker) {
+                            ctx.strokeStyle = "black";
+                            ctx.lineWidth = 2;
+                            ctx.beginPath();
+                            switch (marker.type) {
+                                case "cross":
+                                    ctx.moveTo(x + w * marker.x - 10, y + h * marker.y);
+                                    ctx.lineTo(x + w * marker.x + 10, y + h * marker.y);
+                                    ctx.moveTo(x + w * marker.x, y + h * marker.y - 10);
+                                    ctx.lineTo(x + w * marker.x, y + h * marker.y + 10);
+                                    break;
+                                case "vscale":
+                                    ctx.moveTo(0, y + h * marker.y);
+                                    ctx.lineTo(mainw, y + h * marker.y);
+                                    //                            ctx.moveTo(0,mainy);
+                                    //                            ctx.lineTo(mainw,mainy);
+                                    break;
+                                case "hscale":
+                                    ctx.moveTo(x + w * marker.x, 0);
+                                    ctx.lineTo(x + w * marker.x, mainh);
+    //                                ctx.moveTo(mainx,0);
+    //                                ctx.lineTo(mainx,mainh);
+                                    break;
+                                case "rotate":
+                                    ctx.moveTo(x + w * marker.x - 5, y + h * marker.y);
+                                    ctx.lineTo(x + w * marker.x + 5, y + h * marker.y);
+                                    ctx.moveTo(x + w * marker.x, y + h * marker.y - 5);
+                                    ctx.lineTo(x + w * marker.x, y + h * marker.y + 5);
+                                    ctx.stroke();
+                                    ctx.beginPath();
+                                    ctx.arc(x + w * marker.x, y + h * marker.y, 10, 3 * Math.PI / 4, Math.PI / 4);
+                                    break;
+                            }
+                            ctx.stroke();
+                        }
+                    }
+                };
+                // TODO: consolidate copy-paste
+                if(dzip){
+                    DZIcfg.Load=async (level,x,y) => {
+                        const data=await dzip.get(dzip.entries.get(`${base}${maxlevel-level}/${x}_${y}.${format}`));
+                        const url=URL.createObjectURL(new Blob([data], {type: "image/"+format}));
+                        const tile = document.createElement("img");
+                        await new Promise((resolve, reject) => {
+                            tile.onerror = reject;
+                            tile.onload = resolve;
+                            tile.crossOrigin = "anonymous";
+                            tile.src = url;
+                        });
+                        URL.revokeObjectURL(url);
+                        const canvas=document.createElement("canvas");
+                        canvas.width = tilesize;
+                        canvas.height = tilesize;
+                        canvas.getContext("2d").drawImage(tile, x === 0 ? 0 : -overlap, y === 0 ? 0 : -overlap);
+                        return canvas;
+                    };
+                }else if(series.bucket){
+                    DZIcfg.Load=async (level,x,y) => {
+                        const json=await dpurlget(`${base}${maxlevel-level}/${x}_${y}.${format}`);
+                        const tile = document.createElement("img");
+                        await new Promise((resolve, reject) => {
+                            tile.onerror = reject;
+                            tile.onload = resolve;
+                            tile.crossOrigin = "anonymous";
+                            tile.src = json.url;
+                        });
+                        const canvas=document.createElement("canvas");
+                        canvas.width = tilesize;
+                        canvas.height = tilesize;
+                        canvas.getContext("2d").drawImage(tile, x === 0 ? 0 : -overlap, y === 0 ? 0 : -overlap);
+                        return canvas;
+                    };
+                }else{
+                    DZIcfg.Load=async (level,x,y) => {
+                        let tile = document.createElement("img");
+                        await new Promise((resolve, reject) => {
+                            tile.onerror = reject;
+                            tile.onload = resolve;
+                            tile.crossOrigin = "anonymous";
+                            tile.src = `${oldisv}${base}${maxlevel-level}/${x}_${y}.${format}`;
+                        });
+                        const canvas=document.createElement("canvas");
+                        canvas.width = tilesize;
+                        canvas.height = tilesize;
+                        canvas.getContext("2d").drawImage(tile, x === 0 ? 0 : -overlap, y === 0 ? 0 : -overlap);
+                        return canvas;
+                    };
+                }
+                const canvas=document.getElementById("maincnv");
+                zoomer = new ZoomView(canvas,DZIcfg);
+                drawimage();
+            }
             function init_undo() {
                 undo_stack = [images[stripidx].anchored ? ouv.slice() : false];
                 undo_pos = 0;
@@ -621,146 +758,29 @@
             let mainimg = false;
             let marker = false;
             let slice = false;
-            async function drawimage() {
-                drawX("maincnv");
-                if (!ready)
-                    return;
-                slice = false;
-                let idx = stripidx;
-                let {width, height, tilesize, overlap, format, base, dzip, maxlevel: level, fullcanvas/*,ouv*/} = images[idx];
-                if(dzip === "loading") {
-                    images[idx].callback = drawimage;
+            function drawimage(){
+                if(!zoomer)
                     return;
-                }
-                let x = 0, y = 0;
-                let w = mainw, h = mainh;
-                if (w / h < width / height) {
-                    h = Math.floor(w * height / width);
-                    y = (mainh - h) / 2;
+                const {width, height} = active_image;
+                const canvas=document.getElementById("maincnv");
+                const cw = canvas.width;
+                const ch = canvas.height;
+                const w = width;
+                const h = height;
+                if (w / h < cw / ch) {
+                    zoomer.prepare({
+                        cutx: (w - h * cw / ch) / 2,
+                        cuty: 0,
+                        cutw: h * cw / ch,
+                        cuth: h
+                    });
                 } else {
-                    w = Math.floor(h * width / height);
-                    x = (mainw - w) / 2;
-                }
-                mainimg = {x, y, w, h};
-                while (level > 0 && width > w * 2 && height > h * 2) {
-                    level--;
-                    width = (width + 1) >> 1;
-                    height = (height + 1) >> 1;
-                }
-                if (!fullcanvas || (fullcanvas.width < w && fullcanvas.width < width) || (fullcanvas.height < h && fullcanvas.height < height)) {
-                    fullcanvas = document.createElement("canvas");
-                    let ctx = fullcanvas.getContext("2d");
-                    fullcanvas.width = width;
-                    fullcanvas.height = height;
-                    let xtiles = Math.ceil(width / tilesize);
-                    let ytiles = Math.ceil(height / tilesize);
-                    let loads = [];
-                    let wcopy = mainw;
-                    let hcopy = mainh;
-                    //let xx=x,yy=y;
-                    for (let x = 0; x < xtiles; x++)
-                        for (let y = 0; y < ytiles; y++)
-                            loads.push(dzip?dzip.get(dzip.entries.get(`${base}${level}/${x}_${y}.${format}`))
-                                    .then(data => new Promise((resolve, reject) => {
-                                        const url=URL.createObjectURL(new Blob([data], {type: "image/"+image.format}));
-                                        let tile = document.createElement("img");
-                                        tile.onload = () => {
-                                            URL.revokeObjectURL(url);
-                                            ctx.drawImage(tile, x * tilesize - (x === 0 ? 0 : overlap), y * tilesize - (y === 0 ? 0 : overlap));
-                                            resolve();
-                                        };
-                                        tile.src = url;
-                                    }))
-                                :series.bucket?dpurlget(`${base}${level}/${x}_${y}.${format}`)
-                                    .then(json => new Promise((resolve, reject) => {
-                                            let tile = document.createElement("img");
-                                            tile.onerror = reject;
-                                            tile.onload = () => {
-                                                ctx.drawImage(tile, x * tilesize - (x === 0 ? 0 : overlap), y * tilesize - (y === 0 ? 0 : overlap));
-                                                //if(wcopy===mainw && hcopy===mainh && idx===stripidx)
-                                                //    document.getElementById("maincnv").getContext("2d").drawImage(fullcanvas,xx,yy,w,h);
-                                                resolve();
-                                            };
-                                            tile.crossOrigin = "anonymous";
-                                            tile.src = json.url;
-                                        }))
-                                :new Promise((resolve,reject)=>{
-                                    let tile = document.createElement("img");
-                                    tile.onerror = reject;
-                                    tile.onload = () => {
-                                        ctx.drawImage(tile, x * tilesize - (x === 0 ? 0 : overlap), y * tilesize - (y === 0 ? 0 : overlap));
-                                        resolve();
-                                    };
-                                    tile.crossOrigin = "anonymous";
-                                    tile.src = `${oldisv}${base}${level}/${x}_${y}.${format}`;
-                                }));
-//                        loads.push(new Promise((resolve,reject)=>{
-//                            let tile=document.createElement("img");
-//                            tile.onerror=reject;
-//                            tile.onload=()=>{
-//                                ctx.drawImage(tile,x*tilesize-(x===0?0:overlap),y*tilesize-(y===0?0:overlap));
-//                                //if(wcopy===mainw && hcopy===mainh && idx===stripidx)
-//                                //    document.getElementById("maincnv").getContext("2d").drawImage(fullcanvas,xx,yy,w,h);
-//                                resolve();
-//                            };
-//                            tile.crossOrigin="anonymous";
-//                            tile.src=base+maxlevel+"/"+x+"_"+y+"."+format;
-//                        }));
-                    await Promise.all(loads);
-                    if (wcopy !== mainw || hcopy !== mainh)
-                        return;
-                    images[idx].fullcanvas = fullcanvas;
-                    if (idx !== stripidx)
-                        return;
-                }
-                ctx = document.getElementById("maincnv").getContext("2d");
-                ctx.clearRect(0, 0, mainw, mainh);
-                ctx.drawImage(fullcanvas, x, y, w, h);
-                let alpha = document.getElementById("mainalpha").valueAsNumber;
-                if (alpha > 0) { // todo: rate limit
-                    let mo = document.getElementById("mainoutline");
-                    mo.disabled = alpha < 100;
-                    if (mo.disabled)
-                        alpha = -alpha;
-                    else
-                        alpha = parseInt(mo.value.substring(1), 16);
-                    slice = {...drawslice(ouv, ctx, x, y, w, h, alpha), x, y, w, h};
-                    drawpop();
-                    if (marker) {
-                        ctx.strokeStyle = "black";
-                        ctx.lineWidth = 2;
-                        ctx.beginPath();
-                        switch (marker.type) {
-                            case "cross":
-                                ctx.moveTo(x + w * marker.x - 10, y + h * marker.y);
-                                ctx.lineTo(x + w * marker.x + 10, y + h * marker.y);
-                                ctx.moveTo(x + w * marker.x, y + h * marker.y - 10);
-                                ctx.lineTo(x + w * marker.x, y + h * marker.y + 10);
-                                break;
-                            case "vscale":
-                                ctx.moveTo(0, y + h * marker.y);
-                                ctx.lineTo(mainw, y + h * marker.y);
-                                //                            ctx.moveTo(0,mainy);
-                                //                            ctx.lineTo(mainw,mainy);
-                                break;
-                            case "hscale":
-                                ctx.moveTo(x + w * marker.x, 0);
-                                ctx.lineTo(x + w * marker.x, mainh);
-//                                ctx.moveTo(mainx,0);
-//                                ctx.lineTo(mainx,mainh);
-                                break;
-                            case "rotate":
-                                ctx.moveTo(x + w * marker.x - 5, y + h * marker.y);
-                                ctx.lineTo(x + w * marker.x + 5, y + h * marker.y);
-                                ctx.moveTo(x + w * marker.x, y + h * marker.y - 5);
-                                ctx.lineTo(x + w * marker.x, y + h * marker.y + 5);
-                                ctx.stroke();
-                                ctx.beginPath();
-                                ctx.arc(x + w * marker.x, y + h * marker.y, 10, 3 * Math.PI / 4, Math.PI / 4);
-                                break;
-                        }
-                        ctx.stroke();
-                    }
+                    zoomer.prepare({
+                        cutx: 0,
+                        cuty: (h - w * ch / cw) / 2,
+                        cutw: w,
+                        cuth: w * ch / cw
+                    });
                 }
             }
 
@@ -928,8 +948,9 @@
             function mup(event) {
                 if (drag) {
                     drag = false;
-                    if(drag_ouv.some((e,i) => e !== ouv[i]))
+                    if(drag_ouv && drag_ouv.some((e,i) => e !== ouv[i]))
                         store_undo();
+                    drag_ouv = false;
                     if (marker) {
                         marker.type = "cross";
                         drawimage();
diff --git a/zoomer.js b/zoomer.js
new file mode 100644
index 0000000..e88148e
--- /dev/null
+++ b/zoomer.js
@@ -0,0 +1,252 @@
+class ZoomView {
+    "use strict";
+    #cache = new LRUCache(300);
+    #canvas;
+    #cfg;
+    constructor(canvas, cfg) {
+        this.#canvas = canvas;
+        this.#cfg = cfg;
+    }
+
+    #view;
+    stop() {
+        this.#view = null;
+    }
+    static keyfunc = (l, x, y) => `${l}-${x}-${y}`;
+    async prepare(view) {
+        this.redraw = drawImage;
+        let {cutx, cuty, cutw, cuth} = view;
+        const curr = this.#view = {cutx, cuty, cutw, cuth};
+        const {Width, Height, TileSize, MaxLevel, Load, FillStyle} = this.#cfg;
+        const canvaswidth = this.#canvas.width;
+        const canvasheight = this.#canvas.height;
+
+        var planewidth = Width;
+        var planeheight = Height;
+        var level = 0;
+        while ((cutw >= canvaswidth * 2) && (cuth >= canvasheight * 2) && (level < MaxLevel)) {
+            planewidth = (planewidth + 1) >> 1;
+            planeheight = (planeheight + 1) >> 1;
+            cutw = (cutw + 1) >> 1;
+            cuth = (cuth + 1) >> 1;
+            cutx = (cutx + 1) >> 1;
+            cuty = (cuty + 1) >> 1;
+            level++;
+        }
+        var tx = Math.floor(cutx / TileSize);
+        var ty = Math.floor(cuty / TileSize);
+        var tw = Math.floor((cutx + cutw) / TileSize - tx + 1);
+        var th = Math.floor((cuty + cuth) / TileSize - ty + 1);
+
+        var image = document.createElement("canvas");
+        image.width = tw * TileSize;
+        image.height = th * TileSize;
+        var ctx = image.getContext("2d");
+
+        const cliprect = new Path2D();
+        cliprect.rect(-cutx * canvaswidth / cutw, -cuty * canvasheight / cuth, planewidth * canvaswidth / cutw, planeheight * canvasheight / cuth);
+
+        cutx = (cutx % TileSize + TileSize) % TileSize;
+        cuty = (cuty % TileSize + TileSize) % TileSize;
+
+        const mainctx = this.#canvas.getContext("2d");
+        const dizcfg = this.#cfg;
+        const dizcache = this.#cache;
+        function drawImage() {
+            for (let y = 0; y < th; y++)
+                for (let x = 0; x < tw; x++) {
+                    const ox = tx + x;
+                    const oy = ty + y;
+                    let ex = ox;
+                    let ey = oy;
+                    if (ex >= 0 && ey >= 0 && ex * TileSize < planewidth && ey * TileSize < planeheight) {
+                        let clip = TileSize;
+                        let mask = 0;
+                        let lvl = level;
+                        let tile = dizcache.get(ZoomView.keyfunc(lvl, ex, ey));
+                        while (!tile && lvl < MaxLevel) {
+                            clip /= 2;
+                            mask = (mask << 1) + 1;
+                            ex >>= 1;
+                            ey >>= 1;
+                            lvl++;
+                            tile = dizcache.get(ZoomView.keyfunc(lvl, ex, ey));
+                        }
+                        if (tile)
+                            ctx.drawImage(tile, (ox & mask) * clip, (oy & mask) * clip, clip, clip, x * TileSize, y * TileSize, TileSize, TileSize);
+                    }
+                }
+            mainctx.reset();
+            mainctx.globalAlpha = 1;
+            mainctx.fillStyle = FillStyle || "#FFFFFF";
+            mainctx.fillRect(0, 0, canvaswidth, canvasheight);
+            mainctx.save();
+            mainctx.clip(cliprect);
+            mainctx.drawImage(image, cutx, cuty, cutw, cuth, 0, 0, canvaswidth, canvasheight);
+            mainctx.restore();
+//            mainctx.strokeStyle = "red";
+//            mainctx.stroke(cliprect);
+            if (dizcfg.Overlay)
+                dizcfg.Overlay(mainctx, canvaswidth, canvasheight, view.cutx, view.cuty, view.cutw, view.cuth);
+        }
+
+        const loadmap = new Map;
+
+        for (let x = 0; x < tw; x++)
+            for (let y = 0; y < th; y++) {
+                let ex = tx + x;
+                let ey = ty + y;
+                if (ex >= 0 && ey >= 0 && ex * TileSize < planewidth && ey * TileSize < planeheight) {
+                    let templevel = level;
+                    let key = ZoomView.keyfunc(level, ex, ey);
+                    while (!this.#cache.get(key) && templevel < MaxLevel) {
+                        loadmap.set(key, {level: templevel, ex, ey});
+                        ex >>= 1;
+                        ey >>= 1;
+                        templevel++;
+                        key = ZoomView.keyfunc(templevel, ex, ey);
+                    }
+                }
+            }
+        drawImage();
+        const loading = Array.from(loadmap.values());
+        loading.sort((x, y) => x.level - y.level);
+
+        let queued = new Set();
+        while ((loading.length || queued.size) && this.#view === curr) {
+            while (loading.length && queued.size < 10) {
+                const promise = new Promise(async resolve => {
+                    const {level, ex, ey} = loading.pop();
+                    const tile = await Load(level, ex, ey);
+                    this.#cache.put(ZoomView.keyfunc(level, ex, ey), tile);
+                    if (this.#view === curr) {
+                        drawImage();
+                    }
+                    queued.delete(promise);
+                    resolve();
+                });
+                queued.add(promise);
+            }
+            await Promise.race(queued);
+        }
+    }
+}
+
+class Zoomer {
+    #canvas;
+    #cfg;
+    #zoomer;
+    #handlers = {};
+    constructor(canvas, cfg) {
+        this.#canvas = canvas;
+        this.#cfg = cfg;
+        this.#zoomer = new ZoomView(canvas, cfg);
+        const h = this.#handlers;
+        canvas.addEventListener("mousedown", h.mdown = e => this.#mdown(e), true);
+        canvas.addEventListener("mouseup", h.mup = e => this.#mup(e), true);
+        canvas.addEventListener("mousemove", h.mmove = e => this.#mmove(e), true);
+        canvas.addEventListener("wheel", h.mwheel = e => this.#mwheel(e), true);
+        canvas.addEventListener("keydown", h.kdown = e => this.#kdown(e), true);
+        canvas.addEventListener("keypress", h.kpress = e => this.#kpress(e), true);
+        canvas.addEventListener("keyup", h.kup = e => this.#kup(e), true);
+    }
+
+    destroy() {
+        this.#zoomer.stop();
+        const c = this.#canvas;
+        const h = this.#handlers;
+        c.removeEventListener("mousedown", h.mdown, true);
+        c.removeEventListener("mouseup", h.mup, true);
+        c.removeEventListener("mousemove", h.mmove, true);
+        c.removeEventListener("wheel", h.mwheel, true);
+        c.removeEventListener("keydown", h.kdown, true);
+        c.removeEventListener("keypress", h.kpress, true);
+        c.removeEventListener("keyup", h.kup, true);
+    }
+
+    redraw() {
+        if (this.#zoomer.redraw)
+            this.#zoomer.redraw();
+    }
+
+    #view;
+    home() {
+        const cw = this.#canvas.width;
+        const ch = this.#canvas.height;
+        const w = this.#cfg.Width;
+        const h = this.#cfg.Height;
+        if (w / h < cw / ch) {
+            this.#view = {
+                cutx: (w - h * cw / ch) / 2,
+                cuty: 0,
+                cutw: h * cw / ch,
+                cuth: h
+            };
+        } else {
+            this.#view = {
+                cutx: 0,
+                cuty: (h - w * ch / cw) / 2,
+                cutw: w,
+                cuth: w * ch / cw
+            };
+        }
+        this.#zoomer.prepare(this.#view);
+    }
+    #pick = false;
+    #pickx;
+    #picky;
+    #mdown(event) {
+        if (this.#cfg.MouseDown)
+            if (this.#cfg.MouseDown(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth))
+                return;
+        this.#pick = true;
+        this.#pickx = event.offsetX;
+        this.#picky = event.offsetY;
+    }
+    #mup(event) {
+        if (this.#cfg.MouseUp)
+            this.#cfg.MouseUp(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth);
+        this.#pick = false;
+    }
+
+    #mmove(event) {
+        if (this.#cfg.MouseMove)
+            this.#cfg.MouseMove(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth);
+        if (this.#pick) {
+            this.#view.cutx += (this.#pickx - event.offsetX) * this.#view.cutw / this.#canvas.width;
+            this.#view.cuty += (this.#picky - event.offsetY) * this.#view.cuth / this.#canvas.height;
+            this.#pickx = event.offsetX;
+            this.#picky = event.offsetY;
+            this.#zoomer.prepare(this.#view);
+        }
+    }
+    #mwheel(event) {
+        event.preventDefault();
+        const cw = this.#canvas.width;
+        const ch = this.#canvas.height;
+        if (event.deltaY < 0) {
+            this.#view.cutx += (event.offsetX * this.#view.cutw / cw) * 0.1;
+            this.#view.cuty += (event.offsetY * this.#view.cuth / ch) * 0.1;
+            this.#view.cutw *= 0.9;
+            this.#view.cuth = this.#view.cutw * ch / cw;
+        } else {
+            this.#view.cutw /= 0.9;
+            this.#view.cuth = this.#view.cutw * ch / cw;
+            this.#view.cutx -= (event.offsetX * this.#view.cutw / cw) * 0.1;
+            this.#view.cuty -= (event.offsetY * this.#view.cuth / ch) * 0.1;
+        }
+        this.#zoomer.prepare(this.#view);
+    }
+    #kdown(event) {
+        if (this.#cfg.KeyDown)
+            this.#cfg.KeyDown(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth);
+    }
+    #kpress(event) {
+        if (this.#cfg.KeyPress)
+            this.#cfg.KeyPress(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth);
+    }
+    #kup(event) {
+        if (this.#cfg.KeyUp)
+            this.#cfg.KeyUp(event, this.#canvas.width, this.#canvas.height, this.#view.cutx, this.#view.cuty, this.#view.cutw, this.#view.cuth);
+    }
+}