✨ Added support for idPrefix
This commit is contained in:
Joost De Cock
parent
2c7936e58a
commit
7609af1391
3 changed files with 89 additions and 83 deletions
|
|
@ -21,7 +21,8 @@ export default function Pattern(config = false) {
|
|||
|
||||
// Data containers
|
||||
this.settings = {
|
||||
mode: "draft"
|
||||
mode: "draft",
|
||||
idPrefix: "fs-"
|
||||
};
|
||||
this.options = {};
|
||||
this.store = new Store();
|
||||
|
|
|
|||
15
src/svg.js
15
src/svg.js
|
|
@ -47,6 +47,7 @@ Svg.prototype.debug = function() {};
|
|||
|
||||
/** Renders a draft object as SVG */
|
||||
Svg.prototype.render = function(pattern) {
|
||||
this.idPrefix = pattern.settings.idPrefix;
|
||||
this.preRender();
|
||||
if (!pattern.settings.embed) {
|
||||
this.attributes.add("width", pattern.width + "mm");
|
||||
|
|
@ -59,11 +60,14 @@ Svg.prototype.render = function(pattern) {
|
|||
this.svg += this.renderStyle();
|
||||
this.svg += this.renderScript();
|
||||
this.svg += this.renderDefs();
|
||||
this.svg += this.openGroup("draftContainer");
|
||||
this.svg += this.openGroup(this.idPrefix + "container");
|
||||
for (let partId in pattern.parts) {
|
||||
let part = pattern.parts[partId];
|
||||
if (part.render && pattern.needs(partId)) {
|
||||
this.svg += this.openGroup(this.getUid(), part.attributes);
|
||||
this.svg += this.openGroup(
|
||||
`${this.idPrefix}part-${partId}`,
|
||||
part.attributes
|
||||
);
|
||||
this.svg += this.renderPart(part);
|
||||
this.svg += this.closeGroup();
|
||||
}
|
||||
|
|
@ -109,7 +113,7 @@ Svg.prototype.renderScript = function() {
|
|||
|
||||
/** Returns SVG code for the defs block */
|
||||
Svg.prototype.renderDefs = function() {
|
||||
let svg = '<defs id="defs">';
|
||||
let svg = "<defs>";
|
||||
this.indent();
|
||||
svg += this.nl() + this.defs;
|
||||
this.outdent();
|
||||
|
|
@ -147,8 +151,9 @@ Svg.prototype.renderPart = function(part) {
|
|||
|
||||
/** Returns SVG code for a Path object */
|
||||
Svg.prototype.renderPath = function(path) {
|
||||
if (!path.attributes.get("id")) path.attributes.add("id", this.getUid());
|
||||
path.attributes.add("d", path.asPathstring());
|
||||
if (!path.attributes.get("id"))
|
||||
path.attributes.add("id", this.idPrefix + this.getUid());
|
||||
path.attributes.set("d", path.asPathstring());
|
||||
|
||||
return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(
|
||||
path
|
||||
|
|
|
|||
154
tests/fixtures/render.js
vendored
154
tests/fixtures/render.js
vendored
|
|
@ -16,15 +16,15 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -45,15 +45,15 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -74,20 +74,20 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -108,21 +108,21 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform=" translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<path id="something" class="freesewing" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -143,22 +143,22 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<text class="text-lg" x="20" y="20"><tspan>This is a test</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -179,22 +179,22 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform=" translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<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>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -215,22 +215,22 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform=" translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform=" translate(10, 10)">
|
||||
<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>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -251,23 +251,23 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<path data-text="This is another test" data-text-class="text-sm" class="freesewing" id="2" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#2" ><tspan class="text-sm">This is another test</tspan></textPath>
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<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>
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -288,23 +288,23 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<path data-text="This is another test" data-text-class="center" class="freesewing" id="2" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#2" startOffset="50%" ><tspan class="center">This is another test</tspan></textPath>
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<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>
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -325,23 +325,23 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<path data-text="This is another test" data-text-class="right" class="freesewing" id="2" d="M 0,0 L 40,20 C 12,34 56,78 21,32 z" />
|
||||
<text><textPath xlink:href="#2" startOffset="100%" ><tspan class="right">This is another test</tspan></textPath>
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<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>
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
@ -362,21 +362,21 @@ var render = {
|
|||
|
||||
]]>
|
||||
</script>
|
||||
<defs id="defs">
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<!-- Start of group #draftContainer -->
|
||||
<g id="draftContainer">
|
||||
<!-- Start of group #fs-container -->
|
||||
<g id="fs-container">
|
||||
|
||||
<!-- Start of group #1 -->
|
||||
<g id="1" transform="translate(10, 10)">
|
||||
<!-- Start of group #fs-part-test -->
|
||||
<g id="fs-part-test" transform="translate(10, 10)">
|
||||
<use x="20" y="20" xlink:href="#test" ><title>This is a snippet</title></use>
|
||||
</g>
|
||||
<!-- end of group #1 -->
|
||||
<!-- end of group #fs-part-test -->
|
||||
</g>
|
||||
<!-- end of group #draftContainer -->
|
||||
<!-- end of group #fs-container -->
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue