✨ settings.margin and scale/rotate snippets
This commit is contained in:
Joost De Cock
parent
b63f2ccd6f
commit
54b7ca1817
5 changed files with 50 additions and 35 deletions
|
|
@ -110,9 +110,11 @@ Part.prototype.boundary = function() {
|
|||
if (topLeft.y === Infinity) topLeft.y = 0;
|
||||
if (bottomRight.x === -Infinity) bottomRight.x = 0;
|
||||
if (bottomRight.y === -Infinity) bottomRight.y = 0;
|
||||
// Add 10mm margin
|
||||
this.topLeft = new Point(topLeft.x - 10, topLeft.y - 10);
|
||||
this.bottomRight = new Point(bottomRight.x + 10, bottomRight.y + 10);
|
||||
// Add margin
|
||||
let margin = this.context.settings.margin;
|
||||
if (this.context.settings.paperless && margin < 10) margin = 10;
|
||||
this.topLeft = new Point(topLeft.x - margin, topLeft.y - margin);
|
||||
this.bottomRight = new Point(bottomRight.x + margin, bottomRight.y + margin);
|
||||
this.width = this.bottomRight.x - this.topLeft.x;
|
||||
this.height = this.bottomRight.y - this.topLeft.y;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ export default function Pattern(config = false) {
|
|||
mode: "draft",
|
||||
idPrefix: "fs-",
|
||||
locale: "en",
|
||||
units: "metric"
|
||||
units: "metric",
|
||||
margin: 2
|
||||
};
|
||||
this.options = {};
|
||||
this.store = new Store();
|
||||
|
|
|
|||
18
src/svg.js
18
src/svg.js
|
|
@ -147,7 +147,7 @@ Svg.prototype.renderPart = function(part) {
|
|||
}
|
||||
for (let key in part.snippets) {
|
||||
let snippet = part.snippets[key];
|
||||
svg += this.renderSnippet(snippet);
|
||||
svg += this.renderSnippet(snippet, part);
|
||||
}
|
||||
|
||||
return svg;
|
||||
|
|
@ -232,9 +232,21 @@ Svg.prototype.renderCircle = function(point) {
|
|||
};
|
||||
|
||||
/** Returns SVG code for a snippet */
|
||||
Svg.prototype.renderSnippet = function(snippet) {
|
||||
Svg.prototype.renderSnippet = function(snippet, part) {
|
||||
let x = snippet.anchor.x;
|
||||
let y = snippet.anchor.y;
|
||||
let scale = snippet.attributes.get("data-scale");
|
||||
if (scale) {
|
||||
snippet.attributes.add("transform", `translate(${x}, ${y})`);
|
||||
snippet.attributes.add("transform", `scale(${scale})`);
|
||||
snippet.attributes.add("transform", `translate(${x * -1}, ${y * -1})`);
|
||||
}
|
||||
let rotate = snippet.attributes.get("data-rotate");
|
||||
if (rotate) {
|
||||
snippet.attributes.add("transform", `rotate(${rotate}, ${x}, ${y})`);
|
||||
}
|
||||
let svg = this.nl();
|
||||
svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `;
|
||||
svg += `<use x="${x}" y="${y}" `;
|
||||
svg += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
|
||||
svg += "</use>";
|
||||
|
||||
|
|
|
|||
40
tests/fixtures/render.js
vendored
40
tests/fixtures/render.js
vendored
|
|
@ -93,7 +93,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="20mm" height="20mm" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="4mm" height="4mm" viewBox="0 0 4 4"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform="translate(2, 2)">
|
||||
</g>
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
|
|
@ -127,7 +127,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="60mm" height="72.45mm" viewBox="0 0 60 72.45"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="44mm" height="56.45mm" viewBox="0 0 44 56.45"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<g id="fs-part-test" transform=" translate(2, 2)">
|
||||
<path id="something" class="freesewing" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
</g>
|
||||
<!-- end of group #fs-part-test -->
|
||||
|
|
@ -162,7 +162,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="20mm" height="20mm" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="4mm" height="4mm" viewBox="0 0 4 4"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform="translate(2, 2)">
|
||||
<text class="text-lg" x="20" y="20"><tspan>This is a test</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
|
@ -198,7 +198,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="120mm" height="120mm" viewBox="0 0 120 120"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="104mm" height="104mm" viewBox="0 0 104 104"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(40, 40)"><circle
|
||||
<g id="fs-part-test" transform="translate(32, 32)"><circle
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="50"
|
||||
|
|
@ -237,7 +237,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="20mm" height="20mm" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="4mm" height="4mm" viewBox="0 0 4 4"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -256,7 +256,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<g id="fs-part-test" transform=" translate(2, 2)">
|
||||
<text class="text-lg" x="20" y="20"><tspan>This is a test</tspan><tspan x="20" dy="8">with text on</tspan><tspan x="20" dy="8">multiple lines</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
|
@ -273,7 +273,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="20mm" height="20mm" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="4mm" height="4mm" viewBox="0 0 4 4"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -292,7 +292,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<g id="fs-part-test" transform=" translate(2, 2)">
|
||||
<text class="text-lg" x="20" y="20"><tspan>This is a test</tspan><tspan x="20" dy="12">with text on</tspan><tspan x="20" dy="12">multiple lines</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
|
@ -309,7 +309,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="60mm" height="72.45mm" viewBox="0 0 60 72.45"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="44mm" height="56.45mm" viewBox="0 0 44 56.45"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -328,7 +328,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform=" translate(2, 2)">
|
||||
<path data-text="This is another test" data-text-class="text-sm" class="freesewing" id="fs-1" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#fs-1" ><tspan class="text-sm">This is another test</tspan></textPath>
|
||||
</text>
|
||||
|
|
@ -346,7 +346,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="60mm" height="72.45mm" viewBox="0 0 60 72.45"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="44mm" height="56.45mm" viewBox="0 0 44 56.45"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -365,7 +365,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform="translate(2, 2)">
|
||||
<path data-text="This is another test" data-text-class="center" class="freesewing" id="fs-1" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#fs-1" startOffset="50%" ><tspan class="center">This is another test</tspan></textPath>
|
||||
</text>
|
||||
|
|
@ -383,7 +383,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="60mm" height="72.45mm" viewBox="0 0 60 72.45"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="44mm" height="56.45mm" viewBox="0 0 44 56.45"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -402,7 +402,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform="translate(2, 2)">
|
||||
<path data-text="This is another test" data-text-class="right" class="freesewing" id="fs-1" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#fs-1" startOffset="100%" ><tspan class="right">This is another test</tspan></textPath>
|
||||
</text>
|
||||
|
|
@ -420,7 +420,7 @@ var render = {
|
|||
<!--
|
||||
|
||||
--><svg
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="20mm" height="20mm" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" xmlns:freesewing="http://freesewing.org/namespaces/freesewing" freesewing="${version}" width="4mm" height="4mm" viewBox="0 0 4 4"
|
||||
>
|
||||
<style type="text/css"> <![CDATA[
|
||||
|
||||
|
|
@ -439,7 +439,7 @@ var render = {
|
|||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<g id="fs-part-test" transform="translate(2, 2)">
|
||||
<use x="20" y="20" xlink:href="#test" ></use>
|
||||
</g>
|
||||
<!-- end of group #fs-part-test -->
|
||||
|
|
|
|||
|
|
@ -123,13 +123,13 @@ it("Should calculate the part boundary", () => {
|
|||
.move(part.points.from)
|
||||
.line(part.points.to);
|
||||
let boundary = part.boundary();
|
||||
expect(boundary.topLeft.x).to.equal(9);
|
||||
expect(boundary.topLeft.y).to.equal(66);
|
||||
expect(boundary.bottomRight.x).to.equal(133);
|
||||
expect(boundary.bottomRight.y).to.equal(466);
|
||||
expect(boundary.topLeft.x).to.equal(17);
|
||||
expect(boundary.topLeft.y).to.equal(74);
|
||||
expect(boundary.bottomRight.x).to.equal(125);
|
||||
expect(boundary.bottomRight.y).to.equal(458);
|
||||
boundary = part.boundary();
|
||||
expect(boundary.width).to.equal(124);
|
||||
expect(boundary.height).to.equal(400);
|
||||
expect(boundary.width).to.equal(108);
|
||||
expect(boundary.height).to.equal(384);
|
||||
});
|
||||
|
||||
it("Should stack a part", () => {
|
||||
|
|
@ -143,7 +143,7 @@ it("Should stack a part", () => {
|
|||
.move(part.points.from)
|
||||
.line(part.points.to);
|
||||
part.stack();
|
||||
expect(part.attributes.get("transform")).to.equal("translate(-9, -66)");
|
||||
expect(part.attributes.get("transform")).to.equal("translate(-17, -74)");
|
||||
});
|
||||
|
||||
it("Should only stack a part if needed", () => {
|
||||
|
|
@ -151,7 +151,7 @@ it("Should only stack a part if needed", () => {
|
|||
pattern.settings.mode = "draft";
|
||||
let part = new pattern.Part();
|
||||
let short = part.shorthand();
|
||||
part.points.from = new short.Point(10, 10);
|
||||
part.points.from = new short.Point(2, 2);
|
||||
part.points.to = new short.Point(19, 76);
|
||||
part.paths.test = new short.Path()
|
||||
.move(part.points.from)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue