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 (topLeft.y === Infinity) topLeft.y = 0;
if (bottomRight.x === -Infinity) bottomRight.x = 0; if (bottomRight.x === -Infinity) bottomRight.x = 0;
if (bottomRight.y === -Infinity) bottomRight.y = 0; if (bottomRight.y === -Infinity) bottomRight.y = 0;
// Add 10mm margin // Add margin
this.topLeft = new Point(topLeft.x - 10, topLeft.y - 10); let margin = this.context.settings.margin;
this.bottomRight = new Point(bottomRight.x + 10, bottomRight.y + 10); 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.width = this.bottomRight.x - this.topLeft.x;
this.height = this.bottomRight.y - this.topLeft.y; 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", mode: "draft",
idPrefix: "fs-", idPrefix: "fs-",
locale: "en", locale: "en",
units: "metric" units: "metric",
margin: 2
}; };
this.options = {}; this.options = {};
this.store = new Store(); 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) { for (let key in part.snippets) {
let snippet = part.snippets[key]; let snippet = part.snippets[key];
svg += this.renderSnippet(snippet); svg += this.renderSnippet(snippet, part);
} }
return svg; return svg;
@ -232,9 +232,21 @@ Svg.prototype.renderCircle = function(point) {
}; };
/** Returns SVG code for a snippet */ /** 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(); 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 += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
svg += "</use>"; svg += "</use>";

40
tests/fixtures/render.js vendored
View file

@ -93,7 +93,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -112,7 +112,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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> </g>
<!-- end of group #fs-part-test --> <!-- end of group #fs-part-test -->
</g> </g>
@ -127,7 +127,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -146,7 +146,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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" /> <path id="something" class="freesewing" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
</g> </g>
<!-- end of group #fs-part-test --> <!-- end of group #fs-part-test -->
@ -162,7 +162,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -181,7 +181,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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 class="text-lg" x="20" y="20"><tspan>This is a test</tspan>
</text> </text>
</g> </g>
@ -198,7 +198,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -217,7 +217,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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" cx="20"
cy="20" cy="20"
r="50" r="50"
@ -237,7 +237,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -256,7 +256,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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 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> </text>
</g> </g>
@ -273,7 +273,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -292,7 +292,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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 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> </text>
</g> </g>
@ -309,7 +309,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -328,7 +328,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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" /> <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><textPath xlink:href="#fs-1" ><tspan class="text-sm">This is another test</tspan></textPath>
</text> </text>
@ -346,7 +346,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -365,7 +365,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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" /> <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><textPath xlink:href="#fs-1" startOffset="50%" ><tspan class="center">This is another test</tspan></textPath>
</text> </text>
@ -383,7 +383,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -402,7 +402,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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" /> <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><textPath xlink:href="#fs-1" startOffset="100%" ><tspan class="right">This is another test</tspan></textPath>
</text> </text>
@ -420,7 +420,7 @@ var render = {
<!-- <!--
--><svg --><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[ <style type="text/css"> <![CDATA[
@ -439,7 +439,7 @@ var render = {
<g id="fs-container"> <g id="fs-container">
<!-- Start of group #fs-part-test --> <!-- 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> <use x="20" y="20" xlink:href="#test" ></use>
</g> </g>
<!-- end of group #fs-part-test --> <!-- 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) .move(part.points.from)
.line(part.points.to); .line(part.points.to);
let boundary = part.boundary(); let boundary = part.boundary();
expect(boundary.topLeft.x).to.equal(9); expect(boundary.topLeft.x).to.equal(17);
expect(boundary.topLeft.y).to.equal(66); expect(boundary.topLeft.y).to.equal(74);
expect(boundary.bottomRight.x).to.equal(133); expect(boundary.bottomRight.x).to.equal(125);
expect(boundary.bottomRight.y).to.equal(466); expect(boundary.bottomRight.y).to.equal(458);
boundary = part.boundary(); boundary = part.boundary();
expect(boundary.width).to.equal(124); expect(boundary.width).to.equal(108);
expect(boundary.height).to.equal(400); expect(boundary.height).to.equal(384);
}); });
it("Should stack a part", () => { it("Should stack a part", () => {
@ -143,7 +143,7 @@ it("Should stack a part", () => {
.move(part.points.from) .move(part.points.from)
.line(part.points.to); .line(part.points.to);
part.stack(); 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", () => { it("Should only stack a part if needed", () => {
@ -151,7 +151,7 @@ it("Should only stack a part if needed", () => {
pattern.settings.mode = "draft"; pattern.settings.mode = "draft";
let part = new pattern.Part(); let part = new pattern.Part();
let short = part.shorthand(); 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.points.to = new short.Point(19, 76);
part.paths.test = new short.Path() part.paths.test = new short.Path()
.move(part.points.from) .move(part.points.from)