1 import * as joint from 'jointjs';
4 * The function element in the palette should contain image and text with style- that is why
5 * it requires a custom element.
6 * The following code declares a type for typescript to accept "app.FunctionElement"
7 * and create an element implementation , then joins the app module inside shapes module for javascript to work.
8 * please refer to the official example :
9 * https://github.com/clientIO/joint/blob/master/demo/ts-demo/custom.ts
12 declare module 'jointjs' {
14 // add new module called "app" under the already existing "shapes" modeule inside jointjs
15 export namespace palette {
16 class FunctionElement extends joint.shapes.standard.Rectangle {
22 const rectWidth = 260;
23 const rectHeight = 60;
24 // custom element implementation
25 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
26 const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
27 size: { width: rectWidth, height: rectHeight },
30 'xlink:href': 'http://placehold.it/16x16'
37 <rect id="pallete-function-rect" x="0" y="0" width="290" height="40" rx="2"></rect>
38 <filter x="-3.6%" y="-20.0%" width="107.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
39 <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
40 <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
42 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"
43 type="matrix" in="shadowBlurOuter1"></feColorMatrix>
46 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47 <g id="7.1-Designer" transform="translate(-14.000000, -618.000000)">
48 <g id="controller" transform="translate(0.000000, 60.000000)">
49 <g id="functions" transform="translate(0.000000, 479.000000)">
50 <g id="list" transform="translate(8.000000, 51.000000)">
51 <g id="1" transform="translate(12.000000, 32.000000)">
53 <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#pallete-function-rect"></use>
54 <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#pallete-function-rect"></use>
56 <g id="drag-menu" transform="translate(15.000000, 15.000000)" fill="#C3CDDB" fill-rule="nonzero">
58 <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
59 <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
60 <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
61 <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
63 <g id="right" transform="translate(2.400000, 0.000000)">
64 <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
65 <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
66 <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
67 <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
70 <g id="txt" transform="translate(30.000000, 10.000000)" fill="#1B3E6F">
71 <g id="browser" fill-rule="nonzero">
72 <path d="M21.0000051,0.39034364 C20.9994786,
73 0.29701568 20.9615913,0.207858845 20.8946802,
74 0.142685701 C20.8275953,0.0776863856 20.7373957,
75 0.0424059852 20.6440678,0.044547851 L0.355932203,
76 0.044547851 C0.262604288,0.0422321924 0.172230877,
77 0.0776863856 0.105319805,0.142685701 C0.0384086886,
78 0.207685061 0.000347590042,0.29701568 -5.13814986e-06,
79 0.39034364 L-5.13814986e-06,17.159999 C-0.00104277013,
80 17.3591681 0.156763131,17.5232306 0.355932203,
81 17.5298348 L5.23487982,17.5298348 L5.40554656,
82 17.912879 C5.46654862,18.0503509 5.60784396,
83 18.1341201 5.75782903,18.1216069 L6.47264799,
84 18.0673828 C6.73994471,18.3993313 7.04999502,
85 18.6944353 7.39480435,18.9448739 L7.37377516,
86 19.657781 C7.36943029,19.8086351 7.46067267,
87 19.9459332 7.60144661,20.0001573 L9.11989375,
88 20.5863678 C9.2601463,20.6404181 9.41934258,
89 20.6006191 9.51753676,20.4866095 L9.98104809,
90 19.9494091 C10.4045865,19.9888606 10.8310795,
91 19.9779115 11.2520111,19.916388 L11.7481959,
92 20.4339496 C11.8516039,20.5417025 12.0109739,
93 20.573507 12.1477506,20.5137215 L13.639607,
94 19.8609475 C13.7777741,19.8004667 13.8629337,
95 19.6593452 13.8518108,19.5088387 L13.7993247,
96 18.7940198 C14.1316208,18.526723 14.4270723,
97 18.2164989 14.6776847,17.8715158 L15.3911133,
98 17.892545 C15.5409246,17.9005396 15.6790916,
99 17.8115566 15.7336632,17.6718253 L15.7911894,
100 17.5298348 L20.6440678,17.5298348 C20.8432369,
101 17.5230568 21.0010428,17.3591681 21.0000051,
102 17.159999 L21.0000051,4.16360731 C21.0000051,
103 4.16239078 21.0000051,4.16134799 21.0000051,
104 4.16013141 C21.0000051,4.15891483 21.0000051,
105 4.15787209 21.0000051,4.15665551 L21.0000051,
106 0.39034364 Z M20.2881356,0.756529716 L20.2881356,
107 3.82644497 L0.711864407,3.82644497 L0.711864407,
108 0.756529716 L20.2881356,0.756529716 Z M14.5063228,
109 17.1542638 C14.3836235,17.1502665 14.2675285,
110 17.2102257 14.1997484,17.312591 C13.9348848,
111 17.7102341 13.6029363,18.0588668 13.2186755,
112 18.3428479 C13.1204814,18.4153204 13.0664311,
113 18.5333273 13.0752946,18.6549838 L13.1234359,
114 19.3094958 L12.0900506,19.7615367 L11.6362718,
115 19.2882928 C11.5535454,19.2019167 11.4329317,
116 19.1629866 11.3152725,19.1845372 C10.841681,
117 19.2712609 10.3574881,19.2837742 9.88007315,
118 19.2215556 C9.76137118,19.2060878 9.64284296,
119 19.2514483 9.564809,19.3419955 L9.14248708,
120 19.8314023 L8.09293898,19.4266337 L8.11223019,
121 18.7724692 C8.11587988,18.6499437 8.05592061,
122 18.5340225 7.95390296,18.4658948 C7.55625995,
123 18.2010312 7.20762712,17.8690827 6.92364608,
124 17.4848219 C6.85099974,17.3868015 6.73316673,
125 17.3327513 6.61151017,17.3416148 L5.95682436,
126 17.3895822 L5.81605037,17.0678877 C5.80683925,
127 17.0333024 5.79241425,17.0001076 5.77312299,
128 16.9696934 L5.50478348,16.356197 L5.97802733,
129 15.9024182 C6.06440349,15.8196918 6.10333358,
130 15.6990781 6.08178295,15.5815926 C5.99505927,
131 15.1080012 5.98254603,14.6238083 6.04476462,
132 14.1463933 C6.06005858,14.0276913 6.01487188,
133 13.9091631 5.92432468,13.8309554 L5.4349179,
134 13.4086335 L5.8396865,12.3590853 L6.49385096,
135 12.3783766 C6.61655026,12.3823739 6.73264534,
136 12.3224146 6.80042537,12.2200493 C7.06528899,
137 11.8222325 7.3972375,11.4735997 7.7814983,
138 11.1897924 C7.87969248,11.1171461 7.93374269,
139 10.9993131 7.92487918,10.8774828 L7.87673793,
140 10.2229708 L8.91012315,9.77092987 L9.36407574,
141 10.2441737 C9.44680217,10.3305498 9.56741589,
142 10.3694799 9.68490137,10.3479293 C10.1586666,
143 10.2612056 10.6428595,10.2486924 11.1202744,
144 10.310911 C11.2389764,10.326205 11.3575047,
145 10.2810183 11.4357124,10.1904711 L11.8580343,
146 9.7010643 L12.9075824,10.1058329 L12.8882912,
147 10.7598236 C12.8846415,10.8825228 12.944427,
148 10.9984441 13.0466184,11.0665718 C13.4442614,
149 11.3312616 13.7928943,11.6633839 14.0767015,
150 12.0476447 C14.1493479,12.145665 14.2671809,
151 12.1997153 14.3888374,12.1908517 L15.0433495,
152 12.1427105 L15.4955641,13.1760958 L15.0221465,
153 13.6298745 C14.9359441,13.712601 14.897014,
154 13.8332147 14.9183908,13.9507002 C15.0051145,
155 14.4242916 15.0176278,14.9084845 14.9555829,
156 15.3858994 C14.9401152,15.5046014 14.9853019,
157 15.6231297 15.0760229,15.7013374 L15.5654297,
158 16.1236593 L15.1603135,17.1732074 L14.5063228,
159 17.1542638 Z M16.0659593,16.8179704 L16.3195263,
160 16.1533782 C16.3735765,16.0120829 16.3339513,
161 15.8520177 16.2199417,15.7522593 L15.6827413,
162 15.2870101 C15.7223666,14.8632978 15.7114175,
163 14.4362834 15.6498941,14.0151781 L16.1674556,
164 13.5184719 C16.2750347,13.4150639 16.3068392,
165 13.2555201 16.2470538,13.1187434 L15.5944534,
166 11.6268869 C15.5339728,11.4885461 15.3928512,
167 11.4033865 15.2423448,11.4145094 L14.527352,
168 11.4669955 C14.2602291,11.1346994 13.9503525,
169 10.8392479 13.6055432,10.5884617 L13.6265725,
170 9.8750331 C13.6309173,9.72417903 13.5396749,
171 9.58688094 13.398901,9.53248311 L11.8804539,
172 8.94644629 C11.7402013,8.89239608 11.581005,
173 8.93219513 11.4828109,9.04603083 L11.0191257,
174 9.58357886 C10.5955873,9.5439536 10.1689205,
175 9.55490265 9.74798893,9.61642611 L9.25180414,
176 9.09869073 C9.14856992,8.99093782 8.98902606,
177 8.95913336 8.85224942,9.01891885 L7.36039295,
178 9.67151912 C7.2222259,9.73199979 7.13706632,
179 9.87329513 7.1481892,10.0238016 L7.20067532,
180 10.7386206 C6.86837924,11.0059173 6.57310149,
181 11.3161414 6.32231526,11.6609507 L5.60888671,
182 11.6400953 C5.45785885,11.6352291 5.32038697,
183 11.7264715 5.26633675,11.867593 L4.68047373,
184 13.3860401 C4.62642346,
185 13.5262927 4.66622251,13.6854889 4.78005826,
186 13.7836832 L5.31743247,14.2473682 C5.2778072,
187 14.6707329 5.2887563,15.0973997 5.35027972,
188 15.5181574 L4.83289195,16.014516 C4.72496525,
189 16.120531 4.69333454,16.2819865 4.75312002,
190 16.4210226 L4.92343914,16.8179704 L0.711864407,
191 16.8179704 L0.711864407,4.53830938 L20.2881356,
192 4.53830938 L20.2881356,16.8179704 L16.0659593,
193 16.8179704 Z" id="Shape"></path>
194 <path d="M4.59635694,3.39804025 C5.19264767,
195 3.39804025 5.67788336,2.8969892 5.67788336,
196 2.28105964 C5.67788336,1.66513009 5.19282145,
197 1.16425286 4.59635694,1.16425286 C3.99989242,
198 1.16425286 3.51483051,1.66513009 3.51483051,
199 2.28105964 C3.51483051,2.8969892 4.00006621,
200 3.39804025 4.59635694,3.39804025 Z M4.59635694,
201 1.87594344 C4.80021849,1.87594344 4.96601896,
202 2.05773305 4.96601896,2.28088586 C4.96601896,
203 2.50403867 4.80021849,2.68600206 4.59635694,
204 2.68600206 C4.39266917,2.68600206 4.22669492,
205 2.50438623 4.22669492,2.28105964 C4.22669492,
206 2.05773305 4.39266917,1.87594344 4.59635694,
207 1.87594344 Z" id="Shape"></path>
208 <path d="M6.95406017,3.39804025 C7.55017712,
209 3.39804025 8.03541282,2.8969892 8.03541282,
210 2.28105964 C8.03541282,1.66513009 7.55052468,
211 1.16425286 6.95406017,1.16425286 C6.35759566,
212 1.16425286 5.87288136,1.66513009 5.87288136,
213 2.28105964 C5.87288136,2.8969892 6.35776949,
214 3.39804025 6.95406017,3.39804025 Z M6.95406017,
215 1.87594344 C7.15774794,1.87594344 7.32354841,
216 2.05773305 7.32354841,2.28088586 C7.32354841,
217 2.50403867 7.15774794,2.68600206 6.95406017,
218 2.68600206 C6.75019862,2.68600206 6.58474576,
219 2.50438623 6.58474576,2.28105964 C6.58474576,
220 2.05773305 6.75037241,1.87594344 6.95406017,1.87594344 Z"
222 <path d="M2.23865366,3.39804025 C2.83494439,
223 3.39804025 3.32018008,2.8969892 3.32018008,
224 2.28105964 C3.32018008,1.66513009 2.83511817,
225 1.16425286 2.23865366,1.16425286 C1.64218914,
226 1.16425286 1.15730106,1.66530392 1.15730106,
227 2.28105964 C1.15730106,2.89681541 1.64236293,
228 3.39804025 2.23865366,3.39804025 Z M2.23865366,
229 1.87594344 C2.44234142,1.87594344 2.60831568,
230 2.05773305 2.60831568,2.28088586 C2.60831568,
231 2.50403867 2.44234142,2.68600206 2.23865366,
232 2.68600206 C2.03496589,2.68600206 1.86916546,
233 2.50421245 1.86916546,2.28088586 C1.86916546,
234 2.05738548 2.03496589,1.87594344 2.23865366,1.87594344 Z"
236 <path d="M10.5,11.3416893 C8.6087626,11.3416893 7.0755429,
237 12.874909 7.0755429,14.7663202 C7.0755429,16.6575576 8.6087626,
238 18.1907773 10.5,18.1907773 C12.3912374,18.1907773 13.9244571,
239 16.6575576 13.9244571,14.7663202 C13.9223716,12.875778 12.3903684,
240 11.3439486 10.5,11.3416893 Z M10.5,17.4789129 C9.00188692,
241 17.4789129 7.78740731,16.2644333 7.78740731,14.7663202 C7.78740731,
242 13.2680333 9.00188692,12.0535537 10.5,12.0535537 C11.9981131,
243 12.0535537 13.2125927,13.2680333 13.2125927,14.7663202 C13.2110285,
244 16.2637381 11.9974179,17.4771749 10.5,17.4789129 Z" id="Shape"></path>
245 <path d="M10.5,13.0556558 C9.55525026,13.0556558 8.7893356,
246 13.8215704 8.7893356,14.7663202 C8.7893356,15.7108961 9.55525026,
247 16.4768108 10.5,16.4768108 C11.4447497,16.4768108 12.2104906,15.7110699 12.2104906,
248 14.7663202 C12.2094478,13.8220918 11.4442283,13.0568724 10.5,
249 13.0556558 L10.5,13.0556558 Z M10.5,15.7649464 C9.94837458,
250 15.7649464 9.5012,15.3177718 9.5012,14.7663202 C9.5012,
251 14.2146948 9.94837458,13.7675202 10.5,13.7675202 C11.0516254,
252 13.7675202 11.4986262,14.2146948 11.4986262,14.7663202 C11.4981048,
253 15.317598 11.0512778,15.7642512 10.5,15.7649464 L10.5,15.7649464 Z"
256 <text id="function-type" font-family="ArialMT, Arial" font-size="14" font-weight="normal" line-spacing="20">
257 <tspan id="label" x="30" y="13"></tspan>
277 // selector: 'drag-handle'
282 Object.assign(joint.shapes, {
Code Review / ccsdk / cds.git / blob