feat: update @idraw/kernal context-2d

packages/kernal/__tests__/lib/context-2d.test.ts

@@ -1,4 +1,4 @@
-import Context2d from './../../src/lib/context-2d';
+import Context2d from './../../src/lib/context-2d/index';
 
 describe('@idraw/kernal: lib/context-2d', () => {
   test('Context2d.globalAlpha', async () => {  

packages/kernal/src/lib/context-2d.ts

@@ -1,70 +1,70 @@
-import { TypeContext, TypeBoardSizeOptions } from '@idraw/types';
+// import { TypeContext, TypeBoardSizeOptions } from '@idraw/types';
 
-interface CanvasRenderingContext2D extends 
-  CanvasCompositing, 
-  CanvasDrawImage, 
-  CanvasDrawPath,
-  CanvasFillStrokeStyles, 
-  CanvasFilters, 
-  CanvasImageData, 
-  CanvasImageSmoothing, 
-  CanvasPath, 
-  CanvasPathDrawingStyles, 
-  CanvasRect, 
-  CanvasShadowStyles, 
-  CanvasState, 
-  CanvasText, 
-  CanvasTextDrawingStyles, 
-  CanvasTransform, 
-  CanvasUserInterface {};
+// interface CanvasRenderingContext2D extends 
+//   CanvasCompositing, 
+//   CanvasDrawImage, 
+//   CanvasDrawPath,
+//   CanvasFillStrokeStyles, 
+//   CanvasFilters, 
+//   CanvasImageData, 
+//   CanvasImageSmoothing, 
+//   CanvasPath, 
+//   CanvasPathDrawingStyles, 
+//   CanvasRect,
+//   CanvasShadowStyles, 
+//   CanvasState, 
+//   CanvasText, 
+//   CanvasTextDrawingStyles, 
+//   CanvasTransform, 
+//   CanvasUserInterface {};
 
 
-type ContextRecord = {
-  name: string,
-  type: 'attr' | 'method',
-  args: any[]
-}
+// type Context2dRecord = {
+//   name: string,
+//   type: 'attr' | 'method',
+//   args: any[]
+// }
 
-type ContextAttr = {
-  globalAlpha?: number;
-}
+// type Context2dAttr = {
+//   globalAlpha?: number;
+// }
 
-class Context2d {
+// class Context2d {
 
-  private _records: ContextRecord[];
-  private _attrs: ContextAttr = {};
+//   private _records: Context2dRecord[];
+//   private _attrs: Context2dAttr = {};
 
-  constructor() {
-    this._records = [];
-  }
+//   constructor() {
+//     this._records = [];
+//   }
 
-  get globalAlpha (): number | undefined {
-    return this._attrs['globalAlpha'];
-  }
+//   get globalAlpha (): number | undefined {
+//     return this._attrs['globalAlpha'];
+//   }
 
-  set globalAlpha(value: number | undefined) {
-    this._attrs['globalAlpha'] = value;
-    this._records.push({
-      name: 'globalAlpha',
-      type: 'attr',
-      args: [value]
-    })
-  }
+//   set globalAlpha(value: number | undefined) {
+//     this._attrs['globalAlpha'] = value;
+//     this._records.push({
+//       name: 'globalAlpha',
+//       type: 'attr',
+//       args: [value]
+//     })
+//   }
 
-  $getAllRecords(): ContextRecord[] {
-    return this._records;
-  }
+//   $getAllRecords(): Context2dRecord[] {
+//     return this._records;
+//   }
 
-  $getAllAttrs() {
-    return this._attrs;
-  }
+//   $getAllAttrs() {
+//     return this._attrs;
+//   }
 
 
-  // globalAlpha: number;
-  // globalCompositeOperation: string;
-}
+//   // globalAlpha: number;
+//   // globalCompositeOperation: string;
+// }
 
-export default Context2d;
+// export default Context2d;
 
 
 

packages/kernal/src/lib/context-2d/base.ts

@@ -0,0 +1,70 @@
+// const _records = Symbol('_records');
+// const _attrs = Symbol('_attrs');
+
+const _records = '_records';
+const _attrs = '_attrs';
+
+export type Context2dRecord = {
+  name: string,
+  type: 'attr' | 'method',
+  args: any[]
+}
+
+export type Context2dAttr = {
+  globalAlpha?: number;
+}
+
+
+class Storage {
+  
+  [_records]: Context2dRecord[] = [];
+  [_attrs]: Context2dAttr = {};
+
+  setAttr(name: keyof Context2dAttr, value: any) {
+    this[_attrs][name] = value;
+  }
+
+  getAttr(name: keyof Context2dAttr): any {
+    return this[_attrs][name];
+  }
+
+  pushRecord(record: Context2dRecord) {
+    this[_records].push(record);
+  }
+
+  getAllRecords(): Context2dRecord[] {
+    return this[_records];
+  }
+
+  getAllAttrs() {
+    return this[_attrs];
+  }
+}
+
+export class Context2dBase {
+
+  __storage__: Storage = new Storage()
+
+  $setAttr(name: keyof Context2dAttr, value: any) {
+    this.__storage__.setAttr(name, value)
+  }
+
+  $getAttr(name: keyof Context2dAttr): any {
+    return this.__storage__.getAttr(name);
+  }
+
+  $pushRecord(record: Context2dRecord) {
+    this.__storage__.pushRecord(record);
+  }
+
+  $getAllRecords(): Context2dRecord[] {
+    return this.__storage__.getAllRecords();
+  }
+
+  $getAllAttrs() {
+    return this.__storage__.getAllAttrs();
+  }
+}
+
+
+

packages/kernal/src/lib/context-2d/compositing.ts

@@ -0,0 +1,24 @@
+import { Context2dBase } from './base';
+
+
+type Constructor<T = Context2dBase> = new (...args: any[]) => T;
+
+export function mixinsCompositing<TBase extends Constructor>(Base: TBase) {
+
+  return class extends Base {
+    
+    get globalAlpha (): number | undefined {
+      return this.$getAttr('globalAlpha');
+    }
+  
+    set globalAlpha(value: number | undefined) {
+      this.$setAttr('globalAlpha', value);
+      this.$pushRecord({
+        name: 'globalAlpha',
+        type: 'attr',
+        args: [value]
+      })
+    }
+  }
+  
+}

packages/kernal/src/lib/context-2d/index.ts

@@ -0,0 +1,11 @@
+import { Context2dBase } from './base';
+import { mixinsCompositing } from './compositing';
+
+class Context extends Context2dBase {};
+
+const Context2d = mixinsCompositing(Context);
+
+
+export default Context2d;
+
+