Saturday, 26 October 2019

creating my own shape definition in jointjs doesn't work in angular7

I am using angular 7 and joint.js to create my own shape definition. For example,

joint.shapes.devs.Model.define("devs.Type",
  {
    size: {
      width: 300,
      height: "auto"
    }
 });

joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
    attrs: {
        body: {
            rx: 10, // add a corner radius
            ry: 10,
            strokeWidth: 1,
            fill: 'cornflowerblue'
        },
        label: {
            textAnchor: 'left', // align text to left
            refX: 10, // offset text from right edge of model bbox
            fill: 'white',
            fontSize: 18
        }
    }
});






var rect2 = new joint.shapes.examples.CustomRectangle();
var a1 = new joint.shapes.devs.Type(node);

Compiling the code gives me two errors

error TS2339: Property 'Type' does not exist on type 'typeof devs' error TS2341:Property 'examples' does not exist on type 'typeof shapes'.

How would I solve this problem?


Moreover, the customer Link defines a transitionColor method, but it can't be called in paper.on("link:mouseover",...., the error is

Property 'transitionColor' does not exist on type 'Link'.

joint.dia.Link.define(
      "devs.Link",
      {
        attrs: {
          line: {
            connection: true
          },
          wrapper: {
            connection: true,
            strokeWidth: 2,
            strokeLinejoin: "round"
          }
        }
      },
      {
        markup: [
          {
            tagName: "path",
            selector: "wrapper",
            attributes: {
              fill: "none",
              cursor: "pointer",
              stroke: "transparent"
            }
          },
          {
            tagName: "path",
            selector: "line",
            attributes: {
              fill: "none",
              "pointer-events": "none"
            }
          }
        ],
        transitionAsync: function (...args) {
          return new Promise(resolve => {
            this.transition(...args);
            this.on("transition:end", () => {
              resolve();
            });
          });
        },
        transitionColor: function (color, { delay = 0, duration = 100 }) {
          return this.prop("attrs/line/stroke", color);
        },
        transitionOpacity: function (opacity, { delay = 0, duration = 100 }) {
          return this.prop("attrs/line/opacity", opacity);
        }
      }
    );


paper.on("link:mouseover", (linkView: any) => {
      const links = this.graph.getLinks();
      links.map(link => {
        if (link === linkView.model) {
          return;
        }
        link.transitionColor(theme.colors.line.inactive, {duration:500});
        link.toBack()
      });
});


from creating my own shape definition in jointjs doesn't work in angular7

No comments:

Post a Comment