Add multiple canvases demo, improve editor

Author: HriBB

demo/.eslintrc.json

@@ -1,3 +1,4 @@
 {
+  "root": true,
   "extends": "next/core-web-vitals"
 }

demo/components/route/RouteLayer.tsx

@@ -15,13 +15,19 @@ export const RouteLayer: FC<Props> = ({ route, index }) => {
     <Layer
       id={route.id}
       key={route.id}
-      name={route.name}
       active={state.routeIndex === index}
       visible={!!state.image}
     >
       {route.items.map((item) => {
         const Item = Items[item.type];
-        return <Item {...item} id={item.id} key={item.id} selected={state.selection === item.id} />;
+        return (
+          <Item
+            {...item}
+            id={item.id}
+            key={item.id}
+            selected={state.selection === item.id}
+          />
+        );
       })}
     </Layer>
   );

demo/components/tools/Circle.tsx

@@ -15,9 +15,11 @@ export const Circle: FC = () => {
       if (state.scope) {
         circle.current = new state.scope.Path.Circle({
           ...defaultProps,
+          insert: true,
           center: event.point,
           radius: 10,
         });
+        state.scope.project.activeLayer.addChild(circle.current);
       }
     },
     [state.scope]

demo/components/tools/Pen.tsx

@@ -22,6 +22,7 @@ export const Pen: FC = () => {
         if (!path.current) {
           path.current = new state.scope.Path({
             ...defaultProps,
+            insert: true,
             segments: [event.point],
           });
         } else {

demo/pages/editor.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import type { NextPage } from "next";
 
 import { Provider, Paper } from "components";
-import styles from "../styles/Editor.module.css";
+import styles from "../styles/Styles.module.css";
 
 const data = {
   id: "37ag863f-8530-4716-512d-5jr2bd3be5d2",

demo/pages/index.tsx

@@ -3,12 +3,34 @@ import Head from "next/head";
 import type { NextPage } from "next";
 
 import { Canvas, View, Layer, Rectangle } from "react-paper-renderer";
-import styles from "../styles/Home.module.css";
+import styles from "../styles/Styles.module.css";
+
+function move(arr: any[], from: number, to: number) {
+  return arr.reduce((prev, current, idx, self) => {
+    if (from === to) prev.push(current);
+    if (idx === from) return prev;
+    if (from < to) prev.push(current);
+    if (idx === to) prev.push(self[from]);
+    if (from > to) prev.push(current);
+    return prev;
+  }, []);
+}
 
 const Home: NextPage = () => {
-  const [color, setColor] = useState("#000000");
+  const [rects, setRects] = useState([
+    { id: 1, center: [100, 100], fillColor: "red", size: [50, 50] },
+    { id: 2, center: [120, 120], fillColor: "green", size: [50, 50] },
+    { id: 3, center: [140, 140], fillColor: "orange", size: [50, 50] },
+  ]);
+  const [visible, setVisible] = useState(true);
+  const [visible2, setVisible2] = useState(true);
+  const [color, setColor] = useState("black");
+  const [color2, setColor2] = useState("white");
   const onClick = () => {
-    setColor(color === "#000000" ? "#ff0000" : "#000000");
+    setColor(color === "black" ? "white" : "black");
+  };
+  const onClick2 = () => {
+    setColor2(color2 === "black" ? "white" : "black");
   };
   return (
     <>
@@ -18,18 +40,45 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className={styles.container}>
-        <Canvas width={800} height={600}>
-          <View>
-            <Layer>
-              <Rectangle
-                center={[200, 200]}
-                fillColor={color}
-                size={[100, 100]}
-                onClick={onClick}
-              />
-            </Layer>
-          </View>
-        </Canvas>
+        <div>
+          <button onClick={() => setVisible(!visible)}>canvas1</button>
+          <button onClick={() => setVisible2(!visible2)}>canvas2</button>
+        </div>
+        {visible && (
+          <Canvas className={styles.canvas} width={400} height={300}>
+            <View>
+              <Layer>
+                <Rectangle
+                  center={[75, 75]}
+                  fillColor={color}
+                  size={[50, 50]}
+                  onClick={onClick}
+                />
+                {rects.map((rect) => (
+                  <Rectangle
+                    {...rect}
+                    key={rect.id}
+                    onClick={() => setRects(move(rects, 0, 2))}
+                  />
+                ))}
+              </Layer>
+            </View>
+          </Canvas>
+        )}
+        {visible2 && (
+          <Canvas className={styles.canvas} width={400} height={300}>
+            <View>
+              <Layer>
+                <Rectangle
+                  center={[200, 100]}
+                  fillColor={color2}
+                  size={[100, 100]}
+                  onClick={onClick2}
+                />
+              </Layer>
+            </View>
+          </Canvas>
+        )}
       </div>
     </>
   );

demo/styles/Editor.module.css

@@ -0,0 +1,18 @@
+.container {
+  border: 2px solid blue;
+  display: block;
+  width: calc(100vw - 100px);
+  height: calc(100vh - 100px);
+  margin: 50px 0 0 50px;
+}
+
+.editor {
+  /*border: 2px solid blue;*/
+  display: block;
+  width: calc(100vw - 0px);
+  height: calc(100vh - 0px);
+}
+
+.canvas {
+  border: 2px solid red;
+}

demo/styles/Home.module.css

@@ -21,6 +21,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "../types/overrides.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "../src/**/*.ts",