diff --git a/plugins/quickstyle/index.ts b/plugins/quickstyle/index.ts index ec6b6fb..b8ee701 100644 --- a/plugins/quickstyle/index.ts +++ b/plugins/quickstyle/index.ts @@ -41,4 +41,6 @@ class DDeiExtQuickStyle extends DDeiPluginBase { } export {DDeiExtQuickStyle} +export * from "./canvasquickdialog" +export * from "./quickstyle-lifecycle" export default DDeiExtQuickStyle; \ No newline at end of file diff --git a/plugins/search/index.ts b/plugins/search/index.ts index e94a152..aced9a2 100644 --- a/plugins/search/index.ts +++ b/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; \ No newline at end of file diff --git a/plugins/tooltip/TooltipDialog.vue b/plugins/tooltip/TooltipDialog.vue new file mode 100644 index 0000000..f76ff2b --- /dev/null +++ b/plugins/tooltip/TooltipDialog.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/plugins/tooltip/index.ts b/plugins/tooltip/index.ts new file mode 100644 index 0000000..19b89a7 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/plugins/tooltip/tooltip-lifecycle.ts b/plugins/tooltip/tooltip-lifecycle.ts new file mode 100644 index 0000000..5b89951 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/plugins/tooltip/tooltipdialog.ts b/plugins/tooltip/tooltipdialog.ts new file mode 100644 index 0000000..1b796ad --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 51fd80a..bc97e79 100644 --- a/src/App.vue +++ b/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 ], })