@plait/graph-viz 0.62.0-next.7 → 0.62.0-next.9

package/force-atlas/constants.d.ts

@@ -1,15 +1,21 @@
 import { Options } from 'roughjs/bin/core';
 export declare const DEFAULT_EDGE_STYLES: Options;
-export declare const DEFAULT_NODE_SIZE = 60;
+export declare const DEFAULT_NODE_SIZE = 30;
 export declare const DEFAULT_ACTIVE_NODE_SIZE_MULTIPLIER = 1.2;
-export declare const DEFAULT_ACTIVE_WAVE_NODE_SIZE_MULTIPLIER = 1.6;
+export declare const DEFAULT_ACTIVE_WAVE_NODE_SIZE_MULTIPLIER = 1.5;
 export declare const DEFAULT_NODE_LABEL_MARGIN_TOP = 4;
 export declare const DEFAULT_NODE_LABEL_FONT_SIZE = 12;
 export declare const SECOND_DEPTH_NODE_ALPHA = 0.5;
 export declare const SECOND_DEPTH_LINE_ALPHA = 0.5;
 export declare const ACTIVE_BACKGROUND_NODE_ALPHA = 0.1;
+export declare const NODE_ICON_CLASS_NAME = "force-atlas-node-icon";
+export declare const ACTIVE_NODE_ICON_CLASS_NAME = "force-atlas-node-icon-active";
+export declare const NODE_ICON_FONT_SIZE = 16;
+export declare const ACTIVE_NODE_ICON_FONT_SIZE = 18;
+export declare const DEFAULT_NODE_BACKGROUND_COLOR = "#9c9cfb";
+export declare const DEFAULT_NODE_ICON_COLOR = "#fff";
 export declare const DEFAULT_NODE_STYLES: Options;
-export declare const DEFAULT_NODE_SCALING_RATIO = 600;
+export declare const DEFAULT_NODE_SCALING_RATIO = 20;
 export declare const DEFAULT_LINE_STYLES: {
     color: {
         0: string;

package/force-atlas/core/node-icon-base.component.d.ts

@@ -0,0 +1,10 @@
+import { PlaitBoard } from '@plait/core';
+import { ForceAtlasNodeElement } from '../../interfaces/element';
+import { NodeIconItem } from '../types';
+export declare abstract class ForceAtlasNodeIconBaseComponent {
+    iconItem: NodeIconItem;
+    board: PlaitBoard;
+    element: ForceAtlasNodeElement;
+    abstract nativeElement(): HTMLElement;
+    initialize(): void;
+}

package/force-atlas/generators/node.generator.d.ts

@@ -1,10 +1,15 @@
 import { PlaitBoard } from '@plait/core';
-import { Generator } from '@plait/common';
+import { Generator, RenderComponentRef } from '@plait/common';
 import { ForceAtlasNodeElement } from '../../interfaces';
 import { NodeGeneratorData } from '../types';
+import { NodeIconProps } from '../with-node-icon';
 export declare class ForceAtlasNodeGenerator extends Generator<ForceAtlasNodeElement, NodeGeneratorData> {
     static key: string;
     constructor(board: PlaitBoard);
     canDraw(element: ForceAtlasNodeElement): boolean;
     draw(element: ForceAtlasNodeElement, data: NodeGeneratorData): SVGGElement;
+    drawIcon(element: ForceAtlasNodeElement, data: NodeGeneratorData): {
+        ref: RenderComponentRef<NodeIconProps>;
+        iconG: SVGGElement;
+    };
 }

package/force-atlas/types.d.ts

@@ -26,3 +26,8 @@ export interface NodeGeneratorData extends GeneratorExtraData {
     isActive: boolean;
     isFirstDepth: boolean;
 }
+export interface NodeIconItem {
+    name: string;
+    fontSize?: number;
+    color?: string;
+}

package/force-atlas/utils/draw.d.ts

@@ -2,6 +2,7 @@ import { EdgeDirection } from '../types';
 import { PlaitBoard, Point } from '@plait/core';
 import { ForceAtlasNodeElement } from '../../interfaces';
 export declare function drawNode(board: PlaitBoard, node: ForceAtlasNodeElement, point: Point, options: {
+    iconG?: SVGGElement;
     isActive: boolean;
     isFirstDepth: boolean;
 }): SVGGElement;

package/force-atlas/utils/node.d.ts

@@ -8,3 +8,8 @@ export declare function isHitNode(node: ForceAtlasNodeElement, point: [Point, Po
 export declare function getAssociatedNodesById(id: string, forceAtlasElement: ForceAtlasElement): ForceAtlasNodeElement[];
 export declare function getNodeGenerator(node: ForceAtlasNodeElement): ForceAtlasNodeGenerator;
 export declare function isFirstDepthNode(currentNodeId: string, activeNodeId: string, forceAtlasElement: ForceAtlasElement): boolean;
+export declare function getNodeIcon(node: ForceAtlasNodeElement): {
+    name: string;
+    fontSize: number;
+    color: string;
+};

package/force-atlas/with-force-atlas.d.ts

@@ -1,2 +1,2 @@
 import { PlaitBoard } from '@plait/core';
-export declare const withForceAtlas: (board: PlaitBoard) => PlaitBoard;
+export declare const withForceAtlas: (board: PlaitBoard) => PlaitBoard & import("./with-node-icon").ForceAtlasNodeIconBoard;

package/force-atlas/with-node-icon.d.ts

@@ -0,0 +1,13 @@
+import { PlaitBoard } from '@plait/core';
+import { ForceAtlasNodeElement } from '../interfaces/element';
+import { RenderComponentRef } from '@plait/common';
+import { NodeIconItem } from './types';
+export interface ForceAtlasNodeIconBoard {
+    renderNodeIcon: (container: Element | DocumentFragment, props: NodeIconProps) => RenderComponentRef<NodeIconProps>;
+}
+export declare const withNodeIcon: <T extends PlaitBoard = PlaitBoard>(board: T) => T & ForceAtlasNodeIconBoard;
+export interface NodeIconProps {
+    board: PlaitBoard;
+    iconItem: NodeIconItem;
+    element: ForceAtlasNodeElement;
+}

package/interfaces/element.d.ts

@@ -1,7 +1,8 @@
 import { PlaitElement } from '@plait/core';
+import { NodeIconItem } from '../force-atlas/types';
 export interface ForceAtlasNodeElement extends PlaitElement {
     label: string;
-    icon: string;
+    icon: string | NodeIconItem;
     size?: number;
     isActive?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plait/graph-viz",
-  "version": "0.62.0-next.7",
+  "version": "0.62.0-next.9",
   "peerDependencies": {
     "graphology": "^0.25.4",
     "graphology-layout": "^0.6.1",
@@ -14,7 +14,9 @@
   "repository": "https://github.com/worktile/plait",
   "keywords": [
     "graph",
-    "force-atlas"
+    "force-atlas",
+    "knowledge-graph",
+    "network-graph"
   ],
   "module": "fesm2022/plait-graph-viz.mjs",
   "typings": "index.d.ts",

package/public-api.d.ts

@@ -1,4 +1,6 @@
 export * from './force-atlas/constants';
 export * from './force-atlas/types';
 export * from './force-atlas/with-force-atlas';
+export * from './force-atlas/with-node-icon';
 export * from './interfaces/index';
+export * from './force-atlas/core/node-icon-base.component';