diff options
Diffstat (limited to 'cds-ui/designer-client')
6 files changed, 766 insertions, 128 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index c0ea41dbc..8ec735aec 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -70,7 +70,7 @@ <h1 class="col-12">Actions</h1> <div class="col-12 text-center p-0"> <div class="btn-group actionBtns" role="group"> - <button type="button" class="btn">Insert Custom</button> + <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button> <button type="button" class="btn">Import Action</button> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index f3e592cdb..b19f5699b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import * as _ from 'lodash'; import * as joint from 'jointjs'; -import './palette.function.element'; +import './jointjs/elements/palette.function.element'; +import './jointjs/elements/action.element'; +import './jointjs/elements/board.function.element'; + + @Component({ selector: 'app-designer', @@ -13,6 +16,9 @@ export class DesignerComponent implements OnInit { private controllerSideBar: boolean; private attributesSideBar: boolean; + //to generate Ids for dragged function elements + private fuctionIdCounter=0; + private actionIdCounter=0; boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -90,9 +96,9 @@ export class DesignerComponent implements OnInit { width: 1200, gridSize: 10, drawGrid: true, - background: { - color: 'rgba(0, 255, 0, 0.3)' - }, + // background: { + // color: 'rgba(0, 255, 0, 0.3)' + // }, cellViewNamespace: joint.shapes }); @@ -111,9 +117,50 @@ export class DesignerComponent implements OnInit { this.boardPaper.on('blank:pointerclick', () => { // this.selectedModel = undefined; }); + + this.boardGraph.on('change:position', (cell) => { + + var parentId = cell.get('parent'); + if (!parentId) return; + + var parent = this.boardGraph.getCell(parentId); + + var parentBbox = parent.getBBox(); + var cellBbox = cell.getBBox(); + + console.log("parent ", parentBbox); + console.log("cell ", cellBbox); + if (parentBbox.containsPoint(cellBbox.origin()) && + parentBbox.containsPoint(cellBbox.topRight()) && + parentBbox.containsPoint(cellBbox.corner()) && + parentBbox.containsPoint(cellBbox.bottomLeft())) { + + + // All the four corners of the child are inside + // the parent area. + return; + } + + // Revert the child position. + cell.set('position', cell.previous('position')); + }); } } + insertCustomActionIntoBoard() { + this.actionIdCounter++; + const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter); + this.boardGraph.addCell(element); + } + + createCustomAction(id: string, label: string) { + const element = new joint.shapes.app.ActionElement({ + id: id + }); + element.attr('#label/text', label); + return element; + } + buildPaletteGraphFromList(list: any) { const elements = []; @@ -125,12 +172,22 @@ export class DesignerComponent implements OnInit { return elements; } - createFuctionElementForPalette(label: string) { - const element = new joint.shapes.app.FunctionElement({ - id: label}); - element.attr('#label/text', label); - return element; + const element = new joint.shapes.palette.FunctionElement({ + id: label + }); + element.attr('#label/text', label); + element.attr('type', label); + return element; + } + + createFuctionElementForBoard(id :String, label :string, type :string) { + const boardElement = new joint.shapes.board.FunctionElement({ + id: id + }); + boardElement.attr('#label/text', label); + boardElement.attr('#type/text', type); + return boardElement; } stencilPaperEventListeners() { @@ -175,24 +232,36 @@ export class DesignerComponent implements OnInit { if (mouseupX > target.left && mouseupX < target.left + this.boardPaper.$el.width() && mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) { - const clonedShape = flyShape.clone(); - - clonedShape.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); - this.boardGraph.addCell(clonedShape); + // const clonedShape = flyShape.clone(); + const type = flyShape.attributes.attrs.type; + console.log(type); + + //create board function element of the same type of palette function + //board function element is different in design from the palette function element + this.fuctionIdCounter++; + console.log(this.fuctionIdCounter); + const functionElementForBoard = + this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type); + + functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); + this.boardGraph.addCell(functionElementForBoard); const cellViewsBelow = - this.boardPaper.findViewsFromPoint(clonedShape.getBBox().center()); - + this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); + console.log(cellViewsBelow); if (cellViewsBelow.length) { let cellViewBelow; cellViewsBelow.forEach( cellItem => { - if (cellItem.model.id !== clonedShape.id) { + if (cellItem.model.id !== functionElementForBoard.id) { cellViewBelow = cellItem; } }); + // Prevent recursive embedding. - if (cellViewBelow && cellViewBelow.model.get('parent') !== clonedShape.id) { - cellViewBelow.model.embed(clonedShape); + if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) { + console.log(cellViewBelow); + cellViewBelow.model.embed(functionElementForBoard); } + console.log(this.boardGraph); } } 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 + } +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts deleted file mode 100644 index 6f0ba8b5d..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts +++ /dev/null @@ -1,108 +0,0 @@ -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 app { - 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('app.FunctionElement', { - size: { width: rectWidth, height: rectHeight }, - attrs: { - icon: { - 'xlink:href': 'http://placehold.it/16x16' - } - } -}, { - markup: - `<defs> - <rect id="path-1" 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="#path-1"></use> - <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></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, { - app: { - FunctionElement - } -}); |