FIT TO CANVAS

[awmasakityan]

I'm loading an SVG using editor.loadFromSvg() but the loaded SVG doesn't fit the canvas/viewport. How can I automatically scale and/or position the loaded SVG to fit the canvas, either entirely within the canvas or to fill the canvas completely

When im adding image (Fit)

Load the saved drawing (Doesn't fit)

[personalizedrefrigerator]

One option might be to move the visible part of the canvas with Viewport.transformBy:

Option 1

import { Viewport } from 'js-draw';
import { Mat33, Vec2 } from '@js-draw/math';

// Enable autoresize (if not already enabled).
editor.dispatch(editor.image.setAutoresizeEnabled(true));

// Zooms the editor content such that its width matches the editor width
// (or height matches the editor height).
const zoomToContent = () => {
	const svgRect = editor.getImportExportRect();
	const currentVisibleRect = editor.viewport.visibleRect;

	// Calculate how much we need to zoom in or out
	const xScale = svgRect.width / currentVisibleRect.width;
	const yScale = svgRect.height / currentVisibleRect.height;
	const scaleAmount = Math.max(xScale, yScale);

	// Zoom in by scaleAmount.
	const viewportScale = Mat33.scaling2D(scaleAmount);
	// Move such that svgRect.topLeft matches the canvas's top left
	const moveAmount = svgRect.topLeft.minus(currentVisibleRect.topLeft);
	const viewportTranslate = Mat33.translation(moveAmount);

	// Combine the two transformations into one that scales, then updates
	const viewportUpdate = viewportTranslate.rightMul(viewportScale);

	// Invert, since we're moving the **canvas**, not the screen:
	Viewport.transformBy(viewportUpdate.inverse()).apply(editor);
};
zoomToContent();

Option 2

// Centers content, preserving the zoom
const centerContent = () => {
	const svgRect = editor.getImportExportRect();
	const currentVisibleRect = editor.viewport.visibleRect;

	// Move the loaded SVG (by moving the canvas).
	// moveAmount = Final - Initial
	const moveAmount = currentVisibleRect.center.minus(svgRect.center);
	// Important: moveAmount moves the **canvas**, not the screen.

	// Apply the amount to move: 
	const viewportTranslate = Mat33.translation(moveAmount);
	Viewport.transformBy(viewportTranslate).apply(editor);
};

const zoomToAndCenterContent = () => {
	const svgRect = editor.getImportExportRect();

	// Calculate how much we need to zoom the canvas in or out
	// xScale = finalScale / initialScale
	const xScale = editor.display.width / svgRect.width;
	// yScale = finalScale / initialScale
	const yScale = editor.display.height / svgRect.height;
	const scaleAmount = Math.min(xScale, yScale);

	// Zoom in by scaleAmount.
	// Note: This discards the previous translation/rotation/scale
	//       of the viewport.
	const viewportScale = Mat33.scaling2D(scaleAmount);
	editor.viewport.resetTransform(viewportScale);

	
	centerContent();
};

zoomToAndCenterContent();

There's may be a simpler way to do this. (For example, Viewport.zoomTo(...).apply(...) might work in some cases).

Please let me know if you have any follow-up questions!

Edited: Added a second example, expanded explanation.

[awmasakityan]

The SVG is centered on the initial load, but not on subsequent loads. please see the images below

Initial Load:

Subsequent loads:

[awmasakityan]

I've resolved the issue. Thank you so much for your assistance; the code you provided worked perfectly. The problem was a misconfiguration on my side.