Compare commits
11 Commits
feat/vite
...
@antv/x6-s
| Author | SHA1 | Date | |
|---|---|---|---|
| 96010e3b52 | |||
| a98e97db11 | |||
| 30c2ed2655 | |||
| 3a020d17c3 | |||
| d8e1e637d8 | |||
| 2d04848d52 | |||
| e2bb71d954 | |||
| 8b145941ec | |||
| 2c7a04a6f4 | |||
| dfa8c492da | |||
| 3b668feb4e |
@ -13,6 +13,7 @@ Indomi <indomi126@gmail.com>
|
||||
James <san>
|
||||
Jógvan <lse>
|
||||
Ken <ei>
|
||||
Kent <oo>
|
||||
Limbo <49612796+JUST-Limbo@users.noreply.github.com>
|
||||
Lixu <37231473+wflixu@users.noreply.github.com>
|
||||
Lloyd <ho>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 12 MiB |
24
examples/vite-example/.gitignore
vendored
24
examples/vite-example/.gitignore
vendored
@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/antv.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>s</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "@antv/vite-project",
|
||||
"private": true,
|
||||
"version": "2.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"prebuild": "rimraf dist",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash-es": "^4.17.15",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.0.0",
|
||||
"react-router": "^6.5.0",
|
||||
"react-router-dom": "^6.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-helmet": "^6.0.0",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"less": "^4.1.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="28"><defs><linearGradient id="a" x1=".004%" x2="100.131%" y1="49.993%" y2="49.993%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6A09FF"/><stop offset="43%" stop-color="#7623FF"/><stop offset="77%" stop-color="#8A4CFF"/><stop offset="99%" stop-color="#996BFF"/></linearGradient><linearGradient id="b" x1="50.004%" x2="50.004%" y1="100.012%" y2="0%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6909FF"/><stop offset="43%" stop-color="#7523FF"/><stop offset="77%" stop-color="#894CFF"/><stop offset="99%" stop-color="#976BFF"/></linearGradient><linearGradient id="c" x1="49.854%" x2="49.854%" y1="100.255%" y2="0%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient><linearGradient id="d" x1="57351%" x2="57351%" y1="59860%" y2="35023%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><path fill="url(#a)" d="M1.955.004c-.029 0-.057 0-.088.002a1.41 1.41 0 0 0-.197.017A2.312 2.312 0 0 0 1.4.08a3.479 3.479 0 0 0-.179.061 3.768 3.768 0 0 0-.075.032l-.029.013-.057.028-.031.016L.98.257.95.275.91.298.883.317.825.355.79.381l-.03.022L.728.43.7.453C.68.468.662.483.645.5L.621.521.588.553l-.02.02A1.898 1.898 0 0 0 .46.691L.446.709.414.75A2.707 2.707 0 0 0 .348.84L.337.857.308.9l-.01.017L.29.931l3.784 2.214.801.855a.406.406 0 0 1-.019-.42.446.446 0 0 1 .37-.227H18.12c.045.003.09.005.137.005.961-.014 1.734-.758 1.737-1.674.002-.916-.765-1.664-1.726-1.683L1.955.004Z" transform="translate(.006)"/><path fill="url(#b)" d="m22.737 11.315-6.392 11.01a.438.438 0 0 1-.74.025l-4.063-6.995a1.724 1.724 0 0 0-.117-.23L4.667 3.459a2.32 2.32 0 0 1-.005-2.248A2.345 2.345 0 0 1 6.57.005L1.981.001A1.899 1.899 0 0 0 .908.294l-.1.068a2.405 2.405 0 0 0-.15.12A1.7 1.7 0 0 0 .462.69a1.797 1.797 0 0 0-.17.243 1.767 1.767 0 0 0-.028 1.9l.166.289 13.874 23.895a1.882 1.882 0 0 0 .793.776l.108.05a2.537 2.537 0 0 0 .18.069 2.14 2.14 0 0 0 .28.066 2.148 2.148 0 0 0 .19.02l.106.002c.04 0 .063 0 .086-.002a1.206 1.206 0 0 0 .19-.016 2.065 2.065 0 0 0 .27-.06 1.927 1.927 0 0 0 .168-.06l.089-.038.07-.036c.058-.03.073-.04.088-.048a2.596 2.596 0 0 0 .207-.142 1.851 1.851 0 0 0 .464-.537l.376-.64.081-.14 7.68-13.225a1.716 1.716 0 0 0 .047-1.75 1.74 1.74 0 0 0-3.039.01Z" transform="translate(.006)"/><path fill="url(#c)" d="M30.137 0h-6.459c-.935.018-1.684.847-1.684 1.863s.75 1.845 1.684 1.864c.046 0 .09-.003.134-.006h2.925c.214.032.374.23.374.465a.501.501 0 0 1-.025.157l-1.542 2.9c-.454.904-.147 2.036.685 2.53.832.492 1.874.159 2.328-.745l3.19-6c.029-.055.056-.111.08-.17l.003-.007c.015-.036.03-.072.043-.11l.002-.005.017-.052.008-.027c.008-.024.015-.048.021-.073l.012-.042.01-.04a2.826 2.826 0 0 0 .033-.191 2.31 2.31 0 0 0 .01-.077v-.011l.005-.09v-.022l.003-.091c0-1.115-.83-2.019-1.857-2.02Z" transform="translate(.006)"/><path fill="url(#d)" d="M19.881 7.41a.84.84 0 0 0-.725-.41h-6.325a.84.84 0 0 0-.725.41.804.804 0 0 0 0 .82l3.163 5.36a.84.84 0 0 0 .725.41.84.84 0 0 0 .725-.41l3.162-5.36a.804.804 0 0 0 0-.82Z" transform="translate(.006)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.3 KiB |
@ -1,72 +0,0 @@
|
||||
:root {
|
||||
color: rgb(255 255 255 / 87%);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 24px;
|
||||
background-color: #242424;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #646cff;
|
||||
font-weight: 500;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.6em 1.2em;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
||||
import { getRoutes } from './routes'
|
||||
import './index.less'
|
||||
|
||||
const routes = getRoutes()
|
||||
const router = createBrowserRouter(routes)
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@ -1,43 +0,0 @@
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
padding: 0 16px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
|
||||
section {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 16px;
|
||||
|
||||
li {
|
||||
line-height: 1.6;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
import React from 'react'
|
||||
import { RouteObject } from 'react-router'
|
||||
import { Outlet, NavLink } from 'react-router-dom'
|
||||
import style from './_layout.module.less'
|
||||
|
||||
function renderLink(route: RouteObject, parentPath: string) {
|
||||
let children = route.children
|
||||
let indexRoute: RouteObject | null = null
|
||||
if (children) {
|
||||
children = children.slice()
|
||||
const idx = children.findIndex((r) => r.index)
|
||||
if (idx >= 0) {
|
||||
indexRoute = children[idx]
|
||||
children.splice(idx, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const routeName = route.path
|
||||
const routePath = `${parentPath}/${routeName}`
|
||||
const element = indexRoute ? indexRoute.element : route.element
|
||||
|
||||
return (
|
||||
<React.Fragment key={routePath}>
|
||||
<li>
|
||||
{element ? (
|
||||
<NavLink
|
||||
to={routePath}
|
||||
className={({ isActive }) => (isActive ? 'active' : undefined)}
|
||||
>
|
||||
{routeName}
|
||||
</NavLink>
|
||||
) : (
|
||||
routeName
|
||||
)}
|
||||
</li>
|
||||
{children && <li>{renderLinks(children, routePath)}</li>}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
function renderLinks(routes: RouteObject[], parentPath = '') {
|
||||
return <ul>{routes.map((route) => renderLink(route, parentPath))}</ul>
|
||||
}
|
||||
|
||||
export default function Layout(props: { routes: RouteObject[] }) {
|
||||
return (
|
||||
<div className={style.wrap}>
|
||||
<div className={style.nav}>
|
||||
<h2>Examples</h2>
|
||||
<section>{renderLinks(props.routes)}</section>
|
||||
</div>
|
||||
<div className={style.content}>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>transition</div>
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>auto-size</div>
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
import React from 'react'
|
||||
import { set } from 'lodash-es'
|
||||
import { RouteObject } from 'react-router'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
function parseRouteConfig() {
|
||||
const modules = import.meta.glob(`/src/pages/**/*.tsx`)
|
||||
const config: Record<string, any> = {}
|
||||
Object.keys(modules).forEach((filePath) => {
|
||||
const routeParts = filePath
|
||||
.replace(/^\/src\/pages\//, '') // 去除 /src/pages
|
||||
.replace(/.tsx$/, '') // 去除文件名后缀
|
||||
.replace(/\[([\w-]+)]/, ':$1') // 转换动态路由 [foo].tsx => :foo
|
||||
.split('/')
|
||||
|
||||
set(config, routeParts, modules[filePath])
|
||||
})
|
||||
return config
|
||||
}
|
||||
|
||||
function wrapSuspense(
|
||||
mod: () => Promise<{
|
||||
default: React.ComponentType<{ routes?: RouteObject[] }>
|
||||
}>,
|
||||
routes?: RouteObject[],
|
||||
title?: string,
|
||||
) {
|
||||
if (!mod) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const Component = React.lazy(mod)
|
||||
// 结合 Suspense ，这里可以自定义 loading 组件
|
||||
return (
|
||||
<React.Suspense fallback={null}>
|
||||
{title && (
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
)}
|
||||
{title ? <Component /> : <Component routes={routes} />}
|
||||
</React.Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
function wrapLayout(
|
||||
routePath: string,
|
||||
routeConfig: Record<string, any>,
|
||||
): RouteObject {
|
||||
const { _layout, ...rest } = routeConfig
|
||||
const routes = routeConfigToRoute(rest, routePath)
|
||||
return {
|
||||
path: routePath,
|
||||
element: wrapSuspense(_layout, routes),
|
||||
children: routes,
|
||||
}
|
||||
}
|
||||
|
||||
function routeConfigToRoute(
|
||||
config: Record<string, any>,
|
||||
parentPath: string,
|
||||
): RouteObject[] {
|
||||
return Object.entries(config).map(([routePath, child]) => {
|
||||
// () => import() 语法判断
|
||||
if (typeof child === 'function') {
|
||||
// 等于 index 则映射为当前根路由
|
||||
const isIndex = routePath === 'index'
|
||||
return {
|
||||
index: isIndex,
|
||||
path: isIndex ? undefined : routePath,
|
||||
// 转换为组件
|
||||
element: wrapSuspense(
|
||||
child,
|
||||
undefined,
|
||||
isIndex ? parentPath : `${parentPath}/${routePath}`,
|
||||
),
|
||||
}
|
||||
}
|
||||
// 否则为目录，则查找下一层级
|
||||
return wrapLayout(routePath, child)
|
||||
})
|
||||
}
|
||||
|
||||
export function getRoutes(): RouteObject[] {
|
||||
const routeConfig = parseRouteConfig()
|
||||
return [wrapLayout('/', routeConfig)]
|
||||
}
|
||||
1
examples/vite-example/src/vite-env.d.ts
vendored
1
examples/vite-example/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@ -51,7 +51,7 @@
|
||||
"prettier --write --ignore-unknown"
|
||||
],
|
||||
"*.less": [
|
||||
"stylelint --custom-syntax postcss-less --fix"
|
||||
"stylelint --syntax less --fix"
|
||||
],
|
||||
"*.js": [
|
||||
"prettier --write"
|
||||
@ -137,6 +137,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.20",
|
||||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.8.0",
|
||||
"pretty-quick": "^3.1.1",
|
||||
"rimraf": "^3.0.2",
|
||||
@ -161,7 +162,6 @@
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.2.0",
|
||||
"postcss-less": "^6.0.0"
|
||||
"@rollup/plugin-terser": "^0.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
## @antv/x6-common [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.3...@antv/x6-common@2.0.4) (2022-12-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix window incompatibility problem ([#3070](https://github.com/antvis/x6/issues/3070)) ([d8e1e63](https://github.com/antvis/x6/commit/d8e1e637d8027b9494cd26efc87815d74bd51366))
|
||||
|
||||
## @antv/x6-common [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.0...@antv/x6-common@2.0.1) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-common",
|
||||
"version": "2.0.3",
|
||||
"version": "2.0.4",
|
||||
"description": "Basic toolkit for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
// compatible with NodeList.prototype.forEach() before chrome 51
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
|
||||
if (window.NodeList && !NodeList.prototype.forEach) {
|
||||
if (
|
||||
typeof window === 'object' &&
|
||||
window.NodeList &&
|
||||
!NodeList.prototype.forEach
|
||||
) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach as any
|
||||
}
|
||||
|
||||
|
||||
@ -26,10 +26,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
|
||||
const node = this.cell
|
||||
|
||||
if (container) {
|
||||
const graph = node.model ? node.model.graph : null
|
||||
// Actually in the dnd plugin, this graph is empty,
|
||||
// in order to make the external perception type of graph is a graph, rather than graph | null, so hack this.
|
||||
const elem = React.createElement(Wrap, { node, graph: graph! })
|
||||
const elem = React.createElement(Wrap, { node, graph: this.graph })
|
||||
if (Portal.isActive()) {
|
||||
const portal = createPortal(elem, container) as ReactPortal
|
||||
Portal.connect(this.cell.id, portal)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
|
||||
import { Graph } from '@antv/x6'
|
||||
import { VueShape } from './node'
|
||||
|
||||
let active = false
|
||||
@ -9,6 +10,7 @@ export function connect(
|
||||
component: any,
|
||||
container: HTMLDivElement,
|
||||
node: VueShape,
|
||||
graph: Graph,
|
||||
) {
|
||||
if (active) {
|
||||
const { Teleport, markRaw } = Vue as any
|
||||
@ -17,6 +19,7 @@ export function connect(
|
||||
render: () => h(Teleport, { to: container } as any, [h(component)]),
|
||||
provide: () => ({
|
||||
getNode: () => node,
|
||||
getGraph: () => graph,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
||||
@ -40,12 +40,13 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => this.graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (isVue3) {
|
||||
if (isActive()) {
|
||||
connect(this.targetId(), component, root, node)
|
||||
connect(this.targetId(), component, root, node, this.graph)
|
||||
} else {
|
||||
this.vm = createApp({
|
||||
render() {
|
||||
@ -54,6 +55,7 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => this.graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
## @antv/x6 [2.1.1](https://github.com/antvis/x6/compare/@antv/x6@2.1.0...@antv/x6@2.1.1) (2022-12-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* arrowhead not get options bug ([#3065](https://github.com/antvis/x6/issues/3065)) ([3b668fe](https://github.com/antvis/x6/commit/3b668feb4eac47994f52d0cc977d22a8a2c06acd))
|
||||
* set snapToGrid to false by default ([#3066](https://github.com/antvis/x6/issues/3066)) ([e2bb71d](https://github.com/antvis/x6/commit/e2bb71d95484b29187fafca97f1a386e9b984095))
|
||||
|
||||
# @antv/x6 [2.1.0](https://github.com/antvis/x6/compare/@antv/x6@2.0.9...@antv/x6@2.1.0) (2022-12-19)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6",
|
||||
"version": "2.1.0",
|
||||
"version": "2.1.1",
|
||||
"description": "JavaScript diagramming library that uses SVG and HTML for rendering",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -55,6 +55,8 @@ export namespace Options {
|
||||
|
||||
onPortRendered?: (args: OnPortRenderedArgs) => void
|
||||
onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
|
||||
|
||||
createCellView?: (this: Graph, cell: Cell) => CellView | null | undefined
|
||||
}
|
||||
|
||||
export interface ManualBooleans {
|
||||
|
||||
@ -265,6 +265,32 @@ function findRoute(
|
||||
return null
|
||||
}
|
||||
|
||||
function snap(vertices: Point[], gridSize = 10) {
|
||||
if (vertices.length <= 1) {
|
||||
return vertices
|
||||
}
|
||||
|
||||
for (let i = 0, len = vertices.length; i < len - 1; i += 1) {
|
||||
const first = vertices[i]
|
||||
const second = vertices[i + 1]
|
||||
if (first.x === second.x) {
|
||||
const x = gridSize * Math.round(first.x / gridSize)
|
||||
if (first.x !== x) {
|
||||
first.x = x
|
||||
second.x = x
|
||||
}
|
||||
} else if (first.y === second.y) {
|
||||
const y = gridSize * Math.round(first.y / gridSize)
|
||||
if (first.y !== y) {
|
||||
first.y = y
|
||||
second.y = y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return vertices
|
||||
}
|
||||
|
||||
export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
vertices,
|
||||
optionsRaw,
|
||||
@ -282,7 +308,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
)
|
||||
|
||||
const oldVertices = vertices.map((p) => Point.create(p))
|
||||
let newVertices: Point[] = []
|
||||
const newVertices: Point[] = []
|
||||
|
||||
// The origin of first route's grid, does not need snapping
|
||||
let tailPoint = sourceEndpoint
|
||||
@ -351,10 +377,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
}
|
||||
|
||||
if (options.snapToGrid) {
|
||||
newVertices = newVertices.map((vertice) => {
|
||||
const gridSize = edgeView.graph.grid.getGridSize()
|
||||
return vertice.snapToGrid(gridSize)
|
||||
})
|
||||
return snap(newVertices, edgeView.graph.grid.getGridSize())
|
||||
}
|
||||
|
||||
return newVertices
|
||||
|
||||
@ -74,6 +74,7 @@ class Arrowhead extends ToolsView.ToolItem<EdgeView, Arrowhead.Options> {
|
||||
x: coords.x,
|
||||
y: coords.y,
|
||||
options: {
|
||||
...this.options,
|
||||
toolId: this.cid,
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { KeyValue, Dom, Disposable } from '@antv/x6-common'
|
||||
import { KeyValue, Dom, Disposable, FunctionExt } from '@antv/x6-common'
|
||||
import { Rectangle } from '@antv/x6-geometry'
|
||||
import { Model, Cell } from '../model'
|
||||
import { View, CellView, NodeView, EdgeView } from '../view'
|
||||
@ -181,13 +181,15 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
}
|
||||
|
||||
this.requestViewUpdate(
|
||||
viewItem.view,
|
||||
flag,
|
||||
options,
|
||||
cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
|
||||
false,
|
||||
)
|
||||
if (viewItem) {
|
||||
this.requestViewUpdate(
|
||||
viewItem.view,
|
||||
flag,
|
||||
options,
|
||||
cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
|
||||
false,
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
this.flush()
|
||||
@ -375,15 +377,22 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
|
||||
protected createCellView(cell: Cell) {
|
||||
const options = { graph: this.graph }
|
||||
const createViewHook = this.graph.options.createCellView
|
||||
if (createViewHook) {
|
||||
const ret = FunctionExt.call(createViewHook, this.graph, cell)
|
||||
if (ret || ret === null) {
|
||||
return ret
|
||||
}
|
||||
}
|
||||
|
||||
const view = cell.view
|
||||
const options = { graph: this.graph }
|
||||
|
||||
if (view != null && typeof view === 'string') {
|
||||
const def = CellView.registry.get(view)
|
||||
if (def) {
|
||||
return new def(cell, options) // eslint-disable-line new-cap
|
||||
}
|
||||
|
||||
return CellView.registry.onNotFound(view)
|
||||
}
|
||||
|
||||
|
||||
@ -847,7 +847,6 @@ export class NodeView<
|
||||
) {
|
||||
this.graph.model.startBatch('add-edge')
|
||||
const edgeView = this.createEdgeFromMagnet(magnet, x, y)
|
||||
edgeView.notifyMouseDown(e, x, y) // backwards compatibility events
|
||||
edgeView.setEventData(
|
||||
e,
|
||||
edgeView.prepareArrowheadDragging('target', {
|
||||
@ -858,6 +857,7 @@ export class NodeView<
|
||||
}),
|
||||
)
|
||||
this.setEventData<Partial<EventData.Magnet>>(e, { edgeView })
|
||||
edgeView.notifyMouseDown(e, x, y)
|
||||
}
|
||||
|
||||
protected getDefaultEdge(sourceView: CellView, sourceMagnet: Element) {
|
||||
|
||||
630
pnpm-lock.yaml
generated
630
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -2,9 +2,9 @@
|
||||
title: Graph
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs
|
||||
- /zh/docs/api
|
||||
- /zh/docs/api/graph
|
||||
+ /zh/docs
|
||||
+ /zh/docs/api
|
||||
+ /zh/docs/api/graph
|
||||
---
|
||||
|
||||
## 配置
|
||||
@ -15,24 +15,27 @@ new Graph(options: Options)
|
||||
|
||||
| 选项 | 类型 | 必选 | 默认值 | 描述 |
|
||||
| ------------------------------------------------------------------------------ | ------------------------------ | :--: | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| [container](#container) | HTMLElement | ✓ | | 画布的容器。 |
|
||||
| [width](#width) | number | | `undefined` | 画布宽度，默认使用容器宽度。 |
|
||||
| [height](#height) | number | | `undefined` | 画布高度，默认使用容器高度。 |
|
||||
| [autoResize](#autoresize) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。默认监听画布容器，也可以指定监听的元素，如 `Document`。 |
|
||||
| [panning](/zh/docs/api/graph/panning) | object | | { enabled: false, eventTypes: ['leftMouseDown'],} | 画布是否可以拖动 |
|
||||
| [grid](/zh/docs/api/graph/grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
|
||||
| [background](/zh/docs/api/graph/background) | false \| object | | `false` | 背景，默认不绘制背景。 |
|
||||
| [mousewheel](/zh/docs/api/graph/mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
|
||||
| [translating](/zh/docs/api/graph/transform#translating) | object | | object | 平移节点。 |
|
||||
| [embedding](/zh/docs/api/graph/interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
|
||||
| [connecting](/zh/docs/api/graph/interaction#connecting) | object | | object | 连线选项。 |
|
||||
| [highlighting](/zh/docs/api/graph/interaction#highlighting) | object | | object | 高亮选项。 |
|
||||
| [interacting](/zh/docs/api/graph/interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
|
||||
| [magnetThreshold](/zh/docs/api/graph/view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
|
||||
| [moveThreshold](/zh/docs/api/graph/view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
|
||||
| [clickThreshold](/zh/docs/api/graph/view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
|
||||
| [preventDefaultContextMenu](/zh/docs/api/graph/view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
|
||||
| [preventDefaultBlankAction](/zh/docs/api/graph/view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
|
||||
| [guard](/zh/docs/api/graph/view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
|
||||
| [async](/zh/docs/api/graph/view#async) | boolean | | `true` | 是否异步渲染 |
|
||||
| [virtual](/zh/docs/api/graph/view#virtual) | boolean | | `false` | 是否只渲染可视区域内容 |
|
||||
| containers | HTMLElement | ✓ | | 画布的容器。 |
|
||||
| width | number | | - | 画布宽度，默认使用容器宽度。 |
|
||||
| height | number | | - | 画布高度，默认使用容器高度。 |
|
||||
| scaling | { min?: number, max?: number } | | { min: 0.01, max: 16 } | 画布的最小最大缩放级别。 |
|
||||
| [autoResize](/zh/docs/tutorial/basic/graph#画布大小) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。 |
|
||||
| [panning](/zh/docs/api/graph/panning) | boolean \| `PanningManager.Options` | | `false` | 画布是否可以拖拽平移，默认禁用。 |
|
||||
| [mousewheel](/zh/docs/api/graph/mousewheel) | boolean \| `MouseWheel.Options` | | `false` | 鼠标滚轮缩放，默认禁用。 |
|
||||
| [grid](/zh/docs/api/graph/grid) | boolean \| number \| `GridManager.Options` | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
|
||||
| [background](/zh/docs/api/graph/background) | false \| `BackgroundManager.Options` | | `false` | 背景，默认不绘制背景。 |
|
||||
| [translating](/zh/docs/api/interacting/interaction#trasnlating) | `Translating.Options` | | { restrict: false } | 限制节点移动。 |
|
||||
| [embedding](/zh/docs/api/interacting/interaction#embedding) | boolean \| `Embedding.Options` | | `false` | 嵌套节点，默认禁用。 |
|
||||
| [connecting](/zh/docs/api/interacting/interaction#connecting) | `Connecting.Options` | | { snap: false, ... } | 连线选项。 |
|
||||
| [highlighting](/zh/docs/api/interacting/interaction#highlighting) | `Highlighting.Options` | | {...} | 高亮选项。 |
|
||||
| [interacting](/zh/docs/api/interacting/interaction#interacting) | `Interacting.Options` | | { edgeLabelMovable: false } | 定制节点和边的交互行为。 |
|
||||
| [magnetThreshold](/zh/docs/api/graph/view#magnetthreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
|
||||
| [moveThreshold](/zh/docs/api/graph/view#movethreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
|
||||
| [clickThreshold](/zh/docs/api/graph/view#clickthreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
|
||||
| [preventDefaultContextMenu](/zh/docs/api/graph/view#preventdefaultcontextmenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
|
||||
| [preventDefaultBlankAction](/zh/docs/api/graph/view#preventdefaultblankaction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
|
||||
| [async](/zh/docs/api/graph/view#async) | boolean | | `true` | 是否异步渲染 |
|
||||
| [virtual](/zh/docs/api/graph/view#virtual) | boolean | | `false` | 是否只渲染可视区域内容 |
|
||||
| [onPortRendered](/zh/docs/api/graph/view#onportrendered) | (args: OnPortRenderedArgs) => void | | - | 当某个连接桩渲染完成时触发的回调。 |
|
||||
| [onEdgeLabelRendered](/zh/docs/api/graph/view#onedgelabelrendered) | (args: OnEdgeLabelRenderedArgs) => void | | - | 当边的文本标签渲染完成时触发的回调。 |
|
||||
| [createCellView](/zh/docs/api/graph/view#createcellview) | (this: Graph, cell: Cell) => CellView \| null \| undefined | | - | 是自定义元素的视图。 |
|
||||
|
||||
@ -10,10 +10,14 @@ redirect_from:
|
||||
|
||||
### async
|
||||
|
||||
是否是异步渲染的画布。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显。但需要注意的是，一些同步操作可能会出现意外结果，比如获取某个节点的视图、获取节点/边的包围盒等，因为这些同步操作触发时异步渲染可能并没有完成，此时只能通过监听 `render:done` 事件来确保所有变更都已经生效，然后在事件回调中进行这些操作。
|
||||
是否是异步渲染的画布。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显。但需要注意的是，一些同步操作可能会出现意外结果，比如获取某个节点的视图、获取节点/边的包围盒等，因为这些同步操作触发时异步渲染可能并没有完成。
|
||||
|
||||
<!-- <iframe src="/demos/api/graph/async"></iframe> -->
|
||||
|
||||
### virtual
|
||||
|
||||
是否只渲染可视区域内的元素，默认为 `false`，如果设置为 `true`，首屏加载只会渲染当前可视区域内的元素，当拖动画布或者缩放画布时，会根据画布窗口大小自动加载剩余元素。在元素数量很大的场景，性能提升非常明显。
|
||||
|
||||
### magnetThreshold
|
||||
|
||||
鼠标移动多少次后才触发连线，或者设置为 'onleave' 时表示鼠标移出元素时才触发连线，默认为 `0`。
|
||||
@ -34,14 +38,6 @@ redirect_from:
|
||||
|
||||
在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为，默认为 `true`。
|
||||
|
||||
### guard
|
||||
|
||||
```sign
|
||||
(e: Dom.EventObject, view?: CellView | null) => boolean
|
||||
```
|
||||
|
||||
是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件，否则不忽略。
|
||||
|
||||
### onPortRendered
|
||||
|
||||
```sign
|
||||
@ -60,9 +56,7 @@ redirect_from:
|
||||
) => void
|
||||
```
|
||||
|
||||
当某个连接桩渲染完成时触发的回调。
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
当某个连接桩渲染完成时触发的回调,参数如下：
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| ---------------- | ---------------- | :--: | ---------------------------------------- |
|
||||
@ -75,7 +69,6 @@ redirect_from:
|
||||
| contentContainer | Element | ✓ | 连接桩内容的容器元素。 |
|
||||
| contentSelectors | Markup.Selectors | | 连接桩内容 Markup 渲染后的选择器键值对。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们可以渲染一个 React 类型的连接桩。
|
||||
|
||||
@ -97,7 +90,7 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-port"></iframe> -->
|
||||
|
||||
### onEdgeLabelRendered
|
||||
|
||||
@ -113,9 +106,8 @@ const graph = new Graph({
|
||||
) => void
|
||||
```
|
||||
|
||||
当边的文本标签渲染完成时触发的回调。
|
||||
当边的文本标签渲染完成时触发的回调，参数如下：
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| --------- | ---------------- | :--: | -------------------------------------- |
|
||||
@ -124,7 +116,6 @@ const graph = new Graph({
|
||||
| container | Element | ✓ | 文本标签容器。 |
|
||||
| selectors | Markup.Selectors | ✓ | 文本标签 Markup 渲染后的选择器键值对。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们可以在标签上渲染任何想要的元素。
|
||||
|
||||
@ -164,7 +155,7 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-label-base"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-label-base"></iframe> -->
|
||||
|
||||
我们也可以在定义 Label 的 Markup 时添加 `<foreignObject>` 元素来支持 HTML 和 React 的渲染能力。
|
||||
|
||||
@ -185,72 +176,21 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-label-markup"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-label-markup"></iframe> -->
|
||||
|
||||
### onToolItemCreated
|
||||
### createCellView
|
||||
|
||||
```sign
|
||||
(
|
||||
this: Graph,
|
||||
args: {
|
||||
name: string
|
||||
cell: Cell
|
||||
view: CellView
|
||||
tool: View
|
||||
},
|
||||
) => void
|
||||
cell: Cell,
|
||||
) => CellView | null | undefined
|
||||
```
|
||||
|
||||
当工具项渲染完成时触发的回调。
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| ---- | -------- | :--: | ------------- |
|
||||
| cell | Cell | ✓ | 节点/边实例。 |
|
||||
| view | CellView | ✓ | 节点/边视图。 |
|
||||
| name | string | ✓ | 工具项名称。 |
|
||||
| tool | View | ✓ | 工具视图。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们为 `vertices` 工具设置间隔填充效果。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
container: this.container,
|
||||
grid: true,
|
||||
onToolItemCreated({ name, cell, tool }) {
|
||||
if (name === "vertices" && cell === edge2) {
|
||||
const options = (tool as any).options;
|
||||
if (options && options.index % 2 === 1) {
|
||||
tool.setAttrs({ fill: "red" });
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/api/registry/edge-tool/vertices"></iframe>
|
||||
自定义元素的视图，可以返回一个 `CellView`，会替换默认的视图，如果返回 `null`，则不会渲染，如果返回 `undefined`，会按照默认方式渲染。
|
||||
|
||||
## 方法
|
||||
|
||||
### isAsync()
|
||||
|
||||
```sign
|
||||
isAsync(): boolean
|
||||
```
|
||||
|
||||
返回画布是否是异步渲染模式。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显，异步画布的使用细节请参考 [`async`](#async) 选项。
|
||||
|
||||
### isFrozen()
|
||||
|
||||
```sign
|
||||
isFrozen(): boolean
|
||||
```
|
||||
|
||||
返回[异步画布](#async)是否处于冻结状态。处于冻结状态的画布不会立即响应画布中节点和边的变更，直到调用 [`unfreeze(...)`](#unfreeze) 方法来解除冻结并重新渲染画布。
|
||||
|
||||
### findView(...)
|
||||
|
||||
```sign
|
||||
|
||||
@ -72,7 +72,7 @@ export interface Connecting {
|
||||
|
||||
### snap
|
||||
|
||||
当 `snap` 设置为 `true` 时连线的过程中距离节点或者连接桩 `50px` 时会触发自动吸附，可以通过配置 `radius` 属性自定义触发吸附的距离。当 `snap` 设置为 `false` 时不会触发自动吸附。默认值为 `false`。
|
||||
当 `snap` 设置为 `true` 时连线的过程中距离节点或者连接桩 `50px` 时会触发自动吸附，可以通过配置 `radius` 属性自定义触发吸附的距离。当 `snap` 设置为 `false` 时不会触发自动吸附。默认值为 `false` 。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
@ -92,35 +92,35 @@ const graph = new Graph({
|
||||
|
||||
### allowBlank
|
||||
|
||||
是否允许连接到画布空白位置的点，默认为 `true`。
|
||||
是否允许连接到画布空白位置的点，默认为 `true` 。
|
||||
|
||||
### allowMulti
|
||||
|
||||
是否允许在相同的起始节点和终止之间创建多条边，默认为 `true`。当设置为 `false` 时，在起始和终止节点之间只允许创建一条边，当设置为 `'withPort'` 时，在起始和终止节点的相同连接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的连接桩上）。
|
||||
是否允许在相同的起始节点和终止之间创建多条边，默认为 `true` 。当设置为 `false` 时，在起始和终止节点之间只允许创建一条边，当设置为 `'withPort'` 时，在起始和终止节点的相同连接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的连接桩上）。
|
||||
|
||||
### allowLoop
|
||||
|
||||
是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 `true`。
|
||||
是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 `true` 。
|
||||
|
||||
### allowNode
|
||||
|
||||
是否允许边链接到节点（非节点上的连接桩），默认为 `true`。
|
||||
是否允许边链接到节点（非节点上的连接桩），默认为 `true` 。
|
||||
|
||||
### allowEdge
|
||||
|
||||
是否允许边链接到另一个边，默认为 `true`。
|
||||
是否允许边链接到另一个边，默认为 `true` 。
|
||||
|
||||
### allowPort
|
||||
|
||||
是否允许边链接到连接桩，默认为 `true`。
|
||||
是否允许边链接到连接桩，默认为 `true` 。
|
||||
|
||||
### highlight
|
||||
|
||||
拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 `false`。
|
||||
拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 `false` 。
|
||||
|
||||
### anchor
|
||||
|
||||
当连接到节点时，通过 [`anchor`](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
|
||||
当连接到节点时，通过 [ `anchor` ](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center` 。
|
||||
|
||||
#### sourceAnchor
|
||||
|
||||
@ -132,7 +132,7 @@ const graph = new Graph({
|
||||
|
||||
### edgeAnchor
|
||||
|
||||
当连接到边时，通过 [`edgeAnchor`](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
|
||||
当连接到边时，通过 [ `edgeAnchor` ](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio` 。
|
||||
|
||||
### sourceEdgeAnchor
|
||||
|
||||
@ -144,7 +144,7 @@ const graph = new Graph({
|
||||
|
||||
### connectionPoint
|
||||
|
||||
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary`。
|
||||
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary` 。
|
||||
|
||||
### sourceConnectionPoint
|
||||
|
||||
@ -156,11 +156,11 @@ const graph = new Graph({
|
||||
|
||||
#### router
|
||||
|
||||
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
|
||||
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal` 。
|
||||
|
||||
### connector
|
||||
|
||||
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
|
||||
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal` 。
|
||||
|
||||
### createEdge
|
||||
|
||||
@ -168,7 +168,7 @@ const graph = new Graph({
|
||||
|
||||
### validateMagnet
|
||||
|
||||
点击 `magnet` 时 根据 `validateMagnet` 返回值来判断是否新增边，触发时机是 `magnet` 被按下，如果返回 `false`，则没有任何反应，如果返回 `true`，会在当前 `magnet` 创建一条新的边。
|
||||
点击 `magnet` 时 根据 `validateMagnet` 返回值来判断是否新增边，触发时机是 `magnet` 被按下，如果返回 `false` ，则没有任何反应，如果返回 `true` ，会在当前 `magnet` 创建一条新的边。
|
||||
|
||||
```ts
|
||||
validateMagnet({ e, magnet, view, cell }) {
|
||||
@ -178,7 +178,7 @@ validateMagnet({ e, magnet, view, cell }) {
|
||||
|
||||
### validateConnection
|
||||
|
||||
在移动边的时候判断连接是否有效，如果返回 `false`，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
|
||||
在移动边的时候判断连接是否有效，如果返回 `false` ，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
|
||||
|
||||
```ts
|
||||
validateConnection({
|
||||
@ -200,7 +200,7 @@ validateConnection({
|
||||
|
||||
### validateEdge
|
||||
|
||||
当停止拖动边的时候根据 `validateEdge` 返回值来判断边是否生效，如果返回 `false`, 该边会被清除。
|
||||
当停止拖动边的时候根据 `validateEdge` 返回值来判断边是否生效，如果返回 `false` , 该边会被清除。
|
||||
|
||||
```ts
|
||||
validateEdge({ edge, type, previous }) {
|
||||
@ -240,19 +240,19 @@ export interface Embedding {
|
||||
|
||||
### enabled
|
||||
|
||||
是否允许节点之间嵌套，默认值为 `false`。
|
||||
是否允许节点之间嵌套，默认值为 `false` 。
|
||||
|
||||
### findParent
|
||||
|
||||
在节点被移动时通过 `findParent` 指定的方法返回父节点。默认值为 `bbox`。
|
||||
在节点被移动时通过 `findParent` 指定的方法返回父节点。默认值为 `bbox` 。
|
||||
|
||||
### frontOnly
|
||||
|
||||
如果 `frontOnly` 为 `true`，则只能嵌入显示在最前面的节点，默认值为 `true`。
|
||||
如果 `frontOnly` 为 `true` ，则只能嵌入显示在最前面的节点，默认值为 `true` 。
|
||||
|
||||
### validate
|
||||
|
||||
`validate` 为判断节点能否被嵌入父节点的函数，默认返回 `true`。
|
||||
`validate` 为判断节点能否被嵌入父节点的函数，默认返回 `true` 。
|
||||
|
||||
## interacting
|
||||
|
||||
@ -283,17 +283,17 @@ export type Interacting =
|
||||
| ((this: Graph, cellView: CellView) => InteractionMap | boolean);
|
||||
```
|
||||
|
||||
- `boolean` 节点或边是否可交互
|
||||
- `InteractionMap` 节点或边的交互细节，支持以下属性：
|
||||
- `'nodeMovable'` 节点是否可以被移动。
|
||||
- `'magnetConnectable'` 当在具有 `'magnet'` 属性的元素上按下鼠标开始拖动时，是否触发连线交互。
|
||||
- `'edgeMovable'` 边是否可以被移动。
|
||||
- `'edgeLabelMovable'` 边的标签是否可以被移动。
|
||||
- `'arrowheadMovable'` 边的起始/终止箭头是否可以被移动。
|
||||
- `'vertexMovable'` 边的路径点是否可以被移动。
|
||||
- `'vertexAddable'` 是否可以添加边的路径点。
|
||||
- `'vertexDeletable'` 边的路径点是否可以被删除。
|
||||
- `(this: Graph, cellView: CellView) => InteractionMap | boolean`
|
||||
* `boolean` 节点或边是否可交互
|
||||
* `InteractionMap` 节点或边的交互细节，支持以下属性：
|
||||
+ `'nodeMovable'` 节点是否可以被移动。
|
||||
+ `'magnetConnectable'` 当在具有 `'magnet'` 属性的元素上按下鼠标开始拖动时，是否触发连线交互。
|
||||
+ `'edgeMovable'` 边是否可以被移动。
|
||||
+ `'edgeLabelMovable'` 边的标签是否可以被移动。
|
||||
+ `'arrowheadMovable'` 边的起始/终止箭头是否可以被移动。
|
||||
+ `'vertexMovable'` 边的路径点是否可以被移动。
|
||||
+ `'vertexAddable'` 是否可以添加边的路径点。
|
||||
+ `'vertexDeletable'` 边的路径点是否可以被删除。
|
||||
* `(this: Graph, cellView: CellView) => InteractionMap | boolean`
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
@ -334,10 +334,41 @@ new Graph({
|
||||
|
||||
支持的 `highlighting` 配置项有：
|
||||
|
||||
- `'default'` 默认高亮选项，当以下几种高亮配置缺省时被使用。
|
||||
- `'embedding'` 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用。
|
||||
- `'nodeAvailable'` 连线过程中，节点可以被链接时被使用。
|
||||
- `'magnetAvailable'` 连线过程中，连接桩可以被链接时被使用。
|
||||
- `'magnetAdsorbed'` 连线过程中，自动吸附到连接桩时被使用。
|
||||
* `'default'` 默认高亮选项，当以下几种高亮配置缺省时被使用。
|
||||
* `'embedding'` 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用。
|
||||
* `'nodeAvailable'` 连线过程中，节点可以被链接时被使用。
|
||||
* `'magnetAvailable'` 连线过程中，连接桩可以被链接时被使用。
|
||||
* `'magnetAdsorbed'` 连线过程中，自动吸附到连接桩时被使用。
|
||||
|
||||
上面 `magnetAvailable.name` 其实是高亮器的名称，X6 内置了 `stroke` 和 `className` 两种高亮器，详细信息参考 [Highlighter](/zh/docs/api/registry/highlighter)
|
||||
|
||||
## trasnlating
|
||||
|
||||
可以在全局配置 `translating` 来限制节点的移动范围。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
translating: {
|
||||
restrict: true,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### restrict
|
||||
|
||||
节点的可移动范围。支持以下两种方式：
|
||||
|
||||
* `boolean` 如果设置为 `true`, 节点不能移动超出画布区域
|
||||
* `Rectangle.RectangleLike | (arg: CellView) => Rectangle.RectangleLike` 指定一个节点的移动范围
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
translating: {
|
||||
restrict: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user