VSinerva/freesewing
1
0
Fork 0
Code Activity

✨ settings.margin and scale/rotate snippets

Browse source
This commit is contained in:
Joost De Cock 2018-09-11 11:39:50 +02:00
parent b63f2ccd6f
commit 54b7ca1817
5 changed files with 50 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/part.js
View file

@ -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;

3
src/pattern.js
View file

@ -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
View file

@ -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
View file

@ -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 -->

16
tests/part.test.js
View file

@ -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)