Skip to main content

Size

The complex control for managing width and height of the Diagram elements

Size control

info

The Size control is available only for the shape, group and swimlane elements of the Diagram editor.

Usage​

{
    type: "size",

    hidden?: boolean, // false by default
    disabled?: boolean, // false by default

    css?: string,
    width?: string | number | "content", // "content" by default
    height?: string | number | "content", // "content" by default
    padding?: string | number, // "0 16px" by default

    label?: string,
    labelAlignment?: "left" | "right" | "center", // "left" by default
    align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "start" by default
    compact?: boolean, // false by default

    // Service properties
    $properties?: object
}

Description​

Basic properties​

  • type - (required) the type of a control. Set it to "size"
  • hidden - (optional) defines whether the control is hidden. false by default
  • disabled - (optional) defines whether the control is enabled (false) or disabled (true). false by default
  • css - (optional) adds style classes to the control
  • width - (optional) the width of the control. "content" by default
  • height - (optional) the height of the control. "content" by default
  • padding - (optional) sets the padding for the content inside the control group. "0 16px" by default
  • label - (optional) specifies a label for the control
  • labelAlignment - (optional) defines the position of the label. "left" by default
  • align - (optional) sets the alignment of controls inside the control group. "start" by default
  • compact - (optional) specifies the compact mode, removes indents and frame. false by default

Service properties​

  • $properties - (optional) allows you to override values of basic controls within a complex control. You can configure the following elements of the Size control based on the basic controls:
    • width - (input) sets the Diagram element width (px)
    • height - (input) sets the Diagram element height (px)

Example​

const editor= new dhx.DiagramEditor("editor_container", {
    type: "mindmap",
    view: {
        editbar: {
            properties: {
                $shape: [
                    {
                        type: "size",
                        label: "Shape size"
                    }
                ]
            }
        }
    }
});