preview

Description

Optional. An object that configures the preview of items

Usage

preview?: {
    scale?: number,
    gap?: string | number
}

Parameters

• scale - (optional) defines the scale of items rendered in the shapebar of the editor
• gap - (optional) specifies the space between the items rendered in the shapebar

Default config

preview: {
    scale: 0.5,
    gap: "6px 8px"
    // sets 6px gap for the top and bottom sides and 8px gap for the right and left sides
};

Example

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // shapebar: true, // displays default Shapebar
        // or configure Shapebar via object
        shapebar: {
            preview: {
               scale: 0.65,
               gap: 8
            }
        }
    }
});

Details

The values of the gap and scale properties can be redefined for a separate shape via the gap and scale attributes of the preview property of the shape object:

const defaults = {
    rectangle: {
        preview: {
            scale: 0.72, 
            gap: 8
        }
    }
}
 
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
           preview: {
               scale: 0.65,
               gap: 2
            }
        }
    },
    defaults        
});

Related article: Shapebar

Change log: Added in v6.0