Merge pull request #8 from luvsic3/develop

.github/workflows/azure-static-web-apps-mango-flower-0d4082c00.yml → .github/workflows/azure-static-web-apps-nice-ocean-02d957600.yml

@@ -22,7 +22,7 @@ jobs:
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v0.0.1-preview
         with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_FLOWER_0D4082C00 }}
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_OCEAN_02D957600 }}
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
           action: "upload"
           ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
@@ -42,5 +42,5 @@ jobs:
         id: closepullrequest
         uses: Azure/static-web-apps-deploy@v0.0.1-preview
         with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_FLOWER_0D4082C00 }}
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_OCEAN_02D957600 }}
           action: "close"

README.md

@@ -76,9 +76,7 @@ interface Theme {
     stroke: string;
     strokeWidth: number;
   };
-  topic: {
-    borderColor: string;
-  };
+  mainColor: string;
   canvasWidth: number;
   canvasHeight: number;
 }

package.json

@@ -69,9 +69,9 @@
   "dependencies": {
     "@antv/hierarchy": "^0.6.4",
     "@emotion/core": "^10.0.28",
+    "hisoka": "^0.2.3",
     "hotkeys-js": "^3.8.1",
     "immer": "^7.0.5",
-    "relax-ts": "^0.1.3",
     "uuid": "^8.2.0"
   },
   "jest": {

src/Mindmap.tsx

@@ -6,6 +6,10 @@ import {
   useCallback,
   useMemo,
   useContext,
+  memo,
+  useState,
+  MouseEvent,
+  TouchEvent,
 } from 'react';
 import Topic from './components/Topic';
 import {
@@ -41,21 +45,27 @@ const Mindmap = () => {
   const theme = useContext(ThemeContext);
   const { scale, translate } = editorState;
   const { mode, selectedNodeId } = editorState;
+  const id = `#topic-${selectedNodeId}`;
   const { canvasWidth, canvasHeight } = theme;
-  const mindMap = mindmap(root);
-  // move mindmap to canvas central positon
-  mindMap.eachNode(node => {
-    node.x += canvasWidth / 2 - TOPIC_HORIZENTAL_MARGIN;
-    node.y += canvasHeight / 2;
-  });
+  const mindMap = useMemo(() => {
+    const map = mindmap(root);
+    // move mindmap to canvas central positon
+    map.eachNode(node => {
+      node.x += canvasWidth / 2 - TOPIC_HORIZENTAL_MARGIN;
+      node.y += canvasHeight / 2;
+    });
+    return map;
+  }, [root, canvasWidth, canvasHeight]);
+
   const locale = useLocale();
   const editorRef = useRef<HTMLDivElement>(null);
   const hotkeyOptions = {
     element: editorRef.current,
   };
+  const [isDragging, setIsDragging] = useState(false);
+  const [lastTouchPosition, setLastTouchPosition] = useState([0, 0]);
   useIconFont();
 
-  const id = `#topic-${selectedNodeId}`;
   const topics: ReactElement[] = useMemo(() => {
     const nodes: ReactElement[] = [];
     mindMap.eachNode(node => {
@@ -203,6 +213,46 @@ const Mindmap = () => {
   }, []);
 
   debug('rootWithCoords', mindMap);
+
+  const handleDragStart = useCallback(() => {
+    setLastTouchPosition([0, 0]);
+    setIsDragging(true);
+  }, []);
+
+  const handleDrag = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      editorStore.dispatch('SET_TRANSLATE', [
+        translate[0] + e.movementX,
+        translate[1] + e.movementY,
+      ]);
+    },
+    [isDragging, translate]
+  );
+
+  const handleTouchDrag = useCallback(
+    (e: TouchEvent) => {
+      if (!isDragging) return;
+      const lastTouch = e.changedTouches[e.changedTouches.length - 1];
+      if (!lastTouchPosition[0] && !lastTouchPosition[1]) {
+        setLastTouchPosition([lastTouch.clientX, lastTouch.clientY]);
+        return;
+      }
+      const deltaX = lastTouch.clientX - lastTouchPosition[0];
+      const deltaY = lastTouch.clientY - lastTouchPosition[1];
+      editorStore.dispatch('SET_TRANSLATE', [
+        translate[0] + deltaX,
+        translate[1] + deltaY,
+      ]);
+      setLastTouchPosition([lastTouch.clientX, lastTouch.clientY]);
+    },
+    [isDragging, lastTouchPosition, translate]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    setLastTouchPosition([0, 0]);
+  }, []);
   return (
     <div
       ref={editorRef}
@@ -215,6 +265,12 @@ const Mindmap = () => {
         height: ${canvasHeight}px;
         overflow: hidden;
       `}
+      onMouseDown={handleDragStart}
+      onTouchStart={handleDragStart}
+      onMouseMove={handleDrag}
+      onTouchMove={handleTouchDrag}
+      onMouseUp={handleDragEnd}
+      onTouchEnd={handleDragEnd}
     >
       <div
         id={CORE_EDITOR_ID}
@@ -245,7 +301,7 @@ const Mindmap = () => {
   );
 };
 
-export default Mindmap;
+export default memo(Mindmap);
 
 function throttle(fn: Function, wait: number) {
   let isCalled = false;

src/components/Links.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, memo } from 'react';
 import { ThemeContext } from '../context/theme';
 import { HierachyNodeWithTopicData } from '../utils/tree';
 import { TOPIC_HORIZENTAL_MARGIN } from '../constant';
@@ -64,4 +64,4 @@ const Links = (props: LinksProps) => {
   );
 };
 
-export default Links;
+export default memo(Links);

src/components/Toolbar.tsx

@@ -2,6 +2,7 @@
 import { css, jsx } from '@emotion/core';
 import { EDITOR_ID } from '../constant';
 import editorStore from '../store/editor';
+import { memo } from 'react';
 
 const Toolbar = () => {
   const scale = editorStore.useSelector(s => s.scale);
@@ -44,4 +45,4 @@ const Toolbar = () => {
   );
 };
 
-export default Toolbar;
+export default memo(Toolbar);

src/components/Topic.tsx

@@ -5,6 +5,7 @@ import {
   useState,
   DragEvent,
   MouseEvent,
+  memo,
 } from 'react';
 import { ThemeContext } from '../context/theme';
 import {
@@ -32,7 +33,7 @@ const Topic = (props: HierachyNode<TopicData>) => {
     hgap,
     vgap,
   } = props;
-  const topicTheme = useContext(ThemeContext).topic;
+  const $theme = useContext(ThemeContext);
   const editorState = editorStore.useSelector(s => s);
   const { mode, selectedNodeId } = editorState;
   const isSelected = id === selectedNodeId;
@@ -80,6 +81,7 @@ const Topic = (props: HierachyNode<TopicData>) => {
 
   function handleDrop() {
     if (!editorState.dragingNode) return;
+    if (editorState.dragingNode.id === id) return;
     // should not drop topic to it's descendants
     const descendants = topicWalker.getDescendants(editorState.dragingNode);
     if (descendants.some(node => node.id === id)) {
@@ -101,7 +103,8 @@ const Topic = (props: HierachyNode<TopicData>) => {
   function handleDragOver(e: DragEvent<HTMLDivElement>) {
     e.preventDefault();
   }
-  const outline = isSelected ? `2px solid ${topicTheme.borderColor}` : 'none';
+  const outline =
+    isSelected || isDragEntering ? `2px solid ${$theme.mainColor}` : 'none';
   const background = hasBorder ? '#fff' : 'transparent';
 
   // preventDefault to prevent enter keyboard event create new html element
@@ -135,6 +138,9 @@ const Topic = (props: HierachyNode<TopicData>) => {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
       onDragOver={handleDragOver}
+      // stopPropagation to prevent invoke Mindmap's event
+      onMouseDown={e => e.stopPropagation()}
+      onTouchStart={e => e.stopPropagation()}
       css={css`
         display: inline-block;
         border-radius: ${TOPIC_RADIUS}px;
@@ -147,7 +153,6 @@ const Topic = (props: HierachyNode<TopicData>) => {
         padding: ${padding};
         font-size: ${getTopicFontsize(props.data)}px;
         cursor: default;
-        opacity: ${isDragEntering ? 0.7 : 1};
         outline: ${outline};
         user-select: none;
         translate: 0 ${isEditing ? '2px' : 0};
@@ -159,4 +164,4 @@ const Topic = (props: HierachyNode<TopicData>) => {
   );
 };
 
-export default Topic;
+export default memo(Topic);

src/context/theme.ts

@@ -5,9 +5,8 @@ interface Theme {
     stroke: string;
     strokeWidth: number;
   };
-  topic: {
-    borderColor: string;
-  };
+  topic: {};
+  mainColor: string;
   canvasWidth: number;
   canvasHeight: number;
 }
@@ -17,9 +16,8 @@ const defaultTheme: Theme = {
     stroke: '#000',
     strokeWidth: 0.5,
   },
-  topic: {
-    borderColor: '#4dc4ff',
-  },
+  topic: {},
+  mainColor: '#4dc4ff',
   canvasWidth: window.innerWidth,
   canvasHeight: window.innerHeight,
 };

src/store/editor.ts

@@ -1,5 +1,5 @@
 import { TopicData } from 'xmind-model/types/models/topic';
-import { createStore } from 'relax-ts';
+import { createStore } from 'hisoka';
 import produce from 'immer';
 import {
   getLeftNode,
@@ -30,7 +30,7 @@ export const initialState: IState = {
 
 const store = createStore({
   state: initialState,
-  reducers: {
+  actions: {
     SET_MODE(state, payload: EDITOR_MODE) {
       if (state.readonly) return;
       state.mode = payload;
@@ -77,7 +77,6 @@ const store = createStore({
       }
     },
   },
-  effects: {},
 });
 
 export default store;

src/store/root.ts

@@ -1,5 +1,5 @@
 import { TopicData } from 'xmind-model/types/models/topic';
-import { createStore, StateSelector } from 'relax-ts';
+import { createStore, StateSelector } from 'hisoka';
 import { topicWalker, normalizeTopicSide, createTopic } from '../utils/tree';
 import { ATTACHED_KEY } from '../constant';
 import { debug } from '../utils/debug';
@@ -42,7 +42,7 @@ export const initialState: IState = {
 
 const store = createStore({
   state: initialState,
-  reducers: {
+  actions: {
     APPEND_CHILD(state, payload: Payload) {
       const root = state.timeline[state.current];
       if (!payload.id || !payload.node) return;
@@ -107,7 +107,6 @@ const store = createStore({
       state.current = state.timeline.length - 1;
     },
   },
-  effects: {},
 });
 
 const originalDispatch = store.dispatch;