@meta2d/core 1.0.56 → 1.0.58

package/src/dialog/dialog.ts

@@ -1,177 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,239 +0,0 @@
-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 });
-  };
-}