Explicitly provide Redux store context to Layers

This is a known issue of react-konva, see eg. konvajs/react-konva#349 konvajs/react-konva#311 Revert some changes made to drawControl and boardControl reducers.
boardsite-io · Jan 28, 2021 · 446e1c0 · 446e1c0
1 parent c6a8c89
commit 446e1c0
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 56 deletions.
diff --git a/src/component/board/livelayer.js b/src/component/board/livelayer.js
@@ -1,24 +1,19 @@
-import React from "react"
+import React, { memo } from "react"
 import { FastLayer } from "react-konva"
 import { useSelector } from "react-redux"
 import store from "../../redux/store"
 import { StrokeShape } from "./stroke"
 
-export default function LiveLayer() {
+export default memo(() => {
     const pts = useSelector((state) => state.drawControl.liveStroke.points)
 
     return (
         <FastLayer>
             {pts.length > 0 ? (
-                <StrokeShape
-                    stroke={{
-                        ...store.getState().drawControl.liveStroke,
-                        points: pts,
-                    }}
-                />
+                <StrokeShape stroke={store.getState().drawControl.liveStroke} />
             ) : (
                 <></>
             )}
         </FastLayer>
     )
-}
+})
diff --git a/src/component/board/page.js b/src/component/board/page.js
@@ -1,13 +1,13 @@
-import React from "react"
+import React, { memo } from "react"
 import { useSelector } from "react-redux"
 import { Rect } from "react-konva"
 import { StrokeShape } from "./stroke"
 import { CANVAS_WIDTH, CANVAS_HEIGHT } from "../../constants"
 import store from "../../redux/store"
 
-export default function Page({ pageId, isDraggable }) {
+export default memo(({ pageId, isDraggable }) => {
     const strokes = useSelector(
-        (state) => state.boardControl.present.pageCollection[pageId]
+        (state) => state.boardControl.present.pageCollection[pageId].strokes
     )
 
     return (
@@ -26,13 +26,13 @@ export default function Page({ pageId, isDraggable }) {
                 strokeWidth={5}
                 fill="#eee"
             />
-            {strokes.map((stroke) => (
+            {Object.keys(strokes).map((id) => (
                 <StrokeShape
-                    key={stroke.id}
-                    stroke={stroke}
+                    key={id}
+                    stroke={strokes[id]}
                     isDraggable={isDraggable}
                 />
             ))}
         </>
     )
-}
+})
diff --git a/src/component/board/stage.js b/src/component/board/stage.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { useSelector } from "react-redux"
+import { ReactReduxContext, useSelector } from "react-redux"
 import { Stage, Layer } from "react-konva"
 
 import Page from "./page"
@@ -11,8 +11,8 @@ import { toolType, MIN_SAMPLE_COUNT } from "../../constants"
 
 export default function BoardStage() {
     const pageRank = useSelector((state) => state.boardControl.present.pageRank)
-    const isDraggable = useSelector((state) => state.drawControl.isDraggable)
 
+    const isDraggable = useSelector((state) => state.drawControl.isDraggable)
     const isMouseDown = useSelector((state) => state.drawControl.isMouseDown)
     const isActive = useSelector((state) => state.drawControl.isActive)
     const tool = useSelector((state) => state.drawControl.liveStroke.type)
@@ -44,7 +44,7 @@ export default function BoardStage() {
         sampleCount = 1
 
         const pos = getScaledPointerPosition(e)
-        startLiveStroke(pos)
+        startLiveStroke(pos, pageRank[0]) // todo get pageid
     }
 
     function onMouseMove(e) {
@@ -124,28 +124,38 @@ export default function BoardStage() {
     return (
         <div className="pagecollectionouter">
             <div className="pagecollectioninner">
-                <Stage
-                    draggable={!isActive}
-                    className="stage"
-                    width={window.innerWidth}
-                    height={window.innerHeight}
-                    onMouseDown={onMouseDown}
-                    onMousemove={onMouseMove}
-                    onMouseUp={onMouseUp}
-                    onMouseLeave={onMouseUp}
-                    onContextMenu={(e) => e.evt.preventDefault()}
-                    onTouchStart={onMouseDown}
-                    onTouchMove={onMouseMove}
-                    onTouchEnd={onMouseUp}
-                    onDragEnd={onDragEnd}
-                    onWheel={onWheel}>
-                    <Layer>
-                        {pageRank.map((pageId) => (
-                            <Page pageId={pageId} isDraggable={isDraggable} />
-                        ))}
-                    </Layer>
-                    <LiveLayer />
-                </Stage>
+                <ReactReduxContext.Consumer>
+                    {(value) => (
+                        <Stage
+                            draggable={!isActive}
+                            className="stage"
+                            width={window.innerWidth}
+                            height={window.innerHeight}
+                            onMouseDown={onMouseDown}
+                            onMousemove={onMouseMove}
+                            onMouseUp={onMouseUp}
+                            onMouseLeave={onMouseUp}
+                            onContextMenu={(e) => e.evt.preventDefault()}
+                            onTouchStart={onMouseDown}
+                            onTouchMove={onMouseMove}
+                            onTouchEnd={onMouseUp}
+                            onDragEnd={onDragEnd}
+                            onWheel={onWheel}>
+                            <ReactReduxContext.Provider value={value}>
+                                <Layer>
+                                    {pageRank.map((pageId) => (
+                                        <Page
+                                            key={pageId}
+                                            pageId={pageId}
+                                            isDraggable={isDraggable}
+                                        />
+                                    ))}
+                                </Layer>
+                                <LiveLayer />
+                            </ReactReduxContext.Provider>
+                        </Stage>
+                    )}
+                </ReactReduxContext.Consumer>
             </div>
         </div>
     )

diff --git a/src/component/board/stroke.js b/src/component/board/stroke.js
@@ -28,7 +28,7 @@ export function StrokeShape({ stroke, isDraggable }) {
                 x: e.target.attrs.x,
                 y: e.target.attrs.y,
                 id: stroke.id,
-                // pageId: stroke.pageId,
+                pageId: stroke.pageId,
             })
         )
     }
@@ -145,8 +145,13 @@ export function StrokeShape({ stroke, isDraggable }) {
  * Start the current stroke when mouse is pressed down
  * @param {*} position
  */
-export function startLiveStroke(position) {
-    store.dispatch(START_LIVESTROKE([position.x, position.y]))
+export function startLiveStroke(position, pageId) {
+    store.dispatch(
+        START_LIVESTROKE({
+            pageId,
+            points: [position.x, position.y],
+        })
+    )
 }
 
 /**

diff --git a/src/redux/slice/boardcontrol.js b/src/redux/slice/boardcontrol.js
@@ -6,7 +6,6 @@ const boardControlSlice = createSlice({
     initialState: {
         pageRank: [], // ["id1", "id2", ...]
         pageCollection: {}, // {id1: canvasRef1, id2: canvasRef2, ...}
-        strokeCollection: {}, // FOR NOW WE CAN USE 1 COLLECTION
         sessionID: "",
         websocket: null,
     },
@@ -52,25 +51,21 @@ const boardControlSlice = createSlice({
         // Add stroke to collection
         ADD_STROKE: (state, action) => {
             const stroke = action.payload
-            const { id } = stroke
-            // state.pageCollection.strokes[id] = stroke
-            state.strokeCollection[id] = stroke
+            const { pageId, id } = stroke
+            state.pageCollection[pageId].strokes[id] = stroke
         },
 
         // Erase stroke from collection
         ERASE_STROKE(state, action) {
             const stroke = action.payload
-            // const { pageId, id } = stroke
-            // delete state.pageCollection[pageId].strokes[id]
-            delete state.strokeCollection[stroke.id]
+            const { pageId, id } = stroke
+            delete state.pageCollection[pageId].strokes[id]
         },
 
         // Update stroke position after dragging
         UPDATE_STROKE(state, action) {
-            // const { x, y, id, pageId } = action.payload
-            // const stroke = state.pageCollection[pageId].strokes[id]
-            const { x, y, id } = action.payload
-            const stroke = state.strokeCollection[id]
+            const { x, y, id, pageId } = action.payload
+            const stroke = state.pageCollection[pageId].strokes[id]
             stroke.x = x
             stroke.y = y
         },

diff --git a/src/redux/slice/drawcontrol.js b/src/redux/slice/drawcontrol.js
@@ -22,6 +22,7 @@ const drawControlSlice = createSlice({
                 color: DEFAULT_COLOR,
                 width: DEFAULT_WIDTH * CANVAS_PIXEL_RATIO,
             },
+            pageId: "",
             points: [], // {"pageid": [x1,y1,x2,y2,...]}
             x: 0, // be consistent with stroke description
             y: 0,
@@ -63,14 +64,17 @@ const drawControlSlice = createSlice({
             state.isMouseDown = isMouseDown
         },
         START_LIVESTROKE: (state, action) => {
-            const points = action.payload
+            const { pageId, points } = action.payload
+            state.liveStroke.pageId = pageId
             state.liveStroke.points = points
         },
+        // Update the current live stroke position
         UPDATE_LIVESTROKE: (state, action) => {
             const points = action.payload
             state.liveStroke.points = [...state.liveStroke.points, ...points]
         },
         END_LIVESTROKE: (state) => {
+            state.liveStroke.pageId = ""
             state.liveStroke.points = []
         },
     },