@idraw/types - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0-alpha.1

package.json

 {
   "name": "@idraw/types",
-  "version": "0.3.1",
+  "version": "0.4.0-alpha.1",
   "description": "",
@@ -25,3 +25,3 @@ "main": "src/index.ts",
   },
-  "gitHead": "7c831450d14f34e2eb0d937bccdd4896b2c4b4b8"
-}
+  "gitHead": "5cc462b9206ea0e4e70b5183771dfbf694402483"
+}

src/index.ts

@@ -0,12 +1,17 @@
+export * from './lib/util';
+export * from './lib/point';
 export * from './lib/data';
-export * from './lib/context';
+export * from './lib/element';
+export * from './lib/view';
 export * from './lib/board';
-export * from './lib/paint';
-export * from './lib/element';
-export * from './lib/helper';
-export * from './lib/config';
+export * from './lib/renderer';
+export * from './lib/loader';
+export * from './lib/store';
+export * from './lib/watcher';
 export * from './lib/core';
-export * from './lib/screen';
-export * from './lib/device';
-export * from './lib/plugin';
-export * from './lib/common';
+export * from './lib/idraw';
+export * from './lib/middleware';
+export * from './lib/context2d';
+export * from './lib/controller';
+export * from './lib/html';
+export * from './lib/svg-path';

src/lib/board.ts

@@ -1,48 +0,142 @@
-type Point = {
-  x: number;
-  y: number;
-};
+import type { Point, PointSize } from './point';
+import type { ViewContent, ViewCalculator, ViewScaleInfo, ViewSizeInfo } from './view';
+import type { UtilEventEmitter } from './util';
+import type { ActiveStore, StoreSharer } from './store';
+import type { RendererEventMap, RendererOptions, RendererDrawOptions } from './renderer';
+import type { Data } from './data';
 
-type BoardScrollConfig = {
-  color: string;
-  width: number;
-  showBackground?: boolean;
-};
+export interface BoardWatcherPointEvent {
+  point: Point;
+}
 
-type BoardSizeOptions = {
-  width?: number;
-  height?: number;
-  contextWidth?: number;
-  contextHeight?: number;
-  devicePixelRatio?: number;
-};
+export interface BoardWatherWheelXEvent {
+  deltaX: number;
+  point: Point;
+}
+export interface BoardWatherWheelYEvent {
+  deltaY: number;
+  point: Point;
+}
+export type BoardWatherWheelScaleEvent = BoardWatherWheelXEvent & BoardWatherWheelYEvent;
 
-type BoardOptions = BoardSizeOptions & {
-  width: number;
-  height: number;
-  contextWidth: number;
-  contextHeight: number;
-  canScroll?: boolean;
-  scrollConfig?: BoardScrollConfig;
-};
+export interface BoardWatherDrawFrameEvent<S extends Record<any | symbol, any>> {
+  snapshot: BoardViewerFrameSnapshot<S>;
+}
 
-type PointCursor =
-  | 'auto'
-  | 'move'
-  | 'n-resize'
-  | 'e-resize'
-  | 's-resize'
-  | 'w-resize'
-  | 'ne-resize'
-  | 'nw-resize'
-  | 'se-resize'
-  | 'sw-resize'
-  | 'grab';
+export type BoardWatherScaleEvent = { scale: number };
 
-export {
-  Point,
-  PointCursor,
-  BoardSizeOptions,
-  BoardOptions,
-  BoardScrollConfig
-};
+export type BoardWatherScrollXEvent = ViewScaleInfo;
+
+export type BoardWatherScrollYEvent = ViewScaleInfo;
+
+export type BoardWatherResizeEvent = ViewSizeInfo;
+
+export interface BoardWatcherEventMap<S extends Record<any | symbol, any> = any> {
+  hover: BoardWatcherPointEvent;
+  pointStart: BoardWatcherPointEvent;
+  pointMove: BoardWatcherPointEvent;
+  pointEnd: BoardWatcherPointEvent;
+  pointLeave: BoardWatcherPointEvent;
+  doubleClick: BoardWatcherPointEvent;
+  wheelX: BoardWatherWheelXEvent;
+  wheelY: BoardWatherWheelYEvent;
+  wheelScale: BoardWatherWheelScaleEvent;
+  // scale: BoardWatherScaleEvent;
+  scrollX: BoardWatherScrollXEvent;
+  scrollY: BoardWatherScrollYEvent;
+  resize: BoardWatherResizeEvent;
+  beforeDrawFrame: BoardWatherDrawFrameEvent<S>;
+  afterDrawFrame: BoardWatherDrawFrameEvent<S>;
+  clear: void;
+}
+
+export type BoardMode = 'SELECT' | 'SCROLL' | 'RULE' | 'CONNECT' | 'PENCIL' | 'PEN' | string;
+
+export interface BoardMiddlewareObject<S extends Record<any | symbol, any> = any> {
+  mode: BoardMode;
+  isDefault?: boolean;
+  created?: () => void;
+  // action
+  hover?: (e: BoardWatcherEventMap<S>['hover']) => void | boolean;
+  pointStart?: (e: BoardWatcherEventMap<S>['pointStart']) => void | boolean;
+  pointMove?: (e: BoardWatcherEventMap<S>['pointMove']) => void | boolean;
+  pointEnd?: (e: BoardWatcherEventMap<S>['pointEnd']) => void | boolean;
+  pointLeave?: (e: BoardWatcherEventMap<S>['pointLeave']) => void | boolean;
+  doubleClick?: (e: BoardWatcherEventMap<S>['doubleClick']) => void | boolean;
+  wheelX?: (e: BoardWatcherEventMap<S>['wheelX']) => void | boolean;
+  wheelY?: (e: BoardWatcherEventMap<S>['wheelY']) => void | boolean;
+  wheelScale?: (e: BoardWatcherEventMap<S>['wheelScale']) => void | boolean;
+
+  // scale?: (e: BoardWatcherEventMap<S>['scale']) => void | boolean;
+  scrollX?: (e: BoardWatcherEventMap<S>['scrollX']) => void | boolean;
+  scrollY?: (e: BoardWatcherEventMap<S>['scrollY']) => void | boolean;
+  resize?: (e: BoardWatcherEventMap<S>['resize']) => void | boolean;
+
+  // draw
+  beforeDrawFrame?(e: BoardWatcherEventMap<S>['beforeDrawFrame']): void | boolean;
+  afterDrawFrame?(e: BoardWatcherEventMap<S>['afterDrawFrame']): void | boolean;
+
+  clear?(e: BoardWatcherEventMap<S>['clear']): void | boolean;
+}
+
+export interface BoardMiddlewareOptions<S extends Record<any | symbol, any> = Record<any | symbol, any>, E extends BoardExtendEvent = Record<string, any>> {
+  viewContent: ViewContent;
+  sharer: StoreSharer<S>;
+  viewer: BoardViewer;
+  calculator: ViewCalculator;
+  eventHub: UtilEventEmitter<E>;
+}
+
+export type BoardMiddleware<S extends Record<any | symbol, any> = any, E extends BoardExtendEvent = Record<string, any>> = (
+  opts: BoardMiddlewareOptions<S, E>
+) => BoardMiddlewareObject<S>;
+
+export interface BoardOptions {
+  viewContent: ViewContent;
+}
+
+export interface BoardViewerFrameSnapshot<S extends Record<any | symbol, any> = any> {
+  activeStore: ActiveStore;
+  sharedStore: S;
+}
+
+export interface BoardViewerEventMap {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  drawFrame: {};
+}
+
+export interface BoardViewerOptions {
+  sharer: StoreSharer<Record<any | symbol, any>>;
+  renderer: BoardRenderer;
+  calculator: ViewCalculator;
+  viewContent: ViewContent;
+  beforeDrawFrame: (e: { snapshot: BoardViewerFrameSnapshot<Record<any | symbol, any>> }) => void;
+  afterDrawFrame: (e: { snapshot: BoardViewerFrameSnapshot<Record<any | symbol, any>> }) => void;
+}
+
+export interface BoardViewer extends UtilEventEmitter<BoardViewerEventMap> {
+  drawFrame(): void;
+  scale(opts: { scale: number; point: PointSize }): { moveX: number; moveY: number };
+  scroll(opts: { moveX?: number; moveY?: number }): ViewScaleInfo;
+  // scrollX(num: number): ViewScaleInfo;
+  // scrollY(num: number): ViewScaleInfo;
+  resize(viewSize: Partial<ViewSizeInfo>): ViewSizeInfo;
+}
+
+export interface BoardRenderer extends UtilEventEmitter<RendererEventMap> {
+  updateOptions(opts: RendererOptions): void;
+  drawData(data: Data, opts: RendererDrawOptions): void;
+  scale(num: number): void;
+}
+
+export interface BoardWatcherOptions {
+  viewContent: ViewContent;
+  sharer: StoreSharer<Record<any | symbol, any>>;
+}
+
+export interface BoardWatcherStore {
+  hasPointDown: boolean;
+  prevClickPoint: Point | null;
+}
+
+export type BoardExtendEvent = Record<string, any> & {};

src/lib/core.ts

@@ -1,10 +0,37 @@
-type CoreOptions = {
+import type { Element, ElementType } from './element';
+import type { Data } from './data';
+
+export interface CoreOptions {
   width: number;
   height: number;
-  devicePixelRatio: number;
-  contextWidth: number;
-  contextHeight: number;
-  onlyRender?: boolean;
+  devicePixelRatio?: number;
+}
+
+export type CursorType =
+  | 'resize-left'
+  | 'resize-right'
+  | 'resize-top'
+  | 'resize-bottom'
+  | 'resize-top-left'
+  | 'resize-top-right'
+  | 'resize-bottom-left'
+  | 'resize-bottom-right';
+
+export interface CoreEventCursor {
+  type: CursorType | string | null;
+  groupQueue: Element<'group'>[];
+  element: Element<ElementType>;
+}
+
+export interface CoreEventSelect {
+  uuids: string[];
+}
+export interface CoreEventChange {
+  data: Data;
+}
+
+export type CoreEvent = {
+  cursor: CoreEventCursor;
+  select: CoreEventSelect;
+  change: CoreEventChange;
 };
-
-export { CoreOptions };

src/lib/data.ts

@@ -1,13 +0,29 @@
-import { DataElemDesc, DataElement, DataElementBase } from './element';
+import type { Element, ElementType, ElementAssets } from './element';
 
-type IDrawDataBase = {
-  elements: DataElementBase<keyof DataElemDesc>[];
-  bgColor?: string;
-};
+export interface Data<E extends Record<string, any> = Record<string, any>> {
+  elements: Element<ElementType, E>[];
+  assets?: ElementAssets;
+}
 
-type IDrawData = {
-  elements: DataElement<keyof DataElemDesc>[];
-  bgColor?: string;
-};
-
-export { IDrawData, IDrawDataBase };
+export type ColorMatrix = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];

src/lib/element.ts

@@ -1,4 +0,5 @@
-// import { PaintData } from './paint';
+import { PointSize } from './point';
+import type { SVGPathCommand } from './svg-path';
 
-type DataElementAttrs = {
+export interface ElementSize {
   x: number;
@@ -9,26 +10,69 @@ y: number;
   angle?: number;
-  operation?: {
-    lock?: boolean;
-    invisible?: boolean;
-    disableScale?: boolean;
-    disableRotate?: boolean;
-    limitRatio?: boolean;
-  };
-  extension?: { [key: string]: any } | any;
+}
+
+export type ElementClipPath = Pick<ElementPathDetail, 'commands' | 'originX' | 'originY' | 'originW' | 'originH'>;
+
+export interface TransformMatrix {
+  method: 'matrix';
+  args: [number, number, number, number, number];
+}
+
+export interface ElementAssetsItem {
+  type: 'svg' | 'image';
+  value: string;
+}
+
+export interface ElementAssets {
+  [assetId: string]: ElementAssetsItem;
+}
+
+export interface TransformTranslate {
+  method: 'translate';
+  args: [number, number];
+}
+
+export interface TransformRotate {
+  method: 'rotate';
+  args: [number];
+}
+
+export interface TransformScale {
+  method: 'scale';
+  args: [number, number];
+}
+
+export type TransformAction = TransformMatrix | TransformTranslate | TransformRotate | TransformScale;
+
+export interface LinearGradientColor {
+  type: 'linearGradient';
+  start: PointSize;
+  end: PointSize;
+  stops: Array<{
+    offset: number;
+    color: string;
+  }>;
+  transform?: TransformAction[];
+}
+
+type GadialCircle = PointSize & {
+  radius: number;
 };
 
-type DataElementBase<T extends keyof DataElemDesc | DataElemType> =
-  DataElementAttrs & {
-    name?: string;
-    uuid?: string;
-    type: T | DataElemType;
-    desc: DataElemDesc[T];
-  };
+export interface RadialGradientColor {
+  type: 'radialGradient';
+  inner: GadialCircle;
+  outer: GadialCircle;
+  stops: Array<{
+    offset: number;
+    color: string;
+  }>;
+  transform?: TransformAction[];
+}
 
-type DataElement<T extends keyof DataElemDesc | DataElemType> =
-  DataElementBase<T> & {
-    uuid: string;
-  };
-
-type DataElemDescBase = {
+export interface ElementBaseDetail {
+  // boxSizing?: 'content-box' | 'border-box'; // default content-box
+  borderWidth?: number | [number, number, number, number]; // [top, right, bottom, left]
+  borderColor?: string;
+  borderRadius?: number | [number, number, number, number]; // [top-left, top-right, bottom-left, bottom-right]
+  borderDash?: number[];
   shadowColor?: string;
@@ -38,36 +82,16 @@ shadowOffsetX?: number;
   shadowBlur?: number;
-};
+  color?: string;
+  background?: string | LinearGradientColor | RadialGradientColor;
+  opacity?: number;
+  clipPath?: ElementClipPath;
+}
 
-type DataElemBoxDesc = {
-  borderRadius?: number;
-  borderWidth?: number;
-  borderColor?: string;
-} & DataElemDescBase;
-
-type DataElemDesc = {
-  text: DataElemDescText;
-  rect: DataElemDescRect;
-  circle: DataElemDescCircle;
-  image: DataElemDescImage;
-  svg: DataElemDescSVG;
-  html: DataElemDescHTML;
-  // paint: DataElemDescPaint,
-};
-
-// enum DataElemType {
-//   text = 'text',
-//   rect = 'rect',
-//   circle = 'circle',
-//   image = 'image',
-//   svg = 'svg',
-//   html = 'html',
+// interface ElementRectDetail extends ElementBaseDetail {
+//   // color?: string;
+//   // background?: string;
 // }
 
-type DataElemType = 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html';
+interface ElementRectDetail extends ElementBaseDetail {}
 
-type DataElemDescRect = {
-  bgColor?: string;
-} & DataElemBoxDesc;
-
-type DataElemDescText = {
+interface ElemenTextDetail extends ElementBaseDetail {
   text: string;
@@ -77,9 +101,6 @@ color: string;
   lineHeight?: number;
-  fontWeight?: 'bold' | '';
+  fontWeight?: 'bold' | string | number;
   fontFamily?: string;
   textAlign?: 'center' | 'left' | 'right';
   verticalAlign?: 'middle' | 'top' | 'bottom';
-  bgColor?: string;
-  strokeColor?: string;
-  strokeWidth?: number;
   textShadowColor?: string;
@@ -89,36 +110,74 @@ textShadowOffsetX?: number;
   textShadowBlur?: number;
-} & DataElemBoxDesc;
+}
 
-type DataElemDescCircle = {
-  bgColor: string;
-} & DataElemBoxDesc;
+interface ElementCircleDetail extends ElementBaseDetail {
+  radius: number;
+  background?: string;
+}
 
-type DataElemDescImage = {
+interface ElementHTMLDetail extends ElementBaseDetail {
+  html: string;
+  width?: number;
+  height?: number;
+}
+
+interface ElementImageDetail extends ElementBaseDetail {
   src: string;
-} & DataElemDescBase;
+}
 
-type DataElemDescSVG = {
+interface ElementSVGDetail extends ElementBaseDetail {
   svg: string;
-};
+}
 
-type DataElemDescHTML = {
-  html: string;
-  width: number;
-  height: number;
-};
+interface ElementGroupDetail extends ElementBaseDetail {
+  children: Element<ElementType>[];
+  overflow?: 'hidden';
+  assets?: ElementAssets;
+}
 
-// type DataElemDescPaint = PaintData
+interface ElementPathDetail extends ElementBaseDetail {
+  // path: string;
+  commands: SVGPathCommand[];
+  originX: number;
+  originY: number;
+  originW: number;
+  originH: number;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  strokeLineCap?: 'butt' | 'round' | 'square';
+}
 
-export {
-  DataElementAttrs,
-  DataElemDescText,
-  DataElemDescRect,
-  DataElemDescCircle,
-  DataElemDescImage,
-  DataElemDescSVG,
-  DataElemDescHTML,
-  DataElemDesc,
-  DataElemType,
-  DataElement,
-  DataElementBase
-};
+interface ElementDetailMap {
+  rect: ElementRectDetail;
+  circle: ElementCircleDetail;
+  text: ElemenTextDetail;
+  image: ElementImageDetail;
+  html: ElementHTMLDetail;
+  svg: ElementSVGDetail;
+  group: ElementGroupDetail;
+  path: ElementPathDetail;
+}
+
+// export type ElementType = 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html' | 'group';
+export type ElementType = keyof ElementDetailMap;
+
+export interface ElementOperations {
+  lock?: boolean;
+  invisible?: boolean;
+  disableScale?: boolean;
+  disableRotate?: boolean;
+  limitRatio?: boolean;
+  lastModified?: number;
+}
+
+export interface Element<T extends ElementType = ElementType, E extends Record<string, any> = Record<string, any>> extends ElementSize {
+  uuid: string;
+  name?: string;
+  type: T;
+  detail: ElementDetailMap[T];
+  operations?: ElementOperations;
+  extends?: E;
+}
+
+export type Elements = Element<ElementType>[];

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21291

increased by53.01%

Number of package files

19

increased by18.75%

Lines of code

576

increased by25.49%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes