demo: add euro cup demo (#5746)

* fix(graph): fix some options not effect after setOptions * fix: fix issue that backgound cannot display * docs: add euro cup demo * fix: fix issue that html node cannot correct fit view * chore: add deps
antvis · May 16, 2024 · e91c817 · e91c817
1 parent aef5f59
commit e91c817
Show file tree

Hide file tree

Showing 14 changed files with 508 additions and 34 deletions.
diff --git a/packages/g6-extension-react/__tests__/dataset/euro-cup.json b/packages/g6-extension-react/__tests__/dataset/euro-cup.json
@@ -0,0 +1,114 @@
+{
+  "nodes": [
+    {
+      "id": "50251337",
+      "x": 50,
+      "y": 68,
+      "isTeamA": "1",
+      "player_id": "50251337",
+      "player_shirtnumber": "19",
+      "player_enName": "Justin Kluivert",
+      "player_name": "尤斯廷-克鲁伊维特"
+    },
+    {
+      "id": "50436685",
+      "x": 25,
+      "y": 68,
+      "isTeamA": "1",
+      "player_id": "50436685",
+      "player_shirtnumber": "24",
+      "player_enName": "Antoine Semenyo",
+      "player_name": "塞门约"
+    },
+    {
+      "id": "50204813",
+      "x": 50,
+      "y": 89,
+      "isTeamA": "1",
+      "player_id": "50204813",
+      "player_shirtnumber": "9",
+      "player_enName": "Dominic Solanke",
+      "player_name": "索兰克"
+    },
+    {
+      "id": "50250175",
+      "x": 75,
+      "y": 68,
+      "isTeamA": "1",
+      "player_id": "50250175",
+      "player_shirtnumber": "16",
+      "player_enName": "Marcus Tavernier",
+      "player_name": "塔韦尼耶"
+    },
+    {
+      "id": "50213675",
+      "x": 65,
+      "y": 48,
+      "isTeamA": "1",
+      "player_id": "50213675",
+      "player_shirtnumber": "4",
+      "player_enName": "Lewis Cook",
+      "player_name": "刘易斯-库克"
+    },
+    {
+      "id": "50186648",
+      "x": 35,
+      "y": 48,
+      "isTeamA": "1",
+      "player_id": "50186648",
+      "player_shirtnumber": "10",
+      "player_enName": "Ryan Christie",
+      "player_name": "克里斯蒂"
+    },
+    {
+      "id": "50279448",
+      "x": 38,
+      "y": 28,
+      "isTeamA": "1",
+      "player_id": "50279448",
+      "player_shirtnumber": "6",
+      "player_enName": "Chris Mepham",
+      "player_name": "迈帕姆"
+    },
+    {
+      "id": "50061646",
+      "x": 15,
+      "y": 28,
+      "isTeamA": "1",
+      "player_id": "50061646",
+      "player_shirtnumber": "15",
+      "player_enName": "Adam Smith",
+      "player_name": "亚当-史密斯"
+    },
+    {
+      "id": "50472140",
+      "x": 62,
+      "y": 28,
+      "isTeamA": "1",
+      "player_id": "50472140",
+      "player_shirtnumber": "27",
+      "player_enName": "Ilya Zabarnyi",
+      "player_name": "扎巴尔尼"
+    },
+    {
+      "id": "50544346",
+      "x": 85,
+      "y": 28,
+      "isTeamA": "1",
+      "player_id": "50544346",
+      "player_shirtnumber": "3",
+      "player_enName": "Milos Kerkez",
+      "player_name": "科尔克兹"
+    },
+    {
+      "id": "50062598",
+      "x": 50,
+      "y": 7,
+      "isTeamA": "1",
+      "player_id": "50062598",
+      "player_shirtnumber": "1",
+      "player_enName": "Neto",
+      "player_name": "内托"
+    }
+  ]
+}
diff --git a/packages/g6-extension-react/__tests__/demos/euro-cup.tsx b/packages/g6-extension-react/__tests__/demos/euro-cup.tsx
@@ -0,0 +1,106 @@
+import { ExtensionCategory, register } from '@antv/g6';
+import styled from 'styled-components';
+import { ReactNode } from '../../src';
+import { Graph } from '../../src/graph';
+import data from '../dataset/euro-cup.json';
+
+const Player = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Shirt = styled.div`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  img {
+    width: 40px;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+`;
+
+const Number = styled.div`
+  color: #fff;
+  font-family: 'DingTalk-JinBuTi';
+  font-size: 10px;
+  top: 20px;
+  left: 15px;
+  z-index: 1;
+  margin-top: 16px;
+  margin-left: -2px;
+`;
+
+const Label = styled.div`
+  max-width: 120px;
+  padding: 0 8px;
+  color: #fff;
+  font-size: 10px;
+  background-image: url('https://mdn.alipayobjects.com/huamei_92awrc/afts/img/A*s2csQ48M0AkAAAAAAAAAAAAADsvfAQ/original');
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const PlayerNode = ({ playerInfo }: any) => {
+  const { isTeamA, player_shirtnumber, player_name } = playerInfo;
+  return (
+    <Player>
+      <Shirt>
+        <img
+          src={
+            isTeamA
+              ? 'https://mdn.alipayobjects.com/huamei_92awrc/afts/img/A*0oAaS42vqWcAAAAAAAAAAAAADsvfAQ/original'
+              : 'https://mdn.alipayobjects.com/huamei_92awrc/afts/img/A*BYH5SauBNecAAAAAAAAAAAAADsvfAQ/original'
+          }
+        />
+        <Number>{player_shirtnumber}</Number>
+      </Shirt>
+      <Label>{player_name}</Label>
+    </Player>
+  );
+};
+
+register(ExtensionCategory.NODE, 'react', ReactNode);
+
+export const EuroCup = () => {
+  return (
+    <div>
+      <Graph
+        options={{
+          data,
+          animation: false,
+          x: 10,
+          y: 50,
+          width: 480,
+          height: 720,
+          background:
+            'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EmPXQLrX2xIAAAAAAAAAAAAADmJ7AQ/original)no-repeat',
+          node: {
+            type: 'react',
+            style: {
+              size: [100, 60],
+              ports: [{ placement: 'center' }],
+              x: (d: any) => d.x * 3.5,
+              y: (d: any) => d.y * 3.5,
+              fill: 'transparent',
+              component: (data: any) => <PlayerNode playerInfo={data} />,
+            },
+          },
+        }}
+      />
+    </div>
+  );
+};
diff --git a/packages/g6-extension-react/__tests__/demos/index.tsx b/packages/g6-extension-react/__tests__/demos/index.tsx
@@ -1,3 +1,4 @@
+export * from './euro-cup';
 export * from './g-node';
 export * from './graph';
 export * from './react-node';
diff --git a/packages/g6-extension-react/package.json b/packages/g6-extension-react/package.json
@@ -45,7 +45,8 @@
     "antd": "^5.10.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "styled-components": "^6.1.11"
   },
   "peerDependencies": {
     "@antv/g6": "^5.0.0-beta.30",

diff --git a/packages/g6/src/elements/nodes/html.ts b/packages/g6/src/elements/nodes/html.ts
@@ -1,12 +1,14 @@
-import type {
+import {
   DisplayObjectConfig,
   FederatedMouseEvent,
+  FederatedPointerEvent,
+  HTML as GHTML,
   HTMLStyleProps as GHTMLStyleProps,
   Group,
   ICanvas,
   IEventTarget,
+  Rect,
 } from '@antv/g';
-import { FederatedPointerEvent, HTML as GHTML } from '@antv/g';
 import { isNil, isUndefined, pick } from '@antv/util';
 import { NodeEvent } from '../../constants';
 import type { BaseNodeStyleProps } from './base-node';
@@ -73,7 +75,10 @@ export class HTML extends BaseNode<HTMLStyleProps> {
   }
 
   protected drawKeyShape(attributes: Required<HTMLStyleProps>, container: Group) {
-    return this.upsert('key', GHTML, this.getKeyStyle(attributes), container);
+    const style = this.getKeyStyle(attributes);
+    const { width, height } = style;
+    const bounds = this.upsert('key-container', Rect, { width, height, opacity: 0 }, container);
+    return this.upsert('key', GHTML, style, bounds);
   }
 
   public connectedCallback() {

diff --git a/packages/g6/src/runtime/canvas.ts b/packages/g6/src/runtime/canvas.ts
@@ -151,12 +151,31 @@ export class Canvas {
     return this.config;
   }
 
+  private backgroundElement!: HTMLDivElement;
+
+  private initBackgroundElement(options: Record<string, unknown>) {
+    if (this.backgroundElement) return this.backgroundElement;
+
+    const { width, height } = this.config;
+
+    const element = document.createElement('div');
+    Object.assign(element.style, options, {
+      width: `${width}px`,
+      height: `${height}px`,
+      pointerEvents: 'none',
+      transition: 'background 0.5s',
+      backgroundSize: 'contain',
+    });
+    this.backgroundElement = element;
+    return element;
+  }
+
   public setBackground(background = this.config.background) {
     const container = this.getContainer();
     this.config.background = background;
     if (container && background) {
-      container.style.background = background;
-      container.style.transition = 'background 0.5s';
+      const dom = this.initBackgroundElement({ background });
+      container.appendChild(dom);
     }
   }
 

diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
@@ -1,6 +1,6 @@
 import EventEmitter from '@antv/event-emitter';
 import type { AABB, BaseStyleProps } from '@antv/g';
-import { debounce, isArray, isEqual, isFunction, isNumber, isObject, isString, omit } from '@antv/util';
+import { debounce, isEqual, isFunction, isNumber, isObject, isString, omit } from '@antv/util';
 import { COMBO_KEY, GraphEvent } from '../constants';
 import type { Plugin } from '../plugins/types';
 import { getExtension } from '../registry';
@@ -119,25 +119,10 @@ export class Graph extends EventEmitter {
    * @apiCategory option
    */
   public setOptions(options: GraphOptions): void {
-    const {
-      animation,
-      background,
-      behaviors,
-      combo,
-      container,
-      data,
-      edge,
-      height,
-      layout,
-      node,
-      padding,
-      plugins,
-      theme,
-      transforms,
-      width,
-      zoom,
-      zoomRange,
-    } = options;
+    const { background, behaviors, combo, data, edge, height, layout, node, plugins, theme, transforms, width } =
+      options;
+
+    Object.assign(this.options, options);
 
     if (background) this.setBackground(background);
     if (behaviors) this.setBehaviors(behaviors);
@@ -151,10 +136,6 @@ export class Graph extends EventEmitter {
     if (transforms) this.setTransforms(transforms);
     if (isNumber(width) || isNumber(height))
       this.setSize(width ?? this.options.width ?? 0, height ?? this.options.height ?? 0);
-
-    if (zoomRange) this.options.zoomRange = zoomRange;
-    if (isNumber(zoom)) this.options.zoom = zoom;
-    if (isNumber(padding) || isArray(padding)) this.options.padding = padding;
   }
 
   /**
@@ -201,8 +182,8 @@ export class Graph extends EventEmitter {
    * @apiCategory canvas
    */
   public setSize(width: number, height: number): void {
-    this.options.width = width;
-    this.options.height = height;
+    Object.assign(this.options, { width, height });
+    this.context.canvas?.resize(width, height);
   }
 
   /**
@@ -826,6 +807,7 @@ export class Graph extends EventEmitter {
         container: $container!,
         width: width || containerSize[0],
         height: height || containerSize[1],
+        background,
         renderer,
       });
 

diff --git a/packages/site/.dumi/global.ts b/packages/site/.dumi/global.ts
@@ -21,6 +21,7 @@ if (window) {
   window.react = require('react');
   window.React = window.react;
   window.client = require('react-dom');
+  window.styledComponents = require('styled-components');
 
   window.addPanel = async (renderPanel: (gui) => void) => {
     const container = document.getElementById('container')?.parentNode;

diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts
@@ -215,6 +215,14 @@ export default defineConfig({
       },
     ],
     examples: [
+      {
+        slug: 'scene-case',
+        icon: 'gallery',
+        title: {
+          zh: '场景案例',
+          en: 'Scene Case',
+        },
+      },
       {
         slug: 'layout',
         icon: 'net',