Layers

Layer is used to organize related shapes on a diagram control. A layer is a named category of shapes. By assigning shapes to different layers, we can selectively view, print, remove and lock different categories of shapes

Layers in diagram provide a way to change properties of all shapes that have been assigned to that layer. The following properties can be set.

  • Visible
  • Print
  • Active
  • Lock
  • Objects

Visible

The layer’s visible property is used to control the visibility of the elements assigned to the layer.

  • javascript
  • var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse3", width: 40, height: 40, offsetX: 100, offsetY: 300, shape: "ellipse" },
                { name: "Ellipse4", width: 40, height: 40, offsetX: 200, offsetY: 300, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
                // control the visibility of the set of diagram elements
                layers: [
                    { name: "Layer1", visible: true, objects: ["Ellipse1", "Ellipse2"] },
                    { name: "Layer1", visible: false, objects: ["Ellipse3", "Ellipse4"] }
                ]
            });

    Print

    The layer’s print property is used to include or exclude the elements assigned to the layer when the diagram is printed.

    Diagram layer provides the support to Include or exclude the shapes when the diagram is printed.

  • javascript
  • var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse3", width: 40, height: 40, offsetX: 100, offsetY: 300, shape: "ellipse" },
                { name: "Ellipse4", width: 40, height: 40, offsetX: 200, offsetY: 300, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
                //  Include or exclude the shapes when the diagram is printed
                layers: [
                    { name: "Layer1", print: true, objects: ["Ellipse1", "Ellipse2"] },
                    { name: "Layer1", print: false, objects: ["Ellipse3", "Ellipse4"] }
                ]
            });

    Active

    The layer’s active property is used to automatically assign shapes to active layers when the shapes are added to the diagram.

  • javascript
  • var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse3", width: 40, height: 40, offsetX: 100, offsetY: 300, shape: "ellipse" },
                { name: "Ellipse4", width: 40, height: 40, offsetX: 200, offsetY: 300, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
                // set the specific layer as active 
                layers: [
                    { name: "Layer1", active: true },
                    { name: "Layer1", active: false } 
                ]
            });

    Lock

    The layer’s lock property is used to prevent or allow changes to the elements dimension and position.

  • javascript
  • var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse3", width: 40, height: 40, offsetX: 100, offsetY: 300, shape: "ellipse" },
                { name: "Ellipse4", width: 40, height: 40, offsetX: 200, offsetY: 300, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
                // prevent or allow changes to the shapes dimension and position
                layers: [
                    { name: "Layer1", lock: true, objects: ["Ellipse1", "Ellipse2"] },
                    { name: "Layer1", lock: false, objects: ["Ellipse3", "Ellipse4"] }
                ]
            });

    Objects

    The layer’s objects property is used to define the diagram elements to the layer.

  • javascript
  • var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse3", width: 40, height: 40, offsetX: 100, offsetY: 300, shape: "ellipse" },
                { name: "Ellipse4", width: 40, height: 40, offsetX: 200, offsetY: 300, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
                // sets the set of objects will be assigned to specific layers.
                layers: [
                    { name: "Layer1", lock: true, objects: ["Ellipse1", "Ellipse2"] },
                    { name: "Layer1", lock: false, objects: ["Ellipse3", "Ellipse4"] }
                ]
            });

    Add layer at runtime

    Layers can be added at runtime by using public method, addLayers.

    The layer’s name property is used to define the name of the layer.

    The following code illustrates how to add a layer.

  • javascript
  • // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
            // creating the layer collection
            var layers = [{ name: "Layer1", visible: true, objects: ["Ellipse1", "Ellipse2"] }];
            // add the layers to the existing diagram layer collection
            diagram.addLayers(layers)

    Add node to layer at runtime

    nodes can be added to layer at runtime by using public method, addNodeToLayer.

    The following code illustrates how to add a node to layer.

  • javascript
  • // creating the nodes
            var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
            });
            // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
     
            // add the node to the specific layer.
            diagram.addNodeToLayer('Layer1', ['Ellipse1'])

    Remove layer at runtime

    Layers can be removed at runtime by using public method, removeLayers.

    The following code illustrates how to add a layer.

  • javascript
  • // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
            // remove the diagram layers from model 
            diagram.removeLayers([diagram.model.layers[i]]);

    Remove node to layer at runtime

    nodes can be removed from layer at runtime by using public removeNodeToLayer, removeNodeToLayer.

    The layer’s name property is used to define the name of the layer.

    The following code illustrates how to remove a node from layer.

  • javascript
  • // creating the nodes
            var nodes = [
                { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
                { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" }
            ];
            $("#diagram").ejDiagram({
                width: "100%",
                height: "600px",
                nodes: nodes,
            });
            // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
    
            
            // remove the node from the specific layer.
            diagram.removeNodeToLayer('Layer1', ['Ellipse1'])

    Update layer at runtime

    Layers can be updated at runtime by using public updateLayer, updateLayer.

    The following code illustrates how to add a node to layer.

  • javascript
  • // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
            // update the layer objects will be hidden on printing.
            diagram.updateLayer('Layer1', { print: false })