import * as joint from 'jointjs';
/**
* The function element in the palette should contain image and text with style- that is why
* it requires a custom element.
* The following code declares a type for typescript to accept "app.FunctionElement"
* and create an element implementation , then joins the app module inside shapes module for javascript to work.
* please refer to the official example :
* https://github.com/clientIO/joint/blob/master/demo/ts-demo/custom.ts
*/
declare module 'jointjs' {
namespace shapes {
// add new module called "app" under the already existing "shapes" modeule inside jointjs
export namespace palette {
class FunctionElement extends joint.shapes.standard.Rectangle {
}
}
}
}
const rectWidth = 260;
const rectHeight = 60;
// custom element implementation
// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
size: { width: rectWidth, height: rectHeight },
attrs: {
icon: {
'xlink:href': 'http://placehold.it/16x16'
},
type: ''
}
}, {
markup:
`
`
// [{
// tagName: 'rect',
// selector: 'body',
// }, {
// tagName: 'text',
// selector: 'label'
// }, {
// tagName: 'image',
// selector: 'icon'
// }, {
// tagName: 'image',
// selector: 'drag-handle'
// }
// ]
});
Object.assign(joint.shapes, {
palette: {
FunctionElement
}
});