lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加流程图功能

Browse Source
This commit is contained in:
wux_labs
2025-02-19 23:10:31 +08:00
parent 944052753f
commit 6afb93ae9c
6 changed files with 449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/index.ts
+4
View File
@@ -72,6 +72,8 @@ import { DeleteColumn } from "./menus/toolbar/table/DeleteColumn.ts";
import { DeleteRow } from "./menus/toolbar/table/DeleteRow.ts";
import { DeleteTable } from "./menus/toolbar/table/DeleteTable.ts";
import { Diagrams } from "./menus/toolbar/tools/Diagrams.ts";
import { ToggleToc } from "./menus/toolbar/page/ToggleToc.ts";
// 注册组件
@@ -146,4 +148,6 @@ defineCustomElement('uai-editor-table-menu-add-row-before', AddRowBefore);
defineCustomElement('uai-editor-table-menu-delete-row', DeleteRow);
defineCustomElement('uai-editor-table-menu-delete-table', DeleteTable);
defineCustomElement('uai-editor-tools-menu-diagrams', Diagrams);
defineCustomElement('uai-editor-page-menu-toggle-toc', ToggleToc);
src/components/menus/toolbar/Classic.ts
+36
View File
@@ -65,6 +65,8 @@ import { AddRowBefore } from "./table/AddRowBefore.ts";
import { DeleteRow } from "./table/DeleteRow.ts";
import { DeleteTable } from "./table/DeleteTable.ts";
import { Diagrams } from "./tools/Diagrams.ts";
import { ToggleToc } from "./page/ToggleToc.ts";
/**
@@ -90,6 +92,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
classicMenuTableScrollable!: ScrollableDiv;
classicMenuTableGroup!: HTMLElement;
// 工具菜单容器
classicMenuToolScrollable!: ScrollableDiv;
classicMenuToolGroup!: HTMLElement;
// 页面菜单容器
classicMenuPageScrollable!: ScrollableDiv;
classicMenuPageGroup!: HTMLElement;
@@ -151,6 +157,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
tableMenuDeleteRow!: DeleteRow;
tableMenuDeleteTable!: DeleteTable;
// 工具菜单
toolsMenuDiagrams!: Diagrams;
// 页面菜单
pageMenuToggleToc!: ToggleToc;
@@ -200,6 +209,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuBaseScrollable.style.display = "none";
this.classicMenuInsertScrollable.style.display = "none";
this.classicMenuTableScrollable.style.display = "none";
this.classicMenuToolScrollable.style.display = "none";
this.classicMenuPageScrollable.style.display = "none";
if (menu === "base") {
this.classicMenuBaseScrollable.style.display = "flex";
@@ -210,6 +220,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
if (menu === "table") {
this.classicMenuTableScrollable.style.display = "flex";
}
if (menu === "tools") {
this.classicMenuToolScrollable.style.display = "flex";
}
if (menu === "page") {
this.classicMenuPageScrollable.style.display = "flex";
}
@@ -218,6 +231,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.createBaseMenu(event, options);
this.createInsertMenu(event, options);
this.createTableMenu(event, options);
this.createToolMenu(event, options);
this.createPageMenu(event, options);
this.classicMenuBaseScrollable.style.display = "flex";
}
@@ -384,6 +398,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.tableMenuDeleteTable = new DeleteTable({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.tableMenuDeleteTable);
this.toolsMenuDiagrams = new Diagrams({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.toolsMenuDiagrams);
this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.pageMenuToggleToc);
}
@@ -516,6 +533,25 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
group3.appendChild(this.tableMenuDeleteTable);
}
/**
* 创建工具菜单
* @param event
* @param options
*/
createToolMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.classicMenuToolGroup = document.createElement("div");
this.classicMenuToolGroup.style.display = "flex";
this.classicMenuToolScrollable = new ScrollableDiv(this.classicMenuToolGroup);
this.classicMenuToolScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuToolScrollable);
this.classicMenuToolScrollable.onCreate(event, options);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
this.classicMenuToolGroup.appendChild(group1);
group1.appendChild(this.toolsMenuDiagrams);
}
/**
* 创建页面菜单
* @param event
src/components/menus/toolbar/Ribbon.ts
+36
View File
@@ -67,6 +67,8 @@ import { AddRowBefore } from "./table/AddRowBefore.ts";
import { DeleteRow } from "./table/DeleteRow.ts";
import { DeleteTable } from "./table/DeleteTable.ts";
import { Diagrams } from "./tools/Diagrams.ts";
import { ToggleToc } from "./page/ToggleToc.ts";
/**
@@ -93,6 +95,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
ribbonMenuTableScrollable!: ScrollableDiv;
ribbonMenuTableGroup!: HTMLElement;
// 工具菜单容器
ribbonMenuToolScrollable!: ScrollableDiv;
ribbonMenuToolGroup!: HTMLElement;
// 页面菜单容器
ribbonMenuPageScrollable!: ScrollableDiv;
ribbonMenuPageGroup!: HTMLElement;
@@ -154,6 +160,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
tableMenuDeleteRow!: DeleteRow;
tableMenuDeleteTable!: DeleteTable;
// 工具菜单
toolsMenuDiagrams!: Diagrams;
// 页面菜单
pageMenuToggleToc!: ToggleToc;
@@ -196,6 +205,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.ribbonMenuBaseScrollable.style.display = "none";
this.ribbonMenuInsertScrollable.style.display = "none";
this.ribbonMenuTableScrollable.style.display = "none";
this.ribbonMenuToolScrollable.style.display = "none";
this.ribbonMenuPageScrollable.style.display = "none";
if (menu.value === "base") {
this.ribbonMenuBaseScrollable.style.display = "flex";
@@ -206,6 +216,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
if (menu.value === "table") {
this.ribbonMenuTableScrollable.style.display = "flex";
}
if (menu.value === "tools") {
this.ribbonMenuToolScrollable.style.display = "flex";
}
if (menu.value === "page") {
this.ribbonMenuPageScrollable.style.display = "flex";
}
@@ -229,6 +242,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.createBaseMenu(event, options);
this.createInsertMenu(event, options);
this.createTableMenu(event, options);
this.createToolMenu(event, options);
this.createPageMenu(event, options);
this.ribbonMenuBaseScrollable.style.display = "flex";
}
@@ -407,6 +421,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.tableMenuDeleteTable = new DeleteTable({ menuType: "button", enable: true, huge: true, hideText: false });
this.eventComponents.push(this.tableMenuDeleteTable);
this.toolsMenuDiagrams = new Diagrams({ menuType: "button", enable: true, huge: true, hideText: false });
this.eventComponents.push(this.toolsMenuDiagrams);
this.pageMenuToggleToc = new ToggleToc({ menuType: "button", enable: true, huge: true, hideText: false });
this.eventComponents.push(this.pageMenuToggleToc);
}
@@ -621,6 +638,25 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
group3.appendChild(this.tableMenuDeleteTable);
}
/**
* 创建工具菜单
* @param event
* @param options
*/
createToolMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
this.ribbonMenuToolGroup = document.createElement("div");
this.ribbonMenuToolGroup.classList.add("uai-ribbon-container");
this.ribbonMenuToolGroup.style.display = "flex";
this.ribbonMenuToolScrollable = new ScrollableDiv(this.ribbonMenuToolGroup);
this.ribbonMenuToolScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuToolScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
this.ribbonMenuToolGroup.appendChild(group1);
group1.appendChild(this.toolsMenuDiagrams);
}
/**
* 创建页面菜单
* @param event
src/components/menus/toolbar/tools/Diagrams.ts
+139
View File
@@ -0,0 +1,139 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import icon from "../../../../assets/icons/diagrams.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
import { FullScreenModal } from "../../../modals/FullScreenModal.ts";
import DiagramEditor from "../../../../utils/DiagramEditor.ts";
import { uuid } from "../../../../utils/UUID.ts";
/**
* 工具菜单：插入流程图
*/
export class Diagrams extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: false,
text: t('tools.diagrams.text'),
tooltip: t('tools.diagrams.text'),
}
// 功能按钮
menuButton: MenuButton;
// 模态框
modal: FullScreenModal;
constructor(options: MenuButtonOptions) {
super();
// 初始化功能按钮选项
this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
// 创建功能按钮
this.menuButton = new MenuButton(this.menuButtonOptions);
// 创建模态框
this.modal = new FullScreenModal(this.menuButtonOptions.text!);
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
this.menuButton.onCreate(event, options);
this.appendChild(this.menuButton);
// 创建模态框容器
const container = document.createElement("div");
container.classList.add("uai-diagrams-container");
container.classList.add("uai-diagrams-container-insert");
this.modal.modalBody.appendChild(container);
const editor = event.editor;
// 添加鼠标点击事件，弹出模态框
this.addEventListener("click", () => {
if (this.menuButtonOptions.enable) {
container.innerHTML = "";
const diagramEditor = new DiagramEditor({
container: `.uai-diagrams-container-insert`,
})
this.modal.show();
diagramEditor.edit('');
// 添加回调消息监听
const messageListener = (evt: MessageEvent) => {
if (
evt?.type !== 'message' ||
typeof evt?.data !== 'string'
) {
return
}
// 获取回调消息内容
const { event, bounds, data } = JSON.parse(evt.data);
if (event === 'export') {
const { width, height } = bounds
const name = `diagrams-${uuid()}.svg`
// 将回调消息转换成图片
const { size } = new Blob([data], {
type: 'image/svg+xml',
})
const image = {
type: 'diagrams',
name,
size,
src: data,
width: `${width}`,
height,
content: data,
}
this.modal.hide();
// 在编辑器中插入图片
diagramEditor.stopEditing();
if (image?.type) {
editor.chain().focus().setImage(image, false).run()
}
window.removeEventListener('message', messageListener);
}
if (event === 'exit') {
// 如果回调消息是关闭，则关闭模态框
this.modal.hide();
window.removeEventListener('message', messageListener);
}
}
// 移除、添加监听
window.removeEventListener('message', messageListener);
window.addEventListener('message', messageListener);
this.modal.registerListener(messageListener);
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButton) {
var disable = event.editor.isEditable;
this.onEditableChange(disable);
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}
src/components/modals/FullScreenModal.ts
+77
View File
@@ -0,0 +1,77 @@
// Copyright (c) 2024-present AI-Labs
import { Modal } from "bootstrap";
import closeIcon from "../../assets/icons/close.svg";
import 'bootstrap/dist/css/bootstrap.css';
/**
* 全屏的模态弹出框
*/
export class FullScreenModal extends Modal {
modalHeader!: HTMLElement;
modalBody!: HTMLElement;
modalFooter!: HTMLElement;
messageListener?: (evt: MessageEvent) => void
constructor(title: string, options?: Partial<Modal.Options>) {
const modal = document.createElement("div");
// 设置模态弹出框
modal.classList.add("modal");
modal.setAttribute("role", "dialog");
modal.setAttribute("tabindex", "-1");
modal.setAttribute("aria-labelledby", "exampleModalCenterTitle");
// 模态弹出框全屏样式
const modalDialog = document.createElement("div");
modalDialog.classList.add("modal-dialog");
modalDialog.classList.add("modal-fullscreen");
modalDialog.classList.add("modal-dialog-centered");
modalDialog.setAttribute("role", "document");
// 模态弹出框内容
const modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
super(modal, options);
// 标题区
this.modalHeader = document.createElement("div");
this.modalHeader.classList.add("modal-header");
// 标题
const titleDiv = document.createElement("div");
titleDiv.innerHTML = `<h5 class="modal-title" style="width:calc(100vw - 55px)">${title}</h5>`
this.modalHeader.appendChild(titleDiv);
// 关闭按钮
const closeDiv = document.createElement("div");
closeDiv.innerHTML = `<img src="${closeIcon}" width="24"/>`;
closeDiv.addEventListener("click", () => {
this.hide();
if (this.messageListener) {
window.removeEventListener('message', this.messageListener);
}
});
this.modalHeader.appendChild(closeDiv);
modalContent.appendChild(this.modalHeader);
// 主体区
this.modalBody = document.createElement("div");
this.modalBody.classList.add("modal-body");
modalContent.appendChild(this.modalBody);
}
/**
* 添加回调监听
* @param messageListener
*/
registerListener(messageListener: (evt: MessageEvent) => void) {
this.messageListener = messageListener;
}
}
src/utils/DiagramEditor.ts
+157
View File
@@ -0,0 +1,157 @@
// Copyright (c) 2024-present AI-Labs
// https://www.diagrams.com/doc/faq/embed-mode
class DiagramEditor {
frame: HTMLIFrameElement | undefined
container: string
domain = 'https://embed.diagrams.net'
// https://www.drawio.com/doc/faq/supported-url-parameters
params = {
ui: 'atlas',
proto: 'json',
libraries: 1,
configure: 1,
noSaveBtn: 1,
}
xml: string | null = null
format = 'xmlsvg'
data: any
constructor({
domain,
params,
container,
}: {
domain?: string
params?: Record<string, any>
container: string
}) {
this.domain = domain ?? this.domain
this.params = { ...params, ...this.params }
this.container = container
}
handleuseMessageEvent = (evt: MessageEvent) => {
if (
this.frame !== undefined &&
evt.source === this.frame.contentWindow &&
evt.data.length > 0
) {
try {
const msg = JSON.parse(evt.data)
if (msg) {
this.handleuseMessage(msg)
}
} catch (e) {
console.error(e)
}
}
}
// 编辑元素
edit(src: string) {
let fmt = this.format
if (src.substring(0, 15) === 'data:image/png;') {
fmt = 'xmlpng'
} else if (src.substring(0, 19) === 'data:image/svg+xml;') {
fmt = 'xmlsvg'
}
this.startEditing(src, fmt)
return this
}
// 创建 iframe
createFrame() {
const params = Object.keys(this.params)
.map((key) => `${key}=${this.params[key as keyof typeof this.params]}`)
.join('&')
const frame = document.createElement('iframe')
frame.setAttribute('class', 'uai-diagrams-iframe')
frame.setAttribute('src', `${this.domain}?${params}&lang=zh`)
return frame
}
// diagrams页面和当前页面通信
postMessage(msg: Record<string, any>) {
if (this.frame) {
this.frame.contentWindow?.postMessage(JSON.stringify(msg), '*')
}
}
handleuseMessage(msg: {
event: string
data: any
xml: string
exit: boolean
}) {
if (msg.event === 'configure') {
this.configureEditor()
} else if (msg.event === 'init') {
this.initializeEditor()
} else if (msg.event === 'save') {
this.export(msg.data)
this.xml = msg.xml
if (msg.exit) {
msg.event = 'exit'
} else {
this.postMessage({
action: 'status',
messageKey: 'allChangesSaved',
modified: false,
})
}
}
if (msg.event === 'exit') {
if (this.format !== 'xml') {
if (this.xml) {
this.postMessage({
action: 'export',
format: this.format,
xml: this.xml,
spinKey: 'export',
})
}
}
this.stopEditing()
}
}
// 开始编辑
startEditing(data: any, format: string) {
if (!this.frame) {
window.addEventListener('message', this.handleuseMessageEvent)
this.format = format ?? this.format
this.data = data
this.frame = this.createFrame()
const container = document.querySelector(this.container)
container?.appendChild(this.frame)
}
}
// 停止编辑
stopEditing() {
window.removeEventListener('message', this.handleuseMessageEvent)
this.frame = undefined
}
// 安装编辑器
initializeEditor() {
this.postMessage({
action: 'load',
autosave: 0,
saveAndExit: '1',
modified: 'unsavedChanges',
xml: this.data,
})
}
// 设置编辑器
configureEditor() {
this.postMessage({ action: 'configure', config: this.params.configure })
}
// 导出数据
export(data: any) {
return data
}
}
export default DiagramEditor