You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
13 KiB
38 lines
13 KiB
4 months ago
|
import type { CornerPlacement } from '../../types';
|
||
|
|
/**
|
||
|
|
* <zh/> 工具栏显示项目。
|
||
|
|
*
|
||
|
|
* <en/> The item of the toolbar.
|
||
|
|
*/
|
||
|
|
export interface ToolbarItem {
|
||
|
|
/**
|
||
|
|
* <zh/> 可以使用 id 来配置内置的工具栏项，可以是 'zoom-in'、'zoom-out'、'auto-fit'、'reset' 等值，也可以配合三方的 iconfont 使用，原理是通过 id 来匹配内置的 svg symbol。See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol。
|
||
|
|
*
|
||
|
|
* <en/> 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;
|
||
|
|
/**
|
||
|
|
* <zh/> 工具栏项对应的值，在 onClick 中作为回调参数。
|
||
|
|
*
|
||
|
|
* <en/> The value corresponding to the toolbar item, used as a callback parameter in `onClick`.
|
||
|
|
*/
|
||
|
|
readonly value: string;
|
||
|
|
/**
|
||
|
|
* <en/> The title of the toolbar item. The title will be displayed as a tooltip when the mouse hovers over the item.
|
||
|
|
*/
|
||
|
|
readonly title?: string;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* <zh/> 解析 toolbar 的 position 为位置样式。
|
||
|
|
*
|
||
|
|
* <en/> Parse the position of the toolbar into position style.
|
||
|
|
* @param position - position
|
||
|
|
* @returns style
|
||
|
|
*/
|
||
|
|
export declare function parsePositionToStyle(position: CornerPlacement): Partial<CSSStyleDeclaration>;
|
||
|
|
/**
|
||
|
|
* 内置默认的 toolbar 的 CSS 样式。
|
||
|
|
*/
|
||
|
|
export declare const TOOLBAR_CSS = "\n .g6-toolbar {\n position: absolute;\n z-index: 100;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n opacity: 0.65;\n }\n .g6-toolbar .g6-toolbar-item {\n display: inline-block;\n width: 16px;\n height: 16px;\n padding: 4px;\n cursor: pointer;\n box-sizing: content-box;\n }\n\n .g6-toolbar .g6-toolbar-item:hover {\n background-color: #f0f0f0;\n }\n\n .g6-toolbar .g6-toolbar-item svg {\n display: inline-block;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n";
|
||
|
|
export declare const BUILD_IN_SVG_ICON = "\n <svg>\n <symbol id=\"zoom-in\" viewBox=\"64 64 896 896\">\n <path d=\"M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z\"></path>\n </symbol>\n <symbol id=\"zoom-out\" viewBox=\"64 64 896 896\">\n <path d=\"M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z\"></path>\n </symbol>\n <symbol id=\"edit\" viewBox=\"64 64 896 896\">\n <path d=\"M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z\"></path>\n </symbol>\n <symbol id=\"delete\" viewBox=\"64 64 896 896\">\n <path d=\"M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z\"></path>\n </symbol>\n <symbol id=\"redo\" viewBox=\"64 64 896 896\">\n <path d=\"M758.2 839.1C851.8 765.9 912 651.9 912 523.9 912 303 733.5 124.3 512.6 124 291.4 123.7 112 302.8 112 523.9c0 125.2 57.5 236.9 147.6 310.2 3.5 2.8 8.6 2.2 11.4-1.3l39.4-50.5c2.7-3.4 2.1-8.3-1.2-11.1-8.1-6.6-15.9-13.7-23.4-21.2a318.64 318.64 0 01-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 01-68.6 101.7c-9.3 9.3-19.1 18-29.3 26L668.2 724a8 8 0 00-14.1 3l-39.6 162.2c-1.2 5 2.6 9.9 7.7 9.9l167 .8c6.7 0 10.5-7.7 6.3-12.9l-37.3-47.9z\"></path>\n </symbol>\n <symbol id=\"undo\" viewBox=\"64 64 896 896\">\n <path d=\"M511.4 124C290.5 124.3 112 303 112 523.9c0 128 60.2 242 153.8 315.2l-37.5 48c-4.1 5.3-.3 13 6.3 12.9l167-.8c5.2 0 9-4.9 7.7-9.9L369.8 727a8 8 0 00-14.1-3L315 776.1c-10.2-8-20-16.7-29.3-26a318.64 318.64 0 01-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 01-68.6 101.7c-7.5 7.5-15.3 14.5-23.4 21.2a7.93 7.93 0 00-1.2 11.1l39.4 50.5c2.8 3.5 7.9 4.1 11.4 1.3C854.5 760.8 912 649.1 912 523.9c0-221.1-179.4-400.2-400.6-399.9z\"></path>\n </symbol>\n <symbol id=\"export\" viewBox=\"64 64 896 896\">\n <path d=\"M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.
|