实现了简易的tooltip

plugins/quickstyle/index.ts

@@ -41,4 +41,6 @@ class DDeiExtQuickStyle extends DDeiPluginBase {
 }
 
 export {DDeiExtQuickStyle}
+export * from "./canvasquickdialog"
+export * from "./quickstyle-lifecycle"
 export default DDeiExtQuickStyle;

plugins/search/index.ts

@@ -66,4 +66,8 @@ class DDeiExtSearch extends DDeiPluginBase {
 }
 
 export {DDeiExtSearch}
+export * from "./searchdialog"
+export * from "./searchpanel"
+export * from "./hotkeys"
+export * from "./search-lifecycle"
 export default DDeiExtSearch;

plugins/tooltip/TooltipDialog.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :id="editor?.id + '_' + dialogId" v-if="forceRefresh" class='ddei-ext-dialog-tooltip fade-in'>
+    <div class="ddei-ext-dialog-tooltip-row">
+      <div class="ddei-ext-dialog-tooltip-row-title" v-if="model?.id">
+        ID
+      </div>
+      <div class="ddei-ext-dialog-tooltip-row-data" v-if="model?.id">
+        {{ model?.id }}
+      </div>
+    </div>
+    <div class="ddei-ext-dialog-tooltip-row" v-if="model?.code">
+      <div class="ddei-ext-dialog-tooltip-row-title">
+        CODE
+      </div>
+      <div class="ddei-ext-dialog-tooltip-row-data">
+        {{ model?.code }}
+      </div>
+    </div>
+    <div class="ddei-ext-dialog-tooltip-row" v-if="model?.text">
+      <div class="ddei-ext-dialog-tooltip-row-title">
+        文本
+      </div>
+      <div class="ddei-ext-dialog-tooltip-row-data">
+        {{ model?.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { DDeiEditor } from "ddei-framework";
+
+export default {
+  name: 'ddei-ext-dialog-tooltip',
+  extends: null,
+  props: {
+    //外部传入的插件扩展参数
+    options: {
+      type: Object,
+      default: null
+    },
+    editor: {
+      type: DDeiEditor,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dialogId: 'ddei-ext-dialog-tooltip',
+      //当前控件
+      model: null,
+      forceRefresh: false,
+    };
+  },
+  computed: {},
+  components: {},
+  watch: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+    this.editor.dialogs[this.dialogId].viewer = this
+    this.refreshData()
+  },
+  methods: {
+
+    forceRefreshView: function () {
+      this.forceRefresh = false
+      this.$nextTick(() => {
+        this.forceRefresh = true;
+        if (this.refreshData) {
+          this.refreshData();
+        }
+      });
+    },
+    refreshData(){
+      if (this.editor.tempPopData && this.editor.tempPopData['ddei-ext-dialog-tooltip']){
+        this.model = this.editor.tempPopData['ddei-ext-dialog-tooltip'].model
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+/**以下是快捷样式编辑的弹出框 */
+.ddei-ext-dialog-tooltip {
+
+  border: 1px solid var(--panel-border);//darken(var(--panel-header), 13%);
+  box-shadow: 0px 2px 24px 0px hsl(0deg 0% 0% /0.25);//darken(var(--panel-header), 10%);
+  border-radius: 6px;
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  background-color: var(--panel-background);
+  z-index: 2999;
+  user-select: none;
+  color: var(--panel-title);
+  &-row{
+    width:160px;
+    min-height:30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-title {
+      flex: 1;
+      text-align: center;
+    }
+
+    &-data {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+</style>

plugins/tooltip/index.ts

@@ -0,0 +1,46 @@
+import { DDeiPluginBase } from "ddei-framework";
+import DDeiCoreTooltipDialog from "./tooltipdialog"
+import DDeiExtTooltipLifeCycle from "./tooltip-lifecycle"
+
+class DDeiExtTooltip extends DDeiPluginBase {
+  type: string = "package"
+
+
+  /**
+   * 缺省实例
+   */
+  static defaultIns: DDeiExtTooltip = new DDeiExtTooltip(null);
+
+  dialogs: object = DDeiCoreTooltipDialog;
+
+  lifecyclies: object = DDeiExtTooltipLifeCycle;
+
+  getDialogs(editor) {
+    if (DDeiPluginBase.isSubclass(this.dialogs, DDeiPluginBase)) {
+      return this.dialogs.defaultIns.getDialogs(editor);
+    } else if (this.dialogs instanceof DDeiPluginBase) {
+      return this.dialogs.getDialogs(editor);
+    }
+  }
+
+  getLifeCyclies(editor) {
+    if (DDeiPluginBase.isSubclass(this.lifecyclies, DDeiPluginBase)) {
+      return this.lifecyclies.defaultIns.getLifeCyclies(editor);
+    } else if (this.lifecyclies instanceof DDeiPluginBase) {
+      return this.lifecyclies.getLifeCyclies(editor);
+    }
+  }
+
+
+  static configuration(options) {
+    let core = new DDeiExtTooltip(options);
+    core.dialogs = core.dialogs.configuration(options, true)
+    core.lifecyclies = core.lifecyclies.configuration(options, true)
+    return core;
+  }
+}
+
+export { DDeiExtTooltip }
+export * from "./tooltipdialog"
+export * from "./tooltip-lifecycle"
+export default DDeiExtTooltip;

plugins/tooltip/tooltip-lifecycle.ts

@@ -0,0 +1,87 @@
+import { DDeiLifeCycle, DDeiFuncData, DDeiEditorUtil, DDeiUtil, DDeiFuncCallResult, DDeiEditorState } from "ddei-framework";
+import { debounce } from "lodash";
+
+class DDeiExtTooltipLifeCycle extends DDeiLifeCycle {
+  
+  name:string = "ddei-ext-tooltip-lifecycle"
+  /**
+   * 缺省实例
+   */
+  static defaultIns: DDeiExtTooltipLifeCycle = new DDeiExtTooltipLifeCycle({
+    time:400
+  });
+
+  EVENT_MOUSE_IN_AREA: DDeiFuncData | null = new DDeiFuncData("tooltip-show", 1, (operateType, data, ddInstance, evt)=>{
+    this.showTooltip(operateType, data, ddInstance, evt)
+  });
+  
+  showTooltip(operateType, data, ddInstance, evt): DDeiFuncCallResult {
+    
+    let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
+    //如果悬停时间大于400，显示tooltip
+    if (data.models?.length > 0 && data.models[0]){
+     
+      if (editor.tempHoverModel != data.models[0]){
+        
+        if (!editor.tempHoverX || !editor.tempHoverY || Math.abs(editor.tempHoverX - data.x) > 10 || Math.abs(editor.tempHoverY - data.y) > 10){
+          console.log(editor.id+"---1")
+          //隐藏弹出框
+          if (editor.tempPopData && editor.tempPopData['ddei-ext-dialog-tooltip']) {
+            DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-tooltip', true)
+          }
+          editor.tempHoverModel = data.models[0]
+          editor.tempHoverX = data.x
+          editor.tempHoverY = data.y
+          editor.tempHoverTime = new Date().getTime()
+        }
+      }else{
+        console.log(editor.tempHoverTime)
+        if(new Date().getTime() - editor.tempHoverTime >= this.options.time){
+          data.model = editor.tempHoverModel
+   
+          this.showTooltipDialog(operateType, data, ddInstance, evt)
+        }
+      }
+    }
+    //关闭tooltip
+    else{
+    
+      //隐藏弹出框
+      if (editor.tempPopData && editor.tempPopData['ddei-ext-dialog-tooltip']) {
+        DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-tooltip', true)
+      }
+      delete editor.tempHoverModel
+      delete editor.tempHoverTime
+      delete editor.tempHoverX
+      delete editor.tempHoverY
+    }
+    
+    
+
+  }
+
+  /**
+   * 鼠标进入控件
+   */
+  showTooltipDialog(operateType, data, ddInstance, evt,options): DDeiFuncCallResult {
+    let editor = DDeiEditorUtil.getEditorInsByDDei(ddInstance);
+    if (!editor.tempPopData || !editor.tempPopData['ddei-ext-dialog-tooltip'] || editor.tempPopData['ddei-ext-dialog-tooltip'].model != data.model) {
+      //隐藏弹出框
+      DDeiEditorUtil.closeDialog(editor, 'ddei-ext-dialog-tooltip', true)
+      //显示弹出框
+      let editorEle = document.getElementById(editor.id);
+      let editorDomPos = DDeiUtil.getDomAbsPosition(editorEle);
+      let modelPos = DDeiUtil.getModelsDomAbsPosition([data.model])
+      debugger
+      let left = modelPos.left - editorDomPos.left+modelPos.width+10
+      let top = modelPos.top - editorDomPos.top - 10
+      DDeiEditorUtil.showDialog(editor, 'ddei-ext-dialog-tooltip', {
+        group: "canvas-pop-tooltip",
+        model: data.model
+      }, { type: 99, left: left, top: top, hiddenMask: true }, null, true, true)
+    }
+    
+  }
+}
+
+export default DDeiExtTooltipLifeCycle

plugins/tooltip/tooltipdialog.ts

@@ -0,0 +1,43 @@
+import { DDeiPluginBase } from "ddei-framework";
+import TooltipDialog from './TooltipDialog.vue';
+
+class DDeiCoreTooltipDialog extends DDeiPluginBase {
+
+  name: string = TooltipDialog.name
+  /**
+   * 缺省实例
+   */
+  static defaultIns: DDeiCoreTooltipDialog = new DDeiCoreTooltipDialog(null);
+
+
+  plugins: object[] = [TooltipDialog]
+
+  getDialogs(editor) {
+    return this.plugins;
+  }
+
+  static configuration(options, fullConfig: boolean = false) {
+    //解析options，只使用自己相关的
+    if (options) {
+      let newOptions = {}
+      if (fullConfig) {
+        if (fullConfig) {
+          if (options[TooltipDialog.name]) {
+            for (let i in options[TooltipDialog.name]) {
+              newOptions[i] = options[TooltipDialog.name][i]
+            }
+          }
+        }
+      } else {
+        newOptions = options
+      }
+      if (newOptions && Object.keys(newOptions).length !== 0) {
+        let panels = new DDeiCoreTooltipDialog(newOptions);
+        return panels;
+      }
+    }
+    return DDeiCoreTooltipDialog;
+  }
+}
+
+export default DDeiCoreTooltipDialog

src/App.vue

@@ -5,6 +5,7 @@ import { DDeiExtUML } from "@ddei/uml"
 import { DDeiExtSearch } from "@ddei/search"
 import { DDeiFuncCallResult } from "ddei-framework";
 import DDeiExtQuickStyle from "@ddei/quickstyle"
+import DDeiExtTooltip from "@ddei/tooltip"
 import { DDeiExtQuickControl, QuickChooseControlDialog } from "@ddei/quickcontrol"
 import { defineComponent, markRaw } from "vue";
 export default defineComponent({
@@ -32,7 +33,8 @@ export default defineComponent({
         DDeiExtSearch,
         DDeiExtQuickStyle,
         DDeiExtQuickControl,
-        QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] })
+        QuickChooseControlDialog.configuration({ customGroups: ['101', '102'] }),
+        DDeiExtTooltip
         // QuickChooseControlDialog.configuration({ customControls: ['100001', '100002','100003']})
         // DDeiCoreThemeBlack.configuration({
         //   default: true
@@ -87,6 +89,7 @@ export default defineComponent({
         DDeiExtSearch,
         DDeiExtQuickStyle,
         DDeiExtQuickControl,
+        DDeiExtTooltip
         
       ],
     })