Palette Class

Represents a tool palette control that displays DiagramItem objects grouped into categories. Items from the palette can be added to a diagram by drag-and-drop.

Namespace: MindFusion.Diagramming.Controls
File: Palette.js

 Syntax

JavaScript

// class
Palette.prototype = {}

 Remarks

Content Security Policy
To allow for stricter CSP rules, the library no longer loads CSS scripts automatically. If you use Palette, you must explicitly link the common-ui.css file from distribution's themes folder.

The Palette is an Accordion subclass that displays ItemListView components as its child panels. Each ItemListView displays the items of a palette category.

Call the addCategory method to define a category and create its respective accordion pane. Call addItem to add an item to specified category.

Drag-and-drop operations create a copy of the dragged item, and set its size to newInstanceSize. The copy is created by calling item's clone method. You can override clone to copy property values of custom item subclasses.

Icons in the list are drawn by scaling newInstanceSize down to iconSize. E.g. if a list icon is half the size of the diagram item it creates, its graphic elements such as cells, labels, strokes would be rendered at half scale too (as opposed to rendering with same label / stroke sizes but in smaller bounding rectangle). The scaling code assumes measureUnit of the target diagram and the palette have matching values.

Configuring the control

Palette comes as s a part of the diagramming-controls npm package or the MindFusion.Diagramming.Controls namespace for UMD users.

For npm users simply import the diagramming-controls package:

JavaScript

import * as Controls from '@mindfusion/diagramming-controls';

For UMD users, add references to files from distrbution's /umd folder using <script> tags. Note that the order of the scripts matters.

HTML

<!-- for core Diagramming -->
<script src="Scripts/collections.js" type="text/javascript"></script>
<script src="Scripts/drawing.js" type="text/javascript"></script>
<script src="Scripts/controls.js" type="text/javascript"></script>
<script src="Scripts/graphs.js" type="text/javascript"></script>
<script src="Scripts/animations.js" type="text/javascript"></script>
<script src="Scripts/diagramming.js" type="text/javascript"></script>

<!-- for Palette -->
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="Scripts/common-collections.js" type="text/javascript"></script>
<script src="Scripts/common-ui.js" type="text/javascript"></script>
<script src="Scripts/diagramming-controls.js" type="text/javascript"></script>

Creating the control instance and adding it to an HTML page can be done by calling the static create method:

JavaScript

var palette = MindFusion.Diagramming.Controls.Palette
    .create(document.getElementById("palette"));

Default images for the collapse/expand buttons must be located in an ./icons folder. Alternatively, you can style the control with a predefined css theme, in which case the themes included in the distribution must be located in a ./themes folder and referenced in the head of the HTML document, e.g.

HTML / JavaScript

<link rel="stylesheet" type="text/css" href="themes/common-ui.css" />
<link rel="stylesheet" type="text/css" href="themes/business.css" />
...
palette.theme = "business";

 Inheritance Hierarchy

MindFusion.Common.UI.Accordion
    MindFusion.Diagramming.Controls.Palette