mirror of
https://github.com/antos-rde/antosdk-apps.git
synced 2024-10-05 01:26:40 +02:00
1 line
18 KiB
Plaintext
1 line
18 KiB
Plaintext
|
{"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 = svgCanva
|