copy & paste problem

[james-ep01]

Introduction

To copy and paste objects, the properties of attr become strange. Then there is the missing attr. (Not a user-defined function)
What is the problem?
This problem occurs when using export json, so the exported json cannot be called and used as it is.

My Object Internal Code:
markup: [
{ tagName: 'image', selector: 'image' },
{ tagName: 'text', selector: 'label' },
{ tagName: 'text', selector: 'label_line' },
{ tagName: 'text', selector: 'label_load' },
{ tagName: 'text', selector: 'label_ex1' },
{ tagName: 'text', selector: 'label_ex2' },
],
attrs: {
image: {
href: ''
},
root: {
dataTooltip: '', dataTooltipPosition: 'left'
},
label: {
x: 'calc(w/2)', y:'calc(h+20)', fill: '#8f8f8f', text: '' , fontSize: 12,
},
label_line:{
x: 'calc(w/2)', y:50, text:'',fill:'#8f8f8f', fontSize: 11, textAnchor:'middle',
},
label_load:{
x: 'calc(w/2)', y:'calc(h-40)',text: '',fontSize: 11, fill:'#8f8f8f',textAnchor:'middle',
},
label_ex1: {
x: 'calc(w/2)', y:'calc(h / 2+ 30)',text:'', fontSize:12, fill:'blue', textAnchor: 'middle',
},
label_ex2: {
x: 'calc(w/2)', y:'calc(h / 2 + 40)',text:'', fontSize:11, fill:'red', textAnchor: 'middle',
},
},

and i made my object is
var hwb = new MyModel();
hwb.attr('root/dataTooltip', 'My Tooltip');
hwb.attr('label/text', 'lbl 1' );
hwb.attr('label_line/text', 'lbl 2' );
hwb.attr('label_load/text', 'lbl 3' );
hwb.attr('label_ex1/text', 'lbl 4' );
hwb.attr('label_ex2/text', 'lbl 5' );

1. Copied Object Properties
   

2. Properties of pasted objects
   

The label of the copied object property is changed and pasted from fill:'#8f8f8f' to fill:'#33333'.
And the attr of label_line, label_load, label_ex1, and label_ex2 all disappear except text.

Doesn't the attr function change only that property?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Since I am not able to reproduce I assume It's a problem in how you define your shape.

Please make sure that the constructor() and initialize() methods pass the arguments to the super class. e.g.

class MyElement extends dia.Element {
   initialize(...args) {
       super.initialize(...args);
       /* ... *.
   }
}

[james-ep01]

my object is

var MyModel = joint.shapes.standard.Image.extend({ 
	initialize: function() { 
		joint.shapes.standard.Image.prototype.initialize.apply(this, arguments); 
	},
    defaults: joint.util.defaultsDeep({ 
	markup: [
		{ tagName: 'image', selector: 'image'  },
		{ tagName: 'text', selector: 'label'  },
		{ tagName: 'text', selector: 'label_line'  },
		{ tagName: 'text', selector: 'label_load'  },
		{ tagName: 'text', selector: 'label_ex1'  },
		{ tagName: 'text', selector: 'label_ex2'  },
	],
	type: 'standard.Image', 
	attrs: {
		image: {
		  href: ''
		},
		root: {
			dataTooltip: 'My ToolTip', dataTooltipPosition: 'left' 
		},
		label: {
			x: 'calc(w/2)', y:'calc(h+20)', text: '' ,  fill: '#8F8F8F',  fontSize: 12,	
		}, 
		label_line:{
			x: 'calc(w/2)', y:50, text:'LINE',fontSize: 11, fill:'#8F8F8F', textAnchor:'middle',
		},
		label_load:{
			x: 'calc(w/2)', y:'calc(h-40)',text: 'LOAD',fontSize: 11, fill:'#8F8F8F',textAnchor:'middle',
		}, 
		label_ex1: {
			x: 'calc(w/2)', y:'calc(h / 2+ 30)',text:'', fontSize:12, fill:'blue', textAnchor: 'middle',
		},
		label_ex2: {
			x: 'calc(w/2)', y:'calc(h / 2 + 40)',text:'', fontSize:11, fill:'red', textAnchor: 'middle',
		},
	},  
	
	
	spec:{
		// something. 
	},  
	ports: {
	groups: {
		//.....................
		},
		items: []
	},
}, joint.shapes.standard.Image.prototype.defaults),

});

and my instance is

var hwb = new MyModel();
hwb.attr('image/href', svgFile );
hwb.attr('root/dataTooltip', 'My Tooltip');
hwb.attr('label/text', 'lbl 1' );
hwb.attr('label_line/text', 'lbl 2' );
hwb.attr('label_load/text', 'lbl 3' );
hwb.attr('label_ex1/text', 'lbl 4' );
hwb.attr('label_ex2/text', 'lbl 5' );

Thanks for your help.

[kumilingus]

The type is incorrect. Your MyModel class is currently set to standard.Image, but it should be MyModel (or an appropriate equivalent).

As it stands, serializing the element will result in it being recreated as standard.Image.

[james-ep01]

I've tried all sorts of ways, but I can't.
But when I forced it back in after initializing the object, it's still there again.

As expected, it's not easy. I have to experience it myself.
What's worrisome is what if it doesn't work after the update patch later.

[kumilingus]

You just need to change the type and setup the namespaces (cellNamespace, cellViewNamespace).
See our custom shapes tutorial.