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

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'
@@ -109,10 +109,16 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_FORCE_D
   layerIndex: LAYER_INDEX_OF_GRAPHIC,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
-      node: {
+      dot: {
         toBeTypes: ['object']
       },
-      edge: {
+      dotLabel: {
+        toBeTypes: ['object']
+      },
+      arrow: {
+        toBeTypes: ['object']
+      },
+      arrowLabel: {
         toBeTypes: ['object']
       },
       force: {
@@ -128,66 +134,80 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_FORCE_D
         toBeTypes: ['object']
       }
     })
-    if (params.node) {
-      const nodeResult = validateColumns(params.node, {
-        dotRadius: {
+    if (params.dot) {
+      const dotResult = validateColumns(params.dot, {
+        radius: {
           toBeTypes: ['number']
         },
-        dotFillColorType: {
+        fillColorType: {
           toBeOption: 'ColorType'
         },
-        dotStrokeColorType: {
+        strokeColorType: {
           toBeOption: 'ColorType'
         },
-        dotStrokeWidth: {
+        strokeWidth: {
           toBeTypes: ['number']
         },
-        dotStyleFn: {
+        styleFn: {
           toBeTypes: ['Function']
         },
-        labelColorType: {
+      })
+      if (dotResult.status === 'error') {
+        return dotResult
+      }
+    }
+    if (params.dotLabel) {
+      const dotLabelResult = validateColumns(params.dotLabel, {
+        colorType: {
           toBeOption: 'ColorType'
         },
-        labelSizeFixed: {
+        sizeFixed: {
           toBeTypes: ['boolean']
         },
-        labelStyleFn: {
+        styleFn: {
           toBeTypes: ['Function']
         },
       })
-      if (nodeResult.status === 'error') {
-        return nodeResult
+      if (dotLabelResult.status === 'error') {
+        return dotLabelResult
       }
     }
-    if (params.edge) {
-      const edgeResult = validateColumns(params.edge, {
-        arrowColorType: {
+    if (params.arrow) {
+      const arrowResult = validateColumns(params.arrow, {
+        colorType: {
           toBeOption: 'ColorType'
         },
-        arrowStrokeWidth: {
+        strokeWidth: {
           toBeTypes: ['number']
         },
-        arrowWidth: {
+        pointerWidth: {
           toBeTypes: ['number']
         },
-        arrowHeight: {
+        pointerHeight: {
           toBeTypes: ['number']
         },
-        arrowStyleFn: {
+        styleFn: {
           toBeTypes: ['Function']
         },
-        labelColorType: {
+      })
+      if (arrowResult.status === 'error') {
+        return arrowResult
+      }
+    }
+    if (params.arrowLabel) {
+      const arrowLabelResult = validateColumns(params.arrowLabel, {
+        colorType: {
           toBeOption: 'ColorType'
         },
-        labelSizeFixed: {
+        sizeFixed: {
           toBeTypes: ['boolean']
         },
-        labelStyleFn: {
+        styleFn: {
           toBeTypes: ['Function']
         },
       })
-      if (edgeResult.status === 'error') {
-        return edgeResult
+      if (arrowLabelResult.status === 'error') {
+        return arrowLabelResult
       }
     }
     if (params.force) {
@@ -263,7 +283,7 @@ function createSimulation (layout: Layout, fullParams: ForceDirectedParams) {
         })
     )
     .force("charge", d3.forceManyBody().strength(fullParams.force.nodeStrength))
-    .force("collision", d3.forceCollide(fullParams.node.dotRadius).strength(1))
+    .force("collision", d3.forceCollide(fullParams.dot.radius).strength(1))
     .force("center", d3.forceCenter(layout.width / 2, layout.height / 2))
 
 }
@@ -283,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);
@@ -297,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])
@@ -307,14 +327,11 @@ function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any
           .append("marker")
           .classed(defsArrowMarkerClassName, true)
           .attr('id', defsArrowMarkerId)
-          // .attr("viewBox", "0 -5 10 10")
-          // .attr("viewBox", d => `0 -${d.edge.arrowHeight / 2} ${d.edge.arrowWidth} ${d.edge.arrowHeight}`)
-          .attr("viewBox", d => `-${d.edge.arrowWidth} -${d.edge.arrowHeight / 2} ${d.edge.arrowWidth} ${d.edge.arrowHeight}`)
+          .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")
-          // .attr("d", "M0,-5L10,0L0,5")
-          // .attr("d", d => `M0,${-d.edge.arrowHeight / 2}L${d.edge.arrowWidth},0L0,${d.edge.arrowHeight / 2}`)
-          .attr("d", d => `M${-d.edge.arrowWidth},${-d.edge.arrowHeight / 2}L0,0L${-d.edge.arrowWidth},${d.edge.arrowHeight / 2}`)
+          .attr("d", d => `M${-d.arrow.pointerWidth},${-d.arrow.pointerHeight / 2}L0,0L${-d.arrow.pointerWidth},${d.arrow.pointerHeight / 2}`) // 箭頭的尖端為(0,0)
         return enterSelection
       },
       update => {
@@ -324,16 +341,16 @@ function renderArrowMarker (defsSelection: d3.Selection<SVGDefsElement, any, any
         return exit.remove()
       }
     )
-    .attr("markerWidth", d => d.edge.arrowWidth)
-    .attr("markerHeight", d => d.edge.arrowHeight)
-    // .attr("refX", d => {
-    //   return d.node.dotRadius + d.edge.arrowStrokeWidth / 2
-    // })
-    .attr('refX', d => d.node.dotRadius / d.edge.arrowStrokeWidth)
-    // .attr('refX', 0)
+    .attr("markerWidth", d => d.arrow.pointerWidth)
+    .attr("markerHeight", d => d.arrow.pointerHeight)
+    /* refX:修正marker位置（計算出和circle半徑相等的寬度）
+    (1)circle半徑需加上 strokeWidth/2 是因為框線是以 circle 的邊緣往內及往外擴展，所以 stroke 多出來的寬度是一半而已
+    (2)circle半徑需除以 path 寬度是因為「marker 的位置會受到 path 的stroke-width影響」，所以要進行修正
+    (3)- 1 是要修正奇怪的誤差（不知原因）
+    */
+    .attr('refX', d => ((d.dot.radius + (fullParams.dot.strokeWidth / 2)) / d.arrow.strokeWidth) - 1)
     .attr("refY", 0)
     
-
 }
 
 // function drag (): d3.DragBehavior<Element, unknown, unknown> {
@@ -395,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')
   }
@@ -421,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 }: {
@@ -447,9 +464,8 @@ function renderNodeG ({ nodeListGSelection, nodes }: {
     )
 }
 
-function renderNodeCircle ({ nodeGSelection, nodes, fullParams, fullChartParams }: {
-  nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
-  nodes: RenderNode[]
+function renderNodeCircle ({ nodeGSelection, fullParams, fullChartParams }: {
+  nodeGSelection: d3.Selection<SVGGElement, RenderNode, any, unknown>
   fullParams: ForceDirectedParams
   fullChartParams: ChartParams
 }) {
@@ -472,18 +488,19 @@ function renderNodeCircle ({ nodeGSelection, nodes, fullParams, fullChartParams
           return exit.remove()
         }
       )
-      .attr('r', fullParams.node.dotRadius)
-      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.node.dotFillColorType, fullChartParams }))
-      .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.node.dotStrokeColorType, fullChartParams }))
-      .attr('stroke-width', fullParams.node.dotStrokeWidth)
-      .attr('style', d => fullParams.node.dotStyleFn(d))
+      .attr('r', fullParams.dot.radius)
+      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.dot.fillColorType, fullChartParams }))
+      .attr('stroke', d => getDatumColor({ datum: d, colorType: fullParams.dot.strokeColorType, fullChartParams }))
+      .attr('stroke-width', fullParams.dot.strokeWidth)
+      .attr('style', d => fullParams.dot.styleFn(d))
   })
 
   return nodeGSelection.select<SVGCircleElement>(`circle.${nodeCircleClassName}`)
 }
 
-function renderNodeLabelG ({ nodeGSelection }: {
+function renderNodeLabelG ({ nodeGSelection, fullParams }: {
   nodeGSelection: d3.Selection<SVGGElement, any, any, unknown>
+  fullParams: ForceDirectedParams
 }) {
   nodeGSelection.each((data,i,g) => {
     const gSelection = d3.select(g[i])
@@ -504,6 +521,7 @@ function renderNodeLabelG ({ nodeGSelection }: {
           return exit.remove()
         }
       )
+      .attr('transform', `translate(0, ${- fullParams.dot.radius - 10})`)
   })
 
   return nodeGSelection.select<SVGTextElement>(`g.${nodeLabelGClassName}`)
@@ -536,9 +554,9 @@ function renderNodeLabel ({ nodeLabelGSelection, fullParams, fullChartParams }:
         }
       )
       .text(d => d.label)
-      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.node.labelColorType, fullChartParams }))
+      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.dotLabel.colorType, fullChartParams }))
       .attr('font-size', fullChartParams.styles.textSize)
-      .attr('style', d => fullParams.node.labelStyleFn(d))
+      .attr('style', d => fullParams.dotLabel.styleFn(d))
   })
 
   return nodeLabelGSelection.select<SVGTextElement>(`text.${nodeLabelClassName}`)
@@ -568,7 +586,7 @@ function renderEdgeG ({ edgeListGSelection, edges }: {
 }
 
 function renderEdgeArrowPath ({ edgeGSelection, fullParams, fullChartParams }: {
-  edgeGSelection: d3.Selection<SVGGElement, any, any, unknown>
+  edgeGSelection: d3.Selection<SVGGElement, RenderEdge, any, unknown>
   fullParams: ForceDirectedParams
   fullChartParams: ChartParams
 }) {
@@ -590,9 +608,9 @@ function renderEdgeArrowPath ({ edgeGSelection, fullParams, fullChartParams }: {
           return exit.remove()
         }
       )
-      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.edge.arrowColorType, fullChartParams }))
-      .attr('stroke-width', fullParams.edge.arrowStrokeWidth)
-      .attr('style', d => fullParams.edge.arrowStyleFn(d))
+      .attr('stroke', d => getDatumColor({ datum: d.data, colorType: fullParams.arrow.colorType, fullChartParams }))
+      .attr('stroke-width', fullParams.arrow.strokeWidth)
+      .attr('style', d => fullParams.arrow.styleFn(d))
   })
 
   return edgeGSelection.select<SVGPathElement>(`path.${edgeArrowPathClassName}`)
@@ -652,9 +670,9 @@ function renderEdgeLabel ({ edgeLabelGSelection, fullParams, fullChartParams }:
         }
       )
       .text(d => d.label)
-      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.edge.labelColorType, fullChartParams }))
+      .attr('fill', d => getDatumColor({ datum: d, colorType: fullParams.arrowLabel.colorType, fullChartParams }))
       .attr('font-size', fullChartParams.styles.textSize)
-      .attr('style', d => fullParams.edge.labelStyleFn(d))
+      .attr('style', d => fullParams.arrowLabel.styleFn(d))
   })
 
   return edgeLabelGSelection.select<SVGTextElement>(`text.${edgeLabelClassName}`)
@@ -719,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, {
@@ -784,6 +802,7 @@ function highlightNodes ({ nodeGSelection, edgeGSelection, highlightIds, fullCha
   highlightIds: string[]
 }) {
   nodeGSelection.interrupt('highlight')
+  edgeGSelection.interrupt('highlight')
   // console.log(highlightIds)
   if (!highlightIds.length) {
     nodeGSelection
@@ -868,11 +887,15 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
   const dragStatus$ = new BehaviorSubject<DragStatus>('end') // start, drag, end
   const mouseEvent$ = new Subject<EventRelationship>()
 
-  // // <marker> marker selection
-  observer.fullParams$.pipe(
+  // <marker> marker selection
+  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()
 
@@ -899,11 +922,11 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
             ${event.transform.k}
           )`)
 
-          if (data.node.labelSizeFixed && nodeLabelSelection) {
+          if (data.dotLabel.sizeFixed && nodeLabelSelection) {
             // 反向 scale 抵消掉放大縮小
             nodeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
           }
-          if (data.edge.labelSizeFixed && edgeLabelSelection) {
+          if (data.arrowLabel.sizeFixed && edgeLabelSelection) {
             // 反向 scale 抵消掉放大縮小
             edgeLabelSelection.attr('transform', `scale(${1 / event.transform.k})`)
           }
@@ -946,6 +969,7 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
     fullParams: observer.fullParams$
   }).pipe(
     takeUntil(destroy$),
+    switchMap(async d => d),
     map(data => createSimulation(data.layout, data.fullParams)),
     shareReplay(1)
   )
@@ -962,7 +986,8 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
           return d
         })
       }
-    })
+    }),
+    shareReplay(1)
   )
 
   combineLatest({
@@ -984,14 +1009,14 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
 
     nodeCircleSelection = renderNodeCircle({
       nodeGSelection: nodeGSelection,
-      nodes: data.renderData.nodes,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams
     })
-    nodeCircleSelection.call(drag(data.simulation, dragStatus$))
+    nodeGSelection.call(drag(data.simulation, dragStatus$))
 
     nodeLabelGSelection = renderNodeLabelG({
       nodeGSelection: nodeGSelection,
+      fullParams: data.fullParams
     })
 
     nodeLabelSelection = renderNodeLabel({
@@ -1024,11 +1049,11 @@ export const ForceDirected = defineRelationshipPlugin(pluginConfig)(({ selection
     data.simulation.nodes(data.renderData.nodes)
       .on('tick', () => {
         edgeArrowSelection.attr('d', linkArcFn)
-        nodeCircleSelection.attr('transform', translateFn)
-        nodeLabelGSelection.attr('transform', d => translateFn({
-          x: d.x,
-          y: d.y - data.fullParams.node.dotRadius - 10
-        }))
+        nodeGSelection.attr('transform', translateFn)
+        // nodeLabelGSelection.attr('transform', d => translateFn({
+        //   x: d.x,
+        //   y: d.y - data.fullParams.dot.radius - 10
+        // }))
         edgeLabelGSelection.attr('transform', d => translateCenterFn(d))
       })
     ;(data.simulation.force("link") as any).links(data.renderData.edges)
@@ -1103,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 => {