canvas-editor-engine 1.1.22 → 1.1.24

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import DownloadService from "./services/download.service";
 import ToolLayerService from "./services/tool-layers.service";
 import EventService from "./services/event.service";
 import ThroughHistoryService from "./services/through-history.service";
+import ProjectsService from "./services/projects.service";
 import AppStore from "./store/store";
 declare class CanvasEditorEngine {
     constructor(webComponentTagName?: string);
@@ -30,4 +31,4 @@ declare class VueCanvasEditorEngine extends CanvasEditorEngine {
     getContext2D(): CanvasRenderingContext2D;
     getCanvas(): HTMLCanvasElement;
 }
-export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, EventService, ThroughHistoryService, StaticCanvasEditorEngine, VueCanvasEditorEngine, AppStore, };
+export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, EventService, ThroughHistoryService, ProjectsService, StaticCanvasEditorEngine, VueCanvasEditorEngine, AppStore, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppStore = exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.ThroughHistoryService = exports.EventService = exports.ToolLayerService = exports.DownloadService = exports.CropService = exports.LoggerService = exports.DrawService = exports.ToolService = exports.LoadingComponent = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
+exports.AppStore = exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.ProjectsService = exports.ThroughHistoryService = exports.EventService = exports.ToolLayerService = exports.DownloadService = exports.CropService = exports.LoggerService = exports.DrawService = exports.ToolService = exports.LoadingComponent = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
 const config_1 = require("./config");
 exports.AppConfig = config_1.default;
 const web_component_1 = require("./web-component");
@@ -30,6 +30,8 @@ const event_service_1 = require("./services/event.service");
 exports.EventService = event_service_1.default;
 const through_history_service_1 = require("./services/through-history.service");
 exports.ThroughHistoryService = through_history_service_1.default;
+const projects_service_1 = require("./services/projects.service");
+exports.ProjectsService = projects_service_1.default;
 const store_1 = require("./store/store");
 exports.AppStore = store_1.default;
 class CanvasEditorEngine {

package/dist/services/draw.service.d.ts

@@ -1,16 +1,17 @@
-import type { IDrawImageArgs, IFilterOptions, IImageLoggingDataVague, IImageOptions } from "../types/image";
+import type { IDrawImageArgs, IDrawImageProcessor, IFilterOptions, IImageLoggingDataVague, IImageOptions } from "../types/image";
+import { IProject } from "../types/project";
 export default class DrawService {
-    static scImage: SCImage;
+    static imageProcessor: IDrawImageProcessor;
     static drawImage(ctx: CanvasRenderingContext2D, src: string, options: IDrawImageArgs): void;
+    static drawProject(ctx: CanvasRenderingContext2D, project: IProject): void;
     static drawSmoothImage(useStore: boolean, options: IDrawImageArgs, filterOptions: IFilterOptions): void;
     private static updateImageStateAfterVague;
     private static getFilterArgs;
 }
-export declare class SCImage {
+export declare class SCImage implements IDrawImageProcessor {
     private img;
     private ctx;
     constructor(src: string, ctx: CanvasRenderingContext2D);
-    get(): HTMLImageElement;
-    draw(options: IDrawImageArgs): Promise<unknown>;
+    draw(options?: IDrawImageArgs): Promise<unknown>;
     vague(options: IImageOptions, filterOptions: IFilterOptions): Promise<IImageLoggingDataVague>;
 }

package/dist/services/draw.service.js

@@ -7,10 +7,10 @@ const store_1 = require("../store/store");
 const filter_1 = require("../utils/filter");
 const event_service_1 = require("./event.service");
 class DrawService {
-    static scImage;
+    static imageProcessor;
     static drawImage(ctx, src, options) {
-        DrawService.scImage = new SCImage(src, ctx);
-        DrawService.scImage.draw(options).then(() => {
+        DrawService.imageProcessor = new SCImage(src, ctx);
+        DrawService.imageProcessor.draw(options).then(() => {
             const filter = new filter_1.Filter(ctx);
             const zeroPosition = {
                 x: 0,
@@ -24,10 +24,26 @@ class DrawService {
             }, "Loaded image");
         });
     }
+    static drawProject(ctx, project) {
+        // const { imageData, position, size } = project.state.current;
+        const imageData = project.state.current.imageData;
+        const position = project.state.current.position;
+        const size = project.state.current.size;
+        DrawService.imageProcessor = new PCImage(project, ctx);
+        DrawService.imageProcessor.draw();
+        store_1.default.store.imageState.reduce({
+            tempImageData: imageData,
+            position: position,
+            size: size,
+        }, "Loaded project");
+    }
     static drawSmoothImage(useStore, options, filterOptions) {
         const filterArgs = DrawService.getFilterArgs(useStore, options);
         event_service_1.default.dispatch('loading-start');
-        this.scImage.vague(filterArgs, filterOptions)
+        if (!DrawService.imageProcessor) {
+            throw new Error('No valid ImageProcessor instance found');
+        }
+        DrawService.imageProcessor.vague(filterArgs, filterOptions)
             .then(DrawService.updateImageStateAfterVague)
             .finally(() => event_service_1.default.dispatch('loading-end'));
     }
@@ -76,9 +92,6 @@ class SCImage {
         this.ctx = ctx;
     }
     ;
-    get() {
-        return this.img;
-    }
     draw(options) {
         const proto = this;
         const protoImg = this.img;
@@ -111,3 +124,29 @@ class SCImage {
     }
 }
 exports.SCImage = SCImage;
+class PCImage {
+    project;
+    ctx;
+    constructor(project, ctx) {
+        this.project = project;
+        this.ctx = ctx;
+    }
+    draw(options) {
+        const { imageData, position } = this.project.state.current;
+        return new Promise((resolve, reject) => {
+            try {
+                const filter = new filter_1.Filter(this.ctx);
+                filter.update(imageData, position);
+                this.ctx.save();
+                resolve(this);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    vague(options, filterOptions) {
+        const filter = new filters_1.VagueFilter(this.ctx, options);
+        return filter.on('pixel', filterOptions);
+    }
+}

package/dist/services/projects.service.d.ts

@@ -0,0 +1,11 @@
+import { IProjectModule, TProjectModuleName } from "../types/project";
+import { ProjectFileSerializer } from "../utils/project-file-serializer";
+export default class ProjectsService {
+    private static _modules;
+    private static _serializer;
+    static on(moduleName: TProjectModuleName): {
+        getSerializerInstance: (file: any) => ProjectFileSerializer;
+        instance: IProjectModule;
+    };
+    private static _addModule;
+}

package/dist/services/projects.service.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const project_file_serializer_1 = require("../utils/project-file-serializer");
+class LocalStorageProjectModule {
+    projectsKey = 'cee-projects';
+    getProjectsFromLocalStorage() {
+        const projects = localStorage.getItem(this.projectsKey);
+        return projects ? JSON.parse(projects) : [];
+    }
+    getProjectFromLocalStorage(projectId) {
+        const projects = this.getProjectsFromLocalStorage();
+        return projects.find((project) => project.id === projectId);
+    }
+    saveProjectsToLocalStorage(projects) {
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    }
+    saveProjectToLocalStorage(project) {
+        const projects = this.getProjectsFromLocalStorage();
+        projects.push(project);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    }
+    removeProjectFromLocalStorage(projectId) {
+        const projects = this.getProjectsFromLocalStorage();
+        const index = projects.findIndex((project) => project.id === projectId);
+        projects.splice(index, 1);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    }
+    updateProjectInLocalStorage(project) {
+        const projects = this.getProjectsFromLocalStorage();
+        const index = projects.findIndex((p) => p.id === project.id);
+        projects[index] = project;
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    }
+    getProjects() {
+        return this.getProjectsFromLocalStorage();
+    }
+    getProject(projectId) {
+        return this.getProjectFromLocalStorage(projectId);
+    }
+    saveProjects(projects) {
+        this.saveProjectsToLocalStorage(projects);
+    }
+    saveProject(project) {
+        this.saveProjectToLocalStorage(project);
+    }
+    removeProject(projectId) {
+        this.removeProjectFromLocalStorage(projectId);
+    }
+    updateProject(project) {
+        this.updateProjectInLocalStorage(project);
+    }
+}
+class ProjectFileProjectModule {
+    static _serializer;
+    static setSerializer(serializer) {
+        ProjectFileProjectModule._serializer = serializer;
+    }
+    getProjects() {
+        return ProjectFileProjectModule._serializer.getProjects();
+    }
+    getProject(projectId) {
+        return ProjectFileProjectModule._serializer.getProject(projectId);
+    }
+    saveProject(project) {
+        return ProjectFileProjectModule._serializer.saveProject(project);
+    }
+    saveProjects(projects) {
+        return ProjectFileProjectModule._serializer.saveProjects(projects);
+    }
+    removeProject(projectId) {
+        return ProjectFileProjectModule._serializer.removeProject(projectId);
+    }
+    updateProject(project) {
+        return ProjectFileProjectModule._serializer.updateProject(project);
+    }
+}
+class ProjectsService {
+    static _modules = [];
+    static _serializer = project_file_serializer_1.ProjectFileSerializer;
+    static on(moduleName) {
+        const module = ProjectsService._modules.find((module) => module.name === moduleName);
+        if (!module) {
+            throw new Error(`Module ${moduleName} not found`);
+        }
+        return {
+            getSerializerInstance: (file) => new ProjectsService._serializer(file),
+            instance: module.instance,
+        };
+    }
+    static {
+        ProjectsService._addModule('LocalStorage', new LocalStorageProjectModule());
+        ProjectsService._addModule('File', new ProjectFileProjectModule());
+    }
+    static _addModule(name, module) {
+        ProjectsService._modules.push({ name, instance: module });
+    }
+}
+exports.default = ProjectsService;

package/dist/store/history.state.js

@@ -64,6 +64,7 @@ class Reducer {
             isUpdate = true;
         }
         if (isUpdate && !!this.state._emergeCompleteIt) {
+            console.log(this.state._historyLines);
             this.state._emergeCompleteIt(this.state._historyLines);
         }
     }

package/dist/types/image.d.ts

@@ -42,3 +42,7 @@ export interface IImageLoggingData {
 }
 export interface IImageLoggingDataVague extends IImageLoggingData, IFilterOptions {
 }
+export interface IDrawImageProcessor {
+    draw(options?: IDrawImageArgs): Promise<any>;
+    vague(options: IImageOptions, filterOptions: IFilterOptions): Promise<IImageLoggingDataVague>;
+}

package/dist/types/project.d.ts

@@ -0,0 +1,27 @@
+import { IHistoryLine } from "./history";
+import { IImageLoggingData } from "./image";
+export interface IProject {
+    id: string;
+    name: string;
+    description: string;
+    state: {
+        current: IImageLoggingData;
+        history: IHistoryLine[];
+        cache: IHistoryLine[];
+    };
+    createdAt: string;
+    updatedAt: string;
+}
+export interface IProjectModule {
+    getProjects(): IProject[];
+    getProject(projectId: string): IProject;
+    saveProjects(projects: IProject[]): void;
+    saveProject(project: IProject): void;
+    removeProject(projectId: string): void;
+    updateProject(project: IProject): void;
+}
+export type TProjectModule = {
+    name: string;
+    instance: IProjectModule;
+};
+export type TProjectModuleName = 'LocalStorage' | 'File';

package/dist/types/project.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/project-file-serializer.d.ts

@@ -0,0 +1,13 @@
+import { IProject } from "../types/project";
+export declare class ProjectFileSerializer {
+    private file;
+    private projects;
+    constructor(file: any);
+    private load;
+    saveProjects(projects: IProject[]): void;
+    getProjects(): IProject[];
+    getProject(projectId: string): IProject;
+    saveProject(project: IProject): void;
+    removeProject(projectId: string): void;
+    updateProject(project: IProject): void;
+}

package/dist/utils/project-file-serializer.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectFileSerializer = void 0;
+class ProjectFileSerializer {
+    file;
+    projects;
+    constructor(file) {
+        this.file = file;
+        this.projects = this.load();
+    }
+    ;
+    load() {
+        return JSON.parse(this.file);
+    }
+    saveProjects(projects) {
+        this.file.save(JSON.stringify(projects));
+    }
+    getProjects() {
+        return this.projects;
+    }
+    getProject(projectId) {
+        return this.projects.find((project) => project.id === projectId);
+    }
+    saveProject(project) {
+        const index = this.projects.findIndex((p) => p.id === project.id);
+        if (index !== -1) {
+            this.projects[index] = project;
+        }
+        else {
+            this.projects.push(project);
+        }
+        this.saveProjects(this.projects);
+    }
+    removeProject(projectId) {
+        const index = this.projects.findIndex((p) => p.id === projectId);
+        if (index !== -1) {
+            this.projects.splice(index, 1);
+            this.saveProjects(this.projects);
+        }
+    }
+    updateProject(project) {
+        const index = this.projects.findIndex((p) => p.id === project.id);
+        if (index !== -1) {
+            this.projects[index] = project;
+            this.saveProjects(this.projects);
+        }
+    }
+}
+exports.ProjectFileSerializer = ProjectFileSerializer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",