附上文档连接 https://resources.jointjs.com/tutorial/custom-attributes
代码在最后
element.attr('body/strokeWidth', 2);
element.prop('id', "自己得id");/** * 改写 jointjs.shapes.uml */ import * as joint from 'jointjs'; // import { dia, shapes, util } from 'jointjs'; const flowModel = (config) => { let baseOption = { size: { 230, height: 100 }, name: [], attributes: [], image: '', attrs: { rect: { 240 }, '.': { magnet: false }, '.uml-class-name-img': { ref: '.uml-class-name-rect', 'ref-y': 0.5, 'ref-x': 10, 'y-alignment': 'middle', 20, height: 20 }, /** ***禁用模型配色 默认***** */ '.uml-class-name-rect': { stroke: '#d1d1d1', 'stroke-width': 1, fill: '#f1f1f1' }, '.uml-class-attrs-rect': { stroke: '#d1d1d1', 'stroke-width': 1, fill: '#fff' }, /** ***当前高亮模型配色***** */ // '.uml-class-name-rect': { 'stroke': '#916FA1', 'stroke-width': 1, 'fill': '#E1D5E6' }, // '.uml-class-attrs-rect': { 'stroke': '#916FA1', 'stroke-width': 1, 'fill': '#fff' }, /** 配色 */ // '.uml-class-name-rect': { 'stroke': '#96ADCE', 'stroke-width': 1, 'fill': '#DAE8FB' }, // '.uml-class-attrs-rect': { 'stroke': '#96ADCE', 'stroke-width': 1, 'fill': '#fff' }, /** 配色 */ // '.uml-class-name-rect': { 'stroke': '#E7C078', 'stroke-width': 1, 'fill': '#FFF1CE' }, // '.uml-class-attrs-rect': { 'stroke': '#E7C078', 'stroke-width': 1, 'fill': '#fff' }, /** 配色 */ // '.uml-class-name-rect': { 'stroke': '#F7CECD', 'stroke-width': 1, 'fill': '#FEE6CD' }, // '.uml-class-attrs-rect': { 'stroke': '#F7CECD', 'stroke-width': 1, 'fill': '#fff' }, /** 配色 */ // '.uml-class-name-rect': { 'stroke': '#9FC38C', 'stroke-width': 1, 'fill': '#D5E8D5' }, // '.uml-class-attrs-rect': { 'stroke': '#9FC38C', 'stroke-width': 1, 'fill': '#fff' }, '.uml-class-name-text': { ref: '.uml-class-name-rect', 'ref-y': 0.5, 'ref-x': 0.5, 'text-anchor': 'middle', 'y-alignment': 'middle', 'font-weight': 'bold', fill: '#000' }, '.uml-class-attrs-text': { ref: '.uml-class-attrs-rect', 'ref-y': 0.5, 'ref-x': 10, fill: '#000', 'y-alignment': 'middle' } }, ports: { groups: { in: { position: { name: 'left' }, attrs: { // '.port-label': { // fill: '#000' // }, '.port-body': { fill: '#999', stroke: '#fff', 'stroke-width': 2, 'ref-x': -20, 'ref-y': -8, magnet: true } // text: { // text: '' // } } // label: { // position: { // name: 'left', // args: { // y: 10 // } // } // } }, out: { position: { name: 'right' }, attrs: { // '.port-label': { // fill: '#000' // }, '.port-body': { fill: '#999', stroke: '#fff', 'stroke-width': 2, 'ref-y': -8, magnet: true } // text: { // text: '' // } } // label: { // position: { // name: 'right', // args: { // y: 10 // } // } // } } } } }; let option = Object.assign(baseOption, config); const result = joint.shapes.basic.Generic.extend({ markup: [ '<g class="rotatable">', '<g class="scalable">', '<rect class="uml-class-name-rect"/><rect class="uml-class-attrs-rect"/>', '</g>', '<text class="uml-class-name-text"/><text class="uml-class-attrs-text"/>', '<image class="uml-class-name-img" />', '</g>' ].join(''), portMarkup: `<g class="port-body"> <rect width="20" height="16" stroke="none"></rect> <path d="M8 4 L12 8 L8 12" fill="none"></path> </g>`, defaults: joint.util.defaultsDeep(option, joint.shapes.basic.Rect.prototype.defaults), initialize: function() { this.on( 'change:name change:attributes', function() { this.updateRectangles(); this.trigger('uml-update'); }, this ); this.updateRectangles(); joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments); this.on('change:inPorts change:outPorts', this.updatePortItems, this); this.updatePortItems(); }, getClassName() { return this.get('name'); }, updateRectangles() { const attrs = this.get('attrs'); const rects = [{ type: 'name', text: this.getClassName() }, { type: 'attrs', text: this.get('attributes') }]; const image = { type: 'image', 'xlink:href': this.get('image') }; let offsetY = 0; rects.forEach((rect) => { const lines = Array.isArray(rect.text) ? rect.text : [rect.text]; const rectHeight = lines.length * 40 + 20; attrs[`.uml-class-${rect.type}-text`].text = lines.join(' '); attrs[`.uml-class-${rect.type}-rect`].height = rectHeight; attrs[`.uml-class-${rect.type}-rect`].transform = `translate(0,${offsetY})`; offsetY += rectHeight; }); attrs['.uml-class-name-img']['xlink:href'] = image['xlink:href']; }, updatePortItems(model, changed, opt) { // Make sure all ports are unique. const inPorts = joint.util.uniq(this.get('inPorts')); const outPorts = joint.util.difference(joint.util.uniq(this.get('outPorts')), inPorts); const inPortItems = this.createPortItems('in', inPorts); const outPortItems = this.createPortItems('out', outPorts); this.prop('ports/items', inPortItems.concat(outPortItems), joint.util.assign({ rewrite: true }, opt)); }, createPortItem(group, port) { return { id: port, group, attrs: { '.port-label': { text: port } } }; }, createPortItems(group, ports) { return joint.util.toArray(ports).map(this.createPortItem.bind(this, group)); }, _addGroupPort(port, group, opt) { const ports = this.get(group); return this.set(group, Array.isArray(ports) ? ports.concat(port) : [port], opt); }, addOutPort(port, opt) { return this._addGroupPort(port, 'outPorts', opt); }, addInPort(port, opt) { return this._addGroupPort(port, 'inPorts', opt); }, _removeGroupPort(port, group, opt) { return this.set(group, joint.util.without(this.get(group), port), opt); }, removeOutPort(port, opt) { return this._removeGroupPort(port, 'outPorts', opt); }, removeInPort(port, opt) { return this._removeGroupPort(port, 'inPorts', opt); }, _changeGroup(group, properties, opt) { return this.prop(`ports/groups/${group}`, joint.util.isObject(properties) ? properties : {}, opt); }, changeInGroup(properties, opt) { return this._changeGroup('in', properties, opt); }, changeOutGroup(properties, opt) { return this._changeGroup('out', properties, opt); } }); return new result(); }; export const createNode = (config) => { return flowModel(config); }; export const ClassView = joint.dia.ElementView.extend({ initialize() { joint.dia.ElementView.prototype.initialize.apply(this, arguments); this.listenTo(this.model, 'uml-update', function() { this.update(); this.resize(); }); } });
const cell = createNode(config);
cell.prop('id', 4);