234 lines
7.1 KiB
JavaScript
234 lines
7.1 KiB
JavaScript
/**
|
|
* @freesewing/theme-designer | v0.3.0
|
|
* The designer theme for freesewing
|
|
* (c) 2018 Joost De Cock <joost@decock.org> (https://github.com/joostdecock)
|
|
* @license MIT
|
|
*/
|
|
"use strict";
|
|
|
|
var script = `
|
|
function pointHover(evt) {
|
|
var point = evt.target;
|
|
var id = point.id;
|
|
var cx = point.getAttribute('x');
|
|
var cy = point.getAttribute('y');
|
|
console.log('Point '+id+' ( '+cx+' , '+cy+' )');
|
|
var scale = 2;
|
|
cx = cx-scale*cx;
|
|
cy = cy-scale*cy;
|
|
point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
|
|
setTimeout(function(){
|
|
var point = document.getElementById(evt.target.id);
|
|
point.removeAttribute("transform", '');
|
|
}, 1000);
|
|
}
|
|
`;
|
|
|
|
var style = `
|
|
path.curve-control{stroke:#f0ad4e;stroke-width: 0.2;}
|
|
path.debug{stroke:#d9534f;stroke-opacity:0.4;stroke-width:2;}
|
|
.point{fill:none;stroke-width:0.6;stroke:#f0ad4e;}
|
|
text.tooltip{font-size:3px;}
|
|
`;
|
|
|
|
var snippets = `
|
|
<g id="point">
|
|
<circle cy="0" cx="0" r="2" class="stroke-hint stroke-sm" />
|
|
<circle cy="0" cx="0" r="0.8" class="fill-hint" />
|
|
</g>
|
|
<g id="point-hidden">
|
|
<circle cy="0" cx="0" r="1" class="stroke-canvas stroke-xs" />
|
|
<path d="M -0.5,-0.5 L 0.5,0.5 M 0.5,-0.5 L -0.5,0.5" class="stroke-canvas stroke-sm" />
|
|
</g>
|
|
<g id="path-move-point">
|
|
<circle cx="0" cy="0" r="2" class="stroke-canvas stroke-lg" />
|
|
<circle cx="0" cy="0" r="0.8" class="fill-canvas" />
|
|
</g>
|
|
<g id="path-line-point">
|
|
<circle cx="0" cy="0" r="2" class="stroke-note stroke-lg" />
|
|
<circle cx="0" cy="0" r="0.8" class="fill-note" />
|
|
</g>
|
|
<g id="path-curve-point"> <use xlink:href = "#path-line-point"/> </g>
|
|
<g id="path-handle-point">
|
|
<circle cy="0" cx="0" r="2" class="stroke-mark stroke-lg no-fill" />
|
|
<circle cx="0" cy="0" r="0.8" class="fill-mark" />
|
|
</g>
|
|
<g id="point-focus">
|
|
<circle cx="0" cy="0" r="2" class="stroke-mark stroke-lg" />
|
|
<circle cx="0" cy="0" r="0.8" class="fill-fabric" />
|
|
</g>
|
|
<g id="marked-point">
|
|
<circle cx="0" cy="0" r="3.6" class="stroke-hint stroke-sm" />
|
|
<circle cx="0" cy="0" r="2.8" class="stroke-hint stroke-sm" />
|
|
<circle cx="0" cy="0" r="2.0" class="stroke-hint stroke-sm" />
|
|
<circle cx="0" cy="0" r="1.2" class="stroke-hint stroke-sm" />
|
|
<circle cx="0" cy="0" r="0.8" class="stroke-hint stroke-sm" />
|
|
<circle cx="0" cy="0" r="0.4" class="fill-hint" />
|
|
</g>
|
|
`;
|
|
|
|
var version = "0.3.0";
|
|
|
|
var index = {
|
|
hooks: {
|
|
preRenderSvg: function(next) {
|
|
// Add style, script and snippets
|
|
this.style += style;
|
|
this.script += script;
|
|
this.defs += snippets;
|
|
|
|
// Add SVG attributes
|
|
this.attributes.add("freesewing:theme-designer", version);
|
|
|
|
/** Decorares points with extra info */
|
|
var decoratePoints = function(svg) {
|
|
for (let partId in svg.pattern.parts) {
|
|
let part = svg.pattern.parts[partId];
|
|
if (part.render) {
|
|
for (let pointId in part.points) {
|
|
let point = part.points[pointId];
|
|
point.attributes.add("id", svg.getUid());
|
|
point.attributes.add("data-point", pointId);
|
|
point.attributes.add("data-part", partId);
|
|
let type =
|
|
pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
|
|
let id = svg.getUid();
|
|
part.snippets[id] = new svg.pattern.snippet(
|
|
type,
|
|
point,
|
|
`Point ${pointId} in part ${partId}`
|
|
);
|
|
part.snippets[id].attributes.add(
|
|
"onmouseover",
|
|
"pointHover(evt)"
|
|
);
|
|
part.snippets[id].attributes.add("id", id);
|
|
part.snippets[id].attributes.add("data-point", pointId);
|
|
part.snippets[id].attributes.add("data-part", partId);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/** Decorares path points with extra info */
|
|
var decoratePathPoint = function(
|
|
id,
|
|
Snippet,
|
|
snippets$$1,
|
|
point,
|
|
type,
|
|
pathId,
|
|
partId
|
|
) {
|
|
snippets$$1[id] = new Snippet(
|
|
`path-${type}-point`,
|
|
point,
|
|
`Path ${pathId}: ${type}`
|
|
);
|
|
snippets$$1[id].attributes.add("onmouseover", "pointHover(evt)");
|
|
snippets$$1[id].attributes.add("id", id);
|
|
snippets$$1[id].attributes.add(
|
|
"data-point",
|
|
point.attributes.get("data-point")
|
|
);
|
|
snippets$$1[id].attributes.add("data-path", pathId);
|
|
snippets$$1[id].attributes.add("data-part", partId);
|
|
};
|
|
|
|
/** Draws curve control handles */
|
|
var decorateCurveHandles = function(
|
|
id,
|
|
Path,
|
|
paths,
|
|
from,
|
|
to,
|
|
pathId,
|
|
partId
|
|
) {
|
|
let path = new Path().move(from).line(to);
|
|
path.attributes.add("class", "curve-control");
|
|
path.attributes.add("id", id);
|
|
path.attributes.add("data-path", pathId);
|
|
path.attributes.add("data-part", partId);
|
|
paths[id] = path;
|
|
};
|
|
|
|
/** Decorares paths with extra info */
|
|
var decoratePaths = function(svg) {
|
|
for (let partId in svg.pattern.parts) {
|
|
let part = svg.pattern.parts[partId];
|
|
if (part.render) {
|
|
for (let pathId in part.paths) {
|
|
let path = part.paths[pathId];
|
|
if (!path.render) return false;
|
|
let current;
|
|
for (let op of path.ops) {
|
|
if (op.type !== "close") {
|
|
decoratePathPoint(
|
|
svg.getUid(),
|
|
svg.pattern.snippet,
|
|
part.snippets,
|
|
op.to,
|
|
op.type,
|
|
pathId,
|
|
partId
|
|
);
|
|
}
|
|
if (op.type === "curve") {
|
|
decoratePathPoint(
|
|
svg.getUid(),
|
|
svg.pattern.snippet,
|
|
part.snippets,
|
|
op.cp1,
|
|
"handle",
|
|
pathId,
|
|
partId
|
|
);
|
|
decoratePathPoint(
|
|
svg.getUid(),
|
|
svg.pattern.snippet,
|
|
part.snippets,
|
|
op.cp2,
|
|
"handle",
|
|
pathId,
|
|
partId
|
|
);
|
|
decorateCurveHandles(
|
|
svg.getUid(),
|
|
svg.pattern.path,
|
|
part.paths,
|
|
current,
|
|
op.cp1,
|
|
pathId,
|
|
partId
|
|
);
|
|
decorateCurveHandles(
|
|
svg.getUid(),
|
|
svg.pattern.path,
|
|
part.paths,
|
|
op.to,
|
|
op.cp2,
|
|
pathId,
|
|
partId
|
|
);
|
|
}
|
|
current = op.to;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Decorate pattern
|
|
decoratePoints(this);
|
|
decoratePaths(this);
|
|
console.log(
|
|
"Designer theme plugin: Here's the pattern object:",
|
|
this.pattern
|
|
);
|
|
next();
|
|
}
|
|
}
|
|
};
|
|
|
|
module.exports = index;
|