Import native files into diagram in Vue Diagram component
17 Mar 202323 minutes to read
You can import SVG files into the diagram and the symbol palette, and also you can import SVG files during runtime. In the Nativenode, add the SVG template and bind it into the nodes.
Step1
Binding the SVG content to the nodes have been discussed in Nativenode.
Step2
To load the SVG files dynamically inside the symbol palette, refer to the following code snippet.
<template>
<div id="app">
<ejs-symbolpalette ref="paletteObj"> </ejs-symbolpalette>
</div>
</template>
//uploading the svg files dynmically
let shape;
//Load the native content into the nodes;
let shapeContent;
shape = { id: 'newshape' + id.toString(), shape: { type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Tablet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,35 L28,35 C28.5522847,35 29,34.5522847 29,34 L29,4 C29,3.44771525 28.5522847,3 28,3 L8,3 C7.44771525,3 7,3.44771525 7,4 L7,34 C7,34.5522847 7.44771525,35 8,35 Z" id="Fill-5" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6" transform="translate(18.000000, 19.000000) rotate(-90.000000) translate(-18.000000, -19.000000) "/><path d="M29.5,21 C30.3284271,21 31,20.3284271 31,19.5 C31,18.6715729 30.3284271,18 29.5,18 C28.6715729,18 28,18.6715729 28,19.5 C28,20.3284271 28.6715729,21 29.5,21 Z" id="Oval-2" fill="#FFFFFF" transform="translate(29.500000, 19.500000) rotate(-90.000000) translate(-29.500000, -19.500000) "/></g> } }'
//Creating Instance for the palette
let paletteInstance = this.$refs.paletteObj.ej2Instances;
//Adding the native content in to the symbol palette
paletteInstance.addPaletteItem('symbolPalette', shape);Refer to the following sample for loading SVG files into the palette and uploading the SVG files dynamically.
<template>
<div id="app">
<ejs-symbolpalette ref="paletteObj" id="symbolpalette" :expandMode='expandMode' :palettes='palettes' :width='palettewidth' :height='paletteheight' :symbolHeight='symbolHeight'
:symbolWidth='symbolWidth'></ejs-symbolpalette>
<div id="dropArea">
<ejs-button id="browse" class="e-outline" :isPrimary="true" v-on:click.native="btnClick">IMPORT SVG FILES</ejs-button>
<ejs-uploader ref='uploadObj' id='uploadFiles' name="UploadFiles" :asyncSettings='path'
:dropArea='dropElement' :success='onUploadSuccess' :removing='onFileRemove'>
</ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,
Diagram,
NodeModel,
UndoRedo,
ConnectorModel,
Node,
Connector,
SymbolPalette,SymbolPalettePlugin,
SymbolInfo,
ShapeModel} from '@syncfusion/ej2-vue-diagrams';
import { UploaderPlugin } from "@syncfusion/ej2-vue-inputs";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { RemovingEventArgs, Uploader } from "@syncfusion/ej2-inputs";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
Vue.use(DiagramPlugin);
Vue.use(UploaderPlugin);
Vue.use(ButtonPlugin);
Vue.use(SymbolPalettePlugin);
function getNativeContent(content) {
let attr = { id: 'svgdiv' };
let div = createElement('div', attr);
document.body.appendChild(div);
div.innerHTML = content;
let svgContent = div.getElementsByTagName('svg')[0].outerHTML;
div.parentElement.removeChild(div);
return svgContent;
}
let paletteInstance;
let uploadObjInstance;
let svgshapes = [{
id: 'node2', style: { fill: 'none' },
annotations: [{ content: 'Start \n Text Editing' }],
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Server" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M6,11 L30,11 C31.1045695,11 32,10.1045695 32,9 L32,5 C32,3.8954305 31.1045695,3 30,3 L6,3 C4.8954305,3 4,3.8954305 4,5 L4,9 C4,10.1045695 4.8954305,11 6,11 Z" id="Stroke-61" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6"/> <path d="M6,19 L30,19 C31.1045695,19 32,18.1045695 32,17 L32,13 C32,11.8954305 31.1045695,11 30,11 L6,11 C4.8954305,11 4,11.8954305 4,13 L4,17 C4,18.1045695 4.8954305,19 6,19 Z" id="Stroke-61-Copy" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6"/> <path d="M6,27 L30,27 C31.1045695,27 32,26.1045695 32,25 L32,21 C32,19.8954305 31.1045695,19 30,19 L6,19 C4.8954305,19 4,19.8954305 4,21 L4,25 C4,26.1045695 4.8954305,27 6,27 Z" id="Stroke-61-Copy-2" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6"/> <path d="M18,28 L18,33" id="Stroke-62" stroke="#5C90DF" stroke-width="2"/> <path d="M5,33 L31,33" id="Stroke-64" stroke="#5C90DF" stroke-width="2" stroke-linecap="round"/> <path d="M23,7 C23,7.552 22.552,8 22,8 C21.4473333,8 21,7.552 21,7 C21,6.448 21.4473333,6 22,6 C22.552,6 23,6.448 23,7" id="Fill-97" fill="#5C90DF" opacity="0.4"/> <path d="M23,15 C23,15.552 22.552,16 22,16 C21.4473333,16 21,15.552 21,15 C21,14.448 21.4473333,14 22,14 C22.552,14 23,14.448 23,15" id="Fill-97-Copy-3" fill="#5C90DF" opacity="0.4"/> <path d="M23,23 C23,23.552 22.552,24 22,24 C21.4473333,24 21,23.552 21,23 C21,22.448 21.4473333,22 22,22 C22.552,22 23,22.448 23,23" id="Fill-97-Copy-6" fill="#5C90DF" opacity="0.4"/> <path d="M26,7 C26,7.552 25.552,8 25,8 C24.4473333,8 24,7.552 24,7 C24,6.448 24.4473333,6 25,6 C25.552,6 26,6.448 26,7" id="Fill-97-Copy" fill="#5C90DF" opacity="0.7"/> <path d="M26,15 C26,15.552 25.552,16 25,16 C24.4473333,16 24,15.552 24,15 C24,14.448 24.4473333,14 25,14 C25.552,14 26,14.448 26,15" id="Fill-97-Copy-4" fill="#5C90DF" opacity="0.7"/> <path d="M26,23 C26,23.552 25.552,24 25,24 C24.4473333,24 24,23.552 24,23 C24,22.448 24.4473333,22 25,22 C25.552,22 26,22.448 26,23" id="Fill-97-Copy-7" fill="#5C90DF" opacity="0.7"/> <path d="M29,7 C29,7.552 28.552,8 28,8 C27.4473333,8 27,7.552 27,7 C27,6.448 27.4473333,6 28,6 C28.552,6 29,6.448 29,7" id="Fill-97-Copy-2" fill="#5C90DF"/> <path d="M29,15 C29,15.552 28.552,16 28,16 C27.4473333,16 27,15.552 27,15 C27,14.448 27.4473333,14 28,14 C28.552,14 29,14.448 29,15" id="Fill-97-Copy-5" fill="#5C90DF"/> <path d="M29,23 C29,23.552 28.552,24 28,24 C27.4473333,24 27,23.552 27,23 C27,22.448 27.4473333,22 28,22 C28.552,22 29,22.448 29,23" id="Fill-97-Copy-8" fill="#5C90DF"/> <path d="M7,7 L18,7" id="Path-9" stroke="#FFFFFF" stroke-width="2"/> <path d="M7,15 L18,15" id="Path-9-Copy" stroke="#FFFFFF" stroke-width="2"/> <path d="M7,23 L18,23" id="Path-9-Copy-2" stroke="#FFFFFF" stroke-width="2"/></g>'
}
},
{
id: 'syncfusion', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Laptop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M4.23333333,23.0666667 L31.7666667,23.0666667 C31.8218951,23.0666667 31.8666667,23.0218951 31.8666667,22.9666667 L31.8666667,6.1 C31.8666667,6.04477153 31.8218951,6 31.7666667,6 L4.23333333,6 C4.17810486,6 4.13333333,6.04477153 4.13333333,6.1 L4.13333333,22.9666667 C4.13333333,23.0218951 4.17810486,23.0666667 4.23333333,23.0666667 Z" id="Fill-60" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6"/> <path d="M4,27.3333333 L32,27.3333333 C33.1045695,27.3333333 34,26.4379028 34,25.3333333 L34,23.1666667 C34,23.1114382 33.9552285,23.0666667 33.9,23.0666667 L2.1,23.0666667 C2.04477153,23.0666667 2,23.1114382 2,23.1666667 L2,25.3333333 C2,26.4379028 2.8954305,27.3333333 4,27.3333333 Z" id="Fill-60-Copy" stroke="#5C90DF" stroke-width="2" fill="#C6D9F6"/> <path d="M14.4190267,25.2 L21.5809733,25.2 C21.9596713,25.2 22.2666667,24.8930046 22.2666667,24.5143066 L22.2666667,23.9286133 C22.2666667,23.8733848 22.2218951,23.8286133 22.1666667,23.8286133 L13.8333333,23.8286133 C13.7781049,23.8286133 13.7333333,23.8733848 13.7333333,23.9286133 L13.7333333,24.5143066 C13.7333333,24.8930046 14.0403287,25.2 14.4190267,25.2 Z" id="Fill-60-Copy" fill="#5C90DF"/></g>'
}
},
{
id: 'network', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Wireless-Modem" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M6.01,24 L10.99,24 C10.9955228,24 11,23.9955228 11,23.99 L11,20 L6,20 L6,23.99 C6,23.9955228 6.00447715,24 6.01,24 Z" id="Stroke-84" stroke="#5C90DF" stroke-width="2"/> <path d="M25.01,24 L29.99,24 C29.9955228,24 30,23.9955228 30,23.99 L30,20 L25,20 L25,23.99 C25,23.9955228 25.0044772,24 25.01,24 Z" id="Stroke-84-Copy" stroke="#5C90DF" stroke-width="2"/> <polygon id="Fill-81" fill="#C6D9F6" points="3 22 33 22 33 9 3 9"/> <path d="M2.1,22 L33.9,22 C33.9552285,22 34,21.9552285 34,21.9 L34,10.1 C34,10.0447715 33.9552285,10 33.9,10 L2.1,10 C2.04477153,10 2,10.0447715 2,10.1 L2,21.9 C2,21.9552285 2.04477153,22 2.1,22 Z" id="Stroke-82" stroke="#5C90DF" stroke-width="2"/> <path d="M25,16 C25,16.552 24.552,17 24,17 C23.4473333,17 23,16.552 23,16 C23,15.448 23.4473333,15 24,15 C24.552,15 25,15.448 25,16" id="Fill-97" fill="#5C90DF" opacity="0.4"/> <path d="M7,16 C7,16.552 6.552,17 6,17 C5.44733333,17 5,16.552 5,16 C5,15.448 5.44733333,15 6,15 C6.552,15 7,15.448 7,16" id="Fill-97-Copy-3" fill="#5C90DF"/> <path d="M28,16 C28,16.552 27.552,17 27,17 C26.4473333,17 26,16.552 26,16 C26,15.448 26.4473333,15 27,15 C27.552,15 28,15.448 28,16" id="Fill-97-Copy" fill="#5C90DF" opacity="0.7"/> <path d="M31,16 C31,16.552 30.552,17 30,17 C29.4473333,17 29,16.552 29,16 C29,15.448 29.4473333,15 30,15 C30.552,15 31,15.448 31,16" id="Fill-97-Copy-2" fill="#5C90DF"/> <path d="M9,16 L20,16" id="Path-9" stroke="#FFFFFF" stroke-width="2"/> <path d="M9,9 L9,4" id="Path-15" stroke="#5C90DF" stroke-width="2" stroke-linecap="round"/> <path d="M27,9 L27,4" id="Path-15-Copy" stroke="#5C90DF" stroke-width="2" stroke-linecap="round"/></g>'
}
},
{
id: 'remotecontroller', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Remote-Controller" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M16,13 L33,13 C34.1045695,13 35,13.8954305 35,15 L35,47 C35,48.1045695 34.1045695,49 33,49 L16,49 C14.8954305,49 14,48.1045695 14,47 L14,15 C14,13.8954305 14.8954305,13 16,13 Z M22.318788,9.04853283 C21.9136553,9.42388058 21.2809508,9.39973509 20.9056031,8.99460237 C20.5302553,8.58946966 20.5544008,7.95676524 20.9595335,7.58141749 C21.980632,6.63538923 23.1341286,6.07050294 24.3998438,5.90911287 C26.331275,5.66283803 28.1728069,6.23074486 29.6184833,7.58522642 C30.0215124,7.96283201 30.0421222,8.59566147 29.6645166,8.99869058 C29.286911,9.40171968 28.6540815,9.42232951 28.2510524,9.04472391 C27.2480078,8.10495237 26.0027303,7.72092342 24.6528136,7.89304993 C23.8141374,7.99998869 23.0428553,8.37769824 22.318788,9.04853283 Z M18.8057262,6.28094293 C18.4617358,6.71301827 17.8326103,6.78442526 17.400535,6.44043493 C16.9684596,6.09644459 16.8970526,5.46731906 17.241043,5.03524373 C18.7715437,3.11283038 20.819994,1.92798524 23.3413903,1.49930095 C27.108313,0.858854003 30.5224848,2.07385781 33.1555518,4.9876284 C33.5258394,5.39739122 33.4938384,6.029747 33.0840755,6.40003455 C32.6743127,6.77032211 32.0419569,6.73832108 31.6716694,6.32855826 C29.4931668,3.91781189 26.7630734,2.94625156 23.676617,3.47100658 C21.6342288,3.81825058 20.0255997,4.74869848 18.8057262,6.28094293 Z" id="Combined-Shape" fill="#5C90DF" fill-rule="nonzero"/> <path d="M16,15 L33,15 L33,47 L16,47 L16,15 Z M21.5,36 C22.3284271,36 23,35.3284271 23,34.5 C23,33.6715729 22.3284271,33 21.5,33 C20.6715729,33 20,33.6715729 20,34.5 C20,35.3284271 20.6715729,36 21.5,36 Z M27.5,36 C28.3284271,36 29,35.3284271 29,34.5 C29,33.6715729 28.3284271,33 27.5,33 C26.6715729,33 26,33.6715729 26,34.5 C26,35.3284271 26.6715729,36 27.5,36 Z M21.5,43 C22.3284271,43 23,42.3284271 23,41.5 C23,40.6715729 22.3284271,40 21.5,40 C20.6715729,40 20,40.6715729 20,41.5 C20,42.3284271 20.6715729,43 21.5,43 Z M27.5,43 C28.3284271,43 29,42.3284271 29,41.5 C29,40.6715729 28.3284271,40 27.5,40 C26.6715729,40 26,40.6715729 26,41.5 C26,42.3284271 26.6715729,43 27.5,43 Z M24.5,29 C27.5375661,29 30,26.5375661 30,23.5 C30,20.4624339 27.5375661,18 24.5,18 C21.4624339,18 19,20.4624339 19,23.5 C19,26.5375661 21.4624339,29 24.5,29 Z M24.5,27 C22.5670034,27 21,25.4329966 21,23.5 C21,21.5670034 22.5670034,20 24.5,20 C26.4329966,20 28,21.5670034 28,23.5 C28,25.4329966 26.4329966,27 24.5,27 Z M24.5,25 C25.3284271,25 26,24.3284271 26,23.5 C26,22.6715729 25.3284271,22 24.5,22 C23.6715729,22 23,22.6715729 23,23.5 C23,24.3284271 23.6715729,25 24.5,25 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.65"/></g>'
}
},
{
id: 'analogio', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Analog-IO" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-5" transform="translate(5.000000, 1.000000)" fill="#5C90DF" fill-rule="nonzero"> <rect id="Rectangle" x="0" y="0" width="40" height="48" rx="2"/> </g> <path d="M37.875,43.625 L37.875,45.0625 L35,45.0625 L35,43.625 L33.5625,43.625 L33.5625,40.75 L39.3125,40.75 L39.3125,43.625 L37.875,43.625 Z M30.6875,43.625 L30.6875,45.0625 L27.8125,45.0625 L27.8125,43.625 L26.375,43.625 L26.375,40.75 L32.125,40.75 L32.125,43.625 L30.6875,43.625 Z M16.3125,43.625 L16.3125,45.0625 L13.4375,45.0625 L13.4375,43.625 L12,43.625 L12,40.75 L17.75,40.75 L17.75,43.625 L16.3125,43.625 Z M23.5,43.625 L23.5,45.0625 L20.625,45.0625 L20.625,43.625 L19.1875,43.625 L19.1875,40.75 L24.9375,40.75 L24.9375,43.625 L23.5,43.625 Z M20.5519779,20.8010161 L19.2894463,19.9910693 C21.3482942,16.7817717 23.8315347,16.2736347 26.2346733,18.6830634 C27.8849449,20.3376546 29.1547317,20.0007128 30.5921132,17.3803418 L31.9072464,18.1017465 C30.02634,21.5306709 27.5987739,22.1748329 25.1726277,19.7423364 C23.4993485,18.0646774 22.1272967,18.3454356 20.5519779,20.8010161 Z" id="Combined-Shape" fill="#FFFFFF"/> <path d="M43,37 L7,37 L7,3 L43,3 L43,37 Z M43,39 L43,47 L7,47 L7,39 L43,39 Z M16.5,13 C16.2238576,13 16,13.2238576 16,13.5 L16,24.5 C16,24.7761424 16.2238576,25 16.5,25 L34.5,25 C34.7761424,25 35,24.7761424 35,24.5 L35,13.5 C35,13.2238576 34.7761424,13 34.5,13 L16.5,13 Z M38.5,8 C39.3284271,8 40,7.32842712 40,6.5 C40,5.67157288 39.3284271,5 38.5,5 C37.6715729,5 37,5.67157288 37,6.5 C37,7.32842712 37.6715729,8 38.5,8 Z M11.5,8 C12.3284271,8 13,7.32842712 13,6.5 C13,5.67157288 12.3284271,5 11.5,5 C10.6715729,5 10,5.67157288 10,6.5 C10,7.32842712 10.6715729,8 11.5,8 Z M11.5,34 C12.3284271,34 13,33.3284271 13,32.5 C13,31.6715729 12.3284271,31 11.5,31 C10.6715729,31 10,31.6715729 10,32.5 C10,33.3284271 10.6715729,34 11.5,34 Z M38.5,34 C39.3284271,34 40,33.3284271 40,32.5 C40,31.6715729 39.3284271,31 38.5,31 C37.6715729,31 37,31.6715729 37,32.5 C37,33.3284271 37.6715729,34 38.5,34 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.65"/></g>'
}
},
{
id: 'Sensor1', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Sensor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M25,32.0982549 C21.1340068,32.0982549 18,28.9642482 18,25.0982549 C18,21.2322617 21.1340068,18.0982549 25,18.0982549 C28.8659932,18.0982549 32,21.2322617 32,25.0982549 C32,28.9642482 28.8659932,32.0982549 25,32.0982549 Z M14.6091201,15.7156893 C14.9793682,15.3058909 15.6117209,15.273829 16.0215193,15.6440772 C16.4313178,16.0143254 16.4633796,16.646678 16.0931314,17.0564765 C14.1138639,19.2471713 13,22.0846194 13,25.0982549 C13,28.1352128 14.131278,30.9929705 16.1382115,33.1896514 C16.5107285,33.5973885 16.4821771,34.2299094 16.0744401,34.6024264 C15.666703,34.9749435 15.0341821,34.946392 14.6616651,34.538655 C12.3212022,31.9769109 11,28.6393796 11,25.0982549 C11,21.5843481 12.3008791,18.2704987 14.6091201,15.7156893 Z M10.5120899,11.31051 C10.8928857,10.9104938 11.525859,10.8949127 11.9258752,11.2757085 C12.3258913,11.6565044 12.3414725,12.2894776 11.9606766,12.6894938 C8.79557785,16.0143479 7,20.4139647 7,25.0982549 C7,29.7292172 8.75468072,34.0826524 11.8555952,37.3956927 C12.2329975,37.7989122 12.2120686,38.4317312 11.8088491,38.8091335 C11.4056296,39.1865358 10.7728106,39.1656069 10.3954083,38.7623874 C6.95099947,35.0823551 5,30.2418449 5,25.0982549 C5,19.8953983 6.99644701,15.0036015 10.5120899,11.31051 Z M35.3908863,34.480819 C35.0206381,34.8906174 34.3882854,34.9226792 33.978487,34.552431 C33.5686886,34.1821829 33.5366268,33.5498302 33.9068749,33.1400318 C35.8861425,30.949337 37.0000063,28.1118888 37.0000063,25.0982533 C37.0000063,22.0612954 35.8687283,19.2035377 33.8617949,17.0068568 C33.4892778,16.5991198 33.5178292,15.9665988 33.9255663,15.5940818 C34.3333033,15.2215647 34.9658242,15.2501162 35.3383413,15.6578532 C37.6788041,18.2195973 39.0000063,21.5571287 39.0000063,25.0982533 C39.0000063,28.6121601 37.6991272,31.9260095 35.3908863,34.480819 Z M39.487912,38.8860014 C39.1071162,39.2860176 38.4741429,39.3015987 38.0741267,38.9208029 C37.6741106,38.540007 37.6585294,37.9070337 38.0393253,37.5070176 C41.2044241,34.1821635 43.0000019,29.7825467 43.0000019,25.0982565 C43.0000019,20.4672942 41.2453212,16.113859 38.1444067,12.8008187 C37.7670044,12.3975992 37.7879333,11.7647802 38.1911528,11.3873779 C38.5943723,11.0099756 39.2271913,11.0309045 39.6045936,11.434124 C43.0490024,15.1141563 45.0000019,19.9546665 45.0000019,25.0982565 C45.0000019,30.3011131 43.0035549,35.1929099 39.487912,38.8860014 Z" id="Combined-Shape" fill="#5C90DF" fill-rule="nonzero"/></g>'
}
},
{
id: 'Sensor2', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Driver" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="Rectangle" fill="#5C90DF" fill-rule="nonzero" x="5" y="1" width="40" height="48" rx="2"/> <path d="M32,47 L29,47 L29,43 L32,43 L32,47 Z M34,47 L34,43 L43,43 L43,47 L34,47 Z M27,47 L24,47 L24,43 L27,43 L27,47 Z M22,47 L19,47 L19,43 L22,43 L22,47 Z M17,47 L7,47 L7,43 L17,43 L17,47 Z M43,41 L7,41 L7,3 L43,3 L43,41 Z M38.5,8 C39.3284271,8 40,7.32842712 40,6.5 C40,5.67157288 39.3284271,5 38.5,5 C37.6715729,5 37,5.67157288 37,6.5 C37,7.32842712 37.6715729,8 38.5,8 Z M11.5,8 C12.3284271,8 13,7.32842712 13,6.5 C13,5.67157288 12.3284271,5 11.5,5 C10.6715729,5 10,5.67157288 10,6.5 C10,7.32842712 10.6715729,8 11.5,8 Z M38.5,38 C39.3284271,38 40,37.3284271 40,36.5 C40,35.6715729 39.3284271,35 38.5,35 C37.6715729,35 37,35.6715729 37,36.5 C37,37.3284271 37.6715729,38 38.5,38 Z M11.5,38 C12.3284271,38 13,37.3284271 13,36.5 C13,35.6715729 12.3284271,35 11.5,35 C10.6715729,35 10,35.6715729 10,36.5 C10,37.3284271 10.6715729,38 11.5,38 Z M25,33 C31.0751322,33 36,28.0751322 36,22 C36,15.9248678 31.0751322,11 25,11 C18.9248678,11 14,15.9248678 14,22 C14,28.0751322 18.9248678,33 25,33 Z M25,31 C20.0294373,31 16,26.9705627 16,22 C16,17.0294373 20.0294373,13 25,13 C29.9705627,13 34,17.0294373 34,22 C34,26.9705627 29.9705627,31 25,31 Z M25,26 C27.209139,26 29,24.209139 29,22 C29,19.790861 27.209139,18 25,18 C22.790861,18 21,19.790861 21,22 C21,24.209139 22.790861,26 25,26 Z M25,24 C23.8954305,24 23,23.1045695 23,22 C23,20.8954305 23.8954305,20 25,20 C26.1045695,20 27,20.8954305 27,22 C27,23.1045695 26.1045695,24 25,24 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.65"/></g>'
}
},
{
id: 'Hmi', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="HMI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group-5" transform="translate(5.000000, 1.000000)" fill="#5C90DF" fill-rule="nonzero"> <rect id="Rectangle" x="0" y="0" width="40" height="48" rx="2"/> </g> <path d="M43,37 L7,37 L7,3 L43,3 L43,37 Z M43,39 L43,47 L7,47 L7,39 L43,39 Z M38.5,8 C39.3284271,8 40,7.32842712 40,6.5 C40,5.67157288 39.3284271,5 38.5,5 C37.6715729,5 37,5.67157288 37,6.5 C37,7.32842712 37.6715729,8 38.5,8 Z M11.5,8 C12.3284271,8 13,7.32842712 13,6.5 C13,5.67157288 12.3284271,5 11.5,5 C10.6715729,5 10,5.67157288 10,6.5 C10,7.32842712 10.6715729,8 11.5,8 Z M11.5,34 C12.3284271,34 13,33.3284271 13,32.5 C13,31.6715729 12.3284271,31 11.5,31 C10.6715729,31 10,31.6715729 10,32.5 C10,33.3284271 10.6715729,34 11.5,34 Z M38.5,34 C39.3284271,34 40,33.3284271 40,32.5 C40,31.6715729 39.3284271,31 38.5,31 C37.6715729,31 37,31.6715729 37,32.5 C37,33.3284271 37.6715729,34 38.5,34 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero" opacity="0.65"/> <path d="M37.875,43.625 L37.875,45.0625 L35,45.0625 L35,43.625 L33.5625,43.625 L33.5625,40.75 L39.3125,40.75 L39.3125,43.625 L37.875,43.625 Z M30.6875,43.625 L30.6875,45.0625 L27.8125,45.0625 L27.8125,43.625 L26.375,43.625 L26.375,40.75 L32.125,40.75 L32.125,43.625 L30.6875,43.625 Z M16.3125,43.625 L16.3125,45.0625 L13.4375,45.0625 L13.4375,43.625 L12,43.625 L12,40.75 L17.75,40.75 L17.75,43.625 L16.3125,43.625 Z M23.5,43.625 L23.5,45.0625 L20.625,45.0625 L20.625,43.625 L19.1875,43.625 L19.1875,40.75 L24.9375,40.75 L24.9375,43.625 L23.5,43.625 Z" id="Combined-Shape" fill="#FFFFFF"/></g>'
}
},
{
id: 'Virtualservercopy', style: { fill: 'none'},
shape: {
type: 'Native', content: '<g xmlns="http://www.w3.org/2000/svg" id="Virtual-Server-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M28.9678852,14.1906725 C28.6479482,14.0043396 28.3104835,13.8355344 27.9613092,13.6844026 C28.0079288,13.2830086 28.0368752,12.8815419 28.0368752,12.4801479 C28.0368752,8.26751125 25.3719945,4.46826891 21.4096926,3.03695283 C21.0957922,2.92611311 20.746618,3.07157206 20.6127958,3.38016323 C20.4789735,3.68839074 20.6068319,4.04352877 20.9037137,4.19466062 C23.0563607,5.29440302 24.3947285,7.48196019 24.3947285,9.89650604 C24.3947285,10.6820571 24.2492695,11.4559715 23.9699884,12.1832662 C22.3407026,10.8158793 20.2403481,9.99570905 17.953588,9.99570905 C15.6961378,9.99570905 13.6191294,10.7985697 11.9958075,12.1366466 C11.728163,11.4209886 11.588377,10.6647475 11.588377,9.90246986 C11.588377,7.487924 12.9267448,5.30007592 15.0793918,4.20062444 C15.3762735,4.04920167 15.5041319,3.69435456 15.3703097,3.38583613 C15.2364875,3.07753588 14.8873133,2.93207693 14.5731219,3.04262573 C10.6110383,4.47394181 7.94623031,8.26751125 7.94623031,12.4858208 C7.94623031,12.8815419 7.96950374,13.2830086 8.01612334,13.6844026 C7.66694912,13.8355344 7.32941163,14.0043396 7.00358358,14.1963454 C3.3671098,16.2966999 1.41221423,20.4976999 2.1568186,24.6520802 C2.20911109,24.9603077 2.47704648,25.1756597 2.7909469,25.1756597 C3.14012111,25.1696959 3.41940229,24.8904147 3.41940229,24.5416042 C3.41940229,24.5066213 3.41940229,24.477384 3.4137294,24.448365 C3.31481731,22.0570925 4.53645431,19.8286614 6.60778977,18.6300069 C7.2595186,18.2518864 7.96950374,18.0016243 8.70843521,17.8737658 C8.62690547,18.3624352 8.58632242,18.8687051 8.58632242,19.3806478 C8.58632242,23.4358252 11.1752736,26.8978937 14.782801,28.2070243 C14.2938407,28.8121335 13.6946953,29.3300401 13.0140202,29.725543 C12.0423544,30.2841054 10.9366482,30.5809871 9.81959614,30.5809871 C8.57461298,30.5809871 7.37006741,30.22614 6.32858132,29.551065 C6.04930013,29.3706959 5.6771434,29.4346251 5.47910104,29.7022695 C5.2813496,29.9698413 5.32200537,30.3482527 5.5779404,30.5633138 C7.38766794,32.0877963 9.68577391,32.9256399 12.059664,32.9256399 C13.8111352,32.9256399 15.5450059,32.460244 17.0691975,31.5815265 C17.3894254,31.3954845 17.7036167,31.1917692 18.0061714,30.9707443 C18.308726,31.1917692 18.62299,31.4014483 18.9428543,31.5815265 C20.4673368,32.460244 22.2012075,32.9256399 23.9523878,32.9256399 C26.3263506,32.9256399 28.6246748,32.0877963 30.4341114,30.5633138 C30.6901192,30.3482527 30.7307022,29.9698413 30.5329508,29.7022695 C30.3352721,29.4346251 29.9628244,29.365023 29.6835432,29.551065 C28.6419844,30.22614 27.4317659,30.5809871 26.1925284,30.5809871 C25.0754037,30.5809871 23.9756613,30.2841054 22.9983953,29.725543 C22.3116836,29.3300401 21.7065743,28.8061697 21.2119412,28.1897146 C24.7961952,26.8689474 27.3562,23.4185156 27.3562,19.3863207 C27.3562,18.8687051 27.3095804,18.3624352 27.2340145,17.867802 C27.9962921,17.9899148 28.7292598,18.2518864 29.404262,18.6356798 C31.4989437,19.845971 32.7207989,22.0977483 32.5986861,24.5122942 C32.5810855,24.8441588 32.8253838,25.1350767 33.1571757,25.1756597 C33.4887494,25.2163155 33.791304,24.9896177 33.8495603,24.6577531 C34.5768551,20.5033728 32.6216686,16.2966999 28.9678852,14.1906725 Z M22.1429512,14.7781812 C21.2875071,15.5054759 20.246021,16.005782 19.1172596,16.2038244 C18.3666914,16.3376466 17.6164141,16.3376466 16.8657732,16.2038244 C15.7194839,16.0001091 14.6722522,15.4938392 13.8111352,14.7492348 C14.9106594,13.7599685 16.3652489,13.1608231 17.9596245,13.1608231 C19.5713097,13.1548593 21.0432088,13.7716052 22.1429512,14.7781812 Z M11.7397998,19.3806478 C11.7397998,18.9499439 11.7864193,18.5252038 11.8676582,18.1180641 C12.9383815,18.484548 13.9100473,19.130313 14.6606155,20.0030667 C14.9222961,20.3115851 15.1549577,20.6374859 15.3470363,20.9747325 C15.5274054,21.2889238 15.684501,21.6207157 15.8126504,21.969599 C16.2141171,23.0577047 16.3013197,24.2097396 16.1035683,25.3151549 C13.5725098,24.5239309 11.7397998,22.1676413 11.7397998,19.3806478 Z M19.885501,25.2921723 C19.6874586,24.1864661 19.7806978,23.0460679 20.1764189,21.969599 C20.3042773,21.6207157 20.461373,21.2832509 20.6417421,20.9747325 C20.8394935,20.6374859 21.0664822,20.3115851 21.3284538,20.0030667 C22.0673853,19.1419497 23.0097411,18.5078941 24.057191,18.1414103 C24.1387207,18.5428043 24.1793765,18.9559077 24.1793765,19.3806478 C24.1793765,22.1443679 22.3756128,24.4833478 19.885501,25.2921723 Z" id="Fill-1" fill="#5C90DF"/></g>'
}
}
];
// Initializes the palettes to be displayed in the symbol palette.
export default {
name: 'app',
data() {
return {
width: "500px",
height: "100%",
expandMode: "Multiple",
palettes: [
{
//Sets the id of the palette
id: 'svg',
//Sets whether the palette expands/collapse its children
expanded: true,
//Adds the palette items to palette
symbols: svgshapes,
//Sets the header text of the palette
title: 'SVG Shapes',
iconCss: 'e-ddb-icons e-flow'
}
],
palettewidth: "500px",
paletteheight: "calc(100% - 50px)",
symbolHeight: 48,
symbolWidth: 48,
path: {
saveUrl: "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
removeUrl:
"https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"
},
dropElement: ".control-fluid"
};
},
mounted: function() {
paletteInstance = this.$refs.paletteObj.ej2Instances;
uploadObjInstance = this.$refs.uploadObj.ej2Instances;
},
methods: {
btnClick: () => {
if (
!isNullOrUndefined(
document.getElementsByClassName("e-file-select-wrap")
)
) {
let obj = document.getElementsByClassName("e-file-select-wrap")[0];
obj.querySelector("button").click();
}
return false;
},
onUploadSuccess: (arg) => {
let file1 = arg.file;
let file = file1.rawFile;
let reader = new FileReader();
let id = 0;
reader.addEventListener(
"load",
(event) => {
let shape;
let shapeContent = event.target.result;
shape = {
id: "newshape" + id.toString(),
shape: { type: "Native", content: shapeContent }
};
paletteInstance.addPaletteItem("svg", shape);
}
);
id++;
reader.readAsText(file);
uploadObjInstance.clearAll();
},
onFileRemove: (args) => {
args.postRawFile = false;
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
.e-file-select-wrap {
display: none;
}
.e-upload {
visibility: hidden;
}
</style>