From 5d8b21dedf58419d58fb97c66d3a1c6fc3ba0b76 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Wed, 24 May 2023 20:56:31 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E4=BD=BF=E7=94=A8x6-html-shape=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2html2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/App.vue | 4 +- package.json | 12 ++-- src/Graph.tsx | 32 ++++----- src/Port.tsx | 34 ++++----- src/Shape.tsx | 135 +++++++++++++++++------------------ src/Teleport.tsx | 83 ++------------------- src/VueShape.tsx | 28 ++++---- src/components/Clipboard.tsx | 26 +++---- src/components/Keyboard.tsx | 6 +- src/utils.ts | 32 +++++++++ src/widgets/MiniMap.tsx | 6 +- src/widgets/Selection.tsx | 6 +- src/widgets/Snapline.tsx | 6 +- src/widgets/Stencil.tsx | 4 +- yarn.lock | 56 ++++++--------- 15 files changed, 206 insertions(+), 264 deletions(-) diff --git a/example/App.vue b/example/App.vue index 6afdf43..3e2fc32 100644 --- a/example/App.vue +++ b/example/App.vue @@ -24,7 +24,7 @@ - +
这里是一个vue的组件
 - + Hello {{name}} diff --git a/package.json b/package.json index 29e8632..e18e22c 100644 --- a/package.json +++ b/package.json @@ -22,13 +22,15 @@ "vue3" ], "peerDependencies": { - "@antv/x6": "^1.33.1", - "antv-x6-html2": "^1.0.5", - "vue": "^3.2.31" + "@antv/x6": "^2.0", + "@antv/x6-plugin-dnd": "^2.0", + "@antv/x6-plugin-stencil": "^2.0", + "vue": "^3.2.31", + "x6-html-shape": "^0.3" }, "devDependencies": { "@antv/graphin-icons": "^1.0.0", - "@antv/x6": "^1.33.1", + "@antv/x6": "^2.0", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/babel-plugin-jsx": "^1.1.1", @@ -106,7 +108,7 @@ ] }, "dependencies": { - "antv-x6-html2": "^1.0.6", + "antv-x6-html2": "^1.0.5", "resize-detector": "^0.3.0" } } diff --git a/src/Graph.tsx b/src/Graph.tsx index 07c573a..29de445 100644 --- a/src/Graph.tsx +++ b/src/Graph.tsx @@ -1,27 +1,18 @@ // @ts-nocheck -import { defineComponent, onMounted, ref, watch, watchEffect, markRaw, shallowReactive, Fragment, provide } from 'vue'; +import { DefineComponent, defineComponent, onMounted, onUnmounted, ref, watch, watchEffect, markRaw, shallowReactive, Fragment, provide } from 'vue'; import * as X6 from '@antv/x6' import { createContext, cellContextSymbol } from './GraphContext' // import clone from '@antv/util/es/clone' import { addListener, removeListener } from 'resize-detector' -import { debounce } from './utils' +import { debounce, processProps, bindEvent } from './utils' -export const GraphProps = [ - 'width', 'height', 'autoResize', 'panning', - 'grid', 'background', 'snapline', 'scroller', 'minimap', 'history', 'clipboard', 'keyboard', 'mousewheel', 'selecting', - 'rotating', 'resizing', 'translating', 'transforming', 'embedding', 'connecting', 'highlighting', 'interacting', 'sorting', - 'async', 'frozen', 'checkView', 'magnetThreshold', 'moveThreshold', 'clickThreshold', - 'preventDefaultContextMenu', 'preventDefaultBlankAction', - 'guard', 'allowRubberband', 'allowPanning', - 'getCellView', 'createCellView', 'getHTMLComponent', - 'onPortRendered', 'onEdgeLabelRendered', 'onToolItemCreated', 'model', -] - -const Graph = defineComponent({ +const Graph: DefineComponent = defineComponent({ + inheritAttrs: false, name: 'Graph', - props: GraphProps, - setup(props, { emit }) { + emits: ['ready'], + setup(_, { emit, attrs }) { + const { props={}, events={} } = processProps(attrs) const { width, height, ...otherOptions } = props; const self = markRaw({ props, @@ -31,7 +22,7 @@ const Graph = defineComponent({ layout: {}, options: { ...otherOptions }, }) - const isReady = ref(false) + const isReady = ref(null) // self.props不会同步变化 watch(() => props, (newProps) => self.props = {...newProps}) @@ -73,7 +64,7 @@ const Graph = defineComponent({ self.graph = new X6.Graph(self.options) contextRef.graph = self.graph - isReady.value = true + isReady.value = bindEvent(null, events, self.graph) emit('ready', { graph: self.graph }) } @@ -98,6 +89,9 @@ const Graph = defineComponent({ onMounted(() => { initGraphInstance() }) + onUnmounted(() => { + isReady.value && isReady.value() + }) return { graphDOM, @@ -117,7 +111,7 @@ const Graph = defineComponent({ height: '100%', }} ref="graphDOM" />
- {isReady && + {!!isReady && {slots.default ? slots.default() : null} {slots.components ? slots.components() : null} } diff --git a/src/Port.tsx b/src/Port.tsx index a3acf0d..beb3d13 100644 --- a/src/Port.tsx +++ b/src/Port.tsx @@ -37,23 +37,23 @@ export const Port = defineComponent({ } } // 监听magnet变化，动态设置magnet - watch(() => props.magnet, setMagnet) - onMounted(() => { - const { id, magnet, group, ...options } = props - // Port单独使用的时候，groupcontext为空 - const { name: defaultGroup } = groupContext || {} - if (cell) { - if (cell.hasPort(id)) { - cell.setPortProp(id, mergeOption({ ...options, group: group || defaultGroup }, {})) - } else { - cell.addPort(mergeOption({ ...options, id, group: group || defaultGroup }, {})) - } - setMagnet(magnet !== false) - } - }) - onUnmounted(() => { - cell && cell.removePort(props.id) - }) + // watch(() => props.magnet, setMagnet) + // onMounted(() => { + // const { id, magnet, group, ...options } = props + // // Port单独使用的时候，groupcontext为空 + // const { name: defaultGroup } = groupContext || {} + // if (cell) { + // if (cell.hasPort(id)) { + // cell.setPortProp(id, mergeOption({ ...options, group: group || defaultGroup }, {})) + // } else { + // cell.addPort(mergeOption({ ...options, id, group: group || defaultGroup }, {})) + // } + // setMagnet(magnet !== false) + // } + // }) + // onUnmounted(() => { + // cell && cell.removePort(props.id) + // }) return () => null } }) diff --git a/src/Shape.tsx b/src/Shape.tsx index 568e90d..00a245e 100644 --- a/src/Shape.tsx +++ b/src/Shape.tsx @@ -1,8 +1,9 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, ref, watch, provide, shallowReactive, inject, Fragment } from 'vue'; -import { Node as X6Node, Edge as X6Edge, Shape, Cell as BaseShape } from '@antv/x6' +import { defineComponent, onMounted, onUnmounted, ref, watch, watchEffect, provide, shallowReactive, inject, Fragment } from 'vue'; +import { Node as X6Node, Edge as X6Edge, Shape, Cell as BaseShape, ObjectExt } from '@antv/x6' import { useContext, contextSymbol } from './GraphContext' import { cellContextSymbol, portGroupContextSymbol } from './GraphContext' +import { processProps, bindEvent } from './utils' export const useCellEvent = (name, handler, options={}) => { const { graph } = useContext() @@ -36,9 +37,24 @@ export const useCellEvent = (name, handler, options={}) => { return clear } +const createCell = (p) => { + const { props, events } = processProps(p) + const { id, shape, x, y, width, height, angle, ...otherOptions } = props + // 从registry获取注册的类型，获取不到就使用Cell + const ShapeClass = X6Node.registry.get(shape) || X6Edge.registry.get(shape) || BaseShape + return new ShapeClass({ + id, shape, + width: Number(width) || 160, + height: Number(height) || 40, + x: Number(x) || 0, + y: Number(y) || 0, + angle: Number(angle) || 0, + ...otherOptions + }) +} + export const useCell = (props, { emit }) => { // 这里如果传入的不是function就包裹一层 - const getProps = typeof props == 'function' ? props : () => props const { graph } = useContext() const cell = ref() @@ -48,33 +64,28 @@ export const useCell = (props, { emit }) => { // 避免injection not found警告 provide(portGroupContextSymbol, { name: '' }) - const added = (e) => emit('added', e) - const removed = (e) => emit('removed', e) - // 监听其他变化 - useWatchProps(cell, getProps) - // 默认给组件绑定一个监听change:*的回调 - useCellEvent('cell:change:*', ({ key, ...ev }) => emit(`cell:change:${key}`, ev), { cell }) - + watch(() => props, newProps => { + console.log('watch update', newProps) + const newCell = createCell(newProps) + const prop = newCell.getProp() + if (!ObjectExt.isEqual(cell.value.getProp(), prop)) { + Object.keys(prop).forEach((key) => { + if (['id', 'parent', 'shape'].indexOf(key) === -1) { + cell.value.setProp(key, prop[key]) + } + }) + } + }) + const removeEvent = ref() onMounted(() => { - const props = getProps() - const { id, shape, x, y, width, height, angle, ...otherOptions } = props // 从registry获取注册的类型，获取不到就使用Cell - const ShapeClass = X6Node.registry.get(shape) || X6Edge.registry.get(shape) || BaseShape - cell.value = new ShapeClass({ - id, shape, - width: Number(width) || 160, - height: Number(height) || 40, - x: Number(x) || 0, - y: Number(y) || 0, - angle: Number(angle) || 0, - ...otherOptions - }) + cell.value = createCell(props) if (props.magnet === false || props.magnet === true) { cell.value.setAttrByPath(`${props.primer || cell.value.shape}/magnet`, !!props.magnet) } - cell.value.once('added', added) - cell.value.once('removed', removed) + const { events } = processProps(props) + removeEvent.value = bindEvent(cell.value, events, graph) // 共享给子组件 context.cell = cell.value // 当前节点添加到子节点 @@ -90,6 +101,10 @@ export const useCell = (props, { emit }) => { parent.cell.removeChild(cell.value) } graph.removeCell(cell.value) + if (removeEvent.value) { + console.log('removeEvent', cell.value.id) + removeEvent.value() + } }) return cell @@ -99,49 +114,6 @@ export const CellProps = ['id', 'markup', 'attrs', 'shape', 'view', 'zIndex', 'v export const EdgeProps = CellProps.concat('source', 'target', 'vertices', 'router', 'connector', 'labels', 'defaultLabel') export const NodeProps = CellProps.concat('x', 'y', 'width', 'height', 'angle', 'ports', 'label', 'magnet') -export const useWatchProps = (cell, getProps) => { - // 数值类型的转换后可能是NAN和MIN比较一下校验合法性 - const MIN = -1e20 - watch(() => getProps().markup, markup => markup && cell.value.setMarkup(markup), { deep: true }) - watch(() => getProps().attrs, attrs => attrs && cell.value.setAttrs(attrs), { deep: true }) - watch(() => Number(getProps().zIndex), zIndex => zIndex >= MIN && cell.value.setZIndex(zIndex)) - watch(() => getProps().visible, visible => (visible === false || visible === true) && cell.value.setVisible(visible)) - watch(() => getProps().data, data => data && cell.value.setData(data), { deep: true }) - watch(() => getProps().parent, p => p && cell.value.setProp('parent', p)) - - watch(() => getProps().source, source => source && cell.value.setSource(typeof source === 'string' ? {cell: source} : source), { deep: true }) - watch(() => getProps().target, target => target && cell.value.setTarget(typeof target === 'string' ? {cell: target} : target), { deep: true }) - watch(() => getProps().vertices, vertices => vertices && cell.value.setVertices(vertices), { deep: true }) - watch(() => getProps().router, router => router && cell.value.setRouter(router), { deep: true }) - watch(() => getProps().connector, connector => connector && cell.value.setConnector(connector), { deep: true }) - watch(() => getProps().labels, labels => labels && cell.value.setLabels(labels), { deep: true }) - - watch(() => [Number(getProps().x), Number(getProps().y)], position => { - const [x, y] = position - const pposition = cell.value.getProp('position') - cell.value.setProp('position', { - x: x > MIN ? x : pposition.x, - y: y > MIN ? y : pposition.y, - }) - }) - watch(() => [Number(getProps().width), Number(getProps().height)], size => { - const [width, height] = size - const psize = cell.value.getProp('size') - cell.value.setProp('size', { - width: width > MIN ? width : psize.width, - height: height > MIN ? height : psize.height, - }) - }) - watch(() => Number(getProps().angle), angle => angle > MIN && cell.value.rotate(angle, {absolute: true})) - watch(() => getProps().label, label => label && cell.value.setProp('label', label)) - // 增加配置是否可以连线 - watch(() => getProps().magnet, magnet => { - if (magnet === false || magnet === true) { - cell.value.setAttrByPath(`${getProps().primer || cell.value.shape}/magnet`, !!magnet) - } - }) -} - const Cell = defineComponent({ name: 'Cell', props: CellProps, @@ -159,17 +131,38 @@ const Cell = defineComponent({ const Shapes = {} +console.log('shape', Shape) +// BorderedImage +// Circle +// Cylinder +// DoubleEdge +// Edge +// Ellipse +// EmbeddedImage +// Empty +// HTML +// HeaderedRect +// Image +// InscribedImage +// Path +// Polygon +// Polyline +// Rect +// ShadowEdge +// TextBlock + Object.keys(Shape).forEach(name => { const ShapeClass = Shape[name] Shapes[name] = defineComponent({ + inheritAttrs: false, name, - props: /Edge/.test(name) ? EdgeProps : NodeProps, + // props: /Edge/.test(name) ? EdgeProps : NodeProps, inject: [contextSymbol, cellContextSymbol], - setup(props, context) { + setup(_, { attrs: props, slots, emit }) { const { shape: defaultShape } = ShapeClass.defaults || {} const { shape=defaultShape } = props - const cell = useCell({...props, shape}, context) - const { default: _default, port } = context.slots + const cell = useCell({...props, shape}, { emit }) + const { default: _default, port } = slots // port和default都有可能需要渲染 return () => cell.value ? {port && port()} diff --git a/src/Teleport.tsx b/src/Teleport.tsx index b0748b9..2db8115 100644 --- a/src/Teleport.tsx +++ b/src/Teleport.tsx @@ -2,21 +2,18 @@ import { onUpdated, onMounted, shallowReactive, shallowRef, watchEffect, watch, markRaw, defineComponent, computed } from "vue"; import { h, Teleport, Fragment, VNode, VNodeData, provide, inject, createApp } from "vue"; import { Graph, Node, Dom } from '@antv/x6' +import createTeleportRender from 'x6-html-shape/dist/teleport' -const items = shallowReactive<{[key: string]: any}>({}) -const mounted = shallowRef(false) +const state = shallowReactive<{[key: string]: any}>({items: []}) export const TeleportContainer = defineComponent({ name: 'TeleportContainer', setup() { - onMounted(() => { - mounted.value = true - }) return () => h( Fragment, {}, - Object.keys(items).map((id) => h(items[id])), + state.items.map((item) => h(item)), ) }, }) @@ -25,75 +22,9 @@ export function useTeleport() { return TeleportContainer } -export const connect = ( - id: string, - node: Node, - graph: Graph, - component: any, - container: HTMLDivElement, -) => { - items[id] = markRaw( - defineComponent({ - setup(props) { - provide('context', { graph, node, container }) - return () => { - return h(Teleport, { to: container } as typeof VNodeData, [ - h(component, { id, graph, node, container }), - ]) - } - }, - }), - ) -} - -export const disconnect = (id: string) => { - delete items[id] -} - -export function wrap(Component: any) { - // 如果使用原始的方式挂载，就需要这个变量 - let vm: any = null - - return { - mount: function(props: any) { - return new Promise((resolve) => { - const { graph, node, container } = props - const id = `${graph.view.cid}:${node.id}` - Dom.requestAnimationFrame(() => { - if (mounted.value) { - // 如果Teleport组件已经挂载，就使用，否则使用原始createApp - // 这里使用graph.view.id做前缀 - connect(id, node, graph, Component, container) - } else { - vm = createApp({ - render() { - return h(Component as any, { ...props }) - }, - provide() { - return { - context: props, - } - }, - }) - vm.mount(container) - } - resolve() - }) - }) - }, - unmount: function(props: any) { - const { graph, node } = props - if (mounted.value) { - // 如果Teleport组件挂载过就从items列表里面移除，否则使用unmount移除 - const id = `${graph.view.cid}:${node.id}` - disconnect(id) - } else { - if (vm) { - vm.unmount() - } - } - return Promise.resolve() - } - } +export function createRender(Component: any) { + const [render, Container] = createTeleportRender(Component) + state.items = [...state.items, Container] + return render } diff --git a/src/VueShape.tsx b/src/VueShape.tsx index e0b3cfb..9af0f07 100644 --- a/src/VueShape.tsx +++ b/src/VueShape.tsx @@ -2,8 +2,9 @@ import { h, defineComponent, shallowReactive, onMounted, onUnmounted, markRaw, nextTick, watch, watchEffect, shallowRef, Fragment } from 'vue'; import { NodeProps, useCell } from './Shape' import { contextSymbol, cellContextSymbol } from './GraphContext' -import 'antv-x6-html2' -import { wrap } from './Teleport' +import { register } from 'x6-html-shape' +// import createRender from 'x6-html-shape/dist/teleport' +import { createRender } from './Teleport' import { addListener, removeListener } from "resize-detector"; import { debounce } from './utils' @@ -11,14 +12,12 @@ export const VueShapeProps = NodeProps.concat('primer', 'useForeignObject', 'com export const useVueShape = (props, { slots, emit }) => { - // 兼容之间旧的数据 - const p = typeof props === 'function' ? props() : props const { id, autoResize=true, primer='circle', useForeignObject=true, component, // 这几个是@antv/x6-vue-shape独有的参数 - } = p - const Component = markRaw(component ? component : () => slots.default ? slots.default({props: p, item: cell.value}) : null) + } = props + const Component = markRaw(component ? component : () => slots.default ? slots.default({props, item: cell.value}) : null) const DataWatcher = defineComponent({ name: 'DataWatcher', @@ -62,28 +61,29 @@ export const useVueShape = (props, { slots, emit }) => { } }) - const cell = useCell(() => ({ + + const cell = useCell({ id, primer, useForeignObject, ...(typeof props === 'function' ? props() : props), - shape: 'html2', - html: markRaw(wrap(DataWatcher)), - }), {slots, emit}) + shape: 'x6-html-shape', + render: markRaw(createRender(DataWatcher)), + }, {slots, emit}) return cell } export const VueShape = defineComponent({ name: 'VueShape', - props: VueShapeProps, + inheritAttrs: false, inject: [contextSymbol, cellContextSymbol], - setup(props, context) { - const cell = useVueShape(props, context) + setup(_, context) { + const cell = useVueShape(context.attrs, context) const { default: _default, port } = context.slots // port和default都有可能需要渲染 // 配置component的时候，VueShape节点使用props.component渲染，这个时候，需要渲染default return () => cell.value ? {port && port()} - {!!props.component && _default && _default()} + {!!context.attrs.component && _default && _default()} : null } }) diff --git a/src/components/Clipboard.tsx b/src/components/Clipboard.tsx index 5162867..ec893df 100644 --- a/src/components/Clipboard.tsx +++ b/src/components/Clipboard.tsx @@ -15,7 +15,7 @@ export default defineComponent({ graph.enableClipboard() } } - watch(() => props.enabled, (enabled) => enableClipboard(enabled)) + // watch(() => props.enabled, (enabled) => enableClipboard(enabled)) const copy = () => { const cells = graph.getSelectedCells() if (cells.length) { @@ -38,18 +38,18 @@ export default defineComponent({ emit('paste', { cells, graph }) } } - onMounted(() => { - enableClipboard() - graph.bindKey('ctrl+c', copy) - graph.bindKey('ctrl+x', cut) - graph.bindKey('ctrl+v', paste) - }) - onUnmounted(() => { - graph.disableClipboard() - graph.unbindKey('ctrl+c') - graph.unbindKey('ctrl+x') - graph.unbindKey('ctrl+v') - }) + // onMounted(() => { + // enableClipboard() + // graph.bindKey('ctrl+c', copy) + // graph.bindKey('ctrl+x', cut) + // graph.bindKey('ctrl+v', paste) + // }) + // onUnmounted(() => { + // graph.disableClipboard() + // graph.unbindKey('ctrl+c') + // graph.unbindKey('ctrl+x') + // graph.unbindKey('ctrl+v') + // }) return () => null } }) diff --git a/src/components/Keyboard.tsx b/src/components/Keyboard.tsx index d062046..071d52f 100644 --- a/src/components/Keyboard.tsx +++ b/src/components/Keyboard.tsx @@ -18,9 +18,9 @@ export default defineComponent({ graph.disableKeyboard() graph.enableKeyboard() } - watch(() => props, () => update(), {deep: true}) - onMounted(() => update()) - onUnmounted(() => graph.disableKeyboard()) + // watch(() => props, () => update(), {deep: true}) + // onMounted(() => update()) + // onUnmounted(() => graph.disableKeyboard()) return () => null } }) diff --git a/src/utils.ts b/src/utils.ts index 8b7859b..20337a7 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -25,4 +25,36 @@ export const mergeOption = (defaultOptions, options) => { return options } +export const processProps = (props) => { + return Object.entries(props).reduce((res, [name, value]) => { + if (name.startsWith('on')) { + res.events[name.substr(2).toLowerCase()] = value + } else { + // enabled --> enabled: true + res.props[name] = value === "" ? true : value + } + return res + }, {props:{}, events: {}}) +} + +export const bindEvent = (node, events, graph) => { + // 绑定事件都是包了一层的，返回一个取消绑定的函数 + // 如果没有传node，那就直接绑定到graph上面 + const ubindEvents = Object.entries(events).map(([name, callback]) => { + const eventName = node ? `cell:${name}` : name + const handler = (e: any) => { + const { cell } = e + if (node && cell.id === node.id) { + // @ts-ignore + callback(e) + } else if (!node){ + callback(e) + } + } + graph.on(eventName, handler) + return () => graph.off(eventName, handler) + }) + return () => ubindEvents.forEach(h => h()) +} + diff --git a/src/widgets/MiniMap.tsx b/src/widgets/MiniMap.tsx index c2cf6dd..ca247fc 100644 --- a/src/widgets/MiniMap.tsx +++ b/src/widgets/MiniMap.tsx @@ -50,9 +50,9 @@ export default defineComponent({ graph.options.minimap = options graph.minimap.widget = graph.hook.createMiniMap() } - watch(() => props, () => create(), {deep: true}) - onMounted(() => create()) - onUnmounted(() => clear()) + // watch(() => props, () => create(), {deep: true}) + // onMounted(() => create()) + // onUnmounted(() => clear()) return () => { const { style = {} } = props return
containerRef.value = node} style={{ diff --git a/src/widgets/Selection.tsx b/src/widgets/Selection.tsx index c437b1f..cb06fd4 100644 --- a/src/widgets/Selection.tsx +++ b/src/widgets/Selection.tsx @@ -57,9 +57,9 @@ export default defineComponent({ graph.on('cell:unselected', unselected) graph.on('selection:changed', changed) } - watch(() => props, () => create(), {deep: true}) - onMounted(() => create()) - onUnmounted(() => clear()) + // watch(() => props, () => create(), {deep: true}) + // onMounted(() => create()) + // onUnmounted(() => clear()) return () => null } }) diff --git a/src/widgets/Snapline.tsx b/src/widgets/Snapline.tsx index d4d4f07..da4e1f7 100644 --- a/src/widgets/Snapline.tsx +++ b/src/widgets/Snapline.tsx @@ -20,9 +20,9 @@ export default defineComponent({ mergeOption(options, graph.snapline.widget.options) graph.enableSnapline() } - watch(() => props, () => updateSnapline(), {deep: true}) - onMounted(() => updateSnapline()) - onUnmounted(() => graph.disableSnapline()) + // watch(() => props, () => updateSnapline(), {deep: true}) + // onMounted(() => updateSnapline()) + // onUnmounted(() => graph.disableSnapline()) return () => null } }) diff --git a/src/widgets/Stencil.tsx b/src/widgets/Stencil.tsx index 1d9462b..8657c2e 100644 --- a/src/widgets/Stencil.tsx +++ b/src/widgets/Stencil.tsx @@ -1,9 +1,9 @@ // @ts-nocheck import { defineComponent, onMounted, onUnmounted, ref, nextTick, shallowReactive, provide, inject } from 'vue'; -import { Addon, FunctionExt } from '@antv/x6' +import { FunctionExt } from '@antv/x6' +import { Stencil } from '@antv/x6-plugin-stencil' import { useContext, contextSymbol, createContext } from '../GraphContext' import { mergeOption } from '../utils' -const { Stencil } = Addon export const stencilContextSymbol = String(Symbol('x6StencilContextSymbol')) export const StencilGroup = defineComponent({ diff --git a/yarn.lock b/yarn.lock index 532741b..d365526 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,16 +43,26 @@ resolved "https://registry.yarnpkg.com/@antv/graphin-icons/-/graphin-icons-1.0.0.tgz#86ba9e9ab6565bfe2ea1096e8678e76c279053f1" integrity sha512-2nogK6ZrDklnfIOJrqOAgD7iFLjfZIjLbA8pDUbeXN5c9b0Mu84oCfyqg8OmWwvi9Gt80eUzoplo73gKjZECJg== -"@antv/x6@^1.33.1": - version "1.33.1" - resolved "https://registry.yarnpkg.com/@antv/x6/-/x6-1.33.1.tgz#1d47e6c62f489abc910072d4640316087e7057ba" - integrity sha512-NW3mUDW+Od9hqas0URoaeih0we4gLipqdNEC7ozM7wRFEzpi9CDzfPZerHmhdKasUMwjIyyrN56uJEHGVnrp4Q== - dependencies: - csstype "^3.0.3" - jquery "^3.5.1" - jquery-mousewheel "^3.1.13" +"@antv/x6-common@^2.0.12": + version "2.0.12" + resolved "https://registry.yarnpkg.com/@antv/x6-common/-/x6-common-2.0.12.tgz#99b593110aabe88b59d34e3e6e66ba133c5a7dd9" + integrity sha512-7PcvHGJ2UhrBEtsLI6MaHw6BCMhy22leCH8vCaMvmF32EEQ/491v6DKVPhcpp0dYZNERpfqvAB1w407Aw+bwLA== + dependencies: lodash-es "^4.17.15" - mousetrap "^1.6.5" + utility-types "^3.10.0" + +"@antv/x6-geometry@^2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@antv/x6-geometry/-/x6-geometry-2.0.5.tgz#c158317d74135bedd78c2fdeb76f9c7cfa0ef0aa" + integrity sha512-MId6riEQkxphBpVeTcL4ZNXL4lScyvDEPLyIafvWMcWNTGK0jgkK7N20XSzqt8ltJb0mGUso5s56mrk8ysHu2A== + +"@antv/x6@^2.0": + version "2.11.1" + resolved "https://registry.yarnpkg.com/@antv/x6/-/x6-2.11.1.tgz#d0ae8d9137b52bf1c3724c882c13ed9ac124d6fb" + integrity sha512-DwyuT/zuTEhwsnKwCj67cadwLeEbB5jfdCxrkTnEm6pg0+vT3FinbF71IK7SHoY8d4HOHl+sJt7ikJfr61JqLw== + dependencies: + "@antv/x6-common" "^2.0.12" + "@antv/x6-geometry" "^2.0.5" utility-types "^3.10.0" "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3": @@ -2224,10 +2234,10 @@ ant-design-vue@^3.2.1: vue-types "^3.0.0" warning "^4.0.0" -antv-x6-html2@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/antv-x6-html2/-/antv-x6-html2-1.0.6.tgz#f2dae65c2e49e6a3a2132f29601056c8d9e10928" - integrity sha512-39Vl1qHPhh+9rNXQYzKH0G8T/GTVi0/ocRdbKBf97NB6Py6JhIXXyEdnLJqCvwiAMPqf8j1G+KCjQXNEHOmCfw== +antv-x6-html2@^1.0.5: + version "1.0.9" + resolved "https://registry.yarnpkg.com/antv-x6-html2/-/antv-x6-html2-1.0.9.tgz#7a6585db0bf32c3e222202cec76b509d73b467a5" + integrity sha512-3E5gQaRwGT7dGqfHJAKNN65ZpfA98X/Ss7v/tyVk07cdzhGCMoVs/oDBlXzH7yzmVgCMPyCacjzmAlMQpUYKAg== any-observable@^0.3.0: version "0.3.0" @@ -3749,11 +3759,6 @@ csstype@^2.6.8: resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda" integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA== -csstype@^3.0.3: - version "3.0.11" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" - integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== - cyclist@^1.0.1: version "1.0.1" resolved "https://registry.npmmirror.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -6268,16 +6273,6 @@ jest-worker@^26.2.1: merge-stream "^2.0.0" supports-color "^7.0.0" -jquery-mousewheel@^3.1.13: - version "3.1.13" - resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5" - integrity sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU= - -jquery@^3.5.1: - version "3.6.0" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" - integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== - js-message@1.0.7: version "1.0.7" resolved "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47" @@ -7097,11 +7092,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mousetrap@^1.6.5: - version "1.6.5" - resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9" - integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA== - move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" From 37f16d03666a7422d64306bca2428095f1a8f6ae Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 14:05:56 +0800 Subject: [PATCH 02/10] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dvue=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=B3=A8=E5=86=8C=E5=A4=B1=E8=B4=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/App.vue | 11 +++++------ src/Shape.tsx | 41 +++-------------------------------------- src/Teleport.tsx | 17 ++++++++--------- src/VueShape.tsx | 10 ++++++---- src/index.ts | 8 ++++---- 5 files changed, 26 insertions(+), 61 deletions(-) diff --git a/example/App.vue b/example/App.vue index 3e2fc32..427a9cc 100644 --- a/example/App.vue +++ b/example/App.vue @@ -86,7 +86,7 @@ import { defineComponent, ref, h, markRaw } from 'vue' import { inject } from 'vue' import { Options, Vue } from 'vue-class-component'; import { Port, PortGroup, TeleportContainer } from '../src/index' -import Graph, { Node, Edge, VueShape, useVueShape, VueShapeProps, GraphContext, useCellEvent } from '../src/index' +import Graph, { Node, Edge, VueShape, useVueShape, GraphContext } from '../src/index' import { Grid, Background, Clipboard, Snapline, Selection, Keyboard, Scroller, MouseWheel, MiniMap } from '../src/index' import { Stencil, StencilGroup } from '../src/index' import { ContextMenu } from '../src/index' @@ -106,7 +106,7 @@ const CustomNodeComponent = defineComponent({ min: 1, value: props.data.num, onChange: (num) => { - console.log(props.node) + console.log(props.node, num) props.node.setData({ num }) } }) @@ -115,11 +115,10 @@ const CustomNodeComponent = defineComponent({ const CustomNode = defineComponent({ name: 'CustomNode', - props: [...VueShapeProps, 'otherOptions'], inject: [contextSymbol], - setup(props, context) { - const cell = useVueShape({ ...props, data: { num: 2 }, component: markRaw(CustomNodeComponent) }, context) - useCellEvent('node:click', (e) => context.emit('click', e), { cell }) + setup(_, context) { + const cell = useVueShape({ ...context.attrs, data: { num: 2 }, component: markRaw(CustomNodeComponent) }, context) + // useCellEvent('node:click', (e) => context.emit('click', e), { cell }) return () => null } }) diff --git a/src/Shape.tsx b/src/Shape.tsx index 00a245e..c0095fd 100644 --- a/src/Shape.tsx +++ b/src/Shape.tsx @@ -5,38 +5,6 @@ import { useContext, contextSymbol } from './GraphContext' import { cellContextSymbol, portGroupContextSymbol } from './GraphContext' import { processProps, bindEvent } from './utils' -export const useCellEvent = (name, handler, options={}) => { - const { graph } = useContext() - const { cell, once } = options - - const xhandler = (e) => { - // 如果传了cell参数就使用cell_id判断一下触发事件的回调是不是对应到具体的元素上面 - const target = e.node || e.edge || e.cell || (e.view && e.view.cell) - const target_id = target ? target.id : undefined - const cell_id = cell ? cell.value ? cell.value.id : cell.id : undefined - // console.log('xhandler', target_id, '===', cell_id, name, e) - if (target_id) { - if (target_id === cell_id) { - // 如果事件是针对 - handler(e) - } - } else { - handler(e) - } - } - const clear = () => !once && graph.off(name, xhandler) - onMounted(() => { - if (once) { - graph.once(name, xhandler) - } else { - graph.on(name, xhandler) - } - }) - onUnmounted(() => clear()) - // 将取消监听的函数返回，用户可以主动取消 - return clear -} - const createCell = (p) => { const { props, events } = processProps(p) const { id, shape, x, y, width, height, angle, ...otherOptions } = props @@ -53,7 +21,7 @@ const createCell = (p) => { }) } -export const useCell = (props, { emit }) => { +export const useCell = (props) => { // 这里如果传入的不是function就包裹一层 const { graph } = useContext() const cell = ref() @@ -66,7 +34,6 @@ export const useCell = (props, { emit }) => { // 监听其他变化 watch(() => props, newProps => { - console.log('watch update', newProps) const newCell = createCell(newProps) const prop = newCell.getProp() if (!ObjectExt.isEqual(cell.value.getProp(), prop)) { @@ -102,7 +69,6 @@ export const useCell = (props, { emit }) => { } graph.removeCell(cell.value) if (removeEvent.value) { - console.log('removeEvent', cell.value.id) removeEvent.value() } }) @@ -131,7 +97,6 @@ const Cell = defineComponent({ const Shapes = {} -console.log('shape', Shape) // BorderedImage // Circle // Cylinder @@ -158,10 +123,10 @@ Object.keys(Shape).forEach(name => { name, // props: /Edge/.test(name) ? EdgeProps : NodeProps, inject: [contextSymbol, cellContextSymbol], - setup(_, { attrs: props, slots, emit }) { + setup(_, { attrs: props, slots }) { const { shape: defaultShape } = ShapeClass.defaults || {} const { shape=defaultShape } = props - const cell = useCell({...props, shape}, { emit }) + const cell = useCell({...props, shape}) const { default: _default, port } = slots // port和default都有可能需要渲染 return () => cell.value ? diff --git a/src/Teleport.tsx b/src/Teleport.tsx index 2db8115..a4f8134 100644 --- a/src/Teleport.tsx +++ b/src/Teleport.tsx @@ -1,20 +1,19 @@ // @ts-nocheck -import { onUpdated, onMounted, shallowReactive, shallowRef, watchEffect, watch, markRaw, defineComponent, computed } from "vue"; -import { h, Teleport, Fragment, VNode, VNodeData, provide, inject, createApp } from "vue"; -import { Graph, Node, Dom } from '@antv/x6' +import { shallowReactive, defineComponent } from "vue"; +import { h, Fragment } from "vue"; import createTeleportRender from 'x6-html-shape/dist/teleport' +import createVue3Render from 'x6-html-shape/dist/vue' const state = shallowReactive<{[key: string]: any}>({items: []}) export const TeleportContainer = defineComponent({ name: 'TeleportContainer', setup() { - return () => - h( - Fragment, - {}, - state.items.map((item) => h(item)), - ) + return () => h( + Fragment, + {}, + state.items.map((item) => h(item)), + ) }, }) diff --git a/src/VueShape.tsx b/src/VueShape.tsx index 9af0f07..3ca7924 100644 --- a/src/VueShape.tsx +++ b/src/VueShape.tsx @@ -8,9 +8,8 @@ import { createRender } from './Teleport' import { addListener, removeListener } from "resize-detector"; import { debounce } from './utils' -export const VueShapeProps = NodeProps.concat('primer', 'useForeignObject', 'component', 'autoResize') -export const useVueShape = (props, { slots, emit }) => { +export const useVueShape = (props, { slots }) => { const { id, @@ -62,13 +61,16 @@ export const useVueShape = (props, { slots, emit }) => { }) + const render = createRender(DataWatcher) + const shape = 'v-shape-' + Math.random ().toString(36).slice(-8) + register({shape, render}) const cell = useCell({ id, primer, useForeignObject, ...(typeof props === 'function' ? props() : props), - shape: 'x6-html-shape', + shape, render: markRaw(createRender(DataWatcher)), - }, {slots, emit}) + }) return cell } diff --git a/src/index.ts b/src/index.ts index cc49329..e10dccd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ // @ts-nocheck import Graph from './Graph' import * as GraphContext from './GraphContext' -import Shape, { Node, Rect, Edge, Cell, NodeProps, EdgeProps, useCell, useCellEvent } from './Shape' -import VueShape, { useVueShape, VueShapeProps } from './VueShape' +import Shape, { Node, Rect, Edge, Cell, NodeProps, EdgeProps, useCell } from './Shape' +import VueShape, { useVueShape } from './VueShape' import { TeleportContainer, useTeleport } from './Teleport' import Port, { PortGroup } from './Port' import Grid from './components/Grid' @@ -55,9 +55,9 @@ export { Node, Rect, Edge, - Cell, useCell, useCellEvent, NodeProps, EdgeProps, + Cell, useCell, NodeProps, EdgeProps, TeleportContainer, useTeleport, - VueShape, useVueShape, VueShapeProps, + VueShape, useVueShape, Grid, Background, Clipboard, From 79b9b297af8403647f1bfe76aa1da309aece0d55 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 14:07:09 +0800 Subject: [PATCH 03/10] update --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e18e22c..77c5013 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,7 @@ ] }, "dependencies": { - "antv-x6-html2": "^1.0.5", - "resize-detector": "^0.3.0" + "resize-detector": "^0.3.0", + "x6-html-shape": "^0.3" } } From a8e080572fa681385f2a009077fedfbd059cfbe6 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 17:09:13 +0800 Subject: [PATCH 04/10] update --- package.json | 5 ++--- src/Shape.tsx | 32 ++++---------------------------- src/index.ts | 4 ++-- yarn.lock | 10 +++++----- 4 files changed, 13 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 77c5013..a099389 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@antv/x6-plugin-dnd": "^2.0", "@antv/x6-plugin-stencil": "^2.0", "vue": "^3.2.31", - "x6-html-shape": "^0.3" + "x6-html-shape": "^0.4.1" }, "devDependencies": { "@antv/graphin-icons": "^1.0.0", @@ -42,7 +42,6 @@ "@vue/eslint-config-typescript": "^7.0.0", "acorn-jsx": "^5.3.2", "ant-design-vue": "^3.2.1", - "antv-x6-html2": "^1.0.6", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-plugin-lodash": "^3.3.4", "babel-plugin-syntax-jsx": "^6.18.0", @@ -109,6 +108,6 @@ }, "dependencies": { "resize-detector": "^0.3.0", - "x6-html-shape": "^0.3" + "x6-html-shape": "^0.4.1" } } diff --git a/src/Shape.tsx b/src/Shape.tsx index c0095fd..9b97e40 100644 --- a/src/Shape.tsx +++ b/src/Shape.tsx @@ -76,18 +76,14 @@ export const useCell = (props) => { return cell } -export const CellProps = ['id', 'markup', 'attrs', 'shape', 'view', 'zIndex', 'visible', 'data', 'parent'] -export const EdgeProps = CellProps.concat('source', 'target', 'vertices', 'router', 'connector', 'labels', 'defaultLabel') -export const NodeProps = CellProps.concat('x', 'y', 'width', 'height', 'angle', 'ports', 'label', 'magnet') - const Cell = defineComponent({ name: 'Cell', - props: CellProps, + inheritAttrs: false, inject: [contextSymbol, cellContextSymbol], - setup(props, context) { - const cell = useCell(props, context) + setup(_, { slots, attrs: props }) { + const cell = useCell(props) // 优先判断名字是port的slot在不在，不存在的时候渲染默认的slot - const { default: _default, port } = context.slots + const { default: _default, port } = slots return () => cell.value ? {port && port()} {_default && _default()} @@ -97,31 +93,11 @@ const Cell = defineComponent({ const Shapes = {} -// BorderedImage -// Circle -// Cylinder -// DoubleEdge -// Edge -// Ellipse -// EmbeddedImage -// Empty -// HTML -// HeaderedRect -// Image -// InscribedImage -// Path -// Polygon -// Polyline -// Rect -// ShadowEdge -// TextBlock - Object.keys(Shape).forEach(name => { const ShapeClass = Shape[name] Shapes[name] = defineComponent({ inheritAttrs: false, name, - // props: /Edge/.test(name) ? EdgeProps : NodeProps, inject: [contextSymbol, cellContextSymbol], setup(_, { attrs: props, slots }) { const { shape: defaultShape } = ShapeClass.defaults || {} diff --git a/src/index.ts b/src/index.ts index e10dccd..d5ffec5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ // @ts-nocheck import Graph from './Graph' import * as GraphContext from './GraphContext' -import Shape, { Node, Rect, Edge, Cell, NodeProps, EdgeProps, useCell } from './Shape' +import Shape, { Node, Rect, Edge, Cell, useCell } from './Shape' import VueShape, { useVueShape } from './VueShape' import { TeleportContainer, useTeleport } from './Teleport' import Port, { PortGroup } from './Port' @@ -55,7 +55,7 @@ export { Node, Rect, Edge, - Cell, useCell, NodeProps, EdgeProps, + Cell, useCell, TeleportContainer, useTeleport, VueShape, useVueShape, Grid, diff --git a/yarn.lock b/yarn.lock index d365526..63f004d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2234,11 +2234,6 @@ ant-design-vue@^3.2.1: vue-types "^3.0.0" warning "^4.0.0" -antv-x6-html2@^1.0.5: - version "1.0.9" - resolved "https://registry.yarnpkg.com/antv-x6-html2/-/antv-x6-html2-1.0.9.tgz#7a6585db0bf32c3e222202cec76b509d73b467a5" - integrity sha512-3E5gQaRwGT7dGqfHJAKNN65ZpfA98X/Ss7v/tyVk07cdzhGCMoVs/oDBlXzH7yzmVgCMPyCacjzmAlMQpUYKAg== - any-observable@^0.3.0: version "0.3.0" resolved "https://registry.npmmirror.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b" @@ -10839,6 +10834,11 @@ ws@^6.0.0, ws@^6.2.1: dependencies: async-limiter "~1.0.0" +x6-html-shape@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/x6-html-shape/-/x6-html-shape-0.4.1.tgz#92d00d234e71b6c65c90ff46afb3f54f823eb394" + integrity sha512-sOQd7kdzAYY1W17xuSnl58PjEDG8tuLtCjg7maXHxDxB1bBb7CsvFMVpcNTfT9LrjGUp8PGHIB2QGgkUn7k3Eg== + xtend@^4.0.0, xtend@~4.0.1: version "4.0.2" resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From edfe25c4e1934341442b577b79e2524723bcfb9f Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 18:40:17 +0800 Subject: [PATCH 05/10] =?UTF-8?q?=E6=96=B0=E7=9A=84=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=E4=BD=BF=E7=94=A8plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 16 +++++++++- src/Shape.tsx | 4 +-- src/Teleport.tsx | 2 +- src/VueShape.tsx | 6 ++-- src/components/Clipboard.tsx | 55 +++++++++++++++++++------------- src/components/Keyboard.tsx | 27 ++-------------- src/components/Scroller.tsx | 48 ++-------------------------- src/utils.ts | 24 ++++++++++++++ src/widgets/MiniMap.tsx | 59 +++++++++++++++------------------- src/widgets/Selection.tsx | 62 +++++++++++++----------------------- src/widgets/Snapline.tsx | 29 ++--------------- yarn.lock | 47 +++++++++++++++++++++++++++ 12 files changed, 181 insertions(+), 198 deletions(-) diff --git a/package.json b/package.json index a099389..9141049 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,13 @@ ], "peerDependencies": { "@antv/x6": "^2.0", - "@antv/x6-plugin-dnd": "^2.0", + "@antv/x6-plugin-clipboard": "^2.1.6", + "@antv/x6-plugin-dnd": "^2.0.5", + "@antv/x6-plugin-keyboard": "^2.0", + "@antv/x6-plugin-minimap": "^2.0.5", + "@antv/x6-plugin-scroller": "^2.0.9", + "@antv/x6-plugin-selection": "^2.1.7", + "@antv/x6-plugin-snapline": "^2.1.7", "@antv/x6-plugin-stencil": "^2.0", "vue": "^3.2.31", "x6-html-shape": "^0.4.1" @@ -31,6 +37,14 @@ "devDependencies": { "@antv/graphin-icons": "^1.0.0", "@antv/x6": "^2.0", + "@antv/x6-plugin-clipboard": "^2.1.6", + "@antv/x6-plugin-dnd": "^2.0.5", + "@antv/x6-plugin-keyboard": "^2.0", + "@antv/x6-plugin-minimap": "^2.0.5", + "@antv/x6-plugin-scroller": "^2.0.9", + "@antv/x6-plugin-selection": "^2.1.7", + "@antv/x6-plugin-snapline": "^2.1.7", + "@antv/x6-plugin-stencil": "^2.0", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/babel-plugin-jsx": "^1.1.1", diff --git a/src/Shape.tsx b/src/Shape.tsx index 9b97e40..435a692 100644 --- a/src/Shape.tsx +++ b/src/Shape.tsx @@ -1,12 +1,12 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, ref, watch, watchEffect, provide, shallowReactive, inject, Fragment } from 'vue'; +import { defineComponent, onMounted, onUnmounted, ref, watch, provide, shallowReactive, inject, Fragment } from 'vue'; import { Node as X6Node, Edge as X6Edge, Shape, Cell as BaseShape, ObjectExt } from '@antv/x6' import { useContext, contextSymbol } from './GraphContext' import { cellContextSymbol, portGroupContextSymbol } from './GraphContext' import { processProps, bindEvent } from './utils' const createCell = (p) => { - const { props, events } = processProps(p) + const { props } = processProps(p) const { id, shape, x, y, width, height, angle, ...otherOptions } = props // 从registry获取注册的类型，获取不到就使用Cell const ShapeClass = X6Node.registry.get(shape) || X6Edge.registry.get(shape) || BaseShape diff --git a/src/Teleport.tsx b/src/Teleport.tsx index a4f8134..8b65d1f 100644 --- a/src/Teleport.tsx +++ b/src/Teleport.tsx @@ -2,7 +2,7 @@ import { shallowReactive, defineComponent } from "vue"; import { h, Fragment } from "vue"; import createTeleportRender from 'x6-html-shape/dist/teleport' -import createVue3Render from 'x6-html-shape/dist/vue' +// import createVue3Render from 'x6-html-shape/dist/vue' const state = shallowReactive<{[key: string]: any}>({items: []}) diff --git a/src/VueShape.tsx b/src/VueShape.tsx index 3ca7924..6f2fb57 100644 --- a/src/VueShape.tsx +++ b/src/VueShape.tsx @@ -1,6 +1,6 @@ // @ts-nocheck -import { h, defineComponent, shallowReactive, onMounted, onUnmounted, markRaw, nextTick, watch, watchEffect, shallowRef, Fragment } from 'vue'; -import { NodeProps, useCell } from './Shape' +import { h, defineComponent, shallowReactive, onMounted, markRaw, watchEffect, shallowRef, Fragment } from 'vue'; +import { useCell } from './Shape' import { contextSymbol, cellContextSymbol } from './GraphContext' import { register } from 'x6-html-shape' // import createRender from 'x6-html-shape/dist/teleport' @@ -22,7 +22,7 @@ export const useVueShape = (props, { slots }) => { name: 'DataWatcher', props: ['graph', 'node', 'container'], setup(props) { - const { node, graph, container } = props + const { node, graph } = props const state = shallowReactive({ data: node.getData() }) const root = shallowRef() onMounted(() => { diff --git a/src/components/Clipboard.tsx b/src/components/Clipboard.tsx index ec893df..30e9de8 100644 --- a/src/components/Clipboard.tsx +++ b/src/components/Clipboard.tsx @@ -1,21 +1,28 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; +import { defineComponent, onMounted, onUnmounted, watchEffect, shallowRef } from 'vue'; import { useContext, contextSymbol } from '../GraphContext' +import { Clipboard } from "@antv/x6-plugin-clipboard"; export default defineComponent({ name: 'Clipboard', - props: ['enabled'], + inheritAttrs: false, inject: [contextSymbol], - setup(props, { emit }) { + emits: ["copy", "cut", "paste"], + setup(_, { attrs: props, emit }) { const { graph } = useContext() - const enableClipboard = (enabled) => { - // console.log('draw Background', props) - graph.disableClipboard() - if (enabled !== false) { - graph.enableClipboard() - } - } - // watch(() => props.enabled, (enabled) => enableClipboard(enabled)) + const plugin = shallowRef() + watchEffect((cleanup) => { + plugin.value = new Clipboard(props) + graph.use(plugin.value) + cleanup(() => { + if (plugin.value) { + plugin.value.dispose() + } + }) + }) + + const isKeyboardEnabled = () => graph.isKeyboardEnabled && graph.isKeyboardEnabled() + const copy = () => { const cells = graph.getSelectedCells() if (cells.length) { @@ -38,18 +45,20 @@ export default defineComponent({ emit('paste', { cells, graph }) } } - // onMounted(() => { - // enableClipboard() - // graph.bindKey('ctrl+c', copy) - // graph.bindKey('ctrl+x', cut) - // graph.bindKey('ctrl+v', paste) - // }) - // onUnmounted(() => { - // graph.disableClipboard() - // graph.unbindKey('ctrl+c') - // graph.unbindKey('ctrl+x') - // graph.unbindKey('ctrl+v') - // }) + onMounted(() => { + if (isKeyboardEnabled()) { + graph.bindKey('ctrl+c', copy) + graph.bindKey('ctrl+x', cut) + graph.bindKey('ctrl+v', paste) + } + }) + onUnmounted(() => { + if (isKeyboardEnabled()) { + graph.unbindKey('ctrl+c') + graph.unbindKey('ctrl+x') + graph.unbindKey('ctrl+v') + } + }) return () => null } }) diff --git a/src/components/Keyboard.tsx b/src/components/Keyboard.tsx index 071d52f..6f62f9f 100644 --- a/src/components/Keyboard.tsx +++ b/src/components/Keyboard.tsx @@ -1,27 +1,6 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; -import { useContext, contextSymbol } from '../GraphContext' +import { Keyboard } from "@antv/x6-plugin-keyboard"; +import { createPluginComponent } from '../utils' -const defaultOptions = { - global: true, -} - -export default defineComponent({ - name: 'Keyboard', - props: ['enabled', 'global', 'format', 'guard'], - inject: [contextSymbol], - setup(props) { - const { graph } = useContext() - const update = () => { - // console.log('draw KEYBOARD', props) - // TODO 暂时不能更新参数 - graph.disableKeyboard() - graph.enableKeyboard() - } - // watch(() => props, () => update(), {deep: true}) - // onMounted(() => update()) - // onUnmounted(() => graph.disableKeyboard()) - return () => null - } -}) +export default createPluginComponent('Keyboard', Keyboard) diff --git a/src/components/Scroller.tsx b/src/components/Scroller.tsx index f0a3305..9df62d2 100644 --- a/src/components/Scroller.tsx +++ b/src/components/Scroller.tsx @@ -1,48 +1,6 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; -import { useContext, contextSymbol } from '../GraphContext' -import { mergeOption } from '../utils' +import { Scroller } from "@antv/x6-plugin-scroller"; +import { createPluginComponent } from '../utils' - -const defaultOptions = { - pannable: true, - autoResize: true, -} - -export default defineComponent({ - name: 'Scroller', - props: ['enabled', 'className', 'width', 'height', 'modifiers', 'pageWidth', 'pageHeight', 'pageBreak', 'autoResize', 'resizeOptions', 'minVisibleWidth', 'minVisibleHeight', 'padding', 'background'], - inject: [contextSymbol], - setup(props) { - const { graph } = useContext() - const clear = () => { - if (graph.scroller.widget) { - graph.scroller.widget.dispose() - } - } - const create = () => { - // 1. 先停止监听 - clear() - // 2. 重新生成对应的widget（由于manager在graph上是readonly的只能更改内层的widget） - const { enabled, ...otherOptions } = props - const scroller = mergeOption( - graph.options.scroller || {}, - mergeOption( - defaultOptions, - { - ...otherOptions, - enabled: enabled !== false - } - ) - ) - graph.options.scroller = scroller - graph.scroller.widget = graph.hook.createScroller() - graph.drawGrid(graph.options.grid) - } - watch(() => props, () => create(), {deep: true}) - onMounted(() => create()) - onUnmounted(() => clear()) - return () => null - } -}) +export default createPluginComponent('Scroller', Scroller) diff --git a/src/utils.ts b/src/utils.ts index 20337a7..51136d9 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,7 @@ // @ts-nocheck +import { watchEffect, defineComponent, shallowRef } from 'vue' +import { useContext, contextSymbol } from './GraphContext' + export function debounce(fn: (...args: T) => void, delay = 60) { let timer: number | null = null @@ -57,4 +60,25 @@ export const bindEvent = (node, events, graph) => { return () => ubindEvents.forEach(h => h()) } +export const createPluginComponent = (name, Plugin) => { + return defineComponent({ + name, + inheritAttrs: false, + inject: [contextSymbol], + setup(_, { attrs: options }) { + const { graph } = useContext() + const plugin = shallowRef() + watchEffect((cleanup) => { + plugin.value = new Plugin(options) + graph.use(plugin.value) + cleanup(() => { + if (plugin.value) { + plugin.value.dispose() + } + }) + }) + return () => null + } + }) +} diff --git a/src/widgets/MiniMap.tsx b/src/widgets/MiniMap.tsx index ca247fc..0e4efb0 100644 --- a/src/widgets/MiniMap.tsx +++ b/src/widgets/MiniMap.tsx @@ -1,5 +1,6 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'; +import { MiniMap } from "@antv/x6-plugin-minimap"; +import { defineComponent, watchEffect, shallowRef } from 'vue'; import { useContext, contextSymbol } from '../GraphContext' import { mergeOption } from '../utils' @@ -17,42 +18,32 @@ const defaultOptions = { export default defineComponent({ name: 'MiniMap', - props: ['enabled', 'width', 'height', 'padding', 'scalable', 'minScale', 'maxScale', 'graphOptions', 'createGraph', 'style'], + inheritAttrs: false, inject: [contextSymbol], - setup(props) { + setup(_, { attrs: props }) { const { graph } = useContext() - const containerRef = ref() - - const clear = () => { - if (graph.minimap.widget) { - graph.minimap.widget.dispose() + const containerRef = shallowRef() + + const plugin = shallowRef() + watchEffect((cleanup) => { + if (containerRef.value) { + plugin.value = new MiniMap(mergeOption({ + ...defaultOptions, + graphOptions: { background: graph.options.background, grid: graph.options.grid }, + }, { + ...props, + enabled: props.enabled !== false, + container: containerRef.value, + })) + graph.use(plugin.value) } - } - const create = () => { - // 1. 先停止监听 - clear() - // 2. 重新生成对应的widget（由于manager在graph上是readonly的只能更改内层的widget） - const { enabled, ...otherOptions } = props - const options = mergeOption( - graph.options.minimap || {}, - mergeOption( - { - ...defaultOptions, - graphOptions: { background: graph.options.background, grid: graph.options.grid }, - }, - { - ...otherOptions, - enabled: enabled !== false, - container: containerRef.value, - } - ) - ) - graph.options.minimap = options - graph.minimap.widget = graph.hook.createMiniMap() - } - // watch(() => props, () => create(), {deep: true}) - // onMounted(() => create()) - // onUnmounted(() => clear()) + cleanup(() => { + if (plugin.value) { + plugin.value.dispose() + } + }) + }) + return () => { const { style = {} } = props return
containerRef.value = node} style={{ diff --git a/src/widgets/Selection.tsx b/src/widgets/Selection.tsx index cb06fd4..bc71fe0 100644 --- a/src/widgets/Selection.tsx +++ b/src/widgets/Selection.tsx @@ -1,8 +1,8 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; +import { defineComponent, onMounted, onUnmounted, watchEffect, shallowRef } from 'vue'; import { useContext, contextSymbol } from '../GraphContext' import { mergeOption } from '../utils' - +import { Selection } from "@antv/x6-plugin-selection"; const defaultOptions = { multiple: true, @@ -13,53 +13,37 @@ const defaultOptions = { export default defineComponent({ name: 'Selection', - props: ['enabled', 'multiple', 'rubberband', 'rubberNode', 'rubberEdge', 'strict', 'modifiers', 'movable', 'content', 'filter'], + inheritAttrs: false, inject: [contextSymbol], - setup(props, { emit }) { + emits: ["selected", "unselected", "changed"], + setup(_, { attrs: props, emit }) { const { graph } = useContext() + const plugin = shallowRef() + watchEffect((cleanup) => { + plugin.value = new Selection(mergeOption(defaultOptions, {...props})) + graph.use(plugin.value) + cleanup(() => { + if (plugin.value) { + plugin.value.dispose() + } + }) + }) + const selected = (e) => emit('selected', e) const unselected = (e) => emit('unselected', e) const changed = (e) => emit('changed', e) - const clear = () => { - graph.cleanSelection() - graph.disableSelection() - graph.off('cell:selected', selected) - graph.off('cell:unselected', unselected) - graph.off('selection:changed', changed) - } - const create = () => { - // 1. 先停止监听 - clear() - // 2. 重新生成对应的widget（由于manager在graph上是readonly的只能更改内层的widget） - const { enabled, ...otherOptions } = props - const selecting = mergeOption( - graph.selection.widgetOptions || {}, - mergeOption( - defaultOptions, - { - ...otherOptions, - enabled: enabled !== false - } - ) - ) - // 从那边获取的值是{0: 'ctrl', 1: 'meta'}不是一个Array - // console.log('selecting', selecting) - // if (selecting.multiple && !selecting.multipleSelectionModifiers.length) { - // selecting.multipleSelectionModifiers = ['ctrl', 'meta'] - // } - graph.options.selecting = selecting - graph.selection.widget = graph.hook.createSelection() - graph.enableSelection() - graph.selection.enable() + onMounted(() => { graph.on('cell:selected', selected) graph.on('cell:unselected', unselected) graph.on('selection:changed', changed) - } - // watch(() => props, () => create(), {deep: true}) - // onMounted(() => create()) - // onUnmounted(() => clear()) + }) + onUnmounted(() => { + graph.off('cell:selected', selected) + graph.off('cell:unselected', unselected) + graph.off('selection:changed', changed) + }) return () => null } }) diff --git a/src/widgets/Snapline.tsx b/src/widgets/Snapline.tsx index da4e1f7..060b228 100644 --- a/src/widgets/Snapline.tsx +++ b/src/widgets/Snapline.tsx @@ -1,29 +1,6 @@ // @ts-nocheck -import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; -import { useContext, contextSymbol } from '../GraphContext' -import { mergeOption } from '../utils' +import { Snapline } from "@antv/x6-plugin-snapline"; +import { createPluginComponent } from '../utils' - -const defaultOptions = { - tolerance: 10, -} - -export default defineComponent({ - name: 'Snapline', - props: ['enabled', 'className', 'tolerance', 'sharp', 'resizing', 'clean', 'filter'], - inject: [contextSymbol], - setup(props) { - const { graph } = useContext() - const updateSnapline = () => { - graph.disableSnapline() - const options = mergeOption(defaultOptions, {...props, enabled: props.enabled !== false}) - mergeOption(options, graph.snapline.widget.options) - graph.enableSnapline() - } - // watch(() => props, () => updateSnapline(), {deep: true}) - // onMounted(() => updateSnapline()) - // onUnmounted(() => graph.disableSnapline()) - return () => null - } -}) +export default createPluginComponent('Snapline', Snapline) diff --git a/yarn.lock b/yarn.lock index 63f004d..9d35631 100644 --- a/yarn.lock +++ b/yarn.lock @@ -56,6 +56,48 @@ resolved "https://registry.yarnpkg.com/@antv/x6-geometry/-/x6-geometry-2.0.5.tgz#c158317d74135bedd78c2fdeb76f9c7cfa0ef0aa" integrity sha512-MId6riEQkxphBpVeTcL4ZNXL4lScyvDEPLyIafvWMcWNTGK0jgkK7N20XSzqt8ltJb0mGUso5s56mrk8ysHu2A== +"@antv/x6-plugin-clipboard@^2.1.6": + version "2.1.6" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-clipboard/-/x6-plugin-clipboard-2.1.6.tgz#98886d5b16a175b67f142ef66c75907de7c1b069" + integrity sha512-roZPLnZx6PK8MBvee0QMo90fz/TXeF0WNe4EGin2NBq5M1I5XTWrYvA6N2XVIiWAAI67gjQeEE8TpkL7f8QdqA== + +"@antv/x6-plugin-dnd@^2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-dnd/-/x6-plugin-dnd-2.0.5.tgz#48d67eee6ea7cb4817331ea5d0429f2e5b7fe58f" + integrity sha512-g8GGJS2XmM8C59juOBiFqaR/f8i8y8tqw9sJNwta7s1Phh3hwDd7o4kk36Kk5eTKkfZfnjEyWHMOqp/h+EDibQ== + +"@antv/x6-plugin-keyboard@^2.0": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-keyboard/-/x6-plugin-keyboard-2.2.1.tgz#a6bf1d1dbec7b520ebb5090fdb275b2f4e3ea42e" + integrity sha512-sqfN0h4txVO211uIeKBd3zQ/IN2zPzDThWNTEhRx7Lecg1fO7uRXWBbOA48j3EgpRFXVexdSzIEVJEx+IWUdYw== + dependencies: + mousetrap "^1.6.5" + +"@antv/x6-plugin-minimap@^2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-minimap/-/x6-plugin-minimap-2.0.5.tgz#bd4699408715b4709e77e83edf14ceb0e767b1f6" + integrity sha512-6L+W80AvoEZG4cwRxgPxvYLeKhqkBJEt4hTnZ2NWWcvBx02F9RJKRZVEEUemqE12mKUv4HT6WtbQV0QIfkTEMw== + +"@antv/x6-plugin-scroller@^2.0.9": + version "2.0.9" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-scroller/-/x6-plugin-scroller-2.0.9.tgz#804657cb4f77d574cb252a6291abe132441c3474" + integrity sha512-f3fluvSIbZBp+c5iKyidAoz19i0beWOnPA0CPfu/K4C+Jf1eWNgaFXbN3hcHPQRvFRJiPtvPApK30aCaik9Omg== + +"@antv/x6-plugin-selection@^2.1.7": + version "2.1.7" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-selection/-/x6-plugin-selection-2.1.7.tgz#8964041d595b732bec5883a1f77757bededec594" + integrity sha512-ODfYLNwKSaLgIYMYfMW4dYQ9KKFOVBEdH0BzvyG8mfRol+JtZuyrm4BRbAvMryQKHrSxs4JCYXTFd2F7ZTuxLQ== + +"@antv/x6-plugin-snapline@^2.1.7": + version "2.1.7" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-snapline/-/x6-plugin-snapline-2.1.7.tgz#1b4e3be0a281ba324117b7ac7b9b8c39e484cce2" + integrity sha512-AsysoCb9vES0U2USNhEpYuO/W8I0aYfkhlbee5Kt4NYiMfQfZKQyqW/YjDVaS2pm38C1NKu1LdPVk/BBr4CasA== + +"@antv/x6-plugin-stencil@^2.0": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@antv/x6-plugin-stencil/-/x6-plugin-stencil-2.0.3.tgz#41602abcba2f995bf37ad6bf9b83a797a4fd26a7" + integrity sha512-pQkTIbMCezTqo38fofuFGnI30Rk0j5gHc/+Ndml1RHVEV0p8i1HGRAR5we7SVTcT56AHlP46H+oRFReQmVgvKA== + "@antv/x6@^2.0": version "2.11.1" resolved "https://registry.yarnpkg.com/@antv/x6/-/x6-2.11.1.tgz#d0ae8d9137b52bf1c3724c882c13ed9ac124d6fb" @@ -7087,6 +7129,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +mousetrap@^1.6.5: + version "1.6.5" + resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9" + integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" From f8e5571c1e3a910205141f768075a06be09a514e Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 22:13:08 +0800 Subject: [PATCH 06/10] update --- rollup.config.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 9042154..ce15bf7 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -23,7 +23,15 @@ export default { globals: { vue: 'Vue', '@antv/x6': 'X6', - "antv-x6-html2": "antc-x6-html2", + "@antv/x6-plugin-clipboard": "Clipboard", + "@antv/x6-plugin-dnd": "Dnd", + "@antv/x6-plugin-keyboard": "Keyboard", + "@antv/x6-plugin-minimap": "MiniMap", + "@antv/x6-plugin-scroller": "Scroller", + "@antv/x6-plugin-selection": "Selection", + "@antv/x6-plugin-snapline": "Snapline", + "@antv/x6-plugin-stencil": "Stencil", + "x6-html-shape": "HTMLShape", "resize-detector": "ResizeDetector" } }], @@ -72,7 +80,15 @@ export default { external: [ "vue", "@antv/x6", - "antv-x6-html2", + "@antv/x6-plugin-clipboard", + "@antv/x6-plugin-dnd", + "@antv/x6-plugin-keyboard", + "@antv/x6-plugin-minimap", + "@antv/x6-plugin-scroller", + "@antv/x6-plugin-selection", + "@antv/x6-plugin-snapline", + "@antv/x6-plugin-stencil", + "x6-html-shape", "resize-detector" ] } From ad05eacd1ee5dc15cdf60883b1ccfda34a5e0a96 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 22:21:10 +0800 Subject: [PATCH 07/10] 2.0.0-0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9141049..341f260 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antv-x6-vue", - "version": "1.3.1", + "version": "2.0.0-0", "description": "the vue toolkit for graph analysis based on x6", "scripts": { "prepare": "install-peers", From 1af417d4550a610bf9365bceb7b759994004dd20 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Thu, 25 May 2023 22:28:57 +0800 Subject: [PATCH 08/10] 3.0.0-alpha.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 341f260..1cbdd15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antv-x6-vue", - "version": "2.0.0-0", + "version": "3.0.0-alpha.0", "description": "the vue toolkit for graph analysis based on x6", "scripts": { "prepare": "install-peers", From 98fe688676f17ed4d426e9c691899417eb07c492 Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Fri, 26 May 2023 00:35:03 +0800 Subject: [PATCH 09/10] using vite replace rollup --- babel.config.js | 6 - example/App.vue | 2 +- index.html | 13 + package.json | 117 +- public/favicon.ico | Bin 4286 -> 0 bytes public/index.html | 17 - rollup.config.js | 94 - vite.config.ts | 58 + yarn.lock | 10828 ++++++------------------------------------- 9 files changed, 1611 insertions(+), 9524 deletions(-) delete mode 100644 babel.config.js create mode 100644 index.html delete mode 100644 public/favicon.ico delete mode 100644 public/index.html delete mode 100644 rollup.config.js create mode 100644 vite.config.ts diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 081c4ec..0000000 --- a/babel.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - presets: [ - '@vue/cli-plugin-babel/preset' - ], - plugins: ["@vue/babel-plugin-jsx"] -} diff --git a/example/App.vue b/example/App.vue index 427a9cc..b1a39fe 100644 --- a/example/App.vue +++ b/example/App.vue @@ -26,7 +26,7 @@
这里是一个vue的组件
- +