feat:message

le5le-com · Oct 24, 2024 · 3107717 · 3107717
1 parent 57ff2ff
commit 3107717
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 0 deletions.
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -79,6 +79,7 @@ import { Scroll } from './scroll';
 import { getter } from './utils/object';
 import { queryURLParams } from './utils/url';
 import { HotkeyType } from './data';
+import { Message, MessageOptions, messageList } from './message';
 
 export class Meta2d {
   store: Meta2dStore;
@@ -633,6 +634,24 @@ export class Meta2d {
       window.parent.postMessage(JSON.stringify({name:e.value,value}), '*');
       return;
     };
+    this.events[EventAction.Message] = (pen: Pen, e: Event) => {
+      this.message({
+        theme: e.params as any,
+        content: e.value as any,
+        ...e.extend
+      });
+    }
+  }
+
+  message(options:MessageOptions){
+    const message = new Message(this.canvas.parentElement, options);
+    message.init();
+  }
+
+  closeAll(){
+    for(let key in messageList){
+      messageList[key].close();
+    }
   }
 
   async navigatorTo(id: string) {
@@ -5555,6 +5574,7 @@ export class Meta2d {
     this.stopDataMock();
     this.closeSocket();
     this.closeNetwork();
+    this.closeAll();
     this.store.emitter.all.clear(); // 内存释放
     this.canvas.destroy();
     this.canvas = undefined;

diff --git a/packages/core/src/event/event.ts b/packages/core/src/event/event.ts
@@ -66,6 +66,7 @@ export enum EventAction {
   SendData, //数据源选择
   PostMessage, //发送场景数据
   PostMessageToParent, //向父窗口发送消息
+  Message, //消息提示
 }
 
 export interface Where {

diff --git a/packages/core/src/message/index.ts b/packages/core/src/message/index.ts
@@ -0,0 +1 @@
+export * from './message';
diff --git a/packages/core/src/message/message.ts b/packages/core/src/message/message.ts
@@ -0,0 +1,194 @@
+import { s8 } from '../utils';
+
+const status = {
+  success: {
+    color: '#2ba471',
+    icon: '<svg fill="none" viewBox="0 0 24 24"><path d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path></svg>',
+  },
+  info: {
+    color: '#0052d9',
+    icon: '<svg fill="none" viewBox="0 0 24 24"><path d="M12 23a11 11 0 100-22 11 11 0 000 22zM11 8.5v-2h2v2h-2zm2 1.5v7.5h-2V10h2z"></path></svg>',
+  },
+  warning: {
+    color: '#e37318',
+    icon: '<svg fill="none" viewBox="0 0 24 24"><path d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"></path></svg>',
+  },
+  error: {
+    color: '#d54941',
+    icon: '<svg fill="none" viewBox="0 0 24 24"><path d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"></path></svg>',
+  },
+  question: {
+    color: '#0052d9',
+    icon: '<svg fill="none" viewBox="0 0 24 24"><path d="M12 23a11 11 0 100-22 11 11 0 000 22zm-.17-11.11c.43-.53.97-.97 1.4-1.32A2 2 0 0012 7a2 2 0 00-1.89 1.33l-.33.95L7.9 8.6l.34-.94a4 4 0 116.24 4.47 7 7 0 00-1.1 1.01c-.27.34-.37.61-.37.85v1.25h-2V14c0-.87.39-1.57.83-2.11zM11 18.25v-2h2v2h-2z"></path></svg>',
+  },
+};
+
+export type Theme = 'success' | 'info' | 'warning' | 'error' | 'question';
+
+export interface MessageOptions {
+  id?: string; //唯一标识
+  content?: string;
+  theme?: Theme; //主题
+  placement?: string; //位置
+  duration?: number; //定时销毁时间 为0时不销毁
+  closeBtn?: boolean; //是否显示关闭按钮
+}
+
+export const messageList: {
+  [key: string]: Message;
+} = {};
+
+export class Message {
+  box: HTMLElement;
+  icon: HTMLElement;
+  text: HTMLElement;
+  closeBtn: HTMLElement;
+  duration: number; //定时销毁时间
+  content: string;
+  theme: Theme; //主题
+  placement: string; //位置
+  id: string;
+  constructor(public parentElement: HTMLElement, options: MessageOptions) {
+    this.box = document.createElement('div');
+    this.icon = document.createElement('div');
+    this.text = document.createElement('div');
+
+    this.box.className = 'meta2d-message';
+    this.icon.className = 'icon';
+    this.text.className = 'text';
+    this.icon.innerHTML = status[options.theme || 'info'].icon;
+    this.text.innerHTML = options.content;
+
+    this.box.appendChild(this.icon);
+    this.box.appendChild(this.text);
+
+    if (options.closeBtn) {
+      this.closeBtn = document.createElement('div');
+      this.closeBtn.className = 'close';
+      this.closeBtn.innerHTML = 'x';
+      this.closeBtn.onclick = () => {
+        this.close();
+      };
+      this.box.appendChild(this.closeBtn);
+    }
+
+    parentElement.appendChild(this.box);
+
+    let sheet: any;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].title === 'le5le.com/message') {
+        sheet = document.styleSheets[i];
+      }
+    }
+
+    if (!sheet) {
+      let style = document.createElement('style');
+      style.type = 'text/css';
+      style.title = 'le5le.com/message';
+      document.head.appendChild(style);
+
+      style = document.createElement('style');
+      style.type = 'text/css';
+      document.head.appendChild(style);
+      sheet = style.sheet;
+      sheet.insertRule(
+        `.meta2d-message{
+           position:absolute;
+           z-index:999;
+           transform: translateX(-50%); 
+           padding:12px 16px;
+           max-width:400px;
+           background:#fff;
+           border-radius:6px;
+           box-shadow:0 3px 14px 2px rgba(0, 0, 0, .05),0 8px 10px 1px rgba(0, 0, 0, 6%),0 5px 5px -3px rgba(0, 0, 0, 10%);
+           display:flex;
+           animation: fadein .5s;}`
+      );
+      sheet.insertRule(
+        `
+        @keyframes fadein {
+          0% {
+              transform: translate(-50%, -100%);
+          }
+          100% {
+              transform: translate(-50%,0);
+          }
+      }`
+      );
+      sheet.insertRule('.meta2d-message .icon{width:20px;height:20px;}');
+      sheet.insertRule(
+        '.meta2d-message .text{color:rgba(0, 0, 0, 0.9);font-size:12px;margin-left:8px;line-height:20px;}'
+      );
+      sheet.insertRule(
+        '.meta2d-message .close{width:20px;height:20px;padding-left: 16px; cursor: pointer;}'
+      );
+    }
+
+    this.id = options.id || s8();
+    this.duration = options.duration ?? 3000;
+    this.placement = options.placement || 'top';
+    this.theme = options.theme || 'info';
+    // this.init();
+  }
+
+  init() {
+    messageList[this.id] = this;
+    if (this.duration) {
+      setTimeout(() => {
+        this.close();
+      }, this.duration);
+    }
+    let idx = -1;
+    Object.keys(messageList).forEach((key) => {
+      if (messageList[key]?.placement === this.placement) {
+        idx++;
+      }
+    });
+    this.setPosition(this.placement, idx);
+    (this.icon.children[0] as HTMLElement).style.fill =
+      status[this.theme].color;
+  }
+
+  setPosition(placement: string, index: number = 0) {
+    switch (placement) {
+      case 'top':
+        this.box.style.top = `${30 + index * 60}px`;
+        this.box.style.left = '50%';
+        break;
+      case 'bottom':
+        this.box.style.bottom = `${30 + index * 60}px`;
+        this.box.style.left = '50%';
+        break;
+      case 'left':
+        this.box.style.top = `${30 + index * 60}px`;
+        this.box.style.left = '30px';
+        break;
+      case 'right':
+        this.box.style.top = `${30 + index * 60}px`;
+        this.box.style.right = '30px';
+        break;
+    }
+  }
+
+  close() {
+    Object.keys(messageList).forEach((key) => {
+      if (messageList[key]?.placement === this.placement) {
+        switch (this.placement) {
+          case 'top':
+          case 'left':
+          case 'right':
+            messageList[key].box.style.top =
+              parseInt(messageList[key].box.style.top) - 60 + 'px';
+            break;
+          case 'bottom':
+            messageList[key].box.style.bottom =
+              parseInt(messageList[key].box.style.bottom) - 60 + 'px';
+            break;
+        }
+      }
+    });
+    messageList[this.id] = null;
+    delete messageList[this.id];
+    this.box.remove();
+  }
+}