@orbcharts/plugins-basic 3.0.0-beta.17 → 3.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.18",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

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',
@@ -70,7 +71,7 @@ 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.dotLabel.styleFn.toString = () => `(node) => ''`
 DEFAULT_FORCE_DIRECTED_PARAMS.arrow.styleFn.toString = () => `(edge) => ''`
 DEFAULT_FORCE_DIRECTED_PARAMS.arrowLabel.styleFn.toString = () => `(edge) => ''`
 

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'
@@ -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")
@@ -887,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()
 

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'
@@ -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)
@@ -1208,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()