feat: lint config & change event

Author: WindRunnerMax

.eslintrc.js

@@ -27,17 +27,11 @@ module.exports = {
   },
   ignorePatterns: ["node_modules", "build", "dist", "coverage", "public"],
   rules: {
-    // 分号
     "semi": "error",
-    // 对象键值引号样式保持一致
     "quote-props": ["error", "consistent-as-needed"],
-    // 箭头函数允许单参数不带括号
     "arrow-parens": ["error", "as-needed"],
-    // no var
     "no-var": "error",
-    // const
     "prefer-const": "error",
-    // 允许console
     "no-console": "off",
     "@typescript-eslint/consistent-type-imports": "error",
     "prefer-template": "error",

.prettierrc.js

@@ -1,17 +1,17 @@
 module.exports = {
-  "printWidth": 100, // 指定代码长度，超出换行
-  "tabWidth": 2, // tab 键的宽度
-  "useTabs": false, // 不使用tab
-  "semi": true, // 结尾加上分号
-  "singleQuote": false, // 使用单引号
-  "quoteProps": "preserve", // 不要求对象字面量属性是否使用引号包裹
-  "jsxSingleQuote": false, // jsx 语法中使用单引号
-  "trailingComma": "es5", // 确保对象的最后一个属性后有逗号
-  "bracketSpacing": true, // 大括号有空格 { name: 'rose' }
-  "arrowParens": "avoid", // 箭头函数，单个参数不强制添加括号
-  "requirePragma": false, // 是否严格按照文件顶部的特殊注释格式化代码
-  "insertPragma": false, // 是否在格式化的文件顶部插入Pragma标记，以表明该文件被prettier格式化过了
-  "proseWrap": "preserve", // 按照文件原样折行
-  "htmlWhitespaceSensitivity": "ignore", // html文件的空格敏感度，控制空格是否影响布局
-  "endOfLine": "lf" // 结尾是 \n \r \n\r auto
-}
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "preserve",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "ignore",
+  "endOfLine": "lf",
+};

package.json

@@ -22,7 +22,7 @@
     "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:circular": "madge --circular ./src"
+    "lint:circular": "madge --extensions js,jsx --circular ./dist"
   },
   "dependencies": {
     "laser-utils": "0.0.5-alpha.10",

src/core/editor.ts

@@ -4,7 +4,7 @@ import { Editor, EditorUi, Graph } from "../editor";
 import { mxEvent, mxResources } from "./mxgraph";
 import type { Language } from "../editor/i18n";
 import { getLanguage } from "../editor/i18n";
-import type { Func } from "laser-utils";
+import type { A, O, F } from "laser-utils/dist/es/types";
 
 const themes: Record<string, Node> = {};
 themes[Graph.prototype.defaultThemeName] = (
@@ -26,7 +26,7 @@ export class DiagramEditor {
   public start = (
     lang: Language,
     init?: XMLDocument | null,
-    onXMLChange?: (xml: Element) => void
+    onXMLChange?: (xml: Element, changes: A.Any) => void
   ): void => {
     this.container.appendChild(this.diagramContainer);
     this.container.style.overflow = "hidden";
@@ -36,8 +36,14 @@ export class DiagramEditor {
     if (init) {
       this.editorUi.editor.setGraphXml(init.documentElement);
     }
-    this.editor.graph.getModel().addListener(mxEvent.CHANGE, () => {
-      onXMLChange && onXMLChange(this.editorUi && this.editorUi.editor.getGraphXml());
+    this.editor.graph.getModel().addListener(mxEvent.CHANGE, (_: O.Any, event: O.Any) => {
+      if (onXMLChange) {
+        let changes: A.Any = [];
+        if (event && event.properties && event.properties.changes) {
+          changes = event.properties.changes;
+        }
+        onXMLChange(this.editorUi && this.editorUi.editor.getGraphXml(), changes);
+      }
     });
   };
 
@@ -54,7 +60,7 @@ export class DiagramEditor {
     this.container.removeChild(this.diagramContainer);
   };
 
-  public static getLang = (lang: Func.Args<typeof getLanguage>["0"]) => {
+  public static getLang = (lang: F.Args<typeof getLanguage>["0"]) => {
     return getLanguage(lang);
   };
 }

src/core/mxgraph.ts

@@ -117,8 +117,7 @@ mxCodec.prototype.decode = function (node, into) {
   if (node && node.nodeType == mxConstants.NODETYPE_ELEMENT) {
     let ctor: unknown = null;
     try {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore // 因为需要处理的`XML Node`可能不在`Window`上
+      // @ts-expect-error 需要处理的 XML Node 可能不在 Window 上
       ctor = mx[node.nodeName] || window[node.nodeName];
     } catch (error) {
       console.log(`NODE ${node.nodeName} IS NOT FOUND`, error);
@@ -172,11 +171,11 @@ mxSvgCanvas2D.prototype.createClip = function (x2, y2, w3, h3) {
   y2 = Math.round(y2);
   w3 = Math.round(w3);
   h3 = Math.round(h3);
-  const id = "mx-clip-" + x2 + "-" + y2 + "-" + w3 + "-" + h3;
+  const id = `mx-clip-${x2}-${y2}-${w3}-${h3}`;
   let counter = 0;
-  let tmp = id + "-" + counter;
+  let tmp = `${id}-${counter}`;
   while (document.getElementById(tmp) != null) {
-    tmp = id + "-" + ++counter;
+    tmp = `${id}-${++counter}`;
   }
   const clip = this.createElement("clipPath");
   clip.setAttribute("id", tmp);