@ydesign/react-editor 0.0.2 → 0.0.4

package/dist/model/store.d.ts

@@ -1,6 +1,10 @@
+import * as fabric from 'fabric';
+import * as mobx_state_tree_dist_internal from 'mobx-state-tree/dist/internal';
 import * as mobx_state_tree from 'mobx-state-tree';
 import { Instance } from 'mobx-state-tree';
-import { Editor } from '@ydesign/core';
+import { Editor, FabricObject } from '@ydesign/core';
+import { FONT } from '../utils/fonts.js';
+import 'mobx';
 
 interface ExportOptions {
     multiplier: number;
@@ -13,24 +17,7 @@ interface ExportOptions {
     height?: number;
     filter?: (object: any) => boolean;
 }
-interface BaseElement {
-    id: string;
-    type: string;
-    locked?: boolean;
-    [key: string]: any;
-}
-type ElementType = (BaseElement & {
-    type: 'textbox';
-    text: string;
-}) | (BaseElement & {
-    type: 'image';
-    src: string;
-}) | (BaseElement & {
-    type: 'group';
-    objects: ElementsArray;
-}) | BaseElement;
-type ElementsArray = ElementType[];
-declare const forEveryChild: (e: any, callback: (e: ElementType) => boolean | void) => void;
+declare const forEveryChild: (node: any, cb: any) => void;
 declare const Font: mobx_state_tree.IModelType<{
     fontFamily: mobx_state_tree.ISimpleType<string>;
     name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -64,6 +51,7 @@ declare const Store: mobx_state_tree.IModelType<{
     rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
     openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
     selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
     fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
         fontFamily: mobx_state_tree.ISimpleType<string>;
         name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -79,28 +67,40 @@ declare const Store: mobx_state_tree.IModelType<{
     }>, mobx_state_tree._NotCustomized>>;
     editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
     custom: mobx_state_tree.IType<any, any, any>;
-    objects: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
     _key: mobx_state_tree.IType<string | undefined, string, string>;
     _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
     _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
     _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
 }, {
-    readonly selectedElements: ElementType[];
+    readonly selectedElements: FabricObject[];
 } & {
-    readonly selectedShapes: ElementType[];
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(): void;
 } & {
     _setEditor(editor: Editor): void;
     _triggerUpdate(): void;
     _historyUpdate(): void;
     _fontSizeUpdate(): void;
 } & {
+    set(e: FabricObject, options: any): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi: any;
+    }): void;
     setObjects(objects: any): void;
     selectElements(ids: string[]): void;
     openSidePanel(t: string): void;
     deleteElements(ids: string[]): void;
     setScale(scale: number): void;
     clone(): void;
-    addElement(): void;
+    addElement(options: any): void;
+    setSize({ width, height, useMagic }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
     setupEditorListeners(): void;
 } & {
     _forEachElementUp(ids: Array<string>, callback: Function): void;
@@ -126,8 +126,8 @@ declare const Store: mobx_state_tree.IModelType<{
     loadJSON: (data: any) => Promise<void>;
     clear(): void;
 } & {
-    addFont(): void;
-    removeFont(): void;
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
     /**
      * 加载字体（注入 CSS 并等待字体可用）
      * @param fontFamily - 字体名称
@@ -151,6 +151,7 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
     openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
     selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
     fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
         fontFamily: mobx_state_tree.ISimpleType<string>;
         name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -166,28 +167,40 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     }>, mobx_state_tree._NotCustomized>>;
     editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
     custom: mobx_state_tree.IType<any, any, any>;
-    objects: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
     _key: mobx_state_tree.IType<string | undefined, string, string>;
     _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
     _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
     _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
 }> & {
-    readonly selectedElements: ElementType[];
+    readonly selectedElements: FabricObject[];
 } & {
-    readonly selectedShapes: ElementType[];
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(): void;
 } & {
     _setEditor(editor: Editor): void;
     _triggerUpdate(): void;
     _historyUpdate(): void;
     _fontSizeUpdate(): void;
 } & {
+    set(e: FabricObject, options: any): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi: any;
+    }): void;
     setObjects(objects: any): void;
     selectElements(ids: string[]): void;
     openSidePanel(t: string): void;
     deleteElements(ids: string[]): void;
     setScale(scale: number): void;
     clone(): void;
-    addElement(): void;
+    addElement(options: any): void;
+    setSize({ width, height, useMagic }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
     setupEditorListeners(): void;
 } & {
     _forEachElementUp(ids: Array<string>, callback: Function): void;
@@ -213,8 +226,8 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     loadJSON: (data: any) => Promise<void>;
     clear(): void;
 } & {
-    addFont(): void;
-    removeFont(): void;
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
     /**
      * 加载字体（注入 CSS 并等待字体可用）
      * @param fontFamily - 字体名称
@@ -233,6 +246,7 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
     openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
     selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
+    backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
     fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
         fontFamily: mobx_state_tree.ISimpleType<string>;
         name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -248,28 +262,40 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     }>, mobx_state_tree._NotCustomized>>;
     editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
     custom: mobx_state_tree.IType<any, any, any>;
-    objects: mobx_state_tree.IType<any, any, any>;
+    objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
     _key: mobx_state_tree.IType<string | undefined, string, string>;
     _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
     _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
     _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
 }, {
-    readonly selectedElements: ElementType[];
+    readonly selectedElements: FabricObject[];
 } & {
-    readonly selectedShapes: ElementType[];
+    readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
+    find(callback: (e: any) => boolean): any;
+    getElementById(): void;
 } & {
     _setEditor(editor: Editor): void;
     _triggerUpdate(): void;
     _historyUpdate(): void;
     _fontSizeUpdate(): void;
 } & {
+    set(e: FabricObject, options: any): void;
+    setUnit({ unit, dpi }: {
+        unit: any;
+        dpi: any;
+    }): void;
     setObjects(objects: any): void;
     selectElements(ids: string[]): void;
     openSidePanel(t: string): void;
     deleteElements(ids: string[]): void;
     setScale(scale: number): void;
     clone(): void;
-    addElement(): void;
+    addElement(options: any): void;
+    setSize({ width, height, useMagic }: {
+        width: number;
+        height: number;
+        useMagic?: boolean;
+    }): void;
     setupEditorListeners(): void;
 } & {
     _forEachElementUp(ids: Array<string>, callback: Function): void;
@@ -295,8 +321,8 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     loadJSON: (data: any) => Promise<void>;
     clear(): void;
 } & {
-    addFont(): void;
-    removeFont(): void;
+    removeFont(fontFamily: string): void;
+    addFont(font: FONT): void;
     /**
      * 加载字体（注入 CSS 并等待字体可用）
      * @param fontFamily - 字体名称
@@ -304,4 +330,4 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
     loadFont(fontFamily: string): Promise<void[]>;
 }, mobx_state_tree._NotCustomized, mobx_state_tree._NotCustomized>>;
 
-export { type BaseElement, type ElementType, type ElementsArray, type ExportOptions, Font, Store, type StoreProps, type StoreType, createStore, createStore as default, forEveryChild };
+export { type ExportOptions, Font, Store, type StoreProps, type StoreType, createStore, createStore as default, forEveryChild };

package/dist/model/store.js

@@ -1 +1 @@
-import{a as g}from"../chunk-P5I43V7X.js";import{a as l,h as c,i as p,m}from"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";import{types as i,cast as u,flow as f}from"mobx-state-tree";var y=(e,t)=>{if(e?.objects)for(let n of e.objects){if(t(n)===!0)break;y(n,t)}},E=i.model("Font",{fontFamily:i.string,name:i.optional(i.string,""),url:i.optional(i.string,""),img:i.optional(i.string,""),styles:i.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name})),b=i.model("Store",{name:"yitu-design",width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleed:0,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:i.array(i.string),fonts:i.array(E),editor:i.frozen(null),custom:i.frozen(),objects:i.frozen(),_key:"",_updateTrigger:0,_updateHistory:0,_updateFontSize:0}).views(e=>({get selectedElements(){let t=e._updateTrigger;return console.log("_trigger\u90FD\u53D8\u5316\u662F\u89E6\u53D1\u805A\u7126\u5143\u7D20\u7684\u5237\u65B0 ---> ",t),e.selectedElementsIds.map(n=>e.editor?.objectsHandler.findOneById(n))}})).views(e=>({get selectedShapes(){let t=[];return y({objects:e.selectedElements},n=>{n?.type!=="group"&&t.push(n)}),t}})).actions(e=>({_setEditor(t){e.editor=t},_triggerUpdate(){e._updateTrigger=e._updateTrigger+1},_historyUpdate(){e._updateHistory=e._updateHistory+1},_fontSizeUpdate(){e._updateFontSize=e._updateFontSize+1}})).actions(e=>({setObjects(t){e.objects=t},selectElements(t){e.selectedElementsIds=u(t)},openSidePanel(t){e.openedSidePanel!==t&&(e.openedSidePanel=t)},deleteElements(t){t.forEach(n=>{e.editor?.objectsHandler.remove(n)})},setScale(t){e.scale=t},clone(){e.editor?.objectsHandler.clone()},addElement(){},setupEditorListeners(){e.editor&&(e.editor.on("object:modified",()=>{console.log("\u805A\u7126\u5BF9\u8C61\u5C5E\u6027\u53D8\u5316: ---> "),e._triggerUpdate()}),e.editor.on("history:change",()=>{console.log("\u5386\u53F2\u8BB0\u5F55\u53D8\u5316: ---> "),e._historyUpdate()}),e.editor.on("textbox:modified",()=>{e._fontSizeUpdate()}))}})).actions(e=>({_forEachElementUp(t,n){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(r=>({id:r,index:a.findIndex(d=>d.id===r)}));o.sort((r,d)=>d.index-r.index);for(let{index:r}of o){if(r==-1)continue;let d=r<a.length-1&&a[r+1],s=t.indexOf(d?.id)>=0;r===a.length-1||s||n(r)}},_forEachElementDown(t,n){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(r=>({id:r,index:a.findIndex(d=>d.id===r)}));o.sort((r,d)=>d.index-r.index);for(let{index:r}of o){if(r==-1)continue;let d=r>0&&a[r-1],s=t.indexOf(d?.id)>=0;r===0||s||n(r)}return!1}})).actions(e=>({canMoveElementsUp(t){let n=!1;return e._forEachElementUp(t,()=>{n=!0}),n},moveElementsUp(t){if(!e.editor)return;let n=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:n.findIndex(r=>r.id===o)})).filter(o=>o.index!==-1).sort((o,r)=>r.index-o.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.bringForward(o)}),e._triggerUpdate()},canMoveElementsTop(t){return this.canMoveElementsUp(t)},moveElementsTop(t){e.editor&&(t.forEach(n=>{e.editor?.layerHandler.bringToFront(n)}),e._triggerUpdate())},canMoveElementsDown(t){let n=!1;return e._forEachElementDown(t,()=>{n=!0}),n},moveElementsDown(t){if(!e.editor)return;let n=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:n.findIndex(r=>r.id===o)})).filter(o=>o.index!==-1).sort((o,r)=>o.index-r.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.sendBackwards(o)}),e._triggerUpdate()},canMoveElementsBottom(t){return this.canMoveElementsDown(t)},moveElementsBottom(t){e.editor&&(t.forEach(n=>{e.editor?.layerHandler.sendToBack(n)}),e._triggerUpdate())},setElementZIndex(){}})).actions(e=>({async toDataURL(t){return e.editor?.rendererHandler.toDataURL(t)},async toBlob(t){return e.editor?.rendererHandler.toBlob(t)},async saveAsImage(t){if(!e.editor)return;let{fileName:n,...a}=t||{multiplier:1},o=await e.editor.rendererHandler.toBlob(a);o&&g(o,n||"yitu."+a.format)},toJSON(){return e.editor?.rendererHandler.toJSON()},toObject(){return e.editor?.rendererHandler.toObject()},loadJSON:f(function*(t){if(!e.editor)return;let n=yield e.editor.sceneHandler.importFromJSON(t);n&&(e.width=n.width,e.height=n.height)}),clear(){}})).actions(e=>({addFont(){},removeFont(){},async loadFont(t){let n=e.fonts.find(r=>r.fontFamily===t)||l.find(r=>r.fontFamily===t),o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return n?(n.styles&&(o=n.styles.map(r=>({fontStyle:r.fontStyle||"normal",fontWeight:r.fontWeight||"normal"}))),p(n)):m(t),Promise.all(o.map(r=>c(t,r.fontStyle,r.fontWeight)))}}));function x({key:e}){return b.create({_key:e})}var j=x;export{E as Font,b as Store,x as createStore,j as default,y as forEveryChild};
+import{a as u}from"../chunk-P5I43V7X.js";import{a as l,h as p,i as m,m as g}from"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";import{types as i,cast as y,flow as b,destroy as f}from"mobx-state-tree";var c=(e,t)=>{if(e?.objects)for(let r of e.objects){if(t(r)===!0)break;c(r,t)}},E=i.model("Font",{fontFamily:i.string,name:i.optional(i.string,""),url:i.optional(i.string,""),img:i.optional(i.string,""),styles:i.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name})),h=i.model("Store",{name:"yitu-design",width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleed:0,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:i.array(i.string),backgroundColor:i.optional(i.union(i.string,i.frozen()),"#fff"),fonts:i.array(E),editor:i.frozen(null),custom:i.frozen(),objects:i.frozen([]),_key:"",_updateTrigger:0,_updateHistory:0,_updateFontSize:0}).views(e=>({get selectedElements(){let t=e._updateTrigger;return console.log("_trigger\u90FD\u53D8\u5316\u662F\u89E6\u53D1\u805A\u7126\u5143\u7D20\u7684\u5237\u65B0 ---> ",t,e.selectedElementsIds.toJSON()),e.selectedElementsIds.map(r=>e.editor?.objectsHandler.findOneById(r))}})).views(e=>({get selectedShapes(){let t=[];return c({objects:e.selectedElements},r=>{r?.type!=="group"&&t.push(r)}),t},find(t){let r,a=e.editor?.customCanvas.canvas.getObjects();if(a)return c({objects:a},o=>{if(!r&&t(o))return r=o,!0}),r},getElementById(){}})).actions(e=>({_setEditor(t){e.editor=t},_triggerUpdate(){e._updateTrigger=e._updateTrigger+1},_historyUpdate(){e._updateHistory=e._updateHistory+1},_fontSizeUpdate(){e._updateFontSize=e._updateFontSize+1}})).actions(e=>({set(t,r){e.editor?.objectsHandler.update(r,t.id)},setUnit({unit:t,dpi:r}){e.unit=t||e.unit,e.dpi=r||e.dpi},setObjects(t){e.objects=t},selectElements(t){e.selectedElementsIds=y(t)},openSidePanel(t){e.openedSidePanel!==t&&(e.openedSidePanel=t)},deleteElements(t){t.forEach(r=>{e.editor?.objectsHandler.remove(r)})},setScale(t){e.scale=t},clone(){e.editor?.objectsHandler.clone()},addElement(t){console.log("\u6DFB\u52A0json\u6570\u636E",t),e.editor?.objectsHandler.addJson(t)},setSize({width:t,height:r,useMagic:a}){console.log("\u8BBE\u7F6E\u753B\u5E03\u5C3A\u5BF8: ---> ",t,r,a),e.width=t,e.height=r,e.editor?.workareaHandler.setSize({width:t,height:r})},setupEditorListeners(){e.editor&&(e.editor.on("object:modified",()=>{e._triggerUpdate()}),e.editor.on("history:change",()=>{e._historyUpdate()}),e.editor.on("textbox:modified",()=>{e._fontSizeUpdate()}))}})).actions(e=>({_forEachElementUp(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n<a.length-1&&a[n+1],s=t.indexOf(d?.id)>=0;n===a.length-1||s||r(n)}},_forEachElementDown(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n>0&&a[n-1],s=t.indexOf(d?.id)>=0;n===0||s||r(n)}return!1}})).actions(e=>({canMoveElementsUp(t){let r=!1;return e._forEachElementUp(t,()=>{r=!0}),r},moveElementsUp(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>n.index-o.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.bringForward(o)}),e._triggerUpdate()},canMoveElementsTop(t){return this.canMoveElementsUp(t)},moveElementsTop(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.bringToFront(r)}),e._triggerUpdate())},canMoveElementsDown(t){let r=!1;return e._forEachElementDown(t,()=>{r=!0}),r},moveElementsDown(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>o.index-n.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.sendBackwards(o)}),e._triggerUpdate()},canMoveElementsBottom(t){return this.canMoveElementsDown(t)},moveElementsBottom(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.sendToBack(r)}),e._triggerUpdate())},setElementZIndex(){}})).actions(e=>({async toDataURL(t){return e.editor?.rendererHandler.toDataURL(t)},async toBlob(t){return e.editor?.rendererHandler.toBlob(t)},async saveAsImage(t){if(!e.editor)return;let{fileName:r,...a}=t||{multiplier:1},o=await e.editor.rendererHandler.toBlob(a);o&&u(o,r||"yitu."+a.format)},toJSON(){return e.editor?.rendererHandler.toJSON()},toObject(){return e.editor?.rendererHandler.toObject()},loadJSON:b(function*(t){if(!e.editor)return;let r=yield e.editor.sceneHandler.importFromJSON(t);r&&(e.width=r.width,e.height=r.height,e.backgroundColor=r.fill)}),clear(){}})).actions(e=>({removeFont(t){e.fonts.filter(r=>r.fontFamily===t).forEach(r=>{f(r)})},addFont(t){this.removeFont(t.fontFamily),e.fonts.push(t),this.loadFont(t.fontFamily)},async loadFont(t){let r=e.fonts.find(n=>n.fontFamily===t)||l.find(n=>n.fontFamily===t),o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return r?(r.styles&&(o=r.styles.map(n=>({fontStyle:n.fontStyle||"normal",fontWeight:n.fontWeight||"normal"}))),m(r)):g(t),Promise.all(o.map(n=>p(t,n.fontStyle,n.fontWeight)))}}));function x({key:e}){return h.create({_key:e})}var v=x;export{E as Font,h as Store,x as createStore,v as default,c as forEveryChild};

package/dist/project.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
 import { StoreType } from './model/store.js';
 import { FONT } from './utils/fonts.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
 import 'mobx';
@@ -10,6 +12,12 @@ interface ProjectOptions {
 }
 declare class Project {
     store: StoreType;
+    status: string;
+    name: string;
+    id: string;
+    user: {};
+    skipSaving: boolean;
+    cloudEnabled: boolean;
     constructor({ store }: ProjectOptions);
     firstLoad(data?: any): Promise<void>;
     getGlobalFont(fonts?: FONT[]): Promise<FONT[]>;
@@ -17,5 +25,6 @@ declare class Project {
 declare const ProjectContext: react.Context<Project | null>;
 declare const useProject: () => Project;
 declare const createProject: (options: ProjectOptions) => Project;
+type ProjectType = InstanceType<typeof Project>;
 
-export { ProjectContext, createProject, createProject as default, useProject };
+export { ProjectContext, type ProjectType, createProject, createProject as default, useProject };

package/dist/project.js

@@ -1 +1 @@
-import{d as s}from"./chunk-WJT6VPDR.js";import{a as r}from"./chunk-O2XFH626.js";import*as c from"mobx";import{createContext as n,useContext as i}from"react";var o=class{constructor({store:t}){r(this,"store");c.makeAutoObservable(this),this.store=t}async firstLoad(t){this.store.loadJSON(t)}async getGlobalFont(t){return t?.length?(s(t),t):[]}},a=n(null),j=()=>{let e=i(a);if(!e)throw new Error("useProject must be used within a ProjectProvider");return e},p=e=>new o(e),P=p;export{a as ProjectContext,p as createProject,P as default,j as useProject};
+import{a,b,c,d}from"./chunk-KLZXBPXI.js";import"./chunk-WJT6VPDR.js";import"./chunk-O2XFH626.js";export{a as ProjectContext,c as createProject,d as default,b as useProject};

package/dist/side-panel/background-panel.d.ts

@@ -1,10 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const BackgroundPanel: ({ store }: {
+declare const setBackgroundColorsPreset: (newColors: string[]) => void;
+declare const BackgroundPanel: (({ store }: {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 
-export { BackgroundPanel };
+export { BackgroundPanel, setBackgroundColorsPreset };

package/dist/side-panel/background-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-TX4BNXQC.js";import"../chunk-O2XFH626.js";export{a as BackgroundPanel};
+import{a,b}from"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{b as BackgroundPanel,a as setBackgroundColorsPreset};

package/dist/side-panel/images-grid.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FabricObject } from '@ydesign/core';
+
+type Props<ImageType> = {
+    images: ImageType[] | undefined;
+    onSelect: (image: ImageType, pos?: {
+        x: number;
+        y: number;
+    }, element?: FabricObject | undefined, event?: any) => void;
+    isLoading: boolean;
+    getPreview: (image: ImageType) => string;
+    loadMore?: false | undefined | null | (() => void);
+    getCredit?: (image: ImageType) => any;
+    getImageClassName?: (image: ImageType) => string;
+    rowsNumber?: number;
+    crossOrigin?: string;
+    shadowEnabled?: boolean;
+    itemHeight?: number;
+    spacing?: number;
+    error?: any;
+    hideNoResults?: boolean;
+};
+declare const ImagesGrid: <ImageType>({ images, rowsNumber, isLoading, getPreview, getCredit, getImageClassName, onSelect, crossOrigin, shadowEnabled, itemHeight, error, hideNoResults, spacing, }: Props<ImageType>) => react_jsx_runtime.JSX.Element;
+
+export { ImagesGrid };

package/dist/side-panel/images-grid.js

@@ -0,0 +1 @@
+import{a}from"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as ImagesGrid};

package/dist/side-panel/index.d.ts

@@ -1,6 +1,10 @@
 export { BackgroundSection, DEFAULT_SECTIONS, LayersSection, PhotosSection, Section, ShapesSection, default as SidePanel, SizeSection, TemplatesSection, TextSection, UploadSection } from './side-panel.js';
 export { SectionTab } from './tab-button.js';
 import '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 import 'react/jsx-runtime';

package/dist/side-panel/index.js

@@ -1 +1 @@
-import{a as r,b as e,c as f,d as m,e as p,f as t,g as x,h as a,i as b,j as c}from"../chunk-XDLFQXMN.js";import"../chunk-JWQ2DUXA.js";import"../chunk-WIM26GEM.js";import{a as o}from"../chunk-LW2W4B2N.js";import"../chunk-QJBRJELT.js";import"../chunk-6LFGFFHI.js";import"../chunk-DBQHEZPG.js";import"../chunk-TX4BNXQC.js";import"../chunk-M33EDDXB.js";import"../chunk-DJBTBRPS.js";import"../chunk-55FJG4FK.js";import"../chunk-O2XFH626.js";export{t as BackgroundSection,b as DEFAULT_SECTIONS,x as LayersSection,f as PhotosSection,o as SectionTab,m as ShapesSection,c as SidePanel,a as SizeSection,r as TemplatesSection,e as TextSection,p as UploadSection};
+import{a as r,b as e,c as f,d as m,e as p,f as t,g as x,h as a,i as b,j as c}from"../chunk-XK24AOVW.js";import"../chunk-XM3RPIUS.js";import"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import{a as o}from"../chunk-VXTF2OL2.js";import"../chunk-OV74NBJ5.js";import"../chunk-CMH73CYQ.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-DJBTBRPS.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{t as BackgroundSection,b as DEFAULT_SECTIONS,x as LayersSection,f as PhotosSection,o as SectionTab,m as ShapesSection,c as SidePanel,a as SizeSection,r as TemplatesSection,e as TextSection,p as UploadSection};

package/dist/side-panel/layers-panel.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const LayersPanel: ({ store }: {
+declare const LayersPanel: (({ store }: {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 
 export { LayersPanel };

package/dist/side-panel/layers-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-M33EDDXB.js";import"../chunk-O2XFH626.js";export{a as LayersPanel};
+import{a}from"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-O2XFH626.js";export{a as LayersPanel};

package/dist/side-panel/photos-panel.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const PhotosPanel: ({ store }: {
     store: StoreType;

package/dist/side-panel/shapes-panel.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const ShapesPanel: ({ store }: {
     store: StoreType;

package/dist/side-panel/shapes-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-55FJG4FK.js";import"../chunk-O2XFH626.js";export{a as ShapesPanel};
+import{a}from"../chunk-XM3RPIUS.js";import"../chunk-MXZ6RXT3.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{a as ShapesPanel};

package/dist/side-panel/side-panel.d.ts

@@ -1,7 +1,11 @@
 import { StoreType } from '../model/store.js';
 export { SectionTab } from './tab-button.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 import 'react/jsx-runtime';
 
 interface SectionTabProps {

package/dist/side-panel/side-panel.js

@@ -1 +1 @@
-import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k,k as l}from"../chunk-XDLFQXMN.js";import"../chunk-JWQ2DUXA.js";import"../chunk-WIM26GEM.js";import{a}from"../chunk-LW2W4B2N.js";import"../chunk-QJBRJELT.js";import"../chunk-6LFGFFHI.js";import"../chunk-DBQHEZPG.js";import"../chunk-TX4BNXQC.js";import"../chunk-M33EDDXB.js";import"../chunk-DJBTBRPS.js";import"../chunk-55FJG4FK.js";import"../chunk-O2XFH626.js";export{g as BackgroundSection,j as DEFAULT_SECTIONS,h as LayersSection,d as PhotosSection,a as SectionTab,e as ShapesSection,k as SidePanel,i as SizeSection,b as TemplatesSection,c as TextSection,f as UploadSection,l as default};
+import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k,k as l}from"../chunk-XK24AOVW.js";import"../chunk-XM3RPIUS.js";import"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import{a}from"../chunk-VXTF2OL2.js";import"../chunk-OV74NBJ5.js";import"../chunk-CMH73CYQ.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-DJBTBRPS.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{g as BackgroundSection,j as DEFAULT_SECTIONS,h as LayersSection,d as PhotosSection,a as SectionTab,e as ShapesSection,k as SidePanel,i as SizeSection,b as TemplatesSection,c as TextSection,f as UploadSection,l as default};

package/dist/side-panel/size-panel.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const SizePanel: ({ store }: {
+declare const SizePanel: (({ store }: {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 
 export { SizePanel };

package/dist/side-panel/size-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-WIM26GEM.js";import"../chunk-O2XFH626.js";export{a as SizePanel};
+import{a}from"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import"../chunk-O2XFH626.js";export{a as SizePanel};

package/dist/side-panel/tab-button.js

@@ -1 +1 @@
-import{a}from"../chunk-LW2W4B2N.js";import"../chunk-O2XFH626.js";export{a as SectionTab};
+import{a}from"../chunk-VXTF2OL2.js";import"../chunk-O2XFH626.js";export{a as SectionTab};

package/dist/side-panel/templates-panel.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const TemplatesPanel: ({ store }: {
+declare const TemplatesPanel: (({ store }: {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 
 export { TemplatesPanel };

package/dist/side-panel/templates-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-QJBRJELT.js";import"../chunk-O2XFH626.js";export{a as TemplatesPanel};
+import{a}from"../chunk-OV74NBJ5.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as TemplatesPanel};

package/dist/side-panel/text-panel.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const TextPanel: ({ store }: {
+declare const TextPanel: (({ store }: {
     store: StoreType;
-}) => react_jsx_runtime.JSX.Element;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 
 export { TextPanel };

package/dist/side-panel/text-panel.js

@@ -1 +1 @@
-import{a}from"../chunk-6LFGFFHI.js";import"../chunk-O2XFH626.js";export{a as TextPanel};
+import{a}from"../chunk-CMH73CYQ.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as TextPanel};

package/dist/side-panel/upload-panel.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const UploadPanel: ({ store }: {
     store: StoreType;

package/dist/toolbar/default-toolbar.d.ts

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
+declare const BackgroundPicker: (({ store }: {
+    store: StoreType;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
 type PageProps = {
     store: StoreType;
     components?: any;
 };
 declare const DefaultToolbar: ({ store, components }: PageProps) => react_jsx_runtime.JSX.Element;
 
-export { DefaultToolbar, DefaultToolbar as default };
+export { BackgroundPicker, DefaultToolbar, DefaultToolbar as default };

package/dist/toolbar/default-toolbar.js

@@ -1 +1 @@
-import{a,b}from"../chunk-XZAP76LL.js";import"../chunk-3HQUN5MA.js";import"../chunk-OQ6HU62L.js";import"../chunk-E7ZSWHPU.js";import"../chunk-JWQ2DUXA.js";import"../chunk-O2XFH626.js";export{a as DefaultToolbar,b as default};
+import{a,b,c}from"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as BackgroundPicker,b as DefaultToolbar,c as default};

package/dist/toolbar/download-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const DownloadButton: ({ store }: {
     store: StoreType;

package/dist/toolbar/duplicate-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const DuplicateButton: (({ store }: {
     store: StoreType;

package/dist/toolbar/element-container.js

@@ -1 +1 @@
-import{a,b}from"../chunk-3HQUN5MA.js";import"../chunk-JWQ2DUXA.js";import"../chunk-O2XFH626.js";export{b as ElementContainer,a as extendToolbar};
+import{a,b}from"../chunk-YRJUN267.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{b as ElementContainer,a as extendToolbar};

package/dist/toolbar/figure-toolbar.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoreType } from '../model/store.js';
+import { FabricObject } from '@ydesign/core';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
+import 'mobx-state-tree';
+import '../utils/fonts.js';
+import 'mobx';
+
+type Props = {
+    store: StoreType;
+    components?: any;
+};
+type ButtonProps = {
+    element?: FabricObject;
+    store: StoreType;
+    elements: FabricObject[];
+};
+declare const getFillKey: (fill: any) => string;
+declare const FigureFill: (({ store, elements }: ButtonProps) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
+declare const FigureSettings: (({ store, element }: ButtonProps) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
+declare const FigureStroke: (({ store, elements }: ButtonProps) => react_jsx_runtime.JSX.Element | null) & {
+    displayName: string;
+};
+declare const FigureToolbar: (({ store, components }: Props) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
+
+export { FigureFill, FigureSettings, FigureStroke, FigureToolbar, getFillKey };