editor store update
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import type { EditorObject, Page, TableCell } from "./editorStore.types";
|
import type { EditorObject, Page, TableCell } from "./editorStore.types";
|
||||||
|
|
||||||
export const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
|
export const createTableCellId = (row: number, col: number) =>
|
||||||
|
`cell-${row}-${col}`;
|
||||||
|
|
||||||
const createUuid = (): string => {
|
const createUuid = (): string => {
|
||||||
if (typeof globalThis.crypto?.randomUUID === "function") {
|
if (typeof globalThis.crypto?.randomUUID === "function") {
|
||||||
@@ -15,7 +16,9 @@ const createUuid = (): string => {
|
|||||||
bytes[8] = (bytes[8] & 0x3f) | 0x80;
|
bytes[8] = (bytes[8] & 0x3f) | 0x80;
|
||||||
|
|
||||||
const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0"));
|
const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0"));
|
||||||
return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
|
return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex
|
||||||
|
.slice(6, 8)
|
||||||
|
.join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
||||||
@@ -300,7 +303,9 @@ export const buildGroupResult = (
|
|||||||
|
|
||||||
export const ungroupById = (objects: EditorObject[], groupId: string) =>
|
export const ungroupById = (objects: EditorObject[], groupId: string) =>
|
||||||
objects
|
objects
|
||||||
.map((obj) => (obj.groupId === groupId ? { ...obj, groupId: undefined } : obj))
|
.map((obj) =>
|
||||||
|
obj.groupId === groupId ? { ...obj, groupId: undefined } : obj,
|
||||||
|
)
|
||||||
.filter((obj) => obj.id !== groupId);
|
.filter((obj) => obj.id !== groupId);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -308,7 +313,9 @@ export const ungroupById = (objects: EditorObject[], groupId: string) =>
|
|||||||
* همانند buildGroupResult یک wrapper اضافه میکنیم تا ادیتور گروه را یکپارچه جابهجا کند.
|
* همانند buildGroupResult یک wrapper اضافه میکنیم تا ادیتور گروه را یکپارچه جابهجا کند.
|
||||||
* اگر فقط یک عضو با آن groupId باشد، groupId حذف میشود (گروه نامعتبر).
|
* اگر فقط یک عضو با آن groupId باشد، groupId حذف میشود (گروه نامعتبر).
|
||||||
*/
|
*/
|
||||||
export const ensureMissingGroupObjects = (objects: EditorObject[]): EditorObject[] => {
|
export const ensureMissingGroupObjects = (
|
||||||
|
objects: EditorObject[],
|
||||||
|
): EditorObject[] => {
|
||||||
let next = [...objects];
|
let next = [...objects];
|
||||||
|
|
||||||
const referencedIds = new Set<string>();
|
const referencedIds = new Set<string>();
|
||||||
@@ -322,7 +329,9 @@ export const ensureMissingGroupObjects = (objects: EditorObject[]): EditorObject
|
|||||||
const members = next.filter((o) => o.groupId === gid && o.type !== "group");
|
const members = next.filter((o) => o.groupId === gid && o.type !== "group");
|
||||||
if (members.length < 2) {
|
if (members.length < 2) {
|
||||||
next = next.map((o) =>
|
next = next.map((o) =>
|
||||||
o.groupId === gid && o.type !== "group" ? { ...o, groupId: undefined } : o,
|
o.groupId === gid && o.type !== "group"
|
||||||
|
? { ...o, groupId: undefined }
|
||||||
|
: o,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,7 +46,10 @@ export type {
|
|||||||
|
|
||||||
type PageBackgroundSettings = Pick<
|
type PageBackgroundSettings = Pick<
|
||||||
Page,
|
Page,
|
||||||
"backgroundType" | "backgroundColor" | "backgroundGradient" | "backgroundImageUrl"
|
| "backgroundType"
|
||||||
|
| "backgroundColor"
|
||||||
|
| "backgroundGradient"
|
||||||
|
| "backgroundImageUrl"
|
||||||
>;
|
>;
|
||||||
|
|
||||||
type EditorStoreType = {
|
type EditorStoreType = {
|
||||||
@@ -126,7 +129,10 @@ type EditorStoreType = {
|
|||||||
toggleObjectVisibility: (id: string) => void;
|
toggleObjectVisibility: (id: string) => void;
|
||||||
groupObjects: (objectIds: string[]) => void;
|
groupObjects: (objectIds: string[]) => void;
|
||||||
ungroupObjects: (groupId: string) => void;
|
ungroupObjects: (groupId: string) => void;
|
||||||
loadPages: (pages: Page[], documentSettings?: Partial<DocumentSettings>) => void;
|
loadPages: (
|
||||||
|
pages: Page[],
|
||||||
|
documentSettings?: Partial<DocumentSettings>,
|
||||||
|
) => void;
|
||||||
clipboardObjects: EditorObject[];
|
clipboardObjects: EditorObject[];
|
||||||
objectHistoryPast: EditorObject[][];
|
objectHistoryPast: EditorObject[][];
|
||||||
objectHistoryFuture: EditorObject[][];
|
objectHistoryFuture: EditorObject[][];
|
||||||
@@ -139,7 +145,9 @@ type EditorStoreType = {
|
|||||||
sendObjectBackward: (id: string) => void;
|
sendObjectBackward: (id: string) => void;
|
||||||
documentSettings: DocumentSettings;
|
documentSettings: DocumentSettings;
|
||||||
updateDocumentSettings: (updates: Partial<DocumentSettings>) => void;
|
updateDocumentSettings: (updates: Partial<DocumentSettings>) => void;
|
||||||
updateCurrentPageBackground: (updates: Partial<PageBackgroundSettings>) => void;
|
updateCurrentPageBackground: (
|
||||||
|
updates: Partial<PageBackgroundSettings>,
|
||||||
|
) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useEditorStore = create<EditorStoreType>((set, get) => {
|
export const useEditorStore = create<EditorStoreType>((set, get) => {
|
||||||
@@ -185,19 +193,19 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
documentSettings: {
|
documentSettings: {
|
||||||
displayStyle: 'double',
|
displayStyle: "double",
|
||||||
autoPlay: false,
|
autoPlay: false,
|
||||||
pageFlipSound: true,
|
pageFlipSound: true,
|
||||||
leftToRightFlip: false,
|
leftToRightFlip: false,
|
||||||
smartGuide: true,
|
smartGuide: true,
|
||||||
backgroundType: 'color',
|
backgroundType: "color",
|
||||||
backgroundColor: '#ffffff',
|
backgroundColor: "#ffffff",
|
||||||
backgroundGradient: {
|
backgroundGradient: {
|
||||||
from: "#ffffff",
|
from: "#ffffff",
|
||||||
to: "#e2e8f0",
|
to: "#e2e8f0",
|
||||||
angle: 135,
|
angle: 135,
|
||||||
},
|
},
|
||||||
backgroundImageUrl: '',
|
backgroundImageUrl: "",
|
||||||
},
|
},
|
||||||
updateDocumentSettings: (updates) =>
|
updateDocumentSettings: (updates) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
@@ -206,7 +214,9 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
|
|||||||
updateCurrentPageBackground: (updates) =>
|
updateCurrentPageBackground: (updates) =>
|
||||||
set((state) => {
|
set((state) => {
|
||||||
if (!state.currentPageId) return {};
|
if (!state.currentPageId) return {};
|
||||||
const currentPage = state.pages.find((p) => p.id === state.currentPageId);
|
const currentPage = state.pages.find(
|
||||||
|
(p) => p.id === state.currentPageId,
|
||||||
|
);
|
||||||
if (!currentPage) return {};
|
if (!currentPage) return {};
|
||||||
const nextPage = { ...currentPage, ...updates };
|
const nextPage = { ...currentPage, ...updates };
|
||||||
return {
|
return {
|
||||||
@@ -483,7 +493,8 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
|
|||||||
.map((obj) => obj.id),
|
.map((obj) => obj.id),
|
||||||
);
|
);
|
||||||
const objectsToCopy = state.objects.filter(
|
const objectsToCopy = state.objects.filter(
|
||||||
(obj) => selectedIdSet.has(obj.id) || groupsToCopy.has(obj.groupId || ""),
|
(obj) =>
|
||||||
|
selectedIdSet.has(obj.id) || groupsToCopy.has(obj.groupId || ""),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (objectsToCopy.length === 0) return;
|
if (objectsToCopy.length === 0) return;
|
||||||
@@ -950,7 +961,9 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
|
|||||||
if (!result) return;
|
if (!result) return;
|
||||||
|
|
||||||
if (state.currentPageId) {
|
if (state.currentPageId) {
|
||||||
const pageToGroup = state.pages.find((p) => p.id === state.currentPageId);
|
const pageToGroup = state.pages.find(
|
||||||
|
(p) => p.id === state.currentPageId,
|
||||||
|
);
|
||||||
if (!pageToGroup) return;
|
if (!pageToGroup) return;
|
||||||
const pageResult = buildGroupResult(
|
const pageResult = buildGroupResult(
|
||||||
pageToGroup.objects,
|
pageToGroup.objects,
|
||||||
|
|||||||
@@ -89,8 +89,8 @@ export type Page = {
|
|||||||
backgroundImageUrl: string;
|
backgroundImageUrl: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type DisplayStyle = 'single' | 'double';
|
export type DisplayStyle = "single" | "double";
|
||||||
export type BackgroundType = 'color' | 'gradient' | 'image';
|
export type BackgroundType = "color" | "gradient" | "image";
|
||||||
|
|
||||||
export type DocumentSettings = {
|
export type DocumentSettings = {
|
||||||
displayStyle: DisplayStyle;
|
displayStyle: DisplayStyle;
|
||||||
|
|||||||
Reference in New Issue
Block a user