@meta2d/core 1.0.54 → 1.0.56

package/src/dialog/dialog.ts

@@ -0,0 +1,177 @@
+export class Dialog {
+  box: HTMLElement;
+  iframe: HTMLElement;
+  dialog: HTMLElement;
+  close: HTMLElement;
+  title: HTMLElement;
+  body: HTMLElement;
+  x: number;
+  y: number;
+  url: string;
+  constructor(public parentElement: HTMLElement) {
+    this.box = document.createElement('div');
+    this.dialog = document.createElement('div');
+    let header = document.createElement('div');
+    this.title = document.createElement('div');
+    this.close = document.createElement('span');
+    this.close.innerHTML = `
+      <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em">
+      <path
+        fill="currentColor"
+        d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+        fill-opacity="0.9"
+      ></path>
+    </svg>`;
+    this.body = document.createElement('div');
+    this.iframe = document.createElement('iframe');
+    this.iframe.setAttribute('frameborder', '0');
+    this.box.className = 'meta2d-dialog_mask';
+    this.dialog.className = 'meta2d-dialog';
+    this.body.className = 'meta2d-dialog_body';
+    header.className = 'meta2d-dialog_header';
+    this.title.className = 'meta2d-dialog-content';
+    this.close.className = 'meta2d-dialog-close';
+
+    header.appendChild(this.title);
+    header.appendChild(this.close);
+    this.body.appendChild(this.iframe);
+    this.dialog.appendChild(header);
+    this.dialog.appendChild(this.body);
+    this.box.appendChild(this.dialog);
+    parentElement.appendChild(this.box);
+
+    this.dialog.onclick = (e) => {
+      e.stopPropagation();
+    };
+    this.box.onclick = () => {
+      this.hide();
+    };
+    this.close.onclick = () => {
+      this.hide();
+    };
+
+    let sheet: any;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].title === 'le5le.com/dialog') {
+        sheet = document.styleSheets[i];
+      }
+    }
+
+    if (!sheet) {
+      let style = document.createElement('style');
+      style.type = 'text/css';
+      style.title = 'le5le.com/dialog';
+      document.head.appendChild(style);
+
+      style = document.createElement('style');
+      style.type = 'text/css';
+      document.head.appendChild(style);
+      sheet = style.sheet;
+      sheet.insertRule(
+        `.meta2d-dialog_mask {
+        display: none;
+        position: absolute;
+        top: 0%;
+        left: 0%;
+        width: 100%;
+        height: 100%;
+        background-color: #0000006f;
+        z-index: 9999;`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog_mask .meta2d-dialog {
+            position: absolute;
+            top: 15vh;
+            left: 10%;
+            width: 80%;
+            height:420px;
+            padding: 16px 20px;
+            border-radius: 9px;
+            background-color: #1e2430;
+            z-index: 19999;
+            overflow: auto;
+        }`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog_header {
+            display: flex;
+        }`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog-content {
+            width: calc(100% - 20px);
+            font-weight: 600;
+            font-size: 14px;
+            color: #bdc7db;
+            padding-bottom:8px;
+        }`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog-close {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            color: #617b91;
+            position: absolute;
+            right:20px;
+            top:18px;
+        }`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog-close :hover{
+            cursor: pointer;
+        }`
+      );
+      sheet.insertRule(
+        `.meta2d-dialog_body{
+            // margin-top: 4px;
+        } `
+      );
+      sheet.insertRule(
+        `.meta2d-dialog_body iframe{
+            width: 100%;
+            height: 100%;
+        }`
+      );
+    }
+  }
+
+  show(title?: string, url?: string, rect?:{x:number,y:number,width:number,height:number}) {
+    if(!url){
+      return;
+    }
+    if(url !== this.url){
+      this.iframe.setAttribute('src', url);
+      this.url = url;
+    }
+    title && (this.title.innerText = title);
+    if(!title){
+      this.dialog.style.padding = '0px';
+      this.title.style.display = 'none';
+      this.body.style.height = '100%';
+      this.body.style.overflow= 'hidden';
+    }else{
+      this.dialog.style.padding = '16px 20px';
+      this.title.style.display = 'block';
+      this.body.style.height = 'calc(100% - 26px)';
+    }
+    if(rect) {
+      this.dialog.style.top = rect.y?(rect.y + 'px'): '15vh';
+      this.dialog.style.left = rect.x? (rect.x + 'px'): '10%';
+      this.dialog.style.width = rect.width?(rect.width + 'px'): '80%'
+      this.dialog.style.height = rect.height?(rect.height + 'px'): '420px';
+      this.box.style.display = 'block';
+    }
+  }
+
+  hide() {
+    this.box.style.display = 'none';
+  }
+
+  destroy() {
+    this.dialog.onclick = undefined;
+    this.box.onclick = undefined;
+    this.close.onclick = undefined;
+  }
+}

package/src/event/event.ts

@@ -0,0 +1,142 @@
+import { Meta2d } from '../core';
+import { IValue, Pen } from '../pen';
+import { Network } from '../store';
+
+export type EventValue = string | IValue | undefined | null;
+// 事件行为
+export type EventName =
+  | 'enter'
+  | 'leave'
+  | 'active'
+  | 'inactive'
+  | 'click'
+  | 'mousedown'
+  | 'mouseup'
+  | 'dblclick'
+  | 'valueUpdate'
+  | 'message'
+  | 'contextmenu'
+  | 'input'
+  | 'change';
+
+export interface Event {
+  name: EventName;
+  action: EventAction; // 事件动作
+  where?: Where; // 若无条件，必须为 undefined or null，不可为空对象
+  value?: EventValue; // 不同 action 下，该值含义不同，例如：动画相关的，即为 节点 tag; Function 类型即为 字符串函数
+  params?: string;
+  extend?: any;
+  fn?: (
+    pen: Pen,
+    params: string,
+    context?: { meta2d: Meta2d; eventName: string }
+  ) => void;
+  targetType?: string;
+  network?: Network;
+  actions?: Event[];
+  conditions?: TriggerCondition[];
+  conditionType?: string;
+  message?: string; //消息名称
+  callback?: string; //回调函数 仅http
+}
+
+export enum EventAction {
+  Link,
+  SetProps,
+  StartAnimate,
+  PauseAnimate,
+  StopAnimate,
+  JS, //Function
+  GlobalFn,
+  Emit,
+  StartVideo,
+  PauseVideo,
+  StopVideo,
+  SendPropData,
+  SendVarData,
+  Navigator,
+  Dialog,
+  SendData, //数据源选择
+  PostMessage, //发送场景数据
+  PostMessageToParent, //向父窗口发送消息
+}
+
+export interface Where {
+  type?: string | 'comparison';
+  key?: string;
+  comparison?: Comparison;
+  value?: unknown;
+  fn?: (
+    pen: Pen,
+    context?: {
+      meta2d: Meta2d;
+    }
+  ) => boolean;
+  fnJs?: string;
+}
+
+/**
+ * 触发器中的符号
+ */
+export type Comparison =
+  | '='
+  | '=='
+  | '!='
+  | '>'
+  | '<'
+  | '>='
+  | '<='
+  | '[)' // 介于，数学中的开闭区间
+  | '![)' // 非介于，与上一个相反
+  /**
+   * 属于，类似于 数组的 includes
+   * .. 属于范围语法，30..50 等价于 介于的 [30, 50]
+   * [1, 2, 3]  2 // true  1.5 // false
+   * [1,20,30..50,65] 1 // true 20 // true 30 // true 30.1 // true
+   */
+  | '[]'
+  | '![]'; // 非属于，与上一个相反
+
+export interface TriggerCondition {
+  type?: string; //'fn'|''
+  operator?: Comparison;
+  valueType?: string; //'prop'|''
+  value?: string;
+  target?: string;
+  label?: string;
+  fnJs?: string;
+  fn?: (
+    pen: Pen,
+    context?: {
+      meta2d: Meta2d;
+    }
+  ) => boolean;
+  key?: string;
+  source?:string;
+}
+
+export interface Trigger {
+  name?: string;
+  conditionType?: string; //'and'/'or'
+  conditions?: TriggerCondition[];
+  actions?: Event[];
+  status?: Trigger[]; //所有状态
+}
+
+export interface Bind {
+  case?: string;
+  id?: string;
+  label?: string;
+}
+
+export interface RealTime {
+  label?: string;
+  key?: string;
+  type?: string;
+  keywords?: true;
+  triggers?: Trigger[];
+  bind?: Bind;
+  value?: string;
+  enableMock?: boolean;
+  mock?: any;
+}

package/src/map/map.ts

@@ -0,0 +1,239 @@
+import { Canvas } from '../canvas';
+import { calcRightBottom, getRect, translateRect } from '../rect';
+
+export class ViewMap {
+  box: HTMLElement;
+  readonly boxWidth = 320;
+  readonly boxHeight = 180;
+  readonly ratio = this.boxWidth / this.boxHeight;
+  readonly padding = 5;
+  img: HTMLImageElement;
+  isShow: boolean;
+  isDown: boolean;
+  view: HTMLElement; // 可视区域外框
+  constructor(public parent: Canvas) {
+    this.box = document.createElement('div');
+    this.img = new Image();
+    this.view = document.createElement('div');
+
+    this.box.appendChild(this.img);
+    this.box.appendChild(this.view);
+    this.parent.externalElements?.parentElement.appendChild(this.box);
+
+    this.box.className = 'meta2d-map';
+    this.box.onmousedown = this.onMouseDown;
+    this.box.onmousemove = this.onMouseMove;
+    this.box.onmouseup = this.onMouseUp;
+    this.box.onwheel = this.onWheel;
+
+    let sheet: any;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].title === 'le5le/map') {
+        sheet = document.styleSheets[i];
+      }
+    }
+
+    if (!sheet) {
+      let style = document.createElement('style');
+      style.type = 'text/css';
+      style.title = 'le5le.com/map';
+      document.head.appendChild(style);
+
+      style = document.createElement('style');
+      style.type = 'text/css';
+      document.head.appendChild(style);
+      sheet = style.sheet;
+      sheet.insertRule(
+        `.meta2d-map{display:flex;width:${
+          this.boxWidth + 2 * this.padding
+        }px;height:${this.boxHeight + 2 * this.padding}px;padding:${
+          this.padding
+        }px;background:#f4f4f4;border:1px solid #ffffff;box-shadow: 0px 0px 14px 0px rgba(0,10,38,0.30);border-radius:8px;position:absolute;z-index:9999;right:0;bottom:0;justify-content:center;align-items:center;cursor:default;user-select:none;overflow: hidden;}`
+      );
+      sheet.insertRule(
+        '.meta2d-map img{max-width:100%;max-height:100%;pointer-events: none;}'
+      );
+      sheet.insertRule(
+        '.meta2d-map div{pointer-events: none;border:1px solid #1890ff;position:absolute}'
+      );
+    }
+  }
+
+  show() {
+    this.box.style.display = 'flex';
+
+    const data = this.parent.store.data;
+    if (data.pens.length) {
+      this.img.style.display = 'block';
+      this.img.src = this.parent.toPng();
+      this.setView();
+    } else {
+      this.img.style.display = 'none';
+    }
+    this.isShow = true;
+  }
+
+  hide() {
+    this.box.style.display = 'none';
+    this.isShow = false;
+  }
+
+  setView() {
+    const data = this.parent.store.data;
+    if (data.pens.length) {
+      let rect = getRect(data.pens);
+      const vW =
+        this.parent.store.data.width || this.parent.store.options.width;
+      const vH =
+        this.parent.store.data.height || this.parent.store.options.height;
+      if (vW && vH) {
+        //大屏
+        rect = {
+          x: this.parent.store.data.origin.x,
+          y: this.parent.store.data.origin.y,
+          width: vW * this.parent.store.data.scale,
+          height: vH * this.parent.store.data.scale,
+        };
+      }
+      // rect += data.x y 得到相对坐标
+      translateRect(rect, data.x, data.y);
+      const rectRatio = rect.width / rect.height;
+      if (rectRatio > this.ratio) {
+        // 上下留白，扩大高度
+        const height = rect.width / this.ratio;
+        rect.y -= (height - rect.height) / 2;
+        rect.height = height;
+        calcRightBottom(rect);
+      } else {
+        // 左右留白，扩大宽度
+        const width = rect.height * this.ratio;
+        rect.x -= (width - rect.width) / 2;
+        rect.width = width;
+        calcRightBottom(rect);
+      }
+      const canvasRect = this.parent.canvasRect;
+      let left = 0,
+        top = 0;
+      if (rect.x < 0) {
+        left = -rect.x / rect.width;
+      } else if (rect.x + rect.width > canvasRect.width) {
+        let space = 0;
+        if (canvasRect.width > rect.width) {
+          // 均已左上角为起点，这种场景需要剪掉一个留白
+          space = canvasRect.width - rect.width;
+        }
+        left = (-rect.x + space) / rect.width;
+      }
+
+      if (rect.y < 0) {
+        top = -rect.y / rect.height;
+      } else if (rect.y + rect.height > canvasRect.height) {
+        let space = 0;
+        if (canvasRect.height > rect.height) {
+          space = canvasRect.height - rect.height;
+        }
+        top = (-rect.y + space) / rect.height;
+      }
+
+      const width =
+        canvasRect.width > rect.width ? 1 : canvasRect.width / rect.width;
+      const height =
+        canvasRect.height > rect.height ? 1 : canvasRect.height / rect.height;
+      this.view.style.left = this.padding + left * this.boxWidth + 'px';
+      this.view.style.width = width * this.boxWidth + 'px';
+      this.view.style.top = this.padding + top * this.boxHeight + 'px';
+      this.view.style.height = height * this.boxHeight + 'px';
+    }
+  }
+
+  private onMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDown = true;
+  };
+
+  private onMouseMove = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (this.isDown) {
+      try {
+        this.parent.gotoView(
+          e.offsetX / this.box.clientWidth,
+          e.offsetY / this.box.clientHeight
+        );
+      } catch (e) {
+        console.warn(e.message);
+        this.isDown = false;
+      }
+    }
+  };
+
+  private onMouseUp = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      this.parent.gotoView(
+        e.offsetX / this.box.clientWidth,
+        e.offsetY / this.box.clientHeight
+      );
+    } catch (e) {
+      console.warn(e.message);
+    } finally {
+      this.isDown = false;
+    }
+  };
+
+  private onWheel = (e: WheelEvent) => {
+    //放大镜缩放
+    let scaleOff = 0.015;
+    if (this.parent.store.options.scaleOff) {
+      scaleOff = this.parent.store.options.scaleOff;
+      if (e.deltaY > 0) {
+        scaleOff = -this.parent.store.options.scaleOff;
+      }
+    } else {
+      let isMac = /mac os /i.test(navigator.userAgent);
+      if (isMac) {
+        if (!e.ctrlKey) {
+          scaleOff *= (e as any).wheelDeltaY / 240;
+        } else if (e.deltaY > 0) {
+          scaleOff *= -1;
+        }
+      } else {
+        let offset = 0.2;
+        if (e.deltaY.toString().indexOf('.') !== -1) {
+          offset = 0.01;
+        }
+        if (e.deltaY > 0) {
+          scaleOff = -offset;
+        } else {
+          scaleOff = offset;
+        }
+      }
+    }
+    let { offsetX: x, offsetY: y } = e;
+
+    const width =
+      this.parent.store.data.width || this.parent.store.options.width;
+    const height =
+      this.parent.store.data.height || this.parent.store.options.height;
+    if (width && height) {
+      //大屏
+      x =
+        (x / this.boxWidth) * width * this.parent.store.data.scale +
+        this.parent.store.data.origin.x +
+        this.parent.store.data.x;
+      y =
+        (y / this.boxHeight) * height * this.parent.store.data.scale +
+        this.parent.store.data.origin.y +
+        this.parent.store.data.y;
+    } else {
+      const rect = this.parent.parent.getRect();
+      x = (x / this.boxWidth) * rect.width + rect.x + this.parent.store.data.x;
+      y =
+        (y / this.boxHeight) * rect.height + rect.y + this.parent.store.data.y;
+    }
+    this.parent.scale(this.parent.store.data.scale + scaleOff, { x, y });
+  };
+}