1 files changed, 64 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
+    }
+});