JSFiddle - React, Tailwind, and code Playground

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>

JavaScript

// create paper
  const namespace = joint.shapes;
  const { uniqueId, merge, result, cloneDeep } = joint.util;

  /* patch start */
  const attributesMerger = function(a, b) {
      if (Array.isArray(a)) {
          return cloneDeep(b);
      }
  };

  joint.dia.Cell.prototype.constructor = function(attributes, options) {
      console.log('constructor');
      var defaults;
      var attrs = attributes || {};
      if (typeof this.preinitialize === 'function') {
          // Check to support an older version
          this.preinitialize.apply(this, arguments);
      }
      this.cid = uniqueId('c');
      this.attributes = {};
      if (options && options.collection) this.collection = options.collection;
      if (options && options.parse) attrs = this.parse(attrs, options) || {};
      if ((defaults = result(this, 'defaults'))) {
          //<custom code>
          // Replaced the call to _.defaults with util.merge.
          const customizer = (options && options.mergeArrays === true) ? false : attributesMerger;
          attrs = merge({}, defaults, attrs, customizer);
          //</custom code>
      }
      this.set(attrs, options);
      this.changed = {};
      this.initialize.apply(this, arguments);
  };

  /* patch end */

  const testRect = joint.dia.Element.define('custom.TEST_RECT', {
    array: [],
  }, {
  markup: [
        {
          tagName: 'g',
          selector: 'container',
        },
      ],
  /* 	updateCellFromModel(model) {
      if (model) {
          this.set('array', model.array);
        }
      } */
  });

console.log(testRect.prototype.constructor)


  Object.assign(namespace, {
    custom: { TEST_RECT: testRect, },
  });

  const graph = new joint.dia.Graph({}, { cellNamespace: namespace });


  const a = [{ value: { value: 10, foo: 'bar' }, type: 'test' },{ value: 11, type: 'test' },{ value: 12, type: 'test' }];
  const r = new namespace.custom.TEST_RECT({ array: a...