import type { CornerPlacement } from '../../types';
/**
* 工具栏显示项目。
*
* The item of the toolbar.
*/
export interface ToolbarItem {
/**
* 可以使用 id 来配置内置的工具栏项，可以是 'zoom-in'、'zoom-out'、'auto-fit'、'reset' 等值，也可以配合三方的 iconfont 使用，原理是通过 id 来匹配内置的 svg symbol。See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol。
*
* You can use id to configure the built-in toolbar items, which can be values such as 'zoom-in', 'zoom-out', 'auto-fit', 'reset', etc. One of the two configurations with `marker`. The principle is to match the built-in svg symbol through id. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol.
*/
readonly id: 'zoom-in' | 'zoom-out' | 'redo' | 'undo' | 'edit' | 'delete' | 'auto-fit' | 'export' | 'reset' | string;
/**
* 工具栏项对应的值，在 onClick 中作为回调参数。
*
* The value corresponding to the toolbar item, used as a callback parameter in `onClick`.
*/
readonly value: string;
/**
* The title of the toolbar item. The title will be displayed as a tooltip when the mouse hovers over the item.
*/
readonly title?: string;
}
/**
* 解析 toolbar 的 position 为位置样式。
*
* Parse the position of the toolbar into position style.
* @param position - position
* @returns style
*/
export function parsePositionToStyle(position: CornerPlacement): Partial {
const style: Partial = {
top: 'unset',
right: 'unset',
bottom: 'unset',
left: 'unset',
};
const directions = position.split('-') as ('top' | 'right' | 'bottom' | 'left')[];
directions.forEach((d) => {
style[d] = '8px';
});
style.flexDirection = position.startsWith('top') || position.startsWith('bottom') ? 'row' : 'column';
return style;
}
/**
* 内置默认的 toolbar 的 CSS 样式。
*/
export const TOOLBAR_CSS = `
.g6-toolbar {
position: absolute;
z-index: 100;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 4px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
opacity: 0.65;
}
.g6-toolbar .g6-toolbar-item {
display: inline-block;
width: 16px;
height: 16px;
padding: 4px;
cursor: pointer;
box-sizing: content-box;
}
.g6-toolbar .g6-toolbar-item:hover {
background-color: #f0f0f0;
}
.g6-toolbar .g6-toolbar-item svg {
display: inline-block;
width: 100%;
height: 100%;
pointer-events: none;
}
`;
export const BUILD_IN_SVG_ICON = `
`;