Skip to content

Commit

Permalink
Merge pull request #476 from Lemoncode/feature/#453-refactor-canvas-v…
Browse files Browse the repository at this point in the history 
…iew-settings-provider

[READY_TO_REVIEW]feature/#453 Refactor canvas view settings provider
  • Loading branch information
@brauliodiez
brauliodiez authored May 9, 2024
2 parents 58887d1 + 805ca3d commit dbe9c1a
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 100 deletions.
46 changes: 18 additions & 28 deletions src/common/helpers/set-off-set-zoom-to-coords.helper.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,28 @@ describe('setOffSetZoomToCoords', () => {
const initialContextState: CanvasViewSettingsContextModel = {
canvasViewSettings: {
canvasSize: { width: 5000, height: 5000 },
viewBoxSize: { width: 20000, height: 20000 },
zoomFactor: 2,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
autoSave: false,
},
scrollPosition: { x: 0, y: 0 },
filename: '',
viewBoxSize: { width: 20000, height: 20000 },
zoomIn: () => {},
zoomOut: () => {},
setCanvasSize: () => {},
setScrollPosition: () => {},
setFilename: () => {},
setLoadSample: () => {},
setViewBoxSize: () => {},
autoSave: false,
setAutoSave: () => {},
};

// Act
const result = setOffSetZoomToCoords(
inputCoords.x,
inputCoords.y,
initialContextState.viewBoxSize,
initialContextState.canvasViewSettings.viewBoxSize,
initialContextState.canvasViewSettings.canvasSize,
initialContextState.canvasViewSettings.zoomFactor
);
Expand All @@ -53,30 +51,28 @@ describe('setOffSetZoomToCoords', () => {
const initialContextState: CanvasViewSettingsContextModel = {
canvasViewSettings: {
canvasSize: { width: 10000, height: 10000 },
viewBoxSize: { width: 25000, height: 15000 },
zoomFactor: 2,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
autoSave: false,
},
scrollPosition: { x: 0, y: 0 },
filename: '',
viewBoxSize: { width: 25000, height: 15000 },
zoomIn: () => {},
zoomOut: () => {},
setCanvasSize: () => {},
setScrollPosition: () => {},
setFilename: () => {},
setLoadSample: () => {},
setViewBoxSize: () => {},
autoSave: false,
setAutoSave: () => {},
};

// Act
const result = setOffSetZoomToCoords(
inputCoords.x,
inputCoords.y,
initialContextState.viewBoxSize,
initialContextState.canvasViewSettings.viewBoxSize,
initialContextState.canvasViewSettings.canvasSize,
initialContextState.canvasViewSettings.zoomFactor
);
Expand All @@ -96,30 +92,28 @@ describe('setOffSetZoomToCoords', () => {
const initialContextState: CanvasViewSettingsContextModel = {
canvasViewSettings: {
canvasSize: { width: 300, height: 100 },
viewBoxSize: { width: 2000, height: 5000 },
zoomFactor: 5,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
autoSave: false,
},
scrollPosition: { x: 0, y: 0 },
filename: '',
viewBoxSize: { width: 2000, height: 5000 },
zoomIn: () => {},
zoomOut: () => {},
setCanvasSize: () => {},
setScrollPosition: () => {},
setFilename: () => {},
setLoadSample: () => {},
setViewBoxSize: () => {},
autoSave: false,
setAutoSave: () => {},
};

// Act
const result = setOffSetZoomToCoords(
inputCoords.x,
inputCoords.y,
initialContextState.viewBoxSize,
initialContextState.canvasViewSettings.viewBoxSize,
initialContextState.canvasViewSettings.canvasSize,
initialContextState.canvasViewSettings.zoomFactor
);
Expand All @@ -141,16 +135,15 @@ describe('setOffSetZoomToCoords', () => {
width: Number.MAX_SAFE_INTEGER,
height: Number.MAX_SAFE_INTEGER,
},
viewBoxSize: {
width: Number.MAX_SAFE_INTEGER,
height: Number.MAX_SAFE_INTEGER,
},
zoomFactor: 5,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
},
scrollPosition: { x: 0, y: 0 },
filename: '',
viewBoxSize: {
width: Number.MAX_SAFE_INTEGER,
height: Number.MAX_SAFE_INTEGER,
autoSave: false,
},
zoomIn: () => {},
zoomOut: () => {},
Expand All @@ -159,15 +152,14 @@ describe('setOffSetZoomToCoords', () => {
setFilename: () => {},
setLoadSample: () => {},
setViewBoxSize: () => {},
autoSave: false,
setAutoSave: () => {},
};

// Act
const result = setOffSetZoomToCoords(
inputCoords.x,
inputCoords.y,
initialContextState.viewBoxSize,
initialContextState.canvasViewSettings.viewBoxSize,
initialContextState.canvasViewSettings.canvasSize,
initialContextState.canvasViewSettings.zoomFactor
);
Expand All @@ -186,30 +178,28 @@ describe('setOffSetZoomToCoords', () => {
const initialContextState: CanvasViewSettingsContextModel = {
canvasViewSettings: {
canvasSize: { width: 5000, height: 5000 },
viewBoxSize: { width: 20000, height: 20000 },
zoomFactor: 2,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
autoSave: false,
},
scrollPosition: { x: 0, y: 0 },
filename: '',
viewBoxSize: { width: 20000, height: 20000 },
zoomIn: () => {},
zoomOut: () => {},
setCanvasSize: () => {},
setScrollPosition: () => {},
setFilename: () => {},
setLoadSample: () => {},
setViewBoxSize: () => {},
autoSave: false,
setAutoSave: () => {},
};

// Act
const result = setOffSetZoomToCoords(
inputCoords.x,
inputCoords.y,
initialContextState.viewBoxSize,
initialContextState.canvasViewSettings.viewBoxSize,
initialContextState.canvasViewSettings.canvasSize,
initialContextState.canvasViewSettings.zoomFactor
);
Expand Down
10 changes: 5 additions & 5 deletions src/core/autosave/autosave.hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ const useAutosave = () => {
const autoSaveRef = useRef<boolean | null>(null);

const { canvasSchema, setCanvasSchema } = useCanvasSchemaContext();
const { filename, setFilename, setLoadSample, autoSave } =
const { canvasViewSettings, setFilename, setLoadSample } =
useCanvasViewSettingsContext();

const [autosaveError, setAutosaveError] = useState(0);

const autosaveHandler = () => {
if (autosaveError > 1) stopAutosave();

if (canvasSchema.tables.length !== 0 && autoSave) {
if (canvasSchema.tables.length !== 0 && canvasViewSettings.autoSave) {
saveToLocal(
AUTOSAVE_KEY,
{
filename: filename ?? undefined,
filename: canvasViewSettings.filename ?? undefined,
canvasSchema,
},
autosaveError,
Expand Down Expand Up @@ -69,14 +69,14 @@ const useAutosave = () => {
}, [AUTOSAVE_KEY]);

useEffect(() => {
autoSaveRef.current = autoSave;
autoSaveRef.current = canvasViewSettings.autoSave;
if (autoSaveRef.current) {
startAutosave();
} else {
stopAutosave();
deleteAutosaveStorage();
}
}, [autoSave]);
}, [canvasViewSettings.autoSave]);

return {
retrieveAutosave,
Expand Down
18 changes: 14 additions & 4 deletions src/core/providers/canvas-view-settings/canvas-view-settings.model.ts
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,47 @@
import { retrieveValueFromLocalStorage } from '@/common/local-storage';
import { Coords, Size } from '@/core/model';

export interface CanvasViewSettingsModel {
canvasSize: Size;
viewBoxSize: Size;
zoomFactor: number;
scrollPosition: Coords;
filename: string;
loadSample: boolean;
autoSave: boolean;
}

// This canvas size is used to calc table sizes, etc...
// on the Canvas itself we will use a huge canvas in order to avoid having issues when zooming (Canvas_Max_Width and height...)
const CANVAS_SIZE = { width: 5000, height: 5000 };

export const USERSAVE_KEY = 'userSettings';

const savedSettingsObject = retrieveValueFromLocalStorage(USERSAVE_KEY);

const initialAutoSaveValue =
savedSettingsObject && savedSettingsObject.autoSave !== undefined
? savedSettingsObject.autoSave
: true;

export const createInitialSettings = (DEFAULT_ZOOM_FACTOR: number) => ({
canvasSize: CANVAS_SIZE,
viewBoxSize: { width: 0, height: 0 },
zoomFactor: DEFAULT_ZOOM_FACTOR,
scrollPosition: { x: 0, y: 0 },
filename: '',
loadSample: true,
autoSave: initialAutoSaveValue,
});

export interface CanvasViewSettingsContextModel {
canvasViewSettings: CanvasViewSettingsModel;
scrollPosition: Coords;
filename: string;
setScrollPosition: (scrollPosition: Coords) => void;
setCanvasSize: (canvasSize: Size) => void;
setFilename: (filename: string) => void;
zoomIn: () => void;
zoomOut: () => void;
setLoadSample: (loadSample: boolean) => void;
viewBoxSize: Size;
setViewBoxSize: (viewBoxSize: Size) => void;
autoSave: boolean;
setAutoSave: (autoSave: boolean) => void;
}
Loading

0 comments on commit dbe9c1a

Please sign in to comment.