summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts286
1 files changed, 286 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
new file mode 100644
index 000000000..896ecaa88
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
@@ -0,0 +1,286 @@
+import * as joint from 'jointjs';
+
+/**
+ * The function element in the palette should contain image and text with style- that is why
+ * it requires a custom element.
+ * The following code declares a type for typescript to accept "app.FunctionElement"
+ * and create an element implementation , then joins the app module inside shapes module for javascript to work.
+ * please refer to the official example :
+ * https://github.com/clientIO/joint/blob/master/demo/ts-demo/custom.ts
+ */
+
+declare module 'jointjs' {
+ namespace shapes {
+ // add new module called "app" under the already existing "shapes" modeule inside jointjs
+ export namespace palette {
+ class FunctionElement extends joint.shapes.standard.Rectangle {
+ }
+ }
+ }
+}
+
+const rectWidth = 260;
+const rectHeight = 60;
+// custom element implementation
+// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
+const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
+ size: { width: rectWidth, height: rectHeight },
+ attrs: {
+ icon: {
+ 'xlink:href': 'http://placehold.it/16x16'
+ },
+ type: ''
+ }
+}, {
+ markup:
+ `<defs>
+ <rect id="pallete-function-rect" x="0" y="0" width="280" height="40" rx="2"></rect>
+ <filter x="-3.6%" y="-20.0%" width="107.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
+ <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+ <feColorMatrix
+ values="0 0 0 0 0.185477813 0 0 0 0 0.324045386 0 0 0 0 0.59162415 0 0 0 0.15 0"
+ type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+ </filter>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="7.1-Designer" transform="translate(-14.000000, -618.000000)">
+ <g id="controller" transform="translate(0.000000, 60.000000)">
+ <g id="functions" transform="translate(0.000000, 479.000000)">
+ <g id="list" transform="translate(8.000000, 51.000000)">
+ <g id="1" transform="translate(12.000000, 32.000000)">
+ <g id="Card">
+ <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#pallete-function-rect"></use>
+ <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#pallete-function-rect"></use>
+ </g>
+ <g id="drag-menu" transform="translate(20.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
+ <g id="left">
+ <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
+ <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
+ <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
+ <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
+ </g>
+ <g id="right" transform="translate(2.400000, 0.000000)">
+ <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
+ <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
+ <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
+ <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
+ </g>
+ </g>
+ <g id="txt" transform="translate(35.000000, 10.000000)" fill="#1B3E6F">
+ <g id="browser" fill-rule="nonzero">
+ <path d="M21.0000051,0.39034364 C20.9994786,
+ 0.29701568 20.9615913,0.207858845 20.8946802,
+ 0.142685701 C20.8275953,0.0776863856 20.7373957,
+ 0.0424059852 20.6440678,0.044547851 L0.355932203,
+ 0.044547851 C0.262604288,0.0422321924 0.172230877,
+ 0.0776863856 0.105319805,0.142685701 C0.0384086886,
+ 0.207685061 0.000347590042,0.29701568 -5.13814986e-06,
+ 0.39034364 L-5.13814986e-06,17.159999 C-0.00104277013,
+ 17.3591681 0.156763131,17.5232306 0.355932203,
+ 17.5298348 L5.23487982,17.5298348 L5.40554656,
+ 17.912879 C5.46654862,18.0503509 5.60784396,
+ 18.1341201 5.75782903,18.1216069 L6.47264799,
+ 18.0673828 C6.73994471,18.3993313 7.04999502,
+ 18.6944353 7.39480435,18.9448739 L7.37377516,
+ 19.657781 C7.36943029,19.8086351 7.46067267,
+ 19.9459332 7.60144661,20.0001573 L9.11989375,
+ 20.5863678 C9.2601463,20.6404181 9.41934258,
+ 20.6006191 9.51753676,20.4866095 L9.98104809,
+ 19.9494091 C10.4045865,19.9888606 10.8310795,
+ 19.9779115 11.2520111,19.916388 L11.7481959,
+ 20.4339496 C11.8516039,20.5417025 12.0109739,
+ 20.573507 12.1477506,20.5137215 L13.639607,
+ 19.8609475 C13.7777741,19.8004667 13.8629337,
+ 19.6593452 13.8518108,19.5088387 L13.7993247,
+ 18.7940198 C14.1316208,18.526723 14.4270723,
+ 18.2164989 14.6776847,17.8715158 L15.3911133,
+ 17.892545 C15.5409246,17.9005396 15.6790916,
+ 17.8115566 15.7336632,17.6718253 L15.7911894,
+ 17.5298348 L20.6440678,17.5298348 C20.8432369,
+ 17.5230568 21.0010428,17.3591681 21.0000051,
+ 17.159999 L21.0000051,4.16360731 C21.0000051,
+ 4.16239078 21.0000051,4.16134799 21.0000051,
+ 4.16013141 C21.0000051,4.15891483 21.0000051,
+ 4.15787209 21.0000051,4.15665551 L21.0000051,
+ 0.39034364 Z M20.2881356,0.756529716 L20.2881356,
+ 3.82644497 L0.711864407,3.82644497 L0.711864407,
+ 0.756529716 L20.2881356,0.756529716 Z M14.5063228,
+ 17.1542638 C14.3836235,17.1502665 14.2675285,
+ 17.2102257 14.1997484,17.312591 C13.9348848,
+ 17.7102341 13.6029363,18.0588668 13.2186755,
+ 18.3428479 C13.1204814,18.4153204 13.0664311,
+ 18.5333273 13.0752946,18.6549838 L13.1234359,
+ 19.3094958 L12.0900506,19.7615367 L11.6362718,
+ 19.2882928 C11.5535454,19.2019167 11.4329317,
+ 19.1629866 11.3152725,19.1845372 C10.841681,
+ 19.2712609 10.3574881,19.2837742 9.88007315,
+ 19.2215556 C9.76137118,19.2060878 9.64284296,
+ 19.2514483 9.564809,19.3419955 L9.14248708,
+ 19.8314023 L8.09293898,19.4266337 L8.11223019,
+ 18.7724692 C8.11587988,18.6499437 8.05592061,
+ 18.5340225 7.95390296,18.4658948 C7.55625995,
+ 18.2010312 7.20762712,17.8690827 6.92364608,
+ 17.4848219 C6.85099974,17.3868015 6.73316673,
+ 17.3327513 6.61151017,17.3416148 L5.95682436,
+ 17.3895822 L5.81605037,17.0678877 C5.80683925,
+ 17.0333024 5.79241425,17.0001076 5.77312299,
+ 16.9696934 L5.50478348,16.356197 L5.97802733,
+ 15.9024182 C6.06440349,15.8196918 6.10333358,
+ 15.6990781 6.08178295,15.5815926 C5.99505927,
+ 15.1080012 5.98254603,14.6238083 6.04476462,
+ 14.1463933 C6.06005858,14.0276913 6.01487188,
+ 13.9091631 5.92432468,13.8309554 L5.4349179,
+ 13.4086335 L5.8396865,12.3590853 L6.49385096,
+ 12.3783766 C6.61655026,12.3823739 6.73264534,
+ 12.3224146 6.80042537,12.2200493 C7.06528899,
+ 11.8222325 7.3972375,11.4735997 7.7814983,
+ 11.1897924 C7.87969248,11.1171461 7.93374269,
+ 10.9993131 7.92487918,10.8774828 L7.87673793,
+ 10.2229708 L8.91012315,9.77092987 L9.36407574,
+ 10.2441737 C9.44680217,10.3305498 9.56741589,
+ 10.3694799 9.68490137,10.3479293 C10.1586666,
+ 10.2612056 10.6428595,10.2486924 11.1202744,
+ 10.310911 C11.2389764,10.326205 11.3575047,
+ 10.2810183 11.4357124,10.1904711 L11.8580343,
+ 9.7010643 L12.9075824,10.1058329 L12.8882912,
+ 10.7598236 C12.8846415,10.8825228 12.944427,
+ 10.9984441 13.0466184,11.0665718 C13.4442614,
+ 11.3312616 13.7928943,11.6633839 14.0767015,
+ 12.0476447 C14.1493479,12.145665 14.2671809,
+ 12.1997153 14.3888374,12.1908517 L15.0433495,
+ 12.1427105 L15.4955641,13.1760958 L15.0221465,
+ 13.6298745 C14.9359441,13.712601 14.897014,
+ 13.8332147 14.9183908,13.9507002 C15.0051145,
+ 14.4242916 15.0176278,14.9084845 14.9555829,
+ 15.3858994 C14.9401152,15.5046014 14.9853019,
+ 15.6231297 15.0760229,15.7013374 L15.5654297,
+ 16.1236593 L15.1603135,17.1732074 L14.5063228,
+ 17.1542638 Z M16.0659593,16.8179704 L16.3195263,
+ 16.1533782 C16.3735765,16.0120829 16.3339513,
+ 15.8520177 16.2199417,15.7522593 L15.6827413,
+ 15.2870101 C15.7223666,14.8632978 15.7114175,
+ 14.4362834 15.6498941,14.0151781 L16.1674556,
+ 13.5184719 C16.2750347,13.4150639 16.3068392,
+ 13.2555201 16.2470538,13.1187434 L15.5944534,
+ 11.6268869 C15.5339728,11.4885461 15.3928512,
+ 11.4033865 15.2423448,11.4145094 L14.527352,
+ 11.4669955 C14.2602291,11.1346994 13.9503525,
+ 10.8392479 13.6055432,10.5884617 L13.6265725,
+ 9.8750331 C13.6309173,9.72417903 13.5396749,
+ 9.58688094 13.398901,9.53248311 L11.8804539,
+ 8.94644629 C11.7402013,8.89239608 11.581005,
+ 8.93219513 11.4828109,9.04603083 L11.0191257,
+ 9.58357886 C10.5955873,9.5439536 10.1689205,
+ 9.55490265 9.74798893,9.61642611 L9.25180414,
+ 9.09869073 C9.14856992,8.99093782 8.98902606,
+ 8.95913336 8.85224942,9.01891885 L7.36039295,
+ 9.67151912 C7.2222259,9.73199979 7.13706632,
+ 9.87329513 7.1481892,10.0238016 L7.20067532,
+ 10.7386206 C6.86837924,11.0059173 6.57310149,
+ 11.3161414 6.32231526,11.6609507 L5.60888671,
+ 11.6400953 C5.45785885,11.6352291 5.32038697,
+ 11.7264715 5.26633675,11.867593 L4.68047373,
+ 13.3860401 C4.62642346,
+ 13.5262927 4.66622251,13.6854889 4.78005826,
+ 13.7836832 L5.31743247,14.2473682 C5.2778072,
+ 14.6707329 5.2887563,15.0973997 5.35027972,
+ 15.5181574 L4.83289195,16.014516 C4.72496525,
+ 16.120531 4.69333454,16.2819865 4.75312002,
+ 16.4210226 L4.92343914,16.8179704 L0.711864407,
+ 16.8179704 L0.711864407,4.53830938 L20.2881356,
+ 4.53830938 L20.2881356,16.8179704 L16.0659593,
+ 16.8179704 Z" id="Shape"></path>
+ <path d="M4.59635694,3.39804025 C5.19264767,
+ 3.39804025 5.67788336,2.8969892 5.67788336,
+ 2.28105964 C5.67788336,1.66513009 5.19282145,
+ 1.16425286 4.59635694,1.16425286 C3.99989242,
+ 1.16425286 3.51483051,1.66513009 3.51483051,
+ 2.28105964 C3.51483051,2.8969892 4.00006621,
+ 3.39804025 4.59635694,3.39804025 Z M4.59635694,
+ 1.87594344 C4.80021849,1.87594344 4.96601896,
+ 2.05773305 4.96601896,2.28088586 C4.96601896,
+ 2.50403867 4.80021849,2.68600206 4.59635694,
+ 2.68600206 C4.39266917,2.68600206 4.22669492,
+ 2.50438623 4.22669492,2.28105964 C4.22669492,
+ 2.05773305 4.39266917,1.87594344 4.59635694,
+ 1.87594344 Z" id="Shape"></path>
+ <path d="M6.95406017,3.39804025 C7.55017712,
+ 3.39804025 8.03541282,2.8969892 8.03541282,
+ 2.28105964 C8.03541282,1.66513009 7.55052468,
+ 1.16425286 6.95406017,1.16425286 C6.35759566,
+ 1.16425286 5.87288136,1.66513009 5.87288136,
+ 2.28105964 C5.87288136,2.8969892 6.35776949,
+ 3.39804025 6.95406017,3.39804025 Z M6.95406017,
+ 1.87594344 C7.15774794,1.87594344 7.32354841,
+ 2.05773305 7.32354841,2.28088586 C7.32354841,
+ 2.50403867 7.15774794,2.68600206 6.95406017,
+ 2.68600206 C6.75019862,2.68600206 6.58474576,
+ 2.50438623 6.58474576,2.28105964 C6.58474576,
+ 2.05773305 6.75037241,1.87594344 6.95406017,1.87594344 Z"
+ id="Shape"></path>
+ <path d="M2.23865366,3.39804025 C2.83494439,
+ 3.39804025 3.32018008,2.8969892 3.32018008,
+ 2.28105964 C3.32018008,1.66513009 2.83511817,
+ 1.16425286 2.23865366,1.16425286 C1.64218914,
+ 1.16425286 1.15730106,1.66530392 1.15730106,
+ 2.28105964 C1.15730106,2.89681541 1.64236293,
+ 3.39804025 2.23865366,3.39804025 Z M2.23865366,
+ 1.87594344 C2.44234142,1.87594344 2.60831568,
+ 2.05773305 2.60831568,2.28088586 C2.60831568,
+ 2.50403867 2.44234142,2.68600206 2.23865366,
+ 2.68600206 C2.03496589,2.68600206 1.86916546,
+ 2.50421245 1.86916546,2.28088586 C1.86916546,
+ 2.05738548 2.03496589,1.87594344 2.23865366,1.87594344 Z"
+ id="Shape"></path>
+ <path d="M10.5,11.3416893 C8.6087626,11.3416893 7.0755429,
+ 12.874909 7.0755429,14.7663202 C7.0755429,16.6575576 8.6087626,
+ 18.1907773 10.5,18.1907773 C12.3912374,18.1907773 13.9244571,
+ 16.6575576 13.9244571,14.7663202 C13.9223716,12.875778 12.3903684,
+ 11.3439486 10.5,11.3416893 Z M10.5,17.4789129 C9.00188692,
+ 17.4789129 7.78740731,16.2644333 7.78740731,14.7663202 C7.78740731,
+ 13.2680333 9.00188692,12.0535537 10.5,12.0535537 C11.9981131,
+ 12.0535537 13.2125927,13.2680333 13.2125927,14.7663202 C13.2110285,
+ 16.2637381 11.9974179,17.4771749 10.5,17.4789129 Z" id="Shape"></path>
+ <path d="M10.5,13.0556558 C9.55525026,13.0556558 8.7893356,
+ 13.8215704 8.7893356,14.7663202 C8.7893356,15.7108961 9.55525026,
+ 16.4768108 10.5,16.4768108 C11.4447497,16.4768108 12.2104906,15.7110699 12.2104906,
+ 14.7663202 C12.2094478,13.8220918 11.4442283,13.0568724 10.5,
+ 13.0556558 L10.5,13.0556558 Z M10.5,15.7649464 C9.94837458,
+ 15.7649464 9.5012,15.3177718 9.5012,14.7663202 C9.5012,
+ 14.2146948 9.94837458,13.7675202 10.5,13.7675202 C11.0516254,
+ 13.7675202 11.4986262,14.2146948 11.4986262,14.7663202 C11.4981048,
+ 15.317598 11.0512778,15.7642512 10.5,15.7649464 L10.5,15.7649464 Z"
+ id="Shape"></path>
+ </g>
+ <text id="function-type" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="20">
+ <tspan id="label" x="32" y="13"></tspan>
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>`
+ // [{
+ // tagName: 'rect',
+ // selector: 'body',
+ // }, {
+ // tagName: 'text',
+ // selector: 'label'
+ // }, {
+ // tagName: 'image',
+ // selector: 'icon'
+ // }, {
+ // tagName: 'image',
+ // selector: 'drag-handle'
+ // }
+ // ]
+});
+
+Object.assign(joint.shapes, {
+ palette: {
+ FunctionElement
+ }
+});