@meta2d/core 1.0.55 → 1.0.56

package/src/scroll/scroll.ts

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

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

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

@@ -0,0 +1,35 @@
+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'
+    },
+  }
+}