36 |
37 |
38 | );
39 | }
40 |
41 | ```
--------------------------------------------------------------------------------
/docs/app/routes/docs/plugins/brush-select.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | meta:
3 | title: 框选插件 | @aoviz/graphs
4 | description: 框选插件
5 | sidebar_position: 4
6 | ---
7 |
8 | # 框选插件
9 |
10 | 按住 `shift` 键，使用鼠标进行框选
11 |
12 | ```jsx live=true template=imperative
13 | import { Force, SelectedNodesPlugin, BrushSelectPlugin, DEFAULT_LAYOUT_OPTION } from '@aoviz/graphs';
14 | import { ONE_DEGREE_BANK_DATA } from '@aoviz/mock'
15 | import { useRef, useEffect } from 'react'
16 |
17 | const option = {
18 | link:{
19 | label: {
20 | backgroundColor: 'rgba(114, 193, 209, 0.6)'
21 | }
22 | },
23 | layout: DEFAULT_LAYOUT_OPTION
24 | }
25 | export default function Viz() {
26 | const wrapper = useRef(null);
27 |
28 | useEffect(() => {
29 | const instance = new Force(wrapper.current,{ data: ONE_DEGREE_BANK_DATA, option });
30 | instance.setPlugins([new SelectedNodesPlugin(), new BrushSelectPlugin()])
31 | }, [wrapper]);
32 |
33 | return (
34 |
35 |
36 |
37 | );
38 | }
39 |
40 | ```
--------------------------------------------------------------------------------
/docs/app/components/Asides/StickyAside.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 | import { animated } from '@react-spring/web'
3 |
4 | import { useAnimatedHeader } from '~/hooks/useAnimatedHeader'
5 |
6 | import { styled } from '~/styles/stitches.config'
7 |
8 | import { getHeaderHeights } from '../Header/Header'
9 |
10 | interface StickyAsideProps {
11 | children?: ReactNode
12 | hasSubNav?: boolean
13 | }
14 |
15 | export const StickyAside = ({ children }: StickyAsideProps) => {
16 | const [styles, isStuck] = useAnimatedHeader({
17 | isHeader: false,
18 | heights: getHeaderHeights(),
19 | })
20 |
21 | return (
22 |
25 | )
26 | }
27 |
28 | const Aside = styled(animated.aside, {
29 | display: 'none',
30 | flexShrink: 1,
31 | width: '30rem',
32 | gridArea: 'aside',
33 |
34 | '@tabletUp': {
35 | display: 'block',
36 | pt: '$25',
37 | height: '100%',
38 | },
39 |
40 | variants: {
41 | isStuck: {
42 | true: {
43 | position: 'fixed',
44 | },
45 | },
46 | },
47 | })
48 |
--------------------------------------------------------------------------------
/docs/app/components/Text/Anchor.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 | import { Link } from '@remix-run/react'
3 |
4 | import { isValidHttpUrl } from '~/helpers/strings'
5 | import { styled } from '~/styles/stitches.config'
6 |
7 | export interface AnchorProps {
8 | href: string
9 | children: ReactNode
10 | className?: string
11 | }
12 |
13 | export const Anchor = ({ href, children, className }: AnchorProps) => {
14 | const isExternal = isValidHttpUrl(href)
15 |
16 | if (isExternal) {
17 | return (
18 |
46 |
47 |
48 | );
49 | }
50 |
51 | ```
--------------------------------------------------------------------------------
/docs/app/routes/docs/plugins/three-scene.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | meta:
3 | title: 三维场景 | @aoviz/graphs
4 | description: 三维场景（测试功能）
5 | sidebar_position: 6
6 | ---
7 |
8 | # 三维场景
9 |
10 | 体验 threejs 的渲染方式
11 |
12 | ```jsx live=true template=plugins
13 | import { Force, DEFAULT_LAYOUT_OPTION } from '@aoviz/graphs';
14 | import { ThreeScenePlugin } from '@aoviz/g-plugins'
15 | import { TWO_DEGREE_BANK_DATA } from '@aoviz/mock'
16 | import { useRef, useEffect } from 'react'
17 |
18 | const option = {
19 | link:{
20 | label: {
21 | backgroundColor: 'rgba(114, 193, 209, 0.6)'
22 | }
23 | },
24 | layout: {
25 | forces: [
26 | { force: 'n-body', strength: -1600, distanceMin: 30, distanceMax: 800 },
27 | { force: 'collide', strength: 0.5, radius: (d: any) => d.cfg?.radius || 20, iterations: 1 },
28 | { force: 'link', id: (d) => d.id, distance: 200 },
29 | { force: 'x', x: 0 },
30 | { force: 'y', y: 0 },
31 | { force: 'center', x: 0, y: 0 }
32 | ]
33 | }
34 | }
35 | export default function Viz() {
36 | const wrapper = useRef(null);
37 |
38 | useEffect(() => {
39 | const instance = new Force(wrapper.current,{ data: TWO_DEGREE_BANK_DATA, option });
40 | instance.setPlugins([new ThreeScenePlugin()])
41 | }, [wrapper]);
42 |
43 | return (
44 |
45 |
46 |
47 | );
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/packages/graphs/src/draws/draw-node-style.ts:
--------------------------------------------------------------------------------
1 | import { isArray, isNumber } from 'lodash-es';
2 | import { INodeStyle } from '../force';
3 |
4 | export function drawNodeStyle(ctx: CanvasRenderingContext2D, style: INodeStyle, scale = 1) {
5 | const {
6 | color,
7 | borderColor,
8 | borderWidth,
9 | borderType,
10 | borderDashOffset,
11 | borderCap = 'butt',
12 | borderJoin = 'bevel',
13 | borderMiterLimit = 10,
14 | shadowColor,
15 | shadowBlur,
16 | shadowOffsetX,
17 | shadowOffsetY
18 | } = style;
19 | ctx.save();
20 | if (isNumber(shadowOffsetY)) ctx.shadowOffsetY = shadowOffsetY;
21 | if (isNumber(shadowOffsetX)) ctx.shadowOffsetX = shadowOffsetX;
22 | if (isNumber(shadowBlur)) ctx.shadowBlur = shadowBlur * scale;
23 | if (shadowColor) ctx.shadowColor = shadowColor;
24 | ctx.miterLimit = borderMiterLimit;
25 | ctx.lineJoin = borderJoin;
26 | ctx.lineCap = borderCap;
27 | if (isNumber(borderDashOffset)) ctx.lineDashOffset = borderDashOffset;
28 | if (borderType === 'dashed') {
29 | const v = borderWidth || 1;
30 | ctx.setLineDash([v, v]);
31 | }
32 | if (isArray(borderType)) ctx.setLineDash(borderType);
33 | if (borderWidth) ctx.lineWidth = borderWidth;
34 | if (borderColor) {
35 | ctx.strokeStyle = borderColor;
36 | ctx.stroke();
37 | }
38 | if (color) {
39 | ctx.fillStyle = color;
40 | ctx.fill();
41 | }
42 | ctx.restore();
43 | }
44 |
--------------------------------------------------------------------------------
/docs/app/components/Buttons/GradientButton.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 | import { dark, styled } from '~/styles/stitches.config'
3 |
4 | interface GradientButtonProps {
5 | href: string
6 | children: ReactNode
7 | }
8 |
9 | export const GradientButton = ({ href, children }: GradientButtonProps) => {
10 | return (
11 |
14 | )
15 | }
16 |
17 | const Button = styled('a', {
18 | color: '$steel100',
19 | borderRadius: '$r8',
20 | p: 2,
21 | backgroundClip: 'content-box',
22 | position: 'relative',
23 | fontSize: '$XXS',
24 | lineHeight: '$XXS',
25 | display: 'inline-block',
26 | zIndex: 0,
27 |
28 | '&:before': {
29 | content: '',
30 | width: '100%',
31 | height: '100%',
32 | position: 'absolute',
33 | left: 0,
34 | right: 0,
35 | top: 0,
36 | bottom: 0,
37 | zIndex: -1,
38 | borderRadius: 'inherit',
39 | background: '$redYellowGradient100',
40 | transition: 'filter 250ms ease-out',
41 | },
42 |
43 | [`.${dark} &:before`]: {
44 | background: '$blueGreenGradient100',
45 | },
46 |
47 | '& > span': {
48 | p: '$10 $15',
49 | display: 'block',
50 | backgroundColor: '$white',
51 | borderRadius: 'inherit',
52 | },
53 |
54 | '&:hover:before': {
55 | filter: 'brightness(120%)',
56 | },
57 |
58 | [`.${dark} &:hover:before`]: {
59 | filter: 'brightness(140%)',
60 | },
61 | })
62 |
--------------------------------------------------------------------------------
/docs/app/components/Header/HeaderSubNavigation.tsx:
--------------------------------------------------------------------------------
1 | import { DiscordLogo, GithubLogo, Lifebuoy } from 'phosphor-react'
2 | import { EventNames, firePlausibleEvent } from '~/helpers/analytics'
3 |
4 | import { NavigationButton, NavigationButtonProps } from '../Buttons/NavButton'
5 |
6 | const SUB_NAV: NavigationButtonProps[] = [
7 | {
8 | title: 'Github',
9 | href: 'https://github.com/Aoviz-Team/graphs',
10 | isExternal: true,
11 | Icon: GithubLogo,
12 | },
13 | // {
14 | // title: 'Discord',
15 | // href: 'https://discord.com/invite/poimandres',
16 | // isExternal: true,
17 | // Icon: DiscordLogo,
18 | // },
19 | // {
20 | // title: 'Support',
21 | // href: 'https://opencollective.com/react-spring',
22 | // isExternal: true,
23 | // Icon: Lifebuoy,
24 | // },
25 | ]
26 |
27 | export interface HeaderSubNavigationProps {
28 | showLabels?: boolean
29 | }
30 |
31 | export const HeaderSubNavigation = ({
32 | showLabels = false,
33 | }: HeaderSubNavigationProps) => {
34 | const handleClick = (label: string) => () => {
35 | firePlausibleEvent({
36 | name: EventNames.OutboundLink,
37 | additionalProps: {
38 | linkTitle: label,
39 | },
40 | })
41 | }
42 |
43 | return (
44 | <>
45 | {SUB_NAV.map(props => (
46 |
49 |
50 |
51 | )
52 | }
53 |
54 | ```
55 |
56 | ## 参数配置
57 |
58 | import { FORCE_WATERMARK_PLUGIN_DATA } from '~/data/force'
59 | import { TablesConfiguration } from '~/components/Tables/TablesConfig'
60 |
61 |
51 |
52 |
53 | );
54 | }
55 |
56 | ```
57 |
58 | ## 参数配置
59 |
60 | 样式配置继承 `INodeStyle`
61 |
62 | import { FORCE_FISHEYE_PLUGIN_DATA } from '~/data/force'
63 | import { TablesConfiguration } from '~/components/Tables/TablesConfig'
64 |
65 | 53 | Use our imperative API methods to run animations without updating state. 54 | Repsond to events without the react rendering overhead to achieve 55 | smooth, fluid animation. 56 |
57 |-
50 | {data.map(datum => (
51 |
- {`${datum[0]} –`} 53 |
- {datum[1]} 54 |
52 |
55 | ))}
56 |
69 |
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/packages/graphs/src/force/force.ts:
--------------------------------------------------------------------------------
1 | import { select } from 'd3-selection';
2 | import { cloneDeep, merge } from 'lodash-es';
3 | import { distinct, distinctUntilChanged } from 'rxjs';
4 | import { DEFAULT_OPTION } from './config';
5 | import { Controller } from './cores/controller';
6 | import { IForceData, IOption } from './interface';
7 | import { Plugin } from './plugins/plugin';
8 |
9 | export class Force
72 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/docs/app/components/Logo.tsx:
--------------------------------------------------------------------------------
1 | import { Easing, Tween, update } from '@tweenjs/tween.js'
2 | import { useEffect, useState } from 'react'
3 |
4 | export const Logo = () => {
5 | const [stopColor1, setStopColor1] = useState('#31DBFE')
6 | const [stopColor2, setStopColor2] = useState('#BE6AFF')
7 | useEffect(() => {
8 | let isUpdate = true
9 | const animate = (time?) => {
10 | update(time)
11 | if(isUpdate)requestAnimationFrame(animate)
12 |
13 | }
14 | animate()
15 | const t = new Tween({ color1: { r: 49, g: 219, b: 254 }, color2: { r: 190, g: 106, b: 255 } }).to({ color1: { r: 190, g: 106, b: 255 }, color2: { r: 49, g: 219, b: 254 } }).easing(Easing.Quadratic.InOut).yoyo(true).repeat(Infinity).onUpdate((d: any) => {
16 | setStopColor1(`rgb(${d.color1.r},${d.color1.g},${d.color1.b})`);
17 | setStopColor2(`rgb(${d.color2.r},${d.color2.g},${d.color2.b})`)
18 | }).start()
19 | return ()=>{
20 | isUpdate = false;
21 | t.stop()
22 | }
23 | }, [])
24 | return
33 | }
--------------------------------------------------------------------------------
/docs/scripts/mdx/rehype-highlight-line.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Credit to https://ped.ro/writing/code-blocks-but-better
3 | */
4 |
5 | const hastToHtml = require('hast-util-to-html')
6 | const unified = require('unified')
7 | const parse = require('rehype-parse')
8 |
9 | const lineNumberify = function lineNumberify(ast, lineNum = 1) {
10 | let lineNumber = lineNum
11 | return ast.reduce(
12 | (result, node) => {
13 | if (node.type === 'text') {
14 | if (node.value.indexOf('\n') === -1) {
15 | node.lineNumber = lineNumber
16 | result.nodes.push(node)
17 | return result
18 | }
19 |
20 | const lines = node.value.split('\n')
21 | for (let i = 0; i < lines.length; i++) {
22 | if (i !== 0) ++lineNumber
23 | if (i === lines.length - 1 && lines[i].length === 0) continue
24 | result.nodes.push({
25 | type: 'text',
26 | value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
27 | lineNumber: lineNumber,
28 | })
29 | }
30 |
31 | result.lineNumber = lineNumber
32 | return result
33 | }
34 |
35 | if (node.children) {
36 | node.lineNumber = lineNumber
37 | const processed = lineNumberify(node.children, lineNumber)
38 | node.children = processed.nodes
39 | result.lineNumber = processed.lineNumber
40 | result.nodes.push(node)
41 | return result
42 | }
43 |
44 | result.nodes.push(node)
45 | return result
46 | },
47 | { nodes: [], lineNumber: lineNumber }
48 | )
49 | }
50 |
51 | const wrapLines = (ast, linesToHighlight) => {
52 | const highlightAll =
53 | linesToHighlight.length === 1 && linesToHighlight[0] === 0
54 | const allLines = Array.from(new Set(ast.map(x => x.lineNumber)))
55 | let i = 0
56 | const wrapped = allLines.reduce((nodes, marker) => {
57 | const line = marker
58 | const children = []
59 | for (; i < ast.length; i++) {
60 | if (ast[i].lineNumber < line) {
61 | nodes.push(ast[i])
62 | continue
63 | }
64 |
65 | if (ast[i].lineNumber === line) {
66 | children.push(ast[i])
67 | continue
68 | }
69 |
70 | if (ast[i].lineNumber > line) {
71 | break
72 | }
73 | }
74 |
75 | nodes.push({
76 | type: 'element',
77 | tagName: 'div',
78 | properties: {
79 | dataLine: line,
80 | className: 'highlight-line',
81 | dataHighlighted:
82 | linesToHighlight.includes(line) || highlightAll ? 'true' : 'false',
83 | },
84 | children: children,
85 | lineNumber: line,
86 | })
87 |
88 | return nodes
89 | }, [])
90 |
91 | return wrapped
92 | }
93 |
94 | // https://github.com/gatsbyjs/gatsby/pull/26161/files
95 | const MULTILINE_TOKEN_SPAN = /[^<]*\n[^<]*<\/span>/g
96 |
97 | const applyMultilineFix = function (ast) {
98 | // AST to HTML
99 | let html = hastToHtml(ast)
100 |
101 | // Fix JSX issue
102 | html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
103 | match.replace(/\n/g, `\n`)
104 | )
105 |
106 | // HTML to AST
107 | const hast = unified()
108 | .use(parse, { emitParseErrors: true, fragment: true })
109 | .parse(html)
110 |
111 | return hast.children
112 | }
113 |
114 | module.exports = function (ast, lines) {
115 | const formattedAst = applyMultilineFix(ast)
116 | const numbered = lineNumberify(formattedAst).nodes
117 |
118 | return wrapLines(numbered, lines)
119 | }
120 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "aoviz",
3 | "version": "0.0.13",
4 | "description": "d3 graphs force knowledge 力导向图",
5 | "main": "dist/index.js",
6 | "module": "es/index.js",
7 | "types": "dist/index.d.ts",
8 | "repository": "https://github.com/Aoviz-Team/graphs",
9 | "author": "Steven",
10 | "license": "MIT",
11 | "type": "module",
12 | "private": true,
13 | "scripts": {
14 | "build": "yarn workspace @aoviz/graphs build && yarn workspace @aoviz/mock build && yarn workspace @aoviz/g-plugins build",
15 | "build:graphs": "yarn workspace @aoviz/graphs build",
16 | "docs:dev": "yarn workspace @aoviz/docs dev",
17 | "docs:build": "yarn workspace @aoviz/docs build",
18 | "storybook": "start-storybook -p 6006",
19 | "build-storybook": "build-storybook",
20 | "lint": "eslint ./src/force/ --ext .ts,.js,.tsx",
21 | "postinstall": "remix setup node && patch-package",
22 | "publish:latest": "lerna publish"
23 | },
24 | "workspaces": {
25 | "packages": [
26 | "docs",
27 | "src",
28 | "packages/*",
29 | "storybook"
30 | ]
31 | },
32 | "dependencies": {
33 | "@tweenjs/tween.js": "^18.6.4",
34 | "d3-drag": "^3.0.0",
35 | "d3-force": "^3.0.0",
36 | "d3-selection": "^3.0.0",
37 | "d3-zoom": "^3.0.0",
38 | "lerna": "^6.3.0",
39 | "lodash-es": "^4.17.21",
40 | "rxjs": "^7.5.7",
41 | "tinycolor2": "^1.5.1"
42 | },
43 | "devDependencies": {
44 | "@babel/core": "^7.19.6",
45 | "@mdx-js/react": "^2.1.5",
46 | "@react-three/fiber": "^8.9.1",
47 | "@remix-run/dev": "^1.7.5",
48 | "@remix-run/serve": "^1.7.5",
49 | "@rollup/plugin-json": "^5.0.2",
50 | "@storybook/addon-actions": "^6.5.13",
51 | "@storybook/addon-docs": "^6.5.13",
52 | "@storybook/addon-essentials": "^6.5.13",
53 | "@storybook/addon-interactions": "^6.5.13",
54 | "@storybook/addon-links": "^6.5.13",
55 | "@storybook/builder-webpack4": "^6.5.13",
56 | "@storybook/manager-webpack4": "^6.5.13",
57 | "@storybook/react": "^6.5.13",
58 | "@storybook/testing-library": "^0.0.13",
59 | "@storybook/theming": "^6.5.13",
60 | "@studiocompanion/eslint-config": "^1.2.2",
61 | "@types/d3": "^7.4.0",
62 | "@types/lodash-es": "^4.17.6",
63 | "@types/three": "^0.146.0",
64 | "@typescript-eslint/eslint-plugin": "^5.0.0",
65 | "@typescript-eslint/parser": "^5.41.0",
66 | "babel-loader": "^8.2.5",
67 | "chokidar": "^3.5.3",
68 | "concurrently": "^7.5.0",
69 | "eslint": "^8.0.1",
70 | "eslint-config-prettier": "^8.5.0",
71 | "eslint-config-standard-with-typescript": "^23.0.0",
72 | "eslint-plugin-import": "^2.25.2",
73 | "eslint-plugin-n": "^15.0.0",
74 | "eslint-plugin-prettier": "^4.2.1",
75 | "eslint-plugin-promise": "^6.0.0",
76 | "eslint-plugin-storybook": "^0.6.7",
77 | "fs-extra": "^10.1.0",
78 | "husky": "^8.0.1",
79 | "konva": "^8.3.14",
80 | "lint-staged": "^13.0.3",
81 | "patch-package": "^6.5.0",
82 | "postinstall-postinstall": "^2.1.0",
83 | "prettier": "^2.7.1",
84 | "react": "^18.2.0",
85 | "react-dom": "^18.2.0",
86 | "react-konva": "^18.2.3",
87 | "react-zdog": "^1.0.11",
88 | "rollup": "^3.2.3",
89 | "rollup-plugin-delete": "^2.0.0",
90 | "rollup-plugin-peer-deps-external": "^2.2.4",
91 | "rollup-plugin-typescript2": "^0.34.1",
92 | "rollup-plugin-uglify": "^6.0.4",
93 | "three": "^0.147.0",
94 | "ts-node": "^10.9.1",
95 | "typescript": "*",
96 | "zdog": "^1.1.3"
97 | },
98 | "husky": {
99 | "hooks": {
100 | "pre-commit": "lint-staged --verbose"
101 | }
102 | },
103 | "lint-staged": {
104 | "src/**/*.{tsx,ts}": "eslint"
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/packages/graphs/src/force/layout/force.ts:
--------------------------------------------------------------------------------
1 | import { forceSimulation, forceManyBody, forceCollide, Simulation, forceX, forceY, forceCenter, forceLink } from 'd3-force';
2 | import { cloneDeep, difference, find, isFunction, isNil, merge } from 'lodash-es';
3 | import { BehaviorSubject } from 'rxjs';
4 | import { IForceData, IForceLink, ILayoutOption, IRenderData, IRenderLink, IRenderNode } from '../interface';
5 | import { mergeRenderData } from '../utils';
6 |
7 | const FORCE_MAP = {
8 | center: forceCenter,
9 | collide: forceCollide,
10 | 'n-body': forceManyBody,
11 | link: forceLink,
12 | x: forceX,
13 | y: forceY
14 | };
15 |
16 | const FORCE_KEYS = Object.keys(FORCE_MAP);
17 | const FORCE_PARAMS = ['alpha', 'alphaMin', 'alphaTarget', 'velocityDecay', 'forces'];
18 | export class ForceLayout {
19 | simulation: Simulation
73 |
84 |
85 | 1.n-body-strength: {bodyStrength}
74 |
75 | 2.node-radius: {option.node.radius}
76 |
77 | 3.link-distance: {linkDistance}
78 |
79 | 4.velocity-decay: {option.layout.velocityDecay}
80 |
81 | 5.static: {option.layout.static ? 'true' : 'false'}
82 |
83 |
94 |
95 |
96 | );
97 | }
98 |
99 | export default {
100 | /* 👇 The title prop is optional.
101 | * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
102 | * to learn how to generate automatic titles
103 | */
104 | title: '基础使用/插件配置',
105 | component: Viz
106 | };
107 |
108 | export const Default = () => 
89 | 93 | {job} 94 |
{datum.label}
34 | {datum}
55 |
67 |
68 |
69 |
71 |
72 |
74 |
75 | Main Menu
76 |
83 |
84 |
85 |
86 | )
87 | }
88 |
89 | ```
90 |
91 | ## 力布局配置
92 | 力导向布局使用一个模型，其中数据对象作为带电粒子（或节点），可以选择由一组边（或关系）连接。一组力被用来驱动决定节点位置的物理模拟。布局基于 d3-force 实现。
93 |
94 | import { TablesConfiguration } from '~/components/Tables/TablesConfig'
95 | import { FORCE_LAYOUT_DATA } from '~/data/force'
96 |
97 |