in src/canvastools/ts/CanvasTools/CanvasTools.Editor.ts [723:772]
public addToolbar(container: HTMLDivElement, toolbarSet: ToolbarIconDescription[], iconsPath: string) {
const svg = this.createSVGElement();
container.append(svg);
this.toolbar = new Toolbar(svg);
if (toolbarSet === null || toolbarSet === undefined) {
toolbarSet = Editor.FullToolbarSet;
}
// enable zoom feature in the toolbar
if (this.zoomManager.isZoomEnabled) {
toolbarSet = toolbarSet.concat(Editor.SeparatorIconGroupToolbar).concat(Editor.ZoomIconGroupToolbar);
}
let activeSelector: string;
toolbarSet.forEach((item) => {
if (item.type === ToolbarItemType.SEPARATOR) {
this.toolbar.addSeparator();
} else {
const toolbarItem: IToolbarIcon = {
action: item.action,
iconUrl: iconsPath + item.iconFile,
tooltip: item.tooltip,
key: item.key,
width: item.width,
height: item.height,
};
const actionFn = (action) => {
item.actionCallback(action, this.regionsManager, this.areaSelector, this.zoomManager);
};
if (item.type === ToolbarItemType.SELECTOR) {
this.toolbar.addSelector(toolbarItem, actionFn);
if (item.activate) {
activeSelector = item.action;
}
} else if (item.type === ToolbarItemType.SWITCH) {
this.toolbar.addSwitch(toolbarItem, actionFn);
this.toolbar.setSwitch(item.action, item.activate);
} else if (item.type === ToolbarItemType.TRIGGER) {
this.toolbar.addTrigger(toolbarItem, actionFn);
}
}
});
this.toolbar.select(activeSelector);
}