Skip to content

Svg parsing refactor #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
willmurnane wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Svg parsing refactor #70

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed9b11a
WIP
willmurnane Mar 20, 2025
bd695b5
Fix configuration, and flatten picees in
willmurnane Mar 20, 2025
298d43c
Use native browser DOM instead of jsdom
willmurnane Mar 20, 2025
d786c0c
More WIP
willmurnane Mar 23, 2025
d6ef971
Getting closer to working nesting again
willmurnane Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 5 additions & 172 deletions main/deepnest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,37 +60,20 @@
// parse svg
// config.scale is the default scale, and may not be applied
// scalingFactor is an absolute scaling that must be applied regardless of input svg contents
svg = SvgParser.load(dirpath, svgstring, config.scale, scalingFactor);
svg = SvgParser.clean(dxfFlag);
var parts = SvgParser.load(dirpath, svgstring, config.scale, scalingFactor);

var stuff = SvgParser.toPartsAndSheets(parts);
if (filename) {
this.imports.push({
filename: filename,
svg: svg,
svg: parts.svgroot,
});
}

var parts = this.getParts(svg.children, filename);
for (var i = 0; i < parts.length; i++) {
this.parts.push(parts[i]);
}
var stuff = SvgParser.toPartsAndSheets(parts);
this.parts.push(...stuff);

return parts;

// test simplification
/*for(i=0; i<parts.length; i++){
var part = parts[i];
this.renderPolygon(part.polygontree, svg);
var simple = this.simplifyPolygon(part.polygontree);
this.renderPolygon(simple, svg, 'active');
if(part.polygontree.children){
for(var j=0; j<part.polygontree.children.length; j++){
var schild = this.simplifyPolygon(part.polygontree.children[j], true);
//this.renderPolygon(schild, svg, 'active');
}
}
//this.renderPolygon(simple.exterior, svg, 'error');
}*/
};

// debug function
Expand Down Expand Up @@ -688,160 +671,10 @@
// assuming no intersections, return a tree where odd leaves are parts and even ones are holes
// might be easier to use the DOM, but paths can't have paths as children. So we'll just make our own tree.
this.getParts = function (paths, filename) {
Copy link
Collaborator Author

@willmurnane willmurnane Mar 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ultimately this entire function should be removable. I started stripping out pieces of it as I replaced the functionality with the typescript stuff.

var i, j;
var polygons = [];

var numChildren = paths.length;
for (i = 0; i < numChildren; i++) {
if (SvgParser.polygonElements.indexOf(paths[i].tagName) < 0) {
continue;
}

// don't use open paths
if (!SvgParser.isClosed(paths[i], 2 * config.curveTolerance)) {
continue;
}

var poly = SvgParser.polygonify(paths[i]);
poly = this.cleanPolygon(poly);

// todo: warn user if poly could not be processed and is excluded from the nest
if (
poly &&
poly.length > 2 &&
Math.abs(GeometryUtil.polygonArea(poly)) >
config.curveTolerance * config.curveTolerance
) {
poly.source = i;
polygons.push(poly);
}
}

// turn the list into a tree
// root level nodes of the tree are parts
toTree(polygons);

function toTree(list, idstart) {
function svgToClipper(polygon) {
var clip = [];
for (var i = 0; i < polygon.length; i++) {
clip.push({ X: polygon[i].x, Y: polygon[i].y });
}

ClipperLib.JS.ScaleUpPath(clip, config.clipperScale);

return clip;
}
function pointInClipperPolygon(point, polygon) {
var pt = new ClipperLib.IntPoint(
config.clipperScale * point.x,
config.clipperScale * point.y
);

return ClipperLib.Clipper.PointInPolygon(pt, polygon) > 0;
}
var parents = [];
var i, j, k;

// assign a unique id to each leaf
var id = idstart || 0;

for (i = 0; i < list.length; i++) {
var p = list[i];

var ischild = false;
for (j = 0; j < list.length; j++) {
if (j == i) {
continue;
}
if (p.length < 2) {
continue;
}
var inside = 0;
var fullinside = Math.min(10, p.length);

// sample about 10 points
var clipper_polygon = svgToClipper(list[j]);

for (k = 0; k < fullinside; k++) {
if (pointInClipperPolygon(p[k], clipper_polygon) === true) {
inside++;
}
}

//console.log(inside, fullinside);

if (inside > 0.5 * fullinside) {
if (!list[j].children) {
list[j].children = [];
}
list[j].children.push(p);
p.parent = list[j];
ischild = true;
break;
}
}

if (!ischild) {
parents.push(p);
}
}

for (i = 0; i < list.length; i++) {
if (parents.indexOf(list[i]) < 0) {
list.splice(i, 1);
i--;
}
}

for (i = 0; i < parents.length; i++) {
parents[i].id = id;
id++;
}

for (i = 0; i < parents.length; i++) {
if (parents[i].children) {
id = toTree(parents[i].children, id);
}
}

return id;
}

// construct part objects with metadata
var parts = [];
var svgelements = Array.prototype.slice.call(paths);
var openelements = svgelements.slice(); // elements that are not a part of the poly tree but may still be a part of the part (images, lines, possibly text..)

for (i = 0; i < polygons.length; i++) {
var part = {};
part.polygontree = polygons[i];
part.svgelements = [];

var bounds = GeometryUtil.getPolygonBounds(part.polygontree);
part.bounds = bounds;
part.area = bounds.width * bounds.height;
part.quantity = 1;
part.filename = filename;

if (part.filename === "BACKGROUND.svg") {
part.sheet = true;
}

if (
window.config.getSync("useQuantityFromFileName") &&
part.filename &&
part.filename !== null
) {
const fileNameParts = part.filename.split(".");
if (fileNameParts.length === 3) {
const fileNameMiddlePart = fileNameParts[1];
const quantity = parseInt(fileNameMiddlePart, 10);
if (!isNaN(quantity)) {
part.quantity = quantity;
}
}
}

// load root element
part.svgelements.push(svgelements[part.polygontree.source]);
Expand Down
8 changes: 6 additions & 2 deletions main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,12 @@
<script src="util/svgpanzoom.js"></script>
<script src="util/d3-polygon.js"></script>
<script src="util/simplify.js"></script>

<script src="svgparser.js"></script>
<script>
f = require("../dist/tsc/fontfactory.js");
s = require("../dist/tsc/svgparser.js");
window.SvgParser = new s.SvgParser(new f.FontFactory());
console.log(s);
</script>
Copy link
Collaborator Author

@willmurnane willmurnane Mar 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where the entrypoint to the ts code is.

<script src="deepnest.js"></script>

<script src="page.js"></script>
Expand Down
40 changes: 40 additions & 0 deletions main/util/axisalignedrectangle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Point } from "./point";
import { Polygon } from "./polygon";

export class AxisAlignedRectangle {
x: number;
y: number;
width: number;
height: number;
constructor(x: number, y: number, width: number, height: number) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
static around(ps: Polygon[]) : AxisAlignedRectangle {
let xmin = Infinity;
let xmax = -Infinity;
let ymin = Infinity;
let ymax = -Infinity;
for (const p of ps) {
const b = p.getBounds();
xmin = Math.min(xmin, b.x);
xmax = Math.max(xmax, b.x + b.width);
ymin = Math.min(ymin, b.y);
ymax = Math.max(ymax, b.y + b.height);
}
return new AxisAlignedRectangle(xmin, ymin, xmax - xmin, ymax - ymin);
}

asPolygon(): Polygon {
var frame = [];
frame.push(new Point(this.x, this.y));
frame.push(new Point(this.x + this.width, this.y));
frame.push(new Point(this.x + this.width, this.y + this.height));
frame.push(new Point(this.x, this.y + this.height));

return new Polygon(frame);
}
}

Loading
Loading