@orbcharts/plugins-basic 3.0.0-beta.9 → 3.0.0

package/src/multiValue/plugins/{XYZoom.ts → XZoom.ts}

@@ -13,16 +13,16 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterMultiValue } from '../../../lib/core-types'
 import {
   defineMultiValuePlugin, createValueToAxisScale } from '../../../lib/core'
-import { DEFAULT_X_Y_ZOOM_PARAMS } from '../defaults'
+import { DEFAULT_X_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
 
-const pluginName = 'XYZoom'
+const pluginName = 'XZoom'
 const rectClassName = getClassName(pluginName, 'rect')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_Y_ZOOM_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_ZOOM_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_X_Y_ZOOM_PARAMS,
+  defaultParams: DEFAULT_X_ZOOM_PARAMS,
   layerIndex: LAYER_INDEX_OF_ROOT,
   validator: (params, { validateColumns }) => {
     return {
@@ -33,7 +33,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_Y_ZOO
   }
 }
 
-export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+export const XZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 
@@ -119,15 +119,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     combineLatest({
       initXAxis: initXAxis$,
       layout: observer.layout$,
-      minMaxXY: observer.minMaxXY$
+      xyMinMax: observer.xyMinMax$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
     
       const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.minMaxXY.maxX,
-        minValue: data.minMaxXY.minX,
+        maxValue: data.xyMinMax.maxX,
+        minValue: data.xyMinMax.minX,
         axisWidth: data.layout.width,
         scaleDomain: data.initXAxis.scaleDomain,
         scaleRange: data.initXAxis.scaleRange,
@@ -141,15 +141,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     combineLatest({
       initYAxis: initYAxis$,
       layout: observer.layout$,
-      minMaxXY: observer.minMaxXY$
+      xyMinMax: observer.xyMinMax$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
     
       const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.minMaxXY.maxY,
-        minValue: data.minMaxXY.minY,
+        maxValue: data.xyMinMax.maxY,
+        minValue: data.xyMinMax.minY,
         axisWidth: data.layout.height,
         scaleDomain: data.initYAxis.scaleDomain,
         scaleRange: data.initYAxis.scaleRange,
@@ -163,15 +163,15 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
   const minMaxScaleDomain$ = combineLatest({
     initXAxis: initXAxis$,
     initYAxis: initYAxis$,
-    minMaxXY: observer.minMaxXY$
+    xyMinMax: observer.xyMinMax$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      let minX = data.minMaxXY.minX
-      let maxX = data.minMaxXY.maxX
-      let minY = data.minMaxXY.minY
-      let maxY = data.minMaxXY.maxY
+      let minX = data.xyMinMax.minX
+      let maxX = data.xyMinMax.maxX
+      let minY = data.xyMinMax.minY
+      let maxY = data.xyMinMax.maxY
 
       // 原始設定為auto時要額外判斷
       if (data.initXAxis.scaleDomain[0] === 'auto' && minX > 0) {
@@ -202,7 +202,7 @@ export const XYZoom = defineMultiValuePlugin(pluginConfig)(({ selection, rootSel
     // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     fullDataFormatter: observer.fullDataFormatter$,
     // groupMax: groupMax$,
-    // minMaxXY: observer.minMaxXY$,
+    // xyMinMax: observer.xyMinMax$,
     minMaxScaleDomain: minMaxScaleDomain$,
     // layout: observer.layout$,
     // axisSize: observer.gridAxesSize$

package/src/relationship/defaults.ts

@@ -37,7 +37,8 @@ export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
   dotLabel: {
     colorType: 'primary',
     sizeFixed: false,
-    styleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+    // styleFn: (node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'
+    styleFn: (node) => ''
   },
   arrow: {
     colorType: 'primary',
@@ -47,7 +48,7 @@ export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
     styleFn: (node) => '',
   },
   arrowLabel: {
-    colorType: 'secondary',
+    colorType: 'primary',
     sizeFixed: false,
     styleFn: (node) => ''
   },
@@ -70,14 +71,14 @@ export const DEFAULT_FORCE_DIRECTED_PARAMS: ForceDirectedParams = {
   }
 }
 DEFAULT_FORCE_DIRECTED_PARAMS.dot.styleFn.toString = () => `(node) => ''`
-DEFAULT_FORCE_DIRECTED_PARAMS.dotLabel.styleFn.toString = () => `(node) => 'text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff'`
-DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(node) => ''`
-DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.dotLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
 
 export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams = {
   bubble: {
-    radiusMin: 30,
-    radiusMax: 60,
+    radiusMin: 15,
+    radiusMax: 45,
     arcScaleType: 'area',
     fillColorType: 'label',
     strokeColorType: 'label',
@@ -85,10 +86,11 @@ export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams =
     styleFn: (node) => '',
   },
   bubbleLabel: {
-    fillRate: 0.8,
+    fillRate: 0.9,
     lineHeight: 1,
-    lineLengthMin: 4,
-    colorType: 'primary',
+    maxLineLength: 6,
+    wordBreakAll: true,
+    colorType: 'labelContrast',
     styleFn: (node) => ''
   },
   arrow: {
@@ -100,13 +102,13 @@ export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams =
     styleFn: (node) => '',
   },
   arrowLabel: {
-    colorType: 'secondary',
+    colorType: 'primary',
     sizeFixed: false,
     styleFn: (node) => ''
   },
   force: {
     nodeStrength: -500, // 泡泡引力
-    linkDistance: 200, // 連結長度
+    linkDistance: 130, // 連結長度
     velocityDecay: 0.1, // 衰減數
     alphaDecay: 0.05
     // collisionSpacing: 2 // 泡泡間距
@@ -124,8 +126,8 @@ export const DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS: ForceDirectedBubblesParams =
 }
 DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubble.styleFn.toString = () => `(node) => ''`
 DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.bubbleLabel.styleFn.toString = () => `(node) => ''`
-DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(node) => ''`
-DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(node) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
+DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
 
 
 export const DEFAULT_RELATIONSHIP_LEGEND_PARAMS: RelationshipLegendParams = {
@@ -150,6 +152,7 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
   renderFn: (eventData, { styles, utils }) => {
     const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
+    const valueText = utils.toCurrency(eventData.datum.value)
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
     const categorySvg = hasCategoryLabel
@@ -161,8 +164,19 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(`${eventData.categoryLabel}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${valueText}`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 0.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</tspan>
   </text>`
 
     return `${categorySvg}
@@ -174,6 +188,7 @@ export const DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS: RelationshipTooltipParams = {
 DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
   const hasCategoryLabel = eventData.categoryLabel ? true : false
   const hasDatumLabel = eventData.datum.label ? true : false
+  const valueText = utils.toCurrency(eventData.datum.value)
   const bulletWidth = styles.textSizePx * 0.7
   const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
   const categorySvg = hasCategoryLabel
@@ -185,8 +200,19 @@ DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { sty
   const datumLabelSvg = hasDatumLabel
     ? \`<tspan>\${eventData.datum.label}</tspan>  \`
     : ''
+  const categoryLabelTextWidth = hasCategoryLabel
+    ? utils.measureTextWidth(\`\${eventData.categoryLabel}\${valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+    : 0
+  const datumLabelTextWidth = hasDatumLabel
+    ? utils.measureTextWidth(\`\${eventData.datum.label}\${valueText}\`, styles.textSizePx)
+    : 0
+  const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+  const lineEndX = hasDatumLabel
+    ? maxTextWidth + styles.textSizePx * 0.5
+    : 0
+  const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
   const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-  \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+  \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
 </text>\`
 
   return \`\${categorySvg}

package/src/relationship/plugins/ForceDirected.ts

@@ -33,7 +33,7 @@ import type {
 import {
   defineRelationshipPlugin } from '../../../lib/core'
 import type { BubblesParams, ArcScaleType, ForceDirectedParams } from '../../../lib/plugins-basic-types'
-import { getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { DEFAULT_FORCE_DIRECTED_PARAMS } from '../defaults'
 // import { renderCircleText } from '../../utils/d3Graphics'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
@@ -303,7 +303,7 @@ function translateCenterFn (d: any): string {
 function linkArcFn (d: RenderEdge): string {
   // console.log('linkArcFn', d)
   
-  // var dx = d.target.x - d.source.x,
+  // const dx = d.target.x - d.source.x,
   //     dy = d.target.y - d.source.y
   // dr讓方向線變成有弧度的
   //     dr = Math.sqrt(dx * dx + dy * dy);
@@ -317,7 +317,7 @@ function linkArcFn (d: RenderEdge): string {
 
 
 
-function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any, unknown>, fullParams: ForceDirectedParams) {
+function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any, unknown>, fullParams: ForceDirectedParams, fullChartParams: ChartParams) {
   return defsSelection
     .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
     .data([fullParams])
@@ -327,6 +327,7 @@ function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any
           .append("marker")
           .classed(defsArrowMarkerClassName, true)
           .attr('id', defsArrowMarkerId)
+          .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
           .attr("viewBox", d => `-${d.arrow.pointerWidth} -${d.arrow.pointerHeight / 2} ${d.arrow.pointerWidth} ${d.arrow.pointerHeight}`)
           .attr("orient", "auto")
         enterSelection.append("path")
@@ -411,25 +412,25 @@ function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any
 // }
 
 function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dragStatus$: BehaviorSubject<DragStatus>) {    
-  function dragstarted (event: D3DragEvent) {
-    if (!event.active) simulation.alphaTarget(0.3).restart();
-    event.subject.fx = event.subject.x;
-    event.subject.fy = event.subject.y;
+  function dragstarted (event: D3DragEvent, node: RenderNode) {
+    if (!event.active) simulation.alphaTarget(0.3).restart()
+    event.subject.fx = event.x
+    event.subject.fy = event.y
     
     dragStatus$.next('start')
   }
   
-  function dragged (event: D3DragEvent) {
-    event.subject.fx = event.x;
-    event.subject.fy = event.y;
+  function dragged (event: D3DragEvent, node: RenderNode) {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
 
     dragStatus$.next('drag')
   }
   
-  function dragended (event: D3DragEvent) {
+  function dragended (event: D3DragEvent, node: RenderNode) {
     if (!event.active) simulation.alphaTarget(0);
-    event.subject.fx = null;
-    event.subject.fy = null;
+    event.subject.fx = null
+    event.subject.fy = null
 
     dragStatus$.next('end')
   }
@@ -437,7 +438,7 @@ function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dra
   return d3.drag()
     .on("start", dragstarted)
     .on("drag", dragged)
-    .on("end", dragended);
+    .on("end", dragended)
 }
 
 function renderNodeG ({ nodeListGSelection, nodes }: {
@@ -736,7 +737,7 @@ function renderEdgeLabel ({ edgeLabelGSelection, fullParams, fullChartParams }:
 //     .each((d,i,g) => {
 //       const gSelection = d3.select(g[i])
 //       let breakAll = true
-//       if (d[textDataColumn].length <= fullParams.label.lineLengthMin) {
+//       if (d[textDataColumn].length <= fullParams.label.maxLineLength) {
 //         breakAll = false
 //       }
 //       gSelection.call(renderCircleText, {
@@ -801,6 +802,7 @@ function highlightNodes ({ nodeGSelection, edgeGSelection, highlightIds, fullCha
   highlightIds: string[]
 }) {
   nodeGSelection.interrupt('highlight')
+  edgeGSelection.interrupt('highlight')
   // console.log(highlightIds)
   if (!highlightIds.length) {
     nodeGSelection
@@ -886,10 +888,14 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
   const mouseEvent$ = new Subject<EventRelationship>()
 
   // <marker> marker selection
-  observer.fullParams$.pipe(
+  combineLatest({
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
+  }).pipe(
     takeUntil(destroy$),
-    map(fullParams => {
-      return renderArrowMarker(defsSelection, fullParams)
+    switchMap(async d => d),
+    map(({ fullParams, fullChartParams }) => {
+      return renderArrowMarker(defsSelection, fullParams, fullChartParams)
     })
   ).subscribe()
 
@@ -1006,7 +1012,7 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams
     })
-    nodeCircleSelection.call(drag(data.simulation, dragStatus$))
+    nodeGSelection.call(drag(data.simulation, dragStatus$))
 
     nodeLabelGSelection = renderNodeLabelG({
       nodeGSelection: nodeGSelection,
@@ -1122,6 +1128,7 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
   })
 
   dragStatus$.pipe(
+    distinctUntilChanged((a, b) => a === b),
     // 只有沒有托曳時才執行
     switchMap(d => iif(() => d === 'end', mouseEvent$, EMPTY))
   ).subscribe(data => {

package/src/relationship/plugins/ForceDirectedBubbles.ts

@@ -35,7 +35,7 @@ import {
   getMinMax
 } from '../../../lib/core'
 import type { BubblesParams, ArcScaleType, ForceDirectedBubblesParams } from '../../../lib/plugins-basic-types'
-import { getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { getColor, getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { DEFAULT_FORCE_DIRECTED_BUBBLES_PARAMS } from '../defaults'
 // import { renderCircleText } from '../../utils/d3Graphics'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
@@ -194,7 +194,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_FORCE_D
         lineHeight: {
           toBeTypes: ['number']
         },
-        lineLengthMin: {
+        maxLineLength: {
           toBeTypes: ['number']
         },
         colorType: {
@@ -342,7 +342,7 @@ function translateCenterFn (d: any): string {
 function linkArcFn (d: RenderEdge): string {
   // console.log('linkArcFn', d)
   
-  // var dx = d.target.x - d.source.x,
+  // const dx = d.target.x - d.source.x,
   //     dy = d.target.y - d.source.y
   // dr讓方向線變成有弧度的
   //     dr = Math.sqrt(dx * dx + dy * dy);
@@ -356,10 +356,12 @@ function linkArcFn (d: RenderEdge): string {
 
 
 
-function renderArrowMarker ({ defsSelection, markerParams, markerData }: {
+function renderArrowMarker ({ defsSelection, markerParams, markerData, fullParams, fullChartParams }: {
   defsSelection: d3.Selection<SVGDefsElement, any, any, unknown>
   markerParams: MarkerParams
   markerData: MarkerDatum[]
+  fullParams: ForceDirectedBubblesParams
+  fullChartParams: ChartParams
 }) {
   return defsSelection
     .selectAll<SVGMarkerElement, any>(`marker.${defsArrowMarkerClassName}`)
@@ -383,6 +385,7 @@ function renderArrowMarker ({ defsSelection, markerParams, markerData }: {
       }
     )
     .attr('id', d => d.id)
+    .attr('fill', d => getColor(fullParams.arrow.colorType, fullChartParams ))
     .attr("markerWidth", markerParams.pointerWidth)
     .attr("markerHeight", markerParams.pointerHeight)
     .attr('refX', d => d.refX)
@@ -450,25 +453,29 @@ function renderArrowMarker ({ defsSelection, markerParams, markerData }: {
 // }
 
 function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dragStatus$: BehaviorSubject<DragStatus>) {    
-  function dragstarted (event: D3DragEvent) {
-    if (!event.active) simulation.alphaTarget(0.3).restart();
-    event.subject.fx = event.subject.x;
-    event.subject.fy = event.subject.y;
+  function dragstarted (event: D3DragEvent, node: RenderNode) {
+    if (!event.active) {
+      simulation.alphaTarget(0.3).restart()
+    }
+    event.subject.fx = event.subject.x
+    event.subject.fy = event.subject.y
     
     dragStatus$.next('start')
   }
   
-  function dragged (event: D3DragEvent) {
-    event.subject.fx = event.x;
-    event.subject.fy = event.y;
+  function dragged (event: D3DragEvent, node: RenderNode) {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
 
     dragStatus$.next('drag')
   }
   
-  function dragended (event: D3DragEvent) {
-    if (!event.active) simulation.alphaTarget(0);
-    event.subject.fx = null;
-    event.subject.fy = null;
+  function dragended (event: D3DragEvent, node: RenderNode) {
+    if (!event.active) {
+      simulation.alphaTarget(0)
+    }
+    event.subject.fx = null
+    event.subject.fy = null
 
     dragStatus$.next('end')
   }
@@ -476,7 +483,7 @@ function drag (simulation: d3.Simulation<d3.SimulationNodeDatum, undefined>, dra
   return d3.drag()
     .on("start", dragstarted)
     .on("drag", dragged)
-    .on("end", dragended);
+    .on("end", dragended)
 }
 
 function renderNodeG ({ nodeListGSelection, nodes }: {
@@ -538,17 +545,24 @@ function renderNodeCircle ({ nodeGSelection, fullParams, fullChartParams }: {
     .attr('font-size', baseLineHeight)
     .each((d,i,g) => {
       const gSelection = d3.select(g[i])
-      let breakAll = true
-      if (d.label.length <= fullParams.bubbleLabel.lineLengthMin) {
-        breakAll = false
-      }
+      
       gSelection.call(renderCircleText, {
         text: d.label,
         radius: d.r * fullParams.bubbleLabel.fillRate,
         lineHeight: baseLineHeight * fullParams.bubbleLabel.lineHeight,
-        isBreakAll: breakAll
+        isBreakAll: d.label.length <= fullParams.bubbleLabel.maxLineLength
+          ? false
+          : fullParams.bubbleLabel.wordBreakAll
       })
 
+      // -- text color --
+      gSelection.select('text').attr('fill', _ => getDatumColor({
+        datum: d,
+        colorType: fullParams.bubbleLabel.colorType,
+        fullChartParams: fullChartParams
+      }))
+
+
     })
 
   nodeGSelection.select('text')
@@ -796,7 +810,7 @@ function renderEdgeLabel ({ edgeLabelGSelection, fullParams, fullChartParams }:
 //     .each((d,i,g) => {
 //       const gSelection = d3.select(g[i])
 //       let breakAll = true
-//       if (d[textDataColumn].length <= fullParams.label.lineLengthMin) {
+//       if (d[textDataColumn].length <= fullParams.label.maxLineLength) {
 //         breakAll = false
 //       }
 //       gSelection.call(renderCircleText, {
@@ -861,6 +875,7 @@ function highlightNodes ({ nodeGSelection, edgeGSelection, highlightIds, fullCha
   highlightIds: string[]
 }) {
   nodeGSelection.interrupt('highlight')
+  edgeGSelection.interrupt('highlight')
   // console.log(highlightIds)
   if (!highlightIds.length) {
     nodeGSelection
@@ -1196,14 +1211,19 @@ export const ForceDirectedBubbles = defineRelationshipPlugin(pluginConfig)(({ se
   combineLatest({
     defsSelection,
     markerParams: markerParams$,
-    markerData: markerData$
+    markerData: markerData$,
+    fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$
   }).pipe(
     takeUntil(destroy$),
+    switchMap(async d => d),
     map(data => {
       return renderArrowMarker({
         defsSelection,
         markerParams: data.markerParams,
-        markerData: data.markerData
+        markerData: data.markerData,
+        fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams
       })
     })
   ).subscribe()
@@ -1231,7 +1251,7 @@ export const ForceDirectedBubbles = defineRelationshipPlugin(pluginConfig)(({ se
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams
     })
-    nodeCircleSelection.call(drag(data.simulation, dragStatus$))
+    nodeGSelection.call(drag(data.simulation, dragStatus$))
 
     // nodeLabelGSelection = renderNodeLabelG({
     //   nodeGSelection: nodeGSelection,
@@ -1346,6 +1366,7 @@ export const ForceDirectedBubbles = defineRelationshipPlugin(pluginConfig)(({ se
   })
 
   dragStatus$.pipe(
+    distinctUntilChanged((a, b) => a === b),
     // 只有沒有托曳時才執行
     switchMap(d => iif(() => d === 'end', mouseEvent$, EMPTY))
   ).subscribe(data => {