@meta2d/core 1.0.56 → 1.0.57

package/src/scroll/scroll.ts

@@ -1,277 +0,0 @@
-import { Canvas } from '../canvas';
-import { getRect, Rect } from '../rect';
-
-export class Scroll {
-  h: HTMLElement;
-  v: HTMLElement;
-  isDownH: number;
-  isDownV: number;
-  x: number;
-  y: number;
-  hSize: number;
-  vSize: number;
-  scrollX: number;
-  scrollY: number;
-  lastScrollX: number;
-  lastScrollY: number;
-  rect: Rect;
-  isShow: boolean;
-  pageMode: boolean; //页面模式
-  constructor(public parent: Canvas) {
-    this.h = document.createElement('div');
-    this.v = document.createElement('div');
-
-    this.parent.externalElements.appendChild(this.h);
-    this.parent.externalElements.appendChild(this.v);
-
-    this.h.className = 'meta2d-scroll h';
-    this.h.onmousedown = this.onMouseDownH;
-
-    this.v.className = 'meta2d-scroll v';
-    this.v.onmousedown = this.onMouseDownV;
-
-    document.addEventListener('mousemove', this.onMouseMove);
-    document.addEventListener('mouseup', this.onMouseUp);
-
-    let sheet: any;
-    for (let i = 0; i < document.styleSheets.length; i++) {
-      if (document.styleSheets[i].title === 'le5le/scroll') {
-        sheet = document.styleSheets[i];
-      }
-    }
-
-    if (!sheet) {
-      let style = document.createElement('style');
-      style.type = 'text/css';
-      style.title = 'le5le.com/scroll';
-      document.head.appendChild(style);
-
-      style = document.createElement('style');
-      style.type = 'text/css';
-      document.head.appendChild(style);
-      sheet = style.sheet;
-      sheet.insertRule(
-        '.meta2d-scroll{position:absolute;width:8px;height:200px;background:#dddddd;border-radius:10px;z-index:20;cursor:default;}'
-      );
-      sheet.insertRule(
-        '.meta2d-scroll:hover{background:#cccccc;cursor:pointer}'
-      );
-      sheet.insertRule('.meta2d-scroll.v{right:0;top:calc(50% - 100px);}');
-      sheet.insertRule(
-        '.meta2d-scroll.h{bottom:2px;left:calc(50% - 100px);width:200px;height:8px;}'
-      );
-    }
-
-    this.init();
-  }
-
-  init() {
-    this.isShow = true;
-    this.resize();
-    this.initPos();
-  }
-
-  private onMouseDownH = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.isDownH = e.x;
-    this.x = this.parent.store.data.x || 0;
-    this.lastScrollX = this.scrollX;
-  };
-
-  private onMouseDownV = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.isDownV = e.y;
-    this.y = this.parent.store.data.y || 0;
-    this.lastScrollY = this.scrollY;
-  };
-
-  private onMouseMove = (e: MouseEvent) => {
-    if (this.isDownH) {
-      const x = e.x - this.isDownH;
-      this.scrollX = this.lastScrollX + x;
-      this.h.style.left = `${this.scrollX}px`;
-      this.parent.store.data.x =
-        this.x - (x * this.rect.width) / this.parent.parentElement.clientWidth;
-    }
-
-    if (this.isDownV) {
-      const y = e.y - this.isDownV;
-      if (this.pageMode && this.canMouseMove(y)) {
-        return;
-      }
-      this.scrollY = this.lastScrollY + y;
-      this.v.style.top = `${this.scrollY}px`;
-      this.parent.store.data.y =
-        this.y -
-        (y * this.rect.height) / this.parent.parentElement.clientHeight;
-    }
-
-    if (this.isDownH || this.isDownV) {
-      this.parent.onMovePens();
-      this.parent.canvasTemplate.init();
-      this.parent.canvasImage.init();
-      this.parent.canvasImageBottom.init();
-      this.parent.render();
-    }
-  };
-
-  private onMouseUp = (e: MouseEvent) => {
-    if (!this.isDownH && !this.isDownV) {
-      return;
-    }
-
-    this.isDownH = undefined;
-    this.isDownV = undefined;
-
-    if (this.scrollX < 20) {
-      this.scrollX = 20;
-      this.h.style.left = `${this.scrollX}px`;
-    } else if (
-      this.scrollX >
-      this.parent.parentElement.clientWidth - this.hSize - 20
-    ) {
-      this.scrollX = this.parent.parentElement.clientWidth - this.hSize - 20;
-      this.h.style.left = `${this.scrollX}px`;
-    }
-
-    if (this.scrollY < 20) {
-      this.scrollY = 20;
-      this.v.style.top = `${this.scrollY}px`;
-    } else if (
-      this.scrollY >
-      this.parent.parentElement.clientHeight - this.vSize - 20
-    ) {
-      this.scrollY = this.parent.parentElement.clientHeight - this.vSize - 20;
-      this.v.style.top = `${this.scrollY}px`;
-    }
-
-    this.resize();
-  };
-
-  canMouseMove(y: number) {
-    const rect = this.parent.parent.getRect();
-    if (y < 0 && rect.y + this.parent.store.data.y >= 0) {
-      return true;
-    }
-    if (y > 0 && rect.ey - this.parent.height + this.parent.store.data.y <= 0) {
-      return true;
-    }
-    return false;
-  }
-
-  changeMode() {
-    this.pageMode = true;
-    this.h.style.display = `none`;
-    const rect = this.parent.parent.getRect();
-    if (rect.height < this.parent.height) {
-      this.v.style.display = `none`;
-    }
-  }
-
-  initPos() {
-    this.scrollX = (this.parent.parentElement.clientWidth - this.hSize) / 2;
-    this.scrollY = (this.parent.parentElement.clientHeight - this.vSize) / 2;
-    this.h.style.left = `${this.scrollX}px`;
-    this.v.style.top = `${this.scrollY}px`;
-  }
-
-  resize() {
-    this.rect = getRect(this.parent.store.data.pens);
-    if (this.rect.width < 1400) {
-      this.rect.width = 1400;
-    }
-    if (this.rect.height < 900) {
-      this.rect.height = 900;
-    }
-
-    if (this.parent.store.data.x > 0) {
-      this.rect.width +=
-        this.parent.store.data.x + (this.rect.x > 0 ? 0 : this.rect.x);
-    } else {
-      this.rect.width -=
-        this.parent.store.data.x + (this.rect.x > 0 ? 0 : this.rect.x);
-    }
-
-    if (this.parent.store.data.y > 0) {
-      this.rect.height +=
-        this.parent.store.data.y + (this.rect.y > 0 ? 0 : this.rect.y);
-    } else {
-      this.rect.height -=
-        this.parent.store.data.y + (this.rect.y > 0 ? 0 : this.rect.y);
-    }
-
-    if (this.rect.width < 1400) {
-      this.rect.width = 1400;
-    }
-    if (this.rect.height < 900) {
-      this.rect.height = 900;
-    }
-
-    this.hSize =
-      (1000 * this.parent.parentElement.clientWidth) / this.rect.width / 3;
-    this.vSize =
-      (1000 * this.parent.parentElement.clientHeight) / this.rect.height / 3;
-    this.h.style.width = this.hSize + 'px';
-    this.v.style.height = this.vSize + 'px';
-  }
-
-  show() {
-    this.isShow = true;
-    this.h.style.display = `block`;
-    this.v.style.display = `block`;
-    document.addEventListener('mousemove', this.onMouseMove);
-    document.addEventListener('mouseup', this.onMouseUp);
-  }
-
-  hide() {
-    this.isShow = false;
-    this.h.style.display = `none`;
-    this.v.style.display = `none`;
-    this.destroy();
-  }
-
-  translate(x: number, y: number) {
-    if (x) {
-      this.scrollX -=
-        (x * this.parent.parentElement.clientWidth) / this.rect.width;
-      this.h.style.left = `${this.scrollX}px`;
-    }
-
-    if (y) {
-      this.scrollY -=
-        (y * this.parent.parentElement.clientHeight) / this.rect.height;
-      this.v.style.top = `${this.scrollY}px`;
-    }
-  }
-
-  wheel(up?: boolean) {
-    let y = 10;
-    if (up) {
-      y = -10;
-    }
-
-    if (this.pageMode && this.canMouseMove(y)) {
-      return;
-    }
-
-    this.scrollY += y;
-    this.v.style.top = `${this.scrollY}px`;
-    this.parent.store.data.y -=
-      (y * this.rect.height) / this.parent.parentElement.clientHeight;
-
-    this.parent.onMovePens();
-    this.parent.canvasTemplate.init();
-    this.parent.canvasImage.init();
-    this.parent.canvasImageBottom.init();
-    this.parent.render();
-  }
-
-  destroy() {
-    document.removeEventListener('mousemove', this.onMouseMove);
-    document.removeEventListener('mouseup', this.onMouseUp);
-  }
-}

package/src/store/global.ts

@@ -1,38 +0,0 @@
-import pkg from '../../package.json';
-import { Pen } from '../pen';
-
-export const globalStore: {
-  version: string;
-  path2dDraws: {
-    [key: string]: (pen: Pen, ctx?: CanvasRenderingContext2D) => Path2D;
-  };
-  canvasDraws: {
-    [key: string]: (ctx: CanvasRenderingContext2D, pen: Pen) => void;
-  };
-  anchors: { [key: string]: (pen: Pen) => void }; // TODO: 存储的是 副作用 函数，函数内修改 anchors
-  htmlElements: { [key: string]: HTMLImageElement }; // 目前只存在图片资源，此处使用 HTMLImageElement
-} = {
-  version: pkg.version,
-  path2dDraws: {},
-  canvasDraws: {},
-  anchors: {},
-  htmlElements: {},
-};
-
-export function register(path2dFns: {
-  [key: string]: (pen: Pen, ctx?: CanvasRenderingContext2D) => Path2D;
-}) {
-  Object.assign(globalStore.path2dDraws, path2dFns);
-}
-
-export function registerCanvasDraw(drawFns: {
-  [key: string]: (ctx: CanvasRenderingContext2D, pen: Pen) => void;
-}) {
-  Object.assign(globalStore.canvasDraws, drawFns);
-}
-
-export function registerAnchors(anchorsFns: {
-  [key: string]: (pen: Pen) => void;
-}) {
-  Object.assign(globalStore.anchors, anchorsFns);
-}

package/src/store/store.ts

@@ -1,293 +0,0 @@
-import { default as mitt, Emitter } from 'mitt';
-
-import { CanvasLayer, FormItem, LockState, Pen } from '../pen';
-import { defaultOptions, Options } from '../options';
-import { defaultTheme, Theme } from '../theme';
-
-import { Point } from '../point';
-import { globalStore } from './global';
-import { Rect } from '../rect';
-import { Event, Trigger } from '../event';
-
-export interface Meta2dData {
-  pens: Pen[];
-  x: number;
-  y: number;
-  scale: number;
-  // 标尺起点
-  origin: Point;
-  center: Point;
-  locked?: LockState;
-  websocket?: string;
-  mqtt?: string;
-  mqttOptions?: {
-    clientId?: string;
-    username?: string;
-    password?: string;
-    customClientId?: boolean;
-  };
-  mqttTopics?: string;
-  websocketProtocols?: string | string[];
-  background?: string;
-  globalAlpha?: number;
-  socketCbJs?: string;
-  initJs?: string;
-  grid?: boolean;
-  gridColor?: string;
-  gridSize?: number;
-  gridRotate?: number;
-  rule?: boolean;
-  ruleColor?: string;
-  fromArrow?: string;
-  toArrow?: string;
-  lineWidth?: number;
-  color?: string; // 画笔默认 color 优先级高于 options.color
-  textColor?: string; // 画笔文字颜色
-  penBackground?: string; // 画笔默认背景色
-  paths?: { [key: string]: string }; // paths 该图纸使用到的 svgPath ，打开后需要保存到 globalStore.paths
-  bkImage?: string; // 背景图片
-  http?: string; // http 请求 Url
-  httpTimeInterval?: number; // http 请求间隔
-  httpHeaders?: HeadersInit; //请求头
-  version?: string; // 版本号
-  id?: string;
-  _id?: string;
-  https?: HttpOptions[];
-  width?: number;
-  height?: number;
-  networkInterval?: number;
-  networks?: Network[];
-  iconUrls?: string[];
-  mockData?: Function;
-  name?: string;
-  enableMock?: boolean;
-  minScale?: number;
-  maxScale?: number;
-  template?: string; //模版id
-  cancelFirstConnect?: boolean; //http定时轮询首次是否请求
-  component?: boolean;
-  theme?: string; //主题
-  smoothNum?:number;//平滑量 值越大，平滑效果越好
-  triggers?:Trigger[]; //全局状态
-  dataPoints?: string[]; //数据点
-  dataset?:{
-    devices?: DataMock[]; //数据模拟
-  };
-  dataEvents?:Event[]; //数据点事件
-  fits?: Fit[];
-  disableTranslate?: boolean; //禁止平移
-  disableScale?: boolean; //禁止缩放
-}
-
-export interface Fit {
-  id?:string;
-  name?:string;
-  x?:number;
-  y?:number;
-  ex?:number;
-  ey?:number;
-  width?:number;
-  height?:number;
-  children?:string[];
-  active?:boolean;
-  left?:boolean;
-  right?:boolean;
-  top?:boolean;
-  bottom?:boolean;
-  leftValue?:number;
-  rightValue?:number;
-  topValue?:number;
-  bottomValue?:number;
-}
-
-export interface DataMock {
-  id: string;
-  label?: string;
-  mock?: string;
-  type?: string;
-  enableMock?: boolean;
-}
-
-export interface Network {
-  name?: string;
-  protocol?: 'mqtt' | 'websocket' | 'http';
-  type?: string; //subscribe
-  url?: string;
-  //websocket
-  protocols?: string;
-  //mqtt
-  topics?: string;
-  options?: {
-    clientId?: string;
-    username?: string;
-    password?: string;
-    customClientId?: boolean;
-  };
-  //http
-  headers?: any; //请求头
-  method?: string;
-  body?: any;
-  data?: Network
-  interval?: number; // http 请求间隔
-  times?: number; // 临时 重连次数
-  index?: number; // 临时 索引
-}
-
-export interface HttpOptions {
-  http?: string; // http 请求 Url
-  httpTimeInterval?: number; // http 请求间隔
-  httpHeaders?: HeadersInit; //请求头
-  method?: string;
-  body?: BodyInit | null;
-  times?: number; // 临时 重连次数
-}
-
-export enum EditType {
-  Add,
-  Update,
-  Delete,
-  Replace
-}
-
-export interface EditAction {
-  type?: EditType;
-  initPens?: Pen[];
-  pens?: Pen[];
-  step?: number; // 多次历史记录记为一次， step >= 2
-  origin?: Point;
-  scale?: number;
-}
-
-export interface Meta2dStore {
-  id: string;
-  data: Meta2dData;
-  pens: { [key: string]: Pen };
-
-  histories?: EditAction[];
-  historyIndex?: number;
-  path2dMap: WeakMap<Pen, Path2D>;
-  animateMap: WeakMap<Pen, Pen>;
-  bindDatas: { [key: string]: { id: string; formItem: FormItem }[] };
-  bind?: { [key: string]: { id: string; key: string }[] };
-  active?: Pen[];
-  hover?: Pen;
-  lastHover?: Pen;
-  hoverContainer?:Pen;
-  lastHoverContainer?:Pen;
-  activeAnchor?: Point;
-  hoverAnchor?: Point;
-  pointAt?: Point;
-  pointAtIndex?: number;
-  animates: Set<Pen>;
-  options: Options;
-  theme: Theme;
-  emitter: Emitter;
-  dpiRatio?: number;
-  clipboard?: Meta2dClipboard;
-  patchFlagsBackground?: boolean; // 是否需要绘制底层图片   是否需要重绘背景，包含网格
-  patchFlagsTop?: boolean; // 是否需要重绘标尺
-  bkImg?: HTMLImageElement;
-  // 测试使用
-  fillWorldTextRect?: boolean; // 填充文本区域
-  cacheDatas?: {
-    data: Meta2dData;
-  }[];
-  patchFlagsLast?: boolean; // 清除上次图片画布层
-  messageEvents?: { [key: string]: { pen: Pen; event: Event }[] };
-  templatePens?: { [key: string]: Pen };
-  sameTemplate?: boolean; //标记是否是同一模版
-  lastScale?: number; //记录上次模版的scale
-  pensNetwork?: {
-    [key: string]: { url?: string; method?: string; headers?: any; body?: any };
-  };
-  globalTriggers?:{[key:string]:Trigger[]};
-}
-
-export interface Meta2dClipboard {
-  meta2d?: boolean;
-  pens: Pen[];
-  origin: Point;
-  scale: number;
-  offset?: number;
-  page: string;
-  initRect?: Rect;
-  pos?: Point;
-}
-
-export const createStore = () => {
-  return {
-    data: {
-      x: 0,
-      y: 0,
-      scale: 1,
-      pens: [],
-      origin: { x: 0, y: 0 },
-      center: { x: 0, y: 0 },
-      paths: {},
-      theme:'light'
-    },
-    histories: [],
-    pens: {},
-    path2dMap: new WeakMap(),
-    animateMap: new WeakMap(),
-    active: [],
-    animates: new Set(),
-    options: { ...defaultOptions },
-    theme:{ ...defaultTheme },
-    emitter: mitt(),
-    bindDatas: {},
-    bind: {},
-    pensNetwork: {},
-    cacheDatas: [],
-    messageEvents: {},
-    templatePens: {},
-    globalTriggers:{},
-  } as Meta2dStore;
-};
-
-// Return a data store, if not exists will create a store.
-export const useStore = (id = 'default'): Meta2dStore => {
-  if (!globalStore[id]) {
-    globalStore[id] = createStore();
-    globalStore[id].id = id;
-  }
-
-  return globalStore[id];
-};
-
-export const clearStore = (store: Meta2dStore, template?: string) => {
-  const isSame = store.data.template === template;
-  if (isSame) {
-    //模版一样
-    for (const pen of store.data.pens) {
-      // if (pen.template) {
-      if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
-        store.templatePens[pen.id] = pen;
-      }
-    }
-  }
-  store.lastScale = store.data.scale;
-  store.data = {
-    x: 0,
-    y: 0,
-    scale: 1,
-    pens: [],
-    origin: { x: 0, y: 0 },
-    center: { x: 0, y: 0 },
-    paths: {},
-    template: isSame ? template : null,
-  };
-  store.sameTemplate = isSame;
-  store.pens = {};
-  store.histories = [];
-  store.historyIndex = null;
-  store.path2dMap = new WeakMap();
-  store.animateMap = new WeakMap();
-  store.bindDatas = {};
-  store.bind = {};
-  store.pensNetwork = {};
-  store.active = [];
-  store.hover = undefined;
-  store.lastHover = undefined;
-  store.animates.clear();
-};

package/src/theme.ts

@@ -1,35 +0,0 @@
-export interface Theme {
-  [key: string]: {
-    color?: string;
-    background?: string;
-    parentBackground?: string;
-    ruleColor?:string;
-    ruleOptions?:{
-      background?:string,
-      textColor?:string
-    }
-  };
-}
-
-export const defaultTheme: Theme = {
-  dark:{
-    color:'#bdc7db',
-    background:'#1e2430',
-    parentBackground:'#080b0f',
-    ruleColor:'#222E47',
-    ruleOptions:{
-      background:'#121924',
-      textColor:'#6E7B91'
-    },
-  },
-  light:{
-    color:'#222222',
-    background:'#FFFFFF',
-    parentBackground:'#F0F1F2',
-    ruleColor:'#C8D0E1',
-    ruleOptions:{
-      background:'#F7F8FA',
-      textColor:'#C8D0E1'
-    },
-  }
-}