framework-wujie

子应用集成 framework-wujie, 主应用即可渲染子应用。

安装

pnpm add @magustek/framework-wujie

主应用使用

import { createApp } from "vue";
import { WujieVue, createMainRouter } from "@magustek/framework-wujie";
import { createRouter } from "@magustek/framework-core";

const app = createApp();
app.use(WujieVue).use(router).use(mainRouter)

<template>
  <WujieVue name="appName" url="http://localhost:8080"></WujieVue>
</template>

<script setup>

</script>

子应用使用

main.ts

import { createApp } from "vue";
import { createMainRouter } from "@magustek/framework-wujie";
import { createRouter } from "@magustek/framework-core";

const app = createApp();
const router = createRouter({ routes:[] });
const mianRouter = createMainRouter(router);
app.use(router)
app.use(mainRouter);

WujieVue

一个 vue3 组件，用于渲染子应用, 参考 链接

createMainRouter

创建一个主应用的路由, 用于主应用能监听子应用路由的变化

import { createApp } from "vue";
import { createMainRouter } from "@magustek/framework-wujie";
import { createRouter } from "@magustek/framework-core";

const app = createApp();
const router = createRouter({ routes:[] });
const mianRouter = createMainRouter(router);
app.use(router)
app.use(mainRouter);

useMainRouter

使用主路由，可以跳转到其他子应用的某个页面

import { useMainRouter } from"@magustek/framework-wujie";

const { push } = useMainRouter();

// 跳转到另一个子应用的某个页面
// 目标应用的的页面处于激活状态时，第一个参数传递路由对象，并且指定 force 为 true
push(
  {
    path: "/path",
    query: {},
    force: true,
  },
  "appName"
);

useEventPosition

修复子应用鼠标位置不准确的问题，默认开启，可根据不同情况禁用和开启

WARNING

5.1 版本开始弃用

import { useEventPosition } from "@magustek/framework-wujie";

const { 
  enable, // 启用代理鼠标位置
  disable // 禁用代理鼠标位置
} = useEventPosition();

针对 antv/x6 的使用

如果使用了 @antv/x6-plugin-dnd

1. 在调用 dnd.start 方法之前 调用 enable 方法

const onMouseDown = (e: MouseEvent) => {
   enable()
   const dnd = useDnd()
   const node = graph.createNode({})
   dnd.start(node, e)
}

2. 在 graph 的 node:add 事件里面调用 disable,并修正 node 的位置

graph.on('node:added', ({ node }) => {
  const { x, y } = document.body.getBoundingClientRect()
  const { x: nodeX, y: nodeY} = node.getPosition()
  node.setPosition({ x: nodeX + x, y: nodeY + y })
  disable()
})

3. 为确保在画布内拖拽时鼠标位置正确，可以在画布空白点击事件内调用 disable 和 dnd 容器上的 mouseup 事件内调用 disable

graph.on('blank:click', () => {
	disable()
})

<template>
	<div id="dndContainer" @mouseup="onMouseUp">
		...
	</div>
</template>
<script setup>
import { useEventPosition } from '@magustek/framework-wujie'
const { enable, disable } = useEventPosition()
const onMouseUp = () => {
	disable()
}
</script>