#973 Add a switch for auto-snapping (#974)

Author: langonginc

src/components/page-header/settings-modal.tsx

@@ -32,7 +32,13 @@ import { useTranslation } from 'react-i18next';
 import { MdArrowBack, MdArrowDownward, MdArrowForward, MdArrowUpward, MdOpenInNew, MdReadMore } from 'react-icons/md';
 import { StationCity } from '../../constants/constants';
 import { useRootDispatch, useRootSelector } from '../../redux';
-import { setAutoParallel, setGridLines, setRandomStationsNames, setTelemetryProject } from '../../redux/app/app-slice';
+import {
+    setAutoParallel,
+    setGridLines,
+    setRandomStationsNames,
+    setSnapLines,
+    setTelemetryProject,
+} from '../../redux/app/app-slice';
 import { setKeepLastPath } from '../../redux/runtime/runtime-slice';
 import { isMacClient } from '../../util/helpers';
 import { MAX_PARALLEL_LINES_FREE, MAX_PARALLEL_LINES_PRO } from '../../util/parallel';
@@ -59,7 +65,7 @@ const SettingsModal = (props: { isOpen: boolean; onClose: () => void }) => {
     const { activeSubscriptions } = useRootSelector(state => state.account);
     const {
         telemetry: { project: isAllowProjectTelemetry },
-        preference: { autoParallel, randomStationsNames, gridLines },
+        preference: { autoParallel, randomStationsNames, gridLines, snapLines },
     } = useRootSelector(state => state.app);
     const { keepLastPath, parallelLinesCount } = useRootSelector(state => state.runtime);
     const dispatch = useRootDispatch();
@@ -169,6 +175,13 @@ const SettingsModal = (props: { isOpen: boolean; onClose: () => void }) => {
                                         onChange={({ target: { checked } }) => dispatch(setGridLines(checked))}
                                     />
                                 </Box>
+                                <Box display="flex" mb="1">
+                                    <Text flex="1">{t('header.settings.preference.snapline')}</Text>
+                                    <Switch
+                                        isChecked={snapLines}
+                                        onChange={({ target: { checked } }) => dispatch(setSnapLines(checked))}
+                                    />
+                                </Box>
                             </Box>
                         </Box>
 

src/components/svg-canvas-graph.tsx

@@ -61,7 +61,7 @@ const SvgCanvas = () => {
     };
     const {
         telemetry: { project: isAllowProjectTelemetry },
-        preference: { autoParallel, gridLines: useGridLines },
+        preference: { autoParallel, gridLines: useGridLines, snapLines: useSnapLines },
     } = useRootSelector(state => state.app);
     const { svgViewBoxZoom, svgViewBoxMin } = useRootSelector(state => state.param);
     const {
@@ -91,8 +91,7 @@ const SvgCanvas = () => {
     // note only the nearest 2 of them will be drawn
     React.useEffect(
         () => {
-            if (!pointerPosition) return;
-            console.log('refresh snap lines');
+            if (!pointerPosition || !useSnapLines) return;
             const svgViewRange = getViewpointSize(svgViewBoxMin, svgViewBoxZoom, width, height);
             const nodesInViewRange = findNodesInRectangle(
                 graph.current,
@@ -149,7 +148,7 @@ const SvgCanvas = () => {
         const { x, y } = getMousePosition(e);
 
         if (mode === 'free' && active === node) {
-            if (!e.altKey && !useGridLines) {
+            if (!e.altKey && useSnapLines) {
                 // node start position (fromX, fromY)
                 const fromX = graph.current.getNodeAttribute(node, 'x');
                 const fromY = graph.current.getNodeAttribute(node, 'y');

src/i18n/translations/en.json

@@ -575,7 +575,8 @@
                     "shmetro": "Shanghai",
                     "bjsubway": "Beijing"
                 },
-                "gridline": "Show grid guide lines and disable auto-snapping"
+                "gridline": "Show grid guide lines",
+                "snapline": "Auto snapping to the guide lines and points"
             },
             "shortcuts": {
                 "title": "Shortcuts",

src/i18n/translations/ja.json

@@ -575,7 +575,8 @@
                     "shmetro": "上海",
                     "bjsubway": "北京"
                 },
-                "gridline": "グリッドガイドラインを表示し、自動スナップを無効にする"
+                "gridline": "グリッドガイドラインを表示",
+                "snapline": "ガイドラインおよびポイントに自動的にスナップする"
             },
             "shortcuts": {
                 "title": "ショートカット",

src/i18n/translations/ko.json

@@ -574,7 +574,8 @@
                     "shmetro": "상하이",
                     "bjsubway": "베이징"
                 },
-                "gridline": "그리드 가이드라인 표시 및 자동 스냅 비활성화"
+                "gridline": "격자 가이드 라인 표시",
+                "snapline": "가이드 라인과 포인트에 자동 스냅"
             },
             "shortcuts": {
                 "title": "바로 가기",

src/i18n/translations/zh-Hans.json

@@ -574,7 +574,8 @@
                     "shmetro": "上海",
                     "bjsubway": "北京"
                 },
-                "gridline": "显示网格参考线并不启用磁性布局"
+                "gridline": "显示网格参考线",
+                "snapline": "磁性吸附到参考线"
             },
             "shortcuts": {
                 "title": "快捷键",

src/i18n/translations/zh-Hant.json

@@ -574,7 +574,8 @@
                     "shmetro": "上海",
                     "bjsubway": "北京"
                 },
-                "gridline": "顯示網格參考線並停用自動吸附"
+                "gridline": "顯示網格參考線",
+                "snapline": "磁性吸附到參考線"
             },
             "shortcuts": {
                 "title": "捷徑",

src/index.tsx

@@ -19,6 +19,7 @@ import {
     setToolsPanelExpansion,
     setUnlockSimplePath,
     setGridLines,
+    setSnapLines,
 } from './redux/app/app-slice';
 import { ParamState, setFullState } from './redux/param/param-slice';
 import { refreshEdgesThunk, refreshNodesThunk } from './redux/runtime/runtime-slice';
@@ -65,6 +66,7 @@ const param = localStorage.getItem(LocalStorageKey.PARAM);
         if ('randomStationsNames' in app.preference)
             store.dispatch(setRandomStationsNames(app.preference.randomStationsNames));
         if ('gridLines' in app.preference) store.dispatch(setGridLines(app.preference.gridLines));
+        if ('snapLines' in app.preference) store.dispatch(setSnapLines(app.preference.snapLines));
     }
     if ('state' in loginState) {
         store.dispatch(setState(loginState.state));

src/redux/app/app-slice.ts

@@ -40,6 +40,7 @@ export interface AppState {
         autoParallel: boolean;
         randomStationsNames: 'none' | StationCity;
         gridLines: boolean;
+        snapLines: boolean;
     };
 }
 
@@ -56,6 +57,7 @@ export const initialState: AppState = {
         autoParallel: true,
         randomStationsNames: 'none',
         gridLines: false,
+        snapLines: true,
     },
 };
 
@@ -84,6 +86,9 @@ const appSlice = createSlice({
         setGridLines: (state, action: PayloadAction<boolean>) => {
             state.preference.gridLines = action.payload;
         },
+        setSnapLines: (state, action: PayloadAction<boolean>) => {
+            state.preference.snapLines = action.payload;
+        },
     },
 });
 
@@ -95,5 +100,6 @@ export const {
     setAutoParallel,
     setRandomStationsNames,
     setGridLines,
+    setSnapLines,
 } = appSlice.actions;
 export default appSlice.reducer;