gerrit.onap Code Review - ccsdk/cds.git/blob

   1 import * as joint from 'jointjs';
   2 import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
   3 /**
   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
   6  */
   7
   8 declare module 'jointjs' {
   9     namespace shapes {
  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 {
  13             }
  14         }
  15     }
  16 }
  17
  18 const rectWidth = 616;
  19 const rectHeight = 381;
  20 // custom element implementation
  21 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
  22 const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
  23     size: {width: rectWidth, height: rectHeight}
  24 },
  25     {
  26     markup:
  27     `<defs>
  28         <rect id="custom-action" x="0" y="30" width="${rectWidth}" height="${rectHeight}"></rect>
  29         <filter x="-1.7%" y="-2.2%" width="103.5%" height="105.5%" filterUnits="objectBoundingBox" id="filter-2">
  30             <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
  31             <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
  32             <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
  33             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
  34             <feColorMatrix
  35             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"
  36              type="matrix" in="shadowBlurOuter1"></feColorMatrix>
  37         </filter>
  38     </defs>
  39     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  40         <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)">
  41             <g id="workflow-container" transform="translate(401.000000, 137.000000)">
  42                 <g id="Card">
  43                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
  44                     <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
  45                 </g>
  46                 <g id="name">
  47                     <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87,
  48                     0.8954305 87,2 L87,30 L87,30 L0,30 L0,
  49                     2 C-1.3527075e-16,0.8954305 0.8954305,
  50                     2.02906125e-16 2,0 Z" id="Rectangle"
  51                     fill="#C3CDDB"></path>
  52                     <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F">
  53                         <tspan id="label" x="20" y="20">Action 1</tspan>
  54                     </text>
  55                 </g>
  56             </g>
  57         </g>
  58     </g>`
  59 });
  60
  61 Object.assign(joint.shapes, {
  62     app: {
  63         ActionElement
  64     }
  65 });