1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| import React, { useRef, useEffect } from "react";
| import { Stencil } from '@antv/x6-plugin-stencil';
|
| export const StencilComponent = (({ graphRef, isReady, stencilContainer }) => {
|
| useEffect(() => {
| if (isReady) {
| const graph = graphRef.current;
|
| const stencil = new Stencil({
| title: 'Stencil',
| target: graphRef.current,
| search(cell, keyword) {
| return cell.shape.indexOf(keyword) !== -1
| },
| placeholder: 'Search by shape name',
| notFoundText: 'Not Found',
| collapsable: true,
| stencilGraphHeight: 0,
| groups: [
| {
| name: 'group1',
| title: 'Group(Collapsable)',
| },
| {
| name: 'group2',
| title: 'Group',
| collapsable: false,
| },
| ],
| })
|
| stencilContainer.current.appendChild(stencil.container)
|
| const commonAttrs = {
| body: {
| fill: '#fff',
| stroke: '#8f8f8f',
| strokeWidth: 1,
| },
| }
|
| const n1 = graph.createNode({
| shape: 'rect',
| x: 40,
| y: 40,
| width: 80,
| height: 40,
| label: 'rect',
| attrs: commonAttrs,
| })
|
| const n2 = graph.createNode({
| shape: 'circle',
| x: 180,
| y: 40,
| width: 40,
| height: 40,
| label: 'circle',
| attrs: commonAttrs,
| })
|
| const n3 = graph.createNode({
| shape: 'ellipse',
| x: 280,
| y: 40,
| width: 80,
| height: 40,
| label: 'ellipse',
| attrs: commonAttrs,
| })
|
| const n4 = graph.createNode({
| shape: 'path',
| x: 420,
| y: 40,
| width: 40,
| height: 40,
| // https://www.svgrepo.com/svg/13653/like
| path: 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
| attrs: commonAttrs,
| label: 'path123',
| })
|
| stencil.load([n1, n2], 'group1')
| stencil.load([n3, n4], 'group2')
| }
|
| })
|
| return <div className="app-stencil" ref={stencilContainer} />
| })
|
|
