GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix incorrect canvas bounds calculations (#3457)

Browse source 
* Fix incorrect canvas bounds calculations

* Fix contributors

* Set variables to be constant
This commit is contained in:
Taylor Obyen 2024-09-30 10:03:38 -04:00 committed by GitHub
parent 343a304257
commit fdc69505e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CONTRIBUTORS
View file

@ -191,7 +191,7 @@ Ben Nguyen <105088397+bpnguyen107@users.noreply.github.com>
Themis Demetriades <themis100@outlook.com>
Luke Bartholomew <lukesbart@icloud.com>
Gregory Abrasaldo <degeemon@gmail.com>
Taylor Obyen <taylorobyen@gmail.com>
Taylor Obyen <162023405+taylorobyen@users.noreply.github.com>
Kris Cherven <krischerven@gmail.com>
twwn <github.com/twwn>

4
ts/routes/image-occlusion/mask-editor.ts
View file

@ -11,7 +11,7 @@ import { optimumCssSizeForCanvas } from "./canvas-scale";
import { notesDataStore, tagsWritable } from "./store";
import Toast from "./Toast.svelte";
import { addShapesToCanvasFromCloze } from "./tools/add-from-cloze";
import { enableSelectable, makeShapeRemainInCanvas, moveShapeToCanvasBoundaries } from "./tools/lib";
import { enableSelectable, makeShapesRemainInCanvas, moveShapeToCanvasBoundaries } from "./tools/lib";
import { modifiedPolygon } from "./tools/tool-polygon";
import { undoStack } from "./tools/tool-undo-redo";
import { enablePinchZoom, onResize, setCanvasSize } from "./tools/tool-zoom";
@ -132,7 +132,7 @@ const setupBoundingBox = (canvas: fabric.Canvas, size: Size): fabric.Rect => {
canvas.add(boundingBox);
onResize(canvas);
makeShapeRemainInCanvas(canvas, boundingBox);
makeShapesRemainInCanvas(canvas, boundingBox);
moveShapeToCanvasBoundaries(canvas, boundingBox);
// enable pinch zoom for mobile devices
enablePinchZoom(canvas);

17
ts/routes/image-occlusion/tools/lib.ts
View file

@ -268,15 +268,20 @@ export const clear = (canvas: fabric.Canvas): void => {
canvas.clear();
};
export const makeShapeRemainInCanvas = (canvas: fabric.Canvas, boundingBox: fabric.Rect) => {
/**
* Creates a canvas event listener on shape movement to restrict movement to within the `boundingBox`
*/
export const makeShapesRemainInCanvas = (canvas: fabric.Canvas, boundingBox: fabric.Rect) => {
canvas.on("object:moving", function(e) {
const obj = e.target!;
if (obj.getScaledHeight() > boundingBox.height! || obj.getScaledWidth() > boundingBox.width!) {
const objWidth = obj.getScaledWidth();
const objHeight = obj.getScaledHeight();
if (objWidth > boundingBox.width! || objHeight > boundingBox.height!) {
return;
}
obj.setCoords();
const top = obj.top!;
const left = obj.left!;
@ -285,8 +290,8 @@ export const makeShapeRemainInCanvas = (canvas: fabric.Canvas, boundingBox: fabr
const leftBound = boundingBox.left!;
const rightBound = leftBound + boundingBox.width!;
obj.left = Math.min(Math.max(left, leftBound), rightBound - obj.width!);
obj.top = Math.min(Math.max(top, topBound), bottomBound - obj.height!);
obj.left = Math.min(Math.max(left, leftBound), rightBound - objWidth);
obj.top = Math.min(Math.max(top, topBound), bottomBound - objHeight);
});
};