setValues

sets values for Diagram Editor

void setValues(object data);

data

object

object with data fields

Example

const data = $$("diagram").serialize(true);
$$("editor").setValues(data);

Related samples

Diagram Editor: Live Editing

Details

As a parameter the method expects an object with the following fields:

data (array) - an array with block data
links (array) - an array with link data
shapes (array) - an array with all shapes currently used in this Diagram (default and custom ones)
item (object) - a set of the default properties that are applied to Diagram blocks unless they have the corresponding settings of their own
linkItem (object) - a set of the default properties that are applied to Diagram links unless they have the corresponding settings of their own.

const data = {
  data: [ 
    { id: "start", type: "circle", value: "start", x: 0, y: 80 },
    // other blocks
  ],
  links: [
    { source: "start", target: "search", id: 132 },
    // other links
  ],
  shapes: [
    {
      backgroundColor: "#65C0B7", fontColor: "#fff",
      group: "block", id: "circle",
      lineColor: "#65C0B7", name: "Circle",
      svg: "svg_code"
    },
    // other shapes
  ],
  item: { 
    height: 50, width: 100
  },
  linkItem: { 
    arrowSize: 6, arrow: false, 
    mode: "edges", backgroundColor: "magenta"
  }
};
 
$$("editor").setValues(data);