sparkles: Fixed script
This commit is contained in:
joostdecock
Joost De Cock
parent
9742ccfe65
commit
74cd42cbda
9 changed files with 46 additions and 526 deletions
234
packages/plugin-designer/dist/module.js
vendored
234
packages/plugin-designer/dist/module.js
vendored
|
|
@ -1,234 +0,0 @@
|
||||||
/**
|
|
||||||
* @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;
|
|
||||||
232
packages/plugin-designer/dist/theme.min.js
vendored
232
packages/plugin-designer/dist/theme.min.js
vendored
|
|
@ -1,232 +0,0 @@
|
||||||
this.freesewing = this.freesewing || {};
|
|
||||||
this.freesewing.plugins = this.freesewing.plugins || {};
|
|
||||||
this.freesewing.plugins.designer = (function() {
|
|
||||||
"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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return index;
|
|
||||||
})();
|
|
||||||
|
|
@ -17,8 +17,9 @@
|
||||||
"design",
|
"design",
|
||||||
"sewing patterns"
|
"sewing patterns"
|
||||||
],
|
],
|
||||||
"main": "dist/module.js",
|
"main": "dist/node.js",
|
||||||
"unpkg": "dist/theme.min.js",
|
"unpkg": "dist/browser.js",
|
||||||
|
"browser": "dist/browser.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"precommit": "npm run pretty && lint-staged",
|
"precommit": "npm run pretty && lint-staged",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import meta from "./package.json";
|
||||||
export default {
|
export default {
|
||||||
input: "src/index.js",
|
input: "src/index.js",
|
||||||
output: {
|
output: {
|
||||||
file: "dist/theme.min.js",
|
file: "dist/browser.js",
|
||||||
format: "iife",
|
format: "iife",
|
||||||
name: "freesewing.plugins.designer"
|
name: "freesewing.plugins.designer"
|
||||||
},
|
},
|
||||||
|
|
@ -20,15 +20,15 @@ export default {
|
||||||
commonjs(),
|
commonjs(),
|
||||||
babel({
|
babel({
|
||||||
exclude: "node_modules/**"
|
exclude: "node_modules/**"
|
||||||
|
}),
|
||||||
|
terser({
|
||||||
|
output: {
|
||||||
|
preamble: `/**\n * ${meta.name} | v${meta.version}\n * ${
|
||||||
|
meta.description
|
||||||
|
}\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
|
||||||
|
meta.license
|
||||||
|
}\n */`
|
||||||
|
}
|
||||||
})
|
})
|
||||||
//terser({
|
|
||||||
// output: {
|
|
||||||
// preamble: `/**\n * ${meta.name} | v${meta.version}\n * ${
|
|
||||||
// meta.description
|
|
||||||
// }\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
|
|
||||||
// meta.license
|
|
||||||
// }\n */`
|
|
||||||
// }
|
|
||||||
//})
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
|
import { terser } from "rollup-plugin-terser";
|
||||||
import filesize from "rollup-plugin-filesize";
|
import filesize from "rollup-plugin-filesize";
|
||||||
import babel from "rollup-plugin-babel";
|
import babel from "rollup-plugin-babel";
|
||||||
import resolve from "rollup-plugin-node-resolve";
|
|
||||||
import json from "rollup-plugin-json";
|
import json from "rollup-plugin-json";
|
||||||
|
import resolve from "rollup-plugin-node-resolve";
|
||||||
import meta from "./package.json";
|
import meta from "./package.json";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
input: "src/index.js",
|
input: "src/index.js",
|
||||||
output: {
|
output: {
|
||||||
file: "dist/module.js",
|
file: "dist/node.js",
|
||||||
format: "cjs",
|
format: "cjs"
|
||||||
banner: `/**\n * ${meta.name} | v${meta.version}\n * ${
|
|
||||||
meta.description
|
|
||||||
}\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
|
|
||||||
meta.license
|
|
||||||
}\n */`
|
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
resolve({
|
resolve({
|
||||||
|
|
@ -23,6 +19,15 @@ export default {
|
||||||
babel({
|
babel({
|
||||||
exclude: "node_modules/**"
|
exclude: "node_modules/**"
|
||||||
}),
|
}),
|
||||||
filesize()
|
filesize(),
|
||||||
|
terser({
|
||||||
|
output: {
|
||||||
|
preamble: `/**\n * ${meta.name} | v${meta.version}\n * ${
|
||||||
|
meta.description
|
||||||
|
}\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
|
||||||
|
meta.license
|
||||||
|
}\n */`
|
||||||
|
}
|
||||||
|
})
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
import script from "./lib/script";
|
import script from "./lib/script";
|
||||||
import style from "./lib/style";
|
|
||||||
import snippets from "./lib/snippets";
|
import snippets from "./lib/snippets";
|
||||||
import { version } from "../package.json";
|
import { version } from "../package.json";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
hooks: {
|
hooks: {
|
||||||
preRenderSvg: function(next) {
|
preRenderSvg: function(next) {
|
||||||
// Add style, script and snippets
|
// Add script and snippets
|
||||||
this.style += style;
|
|
||||||
this.script += script;
|
this.script += script;
|
||||||
this.defs += snippets;
|
this.defs += snippets;
|
||||||
|
|
||||||
|
|
@ -80,7 +78,7 @@ export default {
|
||||||
partId
|
partId
|
||||||
) {
|
) {
|
||||||
let path = new Path().move(from).line(to);
|
let path = new Path().move(from).line(to);
|
||||||
path.attributes.add("class", "curve-control");
|
path.attributes.add("class", "curve-control stroke-various stroke-sm");
|
||||||
path.attributes.add("id", id);
|
path.attributes.add("id", id);
|
||||||
path.attributes.add("data-path", pathId);
|
path.attributes.add("data-path", pathId);
|
||||||
path.attributes.add("data-part", partId);
|
path.attributes.add("data-part", partId);
|
||||||
|
|
@ -157,10 +155,7 @@ export default {
|
||||||
// Decorate pattern
|
// Decorate pattern
|
||||||
decoratePoints(this);
|
decoratePoints(this);
|
||||||
decoratePaths(this);
|
decoratePaths(this);
|
||||||
console.log(
|
console.log("Designer plugin: Here's the pattern object:", this.pattern);
|
||||||
"Designer theme plugin: Here's the pattern object:",
|
|
||||||
this.pattern
|
|
||||||
);
|
|
||||||
next();
|
next();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,18 @@ function pointHover(evt) {
|
||||||
var id = point.id;
|
var id = point.id;
|
||||||
var cx = point.getAttribute('x');
|
var cx = point.getAttribute('x');
|
||||||
var cy = point.getAttribute('y');
|
var cy = point.getAttribute('y');
|
||||||
console.log('Point '+id+' ( '+cx+' , '+cy+' )');
|
var name = point.getAttribute('data-point');
|
||||||
|
var part = point.getAttribute('data-part');
|
||||||
|
console.log(name+' ('+cx+', '+cy+') @ '+part);
|
||||||
var scale = 2;
|
var scale = 2;
|
||||||
cx = cx-scale*cx;
|
cx = cx-scale*cx;
|
||||||
cy = cy-scale*cy;
|
cy = cy-scale*cy;
|
||||||
point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
|
point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
|
||||||
|
pointUnhover(id);
|
||||||
|
}
|
||||||
|
function pointUnhover(id) {
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
var point = document.getElementById(evt.target.id);
|
document.getElementById(id).removeAttribute("transform", '');
|
||||||
point.removeAttribute("transform", '');
|
}, 500);
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,22 @@
|
||||||
export default `
|
export default `
|
||||||
<g id="point">
|
<g id="point">
|
||||||
<circle cy="0" cx="0" r="2" class="stroke-hint stroke-sm" />
|
<circle cy="0" cx="0" r="2" class="note stroke-sm" />
|
||||||
<circle cy="0" cx="0" r="0.8" class="fill-hint" />
|
<circle cy="0" cx="0" r="0.8" class="fill-note" />
|
||||||
</g>
|
</g>
|
||||||
<g id="point-hidden">
|
<g id="point-hidden">
|
||||||
<circle cy="0" cx="0" r="1" class="stroke-canvas stroke-xs" />
|
<circle cy="0" cx="0" r="1" class="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" />
|
<path d="M -0.5,-0.5 L 0.5,0.5 M 0.5,-0.5 L -0.5,0.5" class="canvas stroke-sm" />
|
||||||
</g>
|
</g>
|
||||||
<g id="path-move-point">
|
<g id="path-move-point">
|
||||||
<circle cx="0" cy="0" r="2" class="stroke-canvas stroke-lg" />
|
<circle cx="0" cy="0" r="2" class="interfacing stroke-lg" />
|
||||||
<circle cx="0" cy="0" r="0.8" class="fill-canvas" />
|
<circle cx="0" cy="0" r="0.8" class="fill-interfacing" />
|
||||||
</g>
|
</g>
|
||||||
<g id="path-line-point">
|
<g id="path-line-point">
|
||||||
<circle cx="0" cy="0" r="2" class="stroke-note stroke-lg" />
|
<circle cx="0" cy="0" r="2" class="note stroke-lg" />
|
||||||
<circle cx="0" cy="0" r="0.8" class="fill-note" />
|
<circle cx="0" cy="0" r="0.8" class="fill-note" />
|
||||||
</g>
|
</g>
|
||||||
<g id="path-curve-point"> <use xlink:href = "#path-line-point"/> </g>
|
<g id="path-curve-point"> <use xlink:href = "#path-line-point"/> </g>
|
||||||
<g id="path-handle-point">
|
<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="1" class="fill-various" />
|
||||||
<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>
|
</g>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default `
|
|
||||||
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;}
|
|
||||||
`;
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue