Merge pull request #72 from Lemoncode/feature/#52-Move-data-to-global…

…-provider

Implemented canvas provider

src/core/model/index.ts

@@ -18,3 +18,12 @@ export type ShapeType =
   | 'browser'
   | 'timepickerinput';
 /* | "text"| "button" |  "radio" | "image"*/
+
+export interface ShapeModel {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  type: ShapeType;
+}

src/core/providers/canvas/canvas.context.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CanvasContextModel } from './canvas.model';
+
+export const CanvasContext = React.createContext<CanvasContextModel | null>(
+  null
+);

src/core/providers/canvas/canvas.model.ts

@@ -0,0 +1,6 @@
+import { ShapeModel } from '@/core/model';
+
+export interface CanvasContextModel {
+  shapes: ShapeModel[];
+  setShapes: React.Dispatch<React.SetStateAction<ShapeModel[]>>;
+}

src/core/providers/canvas/canvas.provider.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ShapeModel } from '@/core/model';
+import { CanvasContext } from './canvas.context';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const CanvasProvider: React.FC<Props> = props => {
+  const { children } = props;
+  const [shapes, setShapes] = React.useState<ShapeModel[]>([]);
+
+  return (
+    <CanvasContext.Provider value={{ shapes, setShapes }}>
+      {children}
+    </CanvasContext.Provider>
+  );
+};
+
+export const useCanvasContext = () => {
+  const context = React.useContext(CanvasContext);
+  if (context === null) {
+    throw new Error(
+      'useCanvasContext: Ensure you have wrapped your app with CanvasProvider'
+    );
+  }
+
+  return context;
+};

src/core/providers/canvas/index.ts

@@ -0,0 +1 @@
+export * from './canvas.provider';

src/core/providers/index.ts

@@ -0,0 +1 @@
+export * from './canvas';

src/main.tsx

@@ -4,9 +4,12 @@ import App from './App.tsx';
 import './normalize.css';
 import './reset.css';
 import './main.css';
+import { CanvasProvider } from './core/providers';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <CanvasProvider>
+      <App />
+    </CanvasProvider>
   </React.StrictMode>
 );

src/pods/canvas/canvas.model.ts

@@ -1,4 +1,4 @@
-import { ShapeType } from '@/core/model';
+import { ShapeModel, ShapeType } from '@/core/model';
 import { v4 as uuidv4 } from 'uuid';
 import {
   getComboBoxShapeSizeRestrictions,
@@ -21,15 +21,6 @@ export interface Coord {
   y: number;
 }
 
-export interface ShapeModel {
-  id: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  type: ShapeType;
-}
-
 const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
   switch (shapeType) {
     case 'combobox':

src/pods/canvas/canvas.pod.tsx

@@ -1,13 +1,13 @@
-import classes from './canvas.pod.module.css';
-import { createRef, useState } from 'react';
+import { createRef } from 'react';
+import Konva from 'konva';
+import { useCanvasContext } from '@/core/providers';
 import { Layer, Stage, Transformer } from 'react-konva';
-import { ShapeModel } from './canvas.model';
 import { useSelection } from './use-selection.hook';
-import Konva from 'konva';
 import { useTransform } from './use-transform.hook';
 import { renderShapeComponent } from './shape-renderer';
 import { useDropShape } from './use-drop-shape.hook';
 import { useMonitorShape } from './use-monitor-shape.hook';
+import classes from './canvas.pod.module.css';
 import {
   moveZIndexDownOneLevel,
   moveZIndexToBottom,
@@ -16,7 +16,7 @@ import {
 } from './zindex.util';
 
 export const CanvasPod = () => {
-  const [shapes, setShapes] = useState<ShapeModel[]>([]);
+  const { shapes, setShapes } = useCanvasContext();
 
   const {
     shapeRefs,