.save() method is not saving rects.

[JohannesHoffmann]

Hi, i run into an issue. I want to save my packer by using packer.save() but the rect property of my bins are empty.
So i dug into the code and found that the rect prop is not filld here:

maxrects-packer/src/maxrects-packer.ts

Lines 310 to 339 in 11fd72c

	/**
	* Output current bins to save
	*
	* @memberof MaxRectsPacker
	*/
	public save (): IBin[] {
	let saveBins: IBin[] = [];
	this.bins.forEach((bin => {
	let saveBin: IBin = {
	width: bin.width,
	height: bin.height,
	maxWidth: bin.maxWidth,
	maxHeight: bin.maxHeight,
	freeRects: [],
	rects: [],
	options: bin.options
	};
	if (bin.tag) saveBin = { ...saveBin, tag: bin.tag };
	bin.freeRects.forEach(r => {
	saveBin.freeRects.push({
	x: r.x,
	y: r.y,
	width: r.width,
	height: r.height
	});
	});
	saveBins.push(saveBin);
	}));
	return saveBins;
	}

To understand the problem i created a sandbox with the problem:
https://codesandbox.io/s/musing-sound-vedd2b?file=/src/index.ts

version 2.7.3

[soimy]

The purpose of save method is to save the freerects of a packer for later use, ie. adding more rects into the packer without overlapping the previous packed rects position.

The final result of the packed rects are stored in every rects position inside packer.bins, example of access them:

packer.bins.forEach(bin => {
    console.log(bin.rects);
});

This repo is just a simple packing algorithm module, so you have to find your own way storing them.

[JohannesHoffmann]

Thank you for your quick response!
I missread the readme about the purpose of the saving method. Maybe renaming it to saveSettings is more clearly for developers?
Second,i need to send the packed bin as a post reqest. The packers -> bin -> rects holding instances of the rect class. Serialize this to get a plain js object makes the rects look like this: { _x: 0, _y: 0, _width: 100, _height: 100}. This is why i thought the save method will create an correct rect without the underscores.

sure i found my own way already but maybe this are points to improve this simple nice module?

[soimy]

The packer.bin.rects are Array of Objects extended from IRectangle interface, take a look at:

maxrects-packer/src/geom/Rectangle.ts

Lines 1 to 7 in 11fd72c

	export interface IRectangle {
	width: number
	height: number
	x: number
	y: number
	[propName: string]: any
	}

You can simply use JSON.stringify() to serialize as json. For more complicated export, take a look at
https://github.com/soimy/atlasify/blob/master/src/exporter.ts

[soimy]

BTW, Let's move this post to discussions

[JohannesHoffmann]

For me it is not working as intended. I use JSON.stringify() on packer.bin and got the result for rects as follow

{
        "oversized": false,
        "_rot": false,
        "_dirty": 0,
        "_width": 60,
        "_height": 10,
        "_x": 160,
        "_y": 470,
        "_data": {}
      },

see my codesandbox example here

[JohannesHoffmann]

The rects array stores instances of Rectangles. The Rectangle class has protected variables with a leading _ like this._width. There are getters and setters defined via typescript. But at runtime js only holds the protected variables and JSON.stringify only knows about the protected underscore starting variable names. So thats why a JSON.stringifyis not saving rects in IRectangles format. Guess this is the reason?

[soimy]

It's ok to JSON.stringify() in javascript, for typescript, you are right.
Take a look at: https://stackoverflow.com/questions/40080473/using-json-stringify-in-conjunction-with-typescript-getter-setter

[JohannesHoffmann]

Yes but this stackoverflow thread has the same problem as me. It stores each variable with the _ but it should be without underscores to match the IRectangle interface. The suggested solution in this article is to implement a toJsonString() method. The same a toPlainObjectmethod could do to get rid of the classes to exports correct objects that match the IRectangle interface. The IRectangle interface has no properties with a leading _.
This is why i started this issue becaus i thought the .save() method is similar to toJSON or toPlainObject.

[JohannesHoffmann]

This behavior is only when you use the maxrects-packer in ts projects?

[soimy]

Yes

[soimy]

Issue #53 created