1 import * as joint from 'jointjs';
2 import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
4 * please refer to documentation in file palette.function.element.ts to get more details
5 * about how to create new element type and define it in typescript
8 declare module 'jointjs' {
10 // add new module called "app" under the already existing "shapes" modeule inside jointjs
11 export namespace app {
12 class ActionElement extends joint.shapes.standard.Rectangle {
17 const rectWidth = 616;
18 const rectHeight = 381;
19 // custom element implementation
20 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
21 const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
22 size: {width: rectWidth, height: rectHeight}
27 <rect id="custom-action" x="0" y="30" width="${rectWidth}" height="${rectHeight}"></rect>
28 <filter x="-1.7%" y="-2.2%" width="100%" height="100%" filterUnits="objectBoundingBox" id="filter-2">
29 <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
30 <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
31 <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
32 <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
34 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"
35 type="matrix" in="shadowBlurOuter1"></feColorMatrix>
38 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
39 <g id="7.2-Designer---Insert-Action" transform="translate(-380, 5)">
40 <g id="workflow-container" transform="translate(401, 120)">
42 <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
43 <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
47 fill="#C3CDDB"></path>
48 <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue"
49 font-size="13" font-weight="bold" fill="#1273EB">
50 <tspan id="label" x="0" y="20">Action 1</tspan>
58 Object.assign(joint.shapes, {