diff options
| author |   Ahmed Abbas <ahmad.helmy@orange.com> | 2020-01-06 17:52:39 +0200 |
|---|---|---|
| committer |   shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-01-07 12:23:15 +0200 |
| commit | 11072c92de3aec370e93c21134621ac993f601bc (patch) | |
| tree | 49e7a1331fb9bd6cafc71495326f5d722a9c3ea2 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs | |
| parent | 077b1ab152c61695ac4d007035dfb81e9aef2c61 (diff) | |
designer client screen functionality:
- insert action into main board
- drag function from palette and drop over an action
- prevent drag function outside action
- insert multiple actions into the board
Issue-ID: CCSDK-2017
Issue-ID: CCSDK-1783
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Id7528404ba70ca05561127c22e8bf4d27766bb91
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs')
3 files changed, 677 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts new file mode 100644 index 000000000..212905814 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -0,0 +1,64 @@ +import * as joint from 'jointjs'; +/** + * please refer to documentation in file palette.function.element.ts to get more details + * about how to create new element type and define it in typescript + */ + +declare module 'jointjs' { + namespace shapes { + // add new module called "app" under the already existing "shapes" modeule inside jointjs + export namespace app { + class ActionElement extends joint.shapes.standard.Rectangle { + } + } + } +} + +const rectWidth = 616; +const rectHeight = 381; +// custom element implementation +// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup +const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', { + size: {width: rectWidth, height: rectHeight} +}, + { + markup: + `<defs> + <rect id="custom-action" x="0" y="30" width="${rectWidth}" height="${rectHeight}"></rect> + <filter x="-1.7%" y="-2.2%" width="103.5%" height="105.5%" filterUnits="objectBoundingBox" id="filter-2"> + <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology> + <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset> + <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> + <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite> + <feColorMatrix + values="0 0 0 0 0.0705882353 0 0 0 0 0.450980392 0 0 0 0 0.921568627 0 0 0 0.1 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.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> + <g id="workflow-container" transform="translate(401.000000, 137.000000)"> + <g id="Card"> + <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> + <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> + </g> + <g id="name"> + <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, + 0.8954305 87,2 L87,30 L87,30 L0,30 L0, + 2 C-1.3527075e-16,0.8954305 0.8954305, + 2.02906125e-16 2,0 Z" id="Rectangle" + fill="#C3CDDB"></path> + <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F"> + <tspan id="label" x="20" y="20">Action 1</tspan> + </text> + </g> + </g> + </g> + </g>` +}); + +Object.assign(joint.shapes, { + app: { + ActionElement + } +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts new file mode 100644 index 000000000..42813075c --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts @@ -0,0 +1,327 @@ +import * as joint from 'jointjs'; + +declare module 'jointjs' { + namespace shapes { + // add new module called "app" under the already existing "shapes" modeule inside jointjs + export namespace board { + class FunctionElement extends joint.shapes.standard.Rectangle { + } + } + } +} + +const rectWidth = 260; +const rectHeight = 150; +const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionElement', { + size: { width: rectWidth, height: rectHeight }, + attrs: { + icon: { + 'xlink:href': 'http://placehold.it/16x16' + }, + type: '' + } +}, { + markup: + `<g id="func-board-element" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="func-board-element-parent-component" transform="translate(-742.000000, -207.000000)"> + <g id="workflow-container" transform="translate(401.000000, 137.000000)"> + <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)"> + <g id="execute" transform="translate(304.000000, 0.000000)"> + <g id="Group" transform="translate(7.000000, 0.000000)"> + <rect id="func-board-element-rectangle" fill="#1B3E6F" x="0" y="0" width="230" height="130" rx="2"></rect> + <g id="Group-4" transform="translate(36.000000, 25.000000)" fill="#FFFFFF"> + <g id="database0-copy" transform="translate(61.000000, 0.000000)" fill-rule="nonzero"> + <path d="M35.544,6.00705882 C34.7265882, + 2.97882353 28.6425882,0 18,0 C7.35741176, + 0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882, + 6.11082353 0.352941176,6.22447059 0.352941176, + 6.35294118 L0.352941176,6.70588235 L0.352941176, + 14.8235294 L0.352941176,15.1764706 L0.352941176, + 15.5294118 L0.352941176,23.2941176 L0.352941176, + 23.6470588 L0.352941176,24 L0.352941176, + 32.4705882 C0.352941176,32.5849412 0.383294118, + 32.6929412 0.435529412,32.7889412 C1.26917647, + 36.2442353 8.72752941,38.8235294 18, + 38.8235294 C27.2512941,38.8235294 34.6976471, + 36.2548235 35.5588235,32.8122353 C35.6152941, + 32.7112941 35.6470588,32.5948235 35.6470588, + 32.4705882 L35.6470588,24 L35.6470588, + 23.6470588 L35.6470588,23.2941176 L35.6470588, + 15.5294118 L35.6470588,15.1764706 L35.6470588, + 14.8235294 L35.6470588,6.70588235 L35.6470588, + 6.35294118 C35.6470588,6.22447059 35.6032941, + 6.11082353 35.544,6.00705882 Z M34.1795294, + 23.9894118 C34.1597647,24.0748235 34.1322353, + 24.1595294 34.0976471,24.2456471 C34.0694118, + 24.3155294 34.0348235,24.3854118 33.9967059, + 24.4552941 C33.9494118,24.5421176 33.8964706, + 24.6289412 33.8336471,24.7157647 C33.7870588, + 24.7814118 33.7341176,24.8463529 33.6790588, + 24.9112941 C33.6007059,25.0037647 33.5174118, + 25.0962353 33.4228235,25.188 C33.3656471, + 25.2437647 33.3028235,25.2988235 33.2392941, + 25.3545882 C33.1235294,25.4555294 33.0028235, + 25.5557647 32.868,25.6552941 C32.8101176,25.6983529 32.748,25.74 32.6865882, + 25.7823529 C32.5270588, + 25.8924706 32.3604706,26.0018824 32.1776471, + 26.1091765 C32.1296471,26.1381176 32.0781176, + 26.1656471 32.028,26.1938824 C31.8176471, + 26.3124706 31.5981176,26.4303529 31.3609412, + 26.5447059 C31.3305882,26.5595294 31.2988235, + 26.5736471 31.2677647,26.5877647 C31.0030588, + 26.7127059 30.7263529,26.8355294 30.4305882, + 26.9541176 C30.4221176,26.9576471 30.4136471, + 26.9604706 30.4051765,26.964 C28.8021176, + 27.6042353 26.7515294,28.1428235 24.3621176, + 28.4957647 C24.3501176,28.4971765 24.3381176, + 28.4985882 24.3261176,28.5007059 C23.8616471, + 28.5691765 23.3851765,28.6298824 22.896, + 28.6835294 C22.8162353,28.692 22.7322353, + 28.6976471 22.6517647,28.7061176 C22.2247059, + 28.7505882 21.7927059,28.7915294 21.348, + 28.824 C21.1447059,28.8388235 20.9315294, + 28.8458824 20.7247059,28.8585882 C20.3901176, + 28.8783529 20.0590588,28.9002353 19.716, + 28.9122353 C19.1555294,28.9298824 18.5837647, + 28.9411765 18,28.9411765 C17.4162353, + 28.9411765 16.8444706,28.9298824 16.2832941, + 28.9101176 C15.9402353,28.8981176 15.6091765, + 28.8755294 15.2745882,28.8564706 C15.0677647, + 28.8444706 14.8545882,28.8367059 14.6512941, + 28.8218824 C14.2065882,28.7894118 13.7745882, + 28.7484706 13.3475294,28.704 C13.2670588, + 28.6955294 13.1830588,28.6898824 13.1032941, + 28.6814118 C12.6141176,28.6277647 12.1376471, + 28.5663529 11.6731765,28.4985882 C11.6611765, + 28.4971765 11.6491765,28.4957647 11.6371765, + 28.4936471 C9.24776471,28.1407059 7.19717647, + 27.6021176 5.59411765,26.9618824 C5.58564706, + 26.9590588 5.57717647,26.9555294 5.56870588, + 26.952 C5.27294118,26.8334118 4.99552941, + 26.7105882 4.73152941,26.5856471 C4.70117647, + 26.5708235 4.66870588,26.5567059 4.63835294, + 26.5425882 C4.40117647,26.4282353 4.18164706, + 26.3110588 3.97129412,26.1917647 C3.92188235, + 26.1635294 3.86964706,26.136 3.82164706, + 26.1070588 C3.63882353,25.9997647 3.47223529, + 25.8903529 3.31270588,25.7802353 C3.252, + 25.7378824 3.18917647,25.6962353 3.13129412, + 25.6531765 C2.99647059,25.5536471 2.87576471, + 25.4534118 2.76,25.3524706 C2.69717647, + 25.2974118 2.63364706,25.2423529 2.57647059, + 25.1858824 C2.48188235,25.0941176 2.39858824, + 25.0023529 2.32023529,24.9091765 C2.26517647, + 24.8442353 2.21223529,24.7792941 2.16564706, + 24.7136471 C2.10352941,24.6268235 2.05058824, + 24.54 2.00258824,24.4531765 C1.96447059, + 24.3832941 1.93058824,24.3134118 1.90164706, + 24.2435294 C1.86705882,24.1581176 1.83952941, + 24.0727059 1.81976471,23.9872941 C1.79364706, + 23.8750588 1.76470588,23.7607059 1.76470588, + 23.6470588 C1.76470588,23.5672941 1.77388235, + 23.4875294 1.78658824,23.4084706 C1.80423529, + 23.3018824 1.79435294,23.1952941 1.76470588, + 23.0943529 L1.76470588,17.8538824 C1.78447059, + 17.8722353 1.80917647,17.8898824 1.82964706, + 17.9082353 C1.98352941,18.0437647 2.14023529, + 18.1785882 2.31670588,18.3084706 C4.97576471, + 20.3195294 10.2931765,21.8823529 18, + 21.8823529 C25.6743529,21.8823529 30.9783529, + 20.3322353 33.6487059,18.3331765 C33.8618824, + 18.1778824 34.0538824,18.0176471 34.2345882, + 17.8545882 L34.2352941,17.8538824 L34.2352941, + 23.0943529 C34.2056471,23.1952941 34.1957647, + 23.3018824 34.2134118,23.4084706 C34.2268235, + 23.4875294 34.2352941,23.5672941 34.2352941, + 23.6470588 C34.2352941,23.7607059 34.2063529, + 23.8750588 34.1795294,23.9894118 Z M34.2352941, + 9.38329412 L34.2352941,14.6237647 C34.2056471, + 14.7247059 34.1957647,14.8312941 34.2134118, + 14.9378824 C34.2268235,15.0169412 34.2352941, + 15.0967059 34.2352941,15.1764706 C34.2352941, + 15.2901176 34.2063529,15.4044706 34.1795294, + 15.5188235 C34.1597647,15.6042353 34.1322353, + 15.6889412 34.0976471,15.7750588 C34.0694118, + 15.8449412 34.0348235,15.9148235 33.9967059, + 15.9847059 C33.9494118,16.0715294 33.8964706, + 16.1583529 33.8336471,16.2451765 C33.7870588, + 16.3108235 33.7341176,16.3757647 33.6790588, + 16.4407059 C33.6007059,16.5331765 33.5174118, + 16.6256471 33.4228235,16.7174118 C33.3656471, + 16.7731765 33.3028235,16.8282353 33.2392941, + 16.884 C33.1235294,16.9849412 33.0028235, + 17.0851765 32.868,17.1847059 C32.8101176, + 17.2277647 32.748,17.2694118 32.6865882, + 17.3117647 C32.5270588,17.4218824 32.3604706, + 17.5312941 32.1776471,17.6385882 C32.1296471, + 17.6675294 32.0781176,17.6950588 32.028, + 17.7232941 C31.8176471,17.8418824 31.5981176, + 17.9597647 31.3609412,18.0741176 C31.3305882, + 18.0889412 31.2988235,18.1030588 31.2677647, + 18.1171765 C31.0030588,18.2421176 30.7263529, + 18.3649412 30.4305882,18.4835294 C30.4221176, + 18.4870588 30.4136471,18.4898824 30.4051765, + 18.4934118 C28.8021176,19.1336471 26.7515294, + 19.6722353 24.3621176,20.0251765 C24.3501176, + 20.0265882 24.3381176,20.028 24.3261176, + 20.0301176 C23.8616471,20.0985882 23.3851765, + 20.1592941 22.896,20.2129412 C22.8162353, + 20.2214118 22.7322353,20.2270588 22.6517647, + 20.2355294 C22.2247059,20.28 21.7927059, + 20.3209412 21.348,20.3534118 C21.1447059, + 20.3682353 20.9315294,20.3752941 20.7247059, + 20.388 C20.3901176,20.4077647 20.0590588, + 20.4296471 19.716,20.4416471 C19.1555294, + 20.4592941 18.5837647,20.4705882 18, + 20.4705882 C17.4162353,20.4705882 16.8444706, + 20.4592941 16.2832941,20.4395294 C15.9402353, + 20.4275294 15.6091765,20.4049412 15.2745882, + 20.3858824 C15.0677647,20.3738824 14.8545882, + 20.3661176 14.6512941,20.3512941 C14.2065882, + 20.3188235 13.7745882,20.2778824 13.3475294, + 20.2334118 C13.2670588,20.2249412 13.1830588, + 20.2192941 13.1032941,20.2108235 C12.6141176, + 20.1571765 12.1376471,20.0957647 11.6731765, + 20.028 C11.6611765,20.0265882 11.6491765, + 20.0251765 11.6371765,20.0230588 C9.24776471, + 19.6701176 7.19717647,19.1315294 5.59411765, + 18.4912941 C5.58564706,18.4884706 5.57717647, + 18.4849412 5.56870588,18.4814118 C5.27294118, + 18.3628235 4.99552941,18.24 4.73152941, + 18.1150588 C4.70117647,18.1002353 4.66870588, + 18.0861176 4.63835294,18.072 C4.40117647, + 17.9576471 4.18164706,17.8404706 3.97129412, + 17.7211765 C3.92188235,17.6929412 3.86964706, + 17.6654118 3.82164706,17.6364706 C3.63882353, + 17.5291765 3.47223529,17.4197647 3.31270588, + 17.3096471 C3.252,17.2672941 3.18917647, + 17.2256471 3.13129412,17.1825882 C2.99647059, + 17.0830588 2.87576471,16.9828235 2.76, + 16.8818824 C2.69717647,16.8268235 2.63364706, + 16.7717647 2.57647059,16.7152941 C2.48188235, + 16.6235294 2.39858824,16.5317647 2.32023529, + 16.4385882 C2.26517647,16.3736471 2.21223529, + 16.3087059 2.16564706,16.2430588 C2.10352941, + 16.1562353 2.05058824,16.0694118 2.00258824, + 15.9825882 C1.96447059,15.9127059 1.93058824, + 15.8428235 1.90164706,15.7729412 C1.86705882, + 15.6875294 1.83952941,15.6021176 1.81976471, + 15.5167059 C1.79364706,15.4044706 1.76470588, + 15.2901176 1.76470588,15.1764706 C1.76470588, + 15.0967059 1.77388235,15.0169412 1.78658824, + 14.9378824 C1.80423529,14.8312941 1.79435294, + 14.7247059 1.76470588,14.6237647 L1.76470588, + 9.38329412 C1.84941176,9.46023529 1.94611765, + 9.53576471 2.03788235,9.612 C2.08870588, + 9.65435294 2.136,9.69670588 2.18964706, + 9.73905882 C2.40141176,9.90564706 2.63011765, + 10.0701176 2.87788235,10.2303529 C2.92941176, + 10.2635294 2.98729412,10.296 3.04094118, + 10.3291765 C3.24847059,10.4583529 3.468, + 10.5847059 3.69882353,10.7089412 C3.78423529, + 10.7548235 3.86964706,10.8 3.95788235, + 10.8451765 C4.21552941,10.9764706 4.48588235, + 11.1042353 4.77035294,11.2277647 C4.81694118, + 11.2482353 4.85929412,11.2694118 4.90658824, + 11.2891765 C5.23764706,11.4296471 5.58917647, + 11.5637647 5.95482353,11.6936471 C6.05576471, + 11.7296471 6.16164706,11.7635294 6.26541176, + 11.7988235 C6.55623529,11.8969412 6.85694118, + 11.9908235 7.16823529,12.0818824 C7.28047059, + 12.1143529 7.39058824,12.1482353 7.50564706, + 12.1792941 C7.91858824,12.2936471 8.34494118, + 12.4023529 8.79247059,12.5025882 C8.85388235, + 12.5167059 8.92023529,12.528 8.98235294, + 12.5414118 C9.37694118,12.6275294 9.78635294, + 12.7072941 10.2070588,12.7821176 C10.3496471, + 12.8075294 10.4943529,12.8315294 10.6397647, + 12.8555294 C11.04,12.9211765 11.4522353, + 12.9811765 11.8750588,13.0362353 C11.9837647, + 13.0503529 12.0875294,13.0665882 12.1976471, + 13.08 C12.7228235,13.1435294 13.2663529, + 13.1978824 13.8247059,13.2444706 C13.9623529, + 13.2557647 14.1056471,13.2642353 14.2454118, + 13.2741176 C14.6922353,13.3065882 15.1489412, + 13.3334118 15.6162353,13.3545882 C15.7863529, + 13.3623529 15.9557647,13.3701176 16.1294118, + 13.3764706 C16.7378824,13.3969412 17.3576471, + 13.4117647 18,13.4117647 C18.6423529, + 13.4117647 19.2621176,13.3969412 19.8705882, + 13.3764706 C20.0435294,13.3701176 20.2129412, + 13.3623529 20.3837647,13.3545882 C20.8510588, + 13.3334118 21.3077647,13.3065882 21.7545882, + 13.2741176 C21.8943529,13.2635294 22.0369412, + 13.2557647 22.1752941,13.2444706 C22.7336471, + 13.1985882 23.2771765,13.1435294 23.8023529, + 13.08 C23.9124706,13.0665882 24.0162353, + 13.0503529 24.1249412,13.0362353 C24.5477647, + 12.9811765 24.9592941,12.9211765 25.3602353, + 12.8555294 C25.5056471,12.8315294 25.6503529, + 12.8075294 25.7929412,12.7821176 C26.2136471, + 12.7072941 26.6230588,12.6275294 27.0176471, + 12.5414118 C27.0797647,12.528 27.1461176, + 12.516 27.2075294,12.5025882 C27.6550588, + 12.4023529 28.0814118,12.2929412 28.4943529, + 12.1792941 C28.6094118,12.1475294 28.7195294, + 12.1143529 28.8317647,12.0818824 C29.1430588, + 11.9908235 29.4437647,11.8969412 29.7345882, + 11.7988235 C29.8383529,11.7635294 29.9442353, + 11.7296471 30.0451765,11.6936471 C30.4108235, + 11.5637647 30.7630588,11.4296471 31.0934118, + 11.2891765 C31.1407059,11.2694118 31.1830588, + 11.2482353 31.2296471,11.2277647 C31.5141176, + 11.1035294 31.7844706,10.9764706 32.0421176, + 10.8451765 C32.1303529,10.8 32.2164706, + 10.7548235 32.3011765,10.7089412 C32.532, + 10.5854118 32.7515294,10.4590588 32.9590588, + 10.3291765 C33.0127059,10.296 33.0705882, + 10.2635294 33.1221176,10.2303529 C33.3698824, + 10.0701176 33.5985882,9.90635294 33.8103529, + 9.73905882 C33.8632941,9.69670588 33.9105882, + 9.65435294 33.9621176,9.612 C34.0538824, + 9.53576471 34.1505882,9.46023529 34.2352941, + 9.38329412 Z M18,1.41176471 C27.5682353, + 1.41176471 34.2352941,4.20141176 34.2352941, + 6.70588235 C34.2352941,9.21035294 27.5682353, + 12 18,12 C8.43176471,12 1.76470588,9.21035294 1.76470588, + 6.70588235 C1.76470588,4.20141176 8.43176471,1.41176471 18, + 1.41176471 Z M34.2352941,32.2609412 C34.2254118,32.292 34.2183529, + 32.3237647 34.2127059,32.3562353 C33.8124706,34.7978824 27.2018824, + 37.4117647 18,37.4117647 C8.79811765,37.4117647 2.18752941, + 34.7978824 1.78729412,32.3562353 C1.78164706, + 32.3244706 1.77388235,32.2934118 1.76470588, + 32.2637647 L1.76470588,26.3244706 C1.78447059, + 26.3428235 1.80917647,26.3604706 1.82964706, + 26.3788235 C1.98352941,26.5143529 2.14023529, + 26.6491765 2.31670588,26.7790588 C4.97576471, + 28.7901176 10.2931765,30.3529412 18,30.3529412 C25.6743529, + 30.3529412 30.9783529,28.8028235 33.6487059, + 26.8037647 C33.8618824,26.6484706 34.0538824, + 26.4882353 34.2345882,26.3251765 L34.2352941, + 26.3244706 L34.2352941,32.2609412 Z" id="Shape"></path> + </g> + <text id="func-board-element-text" + font-family="HelveticaNeue-Bold, Helvetica Neue" + font-size="14" + font-weight="bold" line-spacing="18"> + <tspan id="label" x="52.554" y="59">execute</tspan> + <tspan x="105.446" y="59" font-family="HelveticaNeue, Helvetica Neue" font-weight="normal"></tspan> + <tspan id="type" x="0.094" y="77" + font-family="HelveticaNeue, Helvetica Neue" font-size="12" + font-weight="normal"></tspan> + </text> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + ` +}); + +Object.assign(joint.shapes, { + board: { + FunctionElement + } +}); 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 + } +}); |