myGraph.resetZoom()}
- onKeyDown={(ev) => ev.key === ' ' && (myGraph.resetZoom())}
+ onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && myGraph.resetZoom()}
>
@@ -29,9 +30,10 @@ const ZoomComp = ({ superState, dispatcher }) => {
myGraph.fitZoom()}
- onKeyDown={(ev) => ev.key === ' ' && (myGraph.resetZoom())}
+ onKeyDown={(ev) => (ev.key === ' ' || ev.key === 'Enter') && myGraph.fitZoom()}
>
diff --git a/src/component/modals/History.jsx b/src/component/modals/History.jsx
index fba9b4c..8b9646a 100644
--- a/src/component/modals/History.jsx
+++ b/src/component/modals/History.jsx
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import Modal from './ParentModal';
+import ConfirmModal from './ConfirmModal';
import './settings.css';
import { actionType as T } from '../../reducer';
import GA from '../../graph-builder/graph-actions';
@@ -21,6 +22,8 @@ const HistoryModal = ({ superState, dispatcher }) => {
return res;
};
const [filterAction, setFilterAction] = useState(mapActionToTrue());
+ const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false);
+ const [pendingRestoreIndex, setPendingRestoreIndex] = useState(null);
const getLabelFromID = (x) => {
if (superState.curGraphInstance) {
@@ -71,20 +74,33 @@ const HistoryModal = ({ superState, dispatcher }) => {
[GA.SET_BENDW]: 'EdgeBend',
};
- const restoreState = (index) => {
- // eslint-disable-next-line no-alert
- if (window.confirm('Are you sure to restore the selected state?')) {
- let tempCurState = curState;
- while (index > tempCurState) {
- superState.curGraphInstance.undoSingleAction();
- tempCurState += 1;
- }
- while (index < tempCurState) {
- superState.curGraphInstance.redoSingleAction();
- tempCurState -= 1;
- }
- setcurState(tempCurState);
+ const doRestore = (index) => {
+ let tempCurState = curState;
+ while (index > tempCurState) {
+ superState.curGraphInstance.undoSingleAction();
+ tempCurState += 1;
+ }
+ while (index < tempCurState) {
+ superState.curGraphInstance.redoSingleAction();
+ tempCurState -= 1;
}
+ setcurState(tempCurState);
+ };
+
+ const restoreState = (index) => {
+ setPendingRestoreIndex(index);
+ setRestoreConfirmOpen(true);
+ };
+
+ const handleRestoreConfirm = () => {
+ doRestore(pendingRestoreIndex);
+ setRestoreConfirmOpen(false);
+ setPendingRestoreIndex(null);
+ };
+
+ const handleRestoreCancel = () => {
+ setRestoreConfirmOpen(false);
+ setPendingRestoreIndex(null);
};
const prefixTid = (tid, str, authorName, index, hash) => {
const DT = new Date(parseInt(tid, 10));
@@ -127,11 +143,19 @@ const HistoryModal = ({ superState, dispatcher }) => {
const close = () => dispatcher({ type: T.SET_HISTORY_MODAL, payload: false });
return (
-
+ <>
+
+
-
+
+
);
};
diff --git a/src/graph-builder/graph-core/2-canvas.js b/src/graph-builder/graph-core/2-canvas.js
index 348ff53..863297a 100644
--- a/src/graph-builder/graph-core/2-canvas.js
+++ b/src/graph-builder/graph-core/2-canvas.js
@@ -31,14 +31,20 @@ class GraphCanvas extends Core {
}
clearAll() {
- if (this.cy.elements().length === 0) return true;
- // eslint-disable-next-line no-alert
- if (!window.confirm('Do want to clear all elements?')) return false;
- this.cy.elements().forEach((el) => this.deleteElem(el.id(), 0));
- // this.actionArr = [];
- this.dispatcher({ type: T.CHANGE_RESET, payload: true });
- this.cy.emit('graph-modified');
- return true;
+ if (this.cy.elements().length === 0) return;
+ this.dispatcher({
+ type: T.SET_CONFIRM_MODAL,
+ payload: {
+ open: true,
+ message: 'Do you want to clear all elements?',
+ onConfirm: () => {
+ this.cy.elements().forEach((el) => this.deleteElem(el.id(), 0));
+ // this.actionArr = [];
+ this.dispatcher({ type: T.CHANGE_RESET, payload: true });
+ this.cy.emit('graph-modified');
+ },
+ },
+ });
}
resetAllComp() {
diff --git a/src/graph-builder/graph-core/6-server.js b/src/graph-builder/graph-core/6-server.js
index e3fc1d3..d396bbb 100644
--- a/src/graph-builder/graph-core/6-server.js
+++ b/src/graph-builder/graph-core/6-server.js
@@ -86,30 +86,31 @@ class GraphServer extends GraphLoadSave {
}
forcePushToServer() {
- // eslint-disable-next-line
- if (!window.confirm(
- 'Forced push may result in workflow overwite and loss of changes pushed by others. Confirm?',
- )) return;
- if (this.serverID) {
- forceUpdateGraph(this.serverID, this.getGraphML()).then(() => {
-
- }).catch((err) => {
- toast.error(err.response?.data?.message || err.message);
- });
- } else {
- postGraph(this.getGraphML()).then((serverID) => {
- this.set({ serverID });
- }).catch((err) => {
- toast.error(err.response?.data?.message || err.message);
- });
- }
+ this.dispatcher({
+ type: T.SET_CONFIRM_MODAL,
+ payload: {
+ open: true,
+ message: 'Forced push may result in workflow overwite and loss of changes pushed by others. Confirm?',
+ onConfirm: () => {
+ if (this.serverID) {
+ forceUpdateGraph(this.serverID, this.getGraphML()).then(() => {
+
+ }).catch((err) => {
+ toast.error(err.response?.data?.message || err.message);
+ });
+ } else {
+ postGraph(this.getGraphML()).then((serverID) => {
+ this.set({ serverID });
+ }).catch((err) => {
+ toast.error(err.response?.data?.message || err.message);
+ });
+ }
+ },
+ },
+ });
}
forcePullFromServer() {
- // eslint-disable-next-line
- if (!window.confirm(
- 'Forced pull may result in workflow overwite and loss of unsaved changes. Confirm?',
- )) return;
if (this.serverID) {
getGraph(this.serverID).then((graphXML) => {
this.setGraphML(graphXML);
diff --git a/src/reducer/actionType.js b/src/reducer/actionType.js
index ea540e1..d2b9cef 100644
--- a/src/reducer/actionType.js
+++ b/src/reducer/actionType.js
@@ -46,6 +46,7 @@ const actionType = {
SET_LOGS_MESSAGE: 'SET_LOGS_MESSAGE',
SET_GRAPH_INSTANCE: 'SET_GRAPH_INSTANCE',
TOGGLE_DARK_MODE: 'TOGGLE_DARK_MODE',
+ SET_CONFIRM_MODAL: 'SET_CONFIRM_MODAL',
};
export default zealit(actionType);
diff --git a/src/reducer/initialState.js b/src/reducer/initialState.js
index 4fb1993..736c18c 100644
--- a/src/reducer/initialState.js
+++ b/src/reducer/initialState.js
@@ -39,6 +39,7 @@ const initialState = {
logs: false,
logsmessage: '',
darkMode: false,
+ confirmModal: { open: false, message: '', onConfirm: null },
};
const initialGraphState = {
diff --git a/src/reducer/reducer.js b/src/reducer/reducer.js
index e7419ff..c83c5bc 100644
--- a/src/reducer/reducer.js
+++ b/src/reducer/reducer.js
@@ -73,6 +73,7 @@ const reducer = (state, action) => {
case T.ELE_SELECTED: return { ...state, eleSelected: true, eleSelectedPayload: action.payload };
case T.ELE_UNSELECTED: return { ...state, eleSelected: false };
case T.TURN_DRAW: return { ...state, drawModeOn: action.payload };
+ case T.SET_CONFIRM_MODAL: return { ...state, confirmModal: action.payload };
case T.SET_UNDO: return { ...state, undoEnabled: action.payload };
case T.SET_REDO: return { ...state, redoEnabled: action.payload };