{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/wip/breadcrumb","result":{"data":{"site":{"siteMetadata":{"title":"GUI","galleryMenuCloseAll":false,"examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"","en":""}},{"slug":"chart-ui","icon":"gallery","title":{"zh":"图表组件","en":"Chart UI"}},{"slug":"basic-ui","icon":"gallery","title":{"zh":"基础 UI","en":"Basic UI"}},{"slug":"others","icon":"other","title":{"zh":"其它 UI","en":"Other UI"}},{"slug":"wip","icon":"other","title":{"zh":"建设中","en":"Working in progress"}}],"playground":{"container":null,"playgroundDidMount":null,"playgroundWillUnmount":null,"dependencies":null,"devDependencies":{"typescript":"latest"},"htmlCodeTemplate":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/examples/gallery"},"frontmatter":{"title":"Gallery","order":-1,"icon":"other"},"parent":{"__typename":"File","relativePath":"gallery/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/gallery"},"frontmatter":{"title":"所有图表","order":-1,"icon":"other"},"parent":{"__typename":"File","relativePath":"gallery/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/marker"},"frontmatter":{"title":"Marker","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/marker/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/marker"},"frontmatter":{"title":"Marker","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/marker/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/axis"},"frontmatter":{"title":"Axis","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/axis/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/axis"},"frontmatter":{"title":"坐标轴","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/axis/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/checkbox"},"frontmatter":{"title":"Checkbox","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/checkbox/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/checkbox"},"frontmatter":{"title":"单选框","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/checkbox/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/tag"},"frontmatter":{"title":"Tag","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/tag/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/tag"},"frontmatter":{"title":"标签","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/tag/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/legend"},"frontmatter":{"title":"Legend","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/legend/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/legend"},"frontmatter":{"title":"图例","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/legend/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/others/sparkline"},"frontmatter":{"title":"Sparkline","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"others/sparkline/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/others/sparkline"},"frontmatter":{"title":"Sparkline","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"others/sparkline/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/button"},"frontmatter":{"title":"Button","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/button/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/button"},"frontmatter":{"title":"按钮","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/button/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/others/page-navigator"},"frontmatter":{"title":"Page Navigator","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"others/page-navigator/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/others/page-navigator"},"frontmatter":{"title":"Page Navigator","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"others/page-navigator/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/scrollbar"},"frontmatter":{"title":"Scrollbar","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/scrollbar/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/scrollbar"},"frontmatter":{"title":"滚动条","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/scrollbar/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/wip/breadcrumb"},"frontmatter":{"title":"Breadcrumb","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"wip/breadcrumb/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/wip/breadcrumb"},"frontmatter":{"title":"面包屑","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"wip/breadcrumb/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/slider"},"frontmatter":{"title":"Slider","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/slider/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/slider"},"frontmatter":{"title":"缩略轴","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/slider/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/timeline"},"frontmatter":{"title":"Timeline","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/timeline/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/timeline"},"frontmatter":{"title":"Timeline","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/timeline/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/tooltip"},"frontmatter":{"title":"Tooltip","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/tooltip/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/tooltip"},"frontmatter":{"title":"Tooltip","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/tooltip/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/crosshair"},"frontmatter":{"title":"Crosshair","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/crosshair/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/crosshair"},"frontmatter":{"title":"Crosshair","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/crosshair/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/switch"},"frontmatter":{"title":"Switch","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/switch/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/switch"},"frontmatter":{"title":"开关选择器","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/switch/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/poptip"},"frontmatter":{"title":"Poptip","order":10,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/poptip/index.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/poptip"},"frontmatter":{"title":"Poptip","order":10,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/poptip/index.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/button/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/button/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/button/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/button/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/checkbox/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/checkbox/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/checkbox/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/checkbox/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/marker/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/marker/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/marker/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/marker/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/switch/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/switch/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/switch/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/switch/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/basic-ui/tag/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/tag/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/basic-ui/tag/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"basic-ui/tag/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/axis/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/axis/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/axis/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/axis/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/crosshair/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/crosshair/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/crosshair/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/crosshair/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/poptip/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/poptip/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/poptip/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/poptip/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/legend/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/legend/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/legend/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/legend/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/scrollbar/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/scrollbar/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/scrollbar/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/scrollbar/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/slider/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/slider/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/slider/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/slider/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/chart-ui/tooltip/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/tooltip/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/chart-ui/tooltip/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"chart-ui/tooltip/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/others/page-navigator/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"others/page-navigator/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/others/page-navigator/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"others/page-navigator/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/others/sparkline/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"others/sparkline/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/others/sparkline/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"others/sparkline/API.zh.md"}}},{"node":{"fields":{"slug":"/en/examples/wip/breadcrumb/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"wip/breadcrumb/API.en.md"}}},{"node":{"fields":{"slug":"/zh/examples/wip/breadcrumb/API"},"frontmatter":{"title":"","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"wip/breadcrumb/API.zh.md"}}}]}},"pageContext":{"allDemos":[{"relativePath":"chart-ui/axis/demo/helix.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/helix.ts","order":10,"filename":"helix.ts","title":{"zh":"螺旋坐标轴","en":"Helix axis"},"screenshot":"","source":"","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([], factory);\n } else if (typeof exports !== \"undefined\") {\n factory();\n } else {\n var mod = {\n exports: {}\n };\n factory();\n global.helix = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function () {\n \"use strict\";\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"basic-ui/button/demo/custom-button.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/button/demo/custom-button.ts","order":2,"filename":"custom-button.ts","title":{"zh":"自定义 button","en":"Custom button"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Button, Marker } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst button = new Button({\n style: {\n x: 50,\n y: 50,\n text: 'Custom Button',\n type: 'primary',\n marker: (x, y, size) => {\n const r = size * 2;\n const path = [];\n for (let i = 0; i < 5; i++) {\n path.push([\n i === 0 ? 'M' : 'L',\n (Math.cos(((18 + i * 72) * Math.PI) / 180) * r) / 2 + x,\n (-Math.sin(((18 + i * 72) * Math.PI) / 180) * r) / 2 + y,\n ]);\n path.push([\n 'L',\n (Math.cos(((54 + i * 72) * Math.PI) / 180) * r) / 4 + x,\n (-Math.sin(((54 + i * 72) * Math.PI) / 180) * r) / 4 + y,\n ]);\n }\n path.push(['Z']);\n return path;\n },\n padding: 4,\n markerSpacing: 2,\n // ellipsis: true,\n buttonStyle: {\n default: {\n radius: 5,\n stroke: '#000',\n },\n active: {\n stroke: '#eb913a',\n fill: '#fff',\n },\n },\n textStyle: {\n default: {\n fill: '#fff',\n },\n active: {\n fill: '#eb913a',\n },\n },\n markerStyle: {\n default: {\n fill: '#fff',\n size: 12,\n },\n active: {\n fill: '#eb913a',\n size: 12,\n },\n },\n },\n});\n\ncanvas.appendChild(button);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.customButton = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var button = new _gui.Button({\n style: {\n x: 50,\n y: 50,\n text: 'Custom Button',\n type: 'primary',\n marker: function marker(x, y, size) {\n var r = size * 2;\n var path = [];\n\n for (var i = 0; i < 5; i++) {\n path.push([i === 0 ? 'M' : 'L', Math.cos((18 + i * 72) * Math.PI / 180) * r / 2 + x, -Math.sin((18 + i * 72) * Math.PI / 180) * r / 2 + y]);\n path.push(['L', Math.cos((54 + i * 72) * Math.PI / 180) * r / 4 + x, -Math.sin((54 + i * 72) * Math.PI / 180) * r / 4 + y]);\n }\n\n path.push(['Z']);\n return path;\n },\n padding: 4,\n markerSpacing: 2,\n // ellipsis: true,\n buttonStyle: {\n default: {\n radius: 5,\n stroke: '#000'\n },\n active: {\n stroke: '#eb913a',\n fill: '#fff'\n }\n },\n textStyle: {\n default: {\n fill: '#fff'\n },\n active: {\n fill: '#eb913a'\n }\n },\n markerStyle: {\n default: {\n fill: '#fff',\n size: 12\n },\n active: {\n fill: '#eb913a',\n size: 12\n }\n }\n }\n });\n canvas.appendChild(button);\n});","postFrontmatter":{"en":{"title":"Button","order":302},"zh":{"title":"按钮","order":302}}},{"relativePath":"basic-ui/button/demo/disabled-button.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/button/demo/disabled-button.ts","order":4,"filename":"disabled-button.ts","title":{"zh":"禁用 button","en":"Disabled button"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Button } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst button = new Button({\n style: {\n x: 50,\n y: 40,\n text: 'Disabled',\n textStyle: {\n default: {\n fill: '#ce2c1e',\n fontWeight: 'bold',\n fontFamily: 'Helvetica',\n },\n },\n buttonStyle: {\n default: {\n fill: '#fcf1f0',\n opacity: 1,\n stroke: '#ce2c1e',\n lineWidth: 1,\n radius: 5,\n },\n },\n disabled: true,\n },\n});\n\ncanvas.appendChild(button);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.disabledButton = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var button = new _gui.Button({\n style: {\n x: 50,\n y: 40,\n text: 'Disabled',\n textStyle: {\n default: {\n fill: '#ce2c1e',\n fontWeight: 'bold',\n fontFamily: 'Helvetica'\n }\n },\n buttonStyle: {\n default: {\n fill: '#fcf1f0',\n opacity: 1,\n stroke: '#ce2c1e',\n lineWidth: 1,\n radius: 5\n }\n },\n disabled: true\n }\n });\n canvas.appendChild(button);\n});","postFrontmatter":{"en":{"title":"Button","order":302},"zh":{"title":"按钮","order":302}}},{"relativePath":"basic-ui/button/demo/ellipsis-button.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/button/demo/ellipsis-button.ts","order":1,"filename":"ellipsis-button.ts","title":{"zh":"简单按钮, 文本超长省略","en":"Simple button, ellipsis"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Button } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst button = new Button({\n style: {\n x: 50,\n y: 50,\n width: 60,\n text: 'Simple Button',\n ellipsis: true,\n },\n});\n\ncanvas.appendChild(button);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.ellipsisButton = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var button = new _gui.Button({\n style: {\n x: 50,\n y: 50,\n width: 60,\n text: 'Simple Button',\n ellipsis: true\n }\n });\n canvas.appendChild(button);\n});","postFrontmatter":{"en":{"title":"Button","order":302},"zh":{"title":"按钮","order":302}}},{"relativePath":"basic-ui/button/demo/marker-button.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/button/demo/marker-button.ts","order":3,"filename":"marker-button.ts","title":{"zh":"图标按钮 button","en":"Marker button"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Button, Marker } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst button = new Button({\n style: {\n x: 50,\n y: 50,\n text: '',\n type: 'primary',\n height: 40,\n width: 40,\n marker: (x, y, r) => {\n const path = [];\n for (let i = 0; i < 5; i++) {\n path.push([\n i === 0 ? 'M' : 'L',\n (Math.cos(((18 + i * 72) * Math.PI) / 180) * r) / 2 + x,\n (-Math.sin(((18 + i * 72) * Math.PI) / 180) * r) / 2 + y,\n ]);\n path.push([\n 'L',\n (Math.cos(((54 + i * 72) * Math.PI) / 180) * r) / 4 + x,\n (-Math.sin(((54 + i * 72) * Math.PI) / 180) * r) / 4 + y,\n ]);\n }\n path.push(['Z']);\n return path;\n },\n padding: 0,\n markerSpacing: 0,\n // ellipsis: true,\n buttonStyle: {\n default: {\n radius: 20,\n stroke: '#000',\n },\n active: {\n stroke: '#c0365a',\n fill: '#fff',\n },\n },\n textStyle: {\n default: {\n fill: '#fff',\n },\n active: {\n fill: '#c0365a',\n },\n },\n markerStyle: {\n default: {\n fill: '#fff',\n size: 40,\n },\n active: {\n fill: '#c0365a',\n size: 40,\n },\n },\n },\n});\n\ncanvas.appendChild(button);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.markerButton = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var button = new _gui.Button({\n style: {\n x: 50,\n y: 50,\n text: '',\n type: 'primary',\n height: 40,\n width: 40,\n marker: function marker(x, y, r) {\n var path = [];\n\n for (var i = 0; i < 5; i++) {\n path.push([i === 0 ? 'M' : 'L', Math.cos((18 + i * 72) * Math.PI / 180) * r / 2 + x, -Math.sin((18 + i * 72) * Math.PI / 180) * r / 2 + y]);\n path.push(['L', Math.cos((54 + i * 72) * Math.PI / 180) * r / 4 + x, -Math.sin((54 + i * 72) * Math.PI / 180) * r / 4 + y]);\n }\n\n path.push(['Z']);\n return path;\n },\n padding: 0,\n markerSpacing: 0,\n // ellipsis: true,\n buttonStyle: {\n default: {\n radius: 20,\n stroke: '#000'\n },\n active: {\n stroke: '#c0365a',\n fill: '#fff'\n }\n },\n textStyle: {\n default: {\n fill: '#fff'\n },\n active: {\n fill: '#c0365a'\n }\n },\n markerStyle: {\n default: {\n fill: '#fff',\n size: 40\n },\n active: {\n fill: '#c0365a',\n size: 40\n }\n }\n }\n });\n canvas.appendChild(button);\n});","postFrontmatter":{"en":{"title":"Button","order":302},"zh":{"title":"按钮","order":302}}},{"relativePath":"basic-ui/button/demo/simple-button.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/button/demo/simple-button.ts","order":0,"filename":"simple-button.ts","title":{"zh":"简单按钮 text button","en":"Simple text button"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Button } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst button = new Button({\n style: {\n x: 50,\n y: 50,\n text: 'Simple Button',\n },\n});\n\ncanvas.appendChild(button);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.simpleButton = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var button = new _gui.Button({\n style: {\n x: 50,\n y: 50,\n text: 'Simple Button'\n }\n });\n canvas.appendChild(button);\n});","postFrontmatter":{"en":{"title":"Button","order":302},"zh":{"title":"按钮","order":302}}},{"relativePath":"basic-ui/checkbox/demo/triangle.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/checkbox/demo/triangle.ts","order":-1,"filename":"triangle.ts","source":"import { Canvas } from '@antv/g';\nimport { Checkbox } from '@antv/gui';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst checkbox = new Checkbox({\n style: {\n x: 50,\n y: 50,\n label: {\n text: '单选框',\n },\n },\n});\n\ncanvas.appendChild(checkbox);\n\n// 自定义交互\nlet checked = false;\ncheckbox.on('click', (e) => {\n if (e.target.className.includes('checkbox-box')) {\n checked = !checked;\n checkbox.update({\n checked,\n });\n }\n});\n\ncheckbox.on('mousemove', (e) => {\n if (e.target.className.includes('checkbox-box')) {\n checkbox.update({\n boxStyle: {\n stroke: '#3471F9',\n },\n });\n }\n});\n\ncheckbox.on('mouseleave', (e) => {\n if (!checked) {\n checkbox.update({\n boxStyle: {\n stroke: '#dadada',\n },\n });\n }\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/gui\", \"@antv/g-canvas\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/gui\"), require(\"@antv/g-canvas\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gui, global.gCanvas);\n global.triangle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gui, _gCanvas) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var checkbox = new _gui.Checkbox({\n style: {\n x: 50,\n y: 50,\n label: {\n text: '单选框'\n }\n }\n });\n canvas.appendChild(checkbox); // 自定义交互\n\n var checked = false;\n checkbox.on('click', function (e) {\n if (e.target.className.includes('checkbox-box')) {\n checked = !checked;\n checkbox.update({\n checked: checked\n });\n }\n });\n checkbox.on('mousemove', function (e) {\n if (e.target.className.includes('checkbox-box')) {\n checkbox.update({\n boxStyle: {\n stroke: '#3471F9'\n }\n });\n }\n });\n checkbox.on('mouseleave', function (e) {\n if (!checked) {\n checkbox.update({\n boxStyle: {\n stroke: '#dadada'\n }\n });\n }\n });\n});","postFrontmatter":{"en":{"title":"Checkbox","order":301},"zh":{"title":"单选框","order":301}}},{"relativePath":"basic-ui/marker/demo/register-svg-symbol.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/marker/demo/register-svg-symbol.ts","order":2,"filename":"register-svg-symbol.ts","title":{"zh":"自定义 marker symbol with svg","en":"Register marker symbol with svg"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Marker, svg2marker } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nMarker.registerSymbol(\n 'star-svg',\n svg2marker(\n ``\n )\n);\n\nconst marker = new Marker({\n style: {\n symbol: 'star-svg',\n x: 50,\n y: 50,\n size: 32,\n fill: 'orange',\n },\n});\n\ncanvas.appendChild(marker);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.registerSvgSymbol = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n\n _gui.Marker.registerSymbol('star-svg', (0, _gui.svg2marker)(\"\"));\n\n var marker = new _gui.Marker({\n style: {\n symbol: 'star-svg',\n x: 50,\n y: 50,\n size: 32,\n fill: 'orange'\n }\n });\n canvas.appendChild(marker);\n});","postFrontmatter":{"en":{"title":"Marker","order":300},"zh":{"title":"Marker","order":300}}},{"relativePath":"basic-ui/marker/demo/register-symbol.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/marker/demo/register-symbol.ts","order":1,"filename":"register-symbol.ts","title":{"zh":"自定义 marker symbol","en":"Register marker symbol"},"screenshot":"https://gw.alipayobjects.com/zos/antfincdn/9f7QFadjCh/bbf6c9a5-76d2-46d1-8864-6b3f49047eaf.png","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Marker } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nMarker.registerSymbol('star', (x, y, r) => {\n const size = r * 2;\n const path = [];\n for (let i = 0; i < 5; i++) {\n path.push([\n i === 0 ? 'M' : 'L',\n (Math.cos(((18 + i * 72) * Math.PI) / 180) * size) / 2 + x,\n (-Math.sin(((18 + i * 72) * Math.PI) / 180) * size) / 2 + y,\n ]);\n path.push([\n 'L',\n (Math.cos(((54 + i * 72) * Math.PI) / 180) * size) / 4 + x,\n (-Math.sin(((54 + i * 72) * Math.PI) / 180) * size) / 4 + y,\n ]);\n }\n path.push(['Z']);\n return path;\n});\n\nconst star = new Marker({\n style: {\n symbol: 'star',\n x: 50,\n y: 50,\n size: 16,\n fill: 'orange',\n },\n});\ncanvas.appendChild(star);\n\nconst triangle = new Marker({\n style: {\n symbol: 'triangle',\n x: 80,\n y: 50,\n size: 16,\n fill: 'green',\n },\n});\ncanvas.appendChild(triangle);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.registerSymbol = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n\n _gui.Marker.registerSymbol('star', function (x, y, r) {\n var size = r * 2;\n var path = [];\n\n for (var i = 0; i < 5; i++) {\n path.push([i === 0 ? 'M' : 'L', Math.cos((18 + i * 72) * Math.PI / 180) * size / 2 + x, -Math.sin((18 + i * 72) * Math.PI / 180) * size / 2 + y]);\n path.push(['L', Math.cos((54 + i * 72) * Math.PI / 180) * size / 4 + x, -Math.sin((54 + i * 72) * Math.PI / 180) * size / 4 + y]);\n }\n\n path.push(['Z']);\n return path;\n });\n\n var star = new _gui.Marker({\n style: {\n symbol: 'star',\n x: 50,\n y: 50,\n size: 16,\n fill: 'orange'\n }\n });\n canvas.appendChild(star);\n var triangle = new _gui.Marker({\n style: {\n symbol: 'triangle',\n x: 80,\n y: 50,\n size: 16,\n fill: 'green'\n }\n });\n canvas.appendChild(triangle);\n});","postFrontmatter":{"en":{"title":"Marker","order":300},"zh":{"title":"Marker","order":300}}},{"relativePath":"basic-ui/marker/demo/triangle.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/marker/demo/triangle.ts","order":0,"filename":"triangle.ts","title":{"zh":"三角形 marker","en":"Triangle marker"},"screenshot":"https://gw.alipayobjects.com/zos/antfincdn/tNFA%2406b9o/e9dac589-48cf-45f0-9aca-236eaaf692c0.png","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Marker } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst marker = new Marker({\n style: {\n symbol: 'triangle-down',\n x: 50,\n y: 50,\n size: 16,\n fill: 'green',\n },\n});\n\ncanvas.appendChild(marker);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.triangle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var marker = new _gui.Marker({\n style: {\n symbol: 'triangle-down',\n x: 50,\n y: 50,\n size: 16,\n fill: 'green'\n }\n });\n canvas.appendChild(marker);\n});","postFrontmatter":{"en":{"title":"Marker","order":300},"zh":{"title":"Marker","order":300}}},{"relativePath":"basic-ui/switch/demo/checked-switch.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/switch/demo/checked-switch.ts","order":3,"filename":"checked-switch.ts","title":{"zh":"按钮控制 开关","en":"Push button control switch"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Switch, Button } from '@antv/gui';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 200,\n renderer,\n});\n\nconst checkedSwitch = new Switch({\n style: {\n x: 50,\n y: 50,\n defaultChecked: false,\n },\n});\n\nconst button = new Button({\n style: {\n x: 100,\n y: 50,\n text: 'Simple Button',\n onClick: () => {\n button.flag = !button.flag;\n checkedSwitch.update({\n checked: button.flag,\n });\n },\n },\n});\nbutton.flag = false;\ncanvas.appendChild(button);\ncanvas.appendChild(checkedSwitch);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/gui\", \"@antv/g-canvas\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/gui\"), require(\"@antv/g-canvas\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gui, global.gCanvas);\n global.checkedSwitch = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gui, _gCanvas) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 200,\n renderer: renderer\n });\n var checkedSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 50,\n defaultChecked: false\n }\n });\n var button = new _gui.Button({\n style: {\n x: 100,\n y: 50,\n text: 'Simple Button',\n onClick: function onClick() {\n button.flag = !button.flag;\n checkedSwitch.update({\n checked: button.flag\n });\n }\n }\n });\n button.flag = false;\n canvas.appendChild(button);\n canvas.appendChild(checkedSwitch);\n});","postFrontmatter":{"en":{"title":"Switch","order":308},"zh":{"title":"开关选择器","order":308}}},{"relativePath":"basic-ui/switch/demo/children-switch.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/switch/demo/children-switch.ts","order":1,"filename":"children-switch.ts","title":{"zh":"带有文字和图标 开关","en":"With text and icon switch"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Switch, Marker } from '@antv/gui';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n\nMarker.registerSymbol('check', (x, y, r) => {\n return [\n ['M', x, y - r],\n ['A', r, r, 0, 0, 1, x, y + r],\n ['A', r, r, 0, 0, 1, x, y - r],\n ['Z'],\n ['M', x - r / 2, y + r / 8],\n ['L', x - r / 8, y + r / 2],\n ['L', x + r / 3, y - r / 2],\n ];\n});\n\nMarker.registerSymbol('stop', (x, y, r) => {\n return [\n ['M', x, y - r],\n ['A', r, r, 0, 0, 1, x, y + r],\n ['A', r, r, 0, 0, 1, x, y - r],\n ['Z'],\n ['M', x - r / 2, y],\n ['L', x + r / 2, y],\n ];\n});\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 100,\n renderer,\n});\n\nconst childrenSwitch = new Switch({\n style: {\n x: 50,\n y: 50,\n checkedChildren: {\n text: '开启 √',\n marker: {\n symbol: 'check',\n stroke: '#fff',\n size: 12,\n x: 6,\n },\n },\n unCheckedChildren: {\n text: '关闭 ×',\n marker: {\n symbol: 'stop',\n stroke: '#fff',\n size: 12,\n x: 6,\n },\n },\n },\n});\n\ncanvas.appendChild(childrenSwitch);\nlet checked = true;\n\nchildrenSwitch.on('click', (e) => {\n checked = !checked;\n childrenSwitch.update({\n checked,\n });\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/gui\", \"@antv/g-canvas\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/gui\"), require(\"@antv/g-canvas\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gui, global.gCanvas);\n global.childrenSwitch = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gui, _gCanvas) {\n \"use strict\";\n\n _gui.Marker.registerSymbol('check', function (x, y, r) {\n return [['M', x, y - r], ['A', r, r, 0, 0, 1, x, y + r], ['A', r, r, 0, 0, 1, x, y - r], ['Z'], ['M', x - r / 2, y + r / 8], ['L', x - r / 8, y + r / 2], ['L', x + r / 3, y - r / 2]];\n });\n\n _gui.Marker.registerSymbol('stop', function (x, y, r) {\n return [['M', x, y - r], ['A', r, r, 0, 0, 1, x, y + r], ['A', r, r, 0, 0, 1, x, y - r], ['Z'], ['M', x - r / 2, y], ['L', x + r / 2, y]];\n });\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 100,\n renderer: renderer\n });\n var childrenSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 50,\n checkedChildren: {\n text: '开启 √',\n marker: {\n symbol: 'check',\n stroke: '#fff',\n size: 12,\n x: 6\n }\n },\n unCheckedChildren: {\n text: '关闭 ×',\n marker: {\n symbol: 'stop',\n stroke: '#fff',\n size: 12,\n x: 6\n }\n }\n }\n });\n canvas.appendChild(childrenSwitch);\n var checked = true;\n childrenSwitch.on('click', function (e) {\n checked = !checked;\n childrenSwitch.update({\n checked: checked\n });\n });\n});","postFrontmatter":{"en":{"title":"Switch","order":308},"zh":{"title":"开关选择器","order":308}}},{"relativePath":"basic-ui/switch/demo/simple.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/switch/demo/simple.ts","order":0,"filename":"simple.ts","title":{"zh":"简单开关","en":"Simple switch"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Switch } from '@antv/gui';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 100,\n renderer,\n});\n\nconst simpleSwitch = new Switch({\n style: {\n x: 50,\n y: 50,\n checkedChildren: {\n text: '开启',\n },\n unCheckedChildren: {\n text: '关闭',\n },\n },\n});\n\nlet checked = true;\ncanvas.appendChild(simpleSwitch);\nsimpleSwitch.on('click', (e) => {\n checked = !checked;\n simpleSwitch.update({\n checked,\n });\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/gui\", \"@antv/g-canvas\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/gui\"), require(\"@antv/g-canvas\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gui, global.gCanvas);\n global.simple = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gui, _gCanvas) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 100,\n renderer: renderer\n });\n var simpleSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 50,\n checkedChildren: {\n text: '开启'\n },\n unCheckedChildren: {\n text: '关闭'\n }\n }\n });\n var checked = true;\n canvas.appendChild(simpleSwitch);\n simpleSwitch.on('click', function (e) {\n checked = !checked;\n simpleSwitch.update({\n checked: checked\n });\n });\n});","postFrontmatter":{"en":{"title":"Switch","order":308},"zh":{"title":"开关选择器","order":308}}},{"relativePath":"basic-ui/switch/demo/size-switch.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/switch/demo/size-switch.ts","order":2,"filename":"size-switch.ts","title":{"zh":"控制大小 开关","en":"Size switch"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Switch, Marker } from '@antv/gui';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 200,\n height: 200,\n renderer,\n});\n\nconst defaultSwitch = new Switch({\n style: {\n x: 50,\n y: 50,\n },\n});\n\nconst smallSwitch = new Switch({\n style: {\n x: 50,\n y: 80,\n size: 'small',\n },\n});\n\nconst miniSwitch = new Switch({\n style: {\n x: 50,\n y: 100,\n size: 'mini',\n },\n});\n\ncanvas.appendChild(defaultSwitch);\ncanvas.appendChild(smallSwitch);\ncanvas.appendChild(miniSwitch);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/gui\", \"@antv/g-canvas\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/gui\"), require(\"@antv/g-canvas\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gui, global.gCanvas);\n global.sizeSwitch = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gui, _gCanvas) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 200,\n height: 200,\n renderer: renderer\n });\n var defaultSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 50\n }\n });\n var smallSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 80,\n size: 'small'\n }\n });\n var miniSwitch = new _gui.Switch({\n style: {\n x: 50,\n y: 100,\n size: 'mini'\n }\n });\n canvas.appendChild(defaultSwitch);\n canvas.appendChild(smallSwitch);\n canvas.appendChild(miniSwitch);\n});","postFrontmatter":{"en":{"title":"Switch","order":308},"zh":{"title":"开关选择器","order":308}}},{"relativePath":"basic-ui/tag/demo/background-style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/tag/demo/background-style.ts","order":4,"filename":"background-style.ts","title":{"zh":"不带背景标签","en":"Tag not contains background"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tag } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst tag0 = new Tag({\n style: {\n text: '无背景',\n padding: [4, 7],\n backgroundStyle: null,\n },\n});\ncanvas.appendChild(tag0);\n\nconst tag = new Tag({\n style: {\n x: 100,\n text: '设置背景激活样式',\n padding: [4, 7],\n textStyle: {\n cursor: 'pointer',\n },\n backgroundStyle: {},\n },\n});\ncanvas.appendChild(tag);\ntag.addEventListener('mouseenter', () => {\n tag.update({\n backgroundStyle: {\n fill: 'lightgreen',\n lineWidth: 0,\n cursor: 'pointer',\n },\n });\n});\ntag.addEventListener('mouseleave', () => {\n tag.update({\n backgroundStyle: {\n lineWidth: 1,\n fill: '#fafafa',\n },\n });\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.backgroundStyle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var tag0 = new _gui.Tag({\n style: {\n text: '无背景',\n padding: [4, 7],\n backgroundStyle: null\n }\n });\n canvas.appendChild(tag0);\n var tag = new _gui.Tag({\n style: {\n x: 100,\n text: '设置背景激活样式',\n padding: [4, 7],\n textStyle: {\n cursor: 'pointer'\n },\n backgroundStyle: {}\n }\n });\n canvas.appendChild(tag);\n tag.addEventListener('mouseenter', function () {\n tag.update({\n backgroundStyle: {\n fill: 'lightgreen',\n lineWidth: 0,\n cursor: 'pointer'\n }\n });\n });\n tag.addEventListener('mouseleave', function () {\n tag.update({\n backgroundStyle: {\n lineWidth: 1,\n fill: '#fafafa'\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Tag","order":301},"zh":{"title":"标签","order":301}}},{"relativePath":"basic-ui/tag/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/tag/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"基础标签","en":"Basic tag"},"screenshot":"","source":"import { Canvas, Line } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tag } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 400,\n height: 400,\n renderer,\n});\n\ncanvas.appendChild(new Line({ style: { x1: 10, y1: 10, x2: 310, y2: 10, lineWidth: 1, stroke: '#d9d9d9' } }));\ncanvas.appendChild(new Line({ style: { x1: 10, y1: 160, x2: 310, y2: 160, lineWidth: 1, stroke: '#d9d9d9' } }));\ncanvas.appendChild(new Line({ style: { x1: 10, y1: 10, x2: 10, y2: 310, lineWidth: 1, stroke: '#d9d9d9' } }));\ncanvas.appendChild(new Line({ style: { x1: 160, y1: 10, x2: 160, y2: 310, lineWidth: 1, stroke: '#d9d9d9' } }));\ncanvas.appendChild(new Line({ style: { x1: 310, y1: 10, x2: 310, y2: 310, lineWidth: 1, stroke: '#d9d9d9' } }));\ncanvas.appendChild(new Line({ style: { x1: 10, y1: 310, x2: 310, y2: 310, lineWidth: 1, stroke: '#d9d9d9' } }));\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 10,\n text: 'Tag 1',\n padding: [4, 7],\n },\n })\n);\ncanvas.appendChild(\n new Tag({\n style: {\n x: 310,\n y: 160,\n text: 'End Middle',\n padding: [4, 7],\n align: 'end',\n verticalAlign: 'middle',\n },\n })\n);\ncanvas.appendChild(\n new Tag({\n style: {\n x: 160,\n y: 160,\n text: 'Center Bottom',\n padding: [4, 7],\n align: 'center',\n verticalAlign: 'bottom',\n },\n })\n);\n\nconst linkTag = new Tag({\n style: {\n x: 10,\n y: 160,\n text: 'Link Tag',\n padding: [4, 7],\n },\n});\ncanvas.appendChild(linkTag);\n// 监听事件\nlinkTag.on('mouseenter', () => {\n linkTag.update({ cursor: 'pointer ' });\n});\nlinkTag.on('mouseleave', () => {\n linkTag.update({ cursor: 'default ' });\n});\nlinkTag.on('click', () => {\n window.open('httsp://github.com/antvis/gui');\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 400,\n height: 400,\n renderer: renderer\n });\n canvas.appendChild(new _g.Line({\n style: {\n x1: 10,\n y1: 10,\n x2: 310,\n y2: 10,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _g.Line({\n style: {\n x1: 10,\n y1: 160,\n x2: 310,\n y2: 160,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _g.Line({\n style: {\n x1: 10,\n y1: 10,\n x2: 10,\n y2: 310,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _g.Line({\n style: {\n x1: 160,\n y1: 10,\n x2: 160,\n y2: 310,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _g.Line({\n style: {\n x1: 310,\n y1: 10,\n x2: 310,\n y2: 310,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _g.Line({\n style: {\n x1: 10,\n y1: 310,\n x2: 310,\n y2: 310,\n lineWidth: 1,\n stroke: '#d9d9d9'\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 10,\n text: 'Tag 1',\n padding: [4, 7]\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 310,\n y: 160,\n text: 'End Middle',\n padding: [4, 7],\n align: 'end',\n verticalAlign: 'middle'\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 160,\n y: 160,\n text: 'Center Bottom',\n padding: [4, 7],\n align: 'center',\n verticalAlign: 'bottom'\n }\n }));\n var linkTag = new _gui.Tag({\n style: {\n x: 10,\n y: 160,\n text: 'Link Tag',\n padding: [4, 7]\n }\n });\n canvas.appendChild(linkTag); // 监听事件\n\n linkTag.on('mouseenter', function () {\n linkTag.update({\n cursor: 'pointer '\n });\n });\n linkTag.on('mouseleave', function () {\n linkTag.update({\n cursor: 'default '\n });\n });\n linkTag.on('click', function () {\n window.open('httsp://github.com/antvis/gui');\n });\n});","postFrontmatter":{"en":{"title":"Tag","order":301},"zh":{"title":"标签","order":301}}},{"relativePath":"basic-ui/tag/demo/colorful.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/tag/demo/colorful.ts","order":1,"filename":"colorful.ts","title":{"zh":"五彩标签","en":"Colorful tag"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tag } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nfunction createTag(x, y, text, fill, backgroundColor, backgroundBorderColor = 'transparent') {\n return new Tag({\n style: {\n x,\n y,\n text,\n padding: [4, 7],\n textStyle: {\n fontSize: 12,\n fill,\n },\n backgroundStyle: {\n fill: backgroundColor,\n stroke: backgroundBorderColor,\n lineWidth: backgroundBorderColor === 'transparent' ? 0 : 1,\n },\n },\n });\n}\n\ncanvas.appendChild(createTag(0, 10, 'magenta', '#c41d7f', '#fff0f6', '#ffadd2'));\ncanvas.appendChild(createTag(0, 50, 'volcano', '#d4380d', '#fff2e8', '#ffbb96'));\ncanvas.appendChild(createTag(0, 90, 'orange', '#d46b08', '#fff7e6', '#ffd591'));\ncanvas.appendChild(createTag(0, 130, 'green', '#389e0d', '#f6ffed', '#b7eb8f'));\ncanvas.appendChild(createTag(0, 170, 'purple', '#531dab', '#f9f0ff', '#d3adf7'));\n\ncanvas.appendChild(createTag(80, 10, '#f50', '#fff', '#f50'));\ncanvas.appendChild(createTag(80, 50, '#2db7f5', '#fff', '#2db7f5'));\ncanvas.appendChild(createTag(80, 90, '#87d068', '#fff', '#87d068'));\ncanvas.appendChild(createTag(80, 130, '#108ee9', '#fff', '#108ee9'));\ncanvas.appendChild(createTag(80, 170, '#1d39c4', '#fff', '#1d39c4'));\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.colorful = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n\n function createTag(x, y, text, fill, backgroundColor) {\n var backgroundBorderColor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'transparent';\n return new _gui.Tag({\n style: {\n x: x,\n y: y,\n text: text,\n padding: [4, 7],\n textStyle: {\n fontSize: 12,\n fill: fill\n },\n backgroundStyle: {\n fill: backgroundColor,\n stroke: backgroundBorderColor,\n lineWidth: backgroundBorderColor === 'transparent' ? 0 : 1\n }\n }\n });\n }\n\n canvas.appendChild(createTag(0, 10, 'magenta', '#c41d7f', '#fff0f6', '#ffadd2'));\n canvas.appendChild(createTag(0, 50, 'volcano', '#d4380d', '#fff2e8', '#ffbb96'));\n canvas.appendChild(createTag(0, 90, 'orange', '#d46b08', '#fff7e6', '#ffd591'));\n canvas.appendChild(createTag(0, 130, 'green', '#389e0d', '#f6ffed', '#b7eb8f'));\n canvas.appendChild(createTag(0, 170, 'purple', '#531dab', '#f9f0ff', '#d3adf7'));\n canvas.appendChild(createTag(80, 10, '#f50', '#fff', '#f50'));\n canvas.appendChild(createTag(80, 50, '#2db7f5', '#fff', '#2db7f5'));\n canvas.appendChild(createTag(80, 90, '#87d068', '#fff', '#87d068'));\n canvas.appendChild(createTag(80, 130, '#108ee9', '#fff', '#108ee9'));\n canvas.appendChild(createTag(80, 170, '#1d39c4', '#fff', '#1d39c4'));\n});","postFrontmatter":{"en":{"title":"Tag","order":301},"zh":{"title":"标签","order":301}}},{"relativePath":"basic-ui/tag/demo/marker.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/tag/demo/marker.ts","order":2,"filename":"marker.ts","title":{"zh":"带 marker 标签","en":"Tag contains marker"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Marker, Tag } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nMarker.registerSymbol('heart', (x, y, width) => {\n const r = width / 4;\n const dx = x - width / 2;\n const dy = y - width / 2;\n return [\n ['M', dx, dy + r * 2],\n ['A', r, r, 0, 0, 1, x, dy + r],\n ['A', r, r, 0, 0, 1, dx + width, dy + r * 2],\n ['L', x, dy + width],\n ['L', dx, dy + r * 2],\n ['Z'],\n ];\n});\n\nMarker.registerSymbol('check', (x, y, r) => {\n return [\n ['M', x, y - r],\n ['A', r, r, 0, 0, 1, x, y + r],\n ['A', r, r, 0, 0, 1, x, y - r],\n ['Z'],\n ['M', x - r / 2, y + r / 8],\n ['L', x - r / 8, y + r / 2],\n ['L', x + r / 3, y - r / 2],\n ];\n});\n\nMarker.registerSymbol('stop', (x, y, r) => {\n return [\n ['M', x, y - r],\n ['A', r, r, 0, 0, 1, x, y + r],\n ['A', r, r, 0, 0, 1, x, y - r],\n ['Z'],\n ['M', x - r / 2, y],\n ['L', x + r / 2, y],\n ];\n});\n\nMarker.registerSymbol('error', (x, y, r) => {\n return [\n ['M', x, y - r],\n ['A', r, r, 0, 0, 1, x, y + r],\n ['A', r, r, 0, 0, 1, x, y - r],\n ['Z'],\n ['M', x - r / 3, y - r / 3],\n ['L', x + r / 3, y + r / 3],\n ['M', x + r / 3, y - r / 3],\n ['L', x - r / 3, y + r / 3],\n ];\n});\n\nMarker.registerSymbol('star', (x, y, r) => {\n const path = [];\n for (let i = 0; i < 5; i++) {\n path.push([\n i === 0 ? 'M' : 'L',\n (Math.cos(((18 + i * 72) * Math.PI) / 180) * r) / 2 + x,\n (-Math.sin(((18 + i * 72) * Math.PI) / 180) * r) / 2 + y,\n ]);\n path.push([\n 'L',\n (Math.cos(((54 + i * 72) * Math.PI) / 180) * r) / 4 + x,\n (-Math.sin(((54 + i * 72) * Math.PI) / 180) * r) / 4 + y,\n ]);\n }\n path.push(['Z']);\n return path;\n});\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 10,\n text: 'Hello',\n textStyle: {\n fontSize: 12,\n fill: '#fa8c16',\n },\n marker: {\n symbol: 'star',\n fill: '#fa8c16',\n size: 20,\n },\n backgroundStyle: {\n stroke: '#ffd591',\n fill: '#fff7e6',\n },\n },\n })\n);\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 40,\n text: 'Hello',\n spacing: 6,\n textStyle: {\n fontSize: 12,\n fill: '#000',\n fillOpacity: 0.85,\n },\n marker: {\n symbol: 'triangle',\n fill: '#000',\n stroke: '#000',\n fillOpacity: 0.85,\n size: 8,\n },\n backgroundStyle: {\n stroke: '#d9d9d9',\n fill: '#fafafa',\n },\n },\n })\n);\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 70,\n text: 'Hello',\n textStyle: {\n fontSize: 12,\n fill: '#52c41a',\n fillOpacity: 0.85,\n },\n marker: {\n symbol: 'heart',\n fill: '#52c41a',\n fillOpacity: 0.85,\n size: 20,\n },\n backgroundStyle: {\n stroke: '#b7eb8f',\n fill: '#f6ffed',\n },\n },\n })\n);\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 100,\n text: 'success',\n textStyle: {\n fontSize: 12,\n fill: '#52c41a',\n fillOpacity: 0.85,\n },\n marker: {\n symbol: 'check',\n stroke: '#52c41a',\n size: 10,\n },\n backgroundStyle: {\n stroke: '#b7eb8f',\n fill: '#f6ffed',\n },\n },\n })\n);\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 130,\n text: 'stop',\n textStyle: {\n fontSize: 12,\n fill: '#000000d9',\n fillOpacity: 0.85,\n },\n marker: {\n symbol: 'stop',\n stroke: '#000000d9',\n size: 10,\n },\n backgroundStyle: {\n stroke: '#d9d9d9',\n fill: '#fafafa',\n },\n },\n })\n);\n\ncanvas.appendChild(\n new Tag({\n style: {\n x: 10,\n y: 160,\n text: 'error',\n textStyle: {\n fontSize: 12,\n fill: '#f5222d',\n fillOpacity: 0.85,\n },\n marker: {\n symbol: 'error',\n stroke: '#f5222d',\n size: 10,\n },\n backgroundStyle: {\n stroke: '#ffa39e',\n fill: '#fff1f0',\n },\n },\n })\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.marker = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n\n _gui.Marker.registerSymbol('heart', function (x, y, width) {\n var r = width / 4;\n var dx = x - width / 2;\n var dy = y - width / 2;\n return [['M', dx, dy + r * 2], ['A', r, r, 0, 0, 1, x, dy + r], ['A', r, r, 0, 0, 1, dx + width, dy + r * 2], ['L', x, dy + width], ['L', dx, dy + r * 2], ['Z']];\n });\n\n _gui.Marker.registerSymbol('check', function (x, y, r) {\n return [['M', x, y - r], ['A', r, r, 0, 0, 1, x, y + r], ['A', r, r, 0, 0, 1, x, y - r], ['Z'], ['M', x - r / 2, y + r / 8], ['L', x - r / 8, y + r / 2], ['L', x + r / 3, y - r / 2]];\n });\n\n _gui.Marker.registerSymbol('stop', function (x, y, r) {\n return [['M', x, y - r], ['A', r, r, 0, 0, 1, x, y + r], ['A', r, r, 0, 0, 1, x, y - r], ['Z'], ['M', x - r / 2, y], ['L', x + r / 2, y]];\n });\n\n _gui.Marker.registerSymbol('error', function (x, y, r) {\n return [['M', x, y - r], ['A', r, r, 0, 0, 1, x, y + r], ['A', r, r, 0, 0, 1, x, y - r], ['Z'], ['M', x - r / 3, y - r / 3], ['L', x + r / 3, y + r / 3], ['M', x + r / 3, y - r / 3], ['L', x - r / 3, y + r / 3]];\n });\n\n _gui.Marker.registerSymbol('star', function (x, y, r) {\n var path = [];\n\n for (var i = 0; i < 5; i++) {\n path.push([i === 0 ? 'M' : 'L', Math.cos((18 + i * 72) * Math.PI / 180) * r / 2 + x, -Math.sin((18 + i * 72) * Math.PI / 180) * r / 2 + y]);\n path.push(['L', Math.cos((54 + i * 72) * Math.PI / 180) * r / 4 + x, -Math.sin((54 + i * 72) * Math.PI / 180) * r / 4 + y]);\n }\n\n path.push(['Z']);\n return path;\n });\n\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 10,\n text: 'Hello',\n textStyle: {\n fontSize: 12,\n fill: '#fa8c16'\n },\n marker: {\n symbol: 'star',\n fill: '#fa8c16',\n size: 20\n },\n backgroundStyle: {\n stroke: '#ffd591',\n fill: '#fff7e6'\n }\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 40,\n text: 'Hello',\n spacing: 6,\n textStyle: {\n fontSize: 12,\n fill: '#000',\n fillOpacity: 0.85\n },\n marker: {\n symbol: 'triangle',\n fill: '#000',\n stroke: '#000',\n fillOpacity: 0.85,\n size: 8\n },\n backgroundStyle: {\n stroke: '#d9d9d9',\n fill: '#fafafa'\n }\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 70,\n text: 'Hello',\n textStyle: {\n fontSize: 12,\n fill: '#52c41a',\n fillOpacity: 0.85\n },\n marker: {\n symbol: 'heart',\n fill: '#52c41a',\n fillOpacity: 0.85,\n size: 20\n },\n backgroundStyle: {\n stroke: '#b7eb8f',\n fill: '#f6ffed'\n }\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 100,\n text: 'success',\n textStyle: {\n fontSize: 12,\n fill: '#52c41a',\n fillOpacity: 0.85\n },\n marker: {\n symbol: 'check',\n stroke: '#52c41a',\n size: 10\n },\n backgroundStyle: {\n stroke: '#b7eb8f',\n fill: '#f6ffed'\n }\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 130,\n text: 'stop',\n textStyle: {\n fontSize: 12,\n fill: '#000000d9',\n fillOpacity: 0.85\n },\n marker: {\n symbol: 'stop',\n stroke: '#000000d9',\n size: 10\n },\n backgroundStyle: {\n stroke: '#d9d9d9',\n fill: '#fafafa'\n }\n }\n }));\n canvas.appendChild(new _gui.Tag({\n style: {\n x: 10,\n y: 160,\n text: 'error',\n textStyle: {\n fontSize: 12,\n fill: '#f5222d',\n fillOpacity: 0.85\n },\n marker: {\n symbol: 'error',\n stroke: '#f5222d',\n size: 10\n },\n backgroundStyle: {\n stroke: '#ffa39e',\n fill: '#fff1f0'\n }\n }\n }));\n});","postFrontmatter":{"en":{"title":"Tag","order":301},"zh":{"title":"标签","order":301}}},{"relativePath":"basic-ui/tag/demo/text-style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/basic-ui/tag/demo/text-style.ts","order":3,"filename":"text-style.ts","title":{"zh":"设置字体样式","en":"TextStyle of tag"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tag } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst tag = new Tag({\n style: {\n x: 100,\n text: '字体激活放大',\n padding: [4, 7],\n textStyle: {\n fontSize: 18,\n fill: 'rgba(0, 0, 0, 0.85)',\n },\n },\n});\ncanvas.appendChild(tag);\ntag.addEventListener('mouseenter', () => {\n tag.update({\n textStyle: {\n fontSize: 24,\n fill: 'lightgreen',\n },\n });\n});\ntag.addEventListener('mouseleave', () => {\n tag.update({\n textStyle: {\n fontSize: 18,\n fill: 'rgba(0, 0, 0, 0.85)',\n },\n });\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.textStyle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var tag = new _gui.Tag({\n style: {\n x: 100,\n text: '字体激活放大',\n padding: [4, 7],\n textStyle: {\n fontSize: 18,\n fill: 'rgba(0, 0, 0, 0.85)'\n }\n }\n });\n canvas.appendChild(tag);\n tag.addEventListener('mouseenter', function () {\n tag.update({\n textStyle: {\n fontSize: 24,\n fill: 'lightgreen'\n }\n });\n });\n tag.addEventListener('mouseleave', function () {\n tag.update({\n textStyle: {\n fontSize: 18,\n fill: 'rgba(0, 0, 0, 0.85)'\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Tag","order":301},"zh":{"title":"标签","order":301}}},{"relativePath":"chart-ui/axis/demo/arc-axis-with-grid.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/arc-axis-with-grid.ts","order":-1,"filename":"arc-axis-with-grid.ts","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Arc, Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 800,\n renderer,\n});\n\nconst points = (x1, y1, x2, y2) => [\n [x1, y1],\n [x2, y2],\n];\nfunction getGridItems(ticks, radius, startAngle, endAngle, center) {\n return ticks.map(({ value }) => {\n const angle = (endAngle - startAngle) * value + startAngle;\n return {\n points: points(\n center[0],\n center[1],\n center[0] + radius * Math.cos((angle * Math.PI) / 180),\n center[1] + radius * Math.sin((angle * Math.PI) / 180)\n ),\n };\n });\n}\n\nconst arcTicks = Array(60)\n .fill(0)\n .map((tick, idx) => {\n const step = 1 / 60;\n return { value: idx * step, text: String(idx) };\n });\nconst arc = new Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [150, 150],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴',\n },\n grid: {\n items: getGridItems(arcTicks, 100, -90, 270, [150, 150]),\n lineStyle: { lineDash: [0, 0] },\n },\n ticks: arcTicks,\n label: {\n align: 'radial',\n autoHide: true,\n autoHideTickLine: false,\n },\n subTickLine: { count: 1 },\n },\n});\n\ncanvas.appendChild(arc);\n\nconst data = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n];\n\nconst step = 1 / data.length;\nconst tickData = data.map((d, idx) => {\n return { value: step * idx, text: d, id: String(idx) };\n});\nconst arc2 = new Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [300, 420],\n verticalFactor: 1,\n grid: {\n items: getGridItems(tickData, 100, -90, 270, [300, 420]),\n },\n axisLine: null,\n ticks: tickData,\n label: {\n align: 'tangential',\n autoEllipsis: true,\n // autoHide: true,\n autoHideTickLine: false,\n },\n },\n});\n\ncanvas.appendChild(arc2);\n\nconst arcYTicks = [\n { value: 0, text: '0' },\n { value: 0.25, text: '25' },\n { value: 0.5, text: '50' },\n { value: 0.75, text: '75' },\n { value: 1, text: '100' },\n];\n\nconst startAngle = -90;\nconst endAngle = 270;\nconst items = arcYTicks.map((tick) => {\n const points = tickData.map(({ value }) => {\n const angle = (endAngle - startAngle) * value + startAngle;\n const r = 100 * tick.value;\n return [300 + r * Math.cos((angle * Math.PI) / 180), 420 + r * Math.sin((angle * Math.PI) / 180)];\n });\n return { points };\n});\n\nconst arcY = new Linear({\n style: {\n startPos: [300, 420],\n endPos: [300, 320],\n axisLine: { arrow: { end: {} } },\n ticks: arcYTicks,\n grid: { items, closed: true },\n },\n});\ncanvas.appendChild(arcY);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.arcAxisWithGrid = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 800,\n renderer: renderer\n });\n\n var points = function points(x1, y1, x2, y2) {\n return [[x1, y1], [x2, y2]];\n };\n\n function getGridItems(ticks, radius, startAngle, endAngle, center) {\n return ticks.map(function (_ref) {\n var value = _ref.value;\n var angle = (endAngle - startAngle) * value + startAngle;\n return {\n points: points(center[0], center[1], center[0] + radius * Math.cos(angle * Math.PI / 180), center[1] + radius * Math.sin(angle * Math.PI / 180))\n };\n });\n }\n\n var arcTicks = Array(60).fill(0).map(function (tick, idx) {\n var step = 1 / 60;\n return {\n value: idx * step,\n text: String(idx)\n };\n });\n var arc = new _gui.Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [150, 150],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴'\n },\n grid: {\n items: getGridItems(arcTicks, 100, -90, 270, [150, 150]),\n lineStyle: {\n lineDash: [0, 0]\n }\n },\n ticks: arcTicks,\n label: {\n align: 'radial',\n autoHide: true,\n autoHideTickLine: false\n },\n subTickLine: {\n count: 1\n }\n }\n });\n canvas.appendChild(arc);\n var data = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n var step = 1 / data.length;\n var tickData = data.map(function (d, idx) {\n return {\n value: step * idx,\n text: d,\n id: String(idx)\n };\n });\n var arc2 = new _gui.Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [300, 420],\n verticalFactor: 1,\n grid: {\n items: getGridItems(tickData, 100, -90, 270, [300, 420])\n },\n axisLine: null,\n ticks: tickData,\n label: {\n align: 'tangential',\n autoEllipsis: true,\n // autoHide: true,\n autoHideTickLine: false\n }\n }\n });\n canvas.appendChild(arc2);\n var arcYTicks = [{\n value: 0,\n text: '0'\n }, {\n value: 0.25,\n text: '25'\n }, {\n value: 0.5,\n text: '50'\n }, {\n value: 0.75,\n text: '75'\n }, {\n value: 1,\n text: '100'\n }];\n var startAngle = -90;\n var endAngle = 270;\n var items = arcYTicks.map(function (tick) {\n var points = tickData.map(function (_ref2) {\n var value = _ref2.value;\n var angle = (endAngle - startAngle) * value + startAngle;\n var r = 100 * tick.value;\n return [300 + r * Math.cos(angle * Math.PI / 180), 420 + r * Math.sin(angle * Math.PI / 180)];\n });\n return {\n points: points\n };\n });\n var arcY = new _gui.Linear({\n style: {\n startPos: [300, 420],\n endPos: [300, 320],\n axisLine: {\n arrow: {\n end: {}\n }\n },\n ticks: arcYTicks,\n grid: {\n items: items,\n closed: true\n }\n }\n });\n canvas.appendChild(arcY);\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/arc.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/arc.ts","order":8,"filename":"arc.ts","title":{"zh":"圆弧坐标轴","en":"Arc Axis"},"screenshot":"","source":"import { Canvas, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Arc } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 800,\n renderer,\n});\n\nconst arc = new Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [150, 150],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴',\n },\n ticks: Array(60)\n .fill(0)\n .map((tick, idx) => {\n const step = 1 / 60;\n return { value: idx * step, text: String(idx) };\n }),\n label: {\n align: 'radial',\n autoHide: true,\n autoHideTickLine: false,\n },\n subTickLine: { count: 1 },\n },\n});\n\ncanvas.appendChild(arc);\n\nconst data = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n];\n\nconst step = 1 / data.length;\nconst tickData = data.map((d, idx) => {\n return { value: step * idx + step / 2, text: d, id: String(idx) };\n});\nconst arc2 = new Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [300, 420],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴',\n },\n ticks: tickData,\n label: {\n align: 'tangential',\n autoEllipsis: true,\n // autoHide: true,\n autoHideTickLine: false,\n },\n subTickLine: { count: 1 },\n },\n});\n\ncanvas.appendChild(arc);\ncanvas.appendChild(arc2);\n\nwindow.ConfigPanel([arc, arc2], '样式', {\n 'subTickLine.style.lineWidth': { label: '子刻度线粗细', value: 0.5, type: 'number', step: 0.5, range: [0, 5] },\n startAngle: { label: '起始角', value: -90, type: 'number', step: 1, range: [-90, 180] },\n endAngle: { label: '终止角', value: 270, type: 'number', step: 1, range: [-0, 270] },\n radius: { label: '半径', value: 150, type: 'number', step: 1, range: [50, 200] },\n verticalFactor: {\n label: '轴线正方向',\n value: 'outer',\n options: [\n { name: 'outer', value: 1 },\n { name: 'inner', value: -1 },\n ],\n },\n 'label.align': {\n label: '标签与轴线对齐方式',\n value: 'radial',\n options: ['normal', { name: '径向', value: 'radial' }, { name: '切线方向', value: 'tangential' }],\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.arc = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 800,\n renderer: renderer\n });\n var arc = new _gui.Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [150, 150],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴'\n },\n ticks: Array(60).fill(0).map(function (tick, idx) {\n var step = 1 / 60;\n return {\n value: idx * step,\n text: String(idx)\n };\n }),\n label: {\n align: 'radial',\n autoHide: true,\n autoHideTickLine: false\n },\n subTickLine: {\n count: 1\n }\n }\n });\n canvas.appendChild(arc);\n var data = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n var step = 1 / data.length;\n var tickData = data.map(function (d, idx) {\n return {\n value: step * idx + step / 2,\n text: d,\n id: String(idx)\n };\n });\n var arc2 = new _gui.Arc({\n style: {\n startAngle: -90,\n endAngle: 270,\n radius: 100,\n center: [300, 420],\n verticalFactor: 1,\n title: {\n content: '圆弧坐标轴'\n },\n ticks: tickData,\n label: {\n align: 'tangential',\n autoEllipsis: true,\n // autoHide: true,\n autoHideTickLine: false\n },\n subTickLine: {\n count: 1\n }\n }\n });\n canvas.appendChild(arc);\n canvas.appendChild(arc2);\n window.ConfigPanel([arc, arc2], '样式', {\n 'subTickLine.style.lineWidth': {\n label: '子刻度线粗细',\n value: 0.5,\n type: 'number',\n step: 0.5,\n range: [0, 5]\n },\n startAngle: {\n label: '起始角',\n value: -90,\n type: 'number',\n step: 1,\n range: [-90, 180]\n },\n endAngle: {\n label: '终止角',\n value: 270,\n type: 'number',\n step: 1,\n range: [-0, 270]\n },\n radius: {\n label: '半径',\n value: 150,\n type: 'number',\n step: 1,\n range: [50, 200]\n },\n verticalFactor: {\n label: '轴线正方向',\n value: 'outer',\n options: [{\n name: 'outer',\n value: 1\n }, {\n name: 'inner',\n value: -1\n }]\n },\n 'label.align': {\n label: '标签与轴线对齐方式',\n value: 'radial',\n options: ['normal', {\n name: '径向',\n value: 'radial'\n }, {\n name: '切线方向',\n value: 'tangential'\n }]\n }\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/axis-label.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/axis-label.ts","order":3,"filename":"axis-label.ts","title":{"zh":"坐标轴标签设置","en":"Axis label"},"screenshot":"","source":"import { Canvas, Group, Path } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear, Arc } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nconst data = [\n 'Design',\n 'Development',\n 'Marketing',\n 'Users',\n 'Language',\n 'Technology',\n 'Support',\n 'Sales',\n 'UX',\n 'Test',\n];\nconst step = 1 / data.length;\nconst tickData = data.map((d, idx) => {\n return { value: step * idx + step / 2, text: d, id: String(idx) };\n});\n\nconst linear = new Linear({\n style: {\n startPos: [20, 280],\n endPos: [420, 280],\n ticks: tickData,\n title: {\n content: 'Department',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n label: {\n autoEllipsis: true,\n tickPadding: 2,\n minLength: 14,\n maxLength: 160,\n rotate: 18,\n margin: [0, 2, 0, 0],\n style: {\n fontSize: 10,\n fill: 'black',\n fillOpacity: 0.65,\n },\n },\n verticalFactor: 1,\n },\n});\ncanvas.appendChild(linear);\n\nconst arc = new Arc({\n style: {\n center: [200, 480],\n radius: 100,\n ticks: tickData.map((d, idx) => ({ ...d, value: idx * step })),\n title: {\n content: 'Department',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n label: {\n autoEllipsis: true,\n tickPadding: 2,\n minLength: 14,\n maxLength: 160,\n style: {\n fontSize: 10,\n fill: 'black',\n fillOpacity: 0.65,\n },\n },\n verticalFactor: 1,\n },\n});\ncanvas.appendChild(arc);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel(linear, 'Linear axis label', {\n 'label.autoEllipsis': { label: '自动省略', value: true },\n 'label.minLength': { label: '最小长度', value: 10, type: 'number', step: 2, range: [14, 20] },\n 'label.maxLength': { label: '最大长度', value: 160, type: 'number', step: 2, range: [20, 400] },\n 'label.tickPadding': { label: '标签与刻度线距离', value: 2, type: 'number', step: 1, range: [0, 10] },\n 'label.rotate': { label: '标签旋转角度', value: 18, type: 'number', step: 1, range: [-90, 90] },\n 'label.style.fontSize': { label: '标签字体大小', value: 10, type: 'number', step: 1, range: [0, 40] },\n 'label.style.fontWeight': { label: '标签字重', value: 'normal', options: ['normal', 'bold'] },\n 'label.style.fill': { label: '标签字体颜色', value: '#000', type: 'color' },\n});\n\nwindow.ConfigPanel(\n arc,\n 'Arc axis label',\n {\n 'label.autoEllipsis': { label: '自动省略', value: true },\n 'label.minLength': { label: '最小长度', value: 10, type: 'number', step: 2, range: [14, 20] },\n 'label.maxLength': { label: '最大长度', value: 160, type: 'number', step: 2, range: [20, 400] },\n 'label.tickPadding': { label: '标签与刻度线距离', value: 2, type: 'number', step: 1, range: [0, 10] },\n 'label.style.fontSize': { label: '标签字体大小', value: 10, type: 'number', step: 1, range: [0, 40] },\n 'label.style.fontWeight': { label: '标签字重', value: 'normal', options: ['normal', 'bold'] },\n 'label.style.fill': { label: '标签字体颜色', value: '#000', type: 'color' },\n },\n { closed: true }\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.axisLabel = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n var data = ['Design', 'Development', 'Marketing', 'Users', 'Language', 'Technology', 'Support', 'Sales', 'UX', 'Test'];\n var step = 1 / data.length;\n var tickData = data.map(function (d, idx) {\n return {\n value: step * idx + step / 2,\n text: d,\n id: String(idx)\n };\n });\n var linear = new _gui.Linear({\n style: {\n startPos: [20, 280],\n endPos: [420, 280],\n ticks: tickData,\n title: {\n content: 'Department',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n label: {\n autoEllipsis: true,\n tickPadding: 2,\n minLength: 14,\n maxLength: 160,\n rotate: 18,\n margin: [0, 2, 0, 0],\n style: {\n fontSize: 10,\n fill: 'black',\n fillOpacity: 0.65\n }\n },\n verticalFactor: 1\n }\n });\n canvas.appendChild(linear);\n var arc = new _gui.Arc({\n style: {\n center: [200, 480],\n radius: 100,\n ticks: tickData.map(function (d, idx) {\n return { ...d,\n value: idx * step\n };\n }),\n title: {\n content: 'Department',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n label: {\n autoEllipsis: true,\n tickPadding: 2,\n minLength: 14,\n maxLength: 160,\n style: {\n fontSize: 10,\n fill: 'black',\n fillOpacity: 0.65\n }\n },\n verticalFactor: 1\n }\n });\n canvas.appendChild(arc);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel(linear, 'Linear axis label', {\n 'label.autoEllipsis': {\n label: '自动省略',\n value: true\n },\n 'label.minLength': {\n label: '最小长度',\n value: 10,\n type: 'number',\n step: 2,\n range: [14, 20]\n },\n 'label.maxLength': {\n label: '最大长度',\n value: 160,\n type: 'number',\n step: 2,\n range: [20, 400]\n },\n 'label.tickPadding': {\n label: '标签与刻度线距离',\n value: 2,\n type: 'number',\n step: 1,\n range: [0, 10]\n },\n 'label.rotate': {\n label: '标签旋转角度',\n value: 18,\n type: 'number',\n step: 1,\n range: [-90, 90]\n },\n 'label.style.fontSize': {\n label: '标签字体大小',\n value: 10,\n type: 'number',\n step: 1,\n range: [0, 40]\n },\n 'label.style.fontWeight': {\n label: '标签字重',\n value: 'normal',\n options: ['normal', 'bold']\n },\n 'label.style.fill': {\n label: '标签字体颜色',\n value: '#000',\n type: 'color'\n }\n });\n window.ConfigPanel(arc, 'Arc axis label', {\n 'label.autoEllipsis': {\n label: '自动省略',\n value: true\n },\n 'label.minLength': {\n label: '最小长度',\n value: 10,\n type: 'number',\n step: 2,\n range: [14, 20]\n },\n 'label.maxLength': {\n label: '最大长度',\n value: 160,\n type: 'number',\n step: 2,\n range: [20, 400]\n },\n 'label.tickPadding': {\n label: '标签与刻度线距离',\n value: 2,\n type: 'number',\n step: 1,\n range: [0, 10]\n },\n 'label.style.fontSize': {\n label: '标签字体大小',\n value: 10,\n type: 'number',\n step: 1,\n range: [0, 40]\n },\n 'label.style.fontWeight': {\n label: '标签字重',\n value: 'normal',\n options: ['normal', 'bold']\n },\n 'label.style.fill': {\n label: '标签字体颜色',\n value: '#000',\n type: 'color'\n }\n }, {\n closed: true\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/axis-line.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/axis-line.ts","order":1,"filename":"axis-line.ts","title":{"zh":"坐标轴轴线设置","en":"Axis line"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Band as BandScale } from '@antv/scale';\nimport { Linear, Arc } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nconst [startX, startY] = [20, 280];\nconst [endX, endY] = [260, 280];\n\nconst domain = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst scale = new BandScale({ domain });\nconst ticks = domain.map((tick) => ({ value: scale.map(tick) + scale.getBandWidth(tick) / 2, text: tick }));\n\nconst points = (x1, y1, x2, y2) => [\n [x1, y1],\n [x2, y2],\n];\nfunction getGridItems(x1: number, y1: number, x2: number, y2: number) {\n const gridItems = [];\n gridItems.push({ points: points(x1, y1, x1, y2) });\n for (let idx = 0; idx < domain.length - 1; idx++) {\n const x = ((scale.map(domain[idx]) + scale.getBandWidth(domain[idx]) + scale.map(domain[idx + 1])) / 2) * (x2 - x1);\n gridItems.push({ points: points(x1 + x, y1, x1 + x, y2) });\n }\n gridItems.push({ points: points(x2, y1, x2, y2) });\n\n return gridItems;\n}\n\nconst gridItems = getGridItems(startX, startY, endX, startY - 100);\n\nconst linear = new Linear({\n style: {\n startPos: [startX, startY],\n endPos: [endX, endY],\n ticks,\n title: {\n content: 'date month',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n grid: {\n items: gridItems,\n alternateColor: '#efefef',\n },\n axisLine: {\n style: {\n stroke: '#416180',\n lineWidth: 0.5,\n strokeOpacity: 0.85,\n },\n arrow: {\n start: null,\n end: null,\n },\n },\n label: {\n style: {\n fontSize: 10,\n },\n },\n },\n});\ncanvas.appendChild(linear);\n\nconst radius = 100;\nconst startAngle = -90;\nconst endAngle = 270;\nconst arcGridItems = ticks.map(({ value }, idx) => {\n const angle = (endAngle - startAngle) * value + startAngle;\n return {\n points: points(\n 200,\n 480,\n 200 + radius * Math.cos((angle * Math.PI) / 180),\n 480 + radius * Math.sin((angle * Math.PI) / 180)\n ),\n };\n});\n\nconst arc = new Arc({\n style: {\n center: [200, 480],\n radius: 100,\n startAngle: -90,\n endAngle: 270,\n ticks,\n grid: {\n items: arcGridItems,\n },\n title: {\n content: 'date month',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n axisLine: {\n style: {\n stroke: '#416180',\n lineWidth: 0.5,\n strokeOpacity: 0.85,\n },\n arrow: {\n start: null,\n end: null,\n },\n },\n label: {\n style: {\n fontSize: 10,\n },\n },\n },\n});\ncanvas.appendChild(arc);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel(linear, 'Linear axis line', {\n 'axisLine.style.stroke': { label: '轴线描边色', value: '#416180', type: 'color' },\n 'axisLine.style.lineWidth': { label: '轴线粗细', value: 0.5, type: 'number', step: 0.5, range: [0, 5] },\n 'axisLine.arrow.start': {\n label: '轴线起始箭头',\n value: '关闭',\n options: [\n { name: '关闭', value: null },\n { name: '开启', value: {} },\n ],\n },\n 'axisLine.arrow.end': {\n label: '轴线终止箭头',\n value: '关闭',\n options: [\n { name: '关闭', value: null },\n { name: '开启', value: {} },\n ],\n },\n});\n\nwindow.ConfigPanel(\n arc,\n 'Arc axis line',\n {\n 'axisLine.style.stroke': { label: '轴线描边色', value: '#416180', type: 'color' },\n 'axisLine.style.lineWidth': { label: '轴线粗细', value: 0.5, type: 'number', step: 0.5, range: [0, 5] },\n },\n { closed: true }\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/scale\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/scale\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.scale, global.gui);\n global.axisLine = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _scale, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n var startX = 20,\n startY = 280;\n var endX = 260,\n endY = 280;\n var domain = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n var scale = new _scale.Band({\n domain: domain\n });\n var ticks = domain.map(function (tick) {\n return {\n value: scale.map(tick) + scale.getBandWidth(tick) / 2,\n text: tick\n };\n });\n\n var points = function points(x1, y1, x2, y2) {\n return [[x1, y1], [x2, y2]];\n };\n\n function getGridItems(x1, y1, x2, y2) {\n var gridItems = [];\n gridItems.push({\n points: points(x1, y1, x1, y2)\n });\n\n for (var idx = 0; idx < domain.length - 1; idx++) {\n var x = (scale.map(domain[idx]) + scale.getBandWidth(domain[idx]) + scale.map(domain[idx + 1])) / 2 * (x2 - x1);\n gridItems.push({\n points: points(x1 + x, y1, x1 + x, y2)\n });\n }\n\n gridItems.push({\n points: points(x2, y1, x2, y2)\n });\n return gridItems;\n }\n\n var gridItems = getGridItems(startX, startY, endX, startY - 100);\n var linear = new _gui.Linear({\n style: {\n startPos: [startX, startY],\n endPos: [endX, endY],\n ticks: ticks,\n title: {\n content: 'date month',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n grid: {\n items: gridItems,\n alternateColor: '#efefef'\n },\n axisLine: {\n style: {\n stroke: '#416180',\n lineWidth: 0.5,\n strokeOpacity: 0.85\n },\n arrow: {\n start: null,\n end: null\n }\n },\n label: {\n style: {\n fontSize: 10\n }\n }\n }\n });\n canvas.appendChild(linear);\n var radius = 100;\n var startAngle = -90;\n var endAngle = 270;\n var arcGridItems = ticks.map(function (_ref, idx) {\n var value = _ref.value;\n var angle = (endAngle - startAngle) * value + startAngle;\n return {\n points: points(200, 480, 200 + radius * Math.cos(angle * Math.PI / 180), 480 + radius * Math.sin(angle * Math.PI / 180))\n };\n });\n var arc = new _gui.Arc({\n style: {\n center: [200, 480],\n radius: 100,\n startAngle: -90,\n endAngle: 270,\n ticks: ticks,\n grid: {\n items: arcGridItems\n },\n title: {\n content: 'date month',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n axisLine: {\n style: {\n stroke: '#416180',\n lineWidth: 0.5,\n strokeOpacity: 0.85\n },\n arrow: {\n start: null,\n end: null\n }\n },\n label: {\n style: {\n fontSize: 10\n }\n }\n }\n });\n canvas.appendChild(arc);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel(linear, 'Linear axis line', {\n 'axisLine.style.stroke': {\n label: '轴线描边色',\n value: '#416180',\n type: 'color'\n },\n 'axisLine.style.lineWidth': {\n label: '轴线粗细',\n value: 0.5,\n type: 'number',\n step: 0.5,\n range: [0, 5]\n },\n 'axisLine.arrow.start': {\n label: '轴线起始箭头',\n value: '关闭',\n options: [{\n name: '关闭',\n value: null\n }, {\n name: '开启',\n value: {}\n }]\n },\n 'axisLine.arrow.end': {\n label: '轴线终止箭头',\n value: '关闭',\n options: [{\n name: '关闭',\n value: null\n }, {\n name: '开启',\n value: {}\n }]\n }\n });\n window.ConfigPanel(arc, 'Arc axis line', {\n 'axisLine.style.stroke': {\n label: '轴线描边色',\n value: '#416180',\n type: 'color'\n },\n 'axisLine.style.lineWidth': {\n label: '轴线粗细',\n value: 0.5,\n type: 'number',\n step: 0.5,\n range: [0, 5]\n }\n }, {\n closed: true\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/axis-title.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/axis-title.ts","order":0,"filename":"axis-title.ts","title":{"zh":"坐标轴标题设置","en":"Axis title"},"screenshot":"","source":"import { Canvas, Group, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { deepMix } from '@antv/util';\nimport { Linear as LinearScale } from '@antv/scale';\nimport { Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 0, y: 0, width: 460, height: 600, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\n\nfunction createData(domain, tickCount = 10, { x1, y1, x2, y2 }) {\n const linearScale = new LinearScale({ domain, range: [0, 1], tickCount, nice: true });\n const ticks = linearScale.getTicks().map((d, idx) => {\n return { value: linearScale.map(d), text: String(d), id: String(idx) };\n });\n\n const points = (x1, y1, x2, y2) => [\n [x1, y1],\n [x2, y2],\n ];\n const gridItems = linearScale.getTicks().map((d, idx) => {\n const y = y1 + (y2 - y1) * linearScale.map(d);\n return { points: points(x1, y, x2, y) };\n });\n\n return { ticks, gridItems };\n}\n\nfunction createAxis(startPos = [0, 0], endPos = [0, 0], options = {}) {\n const axis = new Linear({\n style: deepMix(\n {\n startPos,\n endPos,\n title: { content: 'Quantitative Axis' },\n axisLine: { arrow: { start: { symbol: 'axis-arrow', size: 8 } } },\n },\n options\n ),\n });\n rect.appendChild(axis);\n\n return axis;\n}\n\nconst axis1 = createAxis([100, 324], [100, 164], {\n verticalFactor: -1,\n ticks: createData([0, 700000000], 7, { x1: 100, y1: 164, x2: 300, y2: 324 }).ticks,\n title: {\n content: 'Axis title',\n titlePadding: 2,\n style: {\n fontSize: 12,\n textBaseline: 'bottom',\n },\n },\n label: {\n // maxLength: 36,\n formatter: (tick) => {\n return `${Number(tick.text) / 10 ** 8} 亿`;\n },\n },\n});\n\nconst { ticks: axis2Ticks, gridItems: axis2Items } = createData([0, 8000000], 8, {\n x1: 100,\n x2: 300,\n y1: 556,\n y2: 406,\n});\nconst axis2 = createAxis([100, 556], [100, 406], {\n verticalFactor: -1,\n ticks: axis2Ticks,\n grid: {\n items: axis2Items,\n alternateColor: '#efefef',\n },\n title: {\n content: 'Axis title',\n titleAnchor: 'start',\n rotate: 0,\n // TitlePadding not work, because positionX,positionY could overwrite position.\n positionX: 0,\n positionY: -14,\n style: {\n textAlign: 'right',\n },\n },\n label: {\n maxLength: 54,\n formatter: (tick) => {\n return `${Number(tick.text) / 1000}K`;\n },\n },\n});\ncreateAxis([240, 356], [240, 206], {\n verticalFactor: -1,\n ticks: createData([0, 7000000], 7, { x1: 240, y1: 206, x2: 440, y2: 256 }).ticks,\n title: {\n titleAnchor: 'start',\n rotate: 0,\n positionX: -60,\n style: {\n textAlign: 'left',\n dy: -14,\n },\n },\n label: {\n maxLength: 54,\n formatter: (tick) => {\n return `${Number(tick.text) / 1000}K`;\n },\n },\n});\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel([axis1, axis2], 'Limit title in bounds', {\n 'title.titlePadding': {\n label: '标题与标签偏移',\n type: 'number',\n value: 2,\n step: 1,\n range: [-20, 20],\n },\n 'title.content': {\n label: '标题文本',\n value: 'Axis title',\n options: ['Axis title', 'Quantitative Axis long'],\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/util\", \"@antv/scale\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/util\"), require(\"@antv/scale\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.util, global.scale, global.gui);\n global.axisTitle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _util, _scale, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n }); // 创建一个包围盒\n\n var rect = new _g.Rect({\n style: {\n x: 0,\n y: 0,\n width: 460,\n height: 600,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n\n function createData(domain) {\n var tickCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;\n\n var _ref = arguments.length > 2 ? arguments[2] : undefined,\n x1 = _ref.x1,\n y1 = _ref.y1,\n x2 = _ref.x2,\n y2 = _ref.y2;\n\n var linearScale = new _scale.Linear({\n domain: domain,\n range: [0, 1],\n tickCount: tickCount,\n nice: true\n });\n var ticks = linearScale.getTicks().map(function (d, idx) {\n return {\n value: linearScale.map(d),\n text: String(d),\n id: String(idx)\n };\n });\n\n var points = function points(x1, y1, x2, y2) {\n return [[x1, y1], [x2, y2]];\n };\n\n var gridItems = linearScale.getTicks().map(function (d, idx) {\n var y = y1 + (y2 - y1) * linearScale.map(d);\n return {\n points: points(x1, y, x2, y)\n };\n });\n return {\n ticks: ticks,\n gridItems: gridItems\n };\n }\n\n function createAxis() {\n var startPos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];\n var endPos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var axis = new _gui.Linear({\n style: (0, _util.deepMix)({\n startPos: startPos,\n endPos: endPos,\n title: {\n content: 'Quantitative Axis'\n },\n axisLine: {\n arrow: {\n start: {\n symbol: 'axis-arrow',\n size: 8\n }\n }\n }\n }, options)\n });\n rect.appendChild(axis);\n return axis;\n }\n\n var axis1 = createAxis([100, 324], [100, 164], {\n verticalFactor: -1,\n ticks: createData([0, 700000000], 7, {\n x1: 100,\n y1: 164,\n x2: 300,\n y2: 324\n }).ticks,\n title: {\n content: 'Axis title',\n titlePadding: 2,\n style: {\n fontSize: 12,\n textBaseline: 'bottom'\n }\n },\n label: {\n // maxLength: 36,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 10 ** 8, \" \\u4EBF\");\n }\n }\n });\n\n var _createData = createData([0, 8000000], 8, {\n x1: 100,\n x2: 300,\n y1: 556,\n y2: 406\n }),\n axis2Ticks = _createData.ticks,\n axis2Items = _createData.gridItems;\n\n var axis2 = createAxis([100, 556], [100, 406], {\n verticalFactor: -1,\n ticks: axis2Ticks,\n grid: {\n items: axis2Items,\n alternateColor: '#efefef'\n },\n title: {\n content: 'Axis title',\n titleAnchor: 'start',\n rotate: 0,\n // TitlePadding not work, because positionX,positionY could overwrite position.\n positionX: 0,\n positionY: -14,\n style: {\n textAlign: 'right'\n }\n },\n label: {\n maxLength: 54,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 1000, \"K\");\n }\n }\n });\n createAxis([240, 356], [240, 206], {\n verticalFactor: -1,\n ticks: createData([0, 7000000], 7, {\n x1: 240,\n y1: 206,\n x2: 440,\n y2: 256\n }).ticks,\n title: {\n titleAnchor: 'start',\n rotate: 0,\n positionX: -60,\n style: {\n textAlign: 'left',\n dy: -14\n }\n },\n label: {\n maxLength: 54,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 1000, \"K\");\n }\n }\n });\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel([axis1, axis2], 'Limit title in bounds', {\n 'title.titlePadding': {\n label: '标题与标签偏移',\n type: 'number',\n value: 2,\n step: 1,\n range: [-20, 20]\n },\n 'title.content': {\n label: '标题文本',\n value: 'Axis title',\n options: ['Axis title', 'Quantitative Axis long']\n }\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/label-layout.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/label-layout.ts","order":7,"filename":"label-layout.ts","title":{"zh":"标签布局","en":"Label Layout"},"screenshot":"","source":"import { Canvas, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nconst data = [\n '蚂蚁技术研究院',\n '智能资金',\n '蚂蚁消金',\n '合规线',\n '战略线',\n '商业智能线',\n 'CFO线',\n 'CTO线',\n '投资线',\n 'GR线',\n '社会公益及绿色发展事业群',\n '阿里妈妈事业群',\n 'CMO线',\n '大安全',\n '天猫事业线',\n '影业',\n 'OceanBase',\n '投资基金线',\n '阿里体育',\n '智能科技事业群',\n];\n\nconst tickData = data.map((d, idx) => {\n const step = 1 / data.length;\n return {\n value: step * idx + step / 2,\n text: d,\n id: String(idx),\n };\n});\n\nconst axis = new Linear({\n style: {\n startPos: [0, 300],\n endPos: [600, 300],\n ticks: tickData,\n title: {\n content: 'Axis title',\n },\n label: {\n minLength: 20,\n maxLength: 80,\n autoRotate: true,\n autoHide: false,\n autoHideTickLine: true,\n autoEllipsis: false,\n optionalAngles: [20, 30, 45],\n margin: [0, 0, 0, 0],\n overlapOrder: ['autoRotate', 'autoEllipsis', 'autoHide'],\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10,\n },\n },\n },\n subTickLine: false,\n },\n});\n\ncanvas.appendChild(axis);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel(axis, '样式', {\n 'label.style.fontSize': { label: '标签字号', value: 10, type: 'number', step: 1, range: [5, 30] },\n 'label.margin': {\n label: '标签左右间距',\n value: '[0,0]',\n options: [\n { name: '[0,0]', value: [0, 0] },\n { name: '[0,2,0,2]', value: [0, 2, 0, 2] },\n { name: '[0,4,0,4]', value: [0, 4, 0, 4] },\n ],\n },\n 'label.autoRotate': { label: '自动旋转', value: true },\n 'label.autoEllipsis': { label: '自动省略', value: false },\n 'label.minLength': { label: '最小缩略长度', value: 20, type: 'number', step: 1, range: [20, 40] },\n 'label.maxLength': { label: '标签最大长度', value: 80, type: 'number', step: 1, range: [20, 120] },\n 'label.autoHide': { label: '自动隐藏', value: false },\n 'label.autoHideTickLine': { label: '自动隐藏刻度线', value: true },\n});\n// const labelMin = labelFolder\n// .add(labelCfg, '最少标签数量', 1, 5)\n// .step(1)\n// .onChange((minLabel) => {\n// axis.update({ label: getDefaultLabelCfg({ minLabel }) });\n// });\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.labelLayout = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n var data = ['蚂蚁技术研究院', '智能资金', '蚂蚁消金', '合规线', '战略线', '商业智能线', 'CFO线', 'CTO线', '投资线', 'GR线', '社会公益及绿色发展事业群', '阿里妈妈事业群', 'CMO线', '大安全', '天猫事业线', '影业', 'OceanBase', '投资基金线', '阿里体育', '智能科技事业群'];\n var tickData = data.map(function (d, idx) {\n var step = 1 / data.length;\n return {\n value: step * idx + step / 2,\n text: d,\n id: String(idx)\n };\n });\n var axis = new _gui.Linear({\n style: {\n startPos: [0, 300],\n endPos: [600, 300],\n ticks: tickData,\n title: {\n content: 'Axis title'\n },\n label: {\n minLength: 20,\n maxLength: 80,\n autoRotate: true,\n autoHide: false,\n autoHideTickLine: true,\n autoEllipsis: false,\n optionalAngles: [20, 30, 45],\n margin: [0, 0, 0, 0],\n overlapOrder: ['autoRotate', 'autoEllipsis', 'autoHide']\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10\n }\n }\n },\n subTickLine: false\n }\n });\n canvas.appendChild(axis);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel(axis, '样式', {\n 'label.style.fontSize': {\n label: '标签字号',\n value: 10,\n type: 'number',\n step: 1,\n range: [5, 30]\n },\n 'label.margin': {\n label: '标签左右间距',\n value: '[0,0]',\n options: [{\n name: '[0,0]',\n value: [0, 0]\n }, {\n name: '[0,2,0,2]',\n value: [0, 2, 0, 2]\n }, {\n name: '[0,4,0,4]',\n value: [0, 4, 0, 4]\n }]\n },\n 'label.autoRotate': {\n label: '自动旋转',\n value: true\n },\n 'label.autoEllipsis': {\n label: '自动省略',\n value: false\n },\n 'label.minLength': {\n label: '最小缩略长度',\n value: 20,\n type: 'number',\n step: 1,\n range: [20, 40]\n },\n 'label.maxLength': {\n label: '标签最大长度',\n value: 80,\n type: 'number',\n step: 1,\n range: [20, 120]\n },\n 'label.autoHide': {\n label: '自动隐藏',\n value: false\n },\n 'label.autoHideTickLine': {\n label: '自动隐藏刻度线',\n value: true\n }\n }); // const labelMin = labelFolder\n // .add(labelCfg, '最少标签数量', 1, 5)\n // .step(1)\n // .onChange((minLabel) => {\n // axis.update({ label: getDefaultLabelCfg({ minLabel }) });\n // });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/numeric-axis.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/numeric-axis.ts","order":4,"filename":"numeric-axis.ts","title":{"zh":"数字坐标轴","en":"Numeric axis"},"screenshot":"","source":"import { Canvas, Group, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { deepMix } from '@antv/util';\nimport { Linear as LinearScale } from '@antv/scale';\nimport { Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 0, y: 0, width: 460, height: 600, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\n\nfunction createTicks(domain, tickCount = 10) {\n const linearScale = new LinearScale({ domain, range: [0, 1], tickCount, nice: true });\n return linearScale.getTicks().map((d, idx) => {\n return { value: linearScale.map(d), text: String(d), id: String(idx) };\n });\n}\n\nfunction createAxis(startPos = [0, 0], endPos = [0, 0], options = {}) {\n const axis = new Linear({\n style: deepMix(\n {\n startPos,\n endPos,\n title: { content: 'Quantitative Axis' },\n axisLine: { arrow: { start: { symbol: 'axis-arrow', size: 8 } } },\n },\n {\n ticks: createTicks([0, 480]),\n ...options,\n }\n ),\n });\n rect.appendChild(axis);\n\n return axis;\n}\n\nconst axis1 = createAxis([60, 174], [60, 24], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n content: 'Axis title',\n style: {\n textBaseline: 'bottom',\n },\n },\n label: {\n maxLength: 36,\n formatter: (tick) => {\n return `${Number(tick.text) / 1000}K`;\n },\n },\n});\n\nconst axis2 = createAxis([60, 390], [60, 220], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n content: 'Axis title',\n titleAnchor: 'start',\n rotate: 0,\n positionX: 0,\n positionY: -14,\n style: {\n textAlign: 'right',\n },\n },\n label: {\n maxLength: 54,\n formatter: (tick) => {\n return `${Number(tick.text) / 1000}K`;\n },\n },\n});\ncreateAxis([60, 586], [60, 436], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n titleAnchor: 'start',\n rotate: 0,\n positionX: -60,\n style: {\n textAlign: 'left',\n dy: -14,\n },\n },\n label: {\n maxLength: 54,\n formatter: (tick) => {\n return `${Number(tick.text) / 1000}K`;\n },\n },\n});\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel([axis1, axis2], 'Limit title in bounds', {\n 'title.content': {\n label: '标题文本',\n value: 'Axis title',\n options: ['Axis title', 'Quantitative Axis long long long'],\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/util\", \"@antv/scale\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/util\"), require(\"@antv/scale\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.util, global.scale, global.gui);\n global.numericAxis = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _util, _scale, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n }); // 创建一个包围盒\n\n var rect = new _g.Rect({\n style: {\n x: 0,\n y: 0,\n width: 460,\n height: 600,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n\n function createTicks(domain) {\n var tickCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;\n var linearScale = new _scale.Linear({\n domain: domain,\n range: [0, 1],\n tickCount: tickCount,\n nice: true\n });\n return linearScale.getTicks().map(function (d, idx) {\n return {\n value: linearScale.map(d),\n text: String(d),\n id: String(idx)\n };\n });\n }\n\n function createAxis() {\n var startPos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];\n var endPos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var axis = new _gui.Linear({\n style: (0, _util.deepMix)({\n startPos: startPos,\n endPos: endPos,\n title: {\n content: 'Quantitative Axis'\n },\n axisLine: {\n arrow: {\n start: {\n symbol: 'axis-arrow',\n size: 8\n }\n }\n }\n }, {\n ticks: createTicks([0, 480]),\n ...options\n })\n });\n rect.appendChild(axis);\n return axis;\n }\n\n var axis1 = createAxis([60, 174], [60, 24], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n content: 'Axis title',\n style: {\n textBaseline: 'bottom'\n }\n },\n label: {\n maxLength: 36,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 1000, \"K\");\n }\n }\n });\n var axis2 = createAxis([60, 390], [60, 220], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n content: 'Axis title',\n titleAnchor: 'start',\n rotate: 0,\n positionX: 0,\n positionY: -14,\n style: {\n textAlign: 'right'\n }\n },\n label: {\n maxLength: 54,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 1000, \"K\");\n }\n }\n });\n createAxis([60, 586], [60, 436], {\n verticalFactor: -1,\n ticks: createTicks([0, 7000000], 7),\n title: {\n titleAnchor: 'start',\n rotate: 0,\n positionX: -60,\n style: {\n textAlign: 'left',\n dy: -14\n }\n },\n label: {\n maxLength: 54,\n formatter: function formatter(tick) {\n return \"\".concat(Number(tick.text) / 1000, \"K\");\n }\n }\n });\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel([axis1, axis2], 'Limit title in bounds', {\n 'title.content': {\n label: '标题文本',\n value: 'Axis title',\n options: ['Axis title', 'Quantitative Axis long long long']\n }\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/perf.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/perf.ts","order":9,"filename":"perf.ts","title":{"zh":"大数据量性能","en":"Axis performance"},"screenshot":"","source":"import { Canvas, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nconst count = 5000;\nconst tickData = Array(count)\n .fill(null)\n .map((_, idx) => {\n const step = 1 / count;\n const c = Math.floor(idx / 26) + 1;\n const b = idx % 26;\n return {\n value: step * idx + step / 2,\n text: Array(Math.min(c, 5))\n .fill(String.fromCharCode(b + 65))\n .join(''),\n id: String(idx),\n };\n });\nconst axis = new Linear({\n style: {\n startPos: [0, 300],\n endPos: [600, 300],\n ticks: tickData,\n title: {\n content: 'Axis Title',\n },\n ticksThreshold: 50000,\n label: {\n minLength: 20,\n maxLength: 80,\n autoRotate: false,\n // autoHide: true,\n autoHide: 'greedy',\n autoEllipsis: false,\n optionalAngles: [20, 30, 45],\n style: {\n textAlign: 'start',\n },\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10,\n },\n },\n },\n subTickLine: false,\n },\n});\n\ncanvas.appendChild(axis);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel(axis, '样式', {\n 'label.style.fontSize': { label: '标签字号', value: 10, type: 'number', step: 1, range: [5, 30] },\n 'label.style.textAlign': { label: '标签对齐方式', value: 'left', options: ['start', 'center', 'end'] },\n 'label.autoEllipsis': { label: '自动省略', value: false },\n 'label.minLength': { label: '最小缩略长度', value: 20, type: 'number', step: 5, range: [20, 200] },\n 'label.maxLength': { label: '标签最大长度', value: 160, type: 'number', step: 5, range: [20, 200] },\n 'label.autoRotate': { label: '自动旋转', value: false },\n 'label.autoHide': { label: '自动隐藏', value: true },\n});\n// const labelMin = labelFolder\n// .add(labelCfg, '最少标签数量', 1, 5)\n// .step(1)\n// .onChange((minLabel) => {\n// axis.update({ label: getDefaultLabelCfg({ minLabel }) });\n// });\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.perf = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n var count = 5000;\n var tickData = Array(count).fill(null).map(function (_, idx) {\n var step = 1 / count;\n var c = Math.floor(idx / 26) + 1;\n var b = idx % 26;\n return {\n value: step * idx + step / 2,\n text: Array(Math.min(c, 5)).fill(String.fromCharCode(b + 65)).join(''),\n id: String(idx)\n };\n });\n var axis = new _gui.Linear({\n style: {\n startPos: [0, 300],\n endPos: [600, 300],\n ticks: tickData,\n title: {\n content: 'Axis Title'\n },\n ticksThreshold: 50000,\n label: {\n minLength: 20,\n maxLength: 80,\n autoRotate: false,\n // autoHide: true,\n autoHide: 'greedy',\n autoEllipsis: false,\n optionalAngles: [20, 30, 45],\n style: {\n textAlign: 'start'\n }\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10\n }\n }\n },\n subTickLine: false\n }\n });\n canvas.appendChild(axis);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel(axis, '样式', {\n 'label.style.fontSize': {\n label: '标签字号',\n value: 10,\n type: 'number',\n step: 1,\n range: [5, 30]\n },\n 'label.style.textAlign': {\n label: '标签对齐方式',\n value: 'left',\n options: ['start', 'center', 'end']\n },\n 'label.autoEllipsis': {\n label: '自动省略',\n value: false\n },\n 'label.minLength': {\n label: '最小缩略长度',\n value: 20,\n type: 'number',\n step: 5,\n range: [20, 200]\n },\n 'label.maxLength': {\n label: '标签最大长度',\n value: 160,\n type: 'number',\n step: 5,\n range: [20, 200]\n },\n 'label.autoRotate': {\n label: '自动旋转',\n value: false\n },\n 'label.autoHide': {\n label: '自动隐藏',\n value: true\n }\n }); // const labelMin = labelFolder\n // .add(labelCfg, '最少标签数量', 1, 5)\n // .step(1)\n // .onChange((minLabel) => {\n // axis.update({ label: getDefaultLabelCfg({ minLabel }) });\n // });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/style-callback.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/style-callback.ts","order":6,"filename":"style-callback.ts","title":{"zh":"标签样式支持回调","en":"Callback for label style"},"screenshot":"","source":"import { Canvas, Rect, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear as LinearAxis } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 20, y: 20, width: 460, height: 500, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\n\nrect.appendChild(\n new LinearAxis({\n style: {\n startPos: [10, 40],\n endPos: [410, 40],\n ticks: [\n { value: 0.02, text: 'ABC', id: '0' },\n { value: 0.18, text: 'BCED', id: '1' },\n { value: 0.34, text: 'DEFGH', id: '2' },\n { value: 0.5, text: 'GHIJKM', id: '3' },\n { value: 0.66, text: 'KMLNOPQ', id: '4' },\n { value: 0.8200000000000001, text: 'PQRSTVVW', id: '5' },\n { value: 0.98, text: 'VWXYZ', id: '6' },\n ],\n label: {\n autoEllipsis: true,\n margin: [0, 2],\n autoHide: true,\n autoHideTickLine: false,\n style: (datum, idx) => {\n return {\n fill: 'black',\n fillOpacity: 0.65,\n fontSize: 12,\n dx: idx === 0 ? -4 : idx === 6 ? 4 : 0,\n textAlign: idx === 0 ? 'start' : idx === 6 ? 'end' : 'center',\n };\n },\n },\n },\n })\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.styleCallback = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n }); // 创建一个包围盒\n\n var rect = new _g.Rect({\n style: {\n x: 20,\n y: 20,\n width: 460,\n height: 500,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n rect.appendChild(new _gui.Linear({\n style: {\n startPos: [10, 40],\n endPos: [410, 40],\n ticks: [{\n value: 0.02,\n text: 'ABC',\n id: '0'\n }, {\n value: 0.18,\n text: 'BCED',\n id: '1'\n }, {\n value: 0.34,\n text: 'DEFGH',\n id: '2'\n }, {\n value: 0.5,\n text: 'GHIJKM',\n id: '3'\n }, {\n value: 0.66,\n text: 'KMLNOPQ',\n id: '4'\n }, {\n value: 0.8200000000000001,\n text: 'PQRSTVVW',\n id: '5'\n }, {\n value: 0.98,\n text: 'VWXYZ',\n id: '6'\n }],\n label: {\n autoEllipsis: true,\n margin: [0, 2],\n autoHide: true,\n autoHideTickLine: false,\n style: function style(datum, idx) {\n return {\n fill: 'black',\n fillOpacity: 0.65,\n fontSize: 12,\n dx: idx === 0 ? -4 : idx === 6 ? 4 : 0,\n textAlign: idx === 0 ? 'start' : idx === 6 ? 'end' : 'center'\n };\n }\n }\n }\n }));\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/tick-line.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/tick-line.ts","order":2,"filename":"tick-line.ts","title":{"zh":"坐标刻度线设置","en":"Axis tickLine"},"screenshot":"","source":"import { Canvas, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear, Arc } from '@antv/gui';\n\nconst renderer = new CanvasRenderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true,\n});\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nconst data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\nconst step = 1 / data.length;\nconst tickData = data.map((d, idx) => {\n return { value: step * idx + step / 2, text: d, id: String(idx) };\n});\n\nconst linear = new Linear({\n style: {\n startPos: [20, 100],\n endPos: [260, 100],\n ticks: tickData,\n label: {\n style: {\n fontSize: 10,\n },\n },\n title: {\n content: 'date (month)',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n tickLine: {\n len: 6,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.65,\n lineWidth: 0.5,\n },\n },\n subTickLine: {\n len: 4,\n count: 0,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.45,\n lineWidth: 0.5,\n },\n },\n },\n});\ncanvas.appendChild(linear);\n\nconst arc = new Arc({\n style: {\n center: [200, 400],\n radius: 100,\n ticks: tickData.map((d, idx) => ({ ...d, value: idx * step })),\n label: {\n style: {\n fontSize: 10,\n },\n },\n title: {\n content: 'date (month)',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold',\n },\n },\n tickLine: {\n len: 6,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.65,\n lineWidth: 0.5,\n },\n },\n subTickLine: {\n len: 4,\n count: 4,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.45,\n lineWidth: 0.5,\n },\n },\n },\n});\ncanvas.appendChild(arc);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel([linear, arc], '样式', {\n 'tickLine.style.stroke': { label: '刻度线颜色', value: '#416180', type: 'color' },\n 'tickLine.style.lineWidth': { label: '刻度线粗细', value: 0.5, type: 'number', step: 0.5, range: [0, 5] },\n 'tickLine.len': { label: '刻度线长度', value: 6, type: 'number', step: 1, range: [0, 10] },\n 'subTickLine.style.stroke': { label: '子刻度线颜色', value: '#416180', type: 'color' },\n 'subTickLine.style.lineWidth': { label: '子刻度线粗细', value: 0.5, type: 'number', step: 0.5, range: [0, 5] },\n 'subTickLine.len': { label: '子刻度线长度', value: 4, type: 'number', step: 1, range: [0, 10] },\n 'subTickLine.count': { label: '子刻度线数量', value: 0, type: 'number', step: 1, range: [0, 8] },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.tickLine = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer({\n enableDirtyRectangleRenderingDebug: false,\n enableAutoRendering: true,\n enableDirtyRectangleRendering: true\n });\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n var data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n var step = 1 / data.length;\n var tickData = data.map(function (d, idx) {\n return {\n value: step * idx + step / 2,\n text: d,\n id: String(idx)\n };\n });\n var linear = new _gui.Linear({\n style: {\n startPos: [20, 100],\n endPos: [260, 100],\n ticks: tickData,\n label: {\n style: {\n fontSize: 10\n }\n },\n title: {\n content: 'date (month)',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n tickLine: {\n len: 6,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.65,\n lineWidth: 0.5\n }\n },\n subTickLine: {\n len: 4,\n count: 0,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.45,\n lineWidth: 0.5\n }\n }\n }\n });\n canvas.appendChild(linear);\n var arc = new _gui.Arc({\n style: {\n center: [200, 400],\n radius: 100,\n ticks: tickData.map(function (d, idx) {\n return { ...d,\n value: idx * step\n };\n }),\n label: {\n style: {\n fontSize: 10\n }\n },\n title: {\n content: 'date (month)',\n titleAnchor: 'end',\n style: {\n fontSize: 10,\n fontWeight: 'bold'\n }\n },\n tickLine: {\n len: 6,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.65,\n lineWidth: 0.5\n }\n },\n subTickLine: {\n len: 4,\n count: 4,\n style: {\n stroke: '#416180',\n strokeOpacity: 0.45,\n lineWidth: 0.5\n }\n }\n }\n });\n canvas.appendChild(arc);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel([linear, arc], '样式', {\n 'tickLine.style.stroke': {\n label: '刻度线颜色',\n value: '#416180',\n type: 'color'\n },\n 'tickLine.style.lineWidth': {\n label: '刻度线粗细',\n value: 0.5,\n type: 'number',\n step: 0.5,\n range: [0, 5]\n },\n 'tickLine.len': {\n label: '刻度线长度',\n value: 6,\n type: 'number',\n step: 1,\n range: [0, 10]\n },\n 'subTickLine.style.stroke': {\n label: '子刻度线颜色',\n value: '#416180',\n type: 'color'\n },\n 'subTickLine.style.lineWidth': {\n label: '子刻度线粗细',\n value: 0.5,\n type: 'number',\n step: 0.5,\n range: [0, 5]\n },\n 'subTickLine.len': {\n label: '子刻度线长度',\n value: 4,\n type: 'number',\n step: 1,\n range: [0, 10]\n },\n 'subTickLine.count': {\n label: '子刻度线数量',\n value: 0,\n type: 'number',\n step: 1,\n range: [0, 8]\n }\n });\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/axis/demo/time-axis.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/axis/demo/time-axis.ts","order":5,"filename":"time-axis.ts","title":{"zh":"时间坐标轴","en":"Time Axis"},"screenshot":"","source":"import { Canvas, Rect, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Linear } from '@antv/gui';\nimport { Band as BandScale } from '@antv/scale';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer,\n});\n\nfunction createTickData(domain: string[]) {\n const scale = new BandScale({ domain, paddingOuter: 0.1 });\n return domain.map(\n (d, idx) => {\n return {\n value: scale.map(d) + scale.getBandWidth() / 2,\n text: d,\n id: String(idx),\n };\n },\n [[], 0]\n );\n}\n\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 20, y: 20, width: 460, height: 500, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\n\nfunction createAxis(startPos, endPos, tickData, type, formatter = (item) => item.text) {\n rect.appendChild(\n new Linear({\n style: {\n startPos,\n endPos,\n ticks: createTickData(tickData),\n label: {\n type,\n formatter,\n rotate: 0,\n maxLength: 80,\n minLength: 20,\n autoHide: false,\n autoEllipsis: true,\n alignTick: true,\n autoHideTickLine: false,\n margin: [0, 0, 0, 2],\n },\n },\n })\n );\n}\n\nconst data5 = ['2020-12-28', '2020-12-29', '2020-12-30', '2020-12-31', '2021-01-01', '2021-01-02'];\nconst data6 = ['2020-12-27', ...data5];\nconst data7 = ['2020-12-26', ...data6];\n\n// [todo] 优化日期轴标签展示\ncreateAxis([50, 100], [400, 100], data5, 'time');\n// 日期优化展示\ncreateAxis([50, 230], [400, 230], data6, 'time');\n// 日期优化展示，始终展示最后一个标签（全称）\ncreateAxis([50, 360], [400, 360], data7, 'time');\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"@antv/scale\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"@antv/scale\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.scale);\n global.timeAxis = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, _scale) {\n \"use strict\";\n\n function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\n function _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && Symbol.iterator in Object(iter)) return Array.from(iter); }\n\n function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 1000,\n height: 600,\n renderer: renderer\n });\n\n function createTickData(domain) {\n var scale = new _scale.Band({\n domain: domain,\n paddingOuter: 0.1\n });\n return domain.map(function (d, idx) {\n return {\n value: scale.map(d) + scale.getBandWidth() / 2,\n text: d,\n id: String(idx)\n };\n }, [[], 0]);\n } // 创建一个包围盒\n\n\n var rect = new _g.Rect({\n style: {\n x: 20,\n y: 20,\n width: 460,\n height: 500,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n\n function createAxis(startPos, endPos, tickData, type) {\n var formatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function (item) {\n return item.text;\n };\n rect.appendChild(new _gui.Linear({\n style: {\n startPos: startPos,\n endPos: endPos,\n ticks: createTickData(tickData),\n label: {\n type: type,\n formatter: formatter,\n rotate: 0,\n maxLength: 80,\n minLength: 20,\n autoHide: false,\n autoEllipsis: true,\n alignTick: true,\n autoHideTickLine: false,\n margin: [0, 0, 0, 2]\n }\n }\n }));\n }\n\n var data5 = ['2020-12-28', '2020-12-29', '2020-12-30', '2020-12-31', '2021-01-01', '2021-01-02'];\n var data6 = ['2020-12-27'].concat(data5);\n var data7 = ['2020-12-26'].concat(_toConsumableArray(data6)); // [todo] 优化日期轴标签展示\n\n createAxis([50, 100], [400, 100], data5, 'time'); // 日期优化展示\n\n createAxis([50, 230], [400, 230], data6, 'time'); // 日期优化展示，始终展示最后一个标签（全称）\n\n createAxis([50, 360], [400, 360], data7, 'time');\n});","postFrontmatter":{"en":{"title":"Axis","order":200},"zh":{"title":"坐标轴","order":200}}},{"relativePath":"chart-ui/crosshair/demo/circle.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/crosshair/demo/circle.ts","order":1,"filename":"circle.ts","title":{"zh":"圆形","en":"Circle crosshair"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { CircleCrosshair } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst circle = new CircleCrosshair({\n style: {\n center: [250, 250],\n defaultRadius: 50,\n lineStyle: {\n lineWidth: 1,\n },\n },\n});\ncanvas.appendChild(circle);\n\ncanvas.addEventListener('mousemove', (e) => {\n circle.setPointer([e.offsetX, e.offsetY]);\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.circle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var circle = new _gui.CircleCrosshair({\n style: {\n center: [250, 250],\n defaultRadius: 50,\n lineStyle: {\n lineWidth: 1\n }\n }\n });\n canvas.appendChild(circle);\n canvas.addEventListener('mousemove', function (e) {\n circle.setPointer([e.offsetX, e.offsetY]);\n });\n});","postFrontmatter":{"en":{"title":"Crosshair","order":206},"zh":{"title":"Crosshair","order":206}}},{"relativePath":"chart-ui/crosshair/demo/line.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/crosshair/demo/line.ts","order":0,"filename":"line.ts","title":{"zh":"直线形","en":"Line crosshair"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { LineCrosshair } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst line = new LineCrosshair({\n style: {\n startPos: [100, 50],\n endPos: [100, 400],\n lineStyle: {\n lineWidth: 1,\n },\n text: {\n text: '123',\n position: 'start',\n },\n },\n});\n\ncanvas.appendChild(line);\n\ncanvas.addEventListener('mousemove', (e) => {\n line.setPointer([e.offsetX, e.offsetY]);\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.line = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var line = new _gui.LineCrosshair({\n style: {\n startPos: [100, 50],\n endPos: [100, 400],\n lineStyle: {\n lineWidth: 1\n },\n text: {\n text: '123',\n position: 'start'\n }\n }\n });\n canvas.appendChild(line);\n canvas.addEventListener('mousemove', function (e) {\n line.setPointer([e.offsetX, e.offsetY]);\n });\n});","postFrontmatter":{"en":{"title":"Crosshair","order":206},"zh":{"title":"Crosshair","order":206}}},{"relativePath":"chart-ui/crosshair/demo/polygon.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/crosshair/demo/polygon.ts","order":2,"filename":"polygon.ts","title":{"zh":"多边形","en":"Polygon crosshair"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { PolygonCrosshair } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst [cx, cy] = [250, 250];\nconst polygon = new PolygonCrosshair({\n style: {\n defaultRadius: 50,\n center: [cx, cy],\n sides: 8,\n lineStyle: {\n lineWidth: 1,\n },\n },\n});\ncanvas.appendChild(polygon);\n\n// canvas.addEventListener('mousemove', (e) => {\n// polygon.setPointer([e.offsetX, e.offsetY]);\n// });\n\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst cfgFolder = cfg.addFolder('配置');\ncfgFolder.open();\n\ncfg\n .add({ sides: 8 }, 'sides', 3, 12)\n .step(1)\n .onChange((sides) => {\n polygon.update({ sides });\n });\n\ncfg\n .add({ startAngle: 0 }, 'startAngle', 0, 360)\n .step(1)\n .onChange((startAngle) => {\n polygon.update({ startAngle });\n });\n\ncfg\n .add({ defaultRadius: 50 }, 'defaultRadius', 0, 200)\n .step(5)\n .onChange((defaultRadius) => {\n polygon.update({ defaultRadius });\n });\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.polygon = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var cx = 250,\n cy = 250;\n var polygon = new _gui.PolygonCrosshair({\n style: {\n defaultRadius: 50,\n center: [cx, cy],\n sides: 8,\n lineStyle: {\n lineWidth: 1\n }\n }\n });\n canvas.appendChild(polygon); // canvas.addEventListener('mousemove', (e) => {\n // polygon.setPointer([e.offsetX, e.offsetY]);\n // });\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var cfgFolder = cfg.addFolder('配置');\n cfgFolder.open();\n cfg.add({\n sides: 8\n }, 'sides', 3, 12).step(1).onChange(function (sides) {\n polygon.update({\n sides: sides\n });\n });\n cfg.add({\n startAngle: 0\n }, 'startAngle', 0, 360).step(1).onChange(function (startAngle) {\n polygon.update({\n startAngle: startAngle\n });\n });\n cfg.add({\n defaultRadius: 50\n }, 'defaultRadius', 0, 200).step(5).onChange(function (defaultRadius) {\n polygon.update({\n defaultRadius: defaultRadius\n });\n });\n});","postFrontmatter":{"en":{"title":"Crosshair","order":206},"zh":{"title":"Crosshair","order":206}}},{"relativePath":"chart-ui/poptip/demo/axis-poptip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/axis-poptip.ts","order":5,"filename":"axis-poptip.ts","title":{"zh":"坐标轴标签文本气泡提示","en":"Axis Poptip"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Poptip, Linear } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\n// todo 坐标轴 label 的 poptip\nconst data = [\n '蚂蚁技术研究院',\n '智能资金',\n '蚂蚁消金',\n '合规线',\n '战略线',\n '商业智能线',\n '社会公益及绿色发展事业群',\n 'CFO线',\n 'CTO线',\n '投资线',\n 'GR线',\n];\n\nconst tickData = data.map((d, idx) => {\n const step = 1 / data.length;\n return {\n value: step * idx,\n text: d,\n state: 'default',\n id: String(idx),\n };\n});\n\nconst linear = new Linear({\n style: {\n startPos: [10, 50],\n endPos: [400, 50],\n ticks: tickData,\n title: {},\n label: {\n offset: [0, 15],\n minLength: 20,\n maxLength: 80,\n autoEllipsis: true,\n optionalAngles: [20, 30, 45],\n padding: [0, 0, 0, 0],\n autoHide: false,\n style: {\n default: { textAlign: 'left' },\n },\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10,\n },\n },\n },\n },\n});\n\ncanvas.appendChild(linear);\n\nconst poptip = new Poptip();\n\npoptip.bind(linear, (e) => {\n let target = e.target;\n\n if (target?.name !== 'label') target = false;\n // 判断展示的文本是否缺省\n if (!target?.style?.text.endsWith('...')) target = false;\n return {\n // 获取原始文本\n html: e.target?.getConfig().style.text,\n target,\n position: 'top',\n follow: true,\n offset: [0, -10],\n };\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.axisPoptip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n }); // todo 坐标轴 label 的 poptip\n\n var data = ['蚂蚁技术研究院', '智能资金', '蚂蚁消金', '合规线', '战略线', '商业智能线', '社会公益及绿色发展事业群', 'CFO线', 'CTO线', '投资线', 'GR线'];\n var tickData = data.map(function (d, idx) {\n var step = 1 / data.length;\n return {\n value: step * idx,\n text: d,\n state: 'default',\n id: String(idx)\n };\n });\n var linear = new _gui.Linear({\n style: {\n startPos: [10, 50],\n endPos: [400, 50],\n ticks: tickData,\n title: {},\n label: {\n offset: [0, 15],\n minLength: 20,\n maxLength: 80,\n autoEllipsis: true,\n optionalAngles: [20, 30, 45],\n padding: [0, 0, 0, 0],\n autoHide: false,\n style: {\n default: {\n textAlign: 'left'\n }\n }\n },\n axisLine: {\n arrow: {\n end: {\n symbol: 'axis-arrow',\n size: 10\n }\n }\n }\n }\n });\n canvas.appendChild(linear);\n var poptip = new _gui.Poptip();\n poptip.bind(linear, function (e) {\n var _target, _target2, _target2$style, _e$target;\n\n var target = e.target;\n if (((_target = target) === null || _target === void 0 ? void 0 : _target.name) !== 'label') target = false; // 判断展示的文本是否缺省\n\n if (!((_target2 = target) === null || _target2 === void 0 ? void 0 : (_target2$style = _target2.style) === null || _target2$style === void 0 ? void 0 : _target2$style.text.endsWith('...'))) target = false;\n return {\n // 获取原始文本\n html: (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.getConfig().style.text,\n target: target,\n position: 'top',\n follow: true,\n offset: [0, -10]\n };\n });\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}},{"relativePath":"chart-ui/poptip/demo/basic-poptip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/basic-poptip.ts","order":0,"filename":"basic-poptip.ts","title":{"zh":"基础气泡提示框","en":"Basic Poptip"},"screenshot":"","source":"import { Canvas, Rect, Circle, Text } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Poptip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 270,\n renderer,\n});\n\nconst rect = new Rect({\n style: {\n x: 0,\n y: 20,\n width: 100,\n height: 50,\n fill: 'red',\n },\n});\n\nconst circle = new Circle({\n style: {\n cx: 60,\n cy: 120,\n r: 25,\n fill: 'red',\n },\n});\n\nconst text = new Text({\n style: {\n x: 20,\n y: 200,\n fontFamily: 'PingFang SC',\n text: 'G.Text...',\n fontSize: 20,\n textBaseline: 'top',\n stroke: '#F04864',\n lineWidth: 5,\n },\n});\n\ncanvas.appendChild(rect);\ncanvas.appendChild(circle);\ncanvas.appendChild(text);\n\nfunction createDom(text = 'DOM 元素') {\n const targetDom = document.createElement('div');\n targetDom.innerHTML = text;\n\n Object.assign(targetDom.style, {\n width: '100px',\n height: '50px',\n border: '1px solid red',\n margin: '8px 10px',\n });\n\n document.getElementById('container').appendChild(targetDom);\n\n return targetDom;\n}\n\n// G.Rect\nconst poptip = new Poptip({\n style: {\n text: '隐藏信息',\n },\n});\n\n// G.Rect\npoptip.bind(rect);\n\n// G.Circle\npoptip.bind(circle, () => ({ follow: true }));\n\n// G.Text\npoptip.bind(text, () => {\n return {\n // 获取原始文本\n html: '超长省略信息，超长省略信息',\n arrowPointAtCenter: true,\n };\n});\n\n// dom 目标\npoptip.bind(createDom('top-left'), () => ({ position: 'top-left' }));\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicPoptip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 270,\n renderer: renderer\n });\n var rect = new _g.Rect({\n style: {\n x: 0,\n y: 20,\n width: 100,\n height: 50,\n fill: 'red'\n }\n });\n var circle = new _g.Circle({\n style: {\n cx: 60,\n cy: 120,\n r: 25,\n fill: 'red'\n }\n });\n var text = new _g.Text({\n style: {\n x: 20,\n y: 200,\n fontFamily: 'PingFang SC',\n text: 'G.Text...',\n fontSize: 20,\n textBaseline: 'top',\n stroke: '#F04864',\n lineWidth: 5\n }\n });\n canvas.appendChild(rect);\n canvas.appendChild(circle);\n canvas.appendChild(text);\n\n function createDom() {\n var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'DOM 元素';\n var targetDom = document.createElement('div');\n targetDom.innerHTML = text;\n Object.assign(targetDom.style, {\n width: '100px',\n height: '50px',\n border: '1px solid red',\n margin: '8px 10px'\n });\n document.getElementById('container').appendChild(targetDom);\n return targetDom;\n } // G.Rect\n\n\n var poptip = new _gui.Poptip({\n style: {\n text: '隐藏信息'\n }\n }); // G.Rect\n\n poptip.bind(rect); // G.Circle\n\n poptip.bind(circle, function () {\n return {\n follow: true\n };\n }); // G.Text\n\n poptip.bind(text, function () {\n return {\n // 获取原始文本\n html: '超长省略信息，超长省略信息',\n arrowPointAtCenter: true\n };\n }); // dom 目标\n\n poptip.bind(createDom('top-left'), function () {\n return {\n position: 'top-left'\n };\n });\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}},{"relativePath":"chart-ui/poptip/demo/more-direction-poptip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/more-direction-poptip.ts","order":2,"filename":"more-direction-poptip.ts","title":{"zh":"多方向气泡提示框","en":"More Direction Poptip"},"screenshot":"","source":"import { Canvas, Rect, Circle } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Poptip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer,\n});\n\nconst rect = new Rect({\n style: {\n x: 60,\n y: 40,\n width: 220,\n height: 110,\n fill: 'red',\n },\n});\n\nconst rect2 = new Rect({\n style: {\n x: 60,\n y: 180,\n width: 220,\n height: 110,\n fill: 'red',\n },\n});\n\nconst circle = new Circle({\n style: {\n cx: 120,\n cy: 340,\n r: 25,\n fill: 'red',\n },\n});\n\ncanvas.appendChild(rect);\ncanvas.appendChild(rect2);\ncanvas.appendChild(circle);\n\nconst createPoptip = (target, position, arrowPointAtCenter, follow) => {\n const poptip = new Poptip({\n style: {\n // 每个方向的 poptip 使用不同 id 辨识\n id: `gui-${position}-poptip`,\n position,\n text: position,\n // top left right bottom 方向定点\n arrowPointAtCenter,\n // 是否跟随鼠标\n follow,\n },\n });\n\n poptip.bind(target);\n};\n\nconst positions = [\n 'top',\n 'top-left',\n 'top-right',\n 'right',\n 'right-top',\n 'right-bottom',\n 'bottom',\n 'bottom-left',\n 'bottom-right',\n 'left',\n 'left-top',\n 'left-bottom',\n];\n// 固定 12 个方向展示\npositions.forEach((position) => {\n createPoptip(rect, position, true, false);\n});\n\nconst positions2 = ['top', 'right', 'bottom', 'left'];\n\n// 跟随平移展示\npositions2.forEach((position) => {\n createPoptip(rect2, position, false, false);\n});\n\n// 跟随平移展示\npositions2.forEach((position) => {\n createPoptip(rect2, position, false, false);\n});\n\ncreatePoptip(circle, 'top', false, true);\n\nconst observer = new MutationObserver(() => {\n const poptips = document.getElementsByClassName('gui-poptip');\n Array.from(poptips).forEach((poptip) => {\n if (poptip.id !== 'gui-poptip') poptip.remove();\n });\n});\nconst container = document.getElementById('container');\nobserver.observe(container, { childList: true });\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.moreDirectionPoptip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer: renderer\n });\n var rect = new _g.Rect({\n style: {\n x: 60,\n y: 40,\n width: 220,\n height: 110,\n fill: 'red'\n }\n });\n var rect2 = new _g.Rect({\n style: {\n x: 60,\n y: 180,\n width: 220,\n height: 110,\n fill: 'red'\n }\n });\n var circle = new _g.Circle({\n style: {\n cx: 120,\n cy: 340,\n r: 25,\n fill: 'red'\n }\n });\n canvas.appendChild(rect);\n canvas.appendChild(rect2);\n canvas.appendChild(circle);\n\n var createPoptip = function createPoptip(target, position, arrowPointAtCenter, follow) {\n var poptip = new _gui.Poptip({\n style: {\n // 每个方向的 poptip 使用不同 id 辨识\n id: \"gui-\".concat(position, \"-poptip\"),\n position: position,\n text: position,\n // top left right bottom 方向定点\n arrowPointAtCenter: arrowPointAtCenter,\n // 是否跟随鼠标\n follow: follow\n }\n });\n poptip.bind(target);\n };\n\n var positions = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom']; // 固定 12 个方向展示\n\n positions.forEach(function (position) {\n createPoptip(rect, position, true, false);\n });\n var positions2 = ['top', 'right', 'bottom', 'left']; // 跟随平移展示\n\n positions2.forEach(function (position) {\n createPoptip(rect2, position, false, false);\n }); // 跟随平移展示\n\n positions2.forEach(function (position) {\n createPoptip(rect2, position, false, false);\n });\n createPoptip(circle, 'top', false, true);\n var observer = new MutationObserver(function () {\n var poptips = document.getElementsByClassName('gui-poptip');\n Array.from(poptips).forEach(function (poptip) {\n if (poptip.id !== 'gui-poptip') poptip.remove();\n });\n });\n var container = document.getElementById('container');\n observer.observe(container, {\n childList: true\n });\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}},{"relativePath":"chart-ui/poptip/demo/poptip-domStyles.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/poptip-domStyles.ts","order":1,"filename":"poptip-domStyles.ts","title":{"zh":"气泡提示框样式","en":"Poptip domStyles"},"screenshot":"","source":"import { Canvas, Circle, Text } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Poptip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 140,\n renderer,\n});\n\nconst circle = new Circle({\n style: {\n cx: 180,\n cy: 50,\n r: 25,\n fill: 'red',\n },\n});\n\nconst text = new Text({\n style: {\n x: 300,\n y: 50,\n fontFamily: 'PingFang SC',\n text: 'G.Text...',\n fontSize: 20,\n textBaseline: 'top',\n stroke: '#F04864',\n lineWidth: 5,\n },\n});\n\ncanvas.appendChild(circle);\ncanvas.appendChild(text);\n\n// G.Rect\nconst poptip = new Poptip({\n style: {\n containerClassName: 'custom-poptip-domStyles',\n domStyles: {\n '.custom-poptip-domStyles': {\n 'border-radius': '8px',\n },\n },\n text: '隐藏信息',\n },\n});\n\npoptip.bind(circle, { follow: true, offset: [0, -8] });\npoptip.bind(text, {\n arrowPointAtCenter: true,\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.poptipDomStyles = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 140,\n renderer: renderer\n });\n var circle = new _g.Circle({\n style: {\n cx: 180,\n cy: 50,\n r: 25,\n fill: 'red'\n }\n });\n var text = new _g.Text({\n style: {\n x: 300,\n y: 50,\n fontFamily: 'PingFang SC',\n text: 'G.Text...',\n fontSize: 20,\n textBaseline: 'top',\n stroke: '#F04864',\n lineWidth: 5\n }\n });\n canvas.appendChild(circle);\n canvas.appendChild(text); // G.Rect\n\n var poptip = new _gui.Poptip({\n style: {\n containerClassName: 'custom-poptip-domStyles',\n domStyles: {\n '.custom-poptip-domStyles': {\n 'border-radius': '8px'\n }\n },\n text: '隐藏信息'\n }\n });\n poptip.bind(circle, {\n follow: true,\n offset: [0, -8]\n });\n poptip.bind(text, {\n arrowPointAtCenter: true\n });\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}},{"relativePath":"chart-ui/legend/demo/basic-category.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/basic-category.ts","order":8,"filename":"basic-category.ts","title":{"zh":"分类图例","en":"Basic category"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer,\n});\n\nconst items1 = [\n { name: '事例一', color: '#4982f8' },\n { name: '事例二', color: '#41d59c' },\n { name: '事例三', color: '#516587' },\n { name: '事例四', color: '#f9b41b' },\n { name: '事例五', color: '#624ef7' },\n];\n\nconst items2 = [\n { name: '1991', color: '#4982f8' },\n { name: '1992', color: '#41d59c' },\n { name: '1993', color: '#516587' },\n { name: '1994', color: '#f9b41b' },\n { name: '1995', color: '#624ef7' },\n];\n\nconst items3 = [\n { name: 'Tokyo', color: '#4982f8' },\n { name: 'London', color: '#41d59c' },\n];\n\nconst items4 = [\n { name: 'series1', color: '#4982f8' },\n { name: 'series2', color: '#41d59c' },\n];\n\nfunction createCategory(x, y, items, symbol = 'circle', furtherOptions = {}) {\n const category = new Category({\n style: {\n x,\n y,\n title: { content: 'Legend title' },\n items,\n itemMarker: {\n size: 10,\n symbol,\n style: {\n active: { stroke: '#000', lineWidth: 1 },\n },\n },\n padding: [12, 0],\n spacing: [8, 0],\n maxItemWidth: 160,\n pageNavigator: {\n pageSpacing: 4,\n },\n ...furtherOptions,\n },\n });\n canvas.appendChild(category);\n\n // 外部处理事件监听和交互\n category.addEventListener('pointermove', (evt) => {\n const legendItem = evt.composedPath().find((d) => d.className === 'legend-item');\n if (!legendItem) return;\n legendItem.setState('active');\n });\n category.addEventListener('pointerout', (evt) => {\n const legendItem = evt.composedPath().find((d) => d.className === 'legend-item');\n if (!legendItem) return;\n legendItem.setState('default');\n });\n}\n\ncreateCategory(0, 0, items1, undefined, { maxWidth: 200 });\ncreateCategory(0, 60, items2, 'square');\ncreateCategory(0, 120, items3, undefined, {\n padding: [4, 8],\n title: { content: '带背景框' },\n backgroundStyle: {\n fill: 'rgba(255,0,0,0.05)',\n radius: 4,\n },\n itemMarker: {\n size: 12,\n symbol: 'smooth',\n style: {\n lineWidth: 1,\n fill: 'transparent',\n },\n },\n});\ncreateCategory(0, 180, items4, undefined, {\n itemMarker: {\n size: 10,\n symbol: 'hvh',\n style: {\n lineWidth: 1,\n fill: 'transparent',\n },\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicCategory = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer: renderer\n });\n var items1 = [{\n name: '事例一',\n color: '#4982f8'\n }, {\n name: '事例二',\n color: '#41d59c'\n }, {\n name: '事例三',\n color: '#516587'\n }, {\n name: '事例四',\n color: '#f9b41b'\n }, {\n name: '事例五',\n color: '#624ef7'\n }];\n var items2 = [{\n name: '1991',\n color: '#4982f8'\n }, {\n name: '1992',\n color: '#41d59c'\n }, {\n name: '1993',\n color: '#516587'\n }, {\n name: '1994',\n color: '#f9b41b'\n }, {\n name: '1995',\n color: '#624ef7'\n }];\n var items3 = [{\n name: 'Tokyo',\n color: '#4982f8'\n }, {\n name: 'London',\n color: '#41d59c'\n }];\n var items4 = [{\n name: 'series1',\n color: '#4982f8'\n }, {\n name: 'series2',\n color: '#41d59c'\n }];\n\n function createCategory(x, y, items) {\n var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'circle';\n var furtherOptions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n var category = new _gui.Category({\n style: {\n x: x,\n y: y,\n title: {\n content: 'Legend title'\n },\n items: items,\n itemMarker: {\n size: 10,\n symbol: symbol,\n style: {\n active: {\n stroke: '#000',\n lineWidth: 1\n }\n }\n },\n padding: [12, 0],\n spacing: [8, 0],\n maxItemWidth: 160,\n pageNavigator: {\n pageSpacing: 4\n },\n ...furtherOptions\n }\n });\n canvas.appendChild(category); // 外部处理事件监听和交互\n\n category.addEventListener('pointermove', function (evt) {\n var legendItem = evt.composedPath().find(function (d) {\n return d.className === 'legend-item';\n });\n if (!legendItem) return;\n legendItem.setState('active');\n });\n category.addEventListener('pointerout', function (evt) {\n var legendItem = evt.composedPath().find(function (d) {\n return d.className === 'legend-item';\n });\n if (!legendItem) return;\n legendItem.setState('default');\n });\n }\n\n createCategory(0, 0, items1, undefined, {\n maxWidth: 200\n });\n createCategory(0, 60, items2, 'square');\n createCategory(0, 120, items3, undefined, {\n padding: [4, 8],\n title: {\n content: '带背景框'\n },\n backgroundStyle: {\n fill: 'rgba(255,0,0,0.05)',\n radius: 4\n },\n itemMarker: {\n size: 12,\n symbol: 'smooth',\n style: {\n lineWidth: 1,\n fill: 'transparent'\n }\n }\n });\n createCategory(0, 180, items4, undefined, {\n itemMarker: {\n size: 10,\n symbol: 'hvh',\n style: {\n lineWidth: 1,\n fill: 'transparent'\n }\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/basic-continuous.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/basic-continuous.ts","order":0,"filename":"basic-continuous.ts","title":{"zh":"基本连续图例","en":"Basic continuous"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst continuous = new Continuous({\n style: {\n padding: [0, 0, 0, 12],\n title: {\n content: '连续图例',\n },\n rail: {\n size: 24,\n length: 120,\n },\n handle: null,\n min: 0,\n max: 100,\n color: [\n '#d0e3fa',\n '#acc7f6',\n '#8daaf2',\n '#6d8eea',\n '#4d73cd',\n '#325bb1',\n '#5a3e75',\n '#8c3c79',\n '#e23455',\n '#e7655b',\n ],\n },\n});\n\ncanvas.appendChild(continuous);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel([continuous], '样式', {\n 'rail.size': { label: '滑轨大小', value: 24, type: 'number', step: 2, range: [12, 32] },\n 'rail.length': { label: '滑轨长度', value: 120, type: 'number', step: 10, range: [100, 200] },\n padding: { label: '图例内边距', value: 12, type: 'number', step: 1, range: [10, 20] },\n orientation: {\n label: '图例方向',\n value: 'horizontal',\n options: [\n { name: '横向', value: 'horizontal' },\n { name: '纵向', value: 'vertical' },\n ],\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicContinuous = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var continuous = new _gui.Continuous({\n style: {\n padding: [0, 0, 0, 12],\n title: {\n content: '连续图例'\n },\n rail: {\n size: 24,\n length: 120\n },\n handle: null,\n min: 0,\n max: 100,\n color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b']\n }\n });\n canvas.appendChild(continuous);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel([continuous], '样式', {\n 'rail.size': {\n label: '滑轨大小',\n value: 24,\n type: 'number',\n step: 2,\n range: [12, 32]\n },\n 'rail.length': {\n label: '滑轨长度',\n value: 120,\n type: 'number',\n step: 10,\n range: [100, 200]\n },\n padding: {\n label: '图例内边距',\n value: 12,\n type: 'number',\n step: 1,\n range: [10, 20]\n },\n orientation: {\n label: '图例方向',\n value: 'horizontal',\n options: [{\n name: '横向',\n value: 'horizontal'\n }, {\n name: '纵向',\n value: 'vertical'\n }]\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/category-auto-wrap.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/category-auto-wrap.ts","order":13,"filename":"category-auto-wrap.ts","title":{"zh":"分类图例多行分页","en":" 分类图例多行分页"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst items = [\n { name: 'Chrome', value: '7.08%', state: 'selected', color: '#5B8FF9' },\n { name: 'IE', value: '5.41%', state: 'selected', color: '#61DDAA' },\n { name: 'QQ', value: '5.35%', state: 'selected', color: '#65789B' },\n { name: 'Firefox', value: '1.23%', color: '#F6BD16' },\n { name: 'Microsoft Edge', value: '3.51%', color: '#7262fd' },\n { name: '360', value: '2.59%' },\n { name: 'Opera', value: '0.87%' },\n { name: 'Sogou', value: '1.06%' },\n { name: 'Others', value: '0.59%' },\n].map(({ name, value }) => {\n return { name, value, id: name, state: 'selected' };\n});\n\nconst category = new Category({\n style: {\n x: 10,\n y: 10,\n items,\n title: {\n content: '基本分类图例',\n },\n spacing: [10, 10],\n maxWidth: 440,\n autoWrap: true,\n maxRows: 4,\n cols: 3,\n itemMarker: {\n style: {\n fill: '#6bce85',\n },\n },\n },\n});\n\ncanvas.appendChild(category);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.categoryAutoWrap = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var items = [{\n name: 'Chrome',\n value: '7.08%',\n state: 'selected',\n color: '#5B8FF9'\n }, {\n name: 'IE',\n value: '5.41%',\n state: 'selected',\n color: '#61DDAA'\n }, {\n name: 'QQ',\n value: '5.35%',\n state: 'selected',\n color: '#65789B'\n }, {\n name: 'Firefox',\n value: '1.23%',\n color: '#F6BD16'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%',\n color: '#7262fd'\n }, {\n name: '360',\n value: '2.59%'\n }, {\n name: 'Opera',\n value: '0.87%'\n }, {\n name: 'Sogou',\n value: '1.06%'\n }, {\n name: 'Others',\n value: '0.59%'\n }].map(function (_ref) {\n var name = _ref.name,\n value = _ref.value;\n return {\n name: name,\n value: value,\n id: name,\n state: 'selected'\n };\n });\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 10,\n items: items,\n title: {\n content: '基本分类图例'\n },\n spacing: [10, 10],\n maxWidth: 440,\n autoWrap: true,\n maxRows: 4,\n cols: 3,\n itemMarker: {\n style: {\n fill: '#6bce85'\n }\n }\n }\n });\n canvas.appendChild(category);\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/category-event.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/category-event.ts","order":14,"filename":"category-event.ts","title":{"zh":"事件监听","en":" Event Listener"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst items = [\n { name: 'Chrome', value: '7.08%', color: '#5B8FF9' },\n { name: 'IE', value: '5.41%', color: '#61DDAA' },\n { name: 'QQ', value: '5.35%', color: '#65789B' },\n { name: 'Firefox', value: '1.23%', color: '#F6BD16' },\n { name: 'Microsoft Edge', value: '3.51%', color: '#7262fd' },\n { name: '360', value: '2.59%' },\n { name: 'Opera', value: '0.87%' },\n { name: 'Sogou', value: '1.06%' },\n { name: 'Others', value: '0.59%' },\n];\nconst category = new Category({\n style: {\n x: 10,\n y: 20,\n items,\n title: {\n content: '基本分类图例',\n },\n spacing: [10, 10],\n maxWidth: 440,\n autoWrap: true,\n maxRows: 4,\n cols: 3,\n itemMarker: {\n style: {\n fill: '#6bce85',\n active: {\n stroke: '#000',\n lineWidth: 1,\n },\n unselected: {\n fillOpacity: 0.35,\n },\n },\n },\n },\n});\n\ncanvas.appendChild(category);\n\nconst itemsState = {};\n/** valueChanged */\ncategory.addEventListener('pointerdown', (event) => {\n const target = event.composedPath().find((d) => d.className === 'legend-item');\n if (target) {\n if (target.getState().includes('unselected')) {\n target.setState('unselected', false);\n } else {\n target.setState('unselected', true);\n }\n }\n});\n/** valueChanged */\nlet activeLegendItem;\ncategory.addEventListener('pointermove', (event) => {\n const target = event.composedPath().find((d) => d.className === 'legend-item');\n if (activeLegendItem && activeLegendItem !== target) {\n activeLegendItem.setState('active', false);\n activeLegendItem = null;\n } else if (target) {\n if (!target.getState().includes('unselected')) {\n target.setState('active', true);\n activeLegendItem = target;\n }\n }\n});\ncategory.addEventListener('pointerleave', (event) => {\n if (activeLegendItem) {\n activeLegendItem.setState('active', false);\n activeLegendItem = null;\n }\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.categoryEvent = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var items = [{\n name: 'Chrome',\n value: '7.08%',\n color: '#5B8FF9'\n }, {\n name: 'IE',\n value: '5.41%',\n color: '#61DDAA'\n }, {\n name: 'QQ',\n value: '5.35%',\n color: '#65789B'\n }, {\n name: 'Firefox',\n value: '1.23%',\n color: '#F6BD16'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%',\n color: '#7262fd'\n }, {\n name: '360',\n value: '2.59%'\n }, {\n name: 'Opera',\n value: '0.87%'\n }, {\n name: 'Sogou',\n value: '1.06%'\n }, {\n name: 'Others',\n value: '0.59%'\n }];\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 20,\n items: items,\n title: {\n content: '基本分类图例'\n },\n spacing: [10, 10],\n maxWidth: 440,\n autoWrap: true,\n maxRows: 4,\n cols: 3,\n itemMarker: {\n style: {\n fill: '#6bce85',\n active: {\n stroke: '#000',\n lineWidth: 1\n },\n unselected: {\n fillOpacity: 0.35\n }\n }\n }\n }\n });\n canvas.appendChild(category);\n var itemsState = {};\n /** valueChanged */\n\n category.addEventListener('pointerdown', function (event) {\n var target = event.composedPath().find(function (d) {\n return d.className === 'legend-item';\n });\n\n if (target) {\n if (target.getState().includes('unselected')) {\n target.setState('unselected', false);\n } else {\n target.setState('unselected', true);\n }\n }\n });\n /** valueChanged */\n\n var activeLegendItem;\n category.addEventListener('pointermove', function (event) {\n var target = event.composedPath().find(function (d) {\n return d.className === 'legend-item';\n });\n\n if (activeLegendItem && activeLegendItem !== target) {\n activeLegendItem.setState('active', false);\n activeLegendItem = null;\n } else if (target) {\n if (!target.getState().includes('unselected')) {\n target.setState('active', true);\n activeLegendItem = target;\n }\n }\n });\n category.addEventListener('pointerleave', function (event) {\n if (activeLegendItem) {\n activeLegendItem.setState('active', false);\n activeLegendItem = null;\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/category-marker.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/category-marker.ts","order":10,"filename":"category-marker.ts","title":{"zh":"Marker样式","en":"Marker Style"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst category = new Category({\n style: {\n x: 10,\n y: 10,\n items: [\n { name: 'Chrome', value: '7.08%', id: 'chrome', state: 'selected', color: '#5B8FF9' },\n { name: 'IE', value: '5.41%', id: 'IE', state: 'selected', color: '#61DDAA' },\n { name: 'QQ', value: '5.35%', id: 'QQ', state: 'selected', color: '#65789B' },\n { name: 'Firefox', value: '1.23%', id: 'Firefox', color: '#F6BD16', state: 'unselected' },\n { name: 'Microsoft Edge', value: '3.51%', color: '#7262fd', state: 'unselected' },\n { name: '360', value: '2.59%', state: 'unselected' },\n { name: 'Opera', value: '0.87%', state: 'unselected' },\n { name: 'Sogou', value: '1.06%', state: 'unselected' },\n { name: 'Others', value: '0.59%', state: 'unselected' },\n ],\n title: {\n content: '基本分类图例',\n },\n spacing: [10, 10],\n maxWidth: 350,\n maxItemWidth: 180,\n itemMarker: (item, idx) => {\n return {\n symbol: [\n 'diamond',\n 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',\n 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',\n ][idx % 3],\n size: idx % 3 ? 6 : 12,\n style: {\n fill: ['#ecbf41', '#d94948', '#3871e0'][idx % 3],\n unselected: {\n fill: '#d8d8d8',\n },\n },\n };\n },\n itemName: {\n spacing: 12,\n },\n },\n});\n\ncanvas.appendChild(category);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.categoryMarker = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 10,\n items: [{\n name: 'Chrome',\n value: '7.08%',\n id: 'chrome',\n state: 'selected',\n color: '#5B8FF9'\n }, {\n name: 'IE',\n value: '5.41%',\n id: 'IE',\n state: 'selected',\n color: '#61DDAA'\n }, {\n name: 'QQ',\n value: '5.35%',\n id: 'QQ',\n state: 'selected',\n color: '#65789B'\n }, {\n name: 'Firefox',\n value: '1.23%',\n id: 'Firefox',\n color: '#F6BD16',\n state: 'unselected'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%',\n color: '#7262fd',\n state: 'unselected'\n }, {\n name: '360',\n value: '2.59%',\n state: 'unselected'\n }, {\n name: 'Opera',\n value: '0.87%',\n state: 'unselected'\n }, {\n name: 'Sogou',\n value: '1.06%',\n state: 'unselected'\n }, {\n name: 'Others',\n value: '0.59%',\n state: 'unselected'\n }],\n title: {\n content: '基本分类图例'\n },\n spacing: [10, 10],\n maxWidth: 350,\n maxItemWidth: 180,\n itemMarker: function itemMarker(item, idx) {\n return {\n symbol: ['diamond', 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg'][idx % 3],\n size: idx % 3 ? 6 : 12,\n style: {\n fill: ['#ecbf41', '#d94948', '#3871e0'][idx % 3],\n unselected: {\n fill: '#d8d8d8'\n }\n }\n };\n },\n itemName: {\n spacing: 12\n }\n }\n });\n canvas.appendChild(category);\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/category-pagination.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/category-pagination.ts","order":11,"filename":"category-pagination.ts","title":{"zh":"分页布局","en":" Pagination"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer,\n});\n\nconst category = new Category({\n style: {\n x: 10,\n y: 10,\n title: {\n content: '基本分类图例',\n },\n items: [\n { name: 'Chrome', value: '7.08%', id: 'chrome', state: 'selected', color: '#5B8FF9' },\n { name: 'IE', value: '5.41%', id: 'IE', state: 'selected', color: '#61DDAA' },\n { name: 'QQ', value: '5.35%', id: 'QQ', state: 'selected', color: '#65789B' },\n { name: 'Firefox', value: '1.23%', id: 'Firefox', color: '#F6BD16' },\n { name: 'Microsoft Edge', value: '3.51%', color: '#7262fd' },\n { name: '360', value: '2.59%' },\n { name: 'Opera', value: '0.87%' },\n { name: 'Sogou', value: '1.06%' },\n { name: 'Others', value: '0.59%' },\n ].map(({ name, value }) => {\n return { name, value, id: name, state: 'selected' };\n }),\n spacing: [10, 4],\n maxItemWidth: 160,\n maxHeight: 100,\n orientation: 'vertical',\n },\n});\n\ncanvas.appendChild(category);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst layoutFolder = cfg.addFolder('布局');\nlayoutFolder.open();\nconst layoutCfg = {\n 布局: '单行',\n 按钮位置: '底部',\n 项宽: 140,\n 最大宽度: 300,\n 最大高度: 200,\n};\nlayoutFolder\n .add(layoutCfg, '布局', ['单行', '单列', '单行分页', '单列分页', '多行', '多列', '多行分页', '多列分页'])\n .onChange((layout) => {\n const row = {\n orientation: 'horizontal',\n itemWidth: undefined,\n maxItemWidth: 160,\n autoWrap: false,\n maxWidth: null,\n maxHeight: undefined,\n maxCols: undefined,\n maxRows: null,\n };\n const rows = {\n ...row,\n maxWidth: 300,\n autoWrap: true,\n };\n const rowPaging = {\n ...row,\n maxWidth: 300,\n };\n const rowsPaging = {\n ...rows,\n maxRows: 3,\n };\n\n const col = {\n orientation: 'vertical',\n itemWidth: 140,\n autoWrap: false,\n maxItemWidth: 160,\n maxWidth: undefined,\n maxHeight: null,\n maxCols: undefined,\n maxRows: null,\n };\n // const cols = {\n // ...col,\n // autoWrap: true,\n // maxHeight: 200,\n // maxRows: undefined,\n // maxCols: null,\n // };\n const colPaging = {\n ...col,\n maxHeight: 200,\n };\n // const colsPaging = {\n // ...cols,\n // maxHeight: 60,\n // maxCols: 3,\n // };\n\n const layoutStrategy = {\n 单行: row,\n 单列: col,\n 单行分页: rowPaging,\n 单列分页: colPaging,\n 多行: rows,\n // 多列: cols,\n 多行分页: rowsPaging,\n // 多列分页: colsPaging,\n };\n category.update({ ...layoutStrategy[layout] });\n });\n\nlayoutFolder.add(layoutCfg, '项宽', 0, 300).onChange((itemWidth) => {\n category.update({ itemWidth });\n});\nlayoutFolder.add(layoutCfg, '最大宽度', 0, 500).onChange((maxWidth) => {\n category.update({ maxWidth });\n});\nlayoutFolder.add(layoutCfg, '最大高度', 0, 300).onChange((maxHeight) => {\n category.update({ maxHeight });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.categoryPagination = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer: renderer\n });\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 10,\n title: {\n content: '基本分类图例'\n },\n items: [{\n name: 'Chrome',\n value: '7.08%',\n id: 'chrome',\n state: 'selected',\n color: '#5B8FF9'\n }, {\n name: 'IE',\n value: '5.41%',\n id: 'IE',\n state: 'selected',\n color: '#61DDAA'\n }, {\n name: 'QQ',\n value: '5.35%',\n id: 'QQ',\n state: 'selected',\n color: '#65789B'\n }, {\n name: 'Firefox',\n value: '1.23%',\n id: 'Firefox',\n color: '#F6BD16'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%',\n color: '#7262fd'\n }, {\n name: '360',\n value: '2.59%'\n }, {\n name: 'Opera',\n value: '0.87%'\n }, {\n name: 'Sogou',\n value: '1.06%'\n }, {\n name: 'Others',\n value: '0.59%'\n }].map(function (_ref) {\n var name = _ref.name,\n value = _ref.value;\n return {\n name: name,\n value: value,\n id: name,\n state: 'selected'\n };\n }),\n spacing: [10, 4],\n maxItemWidth: 160,\n maxHeight: 100,\n orientation: 'vertical'\n }\n });\n canvas.appendChild(category);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var layoutFolder = cfg.addFolder('布局');\n layoutFolder.open();\n var layoutCfg = {\n 布局: '单行',\n 按钮位置: '底部',\n 项宽: 140,\n 最大宽度: 300,\n 最大高度: 200\n };\n layoutFolder.add(layoutCfg, '布局', ['单行', '单列', '单行分页', '单列分页', '多行', '多列', '多行分页', '多列分页']).onChange(function (layout) {\n var row = {\n orientation: 'horizontal',\n itemWidth: undefined,\n maxItemWidth: 160,\n autoWrap: false,\n maxWidth: null,\n maxHeight: undefined,\n maxCols: undefined,\n maxRows: null\n };\n var rows = { ...row,\n maxWidth: 300,\n autoWrap: true\n };\n var rowPaging = { ...row,\n maxWidth: 300\n };\n var rowsPaging = { ...rows,\n maxRows: 3\n };\n var col = {\n orientation: 'vertical',\n itemWidth: 140,\n autoWrap: false,\n maxItemWidth: 160,\n maxWidth: undefined,\n maxHeight: null,\n maxCols: undefined,\n maxRows: null\n }; // const cols = {\n // ...col,\n // autoWrap: true,\n // maxHeight: 200,\n // maxRows: undefined,\n // maxCols: null,\n // };\n\n var colPaging = { ...col,\n maxHeight: 200\n }; // const colsPaging = {\n // ...cols,\n // maxHeight: 60,\n // maxCols: 3,\n // };\n\n var layoutStrategy = {\n 单行: row,\n 单列: col,\n 单行分页: rowPaging,\n 单列分页: colPaging,\n 多行: rows,\n // 多列: cols,\n 多行分页: rowsPaging // 多列分页: colsPaging,\n\n };\n category.update({ ...layoutStrategy[layout]\n });\n });\n layoutFolder.add(layoutCfg, '项宽', 0, 300).onChange(function (itemWidth) {\n category.update({\n itemWidth: itemWidth\n });\n });\n layoutFolder.add(layoutCfg, '最大宽度', 0, 500).onChange(function (maxWidth) {\n category.update({\n maxWidth: maxWidth\n });\n });\n layoutFolder.add(layoutCfg, '最大高度', 0, 300).onChange(function (maxHeight) {\n category.update({\n maxHeight: maxHeight\n });\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/category-style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/category-style.ts","order":9,"filename":"category-style.ts","title":{"zh":"样式设置","en":"Style"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-svg';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst items = [\n { name: 'Chrome', value: '7.08%', id: 'chrome', state: 'selected', color: '#5B8FF9' },\n { name: 'IE', value: '5.41%', id: 'IE', state: 'selected', color: '#61DDAA' },\n { name: 'QQ', value: '5.35%', id: 'QQ', state: 'selected', color: '#65789B' },\n { name: 'Firefox', value: '1.23%', id: 'Firefox', color: '#F6BD16' },\n { name: 'Microsoft Edge', value: '3.51%', color: '#7262fd' },\n { name: '360', value: '2.59%' },\n { name: 'Opera', value: '0.87%' },\n { name: 'Sogou', value: '1.06%' },\n { name: 'Others', value: '0.59%' },\n];\n\nconst category = new Category({\n style: {\n pager: {\n button: {\n position: 'right',\n },\n },\n x: 10,\n y: 10,\n items,\n title: {\n content: '基本分类图例',\n },\n spacing: [10, 10],\n maxWidth: 350,\n maxItemWidth: 180,\n autoWrap: true,\n itemMarker: ({ color }) => {\n return {\n style: {\n fill: color || '#ecbf41',\n },\n };\n },\n itemName: {\n style: {\n fill: '#d94948',\n },\n },\n itemValue: {\n style: {\n fill: '#1cb4a2',\n },\n },\n },\n});\n\ncanvas.appendChild(category);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-svg\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-svg\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gSvg, global.gui);\n global.categoryStyle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gSvg, _gui) {\n \"use strict\";\n\n var renderer = new _gSvg.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var items = [{\n name: 'Chrome',\n value: '7.08%',\n id: 'chrome',\n state: 'selected',\n color: '#5B8FF9'\n }, {\n name: 'IE',\n value: '5.41%',\n id: 'IE',\n state: 'selected',\n color: '#61DDAA'\n }, {\n name: 'QQ',\n value: '5.35%',\n id: 'QQ',\n state: 'selected',\n color: '#65789B'\n }, {\n name: 'Firefox',\n value: '1.23%',\n id: 'Firefox',\n color: '#F6BD16'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%',\n color: '#7262fd'\n }, {\n name: '360',\n value: '2.59%'\n }, {\n name: 'Opera',\n value: '0.87%'\n }, {\n name: 'Sogou',\n value: '1.06%'\n }, {\n name: 'Others',\n value: '0.59%'\n }];\n var category = new _gui.Category({\n style: {\n pager: {\n button: {\n position: 'right'\n }\n },\n x: 10,\n y: 10,\n items: items,\n title: {\n content: '基本分类图例'\n },\n spacing: [10, 10],\n maxWidth: 350,\n maxItemWidth: 180,\n autoWrap: true,\n itemMarker: function itemMarker(_ref) {\n var color = _ref.color;\n return {\n style: {\n fill: color || '#ecbf41'\n }\n };\n },\n itemName: {\n style: {\n fill: '#d94948'\n }\n },\n itemValue: {\n style: {\n fill: '#1cb4a2'\n }\n }\n }\n });\n canvas.appendChild(category);\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/continuous-color.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/continuous-color.ts","order":3,"filename":"continuous-color.ts","title":{"zh":"颜色设置","en":"Color"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst createContinuous = (x, y, color) => {\n canvas.appendChild(\n new Continuous({\n style: {\n x,\n y,\n color,\n label: false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n },\n handle: null,\n min: 0,\n max: 100,\n },\n })\n );\n};\n\ncreateContinuous(0, 0, '#6d8eea');\n\ncreateContinuous(0, 50, [\n '#7fc9ac',\n '#87ccae',\n '#90ceb1',\n '#98d1b3',\n '#a0d3b5',\n '#a9d6b8',\n '#b1d8ba',\n '#badbbd',\n '#c2ddbf',\n '#cae0c1',\n '#d3e2c4',\n '#dbe5c6',\n]);\n\ncreateContinuous(0, 100, [\n '#fff7f0',\n '#feefe2',\n '#fde8d5',\n '#fce0c7',\n '#fbd8b9',\n '#fad1ab',\n '#f9c99e',\n '#f8c290',\n '#f7ba82',\n '#f6b274',\n '#f5ab67',\n '#f4a359',\n]);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.continuousColor = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n\n var createContinuous = function createContinuous(x, y, color) {\n canvas.appendChild(new _gui.Continuous({\n style: {\n x: x,\n y: y,\n color: color,\n label: false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90]\n },\n handle: null,\n min: 0,\n max: 100\n }\n }));\n };\n\n createContinuous(0, 0, '#6d8eea');\n createContinuous(0, 50, ['#7fc9ac', '#87ccae', '#90ceb1', '#98d1b3', '#a0d3b5', '#a9d6b8', '#b1d8ba', '#badbbd', '#c2ddbf', '#cae0c1', '#d3e2c4', '#dbe5c6']);\n createContinuous(0, 100, ['#fff7f0', '#feefe2', '#fde8d5', '#fce0c7', '#fbd8b9', '#fad1ab', '#f9c99e', '#f8c290', '#f7ba82', '#f6b274', '#f5ab67', '#f4a359']);\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/continuous-event.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/continuous-event.ts","order":7,"filename":"continuous-event.ts","title":{"zh":"事件监听","en":"Event Listener"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nfunction createContinuous(chunked = false, y = 0) {\n return new Continuous({\n style: {\n y,\n title: {\n content: '连续图例',\n },\n label: {\n spacing: 6,\n },\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 24, 30, 40, 50, 60, 70, 80, 90],\n chunked,\n },\n handle: {},\n min: 0,\n max: 100,\n color: [\n '#d0e3fa',\n '#acc7f6',\n '#8daaf2',\n '#6d8eea',\n '#4d73cd',\n '#325bb1',\n '#5a3e75',\n '#8c3c79',\n '#e23455',\n '#e7655b',\n ],\n },\n });\n}\n\nconst continuous = createContinuous(false, 140);\nconst continuous1 = createContinuous(true, 240);\n\n/** valueChanged */\ncontinuous.addEventListener('valueChanged', (e) => {\n const [stVal, endVal] = e.detail.value;\n start.setValue(stVal);\n end.setValue(endVal);\n});\n/** onIndicated */\ncontinuous.addEventListener('onIndicated', (e) => {\n indicator.setValue(e.detail.value);\n});\n\ncanvas.appendChild(continuous);\ncanvas.appendChild(continuous1);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\n\nconst continuousCfg = {\n 起始值: 0,\n 结束值: 100,\n 指示器: 0,\n};\nconst events = cfg.addFolder('事件');\nevents.open();\nconst start = events\n .add(continuousCfg, '起始值', 0, 100)\n .step(1)\n .onChange((value) => {\n const endValue = end.getValue();\n const startValue = value > endValue ? endValue : value;\n continuous.setSelection(startValue, endValue);\n });\nconst end = events\n .add(continuousCfg, '结束值', 0, 100)\n .step(1)\n .onChange((value) => {\n const startValue = start.getValue();\n const endValue = value < startValue ? startValue : value;\n continuous.setSelection(startValue, endValue);\n });\nconst indicator = events\n .add(continuousCfg, '指示器', 0, 100)\n .step(1)\n .onChange((value) => {});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.continuousEvent = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n function _iterableToArrayLimit(arr, i) { if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n\n function createContinuous() {\n var chunked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return new _gui.Continuous({\n style: {\n y: y,\n title: {\n content: '连续图例'\n },\n label: {\n spacing: 6\n },\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 24, 30, 40, 50, 60, 70, 80, 90],\n chunked: chunked\n },\n handle: {},\n min: 0,\n max: 100,\n color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b']\n }\n });\n }\n\n var continuous = createContinuous(false, 140);\n var continuous1 = createContinuous(true, 240);\n /** valueChanged */\n\n continuous.addEventListener('valueChanged', function (e) {\n var _e$detail$value = _slicedToArray(e.detail.value, 2),\n stVal = _e$detail$value[0],\n endVal = _e$detail$value[1];\n\n start.setValue(stVal);\n end.setValue(endVal);\n });\n /** onIndicated */\n\n continuous.addEventListener('onIndicated', function (e) {\n indicator.setValue(e.detail.value);\n });\n canvas.appendChild(continuous);\n canvas.appendChild(continuous1);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var continuousCfg = {\n 起始值: 0,\n 结束值: 100,\n 指示器: 0\n };\n var events = cfg.addFolder('事件');\n events.open();\n var start = events.add(continuousCfg, '起始值', 0, 100).step(1).onChange(function (value) {\n var endValue = end.getValue();\n var startValue = value > endValue ? endValue : value;\n continuous.setSelection(startValue, endValue);\n });\n var end = events.add(continuousCfg, '结束值', 0, 100).step(1).onChange(function (value) {\n var startValue = start.getValue();\n var endValue = value < startValue ? startValue : value;\n continuous.setSelection(startValue, endValue);\n });\n var indicator = events.add(continuousCfg, '指示器', 0, 100).step(1).onChange(function (value) {});\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/continuous-labels.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/continuous-labels.ts","order":5,"filename":"continuous-labels.ts","title":{"zh":"标签样式","en":"Labels Style"},"screenshot":"","source":"import { Canvas, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 700,\n renderer,\n});\n\nconst group = new Group({});\ncanvas.appendChild(group);\n\nconst createContinuous = (x, y, show, align, title, spacing, style = {}) => {\n group.appendChild(\n new Continuous({\n style: {\n x,\n y,\n title: {\n content: title,\n },\n color: [\n '#7fc9ac',\n '#87ccae',\n '#90ceb1',\n '#98d1b3',\n '#a0d3b5',\n '#a9d6b8',\n '#b1d8ba',\n '#badbbd',\n '#c2ddbf',\n '#cae0c1',\n '#d3e2c4',\n '#dbe5c6',\n ],\n label: show\n ? {\n align,\n spacing,\n style,\n }\n : false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n },\n handle: null,\n min: 0,\n max: 100,\n },\n })\n );\n};\n\ncreateContinuous(0, 0, false, 'rail', 'none', 10);\ncreateContinuous(0, 100, true, 'rail', 'rail', 10);\ncreateContinuous(0, 200, true, 'outside', 'outside', 10);\ncreateContinuous(0, 300, true, 'inside', 'inside', 10);\ncreateContinuous(0, 400, true, 'outside', 'font style', 10, { fill: '#91c7ae', fontSize: 12 });\ncreateContinuous(0, 500, true, 'outside', 'spacing', 50);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.continuousLabels = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 700,\n renderer: renderer\n });\n var group = new _g.Group({});\n canvas.appendChild(group);\n\n var createContinuous = function createContinuous(x, y, show, align, title, spacing) {\n var style = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};\n group.appendChild(new _gui.Continuous({\n style: {\n x: x,\n y: y,\n title: {\n content: title\n },\n color: ['#7fc9ac', '#87ccae', '#90ceb1', '#98d1b3', '#a0d3b5', '#a9d6b8', '#b1d8ba', '#badbbd', '#c2ddbf', '#cae0c1', '#d3e2c4', '#dbe5c6'],\n label: show ? {\n align: align,\n spacing: spacing,\n style: style\n } : false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90]\n },\n handle: null,\n min: 0,\n max: 100\n }\n }));\n };\n\n createContinuous(0, 0, false, 'rail', 'none', 10);\n createContinuous(0, 100, true, 'rail', 'rail', 10);\n createContinuous(0, 200, true, 'outside', 'outside', 10);\n createContinuous(0, 300, true, 'inside', 'inside', 10);\n createContinuous(0, 400, true, 'outside', 'font style', 10, {\n fill: '#91c7ae',\n fontSize: 12\n });\n createContinuous(0, 500, true, 'outside', 'spacing', 50);\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/handle.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/handle.ts","order":4,"filename":"handle.ts","title":{"zh":"手柄设置","en":"Handle"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst createContinuous = (x, y, handleCfg, title, rest = {}) => {\n canvas.appendChild(\n new Continuous({\n style: {\n x,\n y,\n title: {\n content: title,\n },\n color: [\n '#7fc9ac',\n '#87ccae',\n '#90ceb1',\n '#98d1b3',\n '#a0d3b5',\n '#a9d6b8',\n '#b1d8ba',\n '#badbbd',\n '#c2ddbf',\n '#cae0c1',\n '#d3e2c4',\n '#dbe5c6',\n ],\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n },\n handle: handleCfg,\n min: 0,\n max: 100,\n ...rest,\n },\n })\n );\n};\n\ncreateContinuous(0, 0, false, 'Disabled');\ncreateContinuous(0, 100, {}, 'Enable');\ncreateContinuous(\n 0,\n 200,\n {\n size: 20,\n icon: {\n marker: 'circle',\n style: {\n fill: '#f0923c',\n },\n },\n },\n 'Style',\n { label: null }\n);\ncreateContinuous(0, 300, {}, 'Range', { start: 10, end: 80 });\ncreateContinuous(0, 400, {}, 'Cannot Slidable', { slidable: false });\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.handle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n\n var createContinuous = function createContinuous(x, y, handleCfg, title) {\n var rest = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n canvas.appendChild(new _gui.Continuous({\n style: {\n x: x,\n y: y,\n title: {\n content: title\n },\n color: ['#7fc9ac', '#87ccae', '#90ceb1', '#98d1b3', '#a0d3b5', '#a9d6b8', '#b1d8ba', '#badbbd', '#c2ddbf', '#cae0c1', '#d3e2c4', '#dbe5c6'],\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90]\n },\n handle: handleCfg,\n min: 0,\n max: 100,\n ...rest\n }\n }));\n };\n\n createContinuous(0, 0, false, 'Disabled');\n createContinuous(0, 100, {}, 'Enable');\n createContinuous(0, 200, {\n size: 20,\n icon: {\n marker: 'circle',\n style: {\n fill: '#f0923c'\n }\n }\n }, 'Style', {\n label: null\n });\n createContinuous(0, 300, {}, 'Range', {\n start: 10,\n end: 80\n });\n createContinuous(0, 400, {}, 'Cannot Slidable', {\n slidable: false\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/indicator.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/indicator.ts","order":6,"filename":"indicator.ts","title":{"zh":"指示器","en":"Indicator"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst createContinuous = (x, y, indicatorCfg = {}) => {\n const continuous = new Continuous({\n style: {\n x,\n y,\n color: '#6d8eea',\n label: false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n },\n handle: null,\n min: 0,\n max: 100,\n indicator: indicatorCfg,\n },\n });\n canvas.appendChild(continuous);\n return continuous;\n};\n\ncreateContinuous(0, 50, false);\ncreateContinuous(0, 150, {\n text: {\n formatter: (val) => {\n return `${val}%`;\n },\n },\n});\ncreateContinuous(0, 250, {\n id: 'legend-indicator1',\n backgroundStyle: { background: '#748de3' },\n text: { style: { color: 'red' } },\n});\ncreateContinuous(0, 350, {\n id: 'legend-indicator2',\n backgroundStyle: { 'font-size': '14px', padding: '2px 4px' },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.indicator = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n\n var createContinuous = function createContinuous(x, y) {\n var indicatorCfg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var continuous = new _gui.Continuous({\n style: {\n x: x,\n y: y,\n color: '#6d8eea',\n label: false,\n rail: {\n width: 300,\n height: 30,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90]\n },\n handle: null,\n min: 0,\n max: 100,\n indicator: indicatorCfg\n }\n });\n canvas.appendChild(continuous);\n return continuous;\n };\n\n createContinuous(0, 50, false);\n createContinuous(0, 150, {\n text: {\n formatter: function formatter(val) {\n return \"\".concat(val, \"%\");\n }\n }\n });\n createContinuous(0, 250, {\n id: 'legend-indicator1',\n backgroundStyle: {\n background: '#748de3'\n },\n text: {\n style: {\n color: 'red'\n }\n }\n });\n createContinuous(0, 350, {\n id: 'legend-indicator2',\n backgroundStyle: {\n 'font-size': '14px',\n padding: '2px 4px'\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/pager-style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/pager-style.ts","order":12,"filename":"pager-style.ts","title":{"zh":"分页器样式","en":" Pager style"},"screenshot":"","source":"import { Canvas, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer,\n});\n\nconst category = new Category({\n style: {\n x: 10,\n y: 10,\n title: { content: '基本分类图例' },\n items: [\n { name: 'Chrome', value: '7.08%' },\n { name: 'IE', value: '5.41%' },\n { name: 'QQ', value: '5.35%' },\n { name: 'Firefox', value: '1.23%' },\n { name: 'Microsoft Edge', value: '3.51%' },\n { name: '360', value: '2.59%' },\n { name: 'Opera', value: '0.87%' },\n { name: 'Sogou', value: '1.06%' },\n { name: 'Others', value: '0.59%' },\n ].map(({ name, value }) => {\n return { name, value, id: name, state: 'selected' };\n }),\n spacing: [10, 10],\n maxHeight: 40,\n maxWidth: 250,\n },\n});\nconst rect = canvas.appendChild(\n new Rect({ style: { stroke: 'black', lineWidth: 1, x: 1, y: 200, width: 271, height: 200 } })\n);\nrect.appendChild(category);\n\n/** -------------------------配置区域--------------------------------------- */\nwindow.ConfigPanel([category], '分页配置', {\n 'pager.position': {\n label: '分页器位置',\n value: 'right',\n // options: ['top', 'bottom', 'left', 'right', 'top-bottom', 'left-right'],\n options: ['bottom', 'right'],\n },\n 'pager.button.size': {\n label: '分页器按钮大小',\n value: 16,\n type: 'number',\n range: [10, 30],\n },\n 'pager.button.style.default.fill': {\n label: '分页器按钮填充色',\n value: '#000',\n type: 'color',\n },\n 'pager.button.style.disabled.fill': {\n label: '分页器按钮禁止态填充色',\n value: '#d9d9d9',\n type: 'color',\n },\n 'pager.text.style.fill': {\n label: '分页器文本颜色',\n value: '#000',\n type: 'color',\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.pagerStyle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 400,\n renderer: renderer\n });\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 10,\n title: {\n content: '基本分类图例'\n },\n items: [{\n name: 'Chrome',\n value: '7.08%'\n }, {\n name: 'IE',\n value: '5.41%'\n }, {\n name: 'QQ',\n value: '5.35%'\n }, {\n name: 'Firefox',\n value: '1.23%'\n }, {\n name: 'Microsoft Edge',\n value: '3.51%'\n }, {\n name: '360',\n value: '2.59%'\n }, {\n name: 'Opera',\n value: '0.87%'\n }, {\n name: 'Sogou',\n value: '1.06%'\n }, {\n name: 'Others',\n value: '0.59%'\n }].map(function (_ref) {\n var name = _ref.name,\n value = _ref.value;\n return {\n name: name,\n value: value,\n id: name,\n state: 'selected'\n };\n }),\n spacing: [10, 10],\n maxHeight: 40,\n maxWidth: 250\n }\n });\n var rect = canvas.appendChild(new _g.Rect({\n style: {\n stroke: 'black',\n lineWidth: 1,\n x: 1,\n y: 200,\n width: 271,\n height: 200\n }\n }));\n rect.appendChild(category);\n /** -------------------------配置区域--------------------------------------- */\n\n window.ConfigPanel([category], '分页配置', {\n 'pager.position': {\n label: '分页器位置',\n value: 'right',\n // options: ['top', 'bottom', 'left', 'right', 'top-bottom', 'left-right'],\n options: ['bottom', 'right']\n },\n 'pager.button.size': {\n label: '分页器按钮大小',\n value: 16,\n type: 'number',\n range: [10, 30]\n },\n 'pager.button.style.default.fill': {\n label: '分页器按钮填充色',\n value: '#000',\n type: 'color'\n },\n 'pager.button.style.disabled.fill': {\n label: '分页器按钮禁止态填充色',\n value: '#d9d9d9',\n type: 'color'\n },\n 'pager.text.style.fill': {\n label: '分页器文本颜色',\n value: '#000',\n type: 'color'\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/rail-shape.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/rail-shape.ts","order":2,"filename":"rail-shape.ts","title":{"zh":"轨道类型","en":"Ribbon Shape"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst createContinuous = (x, y, railType, orientation, chunked, title) => {\n const shape =\n orientation === 'horizontal'\n ? {\n width: 300,\n height: 30,\n }\n : {\n width: 30,\n height: 300,\n };\n canvas.appendChild(\n new Continuous({\n style: {\n x,\n y,\n title: {\n content: title,\n },\n orientation,\n label: false,\n rail: {\n chunked,\n type: railType,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n ...shape,\n },\n handle: null,\n min: 0,\n max: 100,\n color: [\n '#d0e3fa',\n '#acc7f6',\n '#8daaf2',\n '#6d8eea',\n '#4d73cd',\n '#325bb1',\n '#5a3e75',\n '#8c3c79',\n '#e23455',\n '#e7655b',\n ],\n },\n })\n );\n};\n\ncreateContinuous(0, 0, 'color', 'horizontal', false, 'color');\ncreateContinuous(300, 0, 'color', 'horizontal', true, 'color-chunked');\n\ncreateContinuous(0, 100, 'size', 'horizontal', false, 'size');\ncreateContinuous(300, 100, 'size', 'horizontal', true, 'size-chunked');\n\ncreateContinuous(0, 200, 'color', 'vertical', false, '\\ncolor\\nvertical');\ncreateContinuous(100, 200, 'color', 'vertical', true, 'color\\nvertical\\nchunked');\n\ncreateContinuous(200, 200, 'size', 'vertical', false, '\\nsize\\nvertical');\ncreateContinuous(300, 200, 'size', 'vertical', true, 'size\\nvertical\\nchunked');\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.railShape = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n\n var createContinuous = function createContinuous(x, y, railType, orientation, chunked, title) {\n var shape = orientation === 'horizontal' ? {\n width: 300,\n height: 30\n } : {\n width: 30,\n height: 300\n };\n canvas.appendChild(new _gui.Continuous({\n style: {\n x: x,\n y: y,\n title: {\n content: title\n },\n orientation: orientation,\n label: false,\n rail: {\n chunked: chunked,\n type: railType,\n ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90],\n ...shape\n },\n handle: null,\n min: 0,\n max: 100,\n color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b']\n }\n }));\n };\n\n createContinuous(0, 0, 'color', 'horizontal', false, 'color');\n createContinuous(300, 0, 'color', 'horizontal', true, 'color-chunked');\n createContinuous(0, 100, 'size', 'horizontal', false, 'size');\n createContinuous(300, 100, 'size', 'horizontal', true, 'size-chunked');\n createContinuous(0, 200, 'color', 'vertical', false, '\\ncolor\\nvertical');\n createContinuous(100, 200, 'color', 'vertical', true, 'color\\nvertical\\nchunked');\n createContinuous(200, 200, 'size', 'vertical', false, '\\nsize\\nvertical');\n createContinuous(300, 200, 'size', 'vertical', true, 'size\\nvertical\\nchunked');\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/legend/demo/various-continuous.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/legend/demo/various-continuous.ts","order":1,"filename":"various-continuous.ts","title":{"zh":"各系列连续图例","en":"Various Continuous Legend"},"screenshot":"","source":"import { Canvas, Rect, Line } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { deepMix } from '@antv/util';\nimport { Continuous } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 20, y: 20, width: 540, height: 580, stroke: '#dfdfdf', lineWidth: 1 } });\nconst line1 = new Line({ style: { x1: 200, y1: 20, x2: 200, y2: 580, stroke: '#dfdfdf', lineWidth: 1 } });\nconst line2 = new Line({ style: { x1: 360, y1: 20, x2: 360, y2: 580, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\ncanvas.appendChild(line1);\ncanvas.appendChild(line2);\n\nfunction createContinuousLegend(options = {}) {\n const continuous = new Continuous({\n style: deepMix(\n {\n padding: [12, 24],\n label: {\n align: 'rail',\n },\n rail: {\n length: 100,\n size: 16,\n },\n handle: null,\n min: 100,\n max: 1100,\n color: [\n '#d0e3fa',\n '#acc7f6',\n '#8daaf2',\n '#6d8eea',\n '#4d73cd',\n '#325bb1',\n '#5a3e75',\n '#8c3c79',\n '#e23455',\n '#e7655b',\n ],\n },\n options\n ),\n });\n rect.appendChild(continuous);\n return continuous;\n}\n\ncreateContinuousLegend({ title: { content: '基础' } });\ncreateContinuousLegend({ y: 80, handle: {}, title: { content: '带手柄' } });\ncreateContinuousLegend({ y: 180, label: { align: 'start', spacing: 2 }, title: { content: 'label 在上方' } });\ncreateContinuousLegend({ y: 260, label: { align: 'end', spacing: 2 }, title: { content: 'label 在下方' } });\ncreateContinuousLegend({\n y: 340,\n label: { align: 'end', spacing: 2, flush: false },\n rail: { ticks: [300, 500, 700, 900] },\n title: { content: '自定义滑轨 tick 标签' },\n});\n\n// 垂直\ncreateContinuousLegend({\n x: 180,\n orientation: 'vertical',\n label: { spacing: 2, style: { textAlign: 'center' } },\n rail: { size: 16, height: 80 },\n});\ncreateContinuousLegend({\n x: 180,\n y: 130,\n orientation: 'vertical',\n label: { spacing: 2, align: 'end' },\n rail: { size: 16, length: 80 },\n});\ncreateContinuousLegend({\n x: 180,\n y: 260,\n orientation: 'vertical',\n rail: { size: 16, length: 80 },\n label: { spacing: 2, align: 'start' },\n title: { content: 'label 在左侧', spacing: 4 },\n});\ncreateContinuousLegend({\n x: 180,\n y: 420,\n orientation: 'vertical',\n rail: { size: 16, length: 80, ticks: [350, 600, 850] },\n label: { align: 'end', flush: false, spacing: 4 },\n title: { content: '自定义滑轨 tick 标签', spacing: 12 },\n});\n\n// 垂直带手柄\ncreateContinuousLegend({\n x: 340,\n orientation: 'vertical',\n rail: { size: 16, length: 80 },\n handle: {},\n});\n\ncreateContinuousLegend({\n x: 340,\n y: 130,\n orientation: 'vertical',\n rail: { size: 16, length: 80 },\n handle: {},\n label: { align: 'start', spacing: 4 },\n title: { content: 'label 在左侧' },\n});\ncreateContinuousLegend({\n x: 340,\n y: 280,\n orientation: 'vertical',\n rail: { size: 16, length: 80, chunked: true, ticks: [350, 600, 850] },\n handle: {},\n label: { spacing: 4 },\n title: { content: 'label 在左侧' },\n});\ncreateContinuousLegend({\n x: 340,\n y: 420,\n orientation: 'vertical',\n rail: { size: 16, length: 80, chunked: true, ticks: [350, 600, 850] },\n label: { align: 'end', flush: false, spacing: 4 },\n title: { content: '自定义滑轨 tick 标签', spacing: 12 },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/util\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/util\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.util, global.gui);\n global.variousContinuous = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _util, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n }); // 创建一个包围盒\n\n var rect = new _g.Rect({\n style: {\n x: 20,\n y: 20,\n width: 540,\n height: 580,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n var line1 = new _g.Line({\n style: {\n x1: 200,\n y1: 20,\n x2: 200,\n y2: 580,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n var line2 = new _g.Line({\n style: {\n x1: 360,\n y1: 20,\n x2: 360,\n y2: 580,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n canvas.appendChild(line1);\n canvas.appendChild(line2);\n\n function createContinuousLegend() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var continuous = new _gui.Continuous({\n style: (0, _util.deepMix)({\n padding: [12, 24],\n label: {\n align: 'rail'\n },\n rail: {\n length: 100,\n size: 16\n },\n handle: null,\n min: 100,\n max: 1100,\n color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b']\n }, options)\n });\n rect.appendChild(continuous);\n return continuous;\n }\n\n createContinuousLegend({\n title: {\n content: '基础'\n }\n });\n createContinuousLegend({\n y: 80,\n handle: {},\n title: {\n content: '带手柄'\n }\n });\n createContinuousLegend({\n y: 180,\n label: {\n align: 'start',\n spacing: 2\n },\n title: {\n content: 'label 在上方'\n }\n });\n createContinuousLegend({\n y: 260,\n label: {\n align: 'end',\n spacing: 2\n },\n title: {\n content: 'label 在下方'\n }\n });\n createContinuousLegend({\n y: 340,\n label: {\n align: 'end',\n spacing: 2,\n flush: false\n },\n rail: {\n ticks: [300, 500, 700, 900]\n },\n title: {\n content: '自定义滑轨 tick 标签'\n }\n }); // 垂直\n\n createContinuousLegend({\n x: 180,\n orientation: 'vertical',\n label: {\n spacing: 2,\n style: {\n textAlign: 'center'\n }\n },\n rail: {\n size: 16,\n height: 80\n }\n });\n createContinuousLegend({\n x: 180,\n y: 130,\n orientation: 'vertical',\n label: {\n spacing: 2,\n align: 'end'\n },\n rail: {\n size: 16,\n length: 80\n }\n });\n createContinuousLegend({\n x: 180,\n y: 260,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80\n },\n label: {\n spacing: 2,\n align: 'start'\n },\n title: {\n content: 'label 在左侧',\n spacing: 4\n }\n });\n createContinuousLegend({\n x: 180,\n y: 420,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80,\n ticks: [350, 600, 850]\n },\n label: {\n align: 'end',\n flush: false,\n spacing: 4\n },\n title: {\n content: '自定义滑轨 tick 标签',\n spacing: 12\n }\n }); // 垂直带手柄\n\n createContinuousLegend({\n x: 340,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80\n },\n handle: {}\n });\n createContinuousLegend({\n x: 340,\n y: 130,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80\n },\n handle: {},\n label: {\n align: 'start',\n spacing: 4\n },\n title: {\n content: 'label 在左侧'\n }\n });\n createContinuousLegend({\n x: 340,\n y: 280,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80,\n chunked: true,\n ticks: [350, 600, 850]\n },\n handle: {},\n label: {\n spacing: 4\n },\n title: {\n content: 'label 在左侧'\n }\n });\n createContinuousLegend({\n x: 340,\n y: 420,\n orientation: 'vertical',\n rail: {\n size: 16,\n length: 80,\n chunked: true,\n ticks: [350, 600, 850]\n },\n label: {\n align: 'end',\n flush: false,\n spacing: 4\n },\n title: {\n content: '自定义滑轨 tick 标签',\n spacing: 12\n }\n });\n});","postFrontmatter":{"en":{"title":"Legend","order":201},"zh":{"title":"图例","order":201}}},{"relativePath":"chart-ui/scrollbar/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/scrollbar/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"基本滚动条","en":"Basic Scrollbar"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Scrollbar } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst horizontalScrollbar = new Scrollbar({\n style: {\n x: 5,\n y: 5,\n orientation: 'horizontal',\n value: 0.5,\n width: 200,\n height: 10,\n thumbLen: 30,\n },\n});\n\nconst verticalScrollbar = new Scrollbar({\n style: {\n x: 5,\n y: 20,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30,\n },\n});\n\ncanvas.appendChild(horizontalScrollbar);\ncanvas.appendChild(verticalScrollbar);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var horizontalScrollbar = new _gui.Scrollbar({\n style: {\n x: 5,\n y: 5,\n orientation: 'horizontal',\n value: 0.5,\n width: 200,\n height: 10,\n thumbLen: 30\n }\n });\n var verticalScrollbar = new _gui.Scrollbar({\n style: {\n x: 5,\n y: 20,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30\n }\n });\n canvas.appendChild(horizontalScrollbar);\n canvas.appendChild(verticalScrollbar);\n});","postFrontmatter":{"en":{"title":"Scrollbar","order":203},"zh":{"title":"滚动条","order":203}}},{"relativePath":"chart-ui/scrollbar/demo/event.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/scrollbar/demo/event.ts","order":1,"filename":"event.ts","title":{"zh":"事件监听","en":"Event Listener"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Scrollbar } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst scrollbar = new Scrollbar({\n style: {\n x: 5,\n y: 20,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30,\n },\n});\n\ncanvas.appendChild(scrollbar);\n\n/** 事件监听 */\nscrollbar.addEventListener('valueChanged', ({ detail: { value } }) => {\n cfgValue.setValue(value);\n});\n\n/** -------------------------配置区域--------------------------------------- */\nconst cfg = new dat.GUI({ autoPlace: false });\ndocument.getElementById('container').appendChild(cfg.domElement);\nconst cfgValue = cfg\n .add({ value: 0.5 }, 'value', 0, 1)\n .step(0.01)\n .onChange((value) => {\n scrollbar.setValue(value);\n });\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.event = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var scrollbar = new _gui.Scrollbar({\n style: {\n x: 5,\n y: 20,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30\n }\n });\n canvas.appendChild(scrollbar);\n /** 事件监听 */\n\n scrollbar.addEventListener('valueChanged', function (_ref) {\n var value = _ref.detail.value;\n cfgValue.setValue(value);\n });\n /** -------------------------配置区域--------------------------------------- */\n\n var cfg = new dat.GUI({\n autoPlace: false\n });\n document.getElementById('container').appendChild(cfg.domElement);\n var cfgValue = cfg.add({\n value: 0.5\n }, 'value', 0, 1).step(0.01).onChange(function (value) {\n scrollbar.setValue(value);\n });\n});","postFrontmatter":{"en":{"title":"Scrollbar","order":203},"zh":{"title":"滚动条","order":203}}},{"relativePath":"chart-ui/scrollbar/demo/more.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/scrollbar/demo/more.ts","order":3,"filename":"more.ts","title":{"zh":"更多样式","en":"More Style"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Scrollbar } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nfunction createScrollbar(x, y, trackStyle, thumbStyle, furtherOptions = {}) {\n canvas.appendChild(\n new Scrollbar({\n style: {\n x,\n y,\n orientation: 'vertical',\n value: 0,\n width: 10,\n height: 200,\n thumbLen: 100,\n padding: 0,\n trackStyle: {\n default: trackStyle,\n },\n thumbStyle: {\n default: thumbStyle,\n },\n ...furtherOptions,\n },\n })\n );\n}\n\ncreateScrollbar(\n 5,\n 5,\n { lineWidth: 1, stroke: '#c0c0c0', shadowColor: '#c0c0c0', shadowBlur: 10, radius: 5 },\n { fill: '#c0c0c0' },\n { padding: 2 }\n);\n\ncreateScrollbar(\n 20,\n 5,\n { lineWidth: 1, stroke: '#c0c0c0', shadowColor: '#c0c0c0', shadowBlur: 10, radius: 5 },\n { fill: '#4a4a4a' }\n);\n\ncreateScrollbar(\n 35,\n 5,\n { lineWidth: 1, stroke: '#cecece', shadowColor: '#c0c0c0', shadowBlur: 10 },\n { fill: '#000' },\n { width: 5, isRound: false }\n);\n\ncreateScrollbar(\n 50,\n 5,\n { lineWidth: 1, stroke: '#cecece', shadowColor: '#c0c0c0', shadowBlur: 10, radius: 5 },\n { fill: 'l(45) 0:#143189 0.1#3a71b4 1:#92a6d0' }\n);\n\ncreateScrollbar(\n 65,\n 5,\n {\n lineWidth: 1,\n stroke: '#cecece',\n shadowColor: '#c0c0c0',\n shadowBlur: 10,\n radius: 5,\n fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_ecd6f4/afts/img/A*P5t4QJH2rBEAAAAAAAAAAAAAARQnAQ',\n },\n { fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_ecd6f4/afts/img/A*FlaDS6e5pL8AAAAAAAAAAAAAARQnAQ' }\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.more = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n\n function createScrollbar(x, y, trackStyle, thumbStyle) {\n var furtherOptions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n canvas.appendChild(new _gui.Scrollbar({\n style: {\n x: x,\n y: y,\n orientation: 'vertical',\n value: 0,\n width: 10,\n height: 200,\n thumbLen: 100,\n padding: 0,\n trackStyle: {\n default: trackStyle\n },\n thumbStyle: {\n default: thumbStyle\n },\n ...furtherOptions\n }\n }));\n }\n\n createScrollbar(5, 5, {\n lineWidth: 1,\n stroke: '#c0c0c0',\n shadowColor: '#c0c0c0',\n shadowBlur: 10,\n radius: 5\n }, {\n fill: '#c0c0c0'\n }, {\n padding: 2\n });\n createScrollbar(20, 5, {\n lineWidth: 1,\n stroke: '#c0c0c0',\n shadowColor: '#c0c0c0',\n shadowBlur: 10,\n radius: 5\n }, {\n fill: '#4a4a4a'\n });\n createScrollbar(35, 5, {\n lineWidth: 1,\n stroke: '#cecece',\n shadowColor: '#c0c0c0',\n shadowBlur: 10\n }, {\n fill: '#000'\n }, {\n width: 5,\n isRound: false\n });\n createScrollbar(50, 5, {\n lineWidth: 1,\n stroke: '#cecece',\n shadowColor: '#c0c0c0',\n shadowBlur: 10,\n radius: 5\n }, {\n fill: 'l(45) 0:#143189 0.1#3a71b4 1:#92a6d0'\n });\n createScrollbar(65, 5, {\n lineWidth: 1,\n stroke: '#cecece',\n shadowColor: '#c0c0c0',\n shadowBlur: 10,\n radius: 5,\n fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_ecd6f4/afts/img/A*P5t4QJH2rBEAAAAAAAAAAAAAARQnAQ'\n }, {\n fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_ecd6f4/afts/img/A*FlaDS6e5pL8AAAAAAAAAAAAAARQnAQ'\n });\n});","postFrontmatter":{"en":{"title":"Scrollbar","order":203},"zh":{"title":"滚动条","order":203}}},{"relativePath":"chart-ui/scrollbar/demo/style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/scrollbar/demo/style.ts","order":2,"filename":"style.ts","title":{"zh":"样式设置","en":"Custom Style"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Scrollbar } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst scrollbar = new Scrollbar({\n style: {\n x: 5,\n y: 5,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30,\n trackStyle: {\n default: {\n lineWidth: 3,\n stroke: 'pink',\n radius: 5,\n },\n },\n thumbStyle: {\n default: {\n fill: 'pink',\n opacity: 1,\n },\n active: {\n fill: 'pink',\n opacity: 0.5,\n },\n },\n },\n});\n\ncanvas.appendChild(scrollbar);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst track = cfg.addFolder('滑轨');\ntrack.open();\nconst trackCfg = {\n 边框颜色: '#f5c2cb',\n 圆角半径: 5,\n 边框宽度: 3,\n 激活状态颜色: '#f5c2cb',\n};\ntrack.addColor(trackCfg, '边框颜色').onChange((color) => {\n scrollbar.update({ trackStyle: { default: { stroke: color } } });\n});\ntrack.add(trackCfg, '边框宽度', 1, 5).onChange((lineWidth) => {\n scrollbar.update({ trackStyle: { default: { lineWidth } } });\n});\ntrack.add(trackCfg, '圆角半径', 1, 5).onChange((radius) => {\n scrollbar.update({ trackStyle: { default: { radius } } });\n});\n\ntrack.addColor(trackCfg, '激活状态颜色').onChange((color) => {\n scrollbar.update({ trackStyle: { active: { stroke: color } } });\n});\n\nconst thumb = cfg.addFolder('滑块');\nthumb.open();\nconst thumbCfg = {\n 颜色: '#f5c2cb',\n 激活状态颜色: '#f5c2cb',\n};\nthumb.addColor(thumbCfg, '颜色').onChange((fill) => {\n scrollbar.update({ thumbStyle: { default: { fill } } });\n});\nthumb.addColor(thumbCfg, '激活状态颜色').onChange((fill) => {\n scrollbar.update({ thumbStyle: { active: { fill } } });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.style = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var scrollbar = new _gui.Scrollbar({\n style: {\n x: 5,\n y: 5,\n orientation: 'vertical',\n value: 0.5,\n width: 10,\n height: 200,\n thumbLen: 30,\n trackStyle: {\n default: {\n lineWidth: 3,\n stroke: 'pink',\n radius: 5\n }\n },\n thumbStyle: {\n default: {\n fill: 'pink',\n opacity: 1\n },\n active: {\n fill: 'pink',\n opacity: 0.5\n }\n }\n }\n });\n canvas.appendChild(scrollbar);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var track = cfg.addFolder('滑轨');\n track.open();\n var trackCfg = {\n 边框颜色: '#f5c2cb',\n 圆角半径: 5,\n 边框宽度: 3,\n 激活状态颜色: '#f5c2cb'\n };\n track.addColor(trackCfg, '边框颜色').onChange(function (color) {\n scrollbar.update({\n trackStyle: {\n default: {\n stroke: color\n }\n }\n });\n });\n track.add(trackCfg, '边框宽度', 1, 5).onChange(function (lineWidth) {\n scrollbar.update({\n trackStyle: {\n default: {\n lineWidth: lineWidth\n }\n }\n });\n });\n track.add(trackCfg, '圆角半径', 1, 5).onChange(function (radius) {\n scrollbar.update({\n trackStyle: {\n default: {\n radius: radius\n }\n }\n });\n });\n track.addColor(trackCfg, '激活状态颜色').onChange(function (color) {\n scrollbar.update({\n trackStyle: {\n active: {\n stroke: color\n }\n }\n });\n });\n var thumb = cfg.addFolder('滑块');\n thumb.open();\n var thumbCfg = {\n 颜色: '#f5c2cb',\n 激活状态颜色: '#f5c2cb'\n };\n thumb.addColor(thumbCfg, '颜色').onChange(function (fill) {\n scrollbar.update({\n thumbStyle: {\n default: {\n fill: fill\n }\n }\n });\n });\n thumb.addColor(thumbCfg, '激活状态颜色').onChange(function (fill) {\n scrollbar.update({\n thumbStyle: {\n active: {\n fill: fill\n }\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Scrollbar","order":203},"zh":{"title":"滚动条","order":203}}},{"relativePath":"chart-ui/slider/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/slider/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"基本缩略轴","en":"Basic Slider"},"screenshot":"","source":"import { Canvas, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Slider } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer,\n});\n// 创建一个包围盒\nconst rect = new Rect({ style: { x: 20, y: 20, width: 460, height: 500, stroke: '#dfdfdf', lineWidth: 1 } });\ncanvas.appendChild(rect);\n\nconst horizontalSlider = new Slider({\n style: {\n x: 50,\n y: 10,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12'],\n },\n});\n\nconst verticalSlider = new Slider({\n style: {\n x: 50,\n y: 50,\n width: 20,\n height: 400,\n orientation: 'vertical',\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12'],\n },\n});\n\nrect.appendChild(horizontalSlider);\nrect.appendChild(verticalSlider);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer: renderer\n }); // 创建一个包围盒\n\n var rect = new _g.Rect({\n style: {\n x: 20,\n y: 20,\n width: 460,\n height: 500,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(rect);\n var horizontalSlider = new _gui.Slider({\n style: {\n x: 50,\n y: 10,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12']\n }\n });\n var verticalSlider = new _gui.Slider({\n style: {\n x: 50,\n y: 50,\n width: 20,\n height: 400,\n orientation: 'vertical',\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12']\n }\n });\n rect.appendChild(horizontalSlider);\n rect.appendChild(verticalSlider);\n});","postFrontmatter":{"en":{"title":"Slider","order":204},"zh":{"title":"缩略轴","order":204}}},{"relativePath":"chart-ui/slider/demo/event.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/slider/demo/event.ts","order":2,"filename":"event.ts","title":{"zh":"事件监听","en":"Event Listener"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Slider } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer,\n});\n\nconst slider = new Slider({\n style: {\n x: 50,\n y: 10,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12'],\n handle: {\n size: 13,\n },\n },\n});\n\ncanvas.appendChild(slider);\n\nslider.addEventListener(\n 'valueChanged',\n ({\n detail: {\n value: [stVal, endVal],\n },\n }) => {\n startValue.setValue(stVal);\n endValue.setValue(endVal);\n }\n);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst sliderCfg = {\n 起始值: 0.3,\n 结束值: 0.7,\n};\n\nconst startValue = cfg.add(sliderCfg, '起始值', 0, 1).onChange((value) => {\n const endVal = endValue.getValue();\n const val = value > endVal ? endVal : value;\n slider.update({ values: [val, endVal] });\n});\nconst endValue = cfg.add(sliderCfg, '结束值', 0, 1).onChange((value) => {\n const stVal = startValue.getValue();\n const val = value < stVal ? stVal : value;\n slider.update({ values: [stVal, val] });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.event = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n function _iterableToArrayLimit(arr, i) { if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer: renderer\n });\n var slider = new _gui.Slider({\n style: {\n x: 50,\n y: 10,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['2020-08-25', '2020-09-12'],\n handle: {\n size: 13\n }\n }\n });\n canvas.appendChild(slider);\n slider.addEventListener('valueChanged', function (_ref) {\n var _ref$detail$value = _slicedToArray(_ref.detail.value, 2),\n stVal = _ref$detail$value[0],\n endVal = _ref$detail$value[1];\n\n startValue.setValue(stVal);\n endValue.setValue(endVal);\n });\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var sliderCfg = {\n 起始值: 0.3,\n 结束值: 0.7\n };\n var startValue = cfg.add(sliderCfg, '起始值', 0, 1).onChange(function (value) {\n var endVal = endValue.getValue();\n var val = value > endVal ? endVal : value;\n slider.update({\n values: [val, endVal]\n });\n });\n var endValue = cfg.add(sliderCfg, '结束值', 0, 1).onChange(function (value) {\n var stVal = startValue.getValue();\n var val = value < stVal ? stVal : value;\n slider.update({\n values: [stVal, val]\n });\n });\n});","postFrontmatter":{"en":{"title":"Slider","order":204},"zh":{"title":"缩略轴","order":204}}},{"relativePath":"chart-ui/slider/demo/handle.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/slider/demo/handle.ts","order":1,"filename":"handle.ts","title":{"zh":"手柄设置","en":"Handle Setting"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Slider } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst slider = new Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 40,\n values: [0.3, 0.7],\n names: ['startVal', 'endVal'],\n handle: {\n start: {\n formatter: (name, value) => {\n return `${name}: ${(value * 100).toFixed(2)}%`;\n },\n handleIcon: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',\n },\n end: {\n handleIcon: 'diamond',\n },\n },\n },\n});\n\ncanvas.appendChild(slider);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst sliderFolder = cfg.addFolder('Handle');\nsliderFolder.open();\nconst sliderCfg = {\n 起始手柄图标: 'AntV',\n 起始手柄大小: 15,\n 左间距: 10,\n 结束手柄形状: 'diamond',\n 结束手柄颜色: '#fff',\n 结束手柄大小: 15,\n 右间距: 10,\n 手柄文字颜色: '#63656e',\n};\nsliderFolder.add(sliderCfg, '起始手柄图标', ['AntV', 'yuque', 'default']).onChange((val) => {\n const iconMap = {\n AntV: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',\n yuque: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',\n default: '',\n };\n slider.update({ handle: { start: { handleIcon: iconMap[val] } } });\n});\nsliderFolder.add(sliderCfg, '结束手柄形状', ['diamond', 'square', 'triangle', 'circle']).onChange((val) => {\n slider.update({ handle: { end: { handleIcon: val } } });\n});\nsliderFolder.add(sliderCfg, '左间距', 0, 20).onChange((val) => {\n slider.update({ handle: { start: { spacing: val } } });\n});\nsliderFolder.add(sliderCfg, '起始手柄大小', 0, 20).onChange((val) => {\n slider.update({ handle: { start: { size: val } } });\n});\nsliderFolder.addColor(sliderCfg, '结束手柄颜色').onChange((color) => {\n slider.update({ handle: { end: { handleStyle: { fill: color } } } });\n});\nsliderFolder.add(sliderCfg, '结束手柄大小', 0, 20).onChange((val) => {\n slider.update({\n handle: { end: { size: val } },\n });\n});\nsliderFolder.add(sliderCfg, '右间距', 0, 20).onChange((val) => {\n slider.update({\n handle: { end: { spacing: val } },\n });\n});\nsliderFolder.addColor(sliderCfg, '手柄文字颜色').onChange((color) => {\n slider.update({ handle: { textStyle: { fill: color } } });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.handle = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var slider = new _gui.Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 40,\n values: [0.3, 0.7],\n names: ['startVal', 'endVal'],\n handle: {\n start: {\n formatter: function formatter(name, value) {\n return \"\".concat(name, \": \").concat((value * 100).toFixed(2), \"%\");\n },\n handleIcon: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ'\n },\n end: {\n handleIcon: 'diamond'\n }\n }\n }\n });\n canvas.appendChild(slider);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var sliderFolder = cfg.addFolder('Handle');\n sliderFolder.open();\n var sliderCfg = {\n 起始手柄图标: 'AntV',\n 起始手柄大小: 15,\n 左间距: 10,\n 结束手柄形状: 'diamond',\n 结束手柄颜色: '#fff',\n 结束手柄大小: 15,\n 右间距: 10,\n 手柄文字颜色: '#63656e'\n };\n sliderFolder.add(sliderCfg, '起始手柄图标', ['AntV', 'yuque', 'default']).onChange(function (val) {\n var iconMap = {\n AntV: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',\n yuque: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',\n default: ''\n };\n slider.update({\n handle: {\n start: {\n handleIcon: iconMap[val]\n }\n }\n });\n });\n sliderFolder.add(sliderCfg, '结束手柄形状', ['diamond', 'square', 'triangle', 'circle']).onChange(function (val) {\n slider.update({\n handle: {\n end: {\n handleIcon: val\n }\n }\n });\n });\n sliderFolder.add(sliderCfg, '左间距', 0, 20).onChange(function (val) {\n slider.update({\n handle: {\n start: {\n spacing: val\n }\n }\n });\n });\n sliderFolder.add(sliderCfg, '起始手柄大小', 0, 20).onChange(function (val) {\n slider.update({\n handle: {\n start: {\n size: val\n }\n }\n });\n });\n sliderFolder.addColor(sliderCfg, '结束手柄颜色').onChange(function (color) {\n slider.update({\n handle: {\n end: {\n handleStyle: {\n fill: color\n }\n }\n }\n });\n });\n sliderFolder.add(sliderCfg, '结束手柄大小', 0, 20).onChange(function (val) {\n slider.update({\n handle: {\n end: {\n size: val\n }\n }\n });\n });\n sliderFolder.add(sliderCfg, '右间距', 0, 20).onChange(function (val) {\n slider.update({\n handle: {\n end: {\n spacing: val\n }\n }\n });\n });\n sliderFolder.addColor(sliderCfg, '手柄文字颜色').onChange(function (color) {\n slider.update({\n handle: {\n textStyle: {\n fill: color\n }\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Slider","order":204},"zh":{"title":"缩略轴","order":204}}},{"relativePath":"chart-ui/slider/demo/sparkline.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/slider/demo/sparkline.ts","order":4,"filename":"sparkline.ts","title":{"zh":"带迷你图","en":"With Sparkline"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Slider } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst slider = new Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['leftVal', 'rightVal'],\n sparkline: {\n data: [\n [1, 3, 2, -4, 1, 3, 2, -4],\n [5, 1, 5, -8, 5, 1, 5, -8],\n ],\n // lineStyle: {\n // stroke: 'rgba(197,197,197,0.85)'\n // },\n },\n },\n});\n\nconst slider2 = new Slider({\n style: {\n x: 50,\n y: 150,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['leftVal', 'rightVal'],\n sparkline: {\n data: new Array(30).fill(0).map(() => 0.5 + Math.random()),\n lineStyle: {\n lineWidth: 0,\n },\n areaStyle: {\n fill: 'rgba(197,197,197,0.85)',\n },\n },\n },\n});\n\ncanvas.appendChild(slider);\ncanvas.appendChild(slider2);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\n\nconst sliderFolder = cfg.addFolder('Slider边距');\nsliderFolder.open();\nconst sliderCfg = { 左间距: 0, 右间距: 0, 上间距: 0, 下间距: 0 };\n\nconst sliderLeft = sliderFolder.add(sliderCfg, '左间距', 0, 10).onChange((value) => {\n slider.update({\n padding: [sliderTop.getValue(), sliderRight.getValue(), sliderBottom.getValue(), value],\n });\n});\nconst sliderRight = sliderFolder.add(sliderCfg, '右间距', 0, 10).onChange((value) => {\n slider.update({\n padding: [sliderTop.getValue(), value, sliderBottom.getValue(), sliderLeft.getValue()],\n });\n});\nconst sliderTop = sliderFolder.add(sliderCfg, '上间距', 0, 10).onChange((value) => {\n slider.update({\n padding: [value, sliderRight.getValue(), sliderBottom.getValue(), sliderLeft.getValue()],\n });\n});\nconst sliderBottom = sliderFolder.add(sliderCfg, '下间距', 0, 10).onChange((value) => {\n slider.update({\n padding: [sliderTop.getValue(), sliderRight.getValue(), value, sliderLeft.getValue()],\n });\n});\n\nconst sparklineFolder = cfg.addFolder('Sparkline边距');\nsparklineFolder.open();\nconst sparklineCfg = { 左间距: 0, 右间距: 0, 上间距: 0, 下间距: 0 };\n\nconst sparklineLeft = sparklineFolder.add(sparklineCfg, '左间距', 0, 10).onChange((value) => {\n slider.update({\n sparkline: { padding: [sparklineTop.getValue(), sparklineRight.getValue(), sparklineBottom.getValue(), value] },\n });\n});\nconst sparklineRight = sparklineFolder.add(sparklineCfg, '右间距', 0, 10).onChange((value) => {\n slider.update({\n sparkline: { padding: [sparklineTop.getValue(), value, sparklineBottom.getValue(), sparklineLeft.getValue()] },\n });\n});\nconst sparklineTop = sparklineFolder.add(sparklineCfg, '上间距', 0, 10).onChange((value) => {\n slider.update({\n sparkline: { padding: [value, sparklineRight.getValue(), sparklineBottom.getValue(), sparklineLeft.getValue()] },\n });\n});\nconst sparklineBottom = sparklineFolder.add(sparklineCfg, '下间距', 0, 10).onChange((value) => {\n slider.update({\n sparkline: { padding: [sparklineTop.getValue(), sparklineRight.getValue(), value, sparklineLeft.getValue()] },\n });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.sparkline = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var slider = new _gui.Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['leftVal', 'rightVal'],\n sparkline: {\n data: [[1, 3, 2, -4, 1, 3, 2, -4], [5, 1, 5, -8, 5, 1, 5, -8]] // lineStyle: {\n // stroke: 'rgba(197,197,197,0.85)'\n // },\n\n }\n }\n });\n var slider2 = new _gui.Slider({\n style: {\n x: 50,\n y: 150,\n width: 400,\n height: 20,\n values: [0.3, 0.7],\n names: ['leftVal', 'rightVal'],\n sparkline: {\n data: new Array(30).fill(0).map(function () {\n return 0.5 + Math.random();\n }),\n lineStyle: {\n lineWidth: 0\n },\n areaStyle: {\n fill: 'rgba(197,197,197,0.85)'\n }\n }\n }\n });\n canvas.appendChild(slider);\n canvas.appendChild(slider2);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var sliderFolder = cfg.addFolder('Slider边距');\n sliderFolder.open();\n var sliderCfg = {\n 左间距: 0,\n 右间距: 0,\n 上间距: 0,\n 下间距: 0\n };\n var sliderLeft = sliderFolder.add(sliderCfg, '左间距', 0, 10).onChange(function (value) {\n slider.update({\n padding: [sliderTop.getValue(), sliderRight.getValue(), sliderBottom.getValue(), value]\n });\n });\n var sliderRight = sliderFolder.add(sliderCfg, '右间距', 0, 10).onChange(function (value) {\n slider.update({\n padding: [sliderTop.getValue(), value, sliderBottom.getValue(), sliderLeft.getValue()]\n });\n });\n var sliderTop = sliderFolder.add(sliderCfg, '上间距', 0, 10).onChange(function (value) {\n slider.update({\n padding: [value, sliderRight.getValue(), sliderBottom.getValue(), sliderLeft.getValue()]\n });\n });\n var sliderBottom = sliderFolder.add(sliderCfg, '下间距', 0, 10).onChange(function (value) {\n slider.update({\n padding: [sliderTop.getValue(), sliderRight.getValue(), value, sliderLeft.getValue()]\n });\n });\n var sparklineFolder = cfg.addFolder('Sparkline边距');\n sparklineFolder.open();\n var sparklineCfg = {\n 左间距: 0,\n 右间距: 0,\n 上间距: 0,\n 下间距: 0\n };\n var sparklineLeft = sparklineFolder.add(sparklineCfg, '左间距', 0, 10).onChange(function (value) {\n slider.update({\n sparkline: {\n padding: [sparklineTop.getValue(), sparklineRight.getValue(), sparklineBottom.getValue(), value]\n }\n });\n });\n var sparklineRight = sparklineFolder.add(sparklineCfg, '右间距', 0, 10).onChange(function (value) {\n slider.update({\n sparkline: {\n padding: [sparklineTop.getValue(), value, sparklineBottom.getValue(), sparklineLeft.getValue()]\n }\n });\n });\n var sparklineTop = sparklineFolder.add(sparklineCfg, '上间距', 0, 10).onChange(function (value) {\n slider.update({\n sparkline: {\n padding: [value, sparklineRight.getValue(), sparklineBottom.getValue(), sparklineLeft.getValue()]\n }\n });\n });\n var sparklineBottom = sparklineFolder.add(sparklineCfg, '下间距', 0, 10).onChange(function (value) {\n slider.update({\n sparkline: {\n padding: [sparklineTop.getValue(), sparklineRight.getValue(), value, sparklineLeft.getValue()]\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Slider","order":204},"zh":{"title":"缩略轴","order":204}}},{"relativePath":"chart-ui/slider/demo/style.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/slider/demo/style.ts","order":3,"filename":"style.ts","title":{"zh":"样式设置","en":"Custom Style"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Slider } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst slider = new Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 40,\n values: [0.3, 0.7],\n names: ['startVal', 'endVal'],\n handle: {\n start: {\n formatter: (name, value) => {\n return `${name}: ${(value * 100).toFixed(2)}%`;\n },\n handleIcon: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',\n },\n end: {\n handleIcon: 'diamond',\n },\n },\n },\n});\n\ncanvas.appendChild(slider);\n\n/** -------------------------配置区域--------------------------------------- */\nconst $wrapper = document.getElementById('container');\nconst cfg = new dat.GUI({ autoPlace: false });\n$wrapper.appendChild(cfg.domElement);\nconst sliderFolder = cfg.addFolder('Slider');\nsliderFolder.open();\nconst sliderCfg = {\n 背景颜色: '#fff',\n 背景边框颜色: '#e4eaf5',\n 选区颜色: '#afc9fb',\n 选区边框颜色: '#afc9fb',\n};\n\nsliderFolder.addColor(sliderCfg, '背景颜色').onChange((color) => {\n slider.update({ backgroundStyle: { default: { fill: color } } });\n});\nsliderFolder.addColor(sliderCfg, '背景边框颜色').onChange((color) => {\n slider.update({ backgroundStyle: { default: { stroke: color } } });\n});\nsliderFolder.addColor(sliderCfg, '选区颜色').onChange((color) => {\n slider.update({ selectionStyle: { default: { fill: color } } });\n});\nsliderFolder.addColor(sliderCfg, '选区边框颜色').onChange((color) => {\n slider.update({ selectionStyle: { default: { stroke: color } } });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.style = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var slider = new _gui.Slider({\n style: {\n x: 50,\n y: 50,\n width: 400,\n height: 40,\n values: [0.3, 0.7],\n names: ['startVal', 'endVal'],\n handle: {\n start: {\n formatter: function formatter(name, value) {\n return \"\".concat(name, \": \").concat((value * 100).toFixed(2), \"%\");\n },\n handleIcon: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ'\n },\n end: {\n handleIcon: 'diamond'\n }\n }\n }\n });\n canvas.appendChild(slider);\n /** -------------------------配置区域--------------------------------------- */\n\n var $wrapper = document.getElementById('container');\n var cfg = new dat.GUI({\n autoPlace: false\n });\n $wrapper.appendChild(cfg.domElement);\n var sliderFolder = cfg.addFolder('Slider');\n sliderFolder.open();\n var sliderCfg = {\n 背景颜色: '#fff',\n 背景边框颜色: '#e4eaf5',\n 选区颜色: '#afc9fb',\n 选区边框颜色: '#afc9fb'\n };\n sliderFolder.addColor(sliderCfg, '背景颜色').onChange(function (color) {\n slider.update({\n backgroundStyle: {\n default: {\n fill: color\n }\n }\n });\n });\n sliderFolder.addColor(sliderCfg, '背景边框颜色').onChange(function (color) {\n slider.update({\n backgroundStyle: {\n default: {\n stroke: color\n }\n }\n });\n });\n sliderFolder.addColor(sliderCfg, '选区颜色').onChange(function (color) {\n slider.update({\n selectionStyle: {\n default: {\n fill: color\n }\n }\n });\n });\n sliderFolder.addColor(sliderCfg, '选区边框颜色').onChange(function (color) {\n slider.update({\n selectionStyle: {\n default: {\n stroke: color\n }\n }\n });\n });\n});","postFrontmatter":{"en":{"title":"Slider","order":204},"zh":{"title":"缩略轴","order":204}}},{"relativePath":"chart-ui/timeline/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/timeline/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"Basic Timeline","en":"Basic Timeline"},"screenshot":"","source":"import { Canvas, Rect } from '@antv/g';\nimport { Time } from '@antv/scale';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Timeline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 800,\n height: 800,\n renderer,\n});\n\nconst rectStyle = { width: 400, height: 60, stroke: '#d9d9d9', lineWidth: 1 };\nconst rect = canvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 40 } }));\n\nconst TIME_DATA = (count = 10) => {\n const scale = new Time({\n tickCount: count,\n range: [0, count],\n domain: [new Date(2000, 0, 1), new Date(2000, 0, 2)],\n });\n const formatter = scale.getFormatter();\n\n return scale.getTicks().map((d: any) => ({ date: formatter(d) }));\n};\n\nconst timeline = new Timeline({\n style: {\n width: 400,\n height: 80,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 20, 4, 16],\n },\n});\nrect.appendChild(timeline);\ntimeline.addEventListener('timelineChanged', (evt) => {\n console.log('timelineChanged', evt.detail.selection);\n});\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 120 } })).appendChild(\n new Timeline({\n style: {\n width: 400,\n height: 80,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 20, 4, 16],\n playAxis: {\n label: { position: -1 },\n },\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 210 } })).appendChild(\n new Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 4, 4, 16],\n controlPosition: 'right',\n controlButton: {\n spacing: 6,\n playBtn: { size: 16 },\n },\n playAxis: {\n appendPadding: [4, 8, 4, 0],\n label: { position: -1 },\n singleMode: true,\n },\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 280 } })).appendChild(\n new Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4],\n playAxis: {\n appendPadding: [0, 16, 0, 8],\n label: { position: -1 },\n loop: true,\n playMode: 'increase',\n },\n controlPosition: 'left',\n controlButton: {\n spacing: 6,\n playBtn: { size: 16 },\n },\n autoPlay: true,\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, height: 320, width: 80, x: 460, y: 40 } })).appendChild(\n new Timeline({\n style: {\n x: 14,\n orientation: 'vertical',\n width: 40,\n height: 320,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: 4,\n controlPosition: 'left',\n controlButton: {\n spacing: 4,\n playBtn: { size: 16 },\n },\n autoPlay: true,\n playAxis: {\n appendPadding: [4, 8],\n label: { position: -1 },\n loop: true,\n playMode: 'increase',\n },\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 360 } })).appendChild(\n new Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n controlButton: {\n spacing: 6,\n playBtn: { size: 16 },\n },\n padding: [2, 4],\n playAxis: {\n appendPadding: [0, 8],\n label: { position: -1 },\n loop: true,\n playMode: 'increase',\n },\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, x: 40, y: 440 } })).appendChild(\n new Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n controlButton: {\n spacing: 4,\n playBtn: { size: 16 },\n },\n padding: 4,\n playAxis: {\n appendPadding: [0, 8],\n label: { position: 1 },\n loop: true,\n playMode: 'increase',\n },\n autoPlay: true,\n },\n })\n);\n\ncanvas.appendChild(new Rect({ style: { ...rectStyle, height: 400, width: 80, x: 560, y: 40 } })).appendChild(\n new Timeline({\n style: {\n x: 14,\n orientation: 'vertical',\n width: 40,\n height: 400,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n padding: [4, 0],\n // singleModeControl: null,\n speedControl: null,\n autoPlay: true,\n controlButton: {\n spacing: 4,\n playBtn: { size: 16 },\n },\n playAxis: {\n appendPadding: [2, 0],\n label: { position: -1 },\n loop: true,\n playMode: 'increase',\n },\n },\n })\n);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/scale\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/scale\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.scale, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _scale, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 800,\n height: 800,\n renderer: renderer\n });\n var rectStyle = {\n width: 400,\n height: 60,\n stroke: '#d9d9d9',\n lineWidth: 1\n };\n var rect = canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 40\n }\n }));\n\n var TIME_DATA = function TIME_DATA() {\n var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;\n var scale = new _scale.Time({\n tickCount: count,\n range: [0, count],\n domain: [new Date(2000, 0, 1), new Date(2000, 0, 2)]\n });\n var formatter = scale.getFormatter();\n return scale.getTicks().map(function (d) {\n return {\n date: formatter(d)\n };\n });\n };\n\n var timeline = new _gui.Timeline({\n style: {\n width: 400,\n height: 80,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 20, 4, 16]\n }\n });\n rect.appendChild(timeline);\n timeline.addEventListener('timelineChanged', function (evt) {\n console.log('timelineChanged', evt.detail.selection);\n });\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 120\n }\n })).appendChild(new _gui.Timeline({\n style: {\n width: 400,\n height: 80,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 20, 4, 16],\n playAxis: {\n label: {\n position: -1\n }\n }\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 210\n }\n })).appendChild(new _gui.Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4, 4, 4, 16],\n controlPosition: 'right',\n controlButton: {\n spacing: 6,\n playBtn: {\n size: 16\n }\n },\n playAxis: {\n appendPadding: [4, 8, 4, 0],\n label: {\n position: -1\n },\n singleMode: true\n }\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 280\n }\n })).appendChild(new _gui.Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: [4],\n playAxis: {\n appendPadding: [0, 16, 0, 8],\n label: {\n position: -1\n },\n loop: true,\n playMode: 'increase'\n },\n controlPosition: 'left',\n controlButton: {\n spacing: 6,\n playBtn: {\n size: 16\n }\n },\n autoPlay: true\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n height: 320,\n width: 80,\n x: 460,\n y: 40\n }\n })).appendChild(new _gui.Timeline({\n style: {\n x: 14,\n orientation: 'vertical',\n width: 40,\n height: 320,\n data: TIME_DATA(),\n selection: [0, 2],\n padding: 4,\n controlPosition: 'left',\n controlButton: {\n spacing: 4,\n playBtn: {\n size: 16\n }\n },\n autoPlay: true,\n playAxis: {\n appendPadding: [4, 8],\n label: {\n position: -1\n },\n loop: true,\n playMode: 'increase'\n }\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 360\n }\n })).appendChild(new _gui.Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n controlButton: {\n spacing: 6,\n playBtn: {\n size: 16\n }\n },\n padding: [2, 4],\n playAxis: {\n appendPadding: [0, 8],\n label: {\n position: -1\n },\n loop: true,\n playMode: 'increase'\n }\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n x: 40,\n y: 440\n }\n })).appendChild(new _gui.Timeline({\n style: {\n width: 400,\n height: 40,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n controlButton: {\n spacing: 4,\n playBtn: {\n size: 16\n }\n },\n padding: 4,\n playAxis: {\n appendPadding: [0, 8],\n label: {\n position: 1\n },\n loop: true,\n playMode: 'increase'\n },\n autoPlay: true\n }\n }));\n canvas.appendChild(new _g.Rect({\n style: { ...rectStyle,\n height: 400,\n width: 80,\n x: 560,\n y: 40\n }\n })).appendChild(new _gui.Timeline({\n style: {\n x: 14,\n orientation: 'vertical',\n width: 40,\n height: 400,\n data: TIME_DATA(20),\n type: 'cell',\n selection: [0, 2],\n controlPosition: 'left',\n padding: [4, 0],\n // singleModeControl: null,\n speedControl: null,\n autoPlay: true,\n controlButton: {\n spacing: 4,\n playBtn: {\n size: 16\n }\n },\n playAxis: {\n appendPadding: [2, 0],\n label: {\n position: -1\n },\n loop: true,\n playMode: 'increase'\n }\n }\n }));\n});","postFrontmatter":{"en":{"title":"Timeline","order":205},"zh":{"title":"Timeline","order":205}}},{"relativePath":"chart-ui/tooltip/demo/basic-tooltip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/tooltip/demo/basic-tooltip.ts","order":0,"filename":"basic-tooltip.ts","title":{"zh":"基础提示框","en":"Basic tooltip"},"screenshot":"","source":"import { Canvas, Rect, Circle } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tooltip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\n/* create dots */\nnew Array(10 ** 2).fill(Math.random() * 100).forEach((val, idx) => {\n canvas.appendChild(\n new Circle({\n name: 'dot',\n style: {\n cx: ((idx % 10) + 1.5) * 50,\n cy: (Math.floor(idx / 10) + 1.5) * 50,\n r: 10,\n fill: `rgb(${Array.from({ length: 3 }, () => {\n return Math.round((0.4 + Math.random() * 0.6) * 255);\n }).join(',')})`,\n zIndex: 2,\n },\n })\n );\n});\n\n/* 边界区域 */\ncanvas.appendChild(\n new Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n fill: 'l(0) 0:#c97f7f 0.1:#cb8a87 0.2:#cd968f 0.3:#cfa197 0.4:#d1ac9f 0.5:#d3b8a6 0.6:#d5c3ae 0.7:#d7ceb6 0.8:#d9dabe 0.9:#dbe5c6',\n },\n })\n);\n\nconst tooltip = new Tooltip({\n style: {\n title: 'Color',\n x: 0,\n y: 0,\n offset: [20, 20],\n position: 'bottom-right',\n items: [],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n },\n visibility: 'hidden',\n },\n});\n\n// 移除其他 tooltip\nArray.from(document.getElementsByClassName('tooltip')).forEach((tooltip) => tooltip.remove());\n// 添加tooltip\ndocument.body.appendChild(tooltip.HTMLTooltipElement);\n\nlet colorList = [];\n// 绑定tooltip事件\ncanvas.addEventListener('mousemove', (e) => {\n if (e.target && e.target.name === 'dot') {\n tooltip.show();\n const fill = e.target.attr('fill');\n fill !== colorList[0] && colorList.unshift(fill);\n colorList = colorList.slice(0, 5);\n tooltip.update({\n x: e.offsetX,\n y: e.offsetY,\n items: colorList.map((color, idx) => ({ color, name: `${idx + 1}`, value: `${color}`, fill: color })),\n });\n } else {\n tooltip.hide();\n }\n});\n\n// 更新边界信息\nconst { left, top } = document.getElementById('container').getBoundingClientRect();\ntooltip.update({\n container: {\n x: left,\n y: top,\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicTooltip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n /* create dots */\n\n new Array(10 ** 2).fill(Math.random() * 100).forEach(function (val, idx) {\n canvas.appendChild(new _g.Circle({\n name: 'dot',\n style: {\n cx: (idx % 10 + 1.5) * 50,\n cy: (Math.floor(idx / 10) + 1.5) * 50,\n r: 10,\n fill: \"rgb(\".concat(Array.from({\n length: 3\n }, function () {\n return Math.round((0.4 + Math.random() * 0.6) * 255);\n }).join(','), \")\"),\n zIndex: 2\n }\n }));\n });\n /* 边界区域 */\n\n canvas.appendChild(new _g.Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n fill: 'l(0) 0:#c97f7f 0.1:#cb8a87 0.2:#cd968f 0.3:#cfa197 0.4:#d1ac9f 0.5:#d3b8a6 0.6:#d5c3ae 0.7:#d7ceb6 0.8:#d9dabe 0.9:#dbe5c6'\n }\n }));\n var tooltip = new _gui.Tooltip({\n style: {\n title: 'Color',\n x: 0,\n y: 0,\n offset: [20, 20],\n position: 'bottom-right',\n items: [],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 500\n },\n visibility: 'hidden'\n }\n }); // 移除其他 tooltip\n\n Array.from(document.getElementsByClassName('tooltip')).forEach(function (tooltip) {\n return tooltip.remove();\n }); // 添加tooltip\n\n document.body.appendChild(tooltip.HTMLTooltipElement);\n var colorList = []; // 绑定tooltip事件\n\n canvas.addEventListener('mousemove', function (e) {\n if (e.target && e.target.name === 'dot') {\n tooltip.show();\n var fill = e.target.attr('fill');\n fill !== colorList[0] && colorList.unshift(fill);\n colorList = colorList.slice(0, 5);\n tooltip.update({\n x: e.offsetX,\n y: e.offsetY,\n items: colorList.map(function (color, idx) {\n return {\n color: color,\n name: \"\".concat(idx + 1),\n value: \"\".concat(color),\n fill: color\n };\n })\n });\n } else {\n tooltip.hide();\n }\n }); // 更新边界信息\n\n var _document$getElementB = document.getElementById('container').getBoundingClientRect(),\n left = _document$getElementB.left,\n top = _document$getElementB.top;\n\n tooltip.update({\n container: {\n x: left,\n y: top\n }\n });\n});","postFrontmatter":{"en":{"title":"Tooltip","order":205},"zh":{"title":"Tooltip","order":205}}},{"relativePath":"chart-ui/tooltip/demo/custom-tooltip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/tooltip/demo/custom-tooltip.ts","order":2,"filename":"custom-tooltip.ts","title":{"zh":"自定义提示框","en":"Custom tooltip"},"screenshot":"","source":"import { Canvas, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tooltip, Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer,\n});\n\nconst color = ['#72e5cf', '#ff5d74', '#f9bc2e'];\nconst data = [\n [10, 2, 3, 4, 15, 10, 5, 0, 3, 1],\n [5, 7, 10, 3, 10, 6, 10, 1, 5, 0],\n [-10, 3, 4, 10, 15, 13, 3, 3, 10, 12],\n];\n\n/* 边界区域 */\nconst tooltipArea = new Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 200,\n lineWidth: 1,\n fill: '#eee',\n stroke: '#000',\n },\n});\ncanvas.appendChild(tooltipArea);\n\ntooltipArea.appendChild(\n new Sparkline({\n style: {\n data,\n color,\n x: 0,\n y: 0,\n width: 500,\n height: 200,\n smooth: false,\n },\n })\n);\n\n// 创建自定义组件的容器\nconst customElement = document.createElement('div');\nconst innerCanvas = new Canvas({\n container: customElement,\n width: 100,\n height: 80,\n renderer,\n});\ndata.forEach((datum, idx) => {\n innerCanvas.appendChild(\n new Sparkline({\n style: {\n x: 0,\n y: 30 * idx,\n width: 100,\n height: 20,\n areaStyle: {\n opacity: 0.5,\n },\n color: color[idx],\n data: [datum],\n },\n })\n );\n});\n\nconst tooltip = new Tooltip({\n style: {\n title: '数值',\n x: 0,\n y: 0,\n offset: [10, 10],\n position: 'bottom-right',\n autoPosition: true,\n items: [\n {\n value: 0,\n name: '第一项',\n index: 0,\n color: 'red',\n },\n ],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 200,\n },\n style: {\n '.tooltip': {\n 'border-radius': '5px',\n },\n },\n customContent: () => {\n return customElement;\n },\n },\n});\n\n// 移除之前的tooltip\nArray.from(document.getElementsByClassName('tooltip')).forEach((tooltip) => tooltip.remove());\ndocument.getElementsByTagName('body')[0].appendChild(tooltip.HTMLTooltipElement);\ncanvas.addEventListener('mousemove', (e) => {\n tooltip.position = [e.offsetX, e.offsetY];\n});\ntooltipArea.addEventListener('mouseenter', () => {\n tooltip.show();\n});\ntooltipArea.addEventListener('mouseleave', () => {\n tooltip.hide();\n});\n\nconst { left, top } = document.getElementById('container').getBoundingClientRect();\ntooltip.update({\n container: {\n x: left,\n y: top,\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.customTooltip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 300,\n renderer: renderer\n });\n var color = ['#72e5cf', '#ff5d74', '#f9bc2e'];\n var data = [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1], [5, 7, 10, 3, 10, 6, 10, 1, 5, 0], [-10, 3, 4, 10, 15, 13, 3, 3, 10, 12]];\n /* 边界区域 */\n\n var tooltipArea = new _g.Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 200,\n lineWidth: 1,\n fill: '#eee',\n stroke: '#000'\n }\n });\n canvas.appendChild(tooltipArea);\n tooltipArea.appendChild(new _gui.Sparkline({\n style: {\n data: data,\n color: color,\n x: 0,\n y: 0,\n width: 500,\n height: 200,\n smooth: false\n }\n })); // 创建自定义组件的容器\n\n var customElement = document.createElement('div');\n var innerCanvas = new _g.Canvas({\n container: customElement,\n width: 100,\n height: 80,\n renderer: renderer\n });\n data.forEach(function (datum, idx) {\n innerCanvas.appendChild(new _gui.Sparkline({\n style: {\n x: 0,\n y: 30 * idx,\n width: 100,\n height: 20,\n areaStyle: {\n opacity: 0.5\n },\n color: color[idx],\n data: [datum]\n }\n }));\n });\n var tooltip = new _gui.Tooltip({\n style: {\n title: '数值',\n x: 0,\n y: 0,\n offset: [10, 10],\n position: 'bottom-right',\n autoPosition: true,\n items: [{\n value: 0,\n name: '第一项',\n index: 0,\n color: 'red'\n }],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 200\n },\n style: {\n '.tooltip': {\n 'border-radius': '5px'\n }\n },\n customContent: function customContent() {\n return customElement;\n }\n }\n }); // 移除之前的tooltip\n\n Array.from(document.getElementsByClassName('tooltip')).forEach(function (tooltip) {\n return tooltip.remove();\n });\n document.getElementsByTagName('body')[0].appendChild(tooltip.HTMLTooltipElement);\n canvas.addEventListener('mousemove', function (e) {\n tooltip.position = [e.offsetX, e.offsetY];\n });\n tooltipArea.addEventListener('mouseenter', function () {\n tooltip.show();\n });\n tooltipArea.addEventListener('mouseleave', function () {\n tooltip.hide();\n });\n\n var _document$getElementB = document.getElementById('container').getBoundingClientRect(),\n left = _document$getElementB.left,\n top = _document$getElementB.top;\n\n tooltip.update({\n container: {\n x: left,\n y: top\n }\n });\n});","postFrontmatter":{"en":{"title":"Tooltip","order":205},"zh":{"title":"Tooltip","order":205}}},{"relativePath":"chart-ui/tooltip/demo/mini-tooltip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/tooltip/demo/mini-tooltip.ts","order":1,"filename":"mini-tooltip.ts","title":{"zh":"迷你提示框","en":"Mini tooltip"},"screenshot":"","source":"import { Canvas, Rect, Circle } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Tooltip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer,\n});\n\nconst dots = [];\nconst r = 5;\nconst getRandomPosition = (st, limit, r) => st + r + (limit - 2 * r) * Math.random();\n\nconst tooltipArea = new Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n fill: 'l(90) 0:#fb3a98 0.5:#ff5080 1:#ff5d74',\n },\n});\n\ncanvas.appendChild(tooltipArea);\n\n/* create scatter */\nArray.from({ length: 300 }, () => {\n return [getRandomPosition(50, 500, r), getRandomPosition(50, 500, r)];\n}).forEach(([x, y], i) => {\n const dot = new Circle({\n name: 'scatter',\n style: {\n cx: x,\n cy: y,\n r,\n fill: '#f9bc2e',\n },\n });\n dots.push(dot);\n canvas.appendChild(dot);\n});\n\nconst tooltip = new Tooltip({\n style: {\n title: '数值',\n x: 0,\n y: 0,\n visibility: 'hidden',\n offset: [10, 10],\n position: 'bottom-right',\n autoPosition: true,\n items: [\n {\n value: 0,\n name: '第一项',\n index: 0,\n color: 'red',\n },\n ],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n },\n style: {\n '.tooltip': {\n 'border-radius': '5px',\n 'background-color': '#232c31',\n padding: '4px 8px',\n color: '#fff',\n },\n },\n customContent: (items) => {\n return `
x: ${items[0].x}
y: ${items[0].y}
`;\n },\n },\n});\n\n// 移除之前的tooltip\nArray.from(document.getElementsByClassName('tooltip')).forEach((tooltip) => tooltip.remove());\ndocument.getElementsByTagName('body')[0].appendChild(tooltip.HTMLTooltipElement);\n\ncanvas.addEventListener('mousemove', (e) => {\n if (e.target && e.target.name === 'scatter') {\n e.target.attr('fill', 'white');\n tooltip.update({\n items: [\n {\n x: e.offsetX,\n y: e.offsetY,\n },\n ],\n });\n tooltip.position = [e.offsetX, e.offsetY];\n tooltip.show();\n } else {\n dots.forEach((dot) => dot.attr('fill', '#f9bc2e'));\n tooltip.hide();\n }\n});\n\nconst { left, top } = document.getElementById('container').getBoundingClientRect();\ntooltip.update({\n container: {\n x: left,\n y: top,\n },\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.miniTooltip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n function _iterableToArrayLimit(arr, i) { if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 600,\n renderer: renderer\n });\n var dots = [];\n var r = 5;\n\n var getRandomPosition = function getRandomPosition(st, limit, r) {\n return st + r + (limit - 2 * r) * Math.random();\n };\n\n var tooltipArea = new _g.Rect({\n style: {\n x: 50,\n y: 50,\n width: 500,\n height: 500,\n fill: 'l(90) 0:#fb3a98 0.5:#ff5080 1:#ff5d74'\n }\n });\n canvas.appendChild(tooltipArea);\n /* create scatter */\n\n Array.from({\n length: 300\n }, function () {\n return [getRandomPosition(50, 500, r), getRandomPosition(50, 500, r)];\n }).forEach(function (_ref, i) {\n var _ref2 = _slicedToArray(_ref, 2),\n x = _ref2[0],\n y = _ref2[1];\n\n var dot = new _g.Circle({\n name: 'scatter',\n style: {\n cx: x,\n cy: y,\n r: r,\n fill: '#f9bc2e'\n }\n });\n dots.push(dot);\n canvas.appendChild(dot);\n });\n var tooltip = new _gui.Tooltip({\n style: {\n title: '数值',\n x: 0,\n y: 0,\n visibility: 'hidden',\n offset: [10, 10],\n position: 'bottom-right',\n autoPosition: true,\n items: [{\n value: 0,\n name: '第一项',\n index: 0,\n color: 'red'\n }],\n bounding: {\n x: 50,\n y: 50,\n width: 500,\n height: 500\n },\n style: {\n '.tooltip': {\n 'border-radius': '5px',\n 'background-color': '#232c31',\n padding: '4px 8px',\n color: '#fff'\n }\n },\n customContent: function customContent(items) {\n return \"
x: \".concat(items[0].x, \"
y: \").concat(items[0].y, \"
\");\n }\n }\n }); // 移除之前的tooltip\n\n Array.from(document.getElementsByClassName('tooltip')).forEach(function (tooltip) {\n return tooltip.remove();\n });\n document.getElementsByTagName('body')[0].appendChild(tooltip.HTMLTooltipElement);\n canvas.addEventListener('mousemove', function (e) {\n if (e.target && e.target.name === 'scatter') {\n e.target.attr('fill', 'white');\n tooltip.update({\n items: [{\n x: e.offsetX,\n y: e.offsetY\n }]\n });\n tooltip.position = [e.offsetX, e.offsetY];\n tooltip.show();\n } else {\n dots.forEach(function (dot) {\n return dot.attr('fill', '#f9bc2e');\n });\n tooltip.hide();\n }\n });\n\n var _document$getElementB = document.getElementById('container').getBoundingClientRect(),\n left = _document$getElementB.left,\n top = _document$getElementB.top;\n\n tooltip.update({\n container: {\n x: left,\n y: top\n }\n });\n});","postFrontmatter":{"en":{"title":"Tooltip","order":205},"zh":{"title":"Tooltip","order":205}}},{"relativePath":"others/page-navigator/demo/basic-page-navigator.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/page-navigator/demo/basic-page-navigator.ts","order":0,"filename":"basic-page-navigator.ts","title":{"zh":"横向分页","en":"horizontal page navigator"},"screenshot":"","source":"import { Canvas, Text, Rect, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { PageNavigator } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer,\n});\n\nconst pages = new Group({ name: 'group' });\n\nfunction createPages(count, width, height) {\n const pages = [];\n for (let i = 0; i < count; i += 1) {\n const rect = new Rect({\n style: {\n x: width * i,\n y: 0,\n width,\n height,\n fill: '#f3f3f3',\n stroke: 'gray',\n lineWidth: 0,\n },\n });\n const text = new Text({\n style: {\n x: width / 2,\n y: height / 2,\n text: `第${i + 1}页`,\n fill: 'black',\n fontSize: 20,\n textAlign: 'center',\n textBaseline: 'middle',\n },\n });\n rect.appendChild(text);\n pages.push(rect);\n }\n return pages;\n}\n\nconst pageCount = 5;\nconst pageWidth = 150;\nconst pageHeight = 200;\n\ncreatePages(pageCount, pageWidth, pageHeight).forEach((shape) => pages.appendChild(shape));\n\nconst pageNavigator = new PageNavigator({\n style: {\n x: 100,\n y: 100,\n view: pages,\n pageWidth,\n pageHeight,\n initPageNum: 1,\n loop: false,\n button: {\n position: 'bottom',\n },\n },\n});\n\npages.removeChildren();\ncreatePages(10, pageWidth, pageHeight).forEach((shape) => pages.appendChild(shape));\n\npageNavigator.update({\n loop: true,\n view: pages,\n});\n\nconst newPages = new Group({});\ncreatePages(15, pageWidth, pageHeight).forEach((shape) => newPages.appendChild(shape));\npageNavigator.update({\n view: newPages,\n});\n\ncanvas.appendChild(pageNavigator);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicPageNavigator = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer: renderer\n });\n var pages = new _g.Group({\n name: 'group'\n });\n\n function createPages(count, width, height) {\n var pages = [];\n\n for (var i = 0; i < count; i += 1) {\n var rect = new _g.Rect({\n style: {\n x: width * i,\n y: 0,\n width: width,\n height: height,\n fill: '#f3f3f3',\n stroke: 'gray',\n lineWidth: 0\n }\n });\n var text = new _g.Text({\n style: {\n x: width / 2,\n y: height / 2,\n text: \"\\u7B2C\".concat(i + 1, \"\\u9875\"),\n fill: 'black',\n fontSize: 20,\n textAlign: 'center',\n textBaseline: 'middle'\n }\n });\n rect.appendChild(text);\n pages.push(rect);\n }\n\n return pages;\n }\n\n var pageCount = 5;\n var pageWidth = 150;\n var pageHeight = 200;\n createPages(pageCount, pageWidth, pageHeight).forEach(function (shape) {\n return pages.appendChild(shape);\n });\n var pageNavigator = new _gui.PageNavigator({\n style: {\n x: 100,\n y: 100,\n view: pages,\n pageWidth: pageWidth,\n pageHeight: pageHeight,\n initPageNum: 1,\n loop: false,\n button: {\n position: 'bottom'\n }\n }\n });\n pages.removeChildren();\n createPages(10, pageWidth, pageHeight).forEach(function (shape) {\n return pages.appendChild(shape);\n });\n pageNavigator.update({\n loop: true,\n view: pages\n });\n var newPages = new _g.Group({});\n createPages(15, pageWidth, pageHeight).forEach(function (shape) {\n return newPages.appendChild(shape);\n });\n pageNavigator.update({\n view: newPages\n });\n canvas.appendChild(pageNavigator);\n});","postFrontmatter":{"en":{"title":"Page Navigator","order":402},"zh":{"title":"Page Navigator","order":402}}},{"relativePath":"others/page-navigator/demo/vertical-page-navigator.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/page-navigator/demo/vertical-page-navigator.ts","order":1,"filename":"vertical-page-navigator.ts","title":{"zh":"纵向分页","en":"vertical page navigator"},"screenshot":"","source":"import { Canvas, Text, Rect, Group } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { PageNavigator } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer,\n});\n\nconst pages = new Group({ name: 'group' });\n\nfunction createPages(count, width, height) {\n const pages = [];\n for (let i = 0; i < count; i += 1) {\n const rect = new Rect({\n style: {\n x: 0,\n y: height * i,\n width,\n height,\n fill: '#fff',\n stroke: 'gray',\n lineWidth: 0,\n },\n });\n const text = new Text({\n style: {\n x: width / 2,\n y: height / 2,\n text: `第${i + 1}页`,\n fill: 'black',\n fontSize: 20,\n textAlign: 'center',\n textBaseline: 'middle',\n },\n });\n rect.appendChild(text);\n pages.push(rect);\n }\n return pages;\n}\n\nconst pageCount = 5;\nconst pageWidth = 150;\nconst pageHeight = 200;\n\ncreatePages(pageCount, pageWidth, pageHeight).forEach((shape) => pages.appendChild(shape));\n\nconst pageNavigator = new PageNavigator({\n style: {\n x: 100,\n y: 100,\n view: pages,\n width: pageWidth,\n height: pageCount * pageHeight,\n pageWidth,\n pageHeight,\n initPageNum: 1,\n orientation: 'vertical',\n loop: true,\n button: {\n position: 'bottom',\n },\n },\n});\n\ncanvas.appendChild(pageNavigator);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.verticalPageNavigator = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer: renderer\n });\n var pages = new _g.Group({\n name: 'group'\n });\n\n function createPages(count, width, height) {\n var pages = [];\n\n for (var i = 0; i < count; i += 1) {\n var rect = new _g.Rect({\n style: {\n x: 0,\n y: height * i,\n width: width,\n height: height,\n fill: '#fff',\n stroke: 'gray',\n lineWidth: 0\n }\n });\n var text = new _g.Text({\n style: {\n x: width / 2,\n y: height / 2,\n text: \"\\u7B2C\".concat(i + 1, \"\\u9875\"),\n fill: 'black',\n fontSize: 20,\n textAlign: 'center',\n textBaseline: 'middle'\n }\n });\n rect.appendChild(text);\n pages.push(rect);\n }\n\n return pages;\n }\n\n var pageCount = 5;\n var pageWidth = 150;\n var pageHeight = 200;\n createPages(pageCount, pageWidth, pageHeight).forEach(function (shape) {\n return pages.appendChild(shape);\n });\n var pageNavigator = new _gui.PageNavigator({\n style: {\n x: 100,\n y: 100,\n view: pages,\n width: pageWidth,\n height: pageCount * pageHeight,\n pageWidth: pageWidth,\n pageHeight: pageHeight,\n initPageNum: 1,\n orientation: 'vertical',\n loop: true,\n button: {\n position: 'bottom'\n }\n }\n });\n canvas.appendChild(pageNavigator);\n});","postFrontmatter":{"en":{"title":"Page Navigator","order":402},"zh":{"title":"Page Navigator","order":402}}},{"relativePath":"others/sparkline/demo/area-sparkline.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/sparkline/demo/area-sparkline.ts","order":1,"filename":"area-sparkline.ts","title":{"zh":"迷你区域图","en":"area sparkline"},"screenshot":"","source":"import { Canvas, Rect, Text } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nfunction random(min, max) {\n var range = max - min;\n var rand = Math.random();\n return min + Math.floor(rand * range);\n}\n\nconst canvas = new Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer,\n});\n\nfunction createSparkline(title, x, y, data, options = {}) {\n const text = new Text({ style: { x, y, text: title, fontSize: 12, textBaseline: 'top' } });\n const sparkline = new Sparkline({\n style: {\n x: 0,\n y: 0,\n width: 500,\n height: 30,\n smooth: true,\n isStack: true,\n areaStyle: {\n lineWidth: 0,\n opacity: 0.5,\n },\n data,\n ...options,\n },\n });\n const rect = new Rect({ style: { x, y: y + 16, width: 500, height: 30, stroke: '#dfdfdf', lineWidth: 1 } });\n canvas.appendChild(text);\n canvas.appendChild(rect);\n\n rect.appendChild(sparkline);\n}\n\ncreateSparkline(\n 'Normal',\n 0,\n 0,\n Array.from({ length: 100 }, (v, i) => random(10, 50))\n);\ncreateSparkline(\n 'config minValue',\n 0,\n 60,\n Array.from({ length: 100 }, (v, i) => random(10, 50)),\n { minValue: 0 }\n);\n\nconst data2 = Array.from({ length: 100 }, (v, i) => random(-46, -10));\ncreateSparkline('All negative values', 0, 120, data2);\ncreateSparkline('config nice to \"false\"', 0, 180, data2, { nice: false });\n\nconst data3 = Array.from({ length: 100 }, (v, i) => random(-20, 20));\ncreateSparkline('Positive and negative values exist', 0, 240, data3, { minValue: 0 });\ncreateSparkline('', 0, 280, data3);\ncreateSparkline('', 0, 320, data3, { maxValue: 0 });\n\ncreateSparkline('Stacked sparkline', 0, 380, [\n Array.from({ length: 100 }, (v, i) => random(20, 50)),\n Array.from({ length: 100 }, (v, i) => random(50, 100)),\n]);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.areaSparkline = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n\n function random(min, max) {\n var range = max - min;\n var rand = Math.random();\n return min + Math.floor(rand * range);\n }\n\n var canvas = new _g.Canvas({\n container: 'container',\n width: 500,\n height: 500,\n renderer: renderer\n });\n\n function createSparkline(title, x, y, data) {\n var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n var text = new _g.Text({\n style: {\n x: x,\n y: y,\n text: title,\n fontSize: 12,\n textBaseline: 'top'\n }\n });\n var sparkline = new _gui.Sparkline({\n style: {\n x: 0,\n y: 0,\n width: 500,\n height: 30,\n smooth: true,\n isStack: true,\n areaStyle: {\n lineWidth: 0,\n opacity: 0.5\n },\n data: data,\n ...options\n }\n });\n var rect = new _g.Rect({\n style: {\n x: x,\n y: y + 16,\n width: 500,\n height: 30,\n stroke: '#dfdfdf',\n lineWidth: 1\n }\n });\n canvas.appendChild(text);\n canvas.appendChild(rect);\n rect.appendChild(sparkline);\n }\n\n createSparkline('Normal', 0, 0, Array.from({\n length: 100\n }, function (v, i) {\n return random(10, 50);\n }));\n createSparkline('config minValue', 0, 60, Array.from({\n length: 100\n }, function (v, i) {\n return random(10, 50);\n }), {\n minValue: 0\n });\n var data2 = Array.from({\n length: 100\n }, function (v, i) {\n return random(-46, -10);\n });\n createSparkline('All negative values', 0, 120, data2);\n createSparkline('config nice to \"false\"', 0, 180, data2, {\n nice: false\n });\n var data3 = Array.from({\n length: 100\n }, function (v, i) {\n return random(-20, 20);\n });\n createSparkline('Positive and negative values exist', 0, 240, data3, {\n minValue: 0\n });\n createSparkline('', 0, 280, data3);\n createSparkline('', 0, 320, data3, {\n maxValue: 0\n });\n createSparkline('Stacked sparkline', 0, 380, [Array.from({\n length: 100\n }, function (v, i) {\n return random(20, 50);\n }), Array.from({\n length: 100\n }, function (v, i) {\n return random(50, 100);\n })]);\n});","postFrontmatter":{"en":{"title":"Sparkline","order":401},"zh":{"title":"Sparkline","order":401}}},{"relativePath":"others/sparkline/demo/area-stack-sparkline.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/sparkline/demo/area-stack-sparkline.ts","order":2,"filename":"area-stack-sparkline.ts","title":{"zh":"迷你堆积图","en":"stack sparkline"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer,\n});\n\nconst sparkline = new Sparkline({\n style: {\n x: 10,\n y: 10,\n width: 300,\n height: 40,\n smooth: true,\n isStack: true,\n areaStyle: {\n lineWidth: 0,\n opacity: 0.5,\n },\n data: [\n [10, 2, 3, 4, 15, 10, 5, 0, 3, 1],\n [5, 7, 10, 3, 10, 6, 10, 1, 5, 0],\n [1, 3, 4, 10, 15, 13, 3, 3, 10, 12],\n ],\n },\n});\n\ncanvas.appendChild(sparkline);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.areaStackSparkline = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer: renderer\n });\n var sparkline = new _gui.Sparkline({\n style: {\n x: 10,\n y: 10,\n width: 300,\n height: 40,\n smooth: true,\n isStack: true,\n areaStyle: {\n lineWidth: 0,\n opacity: 0.5\n },\n data: [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1], [5, 7, 10, 3, 10, 6, 10, 1, 5, 0], [1, 3, 4, 10, 15, 13, 3, 3, 10, 12]]\n }\n });\n canvas.appendChild(sparkline);\n});","postFrontmatter":{"en":{"title":"Sparkline","order":401},"zh":{"title":"Sparkline","order":401}}},{"relativePath":"others/sparkline/demo/basic-sparkbar.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/sparkline/demo/basic-sparkbar.ts","order":3,"filename":"basic-sparkbar.ts","title":{"zh":"迷你直方图","en":"stack sparkbar"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer,\n});\n\nconst sparkbar = new Sparkline({\n style: {\n x: 10,\n y: 10,\n type: 'column',\n width: 300,\n height: 40,\n data: [\n [10, 2, 3, 4, 15, 10, 5, 0, 3, 1],\n [5, 7, 10, 3, 10, 6, 10, 1, 5, 0],\n [1, 3, 4, 10, 15, 13, 3, 3, 10, 12],\n ],\n },\n});\n\ncanvas.appendChild(sparkbar);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicSparkbar = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer: renderer\n });\n var sparkbar = new _gui.Sparkline({\n style: {\n x: 10,\n y: 10,\n type: 'column',\n width: 300,\n height: 40,\n data: [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1], [5, 7, 10, 3, 10, 6, 10, 1, 5, 0], [1, 3, 4, 10, 15, 13, 3, 3, 10, 12]]\n }\n });\n canvas.appendChild(sparkbar);\n});","postFrontmatter":{"en":{"title":"Sparkline","order":401},"zh":{"title":"Sparkline","order":401}}},{"relativePath":"others/sparkline/demo/basic-sparkline.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/sparkline/demo/basic-sparkline.ts","order":0,"filename":"basic-sparkline.ts","title":{"zh":"迷你折线图","en":"basic sparkline"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer,\n});\n\nconst sparkline = new Sparkline({\n style: {\n x: 10,\n y: 10,\n width: 300,\n height: 40,\n smooth: false,\n data: [\n [10, 2, 3, 4, 15, 10, 5, 0, 3, 1],\n [5, 7, 10, 3, 10, 6, 10, 1, 5, 0],\n [-10, 3, 4, 10, 15, 13, 3, 3, 10, 12],\n ],\n },\n});\n\ncanvas.appendChild(sparkline);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basicSparkline = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer: renderer\n });\n var sparkline = new _gui.Sparkline({\n style: {\n x: 10,\n y: 10,\n width: 300,\n height: 40,\n smooth: false,\n data: [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1], [5, 7, 10, 3, 10, 6, 10, 1, 5, 0], [-10, 3, 4, 10, 15, 13, 3, 3, 10, 12]]\n }\n });\n canvas.appendChild(sparkline);\n});","postFrontmatter":{"en":{"title":"Sparkline","order":401},"zh":{"title":"Sparkline","order":401}}},{"relativePath":"others/sparkline/demo/stack-sparkbar.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/others/sparkline/demo/stack-sparkbar.ts","order":4,"filename":"stack-sparkbar.ts","title":{"zh":"迷你堆积直方图","en":"stack sparkbar"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Sparkline } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer,\n});\n\nconst sparkbar = new Sparkline({\n style: {\n x: 10,\n y: 10,\n type: 'column',\n width: 300,\n height: 40,\n isStack: true,\n isGroup: true,\n data: [\n [10, 2, 3, 4, 15, 10, 5, 0, 3, 1],\n [5, 7, 10, 3, 10, 6, 10, 1, 5, 0],\n [1, 3, 4, 10, 15, 13, 3, 3, 10, 12],\n ],\n },\n});\n\ncanvas.appendChild(sparkbar);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.stackSparkbar = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 350,\n height: 300,\n renderer: renderer\n });\n var sparkbar = new _gui.Sparkline({\n style: {\n x: 10,\n y: 10,\n type: 'column',\n width: 300,\n height: 40,\n isStack: true,\n isGroup: true,\n data: [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1], [5, 7, 10, 3, 10, 6, 10, 1, 5, 0], [1, 3, 4, 10, 15, 13, 3, 3, 10, 12]]\n }\n });\n canvas.appendChild(sparkbar);\n});","postFrontmatter":{"en":{"title":"Sparkline","order":401},"zh":{"title":"Sparkline","order":401}}},{"relativePath":"wip/breadcrumb/demo/auto-wrap.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/auto-wrap.ts","order":2,"filename":"auto-wrap.ts","title":{"zh":"面包屑 · 宽度溢出自动换行","en":"Breadcrumb auto wrap when overflow"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 0,\n y: 0,\n width: 120,\n items: [\n { text: '测试1', id: '1' },\n { text: '测试2', id: '2' },\n { text: '测试3', id: '3' },\n { text: '测试4', id: '4' },\n { text: '测试5', id: '5' },\n ],\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n\n// 初始化控制器\nconst cfg = new dat.GUI({ autoPlace: false });\ndocument.getElementById('container').appendChild(cfg.domElement);\nconst folder = cfg.addFolder('配置项');\nfolder.open();\n\nconst schema = [{ attribute: 'width', label: '宽度', range: [10, 300] }];\nconst scrollbarCfg = {};\nschema.forEach((cfg) => {\n const value = breadcrumb.attributes[cfg.attribute];\n scrollbarCfg[cfg.label] = Array.isArray(value) ? value[0] : value;\n});\n\nschema.forEach((cfg) => {\n folder.add(scrollbarCfg, cfg.label, ...(cfg.range || [])).onChange((v) => {\n breadcrumb.update({ [cfg.attribute]: v });\n });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.autoWrap = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\n function _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && Symbol.iterator in Object(iter)) return Array.from(iter); }\n\n function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 0,\n y: 0,\n width: 120,\n items: [{\n text: '测试1',\n id: '1'\n }, {\n text: '测试2',\n id: '2'\n }, {\n text: '测试3',\n id: '3'\n }, {\n text: '测试4',\n id: '4'\n }, {\n text: '测试5',\n id: '5'\n }],\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb); // 初始化控制器\n\n var cfg = new dat.GUI({\n autoPlace: false\n });\n document.getElementById('container').appendChild(cfg.domElement);\n var folder = cfg.addFolder('配置项');\n folder.open();\n var schema = [{\n attribute: 'width',\n label: '宽度',\n range: [10, 300]\n }];\n var scrollbarCfg = {};\n schema.forEach(function (cfg) {\n var value = breadcrumb.attributes[cfg.attribute];\n scrollbarCfg[cfg.label] = Array.isArray(value) ? value[0] : value;\n });\n schema.forEach(function (cfg) {\n folder.add.apply(folder, [scrollbarCfg, cfg.label].concat(_toConsumableArray(cfg.range || []))).onChange(function (v) {\n breadcrumb.update(_defineProperty({}, cfg.attribute, v));\n });\n });\n});","postFrontmatter":{"en":{"title":"Breadcrumb","order":503},"zh":{"title":"面包屑","order":503}}},{"relativePath":"wip/breadcrumb/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"基础面包屑","en":"Basic breadcrumb"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 0,\n y: 0,\n items: [\n { text: '测试1', id: '1' },\n { text: '测试2', id: '2' },\n { text: '测试3', id: '3' },\n { text: '测试4', id: '4' },\n { text: '测试5', id: '5' },\n ],\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 0,\n y: 0,\n items: [{\n text: '测试1',\n id: '1'\n }, {\n text: '测试2',\n id: '2'\n }, {\n text: '测试3',\n id: '3'\n }, {\n text: '测试4',\n id: '4'\n }, {\n text: '测试5',\n id: '5'\n }],\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb);\n});","postFrontmatter":{"en":{"title":"Breadcrumb","order":503},"zh":{"title":"面包屑","order":503}}},{"relativePath":"wip/breadcrumb/demo/custom-seperator.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/custom-seperator.ts","order":1,"filename":"custom-seperator.ts","title":{"zh":"自定义分隔符面包屑","en":"Breadcrumb with custom separator"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 50,\n y: 50,\n items: [\n { text: 'AntV', id: '1' },\n { text: 'GUI', id: '2' },\n { text: 'Breadcrumb', id: '3' },\n ],\n seperator: {\n text: '>',\n },\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.customSeperator = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 50,\n y: 50,\n items: [{\n text: 'AntV',\n id: '1'\n }, {\n text: 'GUI',\n id: '2'\n }, {\n text: 'Breadcrumb',\n id: '3'\n }],\n seperator: {\n text: '>'\n },\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb);\n});","postFrontmatter":{"en":{"title":"Breadcrumb","order":503},"zh":{"title":"面包屑","order":503}}},{"relativePath":"chart-ui/poptip/demo/legend-poptip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/legend-poptip.ts","order":4,"filename":"legend-poptip.ts","title":{"zh":"连续图例气泡提示","en":"Legend Poptip"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Category, Continuous, Poptip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer,\n});\n\nconst items = [\n { id: '事例一', color: '#4982f8' },\n { id: '事例二', color: '#41d59c' },\n { id: '事例三', color: '#516587' },\n { id: '事例四', color: '#f9b41b' },\n { id: '事例五', color: '#624ef7' },\n].map(({ id, color }) => {\n return { name: id, id, state: 'selected', color };\n});\n\nconst category = new Category({\n style: {\n x: 10,\n y: 30,\n items,\n itemMarker: ({ color }) => {\n return {\n size: 10,\n marker: 'circle',\n style: {\n selected: {\n fill: color,\n },\n },\n };\n },\n spacing: [0, 0],\n maxItemWidth: 160,\n },\n});\n\ncanvas.appendChild(category);\n\nconst poptip = new Poptip({\n style: {\n offset: [0, -5],\n },\n});\n\npoptip.bind(category, (e) => {\n return {\n // 内容改变\n html: e.target.attributes.text,\n // 筛选需要的部分\n target: e.target.nodeName === 'text' ? e.target : false,\n arrowPointAtCenter: true,\n };\n});\n\nconst continuous = new Continuous({\n style: {\n y: 100,\n rail: {\n width: 300,\n height: 30,\n },\n handle: false,\n min: 0,\n max: 100,\n indicator: false,\n color: [\n '#d0e3fa',\n '#acc7f6',\n '#8daaf2',\n '#6d8eea',\n '#4d73cd',\n '#325bb1',\n '#5a3e75',\n '#8c3c79',\n '#e23455',\n '#e7655b',\n ],\n },\n});\n\ncanvas.appendChild(continuous);\n\npoptip.bind(continuous, (e) => {\n return {\n html: `${Math.round(continuous.getEventPosValue(e))}`,\n target: e.target?.name === 'railPath' ? e.target : false,\n };\n});\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.legendPoptip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 500,\n renderer: renderer\n });\n var items = [{\n id: '事例一',\n color: '#4982f8'\n }, {\n id: '事例二',\n color: '#41d59c'\n }, {\n id: '事例三',\n color: '#516587'\n }, {\n id: '事例四',\n color: '#f9b41b'\n }, {\n id: '事例五',\n color: '#624ef7'\n }].map(function (_ref) {\n var id = _ref.id,\n color = _ref.color;\n return {\n name: id,\n id: id,\n state: 'selected',\n color: color\n };\n });\n var category = new _gui.Category({\n style: {\n x: 10,\n y: 30,\n items: items,\n itemMarker: function itemMarker(_ref2) {\n var color = _ref2.color;\n return {\n size: 10,\n marker: 'circle',\n style: {\n selected: {\n fill: color\n }\n }\n };\n },\n spacing: [0, 0],\n maxItemWidth: 160\n }\n });\n canvas.appendChild(category);\n var poptip = new _gui.Poptip({\n style: {\n offset: [0, -5]\n }\n });\n poptip.bind(category, function (e) {\n return {\n // 内容改变\n html: e.target.attributes.text,\n // 筛选需要的部分\n target: e.target.nodeName === 'text' ? e.target : false,\n arrowPointAtCenter: true\n };\n });\n var continuous = new _gui.Continuous({\n style: {\n y: 100,\n rail: {\n width: 300,\n height: 30\n },\n handle: false,\n min: 0,\n max: 100,\n indicator: false,\n color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b']\n }\n });\n canvas.appendChild(continuous);\n poptip.bind(continuous, function (e) {\n var _e$target;\n\n return {\n html: \"\".concat(Math.round(continuous.getEventPosValue(e))),\n target: ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.name) === 'railPath' ? e.target : false\n };\n });\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}},{"relativePath":"chart-ui/poptip/demo/content-poptip.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/chart-ui/poptip/demo/content-poptip.ts","order":3,"filename":"content-poptip.ts","title":{"zh":"气泡提示框 自定义内容","en":"Custom Content Poptip"},"screenshot":"","source":"import { Canvas, Rect } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Poptip } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 600,\n height: 200,\n renderer,\n});\n\nconst rect = new Rect({\n style: {\n x: 0,\n y: 50,\n width: 100,\n height: 50,\n fill: 'red',\n },\n});\n\ncanvas.appendChild(rect);\n\n// 自定义内容\nconst poptip = new Poptip({\n style: {\n position: 'right',\n containerClassName: 'custom-poptip',\n domStyles: {\n '.custom-poptip': {\n height: '80px',\n width: '80px',\n 'background-color': '#fff',\n 'background-image':\n 'url(\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ\")',\n 'background-size': 'cover',\n 'border-radius': '50%',\n opacity: 1,\n },\n // 内置小箭头样式自定义\n '.custom-poptip .gui-poptip-arrow': {\n width: '6px',\n height: '6px',\n transform: 'rotate(45deg)',\n 'background-color': '#fff',\n position: 'absolute',\n },\n '.custom-text': {\n color: '#000',\n width: '200px',\n display: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n },\n },\n template: `
\n
文本内容
\n
`,\n },\n});\n\npoptip.bind(rect);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.contentPoptip = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 600,\n height: 200,\n renderer: renderer\n });\n var rect = new _g.Rect({\n style: {\n x: 0,\n y: 50,\n width: 100,\n height: 50,\n fill: 'red'\n }\n });\n canvas.appendChild(rect); // 自定义内容\n\n var poptip = new _gui.Poptip({\n style: {\n position: 'right',\n containerClassName: 'custom-poptip',\n domStyles: {\n '.custom-poptip': {\n height: '80px',\n width: '80px',\n 'background-color': '#fff',\n 'background-image': 'url(\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ\")',\n 'background-size': 'cover',\n 'border-radius': '50%',\n opacity: 1\n },\n // 内置小箭头样式自定义\n '.custom-poptip .gui-poptip-arrow': {\n width: '6px',\n height: '6px',\n transform: 'rotate(45deg)',\n 'background-color': '#fff',\n position: 'absolute'\n },\n '.custom-text': {\n color: '#000',\n width: '200px',\n display: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center'\n }\n },\n template: \"
\\n
\\u6587\\u672C\\u5185\\u5BB9
\\n
\"\n }\n });\n poptip.bind(rect);\n});","postFrontmatter":{"en":{"title":"Poptip","order":210},"zh":{"title":"Poptip","order":210}}}],"exampleSections":{"examples":[{"relativePath":"wip/breadcrumb/demo/basic.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/basic.ts","order":0,"filename":"basic.ts","title":{"zh":"基础面包屑","en":"Basic breadcrumb"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 0,\n y: 0,\n items: [\n { text: '测试1', id: '1' },\n { text: '测试2', id: '2' },\n { text: '测试3', id: '3' },\n { text: '测试4', id: '4' },\n { text: '测试5', id: '5' },\n ],\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.basic = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 0,\n y: 0,\n items: [{\n text: '测试1',\n id: '1'\n }, {\n text: '测试2',\n id: '2'\n }, {\n text: '测试3',\n id: '3'\n }, {\n text: '测试4',\n id: '4'\n }, {\n text: '测试5',\n id: '5'\n }],\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb);\n});"},{"relativePath":"wip/breadcrumb/demo/custom-seperator.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/custom-seperator.ts","order":1,"filename":"custom-seperator.ts","title":{"zh":"自定义分隔符面包屑","en":"Breadcrumb with custom separator"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 50,\n y: 50,\n items: [\n { text: 'AntV', id: '1' },\n { text: 'GUI', id: '2' },\n { text: 'Breadcrumb', id: '3' },\n ],\n seperator: {\n text: '>',\n },\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n","babeledSource":"(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui);\n global.customSeperator = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui) {\n \"use strict\";\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 50,\n y: 50,\n items: [{\n text: 'AntV',\n id: '1'\n }, {\n text: 'GUI',\n id: '2'\n }, {\n text: 'Breadcrumb',\n id: '3'\n }],\n seperator: {\n text: '>'\n },\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb);\n});"},{"relativePath":"wip/breadcrumb/demo/auto-wrap.ts","absolutePath":"/home/runner/work/GUI/GUI/examples/wip/breadcrumb/demo/auto-wrap.ts","order":2,"filename":"auto-wrap.ts","title":{"zh":"面包屑 · 宽度溢出自动换行","en":"Breadcrumb auto wrap when overflow"},"screenshot":"","source":"import { Canvas } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\nimport { Breadcrumb } from '@antv/gui';\nimport * as dat from 'dat.gui';\n\nconst renderer = new CanvasRenderer();\n\nconst canvas = new Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer,\n});\n\nconst breadcrumb = new Breadcrumb({\n style: {\n x: 0,\n y: 0,\n width: 120,\n items: [\n { text: '测试1', id: '1' },\n { text: '测试2', id: '2' },\n { text: '测试3', id: '3' },\n { text: '测试4', id: '4' },\n { text: '测试5', id: '5' },\n ],\n onClick: (id, item, items) => console.log('id: %s, item: %o, items: %o', id, item, items),\n },\n});\n\ncanvas.appendChild(breadcrumb);\n\n// 初始化控制器\nconst cfg = new dat.GUI({ autoPlace: false });\ndocument.getElementById('container').appendChild(cfg.domElement);\nconst folder = cfg.addFolder('配置项');\nfolder.open();\n\nconst schema = [{ attribute: 'width', label: '宽度', range: [10, 300] }];\nconst scrollbarCfg = {};\nschema.forEach((cfg) => {\n const value = breadcrumb.attributes[cfg.attribute];\n scrollbarCfg[cfg.label] = Array.isArray(value) ? value[0] : value;\n});\n\nschema.forEach((cfg) => {\n folder.add(scrollbarCfg, cfg.label, ...(cfg.range || [])).onChange((v) => {\n breadcrumb.update({ [cfg.attribute]: v });\n });\n});\n","babeledSource":"function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g\", \"@antv/g-canvas\", \"@antv/gui\", \"dat.gui\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g\"), require(\"@antv/g-canvas\"), require(\"@antv/gui\"), require(\"dat.gui\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g, global.gCanvas, global.gui, global.dat);\n global.autoWrap = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_g, _gCanvas, _gui, dat) {\n \"use strict\";\n\n dat = _interopRequireWildcard(dat);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\n function _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\n function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\n function _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && Symbol.iterator in Object(iter)) return Array.from(iter); }\n\n function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\n function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\n var renderer = new _gCanvas.Renderer();\n var canvas = new _g.Canvas({\n container: 'container',\n width: 300,\n height: 300,\n renderer: renderer\n });\n var breadcrumb = new _gui.Breadcrumb({\n style: {\n x: 0,\n y: 0,\n width: 120,\n items: [{\n text: '测试1',\n id: '1'\n }, {\n text: '测试2',\n id: '2'\n }, {\n text: '测试3',\n id: '3'\n }, {\n text: '测试4',\n id: '4'\n }, {\n text: '测试5',\n id: '5'\n }],\n onClick: function onClick(id, item, items) {\n return console.log('id: %s, item: %o, items: %o', id, item, items);\n }\n }\n });\n canvas.appendChild(breadcrumb); // 初始化控制器\n\n var cfg = new dat.GUI({\n autoPlace: false\n });\n document.getElementById('container').appendChild(cfg.domElement);\n var folder = cfg.addFolder('配置项');\n folder.open();\n var schema = [{\n attribute: 'width',\n label: '宽度',\n range: [10, 300]\n }];\n var scrollbarCfg = {};\n schema.forEach(function (cfg) {\n var value = breadcrumb.attributes[cfg.attribute];\n scrollbarCfg[cfg.label] = Array.isArray(value) ? value[0] : value;\n });\n schema.forEach(function (cfg) {\n folder.add.apply(folder, [scrollbarCfg, cfg.label].concat(_toConsumableArray(cfg.range || []))).onChange(function (v) {\n breadcrumb.update(_defineProperty({}, cfg.attribute, v));\n });\n });\n});"}],"API":{"node":{"fields":{"slug":"/en/examples/wip/breadcrumb/API"},"frontmatter":{"title":"","order":null},"html":"

Breadcrumb

\n
\n

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

\n
\n

Usage

\n
import { Breadcrumb } from '@antv/gui';
\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefault
xStarting point xnumber-
yStarting point ynumber-
widthContainer widthnumber-
heightContainer heightnumber-
paddingContainer paddingnumber | number[][8, 8, 8, 8]
itemsthe items of breadcrumbBreadCrumnItems-
separatorthe separator of breadcrumbseparator-
textStylecustom text stylesStyleAttr-
onClickThe handler to handle click event(event) => void-
\n

BreadCrumnItems

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefault
namelabelstring-
ididstring-
\n

separator

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefault
textSeparator contentstring | Group/
styleSeparator styleTextProps-
spacingSpace between the two sides of the separatornumber-
"}},"description":""}}},"staticQueryHashes":["192318182","1976131296","3000541721","3000541721","738567659"]}