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",
|
||||
"sewing patterns"
|
||||
],
|
||||
"main": "dist/module.js",
|
||||
"unpkg": "dist/theme.min.js",
|
||||
"main": "dist/node.js",
|
||||
"unpkg": "dist/browser.js",
|
||||
"browser": "dist/browser.js",
|
||||
"scripts": {
|
||||
"precommit": "npm run pretty && lint-staged",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import meta from "./package.json";
|
|||
export default {
|
||||
input: "src/index.js",
|
||||
output: {
|
||||
file: "dist/theme.min.js",
|
||||
file: "dist/browser.js",
|
||||
format: "iife",
|
||||
name: "freesewing.plugins.designer"
|
||||
},
|
||||
|
|
@ -20,15 +20,15 @@ export default {
|
|||
commonjs(),
|
||||
babel({
|
||||
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 babel from "rollup-plugin-babel";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import json from "rollup-plugin-json";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import meta from "./package.json";
|
||||
|
||||
export default {
|
||||
input: "src/index.js",
|
||||
output: {
|
||||
file: "dist/module.js",
|
||||
format: "cjs",
|
||||
banner: `/**\n * ${meta.name} | v${meta.version}\n * ${
|
||||
meta.description
|
||||
}\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
|
||||
meta.license
|
||||
}\n */`
|
||||
file: "dist/node.js",
|
||||
format: "cjs"
|
||||
},
|
||||
plugins: [
|
||||
resolve({
|
||||
|
|
@ -23,6 +19,15 @@ export default {
|
|||
babel({
|
||||
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 style from "./lib/style";
|
||||
import snippets from "./lib/snippets";
|
||||
import { version } from "../package.json";
|
||||
|
||||
export default {
|
||||
hooks: {
|
||||
preRenderSvg: function(next) {
|
||||
// Add style, script and snippets
|
||||
this.style += style;
|
||||
// Add script and snippets
|
||||
this.script += script;
|
||||
this.defs += snippets;
|
||||
|
||||
|
|
@ -80,7 +78,7 @@ export default {
|
|||
partId
|
||||
) {
|
||||
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("data-path", pathId);
|
||||
path.attributes.add("data-part", partId);
|
||||
|
|
@ -157,10 +155,7 @@ export default {
|
|||
// Decorate pattern
|
||||
decoratePoints(this);
|
||||
decoratePaths(this);
|
||||
console.log(
|
||||
"Designer theme plugin: Here's the pattern object:",
|
||||
this.pattern
|
||||
);
|
||||
console.log("Designer plugin: Here's the pattern object:", this.pattern);
|
||||
next();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@ function pointHover(evt) {
|
|||
var id = point.id;
|
||||
var cx = point.getAttribute('x');
|
||||
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;
|
||||
cx = cx-scale*cx;
|
||||
cy = cy-scale*cy;
|
||||
point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
|
||||
pointUnhover(id);
|
||||
}
|
||||
function pointUnhover(id) {
|
||||
setTimeout(function(){
|
||||
var point = document.getElementById(evt.target.id);
|
||||
point.removeAttribute("transform", '');
|
||||
}, 1000);
|
||||
document.getElementById(id).removeAttribute("transform", '');
|
||||
}, 500);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,22 @@
|
|||
export default `
|
||||
<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" />
|
||||
<circle cy="0" cx="0" r="2" class="note stroke-sm" />
|
||||
<circle cy="0" cx="0" r="0.8" class="fill-note" />
|
||||
</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" />
|
||||
<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="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" />
|
||||
<circle cx="0" cy="0" r="2" class="interfacing stroke-lg" />
|
||||
<circle cx="0" cy="0" r="0.8" class="fill-interfacing" />
|
||||
</g>
|
||||
<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" />
|
||||
</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" />
|
||||
<circle cx="0" cy="0" r="1" class="fill-various" />
|
||||
</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