From 376c22b9412b07fd4073cdb967ec4df1ed709720 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Mon, 9 Dec 2024 17:34:54 +0800 Subject: [PATCH 1/5] feat: map support update (#51) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: marker,polyline 支持更新 * docs: 修改一些描述信息和配置 * chore: setting * Update settings.json * Create strange-turtles-allow.md --------- Co-authored-by: 象数 Co-authored-by: lvisei --- .changeset/strange-turtles-allow.md | 5 ++++ src/Map/Component/MapView.tsx | 20 +++++++++++++++ src/Map/Component/Marker.tsx | 33 ++++++++++++++++++++++++ src/Map/Component/Polyline.tsx | 30 ++++++++++++++++++++++ src/Map/Component/index.tsx | 5 ++++ src/Map/index.tsx | 40 ++++++++++------------------- src/utils/map/context.ts | 3 +++ src/utils/map/view.ts | 13 +++++----- 8 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 .changeset/strange-turtles-allow.md create mode 100644 src/Map/Component/MapView.tsx create mode 100644 src/Map/Component/Marker.tsx create mode 100644 src/Map/Component/Polyline.tsx create mode 100644 src/Map/Component/index.tsx diff --git a/.changeset/strange-turtles-allow.md b/.changeset/strange-turtles-allow.md new file mode 100644 index 0000000..684716d --- /dev/null +++ b/.changeset/strange-turtles-allow.md @@ -0,0 +1,5 @@ +--- +'@antv/gpt-vis': patch +--- + +feat: map support update diff --git a/src/Map/Component/MapView.tsx b/src/Map/Component/MapView.tsx new file mode 100644 index 0000000..cf77bcc --- /dev/null +++ b/src/Map/Component/MapView.tsx @@ -0,0 +1,20 @@ +import { useScene } from '@antv/larkmap'; +import { useEffect } from 'react'; +import type { Map } from '../../types/map'; +import { fitBounds, setMapStatus, setMapView } from '../../utils/map'; + +// 更新地图视野 +export default (props: Map) => { + const scene = useScene(); + useEffect(() => { + setMapView(props, scene); + }, []); + useEffect(() => { + setMapStatus(props, scene); + }, [props.enableRotate, props.enableScroll, props.enableZoom]); + useEffect(() => { + fitBounds(props, scene); + }, [props.includePoints, props.markers, props.polyline, props.includePadding]); + + return null; +}; diff --git a/src/Map/Component/Marker.tsx b/src/Map/Component/Marker.tsx new file mode 100644 index 0000000..8505f02 --- /dev/null +++ b/src/Map/Component/Marker.tsx @@ -0,0 +1,33 @@ +import type { ILayer } from '@antv/l7'; +import { useScene } from '@antv/larkmap'; +import { useEffect, useState } from 'react'; +import type { Map } from '../../types/map'; +import { setMapContext, setMarkers } from '../../utils/map'; +// 渲染标记点 +export default (props: Map) => { + const scene = useScene(); + const [layers, setLayers] = useState([]); + const removeLayers = () => { + layers.forEach((item) => { + scene.removeLayer(item); + }); + }; + useEffect(() => { + if (!props.markers) return; + // 异步调用 + setMapContext(props, scene)?.then(() => { + // 初始化资源 + const markerLayer = setMarkers(props.markers || []); + removeLayers(); + markerLayer.forEach((item) => { + scene.addLayer(item); + }); + setLayers(markerLayer); + }); + return () => { + removeLayers(); + }; + }, [props.markers]); + + return null; +}; diff --git a/src/Map/Component/Polyline.tsx b/src/Map/Component/Polyline.tsx new file mode 100644 index 0000000..e42130a --- /dev/null +++ b/src/Map/Component/Polyline.tsx @@ -0,0 +1,30 @@ +import type { ILayer } from '@antv/l7'; +import { useScene } from '@antv/larkmap'; +import { useEffect, useState } from 'react'; +import type { Map } from '../../types/map'; +import { setPolyline } from '../../utils/map'; +// 渲染线图层 +export default (props: Map) => { + const scene = useScene(); + const [layers, setLayers] = useState([]); + const removeLayers = () => { + layers.forEach((item) => { + scene.removeLayer(item); + }); + }; + useEffect(() => { + if (!props.polyline) return; + const lineLayers = setPolyline(props.polyline || []); + removeLayers(); + lineLayers.forEach((item) => { + scene.addLayer(item); + }); + setLayers(lineLayers); + + return () => { + removeLayers(); + }; + }, [props.polyline]); + + return null; +}; diff --git a/src/Map/Component/index.tsx b/src/Map/Component/index.tsx new file mode 100644 index 0000000..29eef7d --- /dev/null +++ b/src/Map/Component/index.tsx @@ -0,0 +1,5 @@ +import MapView from './MapView'; +import Marker from './Marker'; +import Polyline from './Polyline'; + +export { MapView, Marker, Polyline }; diff --git a/src/Map/index.tsx b/src/Map/index.tsx index 2bf0821..441e153 100644 --- a/src/Map/index.tsx +++ b/src/Map/index.tsx @@ -1,37 +1,18 @@ -import type { ILayer, Scene } from '@antv/l7'; import { LarkMap } from '@antv/larkmap'; -import React, { type FC } from 'react'; +import React, { useMemo, type FC } from 'react'; import type { BaseMapProps } from '../types'; -import { formatMapStyle, setMapContext, setMapView, setMarkers, setPolyline } from '../utils/map'; +import { formatMapStyle } from '../utils/map'; +import { MapView, Marker, Polyline } from './Component/'; export type MapProps = Omit, 'data'>; const Map: FC = (props) => { const { className, containerStyle, children } = props; - const allLayers: ILayer[] = []; - const mapConfig = formatMapStyle(props); - - const onSceneLoaded = async (scene: Scene) => { - // 初始地图视野 - setMapView(props, scene); - // 初始化地图资源和状态 - await setMapContext(props, scene); - - // 添加线图层 - if (props.polyline) { - const polylineLayer = setPolyline(props.polyline || []); - allLayers.push(...polylineLayer); - } - - // 添加标记 - if (props.markers) { - const markerLayer = setMarkers(props.markers || []); - allLayers.push(...markerLayer); + const mapConfig = useMemo(() => formatMapStyle(props), [props]); + const onSceneLoaded = async () => { + if (props.onInitComplete) { + props.onInitComplete(); } - - allLayers.forEach((item) => { - scene.addLayer(item); - }); }; return ( @@ -41,6 +22,13 @@ const Map: FC = (props) => { {...mapConfig} onSceneLoaded={onSceneLoaded} > + {/* 设置地图状态 */} + + {/* 初始化图片，并加载 Marker */} + + {/* 初始化线，并加载 Polyline */} + + {children} ); diff --git a/src/utils/map/context.ts b/src/utils/map/context.ts index 956551c..d3eb817 100644 --- a/src/utils/map/context.ts +++ b/src/utils/map/context.ts @@ -14,6 +14,9 @@ export function setMapContext(props: Map, scene: Scene) { return Promise.all( Array.from(icons.values()).map(async (url: string) => { const id = urlToMarkerId(url); + if (scene.hasImage(id)) { + return; + } return await scene.addImage(id, url); }), ); diff --git a/src/utils/map/view.ts b/src/utils/map/view.ts index 2eddd22..eb716d0 100644 --- a/src/utils/map/view.ts +++ b/src/utils/map/view.ts @@ -32,7 +32,11 @@ function fitIncludePoints( } export const setMapView = (props: Map, scene: Scene) => { - // 单个点,多个点 + fitBounds(props, scene); + setMapStatus(props, scene); +}; + +export const fitBounds = (props: Map, scene: Scene) => { if (props.includePoints) { fitIncludePoints(props.includePoints, scene, props.includePadding); } else { @@ -53,7 +57,9 @@ export const setMapView = (props: Map, scene: Scene) => { fitIncludePoints(points, scene, props.includePadding); } } +}; +export const setMapStatus = (props: Map, scene: Scene) => { if (props.enableZoom !== undefined) { scene.setMapStatus({ zoomEnable: props.enableZoom, @@ -69,9 +75,4 @@ export const setMapView = (props: Map, scene: Scene) => { dragEnable: props.enableScroll, }); } - - if (props.onInitComplete) { - scene.off('loaded', props.onInitComplete); - scene.on('loaded', props.onInitComplete); - } }; From 72e0427846816b7472a6c4ac8770535e164813ed Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 9 Dec 2024 09:46:00 +0000 Subject: [PATCH 2/5] chore: version (#52) --- .changeset/strange-turtles-allow.md | 5 ----- CHANGELOG.md | 6 ++++++ package.json | 2 +- src/version.ts | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) delete mode 100644 .changeset/strange-turtles-allow.md diff --git a/.changeset/strange-turtles-allow.md b/.changeset/strange-turtles-allow.md deleted file mode 100644 index 684716d..0000000 --- a/.changeset/strange-turtles-allow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@antv/gpt-vis': patch ---- - -feat: map support update diff --git a/CHANGELOG.md b/CHANGELOG.md index f092411..b97e6b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @antv/gpt-vis +## 0.3.3 + +### Patch Changes + +- [#51](https://github.com/antvis/GPT-Vis/pull/51) [`376c22b`](https://github.com/antvis/GPT-Vis/commit/376c22b9412b07fd4073cdb967ec4df1ed709720) Thanks [@lzxue](https://github.com/lzxue)! - feat: map support update + ## 0.3.2 ### Patch Changes diff --git a/package.json b/package.json index 9944289..88843d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/gpt-vis", - "version": "0.3.2", + "version": "0.3.3", "description": "Components for GPTs, generative AI, and LLM projects. Not only UI Components.", "keywords": [ "antv", diff --git a/src/version.ts b/src/version.ts index 134cd82..2c76bef 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '0.3.2'; +export default '0.3.3'; From 694773d504e55f4f7c248b30714e6f0a4ce72b60 Mon Sep 17 00:00:00 2001 From: Yuxin <55794321+yvonneyx@users.noreply.github.com> Date: Thu, 12 Dec 2024 15:53:56 +0800 Subject: [PATCH 3/5] refactor: adjust graph config priority (#56) * refactor: adjust graph config priority * chore: changeset --- .changeset/eighty-zebras-hug.md | 5 +++ package.json | 44 +++++++++++++-------------- src/ConfigProvider/hooks/useConfig.ts | 8 +++-- src/FlowDiagram/index.tsx | 8 ++--- 4 files changed, 36 insertions(+), 29 deletions(-) create mode 100644 .changeset/eighty-zebras-hug.md diff --git a/.changeset/eighty-zebras-hug.md b/.changeset/eighty-zebras-hug.md new file mode 100644 index 0000000..45580cd --- /dev/null +++ b/.changeset/eighty-zebras-hug.md @@ -0,0 +1,5 @@ +--- +'@antv/gpt-vis': patch +--- + +refactor: adjust graph options priority diff --git a/package.json b/package.json index 88843d2..a45f527 100644 --- a/package.json +++ b/package.json @@ -53,52 +53,52 @@ "publish-package": "pnpm build && changeset publish" }, "dependencies": { - "@ant-design/graphs": "^2.0.1", - "@ant-design/icons": "^5.4.0", - "@ant-design/plots": "^2.2.5", - "@antv/l7": "^2.22.0", + "@ant-design/graphs": "^2.0.2", + "@ant-design/icons": "^5.5.2", + "@ant-design/plots": "^2.3.2", + "@antv/l7": "^2.22.3", "@antv/larkmap": "^1.5.1", - "@babel/runtime": "^7.18.0", + "@babel/runtime": "^7.26.0", "lodash": "^4.17.21", "react-markdown": "^9.0.1", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.0", - "styled-components": "^6.0.7" + "styled-components": "^6.1.13" }, "devDependencies": { - "@ant-design/x": "^1.0.1", + "@ant-design/x": "^1.0.2", "@changesets/changelog-github": "^0.5.0", - "@changesets/cli": "^2.27.9", - "@commitlint/cli": "^19.5.0", - "@commitlint/config-conventional": "^19.5.0", + "@changesets/cli": "^2.27.10", + "@commitlint/cli": "^19.6.0", + "@commitlint/config-conventional": "^19.6.0", "@types/jest": "^29.5.14", "@types/lodash": "^4.17.13", - "@types/react": "^18.0.0", + "@types/react": "^18.3.16", "@types/webpack-bundle-analyzer": "^4.7.0", - "antd": "^5.0.0", - "dumi": "^2.4.13", - "eslint": "^9.14.0", + "antd": "^5.22.4", + "dumi": "^2.4.16", + "eslint": "^9.16.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-jest": "^28.9.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-react": "^7.37.2", - "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-hooks": "^5.1.0", "father": "^4.5.1", "gh-pages": "^6.2.0", - "globals": "^15.12.0", - "husky": "^9.1.6", + "globals": "^15.13.0", + "husky": "^9.1.7", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "limit-size": "^0.1.4", - "lint-staged": "^15.2.10", + "lint-staged": "^15.2.11", "npm-run-all": "^4.1.5", - "prettier": "^3.3.3", + "prettier": "^3.4.2", "prettier-plugin-organize-imports": "^4.1.0", - "react": "^18.0.0", + "react": "^18.3.1", "ts-jest": "^29.2.5", "ts-node": "^10.9.2", - "typescript": "^5.6.3", - "typescript-eslint": "^8.13.0", + "typescript": "^5.7.2", + "typescript-eslint": "^8.18.0", "webpack-bundle-analyzer": "^4.10.2" }, "peerDependencies": { diff --git a/src/ConfigProvider/hooks/useConfig.ts b/src/ConfigProvider/hooks/useConfig.ts index 1134a9d..86fb7a0 100644 --- a/src/ConfigProvider/hooks/useConfig.ts +++ b/src/ConfigProvider/hooks/useConfig.ts @@ -86,8 +86,12 @@ function useGraphGlobalConfig(name: Charts) { return mergeGraphOptions(graphConfig, componentConfig || {}); } -export function useGraphConfig(name: Charts, ...configs: Partial[]) { +export function useGraphConfig( + name: Charts, + defaultConfig: Partial, + props: Partial, +) { const globalConfig = useGraphGlobalConfig(name); - return mergeGraphOptions(globalConfig, ...configs); + return mergeGraphOptions(defaultConfig, globalConfig, props); } diff --git a/src/FlowDiagram/index.tsx b/src/FlowDiagram/index.tsx index 60e96b2..2fec447 100644 --- a/src/FlowDiagram/index.tsx +++ b/src/FlowDiagram/index.tsx @@ -3,6 +3,7 @@ import { FlowGraph as ADCFlowGraph, RCNode } from '@ant-design/graphs'; import React, { useMemo } from 'react'; import { useGraphConfig } from '../ConfigProvider/hooks'; import type { GraphProps } from '../types'; +import { mergeGraphOptions } from '../utils/config'; import { visGraphData2GraphData } from '../utils/graph'; import { getGraphOptionsByData } from './helper'; @@ -12,7 +13,7 @@ export interface FlowDiagramProps extends GraphProps {} const defaultConfig: FlowGraphOptions = { autoResize: true, - autoFit: 'center', + autoFit: 'view', node: { style: { component: (d: G6.NodeData) => { @@ -32,7 +33,6 @@ const defaultConfig: FlowGraphOptions = { }, size: [140, 32], }, - animation: { enter: false }, }, edge: { style: { @@ -49,7 +49,6 @@ const defaultConfig: FlowGraphOptions = { stroke: '#001f98', }, }, - animation: { enter: false }, }, behaviors: (prev) => [ ...prev, @@ -72,8 +71,7 @@ const FlowDiagram: React.FC = (props) => { const config = useGraphConfig( 'FlowDiagram', - defaultConfig, - getGraphOptionsByData(data), + mergeGraphOptions(defaultConfig, getGraphOptionsByData(data)), restProps, ); From 9965c163eb963255a6438fced1aa12b7f5f9c2ee Mon Sep 17 00:00:00 2001 From: lvisei Date: Thu, 12 Dec 2024 16:26:52 +0800 Subject: [PATCH 4/5] fix: config plot axis (#53) * fix: config plot axis * chore: changeset --- .changeset/shy-singers-reply.md | 5 +++++ src/ConfigProvider/hooks/useConfig.ts | 7 +++---- src/utils/plot.ts | 23 +++++++++++++---------- 3 files changed, 21 insertions(+), 14 deletions(-) create mode 100644 .changeset/shy-singers-reply.md diff --git a/.changeset/shy-singers-reply.md b/.changeset/shy-singers-reply.md new file mode 100644 index 0000000..09b2dc2 --- /dev/null +++ b/.changeset/shy-singers-reply.md @@ -0,0 +1,5 @@ +--- +'@antv/gpt-vis': patch +--- + +fix: config plot axis diff --git a/src/ConfigProvider/hooks/useConfig.ts b/src/ConfigProvider/hooks/useConfig.ts index 86fb7a0..157bc59 100644 --- a/src/ConfigProvider/hooks/useConfig.ts +++ b/src/ConfigProvider/hooks/useConfig.ts @@ -36,16 +36,15 @@ export function usePlotConfig( defaultConfig: Partial | ((props: Partial) => Partial), props: Partial, ): Partial { - const transformedProps = transform2ADCProps(props); + const globalConfig = usePlotGlobalConfig(name); + const mergedProps = { ...globalConfig, ...props }; + const transformedProps = transform2ADCProps(mergedProps); const _defaultConfig = typeof defaultConfig === 'function' ? defaultConfig(transformedProps) : defaultConfig; - const globalConfig = usePlotGlobalConfig(name); - const config = { ..._defaultConfig, - ...globalConfig, ...transformedProps, }; diff --git a/src/utils/plot.ts b/src/utils/plot.ts index f7a65fb..e06f986 100644 --- a/src/utils/plot.ts +++ b/src/utils/plot.ts @@ -1,4 +1,4 @@ -import { isUndefined } from 'lodash'; +import { get } from 'lodash'; const ADC_ENCODE_FIELDS = new Map([ ['x', 'xField'], @@ -33,20 +33,23 @@ function visG2Encode2ADCEncode>(config: T) { * 将缩写的 axisTitle 转换为 G2 axis 配置 */ function axisTitle2G2axis>(config: T) { - const { axisXTitle, axisYTitle, axis } = config; - - if (!isUndefined(axis)) return config; - - const _config = { axis: {}, ...config }; + const { axisXTitle, axisYTitle } = config; + const _config: T = { axis: {}, ...config }; if (axisXTitle) { - // @ts-expect-error - _config.axis.x = { title: axisXTitle }; + if (get(_config, 'axis.x')) { + _config.axis.x.title = axisXTitle; + } else { + _config.axis.x = { title: axisXTitle }; + } } if (axisYTitle) { - // @ts-expect-error - _config.axis.y = { title: axisYTitle }; + if (get(_config, 'axis.y')) { + _config.axis.y.title = axisYTitle; + } else { + _config.axis.y = { title: axisYTitle }; + } } return _config; From 24bb11437baaef48ab15db2e2d51378d008b571a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 12 Dec 2024 08:40:03 +0000 Subject: [PATCH 5/5] chore: version (#58) --- .changeset/eighty-zebras-hug.md | 5 ----- .changeset/shy-singers-reply.md | 5 ----- CHANGELOG.md | 8 ++++++++ package.json | 2 +- src/version.ts | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) delete mode 100644 .changeset/eighty-zebras-hug.md delete mode 100644 .changeset/shy-singers-reply.md diff --git a/.changeset/eighty-zebras-hug.md b/.changeset/eighty-zebras-hug.md deleted file mode 100644 index 45580cd..0000000 --- a/.changeset/eighty-zebras-hug.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@antv/gpt-vis': patch ---- - -refactor: adjust graph options priority diff --git a/.changeset/shy-singers-reply.md b/.changeset/shy-singers-reply.md deleted file mode 100644 index 09b2dc2..0000000 --- a/.changeset/shy-singers-reply.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@antv/gpt-vis': patch ---- - -fix: config plot axis diff --git a/CHANGELOG.md b/CHANGELOG.md index b97e6b8..0ddb5b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/gpt-vis +## 0.3.4 + +### Patch Changes + +- [#56](https://github.com/antvis/GPT-Vis/pull/56) [`694773d`](https://github.com/antvis/GPT-Vis/commit/694773d504e55f4f7c248b30714e6f0a4ce72b60) Thanks [@yvonneyx](https://github.com/yvonneyx)! - refactor: adjust graph options priority + +- [#53](https://github.com/antvis/GPT-Vis/pull/53) [`9965c16`](https://github.com/antvis/GPT-Vis/commit/9965c163eb963255a6438fced1aa12b7f5f9c2ee) Thanks [@lvisei](https://github.com/lvisei)! - fix: config plot axis + ## 0.3.3 ### Patch Changes diff --git a/package.json b/package.json index a45f527..be7ced7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/gpt-vis", - "version": "0.3.3", + "version": "0.3.4", "description": "Components for GPTs, generative AI, and LLM projects. Not only UI Components.", "keywords": [ "antv", diff --git a/src/version.ts b/src/version.ts index 2c76bef..37244c2 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export default '0.3.3'; +export default '0.3.4';