fix: sidebar circular dependency

Author: WindRunnerMax

.eslintrc.js

@@ -39,8 +39,7 @@ module.exports = {
     "prefer-const": "error",
     // 允许console
     "no-console": "off",
-    // 关闭每个函数都要显式声明返回值
-    // "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/consistent-type-imports": "error",
+    "prefer-template": "error",
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "embed-drawio",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "files": [
     "dist",
     "pnpm-lock.yaml"
@@ -21,14 +21,14 @@
     "build:dist": "rm -rf ./dist && npm run build:es && npm run build:lib && npm run build:css",
     "lint:es": "eslint --fix --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore .",
     "lint:style": "stylelint \"**/*.{css,scss,sass}\" --fix --ignore-path .gitignore",
-    "lint": "npm run lint-es && npm run lint-style"
+    "lint": "npm run lint-es && npm run lint-style",
+    "lint:circular": "madge --circular ./src"
   },
   "dependencies": {
     "laser-utils": "0.0.5-alpha.10",
     "mxgraph": "4.2.2",
     "pako": "1.0.6",
-    "sanitize-html": "2.7.3",
-    "sanitizer": "0.1.3"
+    "sanitize-html": "2.7.3"
   },
   "devDependencies": {
     "@typed-mxgraph/typed-mxgraph": "1.0.7",
@@ -44,9 +44,9 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.27.0",
     "eslint-plugin-react-hooks": "4.3.0",
-    "gulp": "^5.0.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-concat": "^2.6.1",
+    "gulp": "5.0.0",
+    "gulp-clean-css": "4.3.0",
+    "gulp-concat": "2.6.1",
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-app-rewired": "2.1.8",

pnpm-lock.yaml

@@ -17,7 +17,7 @@ import {
 import { Editor, Dialog, FilenameDialog } from "./Editor";
 import { mxJSColor, mxColor } from "../jscolor/jscolor";
 import { EditorUi } from "./EditorUi";
-import { PRESENT_COLORS, DEFAULT_COLORS } from "../constant";
+import { PRESENT_COLORS, DEFAULT_COLORS } from "../utils/constant";
 
 export { ColorDialog, OutlineWindow, LayersWindow };
 

src/editor/js/Dialogs.js

@@ -61,7 +61,6 @@ import {
   mxGeometry,
 } from "../../core/mxgraph";
 import { Editor } from "./Editor";
-import { Sidebar } from "./Sidebar";
 import { getStencil } from "../stencils";
 
 import pako from "pako";
@@ -9723,13 +9722,6 @@ if (typeof mxVertexHandler != "undefined") {
     mxEdgeHandler.prototype.labelHandleImage = HoverIcons.prototype.secondaryHandle;
     mxOutline.prototype.sizerImage = HoverIcons.prototype.mainHandle;
 
-    Sidebar.prototype.triangleUp = HoverIcons.prototype.triangleUp;
-    Sidebar.prototype.triangleRight = HoverIcons.prototype.triangleRight;
-    Sidebar.prototype.triangleDown = HoverIcons.prototype.triangleDown;
-    Sidebar.prototype.triangleLeft = HoverIcons.prototype.triangleLeft;
-    Sidebar.prototype.refreshTarget = HoverIcons.prototype.refreshTarget;
-    Sidebar.prototype.roundDrop = HoverIcons.prototype.roundDrop;
-
     // Pre-fetches images (only needed for non data-uris)
     new Image().src = HoverIcons.prototype.mainHandle.src;
     new Image().src = HoverIcons.prototype.fixedHandle.src;

src/editor/js/Graph.js

@@ -20,11 +20,20 @@ import {
   mxCodec,
   mxGraphModel,
 } from "../../core/mxgraph";
-import { Graph, HoverIcons } from "./Graph";
+import { Graph } from "./Graph";
 import { Editor, Dialog } from "./Editor";
 import { getStencil } from "../stencils";
 import Gear_128x128 from "../stencils/clipart/Gear_128x128";
 import { collapsedImage, expandedImage, searchImage } from "../images/base64";
+import {
+  REFRESH_TARGET_IMAGE,
+  ROUND_DROP_IMAGE,
+  TRIANGLE_DOWN_IMAGE,
+  TRIANGLE_LEFT_IMAGE,
+  TRIANGLE_RIGHT_IMAGE,
+  TRIANGLE_UP_IMAGE,
+} from "../utils/graph";
+import { GRAPH } from "../utils/constant";
 
 export { Sidebar };
 
@@ -115,6 +124,13 @@ function Sidebar(editorUi, container) {
   this.init();
 }
 
+Sidebar.prototype.triangleUp = TRIANGLE_UP_IMAGE;
+Sidebar.prototype.triangleRight = TRIANGLE_RIGHT_IMAGE;
+Sidebar.prototype.triangleDown = TRIANGLE_DOWN_IMAGE;
+Sidebar.prototype.triangleLeft = TRIANGLE_LEFT_IMAGE;
+Sidebar.prototype.refreshTarget = REFRESH_TARGET_IMAGE;
+Sidebar.prototype.roundDrop = ROUND_DROP_IMAGE;
+
 /**
  * Adds all palettes to the sidebar.
  */
@@ -4386,7 +4402,7 @@ Sidebar.prototype.createDragSource = function (elt, dropHandler, preview, cells,
       arrow.setAttribute("title", tooltip);
     }
 
-    mxUtils.setOpacity(arrow, img == HoverIcons.prototype.refreshTarget ? 30 : 20);
+    mxUtils.setOpacity(arrow, img == REFRESH_TARGET_IMAGE ? 30 : 20);
     arrow.style.position = "absolute";
     arrow.style.cursor = "crosshair";
 
@@ -4724,7 +4740,7 @@ Sidebar.prototype.createDragSource = function (elt, dropHandler, preview, cells,
         }
 
         bds.grow(this.graph.tolerance);
-        bds.grow(HoverIcons.prototype.arrowSpacing);
+        bds.grow(GRAPH.ARROW_SPACING);
 
         var handler = this.graph.selectionCellsHandler.getHandler(currentTargetState.cell);
 
@@ -4878,7 +4894,7 @@ Sidebar.prototype.createDragSource = function (elt, dropHandler, preview, cells,
           }
 
           bds.grow(this.graph.tolerance);
-          bds.grow(HoverIcons.prototype.arrowSpacing);
+          bds.grow(GRAPH.ARROW_SPACING);
 
           var handler = this.graph.selectionCellsHandler.getHandler(state.cell);
 

src/editor/js/Sidebar.js

@@ -1,3 +1,8 @@
+export const GRAPH = {
+  ARROW_FILL: "#29b6f2",
+  ARROW_SPACING: 2,
+};
+
 export const PRESENT_COLORS = [
   "E6D0DE",
   "CDA2BE",

src/editor/constant.ts src/editor/utils/constant.tssrc/editor/constant.ts renamed to src/editor/utils/constant.ts

@@ -0,0 +1,54 @@
+import { mxImage } from "../../core/mxgraph";
+import { refreshTarget } from "../images/base64";
+import { GRAPH } from "./constant";
+
+export const createSvgImage = (
+  w: number,
+  h: number,
+  data: string,
+  coordWidth?: string,
+  coordHeight?: string
+) => {
+  const viewBox = coordWidth && coordHeight ? `viewBox="0 0 ${coordWidth} ${coordHeight}"` : "";
+  const tmp = unescape(
+    encodeURIComponent(
+      `${
+        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
+        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="'
+      }${w}px" height="${h}px" ${viewBox} version="1.1">${data}</svg>`
+    )
+  );
+  return new mxImage(`data:image/svg+xml;base64,${btoa(tmp)}`, w, h);
+};
+
+export const TRIANGLE_UP_IMAGE = createSvgImage(
+  18,
+  28,
+  `<path d="m 6 26 L 12 26 L 12 12 L 18 12 L 9 1 L 1 12 L 6 12 z" stroke="#fff" fill="${GRAPH.ARROW_FILL}"/>`
+);
+
+export const TRIANGLE_RIGHT_IMAGE = createSvgImage(
+  26,
+  18,
+  `<path d="m 1 6 L 14 6 L 14 1 L 26 9 L 14 18 L 14 12 L 1 12 z" stroke="#fff" fill="${GRAPH.ARROW_FILL}"/>`
+);
+
+export const TRIANGLE_DOWN_IMAGE = createSvgImage(
+  18,
+  26,
+  `<path d="m 6 1 L 6 14 L 1 14 L 9 26 L 18 14 L 12 14 L 12 1 z" stroke="#fff" fill="${GRAPH.ARROW_FILL}"/>`
+);
+
+export const TRIANGLE_LEFT_IMAGE = createSvgImage(
+  28,
+  18,
+  `<path d="m 1 9 L 12 1 L 12 6 L 26 6 L 26 12 L 12 12 L 12 18 z" stroke="#fff" fill="${GRAPH.ARROW_FILL}"/>`
+);
+
+export const REFRESH_TARGET_IMAGE = new mxImage(refreshTarget, 38, 38);
+
+export const ROUND_DROP_IMAGE = createSvgImage(
+  26,
+  26,
+  `<circle cx="13" cy="13" r="12" stroke="#fff" fill="${GRAPH.ARROW_FILL}"/>`
+);

src/editor/utils/graph.ts

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "module": "commonjs",
     "outDir": "dist/lib",
     "declarationDir": "dist/lib"
   },