change view based on content

[Johan Antonissen]

Hello!

I'm trying to have my paperjs view change when the bounding box geometry changes. However paperjs does not seem to respond to my new instances of view.center and view.zoom. Does anyone have an idea what i am doing wrong ?

Thank you!

view.onResize = function(event) {

// Recenter the view

var viewCenter = new Point(0,0);

view.center = viewCenter;

// Optionally, you can maintain the same zoom level

// based on your desired behavior

var zoomLevel = 1;

view.zoom = zoomLevel;

// Create a Paper.js rectangle that covers the entire canvas

var background = new Path.Rectangle(view.bounds);

background.fillColor = 'lightgray'; // Set the background color to light gray

// Optionally, you can send the background to the back to ensure other content is visible

background.sendToBack();

};

// Function to draw the current shape

function Initialize() {

// Clear the previous content

project.activeLayer.removeChildren();

// create node layer

var nodeLayer = new Layer();

nodeLayer.name = 'nodeLayer';

// draw point on location 0,0

var point0 = new Path.Circle(new flipY(0, 0), 2);

point0.fillColor = 'red';

point0.strokeColor = 'black';

point0.strokeWidth = .5;

// draw point on location 10,10

var point1 = new Path.Circle(new flipY(100, 100), 2);

point1.fillColor = 'green';

point1.strokeColor = 'black';

point1.strokeWidth = .5;

// draw point on location -10,10

var point2 = new Path.Circle(new flipY(-10, 10), 2);

point2.fillColor = 'blue';

point2.strokeColor = 'black';

point2.strokeWidth = .5;

// draw point on location 10,-10

var point3 = new Path.Circle(new flipY(10, -10), 2);

point3.fillColor = 'yellow';

point3.strokeColor = 'black';

point3.strokeWidth = .5;

// draw point on location -10,-10

var point4 = new Path.Circle(new flipY(-10, -10), 2);

point4.fillColor = 'purple';

point4.strokeColor = 'black';

point4.strokeWidth = .5;

// add points to layer

nodeLayer.addChild(point0);

nodeLayer.addChild(point1);

nodeLayer.addChild(point2);

nodeLayer.addChild(point3);

nodeLayer.addChild(point4);

var boundingBox = nodeLayer.getBounds();

// The boundingBox variable now contains the coordinates of the bounding box

console.log("Top-left corner:", boundingBox.topLeft);

console.log("Top-right corner:", boundingBox.topRight);

console.log("Bottom-left corner:", boundingBox.bottomLeft);

console.log("Bottom-right corner:", boundingBox.bottomRight);

// calculate view center from bounding box

var viewCenter = boundingBox.center;

// calculate required zoom level from bounding box

var zoomX = view.size.width / boundingBox.width;

var zoomY = view.size.height / boundingBox.height;

var zoomLevel = Math.min(zoomX, zoomY);

// return view center and zoom level

console.log("viewCenter: " + viewCenter);

view.center = viewCenter;

console.log("zoomLevel: " + zoomLevel);

view.zoom = zoomLevel;

}

// function that receives x,y and returns x,-y

function flipY(x, y) {

return new Point(x, -y);

}

// Initial drawing

Initialize();

[Jose Antonio Rodrigues]

try view.zoom = view.zoom * zoomLevel