From 905bf24d7056bd3befdaec634100d77f0b914b8a Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Thu, 2 Nov 2023 15:14:43 +0800 Subject: [PATCH] chore: refine rebase --- .../components/ForceSimulation/Component.tsx | 30 ++++--- .../src/components/common/handlePinNode.tsx | 85 +++++++------------ .../elements/SimpleNode/registerTransform.ts | 7 +- 3 files changed, 56 insertions(+), 66 deletions(-) diff --git a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx index 30b989e17..e642d188d 100644 --- a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx +++ b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx @@ -11,39 +11,47 @@ export interface IProps { GIAC: IGIAC; autoPin: boolean; dragNodeMass: number; + pinColor: '#7E92B5'; } const ForceSimulation: React.FunctionComponent = props => { const GIAC = deepClone(props.GIAC); - const { graph, layoutInstance, layout, restartForceSimulation, stopForceSimulation } = useContext(); + const { graph, layout } = useContext(); - const isForce = layout.type === 'graphin-force' || layout.type === 'force'; + const isForce = layout.type === 'graphin-force' || layout.type === 'force' || layout.type === 'd3force'; const handleClick = () => { if (isForce) { - restartForceSimulation([]); + graph.layout({ + animated: true, + presetLayout: {}, + }); } }; - const { autoPin, dragNodeMass = 10000000000 } = props; + const { autoPin, pinColor, dragNodeMass = 1000 } = props; React.useEffect(() => { const handleNodeDragStart = () => { if (!isForce) { return; } - stopForceSimulation(); + graph.stopLayout(); }; const handleNodeDragEnd = (e: any) => { if (!isForce || !autoPin) { return; } - if (e.item) { - handlePinNode(e.item, graph, restartForceSimulation, { + if (e.itemId) { + handlePinNode(e.itemId, graph, { dragNodeMass, - x: e.x, - y: e.y, - isForce, + x: e.canvas.x, + y: e.canvas.y, + color: pinColor, + }); + graph.layout({ + animated: true, + presetLayout: {}, }); } }; @@ -56,7 +64,7 @@ const ForceSimulation: React.FunctionComponent = props => { graph.off('node:dragend', handleNodeDragEnd); graph.off('canvas:click', handleNodeDragStart); }; - }, [graph, autoPin, isForce, layoutInstance, restartForceSimulation]); + }, [graph, autoPin, isForce]); GIAC.icon = 'icon-play-circle'; GIAC.disabled = true; diff --git a/packages/gi-assets-basic/src/components/common/handlePinNode.tsx b/packages/gi-assets-basic/src/components/common/handlePinNode.tsx index 440662113..1d6bba05f 100644 --- a/packages/gi-assets-basic/src/components/common/handlePinNode.tsx +++ b/packages/gi-assets-basic/src/components/common/handlePinNode.tsx @@ -1,65 +1,42 @@ import { IGraph, icons } from '@antv/gi-sdk'; -export const handlePinNode = (target, graph, restartForceSimulation, params) => { - const { x, y, dragNodeMass, isForce } = params || {}; +export const handlePinNode = (itemId, graph, params) => { + const { x, y, color, dragNodeMass } = params || {}; - const model = target.getModel(); try { - // 目前仅支持GraphinNode 节点 - const isGraphinNode = model.type === 'graphin-circle'; - if (!isGraphinNode) { - return; - } - - const style = model.style || { badges: [] }; - const { keyshape, icon } = style; - const badges = [...style.badges]; - const index = badges.findIndex(({ value }) => value === icons.pushpin); - badges.splice(index, 1); // delete default pin badge - - badges.push({ - position: 'LB', + const pinBadge = { + text: icons.pushpin, + position: 'leftBottom', + color, fontFamily: 'iconfont', - type: 'font', - value: icons.pushpin, - size: [15, 15], - color: keyshape.fill, - fill: icon.fill, - stroke: keyshape.fill, - }); + name: 'pin', + }; + graph.updateNodePosition( + [ + { + id: itemId, + data: { + x, + y, + }, + }, + ], + true, + true, + ); - // update style - graph.updateItem(target, { - pinned: true, - mass: dragNodeMass, - style: { - badges, - }, - }); - // 如果是力导，需要重新启动 - if (isForce) { - const model = target.get('model'); - const position = x && - y && { - x, - y, - }; - const newModel = { - ...model, - ...position, - pinned: true, - forceMass: dragNodeMass, - mass: dragNodeMass, - layout: { - force: { - ...model.force, - mass: dragNodeMass, + const { badgeShapes = [] } = graph.getNodeData(itemId)?.data || {}; + if (!badgeShapes.find(badge => badge.name === 'pin')) { + badgeShapes.push(pinBadge); + graph.updateData('node', { + id: itemId, + data: { + mass: dragNodeMass, + __style: { + badgeShapes, }, }, - }; - // 重启力导 - restartForceSimulation([newModel], graph); - // simulation.restart([newModel], graph); + }); } } catch (error) { console.log('error', error); diff --git a/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts b/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts index d973e6f5c..35ec62ac5 100644 --- a/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts +++ b/packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts @@ -208,6 +208,8 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { if (reset) { preStyle = {}; } + // TODO: 若 line205 的 badges 启用，则需要从 __style 解构出传入的 badgeShapes 进行合并后给到本函数返回值 + const { keyShape: inputKeyShape, labelShape: inputLabelShape, animates, ...others } = data.__style || {}; /** 主节点 */ const keyShape = { @@ -216,6 +218,7 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { stroke: advanced.keyshape.stroke || 'red', strokeOpacity: advanced.keyshape.strokeOpacity || 1, fillOpacity: advanced.keyshape.fillOpacity, + ...inputKeyShape, }; /** 标签 */ @@ -226,6 +229,7 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { maxLines: LABEL_KEYS.length, fill: advanced.label.fill, fontSize: advanced.label.fontSize, + ...inputLabelShape, }; /** 图标 */ const iconShape = icon.visible @@ -233,7 +237,6 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { iconShape: icon, } : {}; - console.log('node.id', node.id, keyShape); return { id: node.id, data: { @@ -258,7 +261,9 @@ const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { // shapeId: 'keyShape', // }, ], + ...animates, }, + ...others, }, }; };