Compare commits
5 Commits
@antv/x6-s
...
feat/vite
| Author | SHA1 | Date | |
|---|---|---|---|
| 8e2616dfe1 | |||
| 07f4739979 | |||
| 824560ddda | |||
| 9e37ea9f78 | |||
| 610349d924 |
24
examples/vite-example/.gitignore
vendored
Normal file
24
examples/vite-example/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# 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?
|
||||
13
examples/vite-example/index.html
Normal file
13
examples/vite-example/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!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>
|
||||
30
examples/vite-example/package.json
Normal file
30
examples/vite-example/package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"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
examples/vite-example/public/antv.svg
Normal file
1
examples/vite-example/public/antv.svg
Normal file
@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
72
examples/vite-example/src/index.less
Normal file
72
examples/vite-example/src/index.less
Normal file
@ -0,0 +1,72 @@
|
||||
: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;
|
||||
}
|
||||
}
|
||||
14
examples/vite-example/src/index.tsx
Normal file
14
examples/vite-example/src/index.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
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>,
|
||||
)
|
||||
43
examples/vite-example/src/pages/_layout.module.less
Normal file
43
examples/vite-example/src/pages/_layout.module.less
Normal file
@ -0,0 +1,43 @@
|
||||
.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;
|
||||
}
|
||||
57
examples/vite-example/src/pages/_layout.tsx
Normal file
57
examples/vite-example/src/pages/_layout.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
5
examples/vite-example/src/pages/animation/transition.tsx
Normal file
5
examples/vite-example/src/pages/animation/transition.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>transition</div>
|
||||
}
|
||||
5
examples/vite-example/src/pages/auto-resize/index.tsx
Normal file
5
examples/vite-example/src/pages/auto-resize/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>auto-size</div>
|
||||
}
|
||||
87
examples/vite-example/src/routes.tsx
Normal file
87
examples/vite-example/src/routes.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
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
Normal file
1
examples/vite-example/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
examples/vite-example/tsconfig.json
Normal file
21
examples/vite-example/tsconfig.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"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" }]
|
||||
}
|
||||
9
examples/vite-example/tsconfig.node.json
Normal file
9
examples/vite-example/tsconfig.node.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
examples/vite-example/vite.config.ts
Normal file
7
examples/vite-example/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@ -1,3 +1,10 @@
|
||||
## @antv/x6-example-features [2.0.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.0...@antv/x6-example-features@2.0.1) (2022-12-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* make resizing options take effect ([#3014](https://github.com/antvis/X6/issues/3014)) ([604c024](https://github.com/antvis/X6/commit/604c0244cd71ec8e911754dfe524f12c04e4e9ad))
|
||||
|
||||
# @antv/x6-example-features [2.0.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@1.1.2...@antv/x6-example-features@2.0.0) (2022-11-24)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/x6-example-features",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.1",
|
||||
"scripts": {
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
"prettier --write --ignore-unknown"
|
||||
],
|
||||
"*.less": [
|
||||
"stylelint --syntax less --fix"
|
||||
"stylelint --custom-syntax postcss-less --fix"
|
||||
],
|
||||
"*.js": [
|
||||
"prettier --write"
|
||||
@ -137,7 +137,6 @@
|
||||
"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",
|
||||
@ -162,6 +161,7 @@
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.2.0"
|
||||
"@rollup/plugin-terser": "^0.2.0",
|
||||
"postcss-less": "^6.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-scroller",
|
||||
"version": "2.0.6",
|
||||
"version": "2.0.7",
|
||||
"description": "scroller plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -47,6 +47,7 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
|
||||
super()
|
||||
|
||||
this.options = ScrollerImpl.getOptions(options)
|
||||
this.onUpdate = FunctionExt.debounce(this.onUpdate, 200)
|
||||
|
||||
const scale = this.graph.transform.getScale()
|
||||
this.sx = scale.sx
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
# @antv/x6 [2.1.0](https://github.com/antvis/x6/compare/@antv/x6@2.0.9...@antv/x6@2.1.0) (2022-12-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add snapToGrid options for manhattan router ([#3062](https://github.com/antvis/x6/issues/3062)) ([824560d](https://github.com/antvis/x6/commit/824560ddda7016158cce3166773e1af009bfe498))
|
||||
|
||||
## @antv/x6 [2.0.9](https://github.com/antvis/x6/compare/@antv/x6@2.0.8...@antv/x6@2.0.9) (2022-12-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* :bug: char ghosting when edit text ([#2560](https://github.com/antvis/x6/issues/2560)) ([#3043](https://github.com/antvis/x6/issues/3043)) ([15284e7](https://github.com/antvis/x6/commit/15284e778a09f4f2e5a8f777330744b0cfe88e9e))
|
||||
|
||||
## @antv/x6 [2.0.8](https://github.com/antvis/x6/compare/@antv/x6@2.0.7...@antv/x6@2.0.8) (2022-12-08)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6",
|
||||
"version": "2.0.8",
|
||||
"version": "2.1.0",
|
||||
"description": "JavaScript diagramming library that uses SVG and HTML for rendering",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -12,3 +12,5 @@ export * from './edge-anchor'
|
||||
export * from './connection-point'
|
||||
export * from './router'
|
||||
export * from './connector'
|
||||
|
||||
export * from './registry'
|
||||
|
||||
@ -71,15 +71,17 @@ export class ObstacleMap {
|
||||
const mapGridSize = this.mapGridSize
|
||||
|
||||
model.getNodes().reduce((map, node) => {
|
||||
const shape = node.shape
|
||||
const excludeShapes = options.excludeShapes
|
||||
const excType = shape ? excludeShapes.includes(shape) : false
|
||||
const excTerminal = excludedTerminals.some((cell) => cell.id === node.id)
|
||||
const excNode = options.excludeNodes.includes(node)
|
||||
const excAncestor = excludedAncestors.includes(node.id)
|
||||
const excHidden = options.excludeHiddenNodes && !node.isVisible()
|
||||
const excluded =
|
||||
excType || excTerminal || excNode || excAncestor || excHidden
|
||||
const excludedTerminal = excludedTerminals.some(
|
||||
(cell) => cell.id === node.id,
|
||||
)
|
||||
const excludedNode = options.excludeNodes.some((item) => {
|
||||
if (typeof item === 'string') {
|
||||
return node.id === item
|
||||
}
|
||||
return item === node
|
||||
})
|
||||
const excludedAncestor = excludedAncestors.includes(node.id)
|
||||
const excluded = excludedTerminal || excludedNode || excludedAncestor
|
||||
|
||||
if (!excluded) {
|
||||
const bbox = node.getBBox().moveAndExpand(options.paddingBox)
|
||||
|
||||
@ -41,20 +41,10 @@ export interface ResolvedOptions {
|
||||
*/
|
||||
excludeTerminals: Edge.TerminalType[]
|
||||
|
||||
/**
|
||||
* Should certain types of nodes not be considered as obstacles?
|
||||
*/
|
||||
excludeShapes: string[]
|
||||
|
||||
/**
|
||||
* Should certain hidden nodes not be considered as obstacles?
|
||||
*/
|
||||
excludeHiddenNodes: boolean
|
||||
|
||||
/**
|
||||
* Should certain nodes not be considered as obstacles?
|
||||
*/
|
||||
excludeNodes: Node[]
|
||||
excludeNodes: (Node | string)[]
|
||||
|
||||
/**
|
||||
* Possible starting directions from a node.
|
||||
@ -132,6 +122,9 @@ export interface ResolvedOptions {
|
||||
) => Point[] | null
|
||||
|
||||
previousDirectionAngle?: number | null
|
||||
|
||||
// Whether the calculation results are aligned with the grid
|
||||
snapToGrid?: boolean
|
||||
}
|
||||
|
||||
export type ManhattanRouterOptions = {
|
||||
@ -145,9 +138,7 @@ export const defaults: ManhattanRouterOptions = {
|
||||
maxDirectionChange: 90,
|
||||
perpendicular: true,
|
||||
excludeTerminals: [],
|
||||
excludeShapes: [], // ['text']
|
||||
excludeNodes: [],
|
||||
excludeHiddenNodes: false,
|
||||
startDirections: ['top', 'right', 'bottom', 'left'],
|
||||
endDirections: ['top', 'right', 'bottom', 'left'],
|
||||
directionMap: {
|
||||
@ -195,6 +186,7 @@ export const defaults: ManhattanRouterOptions = {
|
||||
|
||||
fallbackRouter: orth,
|
||||
draggingRouter: null,
|
||||
snapToGrid: true,
|
||||
}
|
||||
|
||||
export function resolve<T>(
|
||||
|
||||
@ -282,7 +282,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
)
|
||||
|
||||
const oldVertices = vertices.map((p) => Point.create(p))
|
||||
const newVertices: Point[] = []
|
||||
let newVertices: Point[] = []
|
||||
|
||||
// The origin of first route's grid, does not need snapping
|
||||
let tailPoint = sourceEndpoint
|
||||
@ -350,5 +350,12 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
newVertices.push(...partialRoute)
|
||||
}
|
||||
|
||||
if (options.snapToGrid) {
|
||||
newVertices = newVertices.map((vertice) => {
|
||||
const gridSize = edgeView.graph.grid.getGridSize()
|
||||
return vertice.snapToGrid(gridSize)
|
||||
})
|
||||
}
|
||||
|
||||
return newVertices
|
||||
}
|
||||
|
||||
630
pnpm-lock.yaml
generated
630
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
88
sites/x6-site/docs/tutorial/getting-started.en.md
Normal file
88
sites/x6-site/docs/tutorial/getting-started.en.md
Normal file
@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Quickstart
|
||||
order: 1
|
||||
redirect_from:
|
||||
- /en/docs
|
||||
- /en/docs/tutorial
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
X6 is published on npm as @antv/x6.
|
||||
|
||||
```shell
|
||||
# npm
|
||||
$ npm install @antv/x6 --save
|
||||
|
||||
# yarn
|
||||
$ yarn add @antv/x6
|
||||
```
|
||||
|
||||
If using the umd package, you can use any of the following CDN.
|
||||
|
||||
- https://unpkg.com/@antv/x6/dist/index.js
|
||||
- https://cdn.jsdelivr.net/npm/@antv/x6/dist/index.js
|
||||
- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.js
|
||||
|
||||
## Basic Usage
|
||||
|
||||
It's recommended to learn [SVG Basics](https://codepen.io/HunorMarton/full/PoGbgqj) before you begin, and with some basic SVG knowledge in mind, let's start with a simple example to play with X6.
|
||||
|
||||
### 1. Init Graph
|
||||
|
||||
Creating a graph container on the page and then initializing the graph object, then you can set the graph style through configuration, such as the background color.
|
||||
|
||||
```html
|
||||
<div id="container"></div>
|
||||
```
|
||||
|
||||
```ts
|
||||
import { Graph } from "@antv/x6";
|
||||
|
||||
const graph = new Graph({
|
||||
container: document.getElementById("container"),
|
||||
width: 800,
|
||||
height: 600,
|
||||
background: {
|
||||
color: "#F2F7FA",
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Render nodes and edges
|
||||
|
||||
X6 supports json data, you can also use the `attrs` attribute to customize the styles of nodes and edges (like `CSS`).
|
||||
|
||||
<code id="helloworld" src="@/src/tutorial/getting-started/helloworld/index.tsx"></code>
|
||||
|
||||
### 3. Using the React Node
|
||||
|
||||
X6 supports using `SVG` and `HTML` to render node content. On this basis, we can also use `React` and `Vue` components to render nodes, which will be very convenient in the development process.
|
||||
|
||||
For example, we have a new requirement: add a right-click menu to the node. It would be more complicated to implement using `SVG`, We can easily implement it with react node. We can use the React render package `@antv/x6-react-shape` that comes with X6.
|
||||
|
||||
<code id="react-shape" src="@/src/tutorial/getting-started/react-shape/index.tsx"></code>
|
||||
|
||||
### 4. Using the Plugins
|
||||
|
||||
In addition to the basic element rendering capabilities, X6 also comes with a large number of built-in plugins for graph editing. Using these mature plugins, we can improve the development efficiency. For example, we add a snapline plugin to the graph, when a moving node is aligned with other nodes, the snapline will automatically appear.
|
||||
|
||||
```ts
|
||||
import { Snapline } from "@antv/x6-plugin-snapline";
|
||||
|
||||
graph.use(
|
||||
new Snapline({
|
||||
enabled: true,
|
||||
})
|
||||
);
|
||||
```
|
||||
|
||||
<code id="use-plugin" src="@/src/tutorial/getting-started/use-plugin/index.tsx"></code>
|
||||
|
||||
### 5. Export the Data
|
||||
|
||||
In addition to using `fromJSON` to render JSON data to the graph, of course, there is also support for exporting the data from the graph width `toJSON`, so that we can serialize the graph data and store it to the server.
|
||||
|
||||
```ts
|
||||
graph.toJSON();
|
||||
```
|
||||
51
sites/x6-sites/CHANGELOG.md
Normal file
51
sites/x6-sites/CHANGELOG.md
Normal file
@ -0,0 +1,51 @@
|
||||
# @antv/x6-sites [1.2.0](https://github.com/antvis/X6/compare/@antv/x6-sites@1.1.2...@antv/x6-sites@1.2.0) (2022-12-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 🐛 add keepId for node clone ([#1254](https://github.com/antvis/X6/issues/1254)) ([cef5862](https://github.com/antvis/X6/commit/cef58628902aa97efa62f022203ebcaca3639092))
|
||||
* 🐛 add updateCellId api ([#1739](https://github.com/antvis/X6/issues/1739)) ([78cdb3b](https://github.com/antvis/X6/commit/78cdb3bd56e7655ffcb2e5046d00f5d4f932cd3c))
|
||||
* 🐛 alerts on lgtm.com ([#1104](https://github.com/antvis/X6/issues/1104)) ([eb2791d](https://github.com/antvis/X6/commit/eb2791dee16440d8c8600b7819552892c2ce2c02))
|
||||
* 🐛 change home path in speedup js ([#1369](https://github.com/antvis/X6/issues/1369)) ([31f8960](https://github.com/antvis/X6/commit/31f8960e72b0567bb13683e51db8b97207604c0b))
|
||||
* 🐛 change type of padding in ScaleContentToFitOptions ([#1203](https://github.com/antvis/X6/issues/1203)) ([1031d06](https://github.com/antvis/X6/commit/1031d0653b4641adfc27b7572b57d23fec0cc182))
|
||||
* 🐛 fix add tools not work ([f5d1d6a](https://github.com/antvis/X6/commit/f5d1d6a326021247ee8967675fc9490ddbb6d0aa))
|
||||
* 🐛 fix validateEdge trigger timming ([48b72a1](https://github.com/antvis/X6/commit/48b72a1332d536a8b640fbfc6a3e4c463f5b79bc))
|
||||
* 🐛 not create label when text is empty ([#1783](https://github.com/antvis/X6/issues/1783)) ([ed1fcd1](https://github.com/antvis/X6/commit/ed1fcd1f26601150d1b7913b8eaaf329a958af53))
|
||||
* 🐛 optimize addTools params ([1366eac](https://github.com/antvis/X6/commit/1366eac7f554ede24db6c558c581142ecb7c1a37))
|
||||
* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/X6/issues/1391)) ([cc01fdf](https://github.com/antvis/X6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
|
||||
* 🐛 optimize usage of mousewheel ([37b3010](https://github.com/antvis/X6/commit/37b3010f763926fbd04d822e74238f6e206c024c))
|
||||
* 🐛 release x6 v1.28.2 ([#1654](https://github.com/antvis/X6/issues/1654)) ([745b90a](https://github.com/antvis/X6/commit/745b90ac94dbbd9443ecf1456e6a5aa9eb646594))
|
||||
* 🐛 remove single tool by name or index ([#565](https://github.com/antvis/X6/issues/565)) ([73d5d67](https://github.com/antvis/X6/commit/73d5d67541d4950a9c362a3bc7c7e6200640b40f)), closes [#552](https://github.com/antvis/X6/issues/552)
|
||||
* 🐛 unified panning api ([#1151](https://github.com/antvis/X6/issues/1151)) ([d60e9d8](https://github.com/antvis/X6/commit/d60e9d882dfa85bf39b47ba75a6379b5cbd1a965))
|
||||
* 🐛 update layout version ([35abd4a](https://github.com/antvis/X6/commit/35abd4a04d04d2f4ff84cf2604f39b69f5303f8e))
|
||||
* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/X6/issues/1425)) ([4208846](https://github.com/antvis/X6/commit/4208846337326d8983f1662faa8da67efd8568b4))
|
||||
* add `placeholder` and `notFoundText` for stencil component ([#574](https://github.com/antvis/X6/issues/574)) ([c42464b](https://github.com/antvis/X6/commit/c42464b376835dc5c4e2139582fbe09df4183153)), closes [#555](https://github.com/antvis/X6/issues/555)
|
||||
* curve demo ([#1306](https://github.com/antvis/X6/issues/1306)) ([de13692](https://github.com/antvis/X6/commit/de1369282f00e24180c7269e3373e67ae79aa338))
|
||||
* fix angular typo ([#1154](https://github.com/antvis/X6/issues/1154)) ([25b47c3](https://github.com/antvis/X6/commit/25b47c39b9d036a6d55a28450792d4f788bf903f))
|
||||
* fix can not create node when mouseup in demo ([#628](https://github.com/antvis/X6/issues/628)) ([c336262](https://github.com/antvis/X6/commit/c336262cc7d1697a2a5f8e8ff229767415f136e0))
|
||||
* fix contextmenu show multiple times ([5d437ce](https://github.com/antvis/X6/commit/5d437cef07427bf9f2cbae9b2e08dd4a6544ff70))
|
||||
* fix demo import path error ([2ebf581](https://github.com/antvis/X6/commit/2ebf581dc1ec9c5ee4501917a7cbddbbb4b69c0f))
|
||||
* fix editable cell demo ([7e6d003](https://github.com/antvis/X6/commit/7e6d003d7d937c35a41ed326cdb1d78041826da9))
|
||||
* fix path error in custom router demo ([#620](https://github.com/antvis/X6/issues/620)) ([7cd3a7e](https://github.com/antvis/X6/commit/7cd3a7e57d772481ad33949ee832a36aab59ef3a))
|
||||
* fix trigger multiple moved event when close movable config ([3eb9d69](https://github.com/antvis/X6/commit/3eb9d6934efc5d73f7dd830d169a166ccb7bd9ac))
|
||||
* remove useless repo url ([2f92e33](https://github.com/antvis/X6/commit/2f92e33d0e42801624b9e32f3e508445ed34e6d0))
|
||||
* x6 support ie 11 ([#585](https://github.com/antvis/X6/issues/585)) ([5df9aaa](https://github.com/antvis/X6/commit/5df9aaaa88f943402d18fed6b7e5ae0abd5ed9b9))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* ✨ allow disable auto resize in some high performance scenario ([9bfa702](https://github.com/antvis/X6/commit/9bfa7025c05b29c0774a499d88961a9cf4394dda))
|
||||
* ✨ add cell-editor tool ([#1202](https://github.com/antvis/X6/issues/1202)) ([98e80d1](https://github.com/antvis/X6/commit/98e80d10c9bfbd0c8486944dd212db2db731a225))
|
||||
* ✨ add containerParent config for dnd ([fc6498f](https://github.com/antvis/X6/commit/fc6498f6e2d52d05eab6790851c3437c6c28ee2b))
|
||||
* ✨ add direction option for midside node-anchor ([ee62cc0](https://github.com/antvis/X6/commit/ee62cc07ba706037e0a10e08d5440472e1ce97c9))
|
||||
* ✨ add excludeHiddenNodes for manhattan router ([#1400](https://github.com/antvis/X6/issues/1400)) ([28a472a](https://github.com/antvis/X6/commit/28a472ab8e3097ffd12be0fb8909c084156e5afd))
|
||||
* ✨ add insertPort api ([#1763](https://github.com/antvis/X6/issues/1763)) ([6809dba](https://github.com/antvis/X6/commit/6809dba2d86308d0b315d0c6164f91d80e8a40ff))
|
||||
* ✨ add resizeGroup for stencil ([#1388](https://github.com/antvis/X6/issues/1388)) ([d9bec60](https://github.com/antvis/X6/commit/d9bec60ce3819f45151ac8d1336e2ae94842d3d4))
|
||||
* ✨ add rubberNode and rubberEdge config ([#949](https://github.com/antvis/X6/issues/949)) ([a2f6fb3](https://github.com/antvis/X6/commit/a2f6fb38d03ecac123f006ed33b3f71da7952355))
|
||||
* ✨ auto resize graph when container resized ([9c7bc9a](https://github.com/antvis/X6/commit/9c7bc9a4bb210451283663cd99a29bd6c79e2ec4)), closes [#531](https://github.com/antvis/X6/issues/531)
|
||||
* ✨ panning support rightMouseDown and mousehwheel ([728977c](https://github.com/antvis/X6/commit/728977c5843a9868736e7f2f3b9d0d77e8837d3c))
|
||||
* ✨ support minimap in normal graph ([f42160f](https://github.com/antvis/X6/commit/f42160f8259ca7cf290fe8a431a5fe1900b729a8))
|
||||
* add angualr shape ([#1141](https://github.com/antvis/X6/issues/1141)) ([398cca4](https://github.com/antvis/X6/commit/398cca43d3697c97f32f831b5fec73e416c0d733))
|
||||
* add following config for selection ([#687](https://github.com/antvis/X6/issues/687)) ([4de6701](https://github.com/antvis/X6/commit/4de6701c0b29f8e71293403b5b813bb64a27f3a5))
|
||||
* sync code from master ([#2004](https://github.com/antvis/X6/issues/2004)) ([c681405](https://github.com/antvis/X6/commit/c68140504bd21f654870f3d2fc1ad2f16f1113c8)), closes [#1974](https://github.com/antvis/X6/issues/1974) [#1977](https://github.com/antvis/X6/issues/1977) [#1985](https://github.com/antvis/X6/issues/1985) [#1988](https://github.com/antvis/X6/issues/1988) [#1991](https://github.com/antvis/X6/issues/1991) [#1989](https://github.com/antvis/X6/issues/1989)
|
||||
* x6-angular-shape support pass arguments ([#1250](https://github.com/antvis/X6/issues/1250)) ([b683f82](https://github.com/antvis/X6/commit/b683f82d70c05f993db46394bcc50d221b02443e))
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/x6-sites",
|
||||
"version": "2.0.0",
|
||||
"version": "1.2.0",
|
||||
"description": "X6 sites deployed on gh-pages",
|
||||
"scripts": {
|
||||
"dev": "dumi dev",
|
||||
|
||||
Reference in New Issue
Block a user