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