CAD Placemark Extension
parent
6ae4ea4ce4
commit
f75580611b
|
@ -0,0 +1,40 @@
|
||||||
|
export default {
|
||||||
|
name: 'star',
|
||||||
|
langList: [
|
||||||
|
{id: 'nomarker', title: 'No Marker'},
|
||||||
|
{id: 'leftarrow', title: 'Left Arrow'},
|
||||||
|
{id: 'rightarrow', title: 'Right Arrow'},
|
||||||
|
{id: 'forwardslash', title: 'Forward Slash'},
|
||||||
|
{id: 'reverseslash', title: 'Reverse Slash'},
|
||||||
|
{id: 'verticalslash', title: 'Vertical Slash'},
|
||||||
|
{id: 'box', title: 'Box'},
|
||||||
|
{id: 'star', title: 'Star'},
|
||||||
|
{id: 'xmark', title: 'X'},
|
||||||
|
{id: 'triangle', title: 'Triangle'},
|
||||||
|
{id: 'mcircle', title: 'Circle'},
|
||||||
|
{id: 'leftarrow_o', title: 'Open Left Arrow'},
|
||||||
|
{id: 'rightarrow_o', title: 'Open Right Arrow'},
|
||||||
|
{id: 'box_o', title: 'Open Box'},
|
||||||
|
{id: 'star_o', title: 'Open Star'},
|
||||||
|
{id: 'triangle_o', title: 'Open Triangle'},
|
||||||
|
{id: 'mcircle_o', title: 'Open Circle'}
|
||||||
|
],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Placemark Tool'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
contextTools: [
|
||||||
|
{
|
||||||
|
title: 'Select Place marker type'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Text on separated with ; ',
|
||||||
|
label: 'Text'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Font for text',
|
||||||
|
label: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
|
@ -0,0 +1,486 @@
|
||||||
|
/**
|
||||||
|
* ext-placemark.js
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'placemark',
|
||||||
|
async init (S) {
|
||||||
|
const svgEditor = this;
|
||||||
|
const svgCanvas = svgEditor.canvas;
|
||||||
|
const addElem = svgCanvas.addSVGElementFromJson;
|
||||||
|
const {$, importLocale} = S; // {svgcontent},
|
||||||
|
let
|
||||||
|
selElems,
|
||||||
|
// editingitex = false,
|
||||||
|
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||||
|
started,
|
||||||
|
newPM;
|
||||||
|
// edg = 0,
|
||||||
|
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
|
||||||
|
// undoCommand = 'Not image',
|
||||||
|
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
|
||||||
|
const strings = await importLocale();
|
||||||
|
const markerTypes = {
|
||||||
|
nomarker: {},
|
||||||
|
forwardslash:
|
||||||
|
{element: 'path', attr: {d: 'M30,100 L70,0'}},
|
||||||
|
reverseslash:
|
||||||
|
{element: 'path', attr: {d: 'M30,0 L70,100'}},
|
||||||
|
verticalslash:
|
||||||
|
{element: 'path', attr: {d: 'M50,0 L50,100'}},
|
||||||
|
xmark:
|
||||||
|
{element: 'path', attr: {d: 'M20,80 L80,20 M80,80 L20,20'}},
|
||||||
|
leftarrow:
|
||||||
|
{element: 'path', attr: {d: 'M0,50 L100,90 L70,50 L100,10 Z'}},
|
||||||
|
rightarrow:
|
||||||
|
{element: 'path', attr: {d: 'M100,50 L0,90 L30,50 L0,10 Z'}},
|
||||||
|
box:
|
||||||
|
{element: 'path', attr: {d: 'M20,20 L20,80 L80,80 L80,20 Z'}},
|
||||||
|
star:
|
||||||
|
{element: 'path', attr: {d: 'M10,30 L90,30 L20,90 L50,10 L80,90 Z'}},
|
||||||
|
mcircle:
|
||||||
|
{element: 'circle', attr: {r: 30, cx: 50, cy: 50}},
|
||||||
|
triangle:
|
||||||
|
{element: 'path', attr: {d: 'M10,80 L50,20 L80,80 Z'}},
|
||||||
|
};
|
||||||
|
|
||||||
|
// duplicate shapes to support unfilled (open) marker types with an _o suffix
|
||||||
|
['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach((v) => {
|
||||||
|
markerTypes[v + '_o'] = markerTypes[v];
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {boolean} on
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function showPanel (on) {
|
||||||
|
$('#placemark_panel').toggle(on);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Element} elem - A graphic element will have an attribute like marker-start
|
||||||
|
* @param {"marker-start"|"marker-mid"|"marker-end"} attr
|
||||||
|
* @returns {Element} The marker element that is linked to the graphic element
|
||||||
|
*/
|
||||||
|
function getLinked (elem, attr) {
|
||||||
|
if (!elem) { return null; }
|
||||||
|
const str = elem.getAttribute(attr);
|
||||||
|
if (!str) { return null; }
|
||||||
|
const m = str.match(/\(#(.*)\)/);
|
||||||
|
if (!m || m.length !== 2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return svgCanvas.getElem(m[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {string} attr
|
||||||
|
* @param {string|Float} val
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function setAttr (attr, val) {
|
||||||
|
svgCanvas.changeSelectedAttribute(attr, val);
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string} id
|
||||||
|
* @param {""|"\\nomarker"|"nomarker"|"leftarrow"|"rightarrow"|"textmarker"|"textmarker_top"|"textmarker_bottom"|"forwardslash"|"reverseslash"|"verticalslash"|"box"|"star"|"xmark"|"triangle"|"mcircle"} val
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function addMarker (id, val) {
|
||||||
|
let marker = svgCanvas.getElem(id);
|
||||||
|
if (marker) { return undefined; }
|
||||||
|
//console.log(id);
|
||||||
|
if (val === '' || val === 'nomarker') { return undefined; }
|
||||||
|
const color = svgCanvas.getColor('stroke');
|
||||||
|
// NOTE: Safari didn't like a negative value in viewBox
|
||||||
|
// so we use a standardized 0 0 100 100
|
||||||
|
// with 50 50 being mapped to the marker position
|
||||||
|
const scale = 2;//parseFloat($('#marker_size').val());
|
||||||
|
const strokeWidth = 10;
|
||||||
|
let refX = 50;
|
||||||
|
let refY = 50;
|
||||||
|
let viewBox = '0 0 100 100';
|
||||||
|
let markerWidth = 5*scale;
|
||||||
|
let markerHeight = 5*scale;
|
||||||
|
let seType = val;
|
||||||
|
|
||||||
|
if (!markerTypes[seType]) { return undefined; } // an unknown type!
|
||||||
|
//positional markers(arrows) at end of line
|
||||||
|
if (seType.includes('left'))refX=0;
|
||||||
|
if (seType.includes('right'))refX=100;
|
||||||
|
|
||||||
|
// create a generic marker
|
||||||
|
marker = addElem({
|
||||||
|
element: 'marker',
|
||||||
|
attr: {
|
||||||
|
id,
|
||||||
|
markerUnits: 'strokeWidth',
|
||||||
|
orient: 'auto',
|
||||||
|
style: 'pointer-events:none',
|
||||||
|
class: seType
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mel = addElem(markerTypes[seType]);
|
||||||
|
const fillcolor = (seType.substr(-2) === '_o')
|
||||||
|
? 'none'
|
||||||
|
: color;
|
||||||
|
|
||||||
|
mel.setAttribute('fill', fillcolor);
|
||||||
|
mel.setAttribute('stroke', color);
|
||||||
|
mel.setAttribute('stroke-width', strokeWidth);
|
||||||
|
marker.append(mel);
|
||||||
|
|
||||||
|
marker.setAttribute('viewBox', viewBox);
|
||||||
|
marker.setAttribute('markerWidth', markerWidth);
|
||||||
|
marker.setAttribute('markerHeight', markerHeight);
|
||||||
|
marker.setAttribute('refX', refX);
|
||||||
|
marker.setAttribute('refY', refY);
|
||||||
|
svgCanvas.findDefs().append(marker);
|
||||||
|
|
||||||
|
return marker;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function setMarker (el, val) {
|
||||||
|
const markerName = 'marker-start';
|
||||||
|
const marker = getLinked(el, markerName);
|
||||||
|
if (marker) { $(marker).remove(); }
|
||||||
|
el.removeAttribute(markerName);
|
||||||
|
if (val === 'nomarker') {
|
||||||
|
svgCanvas.call('changed', [el]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Set marker on element
|
||||||
|
const id = 'placemark_marker_' + el.id;
|
||||||
|
addMarker(id, val);
|
||||||
|
el.setAttribute(markerName, 'url(#' + id + ')');
|
||||||
|
svgCanvas.call('changed', [el]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the main system modifies an object. This routine changes
|
||||||
|
* the associated markers to be the same color.
|
||||||
|
* @param {Element} elem
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function colorChanged (elem) {
|
||||||
|
const color = elem.getAttribute('stroke');
|
||||||
|
const marker = getLinked(elem, 'marker-start');
|
||||||
|
if (!marker) { return; }
|
||||||
|
if (!marker.attributes.class) { return; } // not created by this extension
|
||||||
|
const ch = marker.lastElementChild;
|
||||||
|
if (!ch) { return; }
|
||||||
|
const curfill = ch.getAttribute('fill');
|
||||||
|
const curstroke = ch.getAttribute('stroke');
|
||||||
|
if (curfill && curfill !== 'none') { ch.setAttribute('fill', color); }
|
||||||
|
if (curstroke && curstroke !== 'none') { ch.setAttribute('stroke', color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the main system creates or modifies an object.
|
||||||
|
* Its primary purpose is to create new markers for cloned objects.
|
||||||
|
* @param {Element} el
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function updateReferences (el) {
|
||||||
|
const id = placemark_marker_ + el.id;
|
||||||
|
const markerName = 'marker-start';
|
||||||
|
const marker = getLinked(el, markerName);
|
||||||
|
if (!marker || !marker.attributes.class) { return; } // not created by this extension
|
||||||
|
const url = el.getAttribute(markerName);
|
||||||
|
if (url) {
|
||||||
|
const len = el.id.length;
|
||||||
|
const linkid = url.substr(-len - 1, len);
|
||||||
|
if (el.id !== linkid) {
|
||||||
|
const val = $('#placemark_marker').attr('value') || 'leftarrow';
|
||||||
|
addMarker(id, val);
|
||||||
|
svgCanvas.changeSelectedAttribute(markerName, 'url(#' + id + ')');
|
||||||
|
if (el.tagName === 'line' && pos === 'mid') { el = convertline(el); }
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Event} ev
|
||||||
|
* @returns {Promise} Resolves to `undefined`
|
||||||
|
*/
|
||||||
|
async function setArrowFromButton (ev) {
|
||||||
|
const parts = this.id.split('_');
|
||||||
|
let val = parts[2];
|
||||||
|
if (parts[3]) { val += '_' + parts[3]; }
|
||||||
|
$("#placemark_marker").attr("value",val);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {"nomarker"|"leftarrow"|"rightarrow"|"textmarker"|"forwardslash"|"reverseslash"|"verticalslash"|"box"|"star"|"xmark"|"triangle"|"mcircle"} id
|
||||||
|
* @returns {undefined}
|
||||||
|
*/
|
||||||
|
function getTitle (id) {
|
||||||
|
const {langList} = strings;
|
||||||
|
const item = langList.find((itm) => {
|
||||||
|
return itm.id === id;
|
||||||
|
});
|
||||||
|
return item ? item.title : id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build the toolbar button array from the marker definitions.
|
||||||
|
* @returns {module:SVGEditor.Button[]}
|
||||||
|
*/
|
||||||
|
function addMarkerButtons (buttons) {
|
||||||
|
Object.keys(markerTypes).forEach(function (id) {
|
||||||
|
const title = getTitle(String(id));
|
||||||
|
buttons.push({
|
||||||
|
id: 'placemark_marker_' + id,
|
||||||
|
svgicon: id,
|
||||||
|
icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
|
||||||
|
title,
|
||||||
|
type: 'context',
|
||||||
|
events: {click: setArrowFromButton},
|
||||||
|
panel: 'placemark_panel',
|
||||||
|
list: 'placemark_marker',
|
||||||
|
isDefault: id=='leftarrow'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
|
id: 'tool_placemark',
|
||||||
|
icon: svgEditor.curConfig.extIconsPath + 'placemark.png',
|
||||||
|
type: 'mode',
|
||||||
|
position: 12,
|
||||||
|
events: {
|
||||||
|
click () {
|
||||||
|
showPanel(true);
|
||||||
|
svgCanvas.setMode('placemark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
const contextTools = [
|
||||||
|
{
|
||||||
|
type: 'button-select',
|
||||||
|
panel: 'placemark_panel',
|
||||||
|
id: 'placemark_marker',
|
||||||
|
colnum: 3,
|
||||||
|
events: {change: setArrowFromButton}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
panel: 'placemark_panel',
|
||||||
|
id: 'placemarkText',
|
||||||
|
size: 20,
|
||||||
|
defval: '',
|
||||||
|
events: {
|
||||||
|
change () {
|
||||||
|
//setAttr('text', this.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
type: 'input',
|
||||||
|
panel: 'placemark_panel',
|
||||||
|
id: 'placemarkFont',
|
||||||
|
size: 10,
|
||||||
|
defval: 'Arial 10',
|
||||||
|
events: {
|
||||||
|
change () {
|
||||||
|
//setAttr('untext', this.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: strings.name,
|
||||||
|
svgicons: svgEditor.curConfig.extIconsPath + 'placemark-icons.xml',
|
||||||
|
buttons: addMarkerButtons(strings.buttons.map((button, i)=> Object.assign(buttons[i], button))),
|
||||||
|
context_tools: strings.contextTools.map((contextTool, i) => Object.assign(contextTools[i], contextTool)),
|
||||||
|
callback () {
|
||||||
|
$('#placemark_panel').hide();
|
||||||
|
// const endChanges = function(){};
|
||||||
|
},
|
||||||
|
mouseDown (opts) {
|
||||||
|
const rgb = svgCanvas.getColor('fill');
|
||||||
|
// const ccRgbEl = rgb.substring(1, rgb.length);
|
||||||
|
const sRgb = svgCanvas.getColor('stroke');
|
||||||
|
// const ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||||
|
const sWidth = svgCanvas.getStrokeWidth();
|
||||||
|
|
||||||
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
|
started = true;
|
||||||
|
const id = svgCanvas.getNextId();
|
||||||
|
const items = $('#placemarkText').val().split(";");
|
||||||
|
let font = $('#placemarkFont').val().split(" ");
|
||||||
|
const fontSize = parseInt(font.pop());
|
||||||
|
font = font.join(" ")
|
||||||
|
let x0 = opts.start_x+10, y0 = opts.start_y+10,maxlen=0;
|
||||||
|
let children = [{
|
||||||
|
element:'line',
|
||||||
|
attr:{
|
||||||
|
id: id+'_pline_0',
|
||||||
|
fill:"none",
|
||||||
|
stroke: sRgb,
|
||||||
|
"stroke-width": sWidth,
|
||||||
|
"stroke-linecap":"round",
|
||||||
|
x1: opts.start_x,
|
||||||
|
y1: opts.start_y,
|
||||||
|
x2: x0,
|
||||||
|
y2: y0,
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
items.forEach((i,n)=>{
|
||||||
|
maxlen=Math.max(maxlen,i.length)
|
||||||
|
children.push({
|
||||||
|
element:'line',
|
||||||
|
attr:{
|
||||||
|
id: id+'_tline_'+n,
|
||||||
|
fill:"none",
|
||||||
|
stroke: sRgb,
|
||||||
|
"stroke-width": sWidth,
|
||||||
|
"stroke-linecap":"round",
|
||||||
|
x1: x0,
|
||||||
|
y1: y0+(fontSize+6)*n,
|
||||||
|
x2: x0+i.length*fontSize*0.6+fontSize,
|
||||||
|
y2: y0+(fontSize+6)*n,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
children.push({
|
||||||
|
element:'text',
|
||||||
|
attr:{
|
||||||
|
id: id+'_txt_'+n,
|
||||||
|
fill: sRgb,
|
||||||
|
stroke: "none",
|
||||||
|
"stroke-width": 0,
|
||||||
|
x: x0+3,
|
||||||
|
y: y0-3+(fontSize+6)*n,
|
||||||
|
"font-family":font,
|
||||||
|
"font-size":fontSize,
|
||||||
|
"text-anchor":"start",
|
||||||
|
},
|
||||||
|
children:[i]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if(items.length>0)children.push({
|
||||||
|
element:'line',
|
||||||
|
attr:{
|
||||||
|
id: id+'_vline_0',
|
||||||
|
fill:"none",
|
||||||
|
stroke: sRgb,
|
||||||
|
"stroke-width": sWidth,
|
||||||
|
"stroke-linecap":"round",
|
||||||
|
x1: x0,
|
||||||
|
y1: y0,
|
||||||
|
x2: x0,
|
||||||
|
y2: y0+(fontSize+6)*(items.length-1),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
newPM = svgCanvas.addSVGElementFromJson({
|
||||||
|
element: 'g',
|
||||||
|
attr: {
|
||||||
|
id: id,
|
||||||
|
shape: 'placemark',
|
||||||
|
fontSize:fontSize,
|
||||||
|
maxlen:maxlen,
|
||||||
|
lines:items.length,
|
||||||
|
px:opts.start_x,
|
||||||
|
py:opts.start_y,
|
||||||
|
},
|
||||||
|
children: children,
|
||||||
|
});
|
||||||
|
setMarker(newPM.firstChild,$('#placemark_marker').attr('value') || 'leftarrow');
|
||||||
|
return {
|
||||||
|
started: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
mouseMove (opts) {
|
||||||
|
if (!started) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
console.log()
|
||||||
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
|
const scale = 1/svgCanvas.getZoom();
|
||||||
|
let x = opts.mouse_x*scale;
|
||||||
|
let y = opts.mouse_y*scale;
|
||||||
|
const {fontSize,maxlen,lines,px,py} = $(newPM).attr(['fontSize','maxlen','lines','px','py']);
|
||||||
|
$(newPM).children().each((n,i)=>{
|
||||||
|
const type = i.id.split("_");
|
||||||
|
const y0 = y+(fontSize+6)*type[3],x0 = x+maxlen*fontSize*0.6+fontSize;
|
||||||
|
const nx = (x<px)?x0:x;
|
||||||
|
if(type[2]=="pline"){
|
||||||
|
i.setAttribute("x2",nx);
|
||||||
|
i.setAttribute("y2",y);
|
||||||
|
|
||||||
|
}
|
||||||
|
if(type[2]=="tline"){
|
||||||
|
i.setAttribute("x1",x);
|
||||||
|
i.setAttribute("y1",y0);
|
||||||
|
i.setAttribute("x2",x0);
|
||||||
|
i.setAttribute("y2",y0);
|
||||||
|
}
|
||||||
|
if(type[2]=="vline"){
|
||||||
|
i.setAttribute("x1",nx);
|
||||||
|
i.setAttribute("y1",y);
|
||||||
|
i.setAttribute("x2",nx);
|
||||||
|
i.setAttribute("y2",y+(fontSize+6)*(lines-1));
|
||||||
|
}
|
||||||
|
if(type[2]=="txt"){
|
||||||
|
i.setAttribute("x",x+fontSize/2);
|
||||||
|
i.setAttribute("y",y0-3);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
started: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
mouseUp () {
|
||||||
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
|
/*const attrs = $(newFO).attr(['r']);
|
||||||
|
// svgCanvas.addToSelection([newFO], true);*/
|
||||||
|
return {
|
||||||
|
keep: true,
|
||||||
|
element: newPM
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
selectedChanged (opts) {
|
||||||
|
// Use this to update the current selected elements
|
||||||
|
selElems = opts.elems;
|
||||||
|
|
||||||
|
let i = selElems.length;
|
||||||
|
while (i--) {
|
||||||
|
const elem = selElems[i];
|
||||||
|
if (elem && elem.getAttribute('shape') === 'placemark') {
|
||||||
|
if (opts.selectedElement && !opts.multiselected) {
|
||||||
|
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
|
||||||
|
$('#starNumPoints').val(elem.getAttribute('point'));
|
||||||
|
$('#radialShift').val(elem.getAttribute('radialshift'));
|
||||||
|
showPanel(true);
|
||||||
|
} else {
|
||||||
|
showPanel(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showPanel(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
elementChanged (opts) {
|
||||||
|
// const elem = opts.elems[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,138 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
|
||||||
|
<g id="nomarker">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-50,0l100,0"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="leftarrow">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-50,0l100,40l-30,-40l30,-40z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="rightarrow">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m50,0l-100,40l30,-40l-30,-40z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="leftarrow_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-50,0l100,40l-30,-40l30,-40z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="rightarrow_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m50,0l-100,40l30,-40l-30,-40z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="forwardslash">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-20,50l40,-100"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="reverseslash">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-20,-50l40,100"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="verticalslash">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m0,-50l0,100"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="mcircle">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle stroke-width="10" stroke="#ff7f00" fill="#ff7f00" cy="0" cx="0" r="30"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="mcircle_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle stroke-width="10" stroke="#ff7f00" fill="none" cy="0" cx="0" r="30"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="xmark">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,30l60,-60m0,60l-60,-60"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="box">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,-30l0,60l60,0l0,-60z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="star">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="box_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="star_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="triangle_o">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="none" d="M-30,30 L0,-30 L30,30 Z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="triangle">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="M-30,30 L0,-30 L30,30 Z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="textmarker">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="120" y="40" x="0" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="textmarker_top">
|
||||||
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="4" stroke="#ff7f00" fill="none" d="M 0 60 h 100 z M 30 30 h 40 v 20 h -40 z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="textmarker_bottom">
|
||||||
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-width="4" stroke="#ff7f00" fill="none" d="M 0 30 h 100 z M 30 40 h 40 v 20 h -40 z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="tool_placemark">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 110 110">
|
||||||
|
<line fill="none" id="svg_4" marker-start="url(#se_marker_start_svg_4)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" x1="0" x2="42.58373" y1="0" y2="56.42415"/>
|
||||||
|
<line fill="none" id="svg_5" stroke="#000000" stroke-linecap="round" stroke-width="5" x1="99.99999" x2="42.58373" y1="56.42415" y2="56.42415"/>
|
||||||
|
<rect fill="none" height="26.47059" id="svg_2" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" width="55.02392" x="44.01914" y="16.71827"/>
|
||||||
|
<rect fill="none" height="32.73994" id="svg_3" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" width="55.98086" x="44.01914" y="67.56966"/>
|
||||||
|
<defs>
|
||||||
|
<marker class="leftarrow" id="se_marker_start_svg_4" markerHeight="5" markerUnits="strokeWidth" markerWidth="5" orient="auto" refX="0" refY="50" viewBox="0 0 100 100">
|
||||||
|
<path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" id="svg_1" stroke="#000000" stroke-width="10"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="mkr_markers_off">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<line y2="0" x2="50" y1="0" x1="-50" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="mkr_markers_dimension">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<line y2="0" x2="40" y1="0" x1="20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||||
|
<line y2="0" x2="-40" y1="0" x1="-20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||||
|
<text text-anchor="middle" font-family="serif" font-size="80" y="20" x="0" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||||
|
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M-50,0 L-30,-15 L-30,15 Z"/>
|
||||||
|
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M50,0 L30,-15 L30,15 Z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="mkr_markers_label">
|
||||||
|
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<line y2="0" x2="40" y1="0" x1="-20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||||
|
<text text-anchor="middle" font-family="serif" font-size="80" y="20" x="-40" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||||
|
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M50,0 L30,-15 L30,15 Z"/>
|
||||||
|
</svg>
|
||||||
|
</g>
|
||||||
|
<g id="svg_eof"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in New Issue