paint_box_react_native 0.1.0

package/src/PaintEditor.ts

@@ -0,0 +1,152 @@
+import { IPaintEditor } from './IPaintEditor';
+import { PaintBoxContext } from './PaintBoxContext';
+import { Commands, type PaintBoxRef } from './PaintBoxViewNativeComponent';
+import { Color, MimeType, PaintMode } from './model';
+import { ColorDTO } from './dto/ColorDTO';
+import NativePaintBoxReactNative from './NativePaintBoxReactNative';
+import { findNodeHandle } from 'react-native';
+import React from 'react';
+
+export class PaintEditor implements IPaintEditor {
+  id: string | undefined;
+
+  _ref(): React.RefObject<PaintBoxRef> | null | undefined {
+    return PaintBoxContext.getInstance().getRef(this) as
+      | React.RefObject<PaintBoxRef>
+      | null
+      | undefined;
+  }
+
+  undo() {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.undo(refObj.current);
+    }
+  }
+
+  redo() {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.redo(refObj.current);
+    }
+  }
+
+  reset() {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.reset(refObj.current);
+    }
+  }
+
+  import(path: string, width?: number, height?: number) {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.importImage(refObj?.current, path, width ?? -1, height ?? -1);
+    }
+  }
+
+  export(path: string, fileName: string, mimeType: MimeType): void {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      const viewTag = findNodeHandle(refObj.current);
+
+      // @ts-ignore
+      NativePaintBoxReactNative.export(viewTag, path, fileName, mimeType);
+    } else {
+      throw new Error(
+        'Reference not found! Please ensure that the paint box has been created.'
+      );
+    }
+  }
+
+  isEnable(): Promise<boolean> {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      const viewTag = findNodeHandle(refObj.current);
+      // @ts-ignore
+      return NativePaintBoxReactNative.isEnable(viewTag);
+    } else {
+      throw new Error(
+        'Reference not found! Please ensure that the paint box has been created.'
+      );
+    }
+  }
+
+  setEnable(value: boolean) {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.setEnable(refObj?.current, value);
+    }
+  }
+
+  setPaintMode(paintMode: PaintMode) {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.setPaintMode(refObj?.current, paintMode);
+    }
+  }
+
+  async getPaintMode(): Promise<PaintMode> {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      const viewTag = findNodeHandle(refObj.current);
+      // @ts-ignore
+      const response = await NativePaintBoxReactNative.getPaintMode(viewTag);
+      const paintMode = Object.values(PaintMode).find((it) => it === response);
+      if (paintMode) {
+        return Promise.resolve(paintMode);
+      } else {
+        return Promise.reject(undefined);
+      }
+    } else {
+      throw new Error(
+        'Reference not found! Please ensure that the paint box has been created.'
+      );
+    }
+  }
+
+  setStrokeColor(strokeColor: Color) {
+    const refObj = this._ref();
+    console.log("heree:", JSON.stringify(ColorDTO.fromDataModel(strokeColor).toJSON()));
+    if (refObj?.current) {
+      Commands.setStrokeColor(
+        refObj?.current,
+        JSON.stringify(ColorDTO.fromDataModel(strokeColor).toJSON())
+      );
+    }
+  }
+
+  async getStrokeColor(): Promise<Color> {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      const viewTag = findNodeHandle(refObj.current);
+      // @ts-ignore
+      const response = await NativePaintBoxReactNative.getStrokeColor(viewTag);
+      return Promise.resolve(ColorDTO.fromJSON(response).toDataModel());
+    } else {
+      throw new Error(
+        'Reference not found! Please ensure that the paint box has been created.'
+      );
+    }
+  }
+
+  setStrokeSize(size: number) {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      Commands.setStrokeSize(refObj?.current, size);
+    }
+  }
+
+  getStrokeSize(): Promise<number> {
+    const refObj = this._ref();
+    if (refObj?.current) {
+      const viewTag = findNodeHandle(refObj.current);
+      // @ts-ignore
+      return NativePaintBoxReactNative.getStrokeSize(viewTag);
+    } else {
+      throw new Error(
+        'Reference not found! Please ensure that the paint box has been created.'
+      );
+    }
+  }
+}

package/src/dto/BaseDTO.ts

@@ -0,0 +1,7 @@
+export abstract class BaseDTO {
+  abstract toJSON(): void;
+
+  toJSONString() {
+    return JSON.stringify(this.toJSON());
+  }
+}

package/src/dto/ColorDTO.ts

@@ -0,0 +1,44 @@
+import { BaseDTO } from './BaseDTO';
+import { Color } from '../model';
+
+export class ColorDTO extends BaseDTO {
+  red: number;
+  green: number;
+  blue: number;
+  alpha?: number = 255.0;
+
+  constructor(red: number, green: number, blue: number, alpha?: number) {
+    super();
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+
+  static fromDataModel(color: Color) {
+    return new ColorDTO(color.red, color.green, color.blue, color.alpha);
+  }
+
+  static fromJSON(json: string) {
+    const parsedJson = JSON.parse(json);
+    return new ColorDTO(
+      parsedJson.red,
+      parsedJson.green,
+      parsedJson.blue,
+      parsedJson.alpha
+    );
+  }
+
+  toDataModel(): Color {
+    return new Color(this.red, this.green, this.blue, this.alpha);
+  }
+
+  toJSON() {
+    return {
+      red: this.red,
+      green: this.green,
+      blue: this.blue,
+      alpha: this.alpha,
+    };
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { PaintEditor } from './PaintEditor';
+export { PaintBoxRNView } from './PaintBoxRNView';
+//export { Commands } from './PaintBoxViewNativeComponent';
+export { default as PaintBoxView } from './PaintBoxViewNativeComponent';
+export { type PaintBoxRef } from './PaintBoxViewNativeComponent';

package/src/index.tsx

@@ -0,0 +1,3 @@
+// export { PaintBoxRNView } from './PaintBoxRNView';
+// export { default as PaintBoxView } from './PaintBoxViewNativeComponent';
+// //

package/src/model/Color.ts

@@ -0,0 +1,13 @@
+export class Color {
+  red: number;
+  green: number;
+  blue: number;
+  alpha?: number = 255.0;
+
+  constructor(red: number, green: number, blue: number, alpha?: number) {
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha ?? 255.0;
+  }
+}

package/src/model/MimeType.ts

@@ -0,0 +1,8 @@
+export enum MimeType {
+  jpeg = 'jpeg',
+  png = 'png',
+  gif = 'gif',
+  tif = 'tif',
+  bmp = 'bmp',
+  pdf = 'pdf',
+}

package/src/model/PaintMode.ts

@@ -0,0 +1,7 @@
+export enum PaintMode {
+  PEN = 'PEN',
+  MARKER = 'MARKER',
+  BUCKET = 'BUCKET',
+  BRUSH = 'BRUSH',
+  ERASER = 'ERASER',
+}

package/src/model/index.ts

@@ -0,0 +1,3 @@
+export { Color } from './Color';
+export { PaintMode } from './PaintMode';
+export { MimeType } from './MimeType';