update 调整类型声明文件

src/components/BpmnDesign/hooks/usePanel.ts

@@ -1,8 +1,7 @@
-import { Ref } from 'vue';
 import showConfig from '@/components/BpmnDesign/assets/showConfig';
-
+import { Moddle, Modeler, Modeling } from 'bpmn';
 interface Options {
-  modeler: any;
+  modeler: Modeler;
   element: any;
 }
 
@@ -17,7 +16,7 @@ export default (ops: Options) => {
   const config = computed(() => showConfig[elementType.value] || {});
 
   const updateProperties = (properties: any) => {
-    const modeling = modeler.get('modeling');
+    const modeling = modeler.get<Modeling>('modeling');
     modeling.updateProperties(element, properties);
   };
 
@@ -33,7 +32,7 @@ export default (ops: Options) => {
   };
   const documentationChange = (newVal: string) => {
     if (newVal) {
-      const documentationElement = modeler.get('moddle').create('bpmn:Documentation', { text: newVal });
+      const documentationElement = modeler.get<Moddle>('moddle').create('bpmn:Documentation', { text: newVal });
       updateProperties({ documentation: [documentationElement] });
     } else {
       updateProperties({ documentation: null });

src/components/BpmnDesign/hooks/useParseElement.ts

@@ -1,8 +1,9 @@
 import { Ref } from 'vue';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
 
 interface Options {
-  modeler: any;
+  modeler: Modeler;
   element: any;
 }
 

src/components/BpmnDesign/panel/GatewayPanel.vue

@@ -16,12 +16,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { GatewayPanel } from 'bpmnDesign';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
+import { GatewayPanel } from 'bpmnDesign';
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }

src/components/BpmnDesign/panel/ProcessPanel.vue

@@ -23,14 +23,15 @@
 
 <script setup lang="ts">
 import ExecutionListener from './property/ExecutionListener.vue';
-import { ProcessPanel } from 'bpmnDesign';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
+import { ProcessPanel } from 'bpmnDesign';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }

src/components/BpmnDesign/panel/SequenceFlowPanel.vue

@@ -22,12 +22,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { SequenceFlowPanel } from 'bpmnDesign';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
+import { SequenceFlowPanel } from 'bpmnDesign';
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }

src/components/BpmnDesign/panel/StartEndPanel.vue

@@ -16,12 +16,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { StartEndPanel } from 'bpmnDesign';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
+import { StartEndPanel } from 'bpmnDesign';
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -22,11 +22,12 @@
 </template>
 <script setup lang="ts">
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
-import { TaskPanel } from 'bpmnDesign';
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { Modeler } from 'bpmn';
+import { TaskPanel } from 'bpmnDesign';
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }

src/components/BpmnDesign/panel/property/ExecutionListener.vue

@@ -75,12 +75,14 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { ExecutionListenerVO } from 'bpmnDesign';
+import { Moddle, Modeler } from 'bpmn';
+
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
 
 const emit = defineEmits(['close']);
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }
@@ -95,9 +97,6 @@ const formDialog = useDialog({
   title: selectRow.value ? '编辑&保存' : '新增&保存'
 });
 
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '执行监听器'
-});
 const { showConfig, elementType, updateProperties } = usePanel({
   modeler: props.modeler,
   element: toRaw(props.element)
@@ -178,17 +177,17 @@ const updateElement = () => {
   if (data.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
+      extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
     }
     // 清除旧值
     extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
     data.forEach((item) => {
-      const executionListener = props.modeler.get('moddle').create('flowable:ExecutionListener');
+      const executionListener = props.modeler.get<Moddle>('moddle').create('flowable:ExecutionListener');
       executionListener['event'] = item.event;
       executionListener[item.type] = item.className;
       if (item.params && item.params.length) {
         item.params.forEach((field) => {
-          const fieldElement = props.modeler.get('moddle').create('flowable:Field');
+          const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
           fieldElement['name'] = field.name;
           fieldElement[field.type] = field.value;
           executionListener.get('fields').push(fieldElement);
@@ -205,10 +204,6 @@ const updateElement = () => {
   }
 };
 
-defineExpose({
-  openDialog
-});
-
 const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
   editEvent(row);
 };

src/components/BpmnDesign/panel/property/TaskListener.vue

@@ -74,13 +74,15 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { TaskListenerVO } from 'bpmnDesign';
+import { Moddle, Modeler } from 'bpmn';
+
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  modeler: any;
+  modeler: Modeler;
   element: any;
   categorys?: any[];
 }
@@ -88,9 +90,6 @@ const props = withDefaults(defineProps<PropType>(), {
   categorys: () => []
 });
 
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '任务监听器'
-});
 const selectRow = ref<TaskListenerVO | null>();
 const formDialog = useDialog({
   title: selectRow.value ? '编辑&保存' : '新增&保存'
@@ -178,17 +177,17 @@ const updateElement = () => {
   if (data.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements');
+      extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
     }
     // 清除旧值
     extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
     data.forEach((item) => {
-      const taskListener = props.modeler.get('moddle').create('flowable:TaskListener');
+      const taskListener = props.modeler.get<Moddle>('moddle').create('flowable:TaskListener');
       taskListener['event'] = item.event;
       taskListener[item.type] = item.className;
       if (item.params && item.params.length) {
         item.params.forEach((field) => {
-          const fieldElement = props.modeler.get('moddle').create('flowable:Field');
+          const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
           fieldElement['name'] = field.name;
           fieldElement[field.type] = field.value;
           taskListener.get('fields').push(fieldElement);
@@ -205,9 +204,6 @@ const updateElement = () => {
   }
 };
 
-defineExpose({
-  openDialog
-});
 const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
   editEvent(row);
 };

src/store/modules/modeler.ts

@@ -1,8 +1,4 @@
-import type { Moddle } from 'moddle';
+import { Modeler, Modeling, Canvas, ElementRegistry, Moddle } from 'bpmn';
-import type Modeler from 'bpmn-js/lib/Modeler';
-import type Modeling from 'bpmn-js/lib/features/modeling/Modeling';
-import type Canvas from 'diagram-js/lib/core/Canvas';
-import type ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
 
 type ModelerStore = {
   modeler: Modeler | undefined;
@@ -58,9 +54,9 @@ export const useModelerStore = defineStore('modeler', () => {
     }
   };
   // 设置流程定义根节点信息
-  const setProcDef = (modeler: any | undefined) => {
+  const setProcDef = (modeler: Modeler | undefined) => {
-    procDefId.value = modeler.get('canvas').getRootElement().businessObject.get('id');
+    procDefId.value = modeler.get<Canvas>('canvas').getRootElement().businessObject.get('id');
-    procDefName.value = modeler.get('canvas').getRootElement().businessObject.get('name');
+    procDefName.value = modeler.get<Canvas>('canvas').getRootElement().businessObject.get('name');
   };
 
   return {

src/types/bpmn/editor/settings.d.ts

@@ -22,7 +22,7 @@ export interface EditorSettings {
 
 export type ModelerOptions<E extends Element> = ViewerOptions<E> & {
   additionalModules: ModuleDeclaration[];
-  moddleExtensions: Object;
+  moddleExtensions: object;
 };
 
 // bpmn.js 事件参数

src/types/bpmn/index.d.ts

@@ -0,0 +1,13 @@
+declare module 'bpmn' {
+  import { Moddle as moddle } from 'moddle';
+  import type modeler from 'bpmn-js/lib/Modeler';
+  import type modeling from 'bpmn-js/lib/features/modeling/Modeling';
+  import type canvas from 'diagram-js/lib/core/Canvas';
+  import type elementRegistry from 'diagram-js/lib/core/ElementRegistry';
+
+  export type Modeler = modeler;
+  export type Modeling = modeling;
+  export type Canvas = canvas;
+  export type ElementRegistry = elementRegistry;
+  export type Moddle = moddle;
+}

src/types/bpmn/moddle.d.ts

@@ -28,7 +28,6 @@ declare module 'moddle' {
     static hasType(element: ModdleElement, type?: string): boolean;
   }
 
-  // Factory
   export class Factory {
     model: Moddle;
     properties: Properties;
@@ -42,19 +41,10 @@ declare module 'moddle' {
   export type TypeConverters = {
     [T in Exclude<BuiltinsKeys, 'Element'>]: (s: string) => string | boolean | number;
   };
-  /**
-   * Convert a type to its real representation
-   */
   export type coerceType = <T extends Exclude<BuiltinsKeys, 'Element'>>(type: T, value: string) => ReturnType<TypeConverters[T]>;
 
-  /**
-   * Return whether the given type is built-in
-   */
   export function isBuiltIn(type: BuiltinsKeys): boolean;
 
-  /**
-   * Return whether the given type is simple
-   */
   export function isSimple(type: Exclude<BuiltinsKeys, 'Element'>): boolean;
 
   type ParsedName = {
@@ -63,15 +53,6 @@ declare module 'moddle' {
     localName: string;
   };
 
-  /**
-   * Parses a namespaced attribute name of the form (ns:)localName to an object,
-   * given a default prefix to assume in case no explicit namespace is given.
-   *
-   * @param {String} name
-   * @param {String} [defaultPrefix] the default prefix to take, if none is present.
-   *
-   * @return {ParsedName} the parsed name
-   */
   export function parseName(name: string, defaultPrefix?: string): ParsedName;
 
   // DescriptorBuilder
@@ -156,37 +137,15 @@ declare module 'moddle' {
 
     registerPackage(pkg: Package): number;
 
-    /**
-     * Register a type from a specific package with us
-     * @param {DescriptorType} type
-     * @param {Package} pkg
-     */
     registerType(type: DescriptorType, pkg: Package): void;
 
-    /**
-     * Traverse the type hierarchy from bottom to top,
-     * calling iterator with (type, inherited) for all elements in
-     * the inheritance chain.
-     *
-     * @param {Object} nsName
-     * @param {Function} iterator
-     * @param {Boolean} [trait=false]
-     */
     mapTypes(nsName: object, iterator: Function, trait?: boolean);
 
-    /**
-     * Returns the effective descriptor for a type.
-     *
-     * @param  {String} name the namespaced name (ns:localName) of the type
-     *
-     * @return {Descriptor} the resulting effective descriptor
-     */
     getEffectiveDescriptor(name: string): DescriptorBuilder;
 
     definePackage(target: Descriptor, pkg: Package): void;
   }
 
-  //Properties
   export class Properties {
     model: Moddle;
 
@@ -203,54 +162,30 @@ declare module 'moddle' {
     defineModel(target: Omit<ModdleElement, '$model'>, model: ModdleElement): void;
   }
 
-  // Moddle
   export class Moddle {
     properties: Properties;
     factory: Factory;
     registry: Registry;
     typeCache: Record<string, ModdleElement>;
-    /**
+
-     * Returns a registered package by uri or prefix
-     *
-     * @return {Object} the package
-     */
     getPackage: typeof Registry.prototype.getPackage;
-    /**
+
-     * Returns a snapshot of all known packages
-     *
-     * @return {Object} the package
-     */
     getPackages: typeof Registry.prototype.getPackages;
 
     constructor(packages: Package[]);
 
-    create(type: Descriptor | string, attrs: any): ModdleElement;
+    create(type: Descriptor | string, attrs?: any): ModdleElement;
 
     getType(type: string | Descriptor): DescriptorBuilder;
 
     createAny(name: string, nsUri: string, properties?: Properties): void;
 
-    /**
-     * Returns the descriptor for an element
-     */
     getElementDescriptor(element: ModdleElement): Descriptor;
 
-    /**
-     * Returns true if the given descriptor or instance
-     * represents the given type.
-     *
-     * May be applied to this, if element is omitted.
-     */
     hasType(element: ModdleElement | string, type?: string): boolean;
 
-    /**
-     * Returns the descriptor of an elements named property
-     */
     getPropertyDescriptor(element: ModdleElement, property: Property): Descriptor;
 
-    /**
-     * Returns a mapped type's descriptor
-     */
     getTypeDescriptor(type: string): Descriptor;
   }