Compare commits

..

3 Commits

  1. 2
      package.json
  2. 42
      src/editor/Catalog/index.tsx
  3. 4
      src/editor/Catalog/style.less
  4. 46
      src/editor/index.less
  5. 27
      src/store/actions/index.ts
  6. 1
      src/store/reducers/map/index.ts
  7. 10
      yarn.lock

2
package.json

@ -25,6 +25,7 @@
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"spark-md5": "^3.0.2",
"uid": "^2.0.0"
},
"devDependencies": {
@ -33,6 +34,7 @@
"@types/lodash": "^4.14.179",
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"@types/spark-md5": "^3.0.2",
"@vitejs/plugin-react": "^1.0.7",
"eslint": "^8.7.0",
"eslint-config-prettier": "^8.3.0",

42
src/editor/Catalog/index.tsx

@ -63,26 +63,28 @@ const Catalog = () => {
});
return (
<Collapse
defaultActiveKey={["1", "2", "3", "4", "5"]}
expandIconPosition="right"
>
<Panel header="矩形" key={1}>
<OverlayList overlays={rectangles} />
</Panel>
<Panel header="多边形" key={2}>
<OverlayList overlays={polygons} />
</Panel>
<Panel header="多段线" key={3}>
<OverlayList overlays={polylines} />
</Panel>
<Panel header="圆形" key={4}>
<OverlayList overlays={circles} />
</Panel>
<Panel header="标记点" key={5}>
<OverlayList overlays={points} />
</Panel>
</Collapse>
<div className="catalog-wrapper">
<Collapse
defaultActiveKey={["1", "2", "3", "4", "5"]}
expandIconPosition="right"
>
<Panel header="矩形" key={1}>
<OverlayList overlays={rectangles} />
</Panel>
<Panel header="多边形" key={2}>
<OverlayList overlays={polygons} />
</Panel>
<Panel header="多段线" key={3}>
<OverlayList overlays={polylines} />
</Panel>
<Panel header="圆形" key={4}>
<OverlayList overlays={circles} />
</Panel>
<Panel header="标记点" key={5}>
<OverlayList overlays={points} />
</Panel>
</Collapse>
</div>
);
};

4
src/editor/Catalog/style.less

@ -17,3 +17,7 @@
.overlay-item-selected {
background-color: #e5e6e7;
}
.catalog-wrapper{
height: 100%;
overflow-y: scroll;
}

46
src/editor/index.less

@ -19,3 +19,49 @@
#mapStage {
height: 100%;
}
// ----------------------------- scroll thumb ---------------------
body {
user-select: none;
/*---滚动条大小--*/
/*---滚动条默认显示样式--*/
/*---鼠标点击滚动条显示样式--*/
/*---滚动框背景样式--*/
/* 滚动条的滑轨背景颜色 */
/* 滑块颜色 */
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
}
body ::-webkit-scrollbar {
width: 8px;
height: 8px;
background: white;
border-left: 1px solid #e8e8e8;
}
body #node-editor-graph-root input {
color: #2b2b2b;
}
body ::-webkit-scrollbar-thumb {
border-width: 1px;
border-style: solid;
border-color: #e4e4e4;
border-radius: 6px;
background: #c9c9c9;
}
body ::-webkit-scrollbar-thumb:hover {
background-color: #c6c6c6;
}
body ::-webkit-scrollbar-track-piece {
border-radius: 0;
}
body ::-webkit-scrollbar-track {
background-color: #e4e4e4;
}
body ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
body ::-webkit-scrollbar-corner {
background-color: #eee;
}
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

27
src/store/actions/index.ts

@ -1,6 +1,7 @@
import { IMapEditor } from "@map";
import { Action } from "redux";
import { message, Modal } from "antd";
import SparkMD5 from "spark-md5";
import {
registerHotkey,
downloadJSON,
@ -25,6 +26,7 @@ export class EditorAction {
mapEditor: IMapEditor | null = null;
store: IStore;
id: string;
tempId: string = "";
autoSaveTimer: number = -1;
constructor(store: IStore) {
@ -63,7 +65,11 @@ export class EditorAction {
this._openProject(JSON.parse(cached));
}
this.autoSaveTimer = setTimeout(() => this.saveTemp(), AutoCacheInterval);
// 自动的不强制save
this.autoSaveTimer = setTimeout(
() => this.saveTemp(false),
AutoCacheInterval
);
}
// ---------- public methods -------------
@ -127,11 +133,21 @@ export class EditorAction {
downloadJSON(mapOptions, "fine.fgd");
}
async saveTemp() {
async saveTemp(forceSave = true) {
clearTimeout(this.autoSaveTimer);
await setItem(this.id, JSON.stringify(this._getMapOptions()));
message.success("暂存成功~");
this.autoSaveTimer = setTimeout(() => this.saveTemp(), AutoCacheInterval);
const tempContent = JSON.stringify(this._getMapOptions());
const tempId = SparkMD5.hash(tempContent);
const hasChanged = this.tempId !== tempId;
this.tempId = tempId;
if (hasChanged || forceSave) {
await setItem(this.id, tempContent);
message.success("暂存成功~");
}
this.autoSaveTimer = setTimeout(
() => this.saveTemp(false),
AutoCacheInterval
);
}
clearOverlays() {
@ -153,7 +169,6 @@ export class EditorAction {
const id = this.mapEditor?.copyOverlay(seletedOverlay);
if (id) {
message.success("复制成功!");
this.selectOverlay(id);
}
}

1
src/store/reducers/map/index.ts

@ -34,7 +34,6 @@ export function finishEditOverlay(state = initState, payload: any) {
const { overlays } = draft.map;
const existed = overlays.find((overlay) => overlay.id === id);
if (existed) {
console.log(overlay);
overlays[overlays.indexOf(existed)] = {
...existed,
...overlay,

10
yarn.lock

@ -2535,6 +2535,11 @@
resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
"@types/spark-md5@^3.0.2":
version "3.0.2"
resolved "https://registry.npmmirror.com/@types/spark-md5/-/spark-md5-3.0.2.tgz#da2e8a778a20335fc4f40b6471c4b0d86b70da55"
integrity sha512-82E/lVRaqelV9qmRzzJ1PKTpyrpnT7mwdneKNJB9hUtypZDMggloDfFUCIqRRx3lYRxteCwXSq9c+W71Vf0QnQ==
"@typescript-eslint/eslint-plugin@^5.5.0":
version "5.14.0"
resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.14.0.tgz#5119b67152356231a0e24b998035288a9cd21335"
@ -5572,6 +5577,11 @@ sourcemap-codec@^1.4.8:
resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
spark-md5@^3.0.2:
version "3.0.2"
resolved "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
splaytree@^3.1.0:
version "3.1.0"
resolved "https://registry.npmmirror.com/splaytree/-/splaytree-3.1.0.tgz#17d4a0108a6da3627579690b7b847241e18ddec8"

Loading…
Cancel
Save