{"version":3,"file":"ext-markers.js","sources":["../../../../src/editor/extensions/ext-markers/ext-markers.js"],"sourcesContent":["/**\n * @file ext-markers.js\n *\n * @license Apache-2.0\n *\n * @copyright 2010 Will Schleter based on ext-arrows.js by Copyright(c) 2010 Alexis Deveria\n * @copyright 2021 OptimistikSAS\n *\n * This extension provides for the addition of markers to the either end\n * or the middle of a line, polyline, path, polygon.\n *\n * Markers are graphics\n *\n * to simplify the coding and make the implementation as robust as possible,\n * markers are not shared - every object has its own set of markers.\n * this relationship is maintained by a naming convention between the\n * ids of the markers and the ids of the object\n *\n * The following restrictions exist for simplicty of use and programming\n * objects and their markers to have the same color\n * marker size is fixed\n * an application specific attribute - se_type - is added to each marker element\n * to store the type of marker\n *\n * @todo\n * remove some of the restrictions above\n *\n*/\n\nexport default {\n name: 'markers',\n async init () {\n const svgEditor = this\n const { svgCanvas } = svgEditor\n const { BatchCommand, RemoveElementCommand, InsertElementCommand } = svgCanvas.history\n const { $id, addSVGElementsFromJson: addElem } = svgCanvas\n const mtypes = ['start', 'mid', 'end']\n const markerElems = ['line', 'path', 'polyline', 'polygon']\n\n // note - to add additional marker types add them below with a unique id\n // and add the associated icon(s) to marker-icons.svg\n // the geometry is normalized to a 100x100 box with the origin at lower left\n // Safari did not like negative values for low left of viewBox\n // remember that the coordinate system has +y downward\n const markerTypes = {\n nomarker: {},\n leftarrow:\n { element: 'path', attr: { d: 'M0,50 L100,90 L70,50 L100,10 Z' } },\n rightarrow:\n { element: 'path', attr: { d: 'M100,50 L0,90 L30,50 L0,10 Z' } },\n box:\n { element: 'path', attr: { d: 'M20,20 L20,80 L80,80 L80,20 Z' } },\n mcircle:\n { element: 'circle', attr: { r: 30, cx: 50, cy: 50 } }\n };\n\n // duplicate shapes to support unfilled (open) marker types with an _o suffix\n ['leftarrow', 'rightarrow', 'box', 'mcircle'].forEach((v) => {\n markerTypes[v + '_o'] = markerTypes[v]\n })\n\n /**\n * @param {Element} elem - A graphic element will have an attribute like marker-start\n * @param {\"marker-start\"|\"marker-mid\"|\"marker-end\"} attr\n * @returns {Element} The marker element that is linked to the graphic element\n */\n const getLinked = (elem, attr) => {\n const str = elem.getAttribute(attr)\n if (!str) { return null }\n const m = str.match(/\\(#(.*)\\)/)\n // \"url(#mkr_end_svg_1)\" would give m[1] = \"mkr_end_svg_1\"\n if (!m || m.length !== 2) {\n return null\n }\n return svgCanvas.getElement(m[1])\n }\n\n /**\n * Toggles context tool panel off/on.\n * @param {boolean} on\n * @returns {void}\n */\n const showPanel = (on, elem) => {\n $id('marker_panel').style.display = (on) ? 'block' : 'none'\n if (on && elem) {\n mtypes.forEach((pos) => {\n const marker = getLinked(elem, 'marker-' + pos)\n if (marker?.attributes?.se_type) {\n $id(`${pos}_marker_list_opts`).setAttribute('value', marker.attributes.se_type.value)\n } else {\n $id(`${pos}_marker_list_opts`).setAttribute('value', 'nomarker')\n }\n })\n }\n }\n\n /**\n * @param {string} id\n * @param {\"\"|\"nomarker\"|\"nomarker\"|\"leftarrow\"|\"rightarrow\"|\"textmarker\"|\"forwardslash\"|\"reverseslash\"|\"verticalslash\"|\"box\"|\"star\"|\"xmark\"|\"triangle\"|\"mcircle\"} seType\n * @returns {SVGMarkerElement}\n */\n const addMarker = (id, seType) => {\n const selElems = svgCanvas.getSelectedElements()\n let marker = svgCanvas.getElement(id)\n if (marker) { return undefined }\n if (seType === '' || seType === 'nomarker') { return undefined }\n const el = selElems[0]\n const color = el.getAttribute('stroke')\n const strokeWidth = 10\n const refX = 50\n const refY = 50\n const viewBox = '0 0 100 100'\n const markerWidth = 5\n const markerHeight = 5\n\n if (!markerTypes[seType]) {\n console.error(`unknown marker type: ${seType}`)\n return undefined\n }\n\n // create a generic marker\n marker = addElem({\n element: 'marker',\n attr: {\n id,\n markerUnits: 'strokeWidth',\n orient: 'auto',\n style: 'pointer-events:none',\n se_type: seType\n }\n })\n\n const mel = addElem(markerTypes[seType])\n const fillcolor = (seType.substr(-2) === '_o')\n ? 'none'\n : color\n\n mel.setAttribute('fill', fillcolor)\n mel.setAttribute('stroke', color)\n mel.setAttribute('stroke-width', strokeWidth)\n marker.append(mel)\n\n marker.setAttribute('viewBox', viewBox)\n marker.setAttribute('markerWidth', markerWidth)\n marker.setAttribute('markerHeight', markerHeight)\n marker.setAttribute('refX', refX)\n marker.setAttribute('refY', refY)\n svgCanvas.findDefs().append(marker)\n\n return marker\n }\n\n /**\n * @param {Element} elem\n * @returns {SVGPolylineElement}\n */\n const convertline = (elem) => {\n // this routine came from the connectors extension\n // it is needed because midpoint markers don't work with line elements\n if (elem.tagName !== 'line') { return elem }\n\n // Convert to polyline to accept mid-arrow\n const x1 = Number(elem.getAttribute('x1'))\n const x2 = Number(elem.getAttribute('x2'))\n const y1 = Number(elem.getAttribute('y1'))\n const y2 = Number(elem.getAttribute('y2'))\n const { id } = elem\n\n const midPt = (' ' + ((x1 + x2) / 2) + ',' + ((y1 + y2) / 2) + ' ')\n const pline = addElem({\n element: 'polyline',\n attr: {\n points: (x1 + ',' + y1 + midPt + x2 + ',' + y2),\n stroke: elem.getAttribute('stroke'),\n 'stroke-width': elem.getAttribute('stroke-width'),\n fill: 'none',\n opacity: elem.getAttribute('opacity') || 1\n }\n })\n mtypes.forEach((pos) => { // get any existing marker definitions\n const nam = 'marker-' + pos\n const m = elem.getAttribute(nam)\n if (m) { pline.setAttribute(nam, elem.getAttribute(nam)) }\n })\n\n const batchCmd = new BatchCommand()\n batchCmd.addSubCommand(new RemoveElementCommand(elem, elem.parentNode))\n batchCmd.addSubCommand(new InsertElementCommand(pline))\n\n elem.insertAdjacentElement('afterend', pline)\n elem.remove()\n svgCanvas.clearSelection()\n pline.id = id\n svgCanvas.addToSelection([pline])\n svgCanvas.addCommandToHistory(batchCmd)\n return pline\n }\n\n /**\n *\n * @returns {void}\n */\n const setMarker = (pos, markerType) => {\n const selElems = svgCanvas.getSelectedElements()\n if (selElems.length === 0) return\n const markerName = 'marker-' + pos\n const el = selElems[0]\n const marker = getLinked(el, markerName)\n if (marker) { marker.remove() }\n el.removeAttribute(markerName)\n let val = markerType\n if (val === '') { val = 'nomarker' }\n if (val === 'nomarker') {\n svgCanvas.call('changed', selElems)\n return\n }\n // Set marker on element\n const id = 'mkr_' + pos + '_' + el.id\n addMarker(id, val)\n svgCanvas.changeSelectedAttribute(markerName, 'url(#' + id + ')')\n if (el.tagName === 'line' && pos === 'mid') {\n convertline(el)\n }\n svgCanvas.call('changed', selElems)\n }\n\n /**\n * Called when the main system modifies an object. This routine changes\n * the associated markers to be the same color.\n * @param {Element} elem\n * @returns {void}\n */\n const colorChanged = (elem) => {\n const color = elem.getAttribute('stroke')\n\n mtypes.forEach((pos) => {\n const marker = getLinked(elem, 'marker-' + pos)\n if (!marker) { return }\n if (!marker.attributes.se_type) { return } // not created by this extension\n const ch = marker.lastElementChild\n if (!ch) { return }\n const curfill = ch.getAttribute('fill')\n const curstroke = ch.getAttribute('stroke')\n if (curfill && curfill !== 'none') { ch.setAttribute('fill', color) }\n if (curstroke && curstroke !== 'none') { ch.setAttribute('stroke', color) }\n })\n }\n\n /**\n * Called when the main system creates or modifies an object.\n * Its primary purpose is to create new markers for cloned objects.\n * @param {Element} el\n * @returns {void}\n */\n const updateReferences = (el) => {\n const selElems = svgCanvas.getSelectedElements()\n mtypes.forEach((pos) => {\n const markerName = 'marker-' + pos\n const marker = getLinked(el, markerName)\n if (!marker || !marker.attributes.se_type) { return } // not created by this extension\n const url = el.getAttribute(markerName)\n if (url) {\n const len = el.id.length\n const linkid = url.substr(-len - 1, len)\n if (el.id !== linkid) {\n const newMarkerId = 'mkr_' + pos + '_' + el.id\n addMarker(newMarkerId, marker.attributes.se_type.value)\n svgCanvas.changeSelectedAttribute(markerName, 'url(#' + newMarkerId + ')')\n svgCanvas.call('changed', selElems)\n }\n }\n })\n }\n\n return {\n name: svgEditor.i18next.t(`${name}:name`),\n // The callback should be used to load the DOM with the appropriate UI items\n callback () {\n // Add the context panel and its handler(s)\n const panelTemplate = document.createElement('template')\n // create the marker panel\n let innerHTML = '
'\n mtypes.forEach((pos) => {\n innerHTML += ``\n Object.entries(markerTypes).forEach(([marker, _mkr]) => {\n innerHTML += ``\n })\n innerHTML += ''\n })\n innerHTML += '
'\n panelTemplate.innerHTML = innerHTML\n $id('tools_top').appendChild(panelTemplate.content.cloneNode(true))\n // don't display the panels on start\n showPanel(false)\n mtypes.forEach((pos) => {\n $id(`${pos}_marker_list_opts`).addEventListener('change', (evt) => {\n setMarker(pos, evt.detail.value)\n })\n })\n },\n selectedChanged (opts) {\n // Use this to update the current selected elements\n if (opts.elems.length === 0) showPanel(false)\n opts.elems.forEach((elem) => {\n if (elem && markerElems.includes(elem.tagName)) {\n if (opts.selectedElement && !opts.multiselected) {\n showPanel(true, elem)\n } else {\n showPanel(false)\n }\n } else {\n showPanel(false)\n }\n })\n },\n elementChanged (opts) {\n const elem = opts.elems[0]\n if (elem && (\n elem.getAttribute('marker-start') ||\n elem.getAttribute('marker-mid') ||\n elem.getAttribute('marker-end')\n )) {\n colorChanged(elem)\n updateReferences(elem)\n }\n }\n }\n }\n}\n"],"names":["extMarkers","name","async","svgCanvas","this","BatchCommand","RemoveElementCommand","InsertElementCommand","history","$id","addSVGElementsFromJson","addElem","mtypes","markerElems","markerTypes","nomarker","leftarrow","element","attr","d","rightarrow","box","mcircle","r","cx","cy","forEach","v","getLinked","elem","str","getAttribute","m","match","length","getElement","showPanel","on","style","display","pos","_marker$attributes","marker","attributes","se_type","setAttribute","value","concat","addMarker","id","seType","selElems","getSelectedElements","color","console","error","markerUnits","orient","mel","fillcolor","substr","append","findDefs","setMarker","markerType","markerName","el","remove","removeAttribute","val","call","changeSelectedAttribute","tagName","x1","Number","x2","y1","y2","pline","points","stroke","fill","opacity","nam","batchCmd","addSubCommand","parentNode","insertAdjacentElement","clearSelection","addToSelection","addCommandToHistory","convertline","i18next","t","callback","panelTemplate","document","createElement","innerHTML","Object","entries","_ref","_mkr","appendChild","content","cloneNode","addEventListener","evt","detail","selectedChanged","opts","elems","includes","selectedElement","multiselected","elementChanged","ch","lastElementChild","curfill","curstroke","colorChanged","url","len","linkid","newMarkerId","updateReferences"],"mappings":"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"}