diff --git a/package-lock.json b/package-lock.json
index c21e206a..6f4272b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"driver.js": "^1.3.1",
 				"echarts": "^5.5.1",
 				"element-plus": "^2.4.2",
+				"fabric-with-all": "^5.3.1",
 				"file-saver": "^2.0.5",
 				"fingerprintjs2": "^2.1.4",
 				"gsap": "^3.12.5",
@@ -2013,6 +2014,38 @@
 			"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
 			"dev": true
 		},
+		"node_modules/@mapbox/node-pre-gyp": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmmirror.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+			"integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"make-dir": "^3.1.0",
+				"node-fetch": "^2.6.7",
+				"nopt": "^5.0.0",
+				"npmlog": "^5.0.1",
+				"rimraf": "^3.0.2",
+				"semver": "^7.3.5",
+				"tar": "^6.1.11"
+			},
+			"bin": {
+				"node-pre-gyp": "bin/node-pre-gyp"
+			}
+		},
+		"node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
+			"version": "7.7.2",
+			"resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz",
+			"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+			"optional": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/@node-ipc/js-queue": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -2216,6 +2249,15 @@
 			"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
 			"dev": true
 		},
+		"node_modules/@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+			"optional": true,
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/@trysound/sax": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3653,6 +3695,19 @@
 			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
 			"dev": true
 		},
+		"node_modules/abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+			"deprecated": "Use your platform's native atob() and btoa() methods instead",
+			"optional": true
+		},
+		"node_modules/abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+			"optional": true
+		},
 		"node_modules/accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
@@ -3670,7 +3725,7 @@
 			"version": "8.11.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
 			"integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
-			"dev": true,
+			"devOptional": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -3678,6 +3733,37 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/acorn-globals": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmmirror.com/acorn-globals/-/acorn-globals-6.0.0.tgz",
+			"integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+			"optional": true,
+			"dependencies": {
+				"acorn": "^7.1.1",
+				"acorn-walk": "^7.1.1"
+			}
+		},
+		"node_modules/acorn-globals/node_modules/acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"optional": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-globals/node_modules/acorn-walk": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-7.2.0.tgz",
+			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+			"optional": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/acorn-import-assertions": {
 			"version": "1.8.0",
 			"resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
@@ -3714,6 +3800,18 @@
 				"node": ">= 10.0.0"
 			}
 		},
+		"node_modules/agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"optional": true,
+			"dependencies": {
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
 		"node_modules/ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -3804,7 +3902,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -3874,12 +3972,32 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/aproba": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/aproba/-/aproba-2.0.0.tgz",
+			"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+			"optional": true
+		},
 		"node_modules/arch": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmmirror.com/arch/-/arch-2.2.0.tgz",
 			"integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
 			"dev": true
 		},
+		"node_modules/are-we-there-yet": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+			"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+			"deprecated": "This package is no longer supported.",
+			"optional": true,
+			"dependencies": {
+				"delegates": "^1.0.0",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/argparse": {
 			"version": "1.0.10",
 			"resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -4094,7 +4212,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/base64-arraybuffer": {
 			"version": "1.0.2",
@@ -4221,7 +4339,7 @@
 			"version": "1.1.11",
 			"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -4239,6 +4357,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/browser-process-hrtime": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+			"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+			"optional": true
+		},
 		"node_modules/browserslist": {
 			"version": "4.21.3",
 			"resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.3.tgz",
@@ -4338,6 +4462,21 @@
 			"integrity": "sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==",
 			"dev": true
 		},
+		"node_modules/canvas": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmmirror.com/canvas/-/canvas-2.11.2.tgz",
+			"integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+			"hasInstallScript": true,
+			"optional": true,
+			"dependencies": {
+				"@mapbox/node-pre-gyp": "^1.0.0",
+				"nan": "^2.17.0",
+				"simple-get": "^3.0.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/case-sensitive-paths-webpack-plugin": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -4402,6 +4541,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/chownr": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/chrome-trace-event": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -4598,6 +4746,15 @@
 			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
 			"dev": true
 		},
+		"node_modules/color-support": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmmirror.com/color-support/-/color-support-1.1.3.tgz",
+			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+			"optional": true,
+			"bin": {
+				"color-support": "bin.js"
+			}
+		},
 		"node_modules/colord": {
 			"version": "2.9.3",
 			"resolved": "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz",
@@ -4690,7 +4847,7 @@
 			"version": "0.0.1",
 			"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/connect-history-api-fallback": {
 			"version": "2.0.0",
@@ -4701,6 +4858,12 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/console-control-strings": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmmirror.com/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+			"optional": true
+		},
 		"node_modules/consolidate": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
@@ -5153,11 +5316,83 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/cssom": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.5.0.tgz",
+			"integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+			"optional": true
+		},
+		"node_modules/cssstyle": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-2.3.0.tgz",
+			"integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+			"optional": true,
+			"dependencies": {
+				"cssom": "~0.3.6"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cssstyle/node_modules/cssom": {
+			"version": "0.3.8",
+			"resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.3.8.tgz",
+			"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+			"optional": true
+		},
 		"node_modules/csstype": {
 			"version": "2.6.20",
 			"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
 			"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 		},
+		"node_modules/data-urls": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-3.0.2.tgz",
+			"integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+			"optional": true,
+			"dependencies": {
+				"abab": "^2.0.6",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^11.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/data-urls/node_modules/tr46": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/tr46/-/tr46-3.0.0.tgz",
+			"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+			"optional": true,
+			"dependencies": {
+				"punycode": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/data-urls/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"optional": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/data-urls/node_modules/whatwg-url": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-11.0.0.tgz",
+			"integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+			"optional": true,
+			"dependencies": {
+				"tr46": "^3.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/dayjs": {
 			"version": "1.11.5",
 			"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz",
@@ -5167,7 +5402,7 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -5180,6 +5415,24 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.5.0",
+			"resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.5.0.tgz",
+			"integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
+			"optional": true
+		},
+		"node_modules/decompress-response": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmmirror.com/decompress-response/-/decompress-response-4.2.1.tgz",
+			"integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+			"optional": true,
+			"dependencies": {
+				"mimic-response": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -5355,6 +5608,12 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/delegates": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
+			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+			"optional": true
+		},
 		"node_modules/depd": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -5374,6 +5633,15 @@
 				"npm": "1.2.8000 || >= 1.4.16"
 			}
 		},
+		"node_modules/detect-libc": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.0.4.tgz",
+			"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/detect-node": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmmirror.com/detect-node/-/detect-node-2.1.0.tgz",
@@ -5458,6 +5726,28 @@
 			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
 			"dev": true
 		},
+		"node_modules/domexception": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/domexception/-/domexception-4.0.0.tgz",
+			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+			"deprecated": "Use your platform's native DOMException instead",
+			"optional": true,
+			"dependencies": {
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/domexception/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"optional": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/domhandler": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-4.3.1.tgz",
@@ -5581,7 +5871,7 @@
 			"version": "8.0.0",
 			"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/emojis-list": {
 			"version": "3.0.0",
@@ -5725,6 +6015,36 @@
 				"node": ">=0.8.0"
 			}
 		},
+		"node_modules/escodegen": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/escodegen/-/escodegen-2.1.0.tgz",
+			"integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+			"optional": true,
+			"dependencies": {
+				"esprima": "^4.0.1",
+				"estraverse": "^5.2.0",
+				"esutils": "^2.0.2"
+			},
+			"bin": {
+				"escodegen": "bin/escodegen.js",
+				"esgenerate": "bin/esgenerate.js"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"optionalDependencies": {
+				"source-map": "~0.6.1"
+			}
+		},
+		"node_modules/escodegen/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"optional": true,
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
 		"node_modules/eslint": {
 			"version": "7.32.0",
 			"resolved": "https://registry.npmmirror.com/eslint/-/eslint-7.32.0.tgz",
@@ -6227,7 +6547,7 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmmirror.com/esprima/-/esprima-4.0.1.tgz",
 			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-			"dev": true,
+			"devOptional": true,
 			"bin": {
 				"esparse": "bin/esparse.js",
 				"esvalidate": "bin/esvalidate.js"
@@ -6296,7 +6616,7 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
 			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -6421,6 +6741,18 @@
 			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
 			"dev": true
 		},
+		"node_modules/fabric-with-all": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmmirror.com/fabric-with-all/-/fabric-with-all-5.3.1.tgz",
+			"integrity": "sha512-pIuRzxDA0IPh3TI6GnKR1mHwhj14rSRMIQC2kFKWtaLPPbGfTdiKSYPDEYbE+ivumlpDwuuFiXRy28wDU+mtcg==",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"optionalDependencies": {
+				"canvas": "^2.8.0",
+				"jsdom": "^19.0.0"
+			}
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6820,6 +7152,18 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/fs-minipass": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+			"optional": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/fs-monkey": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -6830,7 +7174,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.2",
@@ -6858,6 +7202,27 @@
 			"integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
 			"dev": true
 		},
+		"node_modules/gauge": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmmirror.com/gauge/-/gauge-3.0.2.tgz",
+			"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+			"deprecated": "This package is no longer supported.",
+			"optional": true,
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.2",
+				"console-control-strings": "^1.0.0",
+				"has-unicode": "^2.0.1",
+				"object-assign": "^4.1.1",
+				"signal-exit": "^3.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/gensync": {
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -6903,7 +7268,7 @@
 			"version": "7.2.3",
 			"resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
 				"inflight": "^1.0.4",
@@ -7028,6 +7393,12 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/has-unicode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+			"optional": true
+		},
 		"node_modules/hash-sum": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -7094,6 +7465,18 @@
 				"safe-buffer": "~5.1.0"
 			}
 		},
+		"node_modules/html-encoding-sniffer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"optional": true,
+			"dependencies": {
+				"whatwg-encoding": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/html-entities": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.3.3.tgz",
@@ -7224,6 +7607,20 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"optional": true,
+			"dependencies": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/http-proxy-middleware": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
@@ -7248,6 +7645,19 @@
 				}
 			}
 		},
+		"node_modules/https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"optional": true,
+			"dependencies": {
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
@@ -7340,7 +7750,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -7438,7 +7848,7 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -7494,6 +7904,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+			"optional": true
+		},
 		"node_modules/is-stream": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -7631,6 +8047,113 @@
 				"js-yaml": "bin/js-yaml.js"
 			}
 		},
+		"node_modules/jsdom": {
+			"version": "19.0.0",
+			"resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-19.0.0.tgz",
+			"integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==",
+			"optional": true,
+			"dependencies": {
+				"abab": "^2.0.5",
+				"acorn": "^8.5.0",
+				"acorn-globals": "^6.0.0",
+				"cssom": "^0.5.0",
+				"cssstyle": "^2.3.0",
+				"data-urls": "^3.0.1",
+				"decimal.js": "^10.3.1",
+				"domexception": "^4.0.0",
+				"escodegen": "^2.0.0",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.0",
+				"parse5": "6.0.1",
+				"saxes": "^5.0.1",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.0.0",
+				"w3c-hr-time": "^1.0.2",
+				"w3c-xmlserializer": "^3.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^2.0.0",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^10.0.0",
+				"ws": "^8.2.3",
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"canvas": "^2.5.0"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jsdom/node_modules/parse5": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz",
+			"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+			"optional": true
+		},
+		"node_modules/jsdom/node_modules/tr46": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/tr46/-/tr46-3.0.0.tgz",
+			"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+			"optional": true,
+			"dependencies": {
+				"punycode": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jsdom/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"optional": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jsdom/node_modules/whatwg-url": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-10.0.0.tgz",
+			"integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
+			"optional": true,
+			"dependencies": {
+				"tr46": "^3.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jsdom/node_modules/ws": {
+			"version": "8.18.2",
+			"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.2.tgz",
+			"integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/jsesc": {
 			"version": "2.5.2",
 			"resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -8215,7 +8738,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
 			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"semver": "^6.0.0"
 			},
@@ -8363,6 +8886,18 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/mimic-response": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/mimic-response/-/mimic-response-2.1.0.tgz",
+			"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/mini-css-extract-plugin": {
 			"version": "2.6.1",
 			"resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
@@ -8433,7 +8968,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
 			},
@@ -8451,7 +8986,7 @@
 			"version": "3.3.4",
 			"resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.4.tgz",
 			"integrity": "sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -8459,6 +8994,19 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/minizlib": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmmirror.com/minizlib/-/minizlib-2.1.2.tgz",
+			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+			"optional": true,
+			"dependencies": {
+				"minipass": "^3.0.0",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -8490,7 +9038,7 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/multicast-dns": {
 			"version": "7.2.5",
@@ -8516,6 +9064,12 @@
 				"thenify-all": "^1.0.0"
 			}
 		},
+		"node_modules/nan": {
+			"version": "2.22.2",
+			"resolved": "https://registry.npmmirror.com/nan/-/nan-2.22.2.tgz",
+			"integrity": "sha512-DANghxFkS1plDdRsX0X9pm0Z6SJNN6gBdtXfanwoZ8hooC5gosGFSBGRYHUVPz1asKA/kMRqDRdHrluZ61SpBQ==",
+			"optional": true
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
@@ -8614,7 +9168,7 @@
 			"version": "2.6.7",
 			"resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.6.7.tgz",
 			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"whatwg-url": "^5.0.0"
 			},
@@ -8645,6 +9199,21 @@
 			"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
 			"dev": true
 		},
+		"node_modules/nopt": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/nopt/-/nopt-5.0.0.tgz",
+			"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+			"optional": true,
+			"dependencies": {
+				"abbrev": "1"
+			},
+			"bin": {
+				"nopt": "bin/nopt.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/normalize-package-data": {
 			"version": "2.5.0",
 			"resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -8710,6 +9279,19 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/npmlog": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/npmlog/-/npmlog-5.0.1.tgz",
+			"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+			"deprecated": "This package is no longer supported.",
+			"optional": true,
+			"dependencies": {
+				"are-we-there-yet": "^2.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^3.0.0",
+				"set-blocking": "^2.0.0"
+			}
+		},
 		"node_modules/nth-check": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -8719,11 +9301,17 @@
 				"boolbase": "^1.0.0"
 			}
 		},
+		"node_modules/nwsapi": {
+			"version": "2.2.20",
+			"resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.20.tgz",
+			"integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
+			"optional": true
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -8789,7 +9377,7 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"wrappy": "1"
 			}
@@ -9089,7 +9677,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -9831,6 +10419,18 @@
 			"integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
 			"dev": true
 		},
+		"node_modules/psl": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmmirror.com/psl/-/psl-1.15.0.tgz",
+			"integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+			"optional": true,
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/lupomontero"
+			}
+		},
 		"node_modules/pump": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -9842,10 +10442,10 @@
 			}
 		},
 		"node_modules/punycode": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz",
-			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-			"dev": true,
+			"version": "2.3.1",
+			"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"devOptional": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -9870,6 +10470,12 @@
 				"node": ">=0.10.21"
 			}
 		},
+		"node_modules/querystringify": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz",
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+			"optional": true
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -9960,7 +10566,7 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.0.tgz",
 			"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"inherits": "^2.0.3",
 				"string_decoder": "^1.1.1",
@@ -10111,7 +10717,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
 			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/resize-observer-polyfill": {
 			"version": "1.5.1",
@@ -10177,7 +10783,7 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
 			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"glob": "^7.1.3"
 			},
@@ -10203,7 +10809,7 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/sax": {
 			"version": "1.2.4",
@@ -10212,6 +10818,18 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/saxes": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/saxes/-/saxes-5.0.1.tgz",
+			"integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+			"optional": true,
+			"dependencies": {
+				"xmlchars": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/schema-utils": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -10256,7 +10874,7 @@
 			"version": "6.3.0",
 			"resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
 			"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-			"dev": true,
+			"devOptional": true,
 			"bin": {
 				"semver": "bin/semver.js"
 			}
@@ -10408,6 +11026,12 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"optional": true
+		},
 		"node_modules/setimmediate": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -10478,7 +11102,38 @@
 			"version": "3.0.7",
 			"resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-			"dev": true
+			"devOptional": true
+		},
+		"node_modules/simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"optional": true
+		},
+		"node_modules/simple-get": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmmirror.com/simple-get/-/simple-get-3.1.1.tgz",
+			"integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+			"optional": true,
+			"dependencies": {
+				"decompress-response": "^4.2.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
+			}
 		},
 		"node_modules/sirv": {
 			"version": "1.0.19",
@@ -10700,7 +11355,7 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
 			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"safe-buffer": "~5.2.0"
 			}
@@ -10709,13 +11364,13 @@
 			"version": "5.2.1",
 			"resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
 			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/string-width": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
 			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"emoji-regex": "^8.0.0",
 				"is-fullwidth-code-point": "^3.0.0",
@@ -10729,7 +11384,7 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
 			},
@@ -10896,6 +11551,12 @@
 				"node": ">= 4.7.0"
 			}
 		},
+		"node_modules/symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+			"optional": true
+		},
 		"node_modules/table": {
 			"version": "6.8.0",
 			"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
@@ -10939,6 +11600,44 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tar": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmmirror.com/tar/-/tar-6.2.1.tgz",
+			"integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+			"optional": true,
+			"dependencies": {
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
+				"minipass": "^5.0.0",
+				"minizlib": "^2.1.1",
+				"mkdirp": "^1.0.3",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/tar/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/tar/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+			"optional": true,
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/terser": {
 			"version": "5.14.2",
 			"resolved": "https://registry.npmmirror.com/terser/-/terser-5.14.2.tgz",
@@ -11139,11 +11838,35 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tough-cookie": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.4.tgz",
+			"integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+			"optional": true,
+			"dependencies": {
+				"psl": "^1.1.33",
+				"punycode": "^2.1.1",
+				"universalify": "^0.2.0",
+				"url-parse": "^1.5.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/tough-cookie/node_modules/universalify": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
+			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+			"optional": true,
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
 		"node_modules/tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/ts-loader": {
 			"version": "9.3.1",
@@ -11451,6 +12174,16 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"optional": true,
+			"dependencies": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11837,6 +12570,28 @@
 				"vue": "^3.0.2"
 			}
 		},
+		"node_modules/w3c-hr-time": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+			"integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+			"deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
+			"optional": true,
+			"dependencies": {
+				"browser-process-hrtime": "^1.0.0"
+			}
+		},
+		"node_modules/w3c-xmlserializer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
+			"integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
+			"optional": true,
+			"dependencies": {
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/warning": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
@@ -11880,7 +12635,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/webpack": {
 			"version": "5.74.0",
@@ -12304,17 +13059,50 @@
 				"node": ">=0.8.0"
 			}
 		},
+		"node_modules/whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"optional": true,
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-encoding/node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"optional": true,
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/whatwg-fetch": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
 			"integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==",
 			"dev": true
 		},
+		"node_modules/whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"optional": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
 			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"tr46": "~0.0.3",
 				"webidl-conversions": "^3.0.0"
@@ -12332,6 +13120,15 @@
 				"which": "bin/which"
 			}
 		},
+		"node_modules/wide-align": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmmirror.com/wide-align/-/wide-align-1.1.5.tgz",
+			"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+			"optional": true,
+			"dependencies": {
+				"string-width": "^1.0.2 || 2 || 3 || 4"
+			}
+		},
 		"node_modules/wildcard": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
@@ -12395,7 +13192,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/ws": {
 			"version": "7.5.9",
@@ -12418,6 +13215,21 @@
 				}
 			}
 		},
+		"node_modules/xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"optional": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+			"optional": true
+		},
 		"node_modules/y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
@@ -12431,7 +13243,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/yaml": {
 			"version": "1.10.2",
@@ -13957,6 +14769,31 @@
 			"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
 			"dev": true
 		},
+		"@mapbox/node-pre-gyp": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmmirror.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+			"integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+			"optional": true,
+			"requires": {
+				"detect-libc": "^2.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"make-dir": "^3.1.0",
+				"node-fetch": "^2.6.7",
+				"nopt": "^5.0.0",
+				"npmlog": "^5.0.1",
+				"rimraf": "^3.0.2",
+				"semver": "^7.3.5",
+				"tar": "^6.1.11"
+			},
+			"dependencies": {
+				"semver": {
+					"version": "7.7.2",
+					"resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz",
+					"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+					"optional": true
+				}
+			}
+		},
 		"@node-ipc/js-queue": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -14113,6 +14950,12 @@
 			"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
 			"dev": true
 		},
+		"@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+			"optional": true
+		},
 		"@trysound/sax": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
@@ -15290,6 +16133,18 @@
 			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
 			"dev": true
 		},
+		"abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+			"optional": true
+		},
+		"abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+			"optional": true
+		},
 		"accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
@@ -15304,7 +16159,31 @@
 			"version": "8.11.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
 			"integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
-			"dev": true
+			"devOptional": true
+		},
+		"acorn-globals": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmmirror.com/acorn-globals/-/acorn-globals-6.0.0.tgz",
+			"integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+			"optional": true,
+			"requires": {
+				"acorn": "^7.1.1",
+				"acorn-walk": "^7.1.1"
+			},
+			"dependencies": {
+				"acorn": {
+					"version": "7.4.1",
+					"resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+					"optional": true
+				},
+				"acorn-walk": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-7.2.0.tgz",
+					"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+					"optional": true
+				}
+			}
 		},
 		"acorn-import-assertions": {
 			"version": "1.8.0",
@@ -15332,6 +16211,15 @@
 			"integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
 			"dev": true
 		},
+		"agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"optional": true,
+			"requires": {
+				"debug": "4"
+			}
+		},
 		"ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -15402,7 +16290,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"ansi-styles": {
 			"version": "3.2.1",
@@ -15453,12 +16341,28 @@
 				"picomatch": "^2.0.4"
 			}
 		},
+		"aproba": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/aproba/-/aproba-2.0.0.tgz",
+			"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+			"optional": true
+		},
 		"arch": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmmirror.com/arch/-/arch-2.2.0.tgz",
 			"integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
 			"dev": true
 		},
+		"are-we-there-yet": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+			"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+			"optional": true,
+			"requires": {
+				"delegates": "^1.0.0",
+				"readable-stream": "^3.6.0"
+			}
+		},
 		"argparse": {
 			"version": "1.0.10",
 			"resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -15630,7 +16534,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
+			"devOptional": true
 		},
 		"base64-arraybuffer": {
 			"version": "1.0.2",
@@ -15743,7 +16647,7 @@
 			"version": "1.1.11",
 			"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -15758,6 +16662,12 @@
 				"fill-range": "^7.0.1"
 			}
 		},
+		"browser-process-hrtime": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+			"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+			"optional": true
+		},
 		"browserslist": {
 			"version": "4.21.3",
 			"resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.3.tgz",
@@ -15842,6 +16752,17 @@
 			"integrity": "sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==",
 			"dev": true
 		},
+		"canvas": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmmirror.com/canvas/-/canvas-2.11.2.tgz",
+			"integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+			"optional": true,
+			"requires": {
+				"@mapbox/node-pre-gyp": "^1.0.0",
+				"nan": "^2.17.0",
+				"simple-get": "^3.0.3"
+			}
+		},
 		"case-sensitive-paths-webpack-plugin": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -15891,6 +16812,12 @@
 				}
 			}
 		},
+		"chownr": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+			"optional": true
+		},
 		"chrome-trace-event": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -16046,6 +16973,12 @@
 			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
 			"dev": true
 		},
+		"color-support": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmmirror.com/color-support/-/color-support-1.1.3.tgz",
+			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+			"optional": true
+		},
 		"colord": {
 			"version": "2.9.3",
 			"resolved": "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz",
@@ -16128,7 +17061,7 @@
 			"version": "0.0.1",
 			"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
+			"devOptional": true
 		},
 		"connect-history-api-fallback": {
 			"version": "2.0.0",
@@ -16136,6 +17069,12 @@
 			"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
 			"dev": true
 		},
+		"console-control-strings": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmmirror.com/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+			"optional": true
+		},
 		"consolidate": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
@@ -16488,11 +17427,72 @@
 				"css-tree": "^1.1.2"
 			}
 		},
+		"cssom": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.5.0.tgz",
+			"integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+			"optional": true
+		},
+		"cssstyle": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-2.3.0.tgz",
+			"integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+			"optional": true,
+			"requires": {
+				"cssom": "~0.3.6"
+			},
+			"dependencies": {
+				"cssom": {
+					"version": "0.3.8",
+					"resolved": "https://registry.npmmirror.com/cssom/-/cssom-0.3.8.tgz",
+					"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+					"optional": true
+				}
+			}
+		},
 		"csstype": {
 			"version": "2.6.20",
 			"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
 			"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 		},
+		"data-urls": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-3.0.2.tgz",
+			"integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+			"optional": true,
+			"requires": {
+				"abab": "^2.0.6",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^11.0.0"
+			},
+			"dependencies": {
+				"tr46": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmmirror.com/tr46/-/tr46-3.0.0.tgz",
+					"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+					"optional": true,
+					"requires": {
+						"punycode": "^2.1.1"
+					}
+				},
+				"webidl-conversions": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+					"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+					"optional": true
+				},
+				"whatwg-url": {
+					"version": "11.0.0",
+					"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-11.0.0.tgz",
+					"integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+					"optional": true,
+					"requires": {
+						"tr46": "^3.0.0",
+						"webidl-conversions": "^7.0.0"
+					}
+				}
+			}
+		},
 		"dayjs": {
 			"version": "1.11.5",
 			"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz",
@@ -16502,11 +17502,26 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"ms": "2.1.2"
 			}
 		},
+		"decimal.js": {
+			"version": "10.5.0",
+			"resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.5.0.tgz",
+			"integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
+			"optional": true
+		},
+		"decompress-response": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmmirror.com/decompress-response/-/decompress-response-4.2.1.tgz",
+			"integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+			"optional": true,
+			"requires": {
+				"mimic-response": "^2.0.0"
+			}
+		},
 		"deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -16639,6 +17654,12 @@
 			"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
 			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
 		},
+		"delegates": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
+			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+			"optional": true
+		},
 		"depd": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -16651,6 +17672,12 @@
 			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
 			"dev": true
 		},
+		"detect-libc": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.0.4.tgz",
+			"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+			"optional": true
+		},
 		"detect-node": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmmirror.com/detect-node/-/detect-node-2.1.0.tgz",
@@ -16726,6 +17753,23 @@
 			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
 			"dev": true
 		},
+		"domexception": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/domexception/-/domexception-4.0.0.tgz",
+			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+			"optional": true,
+			"requires": {
+				"webidl-conversions": "^7.0.0"
+			},
+			"dependencies": {
+				"webidl-conversions": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+					"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+					"optional": true
+				}
+			}
+		},
 		"domhandler": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-4.3.1.tgz",
@@ -16839,7 +17883,7 @@
 			"version": "8.0.0",
 			"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-			"dev": true
+			"devOptional": true
 		},
 		"emojis-list": {
 			"version": "3.0.0",
@@ -16952,6 +17996,26 @@
 			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
 			"dev": true
 		},
+		"escodegen": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/escodegen/-/escodegen-2.1.0.tgz",
+			"integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+			"optional": true,
+			"requires": {
+				"esprima": "^4.0.1",
+				"estraverse": "^5.2.0",
+				"esutils": "^2.0.2",
+				"source-map": "~0.6.1"
+			},
+			"dependencies": {
+				"estraverse": {
+					"version": "5.3.0",
+					"resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+					"optional": true
+				}
+			}
+		},
 		"eslint": {
 			"version": "7.32.0",
 			"resolved": "https://registry.npmmirror.com/eslint/-/eslint-7.32.0.tgz",
@@ -17336,7 +18400,7 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmmirror.com/esprima/-/esprima-4.0.1.tgz",
 			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-			"dev": true
+			"devOptional": true
 		},
 		"esquery": {
 			"version": "1.4.0",
@@ -17387,7 +18451,7 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
 			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-			"dev": true
+			"devOptional": true
 		},
 		"etag": {
 			"version": "1.8.1",
@@ -17496,6 +18560,15 @@
 				}
 			}
 		},
+		"fabric-with-all": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmmirror.com/fabric-with-all/-/fabric-with-all-5.3.1.tgz",
+			"integrity": "sha512-pIuRzxDA0IPh3TI6GnKR1mHwhj14rSRMIQC2kFKWtaLPPbGfTdiKSYPDEYbE+ivumlpDwuuFiXRy28wDU+mtcg==",
+			"requires": {
+				"canvas": "^2.8.0",
+				"jsdom": "^19.0.0"
+			}
+		},
 		"fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -17805,6 +18878,15 @@
 				"universalify": "^2.0.0"
 			}
 		},
+		"fs-minipass": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+			"optional": true,
+			"requires": {
+				"minipass": "^3.0.0"
+			}
+		},
 		"fs-monkey": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -17815,7 +18897,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
+			"devOptional": true
 		},
 		"fsevents": {
 			"version": "2.3.2",
@@ -17836,6 +18918,23 @@
 			"integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
 			"dev": true
 		},
+		"gauge": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmmirror.com/gauge/-/gauge-3.0.2.tgz",
+			"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+			"optional": true,
+			"requires": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.2",
+				"console-control-strings": "^1.0.0",
+				"has-unicode": "^2.0.1",
+				"object-assign": "^4.1.1",
+				"signal-exit": "^3.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.2"
+			}
+		},
 		"gensync": {
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -17872,7 +18971,7 @@
 			"version": "7.2.3",
 			"resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"fs.realpath": "^1.0.0",
 				"inflight": "^1.0.4",
@@ -17973,6 +19072,12 @@
 			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
 			"dev": true
 		},
+		"has-unicode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+			"optional": true
+		},
 		"hash-sum": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -18035,6 +19140,15 @@
 				}
 			}
 		},
+		"html-encoding-sniffer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"optional": true,
+			"requires": {
+				"whatwg-encoding": "^2.0.0"
+			}
+		},
 		"html-entities": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.3.3.tgz",
@@ -18140,6 +19254,17 @@
 				"requires-port": "^1.0.0"
 			}
 		},
+		"http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"optional": true,
+			"requires": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			}
+		},
 		"http-proxy-middleware": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
@@ -18153,6 +19278,16 @@
 				"micromatch": "^4.0.2"
 			}
 		},
+		"https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"optional": true,
+			"requires": {
+				"agent-base": "6",
+				"debug": "4"
+			}
+		},
 		"human-signals": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
@@ -18219,7 +19354,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -18299,7 +19434,7 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true
+			"devOptional": true
 		},
 		"is-glob": {
 			"version": "4.0.3",
@@ -18337,6 +19472,12 @@
 				"isobject": "^3.0.1"
 			}
 		},
+		"is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+			"optional": true
+		},
 		"is-stream": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -18449,6 +19590,81 @@
 				"esprima": "^4.0.0"
 			}
 		},
+		"jsdom": {
+			"version": "19.0.0",
+			"resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-19.0.0.tgz",
+			"integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==",
+			"optional": true,
+			"requires": {
+				"abab": "^2.0.5",
+				"acorn": "^8.5.0",
+				"acorn-globals": "^6.0.0",
+				"cssom": "^0.5.0",
+				"cssstyle": "^2.3.0",
+				"data-urls": "^3.0.1",
+				"decimal.js": "^10.3.1",
+				"domexception": "^4.0.0",
+				"escodegen": "^2.0.0",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.0",
+				"parse5": "6.0.1",
+				"saxes": "^5.0.1",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.0.0",
+				"w3c-hr-time": "^1.0.2",
+				"w3c-xmlserializer": "^3.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^2.0.0",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^10.0.0",
+				"ws": "^8.2.3",
+				"xml-name-validator": "^4.0.0"
+			},
+			"dependencies": {
+				"parse5": {
+					"version": "6.0.1",
+					"resolved": "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz",
+					"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+					"optional": true
+				},
+				"tr46": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmmirror.com/tr46/-/tr46-3.0.0.tgz",
+					"integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+					"optional": true,
+					"requires": {
+						"punycode": "^2.1.1"
+					}
+				},
+				"webidl-conversions": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+					"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+					"optional": true
+				},
+				"whatwg-url": {
+					"version": "10.0.0",
+					"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-10.0.0.tgz",
+					"integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==",
+					"optional": true,
+					"requires": {
+						"tr46": "^3.0.0",
+						"webidl-conversions": "^7.0.0"
+					}
+				},
+				"ws": {
+					"version": "8.18.2",
+					"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.2.tgz",
+					"integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
+					"optional": true,
+					"requires": {}
+				}
+			}
+		},
 		"jsesc": {
 			"version": "2.5.2",
 			"resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -18926,7 +20142,7 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
 			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"semver": "^6.0.0"
 			}
@@ -19041,6 +20257,12 @@
 			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
 			"dev": true
 		},
+		"mimic-response": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmmirror.com/mimic-response/-/mimic-response-2.1.0.tgz",
+			"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+			"optional": true
+		},
 		"mini-css-extract-plugin": {
 			"version": "2.6.1",
 			"resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
@@ -19101,7 +20323,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"brace-expansion": "^1.1.7"
 			}
@@ -19116,11 +20338,21 @@
 			"version": "3.3.4",
 			"resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.4.tgz",
 			"integrity": "sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"yallist": "^4.0.0"
 			}
 		},
+		"minizlib": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmmirror.com/minizlib/-/minizlib-2.1.2.tgz",
+			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+			"optional": true,
+			"requires": {
+				"minipass": "^3.0.0",
+				"yallist": "^4.0.0"
+			}
+		},
 		"mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -19146,7 +20378,7 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"devOptional": true
 		},
 		"multicast-dns": {
 			"version": "7.2.5",
@@ -19169,6 +20401,12 @@
 				"thenify-all": "^1.0.0"
 			}
 		},
+		"nan": {
+			"version": "2.22.2",
+			"resolved": "https://registry.npmmirror.com/nan/-/nan-2.22.2.tgz",
+			"integrity": "sha512-DANghxFkS1plDdRsX0X9pm0Z6SJNN6gBdtXfanwoZ8hooC5gosGFSBGRYHUVPz1asKA/kMRqDRdHrluZ61SpBQ==",
+			"optional": true
+		},
 		"nanoid": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
@@ -19251,7 +20489,7 @@
 			"version": "2.6.7",
 			"resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.6.7.tgz",
 			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"whatwg-url": "^5.0.0"
 			}
@@ -19268,6 +20506,15 @@
 			"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
 			"dev": true
 		},
+		"nopt": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/nopt/-/nopt-5.0.0.tgz",
+			"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+			"optional": true,
+			"requires": {
+				"abbrev": "1"
+			}
+		},
 		"normalize-package-data": {
 			"version": "2.5.0",
 			"resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -19320,6 +20567,18 @@
 				"path-key": "^2.0.0"
 			}
 		},
+		"npmlog": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/npmlog/-/npmlog-5.0.1.tgz",
+			"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+			"optional": true,
+			"requires": {
+				"are-we-there-yet": "^2.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^3.0.0",
+				"set-blocking": "^2.0.0"
+			}
+		},
 		"nth-check": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -19329,11 +20588,17 @@
 				"boolbase": "^1.0.0"
 			}
 		},
+		"nwsapi": {
+			"version": "2.2.20",
+			"resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.20.tgz",
+			"integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
+			"optional": true
+		},
 		"object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-			"dev": true
+			"devOptional": true
 		},
 		"object-inspect": {
 			"version": "1.12.2",
@@ -19384,7 +20649,7 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"wrappy": "1"
 			}
@@ -19628,7 +20893,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true
+			"devOptional": true
 		},
 		"path-key": {
 			"version": "2.0.1",
@@ -20132,6 +21397,15 @@
 			"integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
 			"dev": true
 		},
+		"psl": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmmirror.com/psl/-/psl-1.15.0.tgz",
+			"integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+			"optional": true,
+			"requires": {
+				"punycode": "^2.3.1"
+			}
+		},
 		"pump": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -20143,10 +21417,10 @@
 			}
 		},
 		"punycode": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz",
-			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-			"dev": true
+			"version": "2.3.1",
+			"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"devOptional": true
 		},
 		"qs": {
 			"version": "6.10.3",
@@ -20162,6 +21436,12 @@
 			"resolved": "https://registry.npmmirror.com/quantize/-/quantize-1.0.2.tgz",
 			"integrity": "sha512-25P7wI2UoDbIQsQp50ARkt+5pwPsOq7G/BqvT5xAbapnRoNWMN8/p55H9TXd5MuENiJnm5XICB2H2aDZGwts7w=="
 		},
+		"querystringify": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz",
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+			"optional": true
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -20238,7 +21518,7 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.0.tgz",
 			"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"inherits": "^2.0.3",
 				"string_decoder": "^1.1.1",
@@ -20361,7 +21641,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
 			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"resize-observer-polyfill": {
 			"version": "1.5.1",
@@ -20411,7 +21691,7 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
 			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"glob": "^7.1.3"
 			}
@@ -20434,7 +21714,7 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true
+			"devOptional": true
 		},
 		"sax": {
 			"version": "1.2.4",
@@ -20443,6 +21723,15 @@
 			"dev": true,
 			"optional": true
 		},
+		"saxes": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmmirror.com/saxes/-/saxes-5.0.1.tgz",
+			"integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+			"optional": true,
+			"requires": {
+				"xmlchars": "^2.2.0"
+			}
+		},
 		"schema-utils": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -20481,7 +21770,7 @@
 			"version": "6.3.0",
 			"resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
 			"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-			"dev": true
+			"devOptional": true
 		},
 		"send": {
 			"version": "0.18.0",
@@ -20618,6 +21907,12 @@
 				"send": "0.18.0"
 			}
 		},
+		"set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"optional": true
+		},
 		"setimmediate": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -20679,7 +21974,24 @@
 			"version": "3.0.7",
 			"resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-			"dev": true
+			"devOptional": true
+		},
+		"simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"optional": true
+		},
+		"simple-get": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmmirror.com/simple-get/-/simple-get-3.1.1.tgz",
+			"integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+			"optional": true,
+			"requires": {
+				"decompress-response": "^4.2.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
+			}
 		},
 		"sirv": {
 			"version": "1.0.19",
@@ -20872,7 +22184,7 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
 			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"safe-buffer": "~5.2.0"
 			},
@@ -20881,7 +22193,7 @@
 					"version": "5.2.1",
 					"resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
 					"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-					"dev": true
+					"devOptional": true
 				}
 			}
 		},
@@ -20889,7 +22201,7 @@
 			"version": "4.2.3",
 			"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
 			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"emoji-regex": "^8.0.0",
 				"is-fullwidth-code-point": "^3.0.0",
@@ -20900,7 +22212,7 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"ansi-regex": "^5.0.1"
 			}
@@ -21013,6 +22325,12 @@
 			"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
 			"integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA=="
 		},
+		"symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+			"optional": true
+		},
 		"table": {
 			"version": "6.8.0",
 			"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
@@ -21052,6 +22370,34 @@
 			"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
 			"dev": true
 		},
+		"tar": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmmirror.com/tar/-/tar-6.2.1.tgz",
+			"integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+			"optional": true,
+			"requires": {
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
+				"minipass": "^5.0.0",
+				"minizlib": "^2.1.1",
+				"mkdirp": "^1.0.3",
+				"yallist": "^4.0.0"
+			},
+			"dependencies": {
+				"minipass": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmmirror.com/minipass/-/minipass-5.0.0.tgz",
+					"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+					"optional": true
+				},
+				"mkdirp": {
+					"version": "1.0.4",
+					"resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz",
+					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+					"optional": true
+				}
+			}
+		},
 		"terser": {
 			"version": "5.14.2",
 			"resolved": "https://registry.npmmirror.com/terser/-/terser-5.14.2.tgz",
@@ -21205,11 +22551,31 @@
 			"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
 			"dev": true
 		},
+		"tough-cookie": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.4.tgz",
+			"integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+			"optional": true,
+			"requires": {
+				"psl": "^1.1.33",
+				"punycode": "^2.1.1",
+				"universalify": "^0.2.0",
+				"url-parse": "^1.5.3"
+			},
+			"dependencies": {
+				"universalify": {
+					"version": "0.2.0",
+					"resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
+					"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+					"optional": true
+				}
+			}
+		},
 		"tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-			"dev": true
+			"devOptional": true
 		},
 		"ts-loader": {
 			"version": "9.3.1",
@@ -21445,6 +22811,16 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"optional": true,
+			"requires": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
 		"util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -21753,6 +23129,24 @@
 				"@vue/devtools-api": "^6.0.0-beta.11"
 			}
 		},
+		"w3c-hr-time": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+			"integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+			"optional": true,
+			"requires": {
+				"browser-process-hrtime": "^1.0.0"
+			}
+		},
+		"w3c-xmlserializer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz",
+			"integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==",
+			"optional": true,
+			"requires": {
+				"xml-name-validator": "^4.0.0"
+			}
+		},
 		"warning": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
@@ -21793,7 +23187,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"webpack": {
 			"version": "5.74.0",
@@ -22122,17 +23516,43 @@
 			"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
 			"dev": true
 		},
+		"whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"optional": true,
+			"requires": {
+				"iconv-lite": "0.6.3"
+			},
+			"dependencies": {
+				"iconv-lite": {
+					"version": "0.6.3",
+					"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+					"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+					"optional": true,
+					"requires": {
+						"safer-buffer": ">= 2.1.2 < 3.0.0"
+					}
+				}
+			}
+		},
 		"whatwg-fetch": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
 			"integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==",
 			"dev": true
 		},
+		"whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"optional": true
+		},
 		"whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
 			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"dev": true,
+			"devOptional": true,
 			"requires": {
 				"tr46": "~0.0.3",
 				"webidl-conversions": "^3.0.0"
@@ -22147,6 +23567,15 @@
 				"isexe": "^2.0.0"
 			}
 		},
+		"wide-align": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmmirror.com/wide-align/-/wide-align-1.1.5.tgz",
+			"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+			"optional": true,
+			"requires": {
+				"string-width": "^1.0.2 || 2 || 3 || 4"
+			}
+		},
 		"wildcard": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
@@ -22200,7 +23629,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"ws": {
 			"version": "7.5.9",
@@ -22209,6 +23638,18 @@
 			"dev": true,
 			"requires": {}
 		},
+		"xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"optional": true
+		},
+		"xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+			"optional": true
+		},
 		"y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
@@ -22219,7 +23660,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
 			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"dev": true
+			"devOptional": true
 		},
 		"yaml": {
 			"version": "1.10.2",
diff --git a/package.json b/package.json
index a8f4da6e..02bac15e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"core-js": "^3.8.3",
 		"driver.js": "^1.3.1",
 		"echarts": "^5.5.1",
+		"fabric-with-all": "^5.3.1",
 		"element-plus": "^2.4.2",
 		"file-saver": "^2.0.5",
 		"fingerprintjs2": "^2.1.4",
diff --git a/public/index.html b/public/index.html
index 998cf12f..933e6781 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,8 +17,6 @@
   <body>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script> -->
 	<script src="/js/color-thief.js"></script>
-	<script src="/js/fabric.min.js"></script>
-	<script src="/js/fabric.brushes.js"></script>
 	<script src="/js/aligning_guidelines.js"></script>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
diff --git a/public/js/fabric.brushes.js b/public/js/fabric.brushes.js
deleted file mode 100644
index 470a78fb..00000000
--- a/public/js/fabric.brushes.js
+++ /dev/null
@@ -1,1440 +0,0 @@
-/**
- * fabric.brushes - A collection of brushes for fabric.js (version 4 and up).
- *
- * Made by Arjan Haverkamp, https://www.webgear.nl
- * Copyright 2021 Arjan Haverkamp
- * MIT Licensed
- * @version 1.0 - 2021-06-02
- * @url https://github.com/av01d/fabric-brushes
- *
- * Inspiration sources:
- * - https://github.com/tennisonchan/fabric-brush
- * - https://mrdoob.com/projects/harmony/
- * - http://perfectionkills.com/exploring-canvas-drawing-techniques/
- */
-
-(function(fabric) {
-
-/**
- * Trim a canvas. Returns the left-top coordinate where trimming began.
- * @param {canvas} canvas A canvas element to trim. This element will be trimmed (reference).
- * @returns {Object} Left-top coordinate of trimmed area. Example: {x:65, y:104}
- * @see: https://stackoverflow.com/a/22267731/3360038
- */
-fabric.util.trimCanvas = function(canvas) {
-	var ctx = canvas.getContext('2d'),
-		w = canvas.width,
-		h = canvas.height,
-		pix = {x:[], y:[]}, n,
-		imageData = ctx.getImageData(0,0,w,h),
-		fn = function(a,b) { return a-b };
-	for (var y = 0; y < h; y++) {
-		for (var x = 0; x < w; x++) {
-			if (imageData.data[((y * w + x) * 4)+3] > 0) {
-				pix.x.push(x);
-				pix.y.push(y);
-			}
-		}
-	}
-	pix.x.sort(fn);
-	pix.y.sort(fn);
-	n = pix.x.length-1;
-	//if (n == -1) {
-	//	// Nothing to trim... empty canvas?
-	//}
-	
-	w = pix.x[n] - pix.x[0];
-	h = pix.y[n] - pix.y[0];
-	if(!w){
-		return
-	}
-	var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
-
-	canvas.width = w;
-	canvas.height = h;
-	ctx.putImageData(cut, 0, 0);
-
-	return {x:pix.x[0], y:pix.y[0]};
-}
-
-/**
- * Extract r,g,b,a components from any valid color.
- * Returns {undefined} when color cannot be parsed.
- *
- * @param {number} color Any color string (named, hex, rgb, rgba)
- * @returns {(Array|undefined)} Example: [0,128,255,1]
- * @see https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49
- */
-fabric.util.colorValues = function(color) {
-	if (!color) { return; }
-	if (color.toLowerCase() === 'transparent') { return [0, 0, 0, 0]; }
-	if (color[0] === '#') {
-		if (color.length < 7) {
-			// convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
-			color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
-		}
-		return [parseInt(color.substr(1, 2), 16),
-			parseInt(color.substr(3, 2), 16),
-			parseInt(color.substr(5, 2), 16),
-			color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
-	}
-	if (color.indexOf('rgb') === -1) {
-		// convert named colors
-		var tempElem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
-		var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
-		tempElem.style.color = flag;
-		if (tempElem.style.color !== flag) {
-			return; // color set failed - some monstrous css rule is probably taking over the color of our object
-		}
-		tempElem.style.color = color;
-		if (tempElem.style.color === flag || tempElem.style.color === '') {
-			return; // color parse failed
-		}
-		color = getComputedStyle(tempElem).color;
-		document.body.removeChild(tempElem);
-	}
-	if (color.indexOf('rgb') === 0)	{
-		if (color.indexOf('rgba') === -1) {
-			color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
-		}
-		return color.match(/[\.\d]+/g).map(function(a)	{
-			return +a
-		});
-	}
-}
-
-fabric.Point.prototype.angleBetween = function(that) {
-	return Math.atan2( this.x - that.x, this.y - that.y);
-};
-
-fabric.Point.prototype.normalize = function(thickness) {
-	if (null === thickness || undefined === thickness) {
-		thickness = 1;
-	}
-
-	var length = this.distanceFrom({ x: 0, y: 0 });
-
-	if (length > 0) {
-		this.x = this.x / length * thickness;
-		this.y = this.y / length * thickness;
-	}
-
-	return this;
-};
-
-/**
- * Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
- * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
- */
-fabric.BaseBrush.prototype.convertToPath = function() {
-	var pixelRatio = this.canvas.getRetinaScaling(),
-		c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
-		xy = fabric.util.trimCanvas(c),
-		path = this._points.map(arr => {
-			arr[1] = arr[1] / this.canvas.getZoom()
-			arr[2] = arr[2] / this.canvas.getZoom()
-			return arr.join(' ')
-		}).join(' '),
-		pathElemetn = new fabric.Path(path);
-	if(!xy){
-		return
-	}
-	let pointerX = this.canvas.viewportTransform[4];
-	let pointerY =  this.canvas.viewportTransform[5];
-	pathElemetn.set({
-		strokeDashArray: [this._width*3, this._width*3],
-		strokeWidth: this._width,
-		stroke: 'black',
-		fill:'transparent',
-		custom:{
-			dashed:true
-		},
-	}).setCoords();
-	let group = new fabric.Group([pathElemetn],{
-		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
-		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
-		custom:{
-			dashed:true
-		},
-	})
-	
-	this.canvas.add(group).clearContext(this.canvas.contextTop);
-	this.canvas.clearContext(this.canvas.contextTop);
-}
-
-fabric.BaseBrush.prototype.convertToImg = function() {
-	var pixelRatio = this.canvas.getRetinaScaling(),
-		c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
-		xy = fabric.util.trimCanvas(c),
-		img = new fabric.Image(c);
-	if(!xy){
-		return
-	}
-	let pointerX = this.canvas.viewportTransform[4];
-	let pointerY =  this.canvas.viewportTransform[5];
-	img.set({
-		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
-		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
-		'scaleX':1/pixelRatio/this.canvas.getZoom(),
-		'scaleY':1/pixelRatio/this.canvas.getZoom(),
-		custom:{
-			type:'pencil'
-		}
-	}).setCoords();
-	this.canvas.add(img).clearContext(this.canvas.contextTop);
-	this.canvas.clearContext(this.canvas.contextTop);
-}
-
-fabric.util.getRandom = function(max, min) {
-	min = min ? min : 0;
-	return Math.random() * ((max ? max : 1) - min) + min;
-};
-
-fabric.util.clamp = function (n, max, min) {
-	if (typeof min !== 'number') { min = 0; }
-	return n > max ? max : n < min ? min : n;
-};
-
-fabric.Stroke = fabric.util.createClass(fabric.Object,{
-	color: null,
-	inkAmount: null,
-	lineWidth: null,
-
-	_point: null,
-	_lastPoint: null,
-	_currentLineWidth: null,
-
-	initialize: function(ctx, pointer, range, color, lineWidth, inkAmount) {
-		var rx = fabric.util.getRandom(range),
-			c = fabric.util.getRandom(Math.PI * 2),
-			c0 = fabric.util.getRandom(Math.PI * 2),
-			x0 = rx * Math.sin(c0),
-			y0 = rx / 2 * Math.cos(c0),
-			cos = Math.cos(c),
-			sin = Math.sin(c);
-
-		this.ctx = ctx;
-		this.color = color;
-		this._point = new fabric.Point(pointer.x + x0 * cos - y0 * sin, pointer.y + x0 * sin + y0 * cos);
-		this.lineWidth = lineWidth;
-		this.inkAmount = inkAmount;
-		this._currentLineWidth = lineWidth;
-
-		ctx.lineCap = 'round';
-	},
-
-	update: function(pointer, subtractPoint, distance) {
-		this._lastPoint = fabric.util.object.clone(this._point);
-		this._point = this._point.addEquals({ x: subtractPoint.x, y: subtractPoint.y });
-		var n = this.inkAmount / (distance + 1),
-			per = (n > 0.3 ? 0.2 : n < 0 ? 0 : n);
-		this._currentLineWidth = this.lineWidth * per;
-	},
-
-	draw: function() {
-		var ctx = this.ctx;
-		ctx.save();
-		this.line(ctx, this._lastPoint, this._point, this.color, this._currentLineWidth);
-		ctx.restore();
-	},
-
-	line: function(ctx, point1, point2, color, lineWidth) {
-		ctx.strokeStyle = color;
-		ctx.lineWidth = lineWidth;
-		ctx.beginPath();
-		ctx.moveTo(point1.x, point1.y);
-		ctx.lineTo(point2.x, point2.y);
-		ctx.stroke();
-	}
-});
-
-/**
- * CrayonBrush
- * Based on code by Tennison Chan.
- */
-fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 0.6,
-	width: 30,
-
-	_baseWidth: 15,
-	_inkAmount: 10,
-	_latestStrokeLength: 0,
-	_point: null,
-	_sep: 3,
-	_size: 0,
-	_latest: null,
-	_drawn: false,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width/2
-		this._point = new fabric.Point(0, 0);
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._size = this.width / 2 + this._baseWidth;
-		this._drawn = false;
-		this.set(pointer);
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this.update(pointer);
-		this.draw(this.canvas.contextTop);
-	},
-
-	onMouseUp: function() {
-		if (this._drawn) {
-			this.convertToImg();
-		}
-		this._latest = null;
-		this._latestStrokeLength = 0;
-		this.canvas.contextTop.globalAlpha = 1;
-	},
-
-	set: function(p) {
-		if (this._latest) {
-			this._latest.setFromPoint(this._point);
-		} else {
-			this._latest = new fabric.Point(p.x, p.y);
-		}
-		fabric.Point.prototype.setFromPoint.call(this._point, p);
-	},
-
-	update: function(p) {
-		this.set(p);
-		this._latestStrokeLength = this._point.subtract(this._latest).distanceFrom({ x: 0, y: 0 });
-	},
-
-	draw: function(ctx) {
-		var i, j, p, r, c, x, y, w, h, v, s, stepNum, dotSize, dotNum, range;
-
-		v = this._point.subtract(this._latest);
-		s = Math.ceil(this._size / 2);
-		stepNum = Math.floor(v.distanceFrom({ x: 0, y: 0 }) / s) + 1;
-		v.normalize(s);
-
-		dotSize = this._sep * fabric.util.clamp(this._inkAmount / this._latestStrokeLength * 3, 1, 0.5);
-		dotNum = Math.ceil(this._size * this._sep);
-
-		range = this._size / 2;
-
-		ctx.save();
-		ctx.fillStyle = this.color;
-		ctx.beginPath();
-		for (i = 0; i < dotNum; i++) {
-			for (j = 0; j < stepNum; j++) {
-				p = this._latest.add(v.multiply(j));
-				r = fabric.util.getRandom(range);
-				c = fabric.util.getRandom(Math.PI * 2);
-				w = fabric.util.getRandom(dotSize, dotSize / 2);
-				h = fabric.util.getRandom(dotSize, dotSize / 2);
-				x = p.x + r * Math.sin(c) - w / 2;
-				y = p.y + r * Math.cos(c) - h / 2;
-				ctx.rect(x, y, w, h);
-			}
-		}
-		ctx.fill();
-		ctx.restore();
-		this._drawn = true;
-	},
-
-	_render: function() {}
-
-}); // End CrayonBrush
-
-/**
- * FurBrush
- * Based on code by Mr. Doob.
- */
-fabric.FurBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 1,
-
-	_count: 0,
-	_points: [],
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || 1;
-	},
-
-	onMouseDown: function(pointer) {
-		this._points = [pointer];
-		this._count = 0;
-
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color);
-
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (0.1 * this.opacity) + ')';
-		ctx.lineWidth = this.width;
-
-		this._points.push(pointer);
-	},
-
-	onMouseMove: function(pointer) {
-		this._points.push(pointer);
-
-		var i, dx, dy, d,
-			ctx = this.canvas.contextTop,
-			points = this._points,
-			lastPoint = points[points.length - 2];
-
-		ctx.beginPath();
-		ctx.moveTo(lastPoint.x, lastPoint.y);
-		ctx.lineTo(pointer.x, pointer.y);
-		ctx.stroke();
-
-		for (i = 0; i < this._points.length; i++) {
-			dx = this._points[i].x - this._points[this._count].x;
-			dy = this._points[i].y - this._points[this._count].y;
-			d = dx * dx + dy * dy;
-
-			if (d < 2000 && Math.random() > d / 2000)	{
-				ctx.beginPath();
-				ctx.moveTo(pointer.x + (dx * 0.5), pointer.y + (dy * 0.5));
-				ctx.lineTo(pointer.x - (dx * 0.5), pointer.y - (dy * 0.5));
-				ctx.stroke();
-			}
-		}
-
-		this._count++;
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._count > 0) {
-			this.convertToImg();
-		}
-	},
-
-	_render: function() {}
-}); // End FurBrush
-
-/**
- * InkBrush
- * Based on code by Tennison Chan.
- */
-fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-
-	_baseWidth: 15,
-	_inkAmount: 7,
-	_lastPoint: null,
-	_point: null,
-	_range: 10,
-	_strokes: null,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width
-		this._point = new fabric.Point();
-	},
-
-	_render: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		var len, i, point = this.setPointer(pointer),
-			subtractPoint = point.subtract(this._lastPoint),
-			distance = point.distanceFrom(this._lastPoint),
-			stroke;
-		for (i = 0, len = this._strokes.length; i < len; i++) {
-			stroke = this._strokes[i];
-			stroke.update(point, subtractPoint, distance);
-			stroke.draw();
-		}
-
-		if (distance > 30) {
-			this.drawSplash(point, this._inkAmount);
-		}
-	},
-
-	onMouseDown: function(pointer) {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._resetTip(pointer);
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this.convertToImg();
-		this.canvas.contextTop.globalAlpha = 1;
-	},
-	hexToRgba:function(hex, alpha) {
-		
-	},
-	drawSplash: function(pointer, maxSize) {
-		var c, r, i, point,
-			ctx = this.canvas.contextTop,
-			num = fabric.util.getRandom(12),
-			range = maxSize * 10,
-			color = this.color;
-
-		ctx.save();
-		for (i = 0; i < num; i++) {
-			r = fabric.util.getRandom(range, 1);
-			c = fabric.util.getRandom(Math.PI * 2);
-			point = new fabric.Point(pointer.x + r * Math.sin(c), pointer.y + r * Math.cos(c));
-
-			ctx.fillStyle = color;
-			ctx.beginPath();
-			ctx.arc(point.x, point.y, fabric.util.getRandom(maxSize) / 2, 0, Math.PI * 2, false);
-			ctx.fill();
-		}
-		ctx.restore();
-	},
-
-	setPointer: function(pointer) {
-		var point = new fabric.Point(pointer.x, pointer.y);
-
-		this._lastPoint = fabric.util.object.clone(this._point);
-		this._point = point;
-
-		return point;
-	},
-
-	_resetTip: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		var len, i, point = this.setPointer(pointer);
-  
-		this._strokes = [];
-		this.size = this.width;
-		this._range = this.size / 2;
-		for (i = 0, len = this.size; i < len; i++) {
-			this._strokes[i] = new fabric.Stroke(this.canvas.contextTop, point, this._range, this.color, this.width+10, this._inkAmount);
-		}
-	}
-}); // End InkBrush
-
-/**
- * LongfurBrush
- * Based on code by Mr. Doob.
- */
-fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 1,
-
-	_count: 0,
-	_points: [],
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || 1;
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points = [pointer];
-		this._count = 0;
-
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color);
-
-		//ctx.globalCompositeOperation = 'source-over';
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (0.05 * this.opacity) + ')';
-		ctx.lineWidth = this.width;
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points.push(pointer);
-
-		var i, dx, dy, d, size,
-			ctx = this.canvas.contextTop,
-			points = this._points;
-
-		for (i = 0; i < this._points.length; i++) {
-			size = -Math.random();
-
-			dx = this._points[i].x - this._points[this._count].x;
-			dy = this._points[i].y - this._points[this._count].y;
-			d = dx * dx + dy * dy;
-
-			if (d < 1000 && Math.random() > d / 1000)	{
-				ctx.beginPath();
-				ctx.moveTo(this._points[this._count].x + (dx * size), this._points[this._count].y + (dy * size));
-				ctx.lineTo(this._points[i].x - (dx * size) + Math.random() * 2, this._points[i].y - (dy * size) + Math.random() * 2);
-				ctx.stroke();
-			}
-		}
-
-		this._count++;
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._count > 0) {
-			this.convertToImg();
-		}
-	},
-
-	_render: function() {}
-}); // End LongfurBrush
-/**
- * WritingBrush
- * Based on code by Tennison Chan.
- */
-fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-
-	_baseWidth: 15,
-	_lastPoint: null,
-	_lineWidth: 2,
-	_point: null,
-	_size: 0,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width;
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._point = new fabric.Point();
-
-		this.canvas.contextTop.lineJoin = 'round';
-		this.canvas.contextTop.lineCap = 'round';
-	},
-
-	_render: function(pointer) {
-		var ctx, lineWidthDiff, i, len;
-		ctx = this.canvas.contextTop;
-		ctx.beginPath();
-		// let num = this._size / this._lineWidth / 2 / 1.2
-		let num = this.width/1.25 / 2 
-
-		for(i = 0, len = this.width/1.25 ; i < len; i++) {
-		// for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
-			lineWidthDiff = (this._lineWidth - 1) * i;
-
-			ctx.globalAlpha = 0.8 * this.opacity;
-			ctx.moveTo(this._lastPoint.x -lineWidthDiff+num, this._lastPoint.y + lineWidthDiff-num);
-			ctx.lineTo(pointer.x - lineWidthDiff+num, pointer.y + lineWidthDiff-num);
-			ctx.stroke();
-		}
-
-		this._lastPoint = new fabric.Point(pointer.x, pointer.y);
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-		this.canvas.contextTop.strokeStyle = this.color;
-		this.canvas.contextTop.lineWidth = this._lineWidth;
-		this._size = this.width + this._baseWidth;
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this.canvas.contextTop.globalAlpha = 1;
-		this.convertToImg();
-	}
-}); // End WritingBrush
-/**
- * MarkerBrush
- * Based on code by Tennison Chan.
- */
-fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-
-	_baseWidth: 15,
-	_lastPoint: null,
-	_lineWidth: 2,
-	_point: null,
-	_size: 0,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width;
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._point = new fabric.Point();
-
-		this.canvas.contextTop.lineJoin = 'round';
-		this.canvas.contextTop.lineCap = 'round';
-	},
-
-	_render: function(pointer) {
-		
-		var ctx, lineWidthDiff, i, len;
-		ctx = this.canvas.contextTop;
-		
-		ctx.beginPath();
-		let num = this.width/1.25 / 2 
-		for(i = 0, len = this.width/1.25 ; i < len; i++) {
-			lineWidthDiff = (this._lineWidth - 1) * i;
-			ctx.globalAlpha = 0.8 * this.opacity;
-			ctx.moveTo(this._lastPoint.x + lineWidthDiff-num, (this._lastPoint.y + lineWidthDiff-num));
-			ctx.lineTo(pointer.x + lineWidthDiff-num, pointer.y + lineWidthDiff-num);
-			ctx.stroke();
-		}
-
-		this._lastPoint = new fabric.Point(pointer.x, pointer.y);
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-		this.canvas.contextTop.strokeStyle = this.color;
-		this.canvas.contextTop.lineWidth = this._lineWidth;
-		this._size = this.width + this._baseWidth/2;
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this.canvas.contextTop.globalAlpha = 1;
-		this.convertToImg();
-	}
-}); // End MarkerBrush
-/**
- * test
- * Based on code by Tennison Chan.
- */
-fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-
-	_points: [],
-	
-	_width: 2,
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-		this.canvas = canvas;
-		this._width = opt._width || this._width;
-		this.color = opt.color || this.color;
-		
-	},
-
-	_render: function(pointer) {
-		
-		var ctx, lineWidthDiff, i, len;
-		ctx = this.canvas.contextTop;
-
-		this._points.push(['L', pointer.x, pointer.y]);
-
-		// if(this._points.length % 10 < 5){
-		let points = this._points
-		ctx.beginPath();
-		ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
-		ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
-		ctx.stroke();
-		// }
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points = []
-		this._points.push(['M', pointer.x, pointer.y]);
-
-		var ctx = this.canvas.contextTop;
-		ctx.strokeStyle = 'rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ')';
-		ctx.lineWidth = this._width * this.canvas.getZoom();
-		ctx.lineJoin = ctx.lineCap = 'round';
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this._points.push(['Z']);
-		this.convertToPath();
-	}
-}); // End test
-
-/**
- * MarkerBrush
- * Based on code by Tennison Chan.
- */
-fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-	content: 0,
-
-	_baseWidth: 15,
-	_lastPoint: null,
-	_lineWidth: 2,
-	_point: null,
-	_size: 0,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width;
-		this.content = opt.content || canvas.width/2;
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._point = new fabric.Point();
-
-		this.canvas.contextTop.lineJoin = 'round';
-		this.canvas.contextTop.lineCap = 'round';
-	},
-
-	_render: function(pointer) {
-		var ctx, lineWidthDiff, i, len;
-
-		ctx = this.canvas.contextTop;
-
-		ctx.beginPath();
-
-		for(i = 0, len = (this._size / this._lineWidth) / 2; i < len; i++) {
-			lineWidthDiff = (this._lineWidth - 1) * i;
-			let half = this.canvas.width/2
-			ctx.globalAlpha = 0.8 * this.opacity;
-			ctx.moveTo(this._lastPoint.x, this._lastPoint.y);
-			let x = content > this._lastPoint.x?content - this._lastPoint.x+content :content*2 - this._lastPoint.x
-			ctx.lineTo(x, this._lastPoint.y);
-			// ctx.lineTo(pointer.y + lineWidthDiff,pointer.x + lineWidthDiff);
-			ctx.stroke();
-		}
-
-		this._lastPoint = new fabric.Point(pointer.x, pointer.y);
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-		this.canvas.contextTop.strokeStyle = this.color;
-		this.canvas.contextTop.lineWidth = this._lineWidth;
-		this._size = this.width + this._baseWidth;
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this.canvas.contextTop.globalAlpha = 1;
-		this.convertToImg();
-	}
-}); // End MarkerBrush
-/**
- * PenBrush
- * Based on code by Tennison Chan.
- */
-fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-
-	_baseWidth: 15,
-	_lastPoint: null,
-	_lineWidth: 2,
-	_point: null,
-	_size: 0,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this._baseWidth = this.width;
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this._point = new fabric.Point();
-
-		this.canvas.contextTop.lineJoin = 'round';
-		this.canvas.contextTop.lineCap = 'round';
-	},
-
-	_render: function(pointer) {
-
-		var ctx, lineWidthDiff, i, len;
-		ctx = this.canvas.contextTop;
-		ctx.beginPath();
-		// let num = this._size / this._lineWidth / 2 / 1.2
-		let num = this.width/1.25 / 2 
-		for(i = 0, len = this.width/1.25 ; i < len; i++) {
-		// for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
-			var randomNum = Math.random() * (0.6 - 0.2) + 0.2;
-			var color = this.color.replace(/1(?=\))/, randomNum);
-			this.canvas.contextTop.strokeStyle = color;
-
-			lineWidthDiff = (this._lineWidth - 1) * i;
-
-			ctx.globalAlpha = 0.8 * this.opacity;
-			ctx.moveTo(this._lastPoint.x, this._lastPoint.y + lineWidthDiff-num);
-			ctx.lineTo(pointer.x, pointer.y + lineWidthDiff-num);
-			ctx.stroke();
-		}
-
-		this._lastPoint = new fabric.Point(pointer.x, pointer.y);
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-		this.canvas.contextTop.lineWidth = this._lineWidth;
-		this._size = this.width + this._baseWidth;
-	},
-
-	onMouseMove: function(pointer) {
-		if (this.canvas._isCurrentlyDrawing) {
-			pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-			pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-			this._render(pointer);
-		}
-	},
-
-	onMouseUp: function() {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		this.canvas.contextTop.globalAlpha = 1;
-		this.convertToImg();
-	}
-}); // End PenBrush
-/**
- * RibbonBrush
- * Based on code by Mr. Doob.
- */
-fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 1,
-
-	_nrPainters: 50,
-	_painters: [],
-	_lastPoint: null,
-	_interval: null,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this._nrPainters = opt._nrPainters || this._nrPainters;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		for (var i = 0; i < this._nrPainters; i++) {
-			this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
-		}
-	},
-
-	update: function() {
-		var ctx = this.canvas.contextTop, painters = this._painters;
-		for (var i = 0; i < painters.length; i++)	{
-			ctx.beginPath();
-			ctx.moveTo(painters[i].dx, painters[i].dy);
-			painters[i].dx -= painters[i].ax = (painters[i].ax + (painters[i].dx - this._lastPoint.x) * painters[i].div) * painters[i].ease;
-			painters[i].dy -= painters[i].ay = (painters[i].ay + (painters[i].dy - this._lastPoint.y) * painters[i].div) * painters[i].ease;
-			ctx.lineTo(painters[i].dx, painters[i].dy);
-			ctx.stroke();
-		}
-	},
-
-	onMouseDown: function(pointer) {
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color);
-
-		this._painters = [];
-		for (var i = 0; i < this._nrPainters; i++) {
-			this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
-		}
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-
-		//ctx.globalCompositeOperation = 'source-over';
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (0.05 * this.opacity) + ')';
-		ctx.lineWidth = this.width;
-
-		for (var i = 0; i < this._nrPainters; i++) {
-			this._painters[i].dx = pointer.x;
-			this._painters[i].dy = pointer.y;
-		}
-
-		var self = this;
-		this._interval = setInterval(function() { self.update() }, 1000/60);
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-	},
-
-	onMouseUp: function(pointer) {
-		clearInterval(this._interval);
-		this.convertToImg();
-	},
-
-	_render: function() {}
-}); // End RibbonBrush
-
-/**
- * ShadedBrush
- * Based on code by Mr. Doob.
- */
-fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: .3,
-	width: 1,
-	shadeDistance: 1000,
-
-	_points: [],
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-		this.shadeDistance = opt.shadeDistance || 1000;
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points = [pointer];
-
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color);
-
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + this.opacity + ')';
-		ctx.lineWidth = this.width;
-		ctx.lineJoin = ctx.lineCap = 'round';
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points.push(pointer);
-
-		var ctx = this.canvas.contextTop,
-			points = this._points;
-
-		ctx.beginPath();
-		ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
-		ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
-		ctx.stroke();
-
-		for (var i = 0, len = points.length; i < len; i++) {
-			dx = points[i].x - points[points.length-1].x;
-			dy = points[i].y - points[points.length-1].y;
-			d = dx * dx + dy * dy;
-
-			if (d < this.shadeDistance) {
-				ctx.beginPath();
-				ctx.moveTo( points[points.length-1].x + (dx * 0.2), points[points.length-1].y + (dy * 0.2));
-				ctx.lineTo( points[i].x - (dx * 0.2), points[i].y - (dy * 0.2));
-				ctx.stroke();
-			}
-		}
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._points.length > 1) {
-			this.convertToImg();
-		}
-	},
-
-	_render: function() {}
-}); // End ShadedBrush
-
-/**
- * SketchyBrush
- * Based on code by Mr. Doob.
- */
-fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 1,
-
-	_count: 0,
-	_points: [],
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || this.opacity;
-	},
-
-	onMouseDown: function(pointer) {
-		this._count = 0;
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points = [pointer];
-
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color);
-		//ctx.globalCompositeOperation = 'source-over';
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (0.05 * this.opacity) + ')';
-		ctx.lineWidth = this.width;
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points.push(pointer);
-
-		var i, dx, dy, d, factor = .3 * this.width,
-			ctx = this.canvas.contextTop,
-			points = this._points,
-			count = this._count,
-			lastPoint = points[points.length - 2];
-
-		ctx.beginPath();
-		ctx.moveTo(lastPoint.x, lastPoint.y);
-		ctx.lineTo(pointer.x, pointer.y);
-		ctx.stroke();
-
-		for (i = 0; i < points.length; i++) {
-			dx = points[i].x - points[count].x;
-			dy = points[i].y - points[count].y;
-			d = dx * dx + dy * dy;
-
-			if (d < 4000 && Math.random() > d / 2000)	{
-				ctx.beginPath();
-				ctx.moveTo(points[count].x + (dx * factor), points[count].y + (dy * factor));
-				ctx.lineTo(points[i].x - (dx * factor), points[i].y - (dy * factor));
-				ctx.stroke();
-			}
-		}
-
-		this._count++;
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._count > 0) {
-			this.convertToImg();
-		}
-	},
-
-	_render: function() {}
-}); // End SketchyBrush
-
-/**
- * SpraypaintBrush
- * Based on code by Tennison Chan.
- */
-fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 30,
-
-	_baseWidth: 40,
-	_inkAmount: 0,
-	_interval: 20,
-	_lastPoint: null,
-	_point: null,
-	brush: null,
-	sprayBrushDataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT0AAAE/CAMAAAADjeSkAAAyGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzYgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMjEtMDUtMjdUMTQ6NTg6NTVaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMjEtMDUtMjdUMTQ6NTk6MDJaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+tc546gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAJcEhZcwAACxIAAAsSAdLdfvwAAADnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHxfYHoAAABNdFJOUwEGB0lKBAUAAgMICUgyCjULLw0MMQ8wDjQRMzgrOy4oEEIsEy02FBIVKh45JSkYNzoXJxYiPyYaHSAfGSEkPCMbRUNBHEtER0A+Rj1M2XzftQAAIABJREFUeNrkWtuO4zoOpARQpiTAEGwEQb8FGKC7sQ8HONiHfTj//19bJOVbkum59KR7ZjeYyc2yO64Uq4p0aPi0G233fqf3lCKt25Yl9KNHpg89hc8F8PiW3G7/3A/526L38x+bOr+EPvOE6DPO/Jufgu7vs72dZSlq+r/gHn3tbxLd8GdjFN090FrQIm+didCfit4tIF9fRk4u2l5eMW3Fge6X7/1DDpn+N7j3xnmuCww191v6Hne55fM111bHpj++cu/8zdz59oaz0h293Ep3t5luXq0e/kAK0mMPRm95By1U80dZ4bmLI1DYWER0j4AfHv7ok4TBEKNjHJZ0fEn7+lOXVQGQ/kroO6G5tus/s3JptYcr8mwvFkTUhlepJAvQjp5IDmQ8TJm+kVjoA5z3AYd+kw93wx7elH1NSoxWxl7RwGwBVrJkxyx/ow2hP7Zyie71WYvK3eaOFcLVPKeZzYVz30g500bOPSR7K5Gvf1M0/NmVSz2UuF0cGUHE5O7RazfjtqWcbfnxYaCDhN5qgtBnyfqvHKF08JazHJbntEPP2oaNXJIX5RNbR3kH+CqTu9nMkeLDThWJ/kD0jmWbzQh2SPbTX/WLeTMKkEYMMZYl2lDaK6FjI3cNYUfszYYedKKPOSjtn1Hyql1v6PGXzZkX+IQNDs8ktHiEa582tJ2Imd7wA7pSBaJ9I/OA86XHHsHQ44U1Jv50QHflzxJS8I4W8aKQeMHqudkRdzZ15h57Zz/AcLCgW5R/M/QsQnzl0BbVyPObsqYX5IGb1OVrjXgo0qSILwgCPsAvTFdGAdwzHaOJbIGRdgPre1bzm6DXcwLdNLGrYgG4kCTnZEvtDbH5R6/UlLdvgHq+pf7fXmVmWRRQNvTyvamAYoQN/WtaRY8e0+/S40SPpMcI4sKdd24IYjfXqJyvOn1jkHYVQFX5hV1jTZxlObIBT4aQ1fShTr2hG7b/IqF/CKHfj3t7zlwF4E2isqxDKjIbkEWkiGV15a5coiInxCHBcylXRTDZiEBshVLLyt27EGOl9Ard/srKxTyKZ+nfr3LvTtQG6dq+s9lhrbqBdqFlPSlSc8gGDGpcSSd1jtmpSL5BnwqlkI2U9lr8mxHf8TrTONX5ceN7eveOX2/TZfd1y2Eu1+mhLb9jiPJkzgaLcAqsj3Uq4tUvHBiFbNUnkRck3aNZ+VfywuZ1QOMqm+8MZunOpJs+q3LppodapGeLx06OXk5EXZwkSbdaUZ3DP9U6lGyCzrFJXUcFAGJTwgLmFLMuFj+uKqTubRUtme09l8VhR/3fNLFcB9NtLLTr6e30hpCX1qlbgDqCsDLOtSwDG0CQGiQPz5fqNIiBJcAGCTkGVnQNFo6i4rjMsMTNpLNyGQo+cJz0a3bbBijXttHLqAeVHv7cgZ05oQDBaEtyUNhyaBHEA6pssIrR0DC2AR/etWVa6OxLdgm5N8w9LWXaR4DryyaHYfbPiOMvQo/TYgn6gbPPS7ZZ8GYP4pLFkH5UY7YcmJU/BlOdArIhg3bmsqIIwYPguZw99WSt21LZjJlyLInNUpSA7JmFD6p71Vv3sjiip3mThD64cg89Qxc86PuiPDtH1Q5iWSEqZtlnxUlLN2ocTlCsHF8jNA+6B4GzNZy9cEG5qH6ClWzkTK55qOHcvw72geDQB13ic4a9uV35B72/pundsG39rH/eLvO90Zdd7W4h1+SMjDEaKYCKaV/mMda5wEvYSpLNEGyptWtqKraS7StSg8nB0ctRy1pCkG2y3/sLov2I7HYS88G6R7sx8S6CijXy97/PHnJt6OmZTlOduYlYgbJaLcDk0sZo1AVQ8AfzE9gFuGkFrHuKY4/d2qzbLVxjkx4neLoz2fA+pI9liILsx1X0ea6xXk7U6tnFu93RstBhUuTjYgsXdvoqbopHYhc+1a8QyFKznrDWbGiWjNFvMFdUNKspp5I6H31gT+oj+sAcltyyzk13wUlaomE3ZRQi+RT09iOMbaCxrwtwoZ9iV2XyBsIKNdbo2phKCMHclRTMrNM+RYGLjQY4tazFyakW1GpKMShEiWVtlHWPnGO0IKj8RHVjj23aZXfcrf6gOTm//1Il/bjU3VyqP4xZ/GP3zmn9pZN4GvNRFUAT67oQfDWMeEHyzJZCygyWgY1hVFzVZOEVMBPcPY0Jac9qWHcTz9Ao7Ii+xPJLzmPJRtjsOdAkw+m4al8vG/oFGvaDLcVw9Xe9b9i/9mrS+KopZhnokZujD0bmYqoVFTyUHVv+SM8FS3KB7KUAeqYZgCW1ZLxt1KuvJcSg8Cl0asBJKx9HHqeGrKPBm88NuKei1PVWTTqK66W5XfUeh6sPr9zDcjk05P1DUeQe/ge/Dtuzf6hWUOoVaVSPhcrFymkaU0Mhg2FTiYCi1tgurzWGADopWWMsUaVx/oIQHUFCrFDyJZsmpILtIHMegwfoWtCKhJL8Ip3XtzpQ7pPqG5joY3SPbmJSnz515RPvy3GiNa/xzxsqLcDgVxmBm46eCnIdTjxo15VMvBIajZAK4m85nRH5xkuxyi0B76VY2qUmVUk9klazIsIFeOIBBC54ChnFc22Dcw9+VgMFfmHOso5Kh3Xc6BXyca5BdFWqIp7rlwtl6hjrRS/v0BgAeDeL6lJVRxiZQbUQta3IigXeAUhhnmsoE0wihDGoqeAWxxTGCSA2QKTWkrEym//qJpR90s4Or4IOsaNFbOnXPgZJ48gDb9fs+qcKsg1bfxaMXxN7EMiWy6u0dEoDWYLwNFdmNpCNMEogKueaNbBkATSoaphCBT5tPAcUOd5ioNhKQCXWGjhUcHJCAAwR6OisIE2tqsQFC84Kn9I76NfgI4au1OXEXe0cUgppnV3dyaf0Q1b67msa/jPNbC28De369BeQpuySo6MnHcvZoJMDUkjs4RekDDDJMVTIpYaNUE/gXQxj5FrLJcZ5GuEuBV4R5+em9AQj/30CmcusoyzQzYKM7p4KWzuHtg6YDtnGXhJsQqOW7AOEkrvz+mXkYd8TPZR79DWf8oFHWJKxRwMetecCdogURacBqmMqVIAM0gjQKuqsVrVHkEnnA/HyBV1vHGOLAsjGcpqmCQCfXupUL89PU2UQM758OU8zLAYYqo0o6RR7/EEcp8BLtOcYbNAqOgKQatT3tNyvDdNysU8+Cr3h8CtrI1n/1ZM3Eb0bH6xhINZRCOsZhOlkQ3VtKCD5o1IPLCwjTjaad+BOG7Py19+gUHtBZwFKqdDN5yegeHpCKGkvr89jOE01zJfL64TVqOCi6aZoJ6Juiyxdmn6W1EdbejkYVTr32NI9eNi6juX3Bg/Oe/3SzS4Xi39xy+/EtuvZKuPZPjgYGbXITk2Hvhpj4aFj8flUKDVOsyJXY7ycAGKZJpTp+PwfFOVYR8gedj2NcyvtPMN1n14v4+nL0zjWesYShOw2jeMptobdGqIPHAhc9alV7hNUxZItg4pp8Oa98h2dwQM6tT7Ui3Qzn6c+z+Vi/SoEzkYlUHecStR4EWJhdQElSoztywuEH3bbLqGMtaEsY21qx6jeaa4j/jc84N1Sz9N5ape/v9TLhF30+kds5xIbl/OYy7nV1lgVFHRUJxaf90R7sIDoVQsphB4Ou/nfz7Yd75kSXP1KzOdQ/bdj4qmLo7USOEtU8aD5LAcHTvMwYkiciyYVoFWnhlCnYjbWMsMxanv653wetWRR12OrtYKP57+ep/J0OjewLgBY3Qq0LgWgo4SD9i+KK5tnsGGoITP5mNAjdN4atuE93S5976LrwaLYJTGS5bp9Jr/khTxgIyNWNUcEUy/NAAjaRtrholWwtnTEef/zpEk4KC4VSIwBIOPxcno5tfnldL786/mk65BjcDvPrc2n039pubretnEgaAuwqg9AEEgQBN8IECAJISDAY1HJpovoQf//N90sJeeSXHuXtHdtisaOE9vL2Z2Z3VU0HwdwSSetqDp8rhJopRLjeSAXXNGpAJhlMlf6OHsv61JYpHmM3grumsu7dumrFZL/Fnt/s4G0TXE55rTNoV7odXYt8ew+WmxLV5OESE3aAkIYhInIEWIQrFHgX8+RjgPe8DAibTvEDsncIWmtFNbjw1qOe7kUjI/SCQPRdx553Wg34n6JOsg4TDGKQUcVFs9BNNSexdDsTQRi/64nsYwXdGnL6y3s0byxGf+4sf/r0Wvebhe+XfDaJ2GPfik1yEk4A4JVEf3EFESfCBK4giRJL1H0kahwFXJksqCKOYAPsUQZhEYZGDuPTGshRVSMI8RcKWW0ZAI3mLC4xYlp4YiFAzClZoPqcU9H6OUIHjIY4L7AZJDWhIRuSKFDOJXJEmmDcrjN6dUlSv+Bgvth9Jr39vavjui+Vlba5WQgQG7VpUxfu4ramDX1Q+pCphqfXs6IDhf9AFNBCUplHpnJpYQOrjgSkVNEggL3Os4UbuJBTAljmMqKosbxuRoItziOXmstEXdOP6SqZI/DGAsAKwTyXPOeWjE4qaJgiHGp8uEE964PTDDVxN+YWZ4+mrOntnklXF5/qaKmeNOKihx8OdDSKSHPD90LJYbS1ktBw27IXz4KvEsU/R6gQ+IxG7uqUsS3o8gagXBJCo2qZgUD/ISyTjopmWODsGwUiiPdgU3BwcFMas27DsSrOSFXOTwZnh6ZixBSZ/BC3oQ4o33MW9q+K2uERCH7JTTNAwen/0/vNe9LwpGvqGzFPlb7qIxk8oX6vUXn1wPJkX5ACS9KFplFIqMHAFC0LCMiFezMmEqDNJbxQRuRF4/MNZorwRWLwQr8YUBdXw2OgU8QU805YpUs12ONqtdKx4BwpDQ1q6nDWjNqPiCYcp/QUYfiaOfDvL0k1OndpOZTmu/X9F77ukF/2oVAaeieqeVRSA5KDyYKdoKkBecV2dAamg23yEDApTI4BmX7wVgJ52YtM0kzHePI0uS58jFapZk0MXvnnFHaO3CuMkJwzplxstKjWK8IJwEdirom6QxVA/MMbj8DoxVeScXqgz3ao/lCS+a7S6Ownn7jcpjPf2dzerEcj3lfc+yEQcvRGGKX9DBcA6wqA8GCNAEMvKGKSBflnaNqcSEdCKAf46RRwcKiwoyE9aCGMM0IY0jBWYTvNoclGGVN8holMhlOEjAJ0TtrpxuUDawHtN9QCT72bPcmhcSrYgxpQ6innmAZmzeHzS2qtC39rXd1/RMx+pXoPQZBR9COS03oxXR7ce7IK9QwAAgZOVCJfCXCxVtiAIdCsc+SS84g3hhyVLFhtEF6b6Q1o3IuWueS80F7I8y2TducbDQ+KJ+EB3mASpzS0iOlNw3mAeDOTDEnR2m4KxaFrFtHwSu6D+hkQ7tP6fdO376c1TzapO8GDP9bZ755LMXuE8n22BYpg4wyf0WxAw56xAruFG+CaQkTIfiFhARH+beS9z3YU7PeSHINzoErrDbOiZQYPUDFuKYcAu6YwnJbb7c1GL/4dbMpLNmj+Gmb8BN4JjHN4HqlYUYgiHIUbCBfx6gi0tSzdxoiRkKxjMdsilJ4H/N9edkN/FtV/73o/WhD7/SYmT2WavcWRhmg0qmSvqIJDkWvpiQl8mBWSNBD1fWoWKj2HPmM1JVeCeUzFEmyIBCjE+oYYCgBPoe8RbImm/ItxyXndZmjNS6adZ7XNXivSQLqhG/TDGBUwLFy1H5RqBXQ31DhfcU5iKOHnunLK6lBxdWlVOiyurJP/47Vq1/ZLfhQhN/spR+j29PLnk9p7ZZBLE0vmqJbqoEcGgm8DioOWSqJWkcOmhhHzUYlpQHWpDZEFjlwFQ1IAyhUTikXXc4ZtS75jNrnt5Tm2eocFOKX5ynlJSCUarTRoj7arCSqJfEyxLdWHfwK1CCqBp4HBbEbOyqEHTWdwcNkvB9XqH5pq+bRKj19vlV1+uS+ymPAfTouqijWe1+iI+TVZ5rvkNK/FKFayY6hCOH0Yew1dDITPUdwgDylITsYyPPrDAFs16DBC2netmztctvm53sC8ACztMXkv3/LKc9GKz/nOeJhwUd3Nj7F5DR+HnkOzRipSYFnHxQK30CaSAH0fa8G6iHSJORMre3S/NuJ79y1b65F+NSq5OmjX96t9bGbRCtn5QKKBh4fp1rqMVlx0qcoNMQWpfB1BRR6qComBw4GjcBbUGAL4NF5wE3oeVZ4lzFCo6z2igxN23a7XReUvmm7Pz0t2xbz87dttohcNNNmQr7errdsDO75NqfotfDgIOqgDkkxpC0DDKGeIW/A7cN5jFIMF5gT6PahbH00x4wNDrh+rKSf2p/h52dJ/ZldguN6i735Xg3EFajOriu7JmQ3Kjl2NMPo+64D4LqhAsSoHTAgk0ZuLbIP7yMZOFNj4+qdB2sEwaQydsvbtqp1FgH/b9fbFvI8b9N9XdcI6Ze2kPJ13uhW2HLGzTAlu31ds0fpE8AdY8LbWQxGcUsuGtDj1MfqeupKVG1HuuVYztp3IMo6Zfu44OZL8+7Kt9NffeDfit7p9GbvmMxYKRjIhL4uO7FEvRVDee7GgZqWMFGQKT08PsiPM1gBF+EcBDSIjUHZEPLm/Ga0nQemoUbmBSBL62rm2/16vc/zfcsJfBHmFbnq19kbF9bl+Rb9NoWUoGK2HBJy2QoNCGuXVFpnYE8IqUhP4vjOI2gYmUxmt6Xp++VMY5ZL6f01++S0qV82TIsb+QHSfvZ7NT7codqvYzoWQEm9N/tGVBm8wFjSTsm5rnqkB3KWWsIcR10JkB+1R5wHFADI0SgFRsi3YBPCYb0b4FnnsF23ZVqWFUi6XZ+etnlenq/rNEVr4zw9T/clOge1cv3+NYTn70uOX+9pngBV4ZC3FqexbWa+OpCJ5MZ4yZSBnSbmpYFbW3X4EDSbQ0UpG0Mk6EvlHvjb62A/voj78ejtXbxjmlFmi+XKgLJPhjOtm7aHYe9p5MW7gQNyVXOWqutVZNRJofThQFmC8LVpTRqRM2s0PcqXCtOSkaI+3hYfl69/kCy536frHXm6htu3pymluAKB0/P3KU/3WwjTdV23+y35EGII123bZhROGLoIOR0c9Rvwd0TpJS197jgU04iU4bQqQrMO2uPYRcvL74ho/0Ez/8tvlPlZdI/RU/vYhyq7YmUnsd63mE4t9MkZAIRlGmpIFKJZqBIGuW+ddUyB9hSJWnitlCfr/HJzECDWwlCkbNSfpFxrj5vKErQtmWuDruWFEISEFmQsHqMBCRjBDA8NH/j/v+lWA95sdJOjZI8ibVgSZZ2hu6uqu5pKsCxhHUKoq9yZ1zg71QrN5NKLZe7V2DLWs5lVchwXHGPXIdGXuVQz+ErWjKA74NDDkGQOaHeS+qiusR87dkr2jZttWubNJT1HjX9r737vw/HL62VOe/m7HA6/nI1/8fQ2p/Z12/PalOJ1m0CSXRPQQM0Bw0BirOMbagtYDmEtNJTjg9G52ySMRFnsxZ2M3UYCbpcMoqtxAbR+o5ckHeWM+CtjWYQAkPYhkLmjaLnuRinkNI19jzOb4wao0fMRyZ0MUZolDf586ZTG1ywGDffwvGwnrlIflzaI3h3cD6BPDQsLn9Q6U8921Wwvk+7WgD4fP8rgX1OSX99+PZTrazVsnQVdyE5xoAp8JpfIKs/ODk13gHPebfvEduafyFphp2XlenEWDSShslJCq8psEGNVIoSiTGWIFegwpRRQY2FtO869ZPWkQFwEL/pSCsVyjhszUjYdWq1EIQdWAj2Q9sMsWL8IIQe1lNIG18tSCyAeNQg3m7r3xJgsnyQ21DZ5uQxjs56v5ufL5jSkSrTbCw6Hw6fF8q/UvR8N1/OHvXHvRq0MmWYE5Eg8bXNHA+IMzxRp4rkmlRk8Z9de59gIPwSi50V3aKlkWBowMxzcrJZODomb9sjDzG8aWXAkJ2rawoQSTHBeiCkMQ9b1Ypx52/Kp76e2FHnRco6/Ny/ghMhtCOFxLXuzZHyOna5sqLGazpBxWUrVFj/75HmOeXRNMiGdreNmqlmXHozd+vAaEr0A9nz9Imp8TvsPO/LLybAbe67betNxlT+AWttc3WEnk8YMJoLvHqU3aoEiFKLGTzLSYcDGufNTUDfg6yB7WYKEdKoDbCyZQHLOA1NSTZNWioehaoOay67VWkx8ajUbZi4BHHxSTIkeSDzMI1el0HPZNVQKQf7sbpFd6qYupKATp8B65w7kMKmhk91W7xVo1slY+6XrTOH8CTo+rZdfvnZ6h1+w7e01AXSA5zXy9qHK9UgWz+vxdksjMiICcUHpaNhPgwsHHx26NSsHVHIfJ5j4XbU0y1wtsxqofoGnxBlTzYCDY6qUOBQpJhyWGNsWIdjWhRZ84m2dt02Jc+Wq1whDBrHBxHuOcqf6vpdVI0fZsxIsHBRnaFBSXRdgnqREWxyEokmtP3vd0jLoKdNWzfpuoYt5OvxnJdCv3t9P24GHf8NY9vS/Xjcrw2slb5+xkL+H5hrHG6gISs7JvEXIzztCEJ/dPNpxVGVetcjBA4CQ/u96BrbHKVvLXvNl6PxMshk8rueCqbbmTGilJ93qGgE48kcQcjXWwRsHDk9KhFzUExcjF13//Z2FevHioZdzO1bjKEFW5q6ssqbBjyJhA2njoRaDBN4tcAHzaDjr0OBwMK3butdEU8qtTQApfP7gfZfDJ2/xl09v82htzRxEvWXu5ZbaxyjK6/CHLg2HrLOGM1Q+Lmhek0EHNA6IK5Ay87KhSZOyWVjX9Ivi/TLM1PUEIe7DoGNslmAmCrVv4dOC5AzrsBX9oJ513Y5C1zmfCtwrglxzLtqCj/NUa1AYpZKMhO8MaQcBB51XlfM4D1WTVQi+yHZuYAN3cPWIjAsgCURKj9tk3DjtO4a72PzYND98Nu8cfvditj9cbdnJyroBcDxvC2PkEyO8MExk6uls3klsHK0ktsD/Mz8Cg4PQqho/A7VrgBNZFSdsrgYGMC0rqZGrixZz/Xwg9yRHKiKolA5b2bZFiCATWoTfQlEj2HCaOgzb9295OGlct7wtAuQ266exqzSdW5YtPSokg7Rr8BOzbkDapml090AFHDB5J4IAx4UHNKNNmrWzsS63Xik0tk3Yn1+99uqm/1rp/gnf+7HxvS2srLtiwFjDcqnp6OBxgovg2eLBnqA0XHPleG7CEsqpBZq+qSqoiQ4o2FWVwr2KsQ7/0xCHVgcPggKlUfQmjiqXA2gLAKuoQ56/f3/keVi3goet5sG3tyLMw/wRChEiCsdJ9e0i6xwEekHwIhrHBOEHIhkj0CMPKJ/eabLpRx5IKCozNBCNy02alBurm/p6Ibqw9Suvn15Z8sk09pth5R8qtQ0tCNSPlknrYKvZ0AS/s0zXIRpgobrcbm5kA/Ts6HYHxYsq2TVVV0G8LpougLGAxT6vgZ5adS2+7aecv4eKMQ1lMc/I0vD9URR1/gw0jrF+vL09gkJPbQj+MvbBf4s8eIopL+ogbGuhteb1GAZBCz0HYTeOmlfDgBgHeCBvLXByUACXSDu0G9TGjSioQX4XskDjv7C6/A4fo8HPr31BubeNwz81i/+krbxNQukh7VsolkFrJ0dagNrcN2fzRkOMCKgW+TFo6t13oxLqqvShvrrEhxLoALHgKUx1IyAVGTYp0rAaOTkRqvYTrxFmbVgXxRQ+HkWeB3nw/gweQd3mzxBVb70dhkEY1gKcGUBcCOKFda3FKKVSiGe9uEkSN34FCZw1PqikHyHqPDuNnbsNPHMhIY3VJX08rR5ysNbrZc/ay7blcdk7zoZz/ln5Hv6Gsewc6PWPrxuf6yHShJlcUsbxDOzaDWU3cBTPiyvfvVHLrpJzU6J0D11ZLkO1pJK0KgJN9PiFEielFOMIYixChNBUhxAUOdK1wBekb4H0DYKieD5rznFqLb6n+zVCTQE6eBHyVrCxxu8j132vR1b3II4zSkVcQbc1c9NkkNqun3p3F8LxbtAT9qyjZdGcnpot664DASFKIFGZzRJ+3ndzzod/ev/h4TdbaD/GGK+p9/G0LoPuG4rGOiCgvtn5ePdMmkGadgqOF2dVg2edxADCIWmqrETGMlWVsrOBrOAiCrKfzQvIL6hJX46MsanQCCBgahGExbMoHu8INKRrkOePKXgWLY6srkUeIF0Rg2GOKKxxvxYT8Huqi3YKAdZgOSNgapkXUc0N5EvVUcMviuOYVZZzd4Ea3uCiyJwg2tY19CO1N257Z3y1HL6y+HK5XA5/yZYP/98hMPb4s/bh44X26Iw7LQzQBoBzutmkJm0XRODmeB1KjuOiZDfpUA0LdO1QllXcAVZBhUPBZDzyGaKBCw3eMQtdMh4ARJHN9TMgphK8v+GY2vbxfL6/B0+6WRR0gI9HgPBDbiM2n7h++/5EmNI1MAaUp8eTGP9H2ZX2OIosQWwJ1saC5sZYCCyguQSMDIjLIPyB//+bXmThHu3sm+3dtTRju9t9OMjMiKjKrF7bfmvhlMH0DxPhN4KLx8rU9bCJtdBJRDg3UXNS6mPld+tB++WCwL8HwbivYzr5f2pu4f74/Trq10Lye1KKCb994oITRPFyOlw0ft9oFrXLUURBFlGaYw06zzZD8O0L9aZ4xFueD8MzbQbc59OA97Uif8dxm2vQ5rB07eqS+GgRaXPbBmCUwg9KFcHnuq5qearnlUGJ8hcFWeAFnQvB51NJDPzC9YrRcxGZQYCkH/rXPBbL7C+4SulIPu6Vhs9tRt1wdKSFY8aOfQ+hnA+ijerC5hVok1lgc9LU/kU9VQJN5Ig/h9u+1jW5/4be6edK676nsY8hn+mcFPr2MrM7Z1qEP1DZu5iQCbSBYZt67Nxph3Gqtrmbhzm/V22+DcNcTNVI5r8tugX0WvvrukDKFS0iq0Ptct0ajBJFmWG5YN3MUCMPpBuUnmUh1oLIBXMQVMjhLCuDoEM9rLsOT6NsnVromnFbMhSEx7iucwP5DOkM4tBsRQs1XFamVlbMAAAgAElEQVRCj3ZckoS1qUGnKuztHARGjSc2+UGjSifuT6c9cNx/Vcvc+Wub/Wf/2YlXaOdRANnzR5HNnfD80TFFRUTF1c0LbWcpog6uCMEWVV+NcPrz0iJnp6mth2WOB0iOBW9vLDLcCuAI0+WXNa2h+FZECi8qM9XwXC9w1ShSLdWLfNUg2RcBriAKPDcI6M6LMt+NghpyJgO5+FQIij7Hz9kQ3q/n2L8gk+LqmSbwi3FoaomjKPgdZVtWZJJ+eA+43iKNzPH7oTEnGp0h//Gvdrl/uwHyXnTl2JDAu+qxjh/qwqTuc5mG9A6033yAjMdvBDITH4/ExBVONbsZngCwD82kggZGFNC601SokBXm1CEjs2nBW+6g2ogPujqIIEzqevSIXvFQNSRLpVDLGHoqsAoySt8gMICch3IY4Wu8EliTlkbtQwy3PiK1nscFhF7PJJ7nFizfpriQ1dbD/dyfsX0xZUhlXeEPkPcCuASSlZKIhufYlNtOHb+cavpffO47W9l3eDf+nvYeZbYKSv9Qa6lmUJu1QnN5sqKYVWqaokjqPnX6ra+SqnpCkgwQKHgf8wLxu5L3WlC1oEoQL/VU1ACPYCkj5F6k4hag1DH08MwtA3dRCVogXkYWPm15gNRAZuN1qt/6HrGHj6CDNa4DSS3xM9p1GseU9oRzCPQJ7BE6Th8noa2Epow0ThRZJLuh2wq9DRTv44G5T35vCxdOP4+B+vaYeu7vhoF+jlFz74V49myf7dwnfij2IPaQsGy2gjj3rsiK3fSxllZg3Pm1rePcgxrgSpcWdrVYa5hXiONyJdGLdEUJ83d0EFEqA05lN4/+A926njtZXtdF9AqUP6CKO8kKAgtQdRnAhKgGyDOqRGB5fo4y2uYP4DdMG1I4b8chTZK4su+OQ3sD1PUC08HafimJSDWLtNpM55acv2axTu/BHe67v8/z13bJ06+tZvspSO/jjui0FVE4UxfZHneodkdF0LSLRiM9pqaEoX1M+lflaE6fTsuQL9Orn3x/hViD/5/yFiHolvO0In+B39oRFwAQGLICseZ5npplwBBAIjMtA4yhWtLtxuCMoGSAnmUYxCaWdEUWg2HqwkWUIvZIS1MtwNWZpvk1NbRmP0zwwpVJnuMeJ+Y9jp00PjLLRrNZsnkRUfnE4975ygsc994A4969fr+2b38/t/d/spltH3N7m8/prJNISkyBjZah5gm6fZHBZ/zBRr5qCVKi6rfNdGBtt+01zH04LKAEH96rhMEA4bpuu3RZXbsBQscFZSJxgZMFgsA9qIJhZHiBZ6mACXxh3CTc8D8izwOaxlVSI+t6A7ZRFPks4VELfMgdF4oHpaAYC1B9NazTUiOLqfvvBd+Tv2i7FzJaFmmrXm7uoqiDerXjkYazIP7/dNjY3tL8/RLpP6ppFDyUBNpL4WlWhS3rga7EC4/AR77COmqmclRMlBYttTWtmYa1GabHI222sW2bbV5w+buihbKgnKUaX5IPi6DpwJTgWKSr4WUlgQauUCXDQLRFpFKy2/UHEJQsV7pdbxIAiwDmxw3A3lQvg5oOJiS0F0BCk4iJSDD6iPBuzqdn7uddtBCDNdWzudj95Jia/awSm7rzL3piw3scjrJNByHQfDSj3veRp/xu0tiA9N+1Bn17et77JrARUZpZOQrs3B2BjZLBONJOs6abGsqvdrdN6qjb8jHf+rmN06pC5pbjEzZ2yknV5QQdxG0NAxvQra4hWgJElAGgoI0lijXpxtDDI7Ctdf1ggYYniD5EID4vAT0kr4uXWZ5F5AHMoP7IjYCmEXxIYnK9UORTBz/YVNP8eDrivaKO1Ts1uV0uNNaFck3rLfDprL1eOCgy/x5X/Bohf/fY/c2p4b9Xy7tBPghfDXrinWfHFLG1HIEGeuwLZexBEeUYCWtCRzlh+gzvzpavyzPt834A40112Q4jaDevoYbHwrUKZKaL9AVSgevPFD2WIbmAryOaAB63DwkfkSzGHah5LkAykNSITCCIyMPHDDyK/OsnUMQHbxCAgNHvasg+WJCiQ5mdl3qa63bY+qHv2/n1QMpWIa5yGJrmXbFDBXWGhtDlA635XRgR6vI+gXA+73M8u8o9f1Hov1hjYfs//HvX+73oxeuw0Ac644hmCfQLdQuIPB3AICL47Dg27TQ1H1PvIFHHaXjECVxn+lqhUdaindfag+snR7BQtJVlGQCnCPKWVBtSlOJIoohCSn5ILNBUCjj2CGASnHgNu8MTvNiIIiQvVUWgR9wC4oVy8QPVRZlYc3iWcSnmPs/JLM7zE0KqSvtEt8NHH1L5C++KgLcCp8afDiLck3gW945/gd/T9Stv//j1lGju+9ijNh8mGc+sK597H9AmKEcm8OQDfuRFJ3ttK5ejnsJ6a2lSPeLnE9f6/oCT7R+PPn9CJ88FraLXEaxYXdclGf2ItJ5K1suFWCEBYkWqcf1k8YasRTRer6AIgxAkxK636/Xz8+N2u12RtxIlumTgyyKqiAbVzIh428PPAOV0XQnrC7KAc/PnNkcpafp8aEDBfZ8k9+Tx0NMmjm2dMvbAy7pArfyCFgv7kX90RC9D78xkLsdx3/5Rqb+k7R/vY1TeC6OH81v30eWh1TyaGxAE5SIcdFOnblrHqaBVmip55M+4cZC3ba7dJxLJy7wuSCJ4MnJiHYRy6UcuLZ6oCJaIqp9HAaRat09JhbijpAReKG1U4CSwBTD7+Pz88QP4/fj8AHcgbAEbi0wKQ6Q1EQdUDq0s0HKL63b+AqOxFsBzec1DFU992vTjq+rhv+O4CeMUnPc/uq61N1UtCipJOSpRBEUUVAg+UEQR9Ig8LCbXD7fp//8/d2bTNm2uNc2xD0/U5VprZvZ6AIHELg3T5GAgcrlIemK4st4l2f5KfU+v+vRkVdn3X9NvJUmkUe7YaonSd5vDiAD4pq70T3hK3zQN9rQ/imtZgFUhzZDuFwiYLH+c06C8gKHAaA7ClCULh7zXIzwix8NZiLgqbk6iIRiFd8GE8Dd1rKo0l2V1o4jWi2w1skSuQ7iONHHXFUFOggg5DMYCzHamezCWyzYMIT+SqnSS8ho81j4+VJ1JJj5l99SHItc5c+MqbgryqigfTgIaC/os6uNfVY7GNyXxFH8b37ZcND4XALbqnCkrbbHyE/yOI1SK1BQ91brrQnAXyMf3a7qerIsUoXvapPcwOeebR3kFPy6DQ7536HeskW23cEO+Q49BCqriwXhUtZY6HjOxWbAizMY8p8HXVLgcfrDUyLbhebudurMR4OTPAldGI/6HlVVjzGgKtkwRDA0YQg+SOyfJLUi8fYCMkoPy+YtNCrZ8WB+KPrCi1wdzYXsu5/mbrVZHTIexp6nx2cJTX6vilx7cpwtEW2Lj29empIbcp9SApO5Ict9oQlNzQKJjrNnjwOmexeM+KYpNvEgXxTp+5Dx1D+B7WXZA3nY8B1KDjGI7vSQ8tpvPxfuFcPAQdzAeyRzxoYvghMeB2XUdC/Eb2RG8DYFr4xuYEEaMxvzDmB4KnOnCOxnNmpBv4hRrTgKT0Nenyyk8vaIFy/xcBuyJXhS+MQCCLKDM9Y2hK7LBLj9IKIU1oqYo7zbl9pfHcV32j7r2b23dfz52bzcaPwfgWvUm5Da7pl0faAG6pHMAviN6Gvtmb3I6lcXptD4ZcYqQrcr8ll+zAHIdZNlhXSd0tuF0voTE8AARo+4ynM8Rp3AiixHKdIaIRPaL1PrW7U4BFTCaOl6pwnCI3dWYzgZHZTJUCSTiJ9DnOeEZ7gw8AkIhQ2w9PBeECFzwEuQh6+a36lDExWFhuEU86Riu6Q76E6Y8vfPSZOuh3BTrrOT6nKX17aIUouOg8f/xlR9DzH8a0ufQzMfasHr9msCixosiS8TdFzZysd9C8Q1zMOCElL9JT/qi2Lj3EjQrD/KqrMLKYcMJgna7R0hpc0fzEkQqrKbtl6G3ZMR6IufBAl2BsoDe8Tha7Wz+aqzOYT6CBf7dETbocnQ8caeq9grxDlMO6bqjIUBo6nhCBkPFeBXcfT+aX/dJFpe39ALSfkBmTq8FSGAQBxvf1Y3DuieDQyhuD0ptIHEgBiaUJbPJVTj19kjpt8sLPr0AZr3Zol5RXnfXcsiw2RbrGbnTCJ+XAonR1xfGYAICqgzMyYQVx5wNKazKOBXN52w1ZDxQFIhQBNV0udwLuT+noUYCHDThTPQki+REuNQQ5rJ3NpNahHt7h9vqGNVuViPJeJzAaGqkkgSOI5vQLI5mkBeAPLiDIafTfajNz9ktyW5VXmbFCXn54GcZLJjHhwlbhoy+a5im3oPndRBE0lrHO+2IkySx2bT1sQvsfztffz0laIv1QzwI7YiqSU8SW+BlsfaNtceOonDu2F/7Ez02Or7uryeI2ev1Aar3gBnPSRmcs8zxuuLwaZ+ApmznICoU+SAYyFnatE7/tARcahWtSFUYx6uxMNjsiCSHgN3NZkdYz45UJEDxC7hh7a1wQzCW0ZgRTRZtMfVBAnfne6A6ntmpIA7P52SPjzXPzrf0nhb3x30N3wPfMw4bt9Ncx67pDzhT1NGlTuESILnIrcOuCVEq+n5BrZ+jMc9yINuiRczK7A7lmLXgf6ApPUMBoHd0s6f3FYCX0pukELoTUCiTUwD3Q3CN48P1XN2qCtaDB3iQFtDwTEggJxfQEzBa0ow5MZYJzBKcZBcxIGFPRO5xZ++Os9cjoTY6vr7CfMBc1VrZR9zwB5t+yIcKqUZ2I1AHXyDNy+7cu/Cpt1PWhqd757bMH1l2drYZmFW52QT3zT2NdUM09x1OvmEMTEZtvymZ3K7GFWsdpSOOqFofgu1zHrTxrcflyTi0oCofp1uscCrcddwQOM5xFk7HK3LPcA0W0/rg7KYL0NjE9w14cnYOrgXnBy4hy9VbB5gBBYC43YMkj7okdxXFhDXUaLtxV7NISVRSkrHlkeWNVYYrrLRbEXN3M1jPFgBhw3Kz13dYj3TG6lLoDkmtaUdkAsD4cgoF4mneHo5XhuEZiWPqZOH1ipdzg/QOTvk9zsvFBgCycP0UYazrE9dYAD5MQ6wEVAY8xnwRTTsyS7Hyx/7wn9dD+cV6LGfI9TpQUasTDd6ypHMpGQfhxa4BhTt7+oPNg08+8TcbDpAVMc/Cg8c1vToh3G863TogeYkz1aYJErgHr9CGgEfE51AQFYLtSLMAE4hMYCoJXmTT12C41Xj1YT3EKo0aHWfv77SeyIHkM/C2OVMmoQOYu5zDeEgQI3a/7EOID1Yvk0sCrQ0WGnOi5nIvFofTZLJgd9e9uJ8myHsD3TT7Ug/xJDW5UUhq19uX2kL0t37spX3eFP5FUcTyXeS4Vt3OLQom3DjTQQaUeiY3ogB7e31jwmYHw1xM4rTAi0mzAKocxCC7Zg5rjVvWHNiAEs4FGHa7S4+qAM42JlmzSDoYwNFstxMZTWS8I80VwRmH6qpOfGQtGsDhCNPRFclcVtFuCffkd8iciFwea414uADlAc4HycFDRKD91tnfqvIWVgFgrTg/HpsYL3zByX1341Jp8pjN1GXuO3mRB5zJbjWbdX2sLbV/nX9pPB9saX1ch1CswWebFsC8zzmRl57JZR0KzLcwlJ4/6B9M3T8F+f1wiNNzVjyAt0l5vkzDyy1H8kHOgxHnWrIdDS2hUPE1JLaubLULdkfKN7YZpvZsBiPin9nb+5GWjIYUaAQKgO9OA3PhX4+zI/MerApbzmZgzxGJX63wRjxE0JhtWRFJHE2DGITm2F+gt89lGaQnRMZ6s47zjc8Sr8ni7gT0QcFblDrN/ovMrqZ2q98UQ7Otj+6MxudU6O9H8V/b9D4vtiD3O+xy4zZPyeT2MpnJgVvb9Ml6wcMyV3fXp/SRXcuqpLTN7o8KLzXcV9UlS/AOnCpcgqRc4Ac8gKLIIq2zhsx0K3I4cJAdmMnu+A58mL3i9vftlWayI2sl4hOPOM5sCLYVH0cMPtLISIHvsB70BpkgD/BHlYUEyPLISJuOht5yNN9DroUP0adVZtf7I3gcHhwrhxuu2c/P4rgrNXlCz2V2ilhE0hb18e9NUE8vP9141pkmzvUESZHYysvqtwyobYutUXpPMQf9nrkA1wRmiJNGarOgPD/iOAcvSPZJWN6roCyTLU99abX5FuHEk3fQYb5TpHqiKE0HWTE+AiVoDWLC299///nn7xuyGwwKrEVGxIOFwyEproAmtN77+9vb6xuclGwaAb8idI+t7bBbS+jRyFMtzRst9/j8nATo65zZ/hbkxT2PESlpCqriD/TUNRebHpJ6v8ONWD1qNVmsDuJUVKu+fNbHrM/PhatPLmBb7yJs/BFDLQrl80CMsYC2cO0blz1xlwDXyLi9Qbzu+T4QF9D1yAMo3byqm2Sv99t/bF0Lc+EMG8WMbiVbJRqk7g1BEJckBIlYTOvy///Pd84Tvbz7rdl2t10z5fS5necaReECSgMzLlnPIoth5bdyVYINWL7RG3CsUjEhSaPa7CZyd7ucz51O53xr3Kik/EAwM52Jp4U2jyibwPVy8f0LABRLWRMD8IqIBt6oKMUjSB/8MJjupDtkKWA5rk+iABFLsHJWcYjXysFoTTcdomf0IQVKTi2VClzdwu4mWLxCRhaj/kolW8A+DxH8nR19/J4d/bnZ5fEhn84q83ZGFqGyxzHDSSWOvqqlvGGUDMRK8/C0ck1z62xgjOc2kymLVhSP60MW0LoTvI83ViTKJBjMDQs/Jb1vPvegjCM4gRkNnmht43Y5dg6do9+oNmZVambtdqOf9anNU8gmIaNpBMq+LwIK9HrVIuUYv4reEwuZXSYQpfg7HBbrrKUvEDoNl0v75K1WwTiyGSSsDABo9iua2x7A86qS9U0OngjPyKhp7jWVQxa5b2j+RTjuawY+Ab73kCtCMPJMHyKCyZTSWdXSmSMAemZ7ZZoDdz03t/PV3nXYMRA6rSXcxniBoHUSThg+sNwIdyspTbKxZyoZVJcJk9dqE04AqL2Odhfo4m3nnzuHhk+sZghVLmfosM8/wOqSoOj78lToN9C7I59YAfphYXyM+NiLwM6DJtDDy2hBJYZSKAgDBPKnub11XXN7GvSNSgFEvVAxwDYzEijLVi3WIDiemssmtDXpTPv/Gchfqb/OfXL5INe5s2Sb9JQrui67ffKKWjAteIq0Uui34fA1zQn6mrUKAyvcrO1T7CGs8mJYvGF9aC+6zFuSttPVvkhGrkqCAAOP6K1GOaxCkG4+FdGnLN12h8OR4DFgnt7OneOZQnY+H/H5QqPILyGAF/+IpwO5GaMaup8k7UKzID+IH+Uu5a9eLteX4NzFoR21JmxTWwdB7O1daxBs95bGJWJZaFMekWxSdOUwEecDlOxj9nPhtjQb/JhW/rEA4nuhPuHk5JkssaXT4BSwaurpDFs/SqVK38BvSc20jZJ5svLaadWvDPaevQ1lqDFaxg5MM/hRvR5B9uosOYodL5KdMSslhBSOoJYk7cjEAMmx09n5O1A2KC7Ea1R7huwBvc7xCODgSPiXiNyR6EIQIamQO4EOhA5ct9gTCkLqy0eRKsyCB9nHkD0LYGrj7jhcL1k18E5Q3rnlmkYFjO1B0UqqyiFAqFihlE72yspOLSEasuLtqzie+2zr+3ss476fHeou0SJiFGCZK+WznFDOQr7Ntt42uAIUcd5+MFjPaUG2juHE3ma9thfe2kO499Idsk9C+o6L0hRQHjYB41OVZbHXMjPFtPi1Gj0nQDq8HzpniiDQOyPeq1Fx8cUBPuRIbAW9243Cd57RFiZRTU+iwRqTMVWRQNCPOsWvWZSiEsRu8VaHIjPL6C0Xi2G8id3Vyun3B9HWtLS+vB+lwB0uabWvZnNqW1OSvhauC8hJL59Mxn9fbfjvPMaPI/HJeby0XEnhCFxGLoggDOfeaNlGo2s6F99RDE0HjHvu2I7j2vGa/tbejNnds0C0yvoMAtekMguBa62ZVZHEQHWKaKQxk1wKADkeAB6F6iKAUbio0PjiHaAeid6RKnzZAVGoLNzJTmJr8RlTyZ7ORlI5enqpJqKXVIRBDOE42KQw7Da7rVZMHVnbjmVYlhU4g7kGj2uYFoKwfKVQ0Pu6wg67dHJDhitIctz4n1OzMuL97+xoKnW/c/tLFtfzdGP6fs2GC7YL6TQ8hVIAvVW1tqZaBiKlElg28ypz0zrt3fnWA5mMxzFn80jRhm8TqMukW37pJjXvpzePVu+ZwW1vUbynoWYNuIbD+x/CBHimRygucWRA58P/AldIX+dAuwdzuPPpLsTtNiigIzrqxAiI3jKrXy5/ai5rJU1a3yZrvs1mqxWF0p5rWw5+4UEY7Ptz1yrBlidrKHUDIvKAgFka3HNKXpGFLZLo+x7j+EeGKvW5yJn5PQXxiRCVVFapZB7YH1hQK22Id4ErLvW2aZjcAzKH012ZLkB0gjhEpLxAsBcv8XueTJJ2ReY9oEVlhC0vSfGM2bkpVJeFClIz6O0XetDQg/9MuM70FPhydMB/vR8EvYvfSOzejVHfC8gIrOZF8n/Q3yp9hjh0Kbu9sJaOf7NeOYT5Q8TenUwQTEWLSbRebebt096LuV7DMN2BCc6WKXDXHfvRuC2Qi/xYLJf7AvcB1FTqP4P2qb8G0j4rQXA2ufswpGKV4InSSr/vOJVSxUqrJZVroAZz/Exr7q6COdj3uDX2TuNoCZ4Rs0+l2fKiepNR61u9fOegEuw9T/kmQQ/IM6C+o4ZEeIfDjTJ24ANYvd8FDp/e/+BB+Bi4UINFMP0zUAPBa1z8WyKFU0TeU1Y/nqXEVH95ks4OtnMgekHUAvi88dgbLsbjTRietoOTHsRr29W0fRDs3YKS0fLsxVYMlTc6kp3XFT0rjeDcgPwj4vubeiT3MVLZr0PKyQ1CNhPQDaVl66VRgWgXKqW2ubLdlQuja4drBPDbUzyOEChHy+V64w3HQ7aCsrraZYPxixg78gvSLlYoJLKogvTfGPgCoxsAhI1LkAJWtUTgaoAT37sSPkrjsZOYR2AHfC+AD8ZRHMgMTE6qvtMe/dIr6B/k7hWSVyeWZbZb1YfxBOZvslxEkbfi2FcI4mG5ztw093O9oLmGQiqvKnLFIwfJY+9ilmc7cqnv3XlcyPBz6XnqXjuCi3m8byWU+1pcGsJp5seHTL6tplWjoOn9vt7nSkZE6/Ptln0rCJ1OgUz8rMN1uGl1ly3pRIatqbOVsU4NgitkiqnBmuw0qdrW4DBg/WnmRvAJtH5A6ioAJgLXAIJ/Old+7x1SRywPIn0HPO9wFuxJPm432AAmBaeUQVY2RQJhJIrNN6ZdIIJDFndhTMrd4eRt7G28cBNGjolXvnK19sbRC4rkmLlJknm5rPROSH1XGj1TXwv+vxohf6CXpdHL8txUWg76ykWktLSkcmGEAougclkeN+8gwtRhLSxna3FMosWpjNCLg3h5QkhfH7fY0c4GUCY7iJ708jwLo5UyWRmklDl3+NYZDRz8wAXmD+B9/P64Eq6rAPgHiF4TQP2RCCdQpJ2kpEKDfYmyQY8Z49AJg7pINY5skOnol3L3qVxk6qAOk7yYsF8Sxtmzg5h9XnvrtF47W2Nu79uFAkcVdb0iB42yCm8o8HpCnguYWOARTfzZDPRTc399li+JOL0uQm5mBmSBIv3Gw4OmV9olq6IM4CvaluOu9pC60yDyQnvv2GEMjsbm/wXHBWRCgD15Um8osv5As4ToQjIrr88UvWOvsRMXe9n5M5G9j9+/P/hxpRRevx5U5Hc+gaoL9I74BuJCXxgbOMiuV31m5g8ueDYb3eser9J7z+IlydtwEk2Ycdkgot9s8JphsIFd3z1p1mYR9HVWaFbGdl8B52A140GOMchVHzm99fjr50Kpz0VV3zIpmWWeR84mR0UeeUiFG3/zvDqjqtzrWamUtEG7wgWWpuVwrY+5DfZ7O1iPQ89eTCbLKJo0k2C5+CQmHDavKG14z8XXl2qt+lTtSWbldjk25P0foX5U3KugJ48PPK4fCZDXP0CLynsQ2busdmIVYSr9C7nchamqXk/QI1keMV/IpBXsXZOFzSpkbwLO8VSPFjTPa+ZKo8AM16wA2rIkDEFLpaTv+4au/o+sa9FKXIuhAuIABYRihQ4wrVbagjxbLH2ALcpFHv//Pzc7pwXm3q4ZcblGhxVzTnaSnR2Kk3mxIw8tihLde6VfpVTcmgewbvdK8L7LbII33YmOrawYHGQ+ag79pkqu0Wroqmyrlqm0FJS1XWu6C/xlYKp2Qr9GSnKXMSZY1uDBg9fURMMaNfMa050I8j09/x6gFtLHaTseKXKSA34jJOAuq55OV+tVYTl8yq63RRyhF7r3XrpffCvS8f3Adx/49DICFNZDwWv+jv+ZfB5doxpdIBjUqjU17rVswjH9CczdyF8R1koMytktvSUrrQU6Q7KU42XHZamVZ+YsVOqxIq+cDVGVb4TPedEeBHJSzSSxLJnLy5UG6Mp0DZDj1VuU3LZWttuW3cXUgPCdFYW+t1maZhD6IWVozvJ1s3bGYA5gZuC5k1beEAbxQgeZzu87ysIfc2Sr/XkfaRqHhOzUVgvV9BPxfG5/YC0GMltkbiI8I4Aczmy+AxdcOP/gghbqVjO0THBxMFrCIAhhpyaS3l68iZfkgzHGN0c7AvoLQ7UVVVFcS5brOQqyjRzvP5J0Qs68xuyuiLZsMeNX3N2MZVAyctl6x2tqOcNDDwh0NtYeKFZMvU6YXKov1FZdicJ4kYziqR1Fged5IebeKd6iMkAJxhAcs14Tv/iaaNgKlgAzUCjmdvtcBRXFgMHhZQDT0LnNzFVg57tYb09nmMzHZvtKrfclcjhx7vnBJXimQEQpyvFzPhAdXsE3Rc6LMIbByibIlh4heifwzelitAnsUbibujFBF50SXsWogw2UF5st5UqunCa8qdZqNhEWqnUAACAASURBVJJwKYn+4omCbEaIVZ15dRelzdKDVOHljdABlg2kGS70Q12WPYlGSbQakdPRe1hr2mg9HC7j3hs/E3DgmWLHAwMgRA0EkQL5/5kgG5yGMMf5+2OOsLq/XHnVQuHEH/lhS9I/IAsCE37xhz3DapSvvl/Eg1f6SXR4O+8EBNEe5kEFZGuI/E10igiAUtY29Cgb6m1G63EYkAdSwKOrZx1ZbZsih2wrSDEkXkSWw84xHnIuCYnhdP6HXU8I0InN76n2TcqZgj4Xi9TwqeUdmfl6w9AJE5mtut626PaLFhQ0bIyD7cI1Snr+euz5McVbdAQnEwxMcTUKv3/CXu8dAi2d4eCdbidUOVGBp0wB8eD0sz+eTiJWwG7394XrI7zwfUvmE9cfYgdOMd17fOrxRxjxkPY8cHS7g9T7yHrcG3gFsZR871Ubx17vbRl74zCeaOuVhSr9NFnJcruuyLqUh/xInm4q3spYFIlDqnF4M8TxkM+Up0UHspTx5bnIAoFi8LyhvkpXaUOqSKql0I/Mq0kSjOwkNNz2wg89Sr1jihfjjRNQevbWW/YwhUfPE26ejqDndbrzDmYt3jponwGmAfxStEAEoFjxwTECkRbGw1O4Oh9/YBzI0I/hC9983y98HdLPIUdGEOmLZhvIGzPB8gOZki9cZI2Y1YfExhjwxUvCMUUPV7GjUbDY7VRJaumyVEc5qcGLQPLptt5f2V7Zm6petpnlZqHrZUjjjrX2edtWMVcx27k8tAlbdYkrEato6u78hWHL5iiKx+tRCJq/5izXTs9xhhv0FlDM++1NCPbPamg6zPsDChk4ufM5CvAvad6w5TObHlEYMLVearZC9dZ6DJ33Aq984eZ7QRz54iIC/cgD0jaB+lA4HYA9DiqgyBQp7fHGr2CEgFfqbzZh4ifwuxXF3sSfLixz4VuUfyrtFlQsG3lRIU1JtPli6WY11a+L1PB/yKMlsViZV7LkIDeep+wWc5h124C+ttyYJq5sQfHESpZT+p/jtb/0ePQHo9ugJAMjo3s7qj2KwjnF2Rkc4XHWIZx3AOLdI/uiSHvKbrns2kt9D7a8fJEP9Y9IPIS/sdUObEIuCQrscuSk9/PIx3dGlhswzQCEj+c/PLNKOTimV51N7BPOSla26i5WUxNi2K67sAwXmk+ttvxA91Y6clrK1Gh+sUT43Q1D/m86xkXhoMQ7L6UKk1gaDcg3qAvXsFRZVlZJRAHe9V134+yS3Wi9Xmt0gLXhcELB9q2nvYLM+PzMJG4wUgjhEQAThQLEDM5VuZCyP8FIp0Lh/jiApV4y4wnnq35VqzcIMAPPfP8Bt3DOwQED0RdND252nM99JIHwPhANwK185euEJy0pAX8dap4XBOESdXFMSkDSfkUYrGGadWiW6vID7+nI5RiwYF+SmIIplv9Wmvurv/bAG8/henXeZFimb6xIkpR/oDyjorRUDNuQv7uKkWwoxxgn7jQKYo2HdLShB8LUcPgHjaBnMMOcWnOGjjU9jyi2DN4/uXJ3ODL62Gd+B1/D63dBXHnptXdzgk9b3InCfEjjODfZCw+m+xMOjfP7wWCZUmjQNARdF8TwZo8RPN7dn+bQoYRI8yYxFEzXY8dPQj/SbfI7W7WNeqttKDJITvlyQ+E9i2JJUikT0Sv9bz787iLb9cDLqSrQEIWCt1yB4BR5cV6WdyZla20rNHXDVHerwLdtSJpHS08bb8bj3mtvA8rc2xM305qDx5pGzoeir0AsZE8UlShiHA5cNwZMycLDT+HqdtmTuWCBzfbDL8jhTj+nrHzwxS53BAg6wHrox6HeTxnv4J1r2ajHPj4xTZwAQa/5NvGCVeA4vXUyjcJlEK6mo5VtTA1dX+iqQdFW1QmsyVLxodXOI9liw0EiLW2w3Uqy3pzfMkv68SbvdDkkS9UV8+0WpRt137dkRbUJm7d1YxGuIncahiuD3oLmQKphSHhAY6BM1gNnDBXRLjO5UdujGxwEszOqnFxSQbSt3nraPzDXxXo40BkELGQvP+IBBORT/ALboV/EXV/ywT7Ik+cj3X+zPl193DOaca8NY6qscaBtICvhOXEyDQM/2oUrS8UaD9MFJahRl3W7UeR95NhAWxE7yUvZPjshlpzde9cZQO61ZYGGTi6GSVuE/MAgyBMIslaJqmDYlX5NprswFjs/dmKXAItHttuMQdmcYPS4xuzGR6CFGQqWAMngkYHHM0ezDDF3m6W1V+ux4/3tfPeX4JvBv4v1OAIDM1Ny+8m9XpgRJ5dJkmAMvXNW3Z89DvAbRaH0d9ObTJyJ42zW3ibwKcf0R36kGLswoVzXsBQDa550FsRDQxeSUaXKQ4ZHxH4WyA1fhgtuRPh5eRvTWCoPWCQtuTrGCCWpLFmUCJqmbkEl36TPTGM3gpzCaDIONoGGoKFhzp3Q6W/U8zDQg5j7yLNSXaYed+fdz7SLRo6HoMofhN3o757+VtPz+5l9/Zp5ZMnHz09autruuQkCFszxg0sEoJqmTSMQdWfMAOy+z2pN8DOeOp0/uJtR7JuM41gLlgSYo2RHoSOZqnXTtRf1ltTIQywN4uol5ryjK8S7zy5LvYRsw+UK5N1jENXgHVWEVxqQG8KyzIpCflfMq5E53bkygRY3mqqu6Ya73W4dQoJiGG+WGF6GtocDnY/nZlPQmcjrMIXRBS0UJXk0wY7fgGvbLUNjYZr77Pm+XH33V29MrXcS1juJ2pUw4HbLJQZ02ZDgwudAxfpE7ABPl7yPTAj08iRmWAl8ouTySm96jPcckgPEo9U6st0w0huqaxmyIiv1CrYrStiIlGclEAgNF2/UwGGyXLlUusgdYiaQjy2GFKSijP3K2GEotejw5ySskjJ1WVH0hYpjayfJyvfd6fjNIRNS7ojyD5iamLoj30NxDSTbGuqiTGNEeeXz0O2n7QqRll0PbeH+HzypH17PcnaQZ/xFDro/V/PtgfcO5zMIL0z/A2Jm1Nw/k/XOgjHZRZu39lYT89PPzTfNGZLx0KKM4w20I1XFNhdmG0JuqtUQPHByGmgi3909gL1cvuzdvW4dve5x/5ezq2FOUwuiUatPISFEioTEiEYDSNFEpYIKlURS8/H//8/bsxfQJO28medMmml0WnO99+7u2XPONkUbUgwxwBS+VhMzQatibKZh6Iqm9W3TsDO9vbDZB5OyvbU1STyq0xJr1OmMR92JsAYRmm9Qu1lSwQ1IMMl+ouuIhK289A6hVqze82HFvn0Iwvne2+9fB/sydojS4wX5Hl9/QFmYzcabLn/cTEZMurz8Dh4hIJcRnRGqLZf+nN78dhsnmd2nu3yGKSd6v19V4DYH5/d6VWKHVZXtXYs40Tz2dRQcyarSFI6SjO9VgdJQhdviWZoSTOQlY9hfu6YZ2caGtp2bRlG09oIoCeaji3E0+n4x77FOESYqt6Dadka091BhgPh5f38DfhSXGVi8/fHGE48Pq/ervA6PLr3i3hN5C5AXoM5gClEahP7aKzeKuFRDi43+1x8PN1c97qzQRwnAZUJJM66YLSX4fjBdJvFs7WWzaGgOXduhPajV6bBJjqkpjToqNspB1IqhlCOoCnvhsuzgiNzMTzYOuQovAhlraEyrMkb30Ifi2rrSRymYhbTP4ayX8cUHYn/S7VkBN8HRyO1dAJUEtIu4weUaBb+f7wOGR2j1nqhCqx1O7imvW7F2hwc/Wctxl/3gqPTYl12PxyeG+AYi9hZ775oTJco2r0E8/S4EqSg88NGypo3ye38bp7FlrcJ06mTrKHQUZeg6UFaoPMysoii09RRMwWjwTKJ8qlLph3uYilDAWAw18yh5SW4wm1eWdU13F0PDNhVN7yt6tLDN1KZk2YujrT+mDGAM+zx/jlZ4r2f1QF3B2728uwfnE8KV67Ob98t3dHcQb39zfVuu3m73/Hx0cMvDnKfMee0moGcReYucD9DVkwD8OGtm1ukvqDrAC6JIT8nSNWSraINSJnDJF8tockvveTwP4s3MtwIq1V2qmuyFqhigxbYNTVFhMMhTyZnLfJLPU2wdc6ea+X2IWYfCta/FZtQNntsqS7R8LR526QzDYbvd11VdpZUcbtKUFs/N1oEfBD4OwaQ7nne5lAT3Ak4qkJQhw7v+wfxiOkJUZzyJS09gead5gH2kRPnt5TnfgB9336edWDsgCsXxzfuXyJxfdtziQN7C0sofTHFhsvQVurzcI+rAi6lLn3R3vF1T7Au2Wz923QXVUBQ1eOKiqkgVDEsGB6oCw5bCnOvIi7mwzCidMjFuWcDLtOQSUkbwiGC3YrrwQjDkttrub0Jbn3p+uMmiNEomy4mVBDHE3smIOxqdS6Haw5u9499CrB7qjJc77jzujwAV3lrPfO19K//84+PT6jFwVZZuaHUMBrtXxqlu0LZj0RHI98BHKXixTATgzxkMTenyo3JjHXuen6zi7TrKwIENZU3WTCpIFcAlvHgwtag3m6W11BGUXBhhtAr6BcVnlLitVpWtnsGklNX+iq5Q03YcY2g6Whiv6DFfZSva8/MuZXrxKmEQA5Jv3M+gkcB94YrJOYyyoNH18P7z7IVLNIGnUCD9Ei+ON13tsLoH5KVWfK8JQFB0QfL4O+AQImC+Gy43bh7urvIOUQH1XV12emP6tEfWckuJ/moZZOkKxa7NdOa+DCEeJrHKEuz52FSTHR/qxWjvI809UhS5cVJvFVgCtAaUKJssOpcMShv10NDUTb9Nx9dtO2GUeuuY6uvAQoYce7R4c8pVbiHP7o34xmMPGtEMAs0Wx/YGfLPBgJkpH7KV5z+sXVm2fTtKXA6JTK12BP7ljUvG/h6Zb8UNNqbdU/7MggSWJZ3h6rvCGnbQJer0Ep/q82QJ7xEYjxuLmd233bZhtGHtrygyrZ6sArCTGy1UD0fijePxBU3ackCU61JD+IGBH6/WWzD7wbjftm6GhjLcbAw1TB1zQwVizIa9t+M1XRwIX1TmjoE/UkqFbBlH5R68iHuhx0ATl9I9ZqmIZK/YVF8X7ziN+fDDovg9fhSXYA6dCpopDi/HDwrBjJEJUeDdOb85Sl1GcMFZwjox2CbrJHLdqUtlgKOqQ0qb2xjvgyl2MB2pgACKteHQUf/AHS0rDxhq1Otalb2AqKyrtNX6SV2pVlTHVSQtHWqGA5K5vfZm6yCYLmZTa7L0x7Tz4mBJR5i2Hjp+3VumyUM5ew6EAHU6t7/fuZ1B50vUGWUP40Omkm+t2l9vvs8wVt44KlYPsIEgSELa8QCCs1B1XGLzUep50aXTgSaHP7pdWqNuPA0DzEZxkUSYdL7MqtynakOuspS7IRuYyIFaTKsUpqwMNZ98cgFqcVIDeAr2IdyTU41qS5otKo1+SPeBMTT6qm67ThZs0vUm3CZzz5pb8ySJ/fkYfasRqvGOkH8zmROMpntW90AqgI7G0++3t6J79pfI8IefixU+eu5RvDLfffvi6A5ed7ufv/JdJ8pfujZALsB7Ob+7POv2zjpwf/Ct27lvdZd+7FHKsqaUb7rR6XdsS5ph9G149LGVJg4sy/YOzQzmJ58U1jV5LK5TuGCJEZywqTapV01Tp0pXN6sVnto9NPWhM83cRebHVOfC5yze+j7oIZPlvJsnouxDCOrFJTfAQep8gIjqNafT/n682u+Pi7Qv+fF/PTjB5jz6tFagflx6ME/o5ZVZqUKkAFEMrSK3KKHpgI4aMgjKr2B24oPP54EyPLMXi6nWXtDp0g3dgJ5Wo9WDOrTOLoSNsp0rpraCXgBWriCEU4WB0Wg8exvxo4rR5iZGG1U1zLpdrIOsbzpRFC6cyLoN02jlZVSprVZQk3S3c1CruXFPXx0YlV11IFdmb5UfQH9f0dNgaK8ocr8c3D8/nj98yzco4gbFnxx4EfkLQBeKur+QWwqpR05zBkBKKd/DNQuzKGx0e+M55Vo+LRyFPW8V287MHZqLkCpepy3DERxjL+pVWZXhUtCoMB2v3jzM3sjNbf8RY3WaMnc/QF9r8BB6qSo58BSXKNXTnXRDAdfcRFkWZZ4/D6cQgyfdwIuteGtZsdVlUyMsX4ctkcZX2HpsI3V+/QCSBN98v99KiOD0f69e3gk5fSs6lnnyjLpjB4YM44i7nVBpIWcGp+YOHPF7nIhO92KcxBeTxKd8xaY0An4tGNw2dIZU6zqs4dBlGY7wbB7akIC2tMpJpP/ktW6pg2lWxJRApIjIcSpyn65PM23LhtZ3N0lKQcN2Z2GQuek6zabZCs2MVcLmMeOlNR7lhqEXgvBIR1dwEYEpo6EBJGTwJFavVjstQYI/ZSzPx1fe12e4+q2d5lDD4yHsgloAccLNe6HzoJ3IThBU5F5DVYk3hZuP9h7bRibebBWF3iqcRrR0C6B7mg5xo7RZYAhbvZnbQwL+VOsHO9zCoFSwXJDRIHS04LkC3qSkOJStYLgWrdo0SE04OJhpnBrTbBOkHl17824wgWngbbdrTVgjQbEDfiEXTCS4FGY+okoDwgK2lNh7h9Tj21/yvfw1n5/kv+atpN9i9d4YfcHmQ8EBRiQ3nwYcgF9o9e55zVjuK/SGF6BoUq1mLSf+eroN0iiD8mSGqSYyRkCjvA/dKibXyGDP5+I/KScBnbDHjSCecSkCSX0rh6eovm3UDUyAlyuYDmnqzob+bYPuhSnddjaVuXSCV6sohncHdGCUvt9+h68CCOoQ5cKugX177sB15F4aIHm69W5yfAqB82PC93GZ3l72nwNI7fhVgEpPyy46xw6G6nc/WecLvgIkNCw+Ouf7A2AZg48s/wLFdTlGi2299YaLbLX2wixdGOqQUlylbyimhsEHmt2ARL55cpjbJIoyiIJKPX0dzKuWhNJWkljWV6kYjtGmj6GtYqiSOZu6m3CzTmceLV6QBfNghXi7jGCmh6+LW3/MpnBn7BhyztsPvCneerudYMYzrrQ/Pf16Sj+u3v6pxkf068vouRyzPz2qeQH3CWoaKwPRMt690v33Dp00vY0LCrjn59+ZSdhhD8CJBawl8ShoeFSluVNbtx3DdqmyqvzL2LWwJcpu0bByTJIQxEtjQmKApCjqKIIm9dn9/P/fc/baL3ip5juH56m5VDO5e999XWvtsk6ZRsEgx6dg/d4Ft1N2UO+SlI14hTV5+8gFl3RFbDomo6sFOns6eVCKOzZF24Ydraaes3DcdOut2tCzpWwFoh394RDzIFyHDpeUGN5ykYuzx3jHd3FtRWv04/VDAH5Of8jp9gft8qfG6d6Mp3m5u2sYoNvC2DRQO24zehtZD2hmlo24wni8WYfbo9DWmUwg/7DZ+PEmdlInSCyj5WClrCFLhYZbPFcdNAmo0vglZKfzs/frRNqp8wkpjHMxUqNTB5ZkSYIUtSSphqGWFUpYbE3RwuUUwBknXLipuZ5AUHTe7U82K2jls/5sF2wdFLgsPHjFJhwLyF6GeHrJWiyvuJaX471Fjv3bsSW/eMbnvfUud0ArnGfc3SfBlWHroWfA2CoYENCgjAsIPGS13jX7kz5k7rE0JYropYW2YXk21fNyQbHcclFpFdAkkM5z4PJuuFHadVqYvHsu2izIa6RygeoSbMGD3yuo7tTSdFu1DIrs2yQJpk4y9aJoFq9MExvjYn/Yw0ADRANuYrBQD8Nv0B/lztSfNx4GPWZ12mlWa7zujCPsdfsvacuRPU/3DVMBGOKsj6wH4z3dMuGNrff+h7G4gvDAGQBToMnBdCZtSI8AiTvzqfaMvDBwFd1ulOnsqUpDLhZkKG/JgvVXygF7pYPt6SWxU0ysxMVqV5TDZEG9DElsbB8xpp5n6E6j0fK2aUCWC31/FfnTYJrEg02/v47mzOiEJECPXB0lLO3NalVnYb1rcnsPyFzfON5yjwAJy+VRUfEvGd/uQ+L45QXbaTatPI4alPDdvgNhxPi2W5B9eTyJTsUn85RGYNtUuBpqT4Y9yrSWK5QasR9FYRDaqm3ost6wXV2RMRiiakEt7nadlnYi/PvGPHp+gIleiLvLfT7QzM/LgHRILdtVrMDTIIOwTRYxnbskCaPpdDobzCKzb85m6wnmLV3mktaqFGnry7RKTgZuj6s0MKXemJOGucboM0f/nL3mHfmfC7TnL5Ne2PDyAHmQVx2vH5yyfNDZwxl/EhA1MKHHN8Lp3YyRtNODRKBew24AZu6uZ7w8cOtTBkt31wio0KCDYmlaQy+Q55cKgBMIPHzpIkctZzf5nGeSEK8ScEhMz4XKrVQ6VyxdLcvkCHTHazmGYThBFEdhkjqunS5Wg/nGX6znwzZUydvVXh8SZJVq7YqVzaABQukeM5iZlsyDL0Bunx5f84QP0IG/tff+UnY8H9e7B50qgfJ7vH0U1uOEBbNJvrdQYPoNLgy6Bc3rap9cX71CFcdsFa8HG7wsuk6z5dYmszXoTW3p4EjyIgTh3koM8c7Q3jnbBY14+UJI7uEey2oZqTMEXoqgmFr8L2kU0W3Hc5w4Xs1Dy0q2k94gDbaDdbu3XlOtDUJ99Q6qHiw/gHka9KPI6QHx+CbGhk/MSWMgwa7o+j4P+mrM/I+PZ29fZkYip8lvrkhcBK2S0WkCDinsRwFXQHKb4LBdMVap0jFnlPSvl9E6nYZuIzR7W0dVyXxyWQ41BfBHlmf4VRLCmEJI82KPsoXnoyh7IoTlgQOSy1TiFqg+01TI5FDIbU0NwzMs13LCJJwGvme502jS6w4Hq8GwSt/CfAIueI8lLJlY1awIp0f3lp73t5EQFsD7cRY4ds2o74fv+W9x43sfFafu6UkUGyLre2GKG/ClVLKNWdcFd/fmfoQzeMd5wN1VBWG32u1T3DPXy3SRbpN0Cw280IpC1wJBSpKVTOJcYpo9nnO0qvJ1QyeCHySxsDIvxuVNxrpSputeUFSpqDRUveFOXaNhWXQC3TBotcI0CQMoOw4xzK1W2jPYDsKE1W4GYMEUga4tCAYPnwyTf/+ExMr45vOfQxjGd+N9yQFfvhjvefcZ/MXZqWMjPlyKEaXgZTHdHEBcSODQA3gVAFVNQR7B2ev1hu1hH5PJeDlbLaNl5Dbc0HVAfJELAI9CDI6uJDMPKHEpA/pT3G+RgCeUeA34CTSEuPtMl5esR5lOQaO6wzZURXFdy9ZUw6VSdxuEyQr7bX1/stluuli9MiRD0vdRYVFzqtIqzQ6zNFiIEMAcwYx/eLj/ffMOmsEX6/2vrvyx8QTU79jrZX0+0SP9R8hBvAFLCsEqnnOwuBqjwXnMUaez1za7nTb2B84HlDJv/SRwLMopoMmnaWrhoqDz+iTGLUOjhQ9iqbiHxzOBt8ipC64z9hpz5JDKVGpQvSxDTUQveoEx91TXAUarYSSzdtdMp8Fk4JvDwTIedHv9+dw0ezXmhXV4JlRlsV/4nPvxA6LfzSdUBB6YlHZ4cymK/r/WOzuw3sfHT9bj2ThrkYBTw/MhVsoBIuieG1VcfVcqnWoP+53I+cyo4Bys1/4iJq9kJYtpS1OURKd6FcKqcpkX50hCJgiGKooF6oLYjLkl9gufQ0pEKorVRBdFxVLppCqwnqoUFrG9tVWqdBOWMUk25myzBNdgaC5nbeyE25iUMJP1ahAphJJykzzzHQumUK6FBgsafNBfEe3R0wPrHbuy0d+t93G7P6i39dMvaMlLzve4xhDsPwhp3IwBz8ARvAG05eq6WYPc5nWt3uvPyIQQoNhg/RH5PdtLksizHJu8vF7QdYNOD8birAR5UdpTqk6K2fI0gDRKjCQAzwAUfPRaSsWCRYliWaUbrOtyI53ZVENPsaPMo9Ae+ikWG/oUaDerQXtutnv+HHv46tDiqVT6DH2scH/qjqGwo6Z4QWiP7q13GGHxy9v3htT+L3D0Pg6c5OuB5Rhej3D7dJtVaNylYmQkjzjgNVgxDdkUynAoHXbox8x3ly5RvAiSEFVoi1Jl13K1gqLplsUa51z/5135fFPfLyHnD18nVgcxBI37o9h0KMvATmkUv3VtO1u0sDQ4cBrbOCK3F6RhPNlMzIk/MCerudmb9LuCWFpDhVZjGX16QDdAoft7dMsZH2aSLxnFJfP/l1/C6e63L8cJjCg19jiry69DyY/ceNyQxwSUHB+C7sOYYv8N2lQsKAGx3AoaVVBApQp9QPUuWS/B9jXXth2svccWEUjUluUCzxoZxp2lKrut2KUi5kAZ008s2TxXmOmiFDHJLerAYNiGZ9ObP19Og9YiWqTLrRckaygVmlgnP5uYAGF00Kbq9mA+lvSoMGEDc/AxF2t/8pFkhpY/iK8/Wk8UwfdnB92/g9zw9HI/Gs+Nxy0CzszfOV6AMTli0QK6ACM0uUesrd6tXdXr1eurZrWHtjja834cgOsSuF6r3DBUvHhNKUNJnQNBWUbTOG/pib0bu4S5COp4kUkakkz+DqhdqcxfDjl7Svlsw06Q69lRklKZm3j+CoO87WCzXrUp3jKytdvG7gtke1VBd7ka/RYIRLpFYqb28viSjcNPD8EEX5rx39oDz8fP4ezy4OhxYz4T+0KC9C5U5u5vMsUbqCE2e3T4mnedGmX1V80KuC9o8FHh3vDocGgWNBkdqrEMq6XINsaSFG2xb/fkQpFyQUi+vfkknEsQTm4AM73AkjmszaJbCyUgTVZD17YsiwrdMPLCdL1ebWfYGUpZy2BSq/TA32TRVFGAs/YU58sjAb9GuSGokS8ZlmCP9/5eqP1QuO3t9nx2Q+8/cnDf7u6KiaTIVDISx3uu0fcJGDjDISmUTSp3rGVPFWWnXqd0qx/Hs3gVBXa6XQB927C0BgoFXVcKDY3XBavYi8H9lBz/c3IgZ5i5PYnHQvgABQxLKkN/Smq1KNPzvHjh2miNhqGX+usBr4fcDAZdv3vdxLbMNiRE6mid8VRNCD6yCsE4w2H8QZvqSQBHc+v9XOM+P/95/m69/9CnkpN8uNx9yQEXQRABcXUh66Iz3wAAIABJREFUOIefFf5DiEZiKA4IODZMQFe8eQ2UA0ffHnZDm8PJZkUvJ7LT/xJ27V2Jel1YKS3BiGDMKFMKFSMlLwwCSuBE9av5/t/n3c8+oHZ7Z01rWmv+mFXbc86+PZdwGVoOdHAVp21INYkOEBy9anW1BuJKZesjvoU9cht3xPgMqmpqigKs6dGxrMMvi4rrukFpA5Rwz8o9x3asRR7GWZyGoeuPe70xVXnndPDgnCFEbQUCCE8foCNQPJuCRIHVxn8FUUOoDnxTK5cX9+Drko3KwucS39zEc3hYwnGLamUjGPes+XVFKRdwPoHJYEQzhW8Au47TU1aPHUwHl+dQ0p4H4Dqla5joUEFB7cCCOnuZajeqNgwd+7EqOPJSo1RwrewQVJWt4Sv4aTIz1SAhV9drdfjL1tWWYcHs0FrYNp0+3RwOPUq58XgdpwnDbnk+AJlMjEdP2DmO5RQu2MrmF8+FWOOXBX027zvevJgRfDfRe/++Wv4ESNubUmGs/MKkSe6oWW9OECchtwnFBzAP6O27ZKOE81NqdTl6QZIFCaQVPLpes6Ftz0Z0denoaLKht6hgoXxQ46UuOjH6qu9Q3wVzF7OqKsZ6jcIjHMhJakM0BXL2EFx22tTr6rZtruBxtHDTXhKOY3d81gmSXq/7C0rbwLEU0TvFbB7CKACRwhkIut2/n552HKFt2hBj5ZevKeNTLS0evZJcdHj4abvB0WMMOI/iH/8K0QImr6G9/gscPUTELwBEA56fgsfRi4I0DqM4d9IkM0dDOiKmUjUg8iAZUrV6XJVrwkCTx1DgoZUYqmNJOS7nLkKljwUxGmw0RhdeGdrDoVVX2qY1y6GkZNPzGudZngZhHuTZuj+ZT3p3Zxfn4P73Ue+hz70UUqAsr3DJxg6ng3swXTYg6O3HToTreQ/h8/z9AvJQNGrN18/RK+ZTUDegl+/m7QH0yAcGCzLt/qmAQ05Zp+9K2O+AEtG9DcZsRT6h6PlxlNHzZ40W9sjRq5Ry25YqqZKiNAyDsm5VQDFY4KxxvLUWLkUhYQUGDBVTSxvazNYUyMepRmtkAvldN1eeYdqrIKW6cu2Po3TeT9ZjarHp6nZP+r3JLRwaYLAnQATsC3QidkP0NWCCH+8j98CP+xQXscX9YTx1+GEGvQvelgYoUPR09t6uAdGf/n26EcIF0I+YCvYVChc8KSwyAuvE+aTb833fjdPI88wsnDmrldUGN6Btti1DVWp13uZKSuEMu0UuV/YEgZghicixPLAEDytFb6kS3ISsliYZqqWq9sJazJbreBm6SbqM/OC2F6QpJIr63bO73kQIRdPhQ8TYAgIANLHHp2jSuyfAj687Hvjz/9lpfKFy7MppkVnK1QZQBaJRexHRm14BdsTzZT589C+s94/ZaGGKABsx+sDvJmfzEFJuOVWwJlXMebhwmIYMheQqnTwZ2gw1WSDiK43KnjlnOWDegcB5xVGtouelDhkjQhV64nQAKXUYNvW5YLSGvuv4vd7Enye+vx6Psc+d3KJp7GOhCzouq6GcwM+rmEc+0LtXrMNfm/sYqn1U3vPhwU9QtOcP+6EtLaa5p12wgVABGOKP1xDeFOoFePu4VWO2PVsrYLiHJVYHaoHzaB2v49Uy9FZROMs8epwc0zKqElazsJeERgPSQa2w+NvigHiJu+fzJ3KvJNNppS6Pml1VgTyw1abOz7FUShyj9ihar5bu0g0gYRwEAQC4YxCszgFGBwSoO6CnmQnFlyfCduniiul2bwJNsIueiFBzsweFLGLWbL43v4TvK5yq7HH5O8vePImeBqIHhfYDXV0IOF9D4uv0Ar3a2TlQrpTkOgGVe/R7RG62Cr0sRZ8G3waLal1FU6mxBV8PRYgYUFWE/MBH5K0gHdQAXEaPC5KGqldVtnk1zNWsLduwI1u0NMseub2xu3KzOElTKpp78zml3Lv++aQPI+BbFhkdXIBMjH78DCYsiB6mpH/Bj3y5eSn6tO2QCqvY5uf7etDcvHyN3hfE30G5zy0bXR7lAEvwRxQwjCdgeblrmHM8QO2Bjl2XCvzu7aQ3R9qg+xOO6PAtZ7Oh0R7lK0q6msTKhfC8gk2dxBDHRmVr61fZyS8Xeg9cokA/yajX5XpLNxA92Vq0JGWYe+ynBVvGPFtFrpv6aeJDyRNo7w49gXdsaQapXkwxzoXnF3gbQN/cs5A8z6f+bF73eEJNsRs/+DKYp5gefL65B8y6+jDK3/4XrxuxS2ONB3ruhHQGb4bgUnQvxsv3TJhEVY/Z6IRJsXdpkuajZRStRgt4rVi2TZ29ZugS04VYslsq97lHlaN93fRCsACDgmO+sHVICDWo0pYVDAnqlHskWTWX+QqqQ543Wq3XUMDyqcFJg3R+ezbpBZ1ODxaRwhsSxrfc57JtHChPGLXwsOA/Bi6/7tZCDIT6fp588KEE5OCVgLUtBeFQrCJxAIstLkSBhDoQY/n+A8lefHzUdFDjNoDVB0fvDO35JBjP4cswy+DAQc0G1Su63pYUDQLgmBazkmGtgBMclVyN0t2UTe4LFCRevXpV0RoNle6ubFlata4ZkCVoLSmnr0w6gZ7nRqulP0on6wRz2d4526KzOP7Z7eSWZyxwWL4oXDUfBMUUI/rtnOD9/bXUc9gUQLPnfyzTng8/ThXEjGDTfC+2aRsWtv7z52k6/c0QoKenG3hJoESGlglvB+5BHToHtppqUziqsrOA76dZ7vqUcj3QDlrDoWlQqpSpyNNkKkEaRzXpuLJjWlXKJMs6VIWiNVblGM/rDkUc3l8tQ4IqgU5/tWzbG9LRzkamPfRydx6H63AcTII46NBPQO8II0cpeoW9KONYQIsVZ2/A4g7Xv4UKoSAMiS7hZbOXc38O38Hzd0UN5YqXUqrvhqPH4nJCXJ3Z9lPIwbAeAoVyenUKRHofEFdhlQ197SRK/TDP3cxbeLazsEyz5bTh7Gy0ZK3KivuVyp4JxO77UelvcFTADRq143pbkzVJ0g3FoLNrOoqysLXh0J7NZt7MNJ1F7kKCMvHX0XgOaYf5HaLXpZcEXphd8OqZJfmLdVnEYA25dzB9u+FEuNOMK/r8w39DmL+lE+3xhV5ZV4nV5W5Eh8ZM3SnVfo+CMIJQ0oW4FJgbVFkTSrjjsY99pLta5q43pBbDGVotowV3akWnDMrwiqJOFq/c0c4atrInLgJjDnYjkjWI16tVMGZMeFfq2mxJLeAIzh4rL/WXYzCr43XaAQpkDJ3RLrW6fZj2dc7YZRQKZIKjK7wgqYy5mkIkk98noTK61Tz7ETLV/JF2UFKfd5S/Quy1GM//fps+CsokqH9Mt4c6GjZDbL9BP3G/E1CpPI4iP3ZD+r3oWbIdazhsWzJ1uZoQ4oONcPVYeBzWC0bf0c5WvFG6wwKRUYisU5ldBcNSNbSWYZrU79luDnHsoeMm6yRepdkqTahq6XXmaRLMJ3ddqj7hqHEGeI0w1gRCGFDIAZ48GKHdX/99EmRaocey0yb4B+DsR07MwQexKp6Q8kay9JJ4fHzD2EDoMkOSFF8Q7MAHTR1SErpREq3XyQo4Fr09bKvUjhqGpFsmZQBV046PZWwnwQIqrq6QnOeTuO+SWPTAEPmmyNHZQ+Z1DMZAthTLXmSO2TY9n0rz2TiO0tD1A0paPfoTpHf081CxDABpn9MFjh8Tsgc8oWRRbtbK5K3XtmzeFn3NDziCHyZXBXKv+TV4gnawEWTnm9+FswkAv2zdwQcP+3n0jpx2O53+POn4KLyybB0uFhFY25ZhaCNdMdu6Q51q1VKF0VAN5L0Cf1bZIjEqYrrCAkFiWsUryrZMxw7mqHp7ZMuybTqmBs9yzzaHo5jOXdQLwzhyrPiWouczJqPTveO022ffrxMgWn6xP9+DQLNA3Pyeri6YADwm3Wx20xZRyf0DP/X8/Kmm3m7Uys3Q5uXhRZQt0FVi4BFmLLyZ4ug9PFAFdcFmR/TwBf4kCdZZludxNhpmUeaZ9siyLEN16OWnR7+qqwAIAHNRV2uCn7snpMShrNWO4YLA8O//EXYlTGlzXVhRKItiCMYQoYJEE6AhmsXskYBU++r//z/fec5NWOz3zms702U6Uz3ee8/2LC0ohLckCngbYBZVkVSpqyqUhlTTnsEDzwijIs6z2Nv6cZxhGUppdzpePtxQ2uXtRk8sJq/LUvkZk1G6OuDX/2KJZQaAlwODj+pr/xcE39Gy7Th057t1ZPnr5/vmZynO9/ZSaWv++XrlaukngwnYRpYNi6dubxoE82WWpotFvKV8mxSmQX2pQvdVrrVPgeXp1mBLTJ1E67SxE2TZTZgZCI6RFGsbwpJExcvXwXy0o7apV25LHfqhUa87kTqqZiS55WhhnPhJ4vtJqeG1cnN/DGH5TIznWZOFV5ODRxTKkDV6huEh/eGf15d7Iaa0/izVMr9F7/9f4EPFjIP372L3DRBAjHfW+ucBPeNHMZ0HhkoIZVAlis8Kqh13y+t5Pp6OrChL4mxV2FFcaB5Fr6+qktBkobxZkxo1vGR1lnAVh29v1FSqp+/mfXQOoSFCz169o7RhFE6/0TR90lYp+WqalzqUO9LYLtIFnXwKm2u58+Vo4S+pZBnxgF5YwvFu7XrAWixPz88sRnb1WAp53TOCfr0flZbh+31+vOY94iP8PlgH7RB8xzoZ6/dS1JVR83+E+RWi9wyPrCce114Oru+mYywAR8t5EORJEsdQdIs80wjR6VJ/2p1o0IDs8pQdwLNqKLpnWtUbFeGgXuryofEAv5Qp+XTx2x0JbtfhbKbUJCM0dadIjdkiiZIw3CZLy3eDKPaBwcCAGW44KOGxneTo3TAlFjRJHokLxt8QniSstbrZDVzOKpmC3/+ed49CKeYwh/KQQqKAo1d2GmxC9IU5PcvKYS10O4BxE8bK9G2ewq8zywP4nNueYoQ4GzOtayoTWZIlIPA6SBmn9dKXaU/ZEOpJIpClchdu8mldzGPYSRajZZluv4S5TZsKl77pRVvNDlZR6EWJ78Imd1FkwZKyP/TPHkTSxaTlWmiK3AK8fAsjwytRN18xnFSwUd6F1PK3cd9/4r8rrtpF1e1VbBcRvHuGT5VGWEyxxz4cvwWcAE3kDcwXRliiTt2Fb8GUPdUnaWTS6z7RFXr7AAJoYyHbaJw2qXRj2Vs+gn8L9ePslUhIGMM0+KBiEyLhzevWJJMyR5sqbyqFwq1uOjM7TeIoyrLlaBTkll/k8MyDZ3KPSxZg6FHp3YLcfMkOmQO2H2C2EwukYwbytn5/ed5UCiNnhzoEu4Lu4vzvfQevQT5f7gUcZseRFCQ/+Dvxh6DYQxaDjvuXWKkx2+8Wc0g4FE9daxVTxZJnUBN0dM2bKXK/72lqu9buYzhaF2jQ+onQWhFrjOY3R9hSD4NFM+tYiDcELpIOcb+m6nqnK6umIlOva0SePJk5aeTGdN5XLsj11tLP5w9WbEFH6Y699HqcNcBlH3DLUfqrs586FjZCuZWKsz8vuwN4drY55s5/o9l/I4dfbN4+K1nwrxcxWhb0IOh3UWvGeAJhnf1LANAApAbp9RpN5dwdjXI6eDnVqnGSprOtbsyoz4B8gDaRTqnYa6NuA5mAtz8sVFN55FSkjVYVvh9NONtTXQjLQ/Zsb50aM6klqf12v0+t82QyM42tIWszx46yKFoU9F9bYxi7LJd3S9+iNvdhKlIG5KpZJl/YUg+EhhxziJ5+liQ88bEW2r+HeMgdKu9wXPp9n3smlEQ+LnZ6/usNk4O+eBYmcEcCN8qqEtTi3rLr8QAFy8N8RJ90ngd+Pg4sGPzNQtvTJ6qROnJfppQBVwzquOjW0e0TL99Js3lybN+MW/qj/GvxNJ7US7wkha8vd5oUPMXUFKkrm3R1HQilp3aRFAuQTMew6llBgGo0voNx2RQV8yVLLgPAPBA2EdzolhdniK+MQRn3pYoPTw0+Pg4lg/dRujiO3g53dn62j54w5eDpCqjNYqaCl4/PH51DBmIIOSpKG5DCX07ndO4oetY8yKlrihzP9ma6ptup0oV/XAfumTWZ6t2u2miKDvZAp/XQkBNy6qXBULPRUKVTxo9SspY6dVWhG+tg0qzoVAZpE6NIUjuyvaIIndBdWcFqObruLac3rEc+ngtNDCZyXs/veLM2FNETWQMUDgCd3jaiZF5jMPJeMicPWg6cwJvzA3m+irVbyZVWsv4cvXIqLy7r1fCVI8eYFkBHEdInpn6xOewdG9RlmW9R+ZplCTxy6Og5BXyV5Y7MrrrwQwMgAzKFlFhh5My8A27VDgzsK8I4AwnULgyHkYfrkFBrU/wV1dPgczCRZOrZwhR2RkUa+smM2raVFY/BdZ2zRb1rLfnOAlBA32uuEDh6T8NHMWqBGRWwEi9vGzEpXW8EoFQUf2fnZ/8xHjg71rfGubtgHX8wcwVIGUaKTJAUaPNnrMOfBGJ5cIlB5AOG8niz81XmrzCdCgtbd7YeFWldSr2NRpdL3TqEWOq806g4uhV49ORIuFrotrYaUDFg+DKWcnDPnfQl2dBtjWpwZeaZelGkM9PbOmke2Y7tB24WzMeBO6YPCuTyAdDHG5aZZaeBHmyHH8XlZYtwtL2wLOWaRZw9RpSWuePwbTs7P/7Tdymqj70XjDCN+EdwG7BWYwwky0C+8tETljkUPbzNI/p0qV6gJ3uVZVlhO2lahEbfMfu4q5rah65DjefyePLq1UCq1dpZlp4cedGVDk1N9mZC0NudDgD1qqZJ/b6q9GXVtsNU1dJt7JjRwnPcIkyyYDrO6QnGao+atsWYxR+RbHuj0bUA4V4KdwgezrOgHG/YeDfOiZffvQ0SyechpPRQ+3aXb7/peJU3FxAMKlUE1PtFnGxBLoUa1euX4FsBtndHpfLoYRSMx+7czVbBPF8ki9RJizRKjL6iTODD3pE9tQaeWheUgqYQlsfjJmajzb0IHyeNas/WgrgDSzrAuLnbabQg8y3P+h21I6FiMSVN0ezUM7StEbp+amRU6a2Wc8vNQdLF9aWfsOGCdy7rBV7eCpPrX8L6G086S4QC1bLLGlzj3q+/Xd2jyd9hGA+CV9E0NvclTv6PAPmyGAZ9wx7B8GPH8SGSVg8kbHpjxuM5larZahlkcTGztwbdJhjtqXRz1U5X73c6bUmB2vKpUF45qQusHve1P/byoz8O0RlNZgw16NBSzuZ9ervb1ds1tS3T06dRJe45nm5HAOAmbmFEGdVLVLfnGSakPVBvsNpYzlncgUXy2fAapbLgvzz32MTm9VUs2Hjriokc1v+fH+v7Dw7T4Tpy/dfjd+T/IiT4WL7whduMP1947DBTebwaXtGhW04BH4Wa5gD2aigNxnQA8zynVtOK40XhmaYHQRsPHvawcsaAhO4eNJHqjIw6Ecj5b06I1VS+9Atv8paI/n37tM6bcUD/ZPqpopJUJoZNza4DM6iw2FrbWbygxDWn5yN3g9FNb5yP0ULejUZ3PEQD/4WHQrdcaZUQ+tefQpaWzSI2ojH9B8bX6/Xbz3ewd+9fjxu330e7jDJ6n5V/mHg8RX4Vx475acDrDQejX8NAnsK6BBUny7bSZ0dXZE611sr3Eyeis2A7umzalHdNE6504KkIL2cABEoUy0npv7RXZNlbcp7022gzmsKuHf0atAuZDXOK9ZKm1DDoM/tmmIXbONXDxSoMLWoUA6o7LSuwppc9NxnD8RoNL2/shWrwLZutQ9wGKLBnEHgAxB5+lccPbFCgPWGW9uvt4uzvcf3vYynwig2JOH6uq9SDPuOLuzSABphaxaXSEGUSHcFLarZvsDsYz+8ewO7zYz9exbqxzbZ+qikKNbeOY+iqRB9dqY47yCgWRpiJmmQnUf3dRBzazMDdtgQDhg4gFS5Qva3paHhVtUOJg1o22zE03QhNx8nsdGtTh0aJo4C1y8No6bqs3Mqd7h0LkN5ygX/LbceA1bex4gIMe/gT4AJWK6DoAQJAcdh87Fdtfx27qlopVxgsRVAB93iK/D+yrrYtbW2JCvfymiNCYsQoSiSQxAjRAIYEEhOFp+1p////ubNmdgB7PX2O/VJtt3vPrJlZs5bSDKY3ek+B7hGMcxDlpbuD1A+1E2B6KjXiNCaosMxCugchBSXLpNzoerpm0NnZ5hCCIl2tzmT4thpmfDc2ONGnRHm0IzqHIBZgOxxSQtCzGlqEICnx8pqkv6PPFGizdB3uokOwLZbzlOIfVWvzJSWORwIDE0Z8gykrkN6x7PxMVp5nvH/y8QHkB5LdD7Fb+iWH9/vr2Cs9LqD+97SJW8n/yKGJTQ57RijVdMoUTLRlqu8L0y+gJ8Kq9xBJgPb9zQRSgVShz7OY0Ok43kZhtOp7vocGMIypIaJk2d0hKrRmVWeI89d5j6XVOpELxLcUY8kOjMOhe9tu9Ou1Xo+usU13r4dvoJtUbPgmZZBVmQbJOt1tk2S7ztM1vYTJEu65UyrAF6MBZmqE6m9EnQVtURBIX6sFjjdIgL+gUQoNBnG45qVxmRD98/s7WGHW0FGvXxEv4hfeNBfd1h+sAvTBa6y8Wsgdbc67rzg9ZvCDIXL9SKdHAGscU9Ar4mVcoEqDsahj6rpmuhb9I3tGr2b0mkgabUbMXEg0G+2Loy3ERUtRmFW/oKa6p0JYq3Obr0PZp+/ahtmksi2MeDxJdbMVHrYpHAUPSRJQubGMl5Q68vGYXu2YUAs2h7nuHYgVMAAft0dnM0AW+u/qhTmK72L09SRqI+r0vn0ozgAyxMcJq3w+7feThZjHsmA62iss+sg+BzDPeuHuAPD5rfiaos5AC4iS2hhlRs5bE+sgCNJyZ5qhs7IdTXd5qZtCfR/zoAZ8OetiQszEeCUhx5CvfVT+ZhMYpdDHNEm2MYa0Tb9r9k2bkIvuYclZNww4cXrRBmLpu00Cg5kyo/A3Bp31cRBP0DF4ZD2+6Wi6GEwH0FWaXbJfPe/9ccXxhuH405cymfv6PqL8z1nLVAW6bx5NIhD8pYRX4BjDyRYEZfZC5FYB91bg7TeDxMT1I6u5Exp4pL9hkcfrLZUZ221YboPNhmCYSbWU7sGWANy9OhMw0CvBusFxdlFh5IoPVNFZ2p3T1IhOlf5wo6vXmoT3qFTTuoahmYRbTN0eYvXA8kvHjcogKlO6f34GdRbYgbHEzmIqjT6wbaRDf4u4ByYuXcHXt/tX9l1/Y70HPoAnNSSSTpUyRFQWYdWF+6rwHbe1xIxuvxelM7gKyaOdidYt4ZOXB57C4/Rmr7NLpk4x9Yyg6WI+X2Z08zZJUKZlZEeOTWWa7ZiUeQkwN5sNOAizfSmdHWDbxcXR+qvTPsu5HVkxFVOhC+XezC4cmtGt60NzSLC53rctD1I5lJo0h4JfuBu6YZBnwTrL0gOVjHFO0GUxnYzj8Yi15EBvlWKXIzaWsjGLlqKNBXqgNkIYg6mefHqVvFwFSX7+VZfJ0BYgZ8/6GsL4+aVqCzYRFzt2Xs64R1sZnYkrXs9A24wy7hhyi0v6GWdBViTlJthGK8vsDX2b8oVOF4QeLt2beqevg4kH/+EOA2buwteEBXli8EnCZZG+RuXSfsEaBo0e1bie1YAuk0NB1XYsozfU67oVeZbrOqsoy7PttkyX6yTHY8jjyePzfAR5gukz6FQirYSYc8t4GS/3tcItimHw8S5g5fNnpfB1HG5/nrmtVTUtZAd44I3lmSfxkURbBV/sVQxkuC/AbYGrB2bQUJlzxwtM11iRIGwAH6k5RTw3otpp5ToEK4aeZdk9TcNSchd0755e63S5Wac6o0qiHzamx4LjyEZjZQf0Y1TVQQdKIa/e14C7dcd30bLmvN6nrEEoaeOEDkW8ICjiFCt/MeRHMZgcYWL6PHpEiwppTlLvpTLkxPHJ6aHrxr9/V82qT7Zc+ueksFKZ1f1U7T+1wixVLeS6pAEq0tQP6qt9KNoKEhX0lq/vLge3sjjMlEd6t5Rv54sAvbZNBEM1n37ZDmCZDSvJIUW+WhfrojU2E0YB1jqjfLcuvtuBVbZWInzbENGCTqOLdV0DX0szHdcxe/QN6ACd8BDukkO4cv0kmGOwAt5+/DwvCMc/wnJ9QqCUnu4tXOMJ93HjRco1OkH8E1VIZxd7sINEpgqWkUq2oPKhq5bmf1Tg+Kma/fAyFUs9onvD6hdy8/hev/EuMztySr+Mbt81SHLPBFY2RZHM011ZhrwTvtv5BJcNiu6eo+ETRb4mBEUYrDRlo+rsuZ6d3sXZkEg27LGeBUM/6M3Dl6hbNzqNvkn1hmnSDfcdT/cjz4tKbHYd8mIbgEiVFXGyzpfcaRnBKJ5qNrp2oLli1HGDkkO0vVDtSl7EhPqOkq8sPssOpRKHpMP79c/PI6X76eu3siQ5CTzChI43DHgLF+Ilby8Pyk8SD1mAikh93zCLYML23PP8UARJCqH80vUsOr+D76xcClCEyAj0obHH+2ZSPygVlrbYWZ1391rnotXcc27UuZ6DQQ6hPt2od3p93QeJl+pcOkHbLne+Cbkr37eC0HIPuyhM4xFF4Zyu3oJ+PfPIagJmNStkXIuFOHvp3kmj/oVFIVmX8e72/gGuXkw1Zs/wqoHyAz50YEbhwQIOiqA8v1d0VMTAj2MAZhl/uD0gcBxNPR6kYKiMnyHX3ggoOL35osgOmyAhzOCZlr+iq+C4vjmsUbHhWn1sOGL4XUOvrtZlnAfqfKd9XmucFR4VKQMu9221Mol7W6Pqtm5AibPWNG0wPAzTdX0/tIY2YaTQdbJi45fr8WiE1Y3xBDktXtC9W9DVG7FVDrs3X/IGESLfjJv0lD1QTfEGyh1v0e4Z/OKYTnuU4uHyycemBAo/ZYu0aoXK+igL8z/8wVoQJ6U3Yf2wYjZ2Dq8J6C0mLJe5KIq8yCndBmmWYi/SXe023sohbKHV+zrVpUato5tws2rygKLaTWu3z13XT++1dVHAMDbCAAAgAElEQVQ5qyHtKq9i5h5grmRp8JvodqmIFjIQPV3Lp+BHsMUy/e08OyTZfDne5kW5nMAkFAT6yQJrk1NWYeZrB9SAES82jGfotaHqxSbW1Wx6RS/uX7H4Y9kHMa5S9BQRjGQbU6nJ9nJ8v9i0/uOP0qtR+1QzWFPco94QpWBGmbc30GmF9A6UtddLitPrNC3W26TchT7hVte2qEqzh70eBrnNNvYNGpxv2+0jiPvbO7J1MoSttv1Yik9SLpZNG016qwblb61HWMjxPcek/DusmQT+bMgTO+4qSdINFT1BMQ+eR0sYf0xHC0g8gI+LF4MBERRa0KhSc3GMdu+QE+8x671nWVwOfawRyZdNaVB/cUaBPQKPQaDnzVAZMA+DIJ6SfLCZGloqENRBL+eVsRF9z+spf2MMguiDIOm4mOcZlWjrfJ3AftP3Pc/ommbNoMCk9zUuser0aOsg9bQvjjD4/5w3W2ezDagGCZ2PDbOlSGk3TOtgd2tUqOn0U+nD3Z0gubeLHAp5EeGlMKLMH27XeQAZ6/mywLsd54Tn6WPCNcc1tiTo4ICaKz0eeVJX96KQdw9W+/uep0MisCnsPjZteQKu48M7qoYoraQ9E+OZYiv4UQR/ZkqWGovBV5cDVmqdPj+PEvyV4mWOS7cLs/KQbjaRtw18i5CKp/X7PkE+DSveuHMNGLZ0Wa+1/f3mtU59+WN/XgSCVJ2B/l5HeBw1YEgIW2l906hrODyd/mdZq9DfRZRANmUQJoc5fYqpSmPN+cEYFuxL3uTAAszV5USu3YwZLXeXqtWMAdsHuz9i+r//oRomTCPjvh1MmukDbXtxLv16UgwzvN+9MpJkMyZ8IemHvr0IaQWFze01Vq7Rj+eYTCkjjfP1LigP2Q5lhrsKSjq0IcZppkEVVa3OLLKOmKQ1NTHFbX9jALXOHEpOrojyYhnqoXbjEye8Q9UuBQII9ptdre9SUu8atmVHrn+gp+zugiw7lGuIn+ZQN8kXg8EI7e8Rv90b8FigqHkpZFL2sr9kh0QWAeftY3aHffr1Ww0peDWUu6VfvKn3532vlEu/RODsnQ0pK+kaiPH/EaaeKD1iiDHjecolTo9R8nI0hghBwg5+aZptD2VJP/1dEjkr6OUNjT4WkptUbcBZCZCl2Wj0FQ3jzHLzr5xbTSnbyt4FPWl0ZUR6rvY/xq62KW1uiwIzUiRjiGCMUTQpYIIRgiE07yl5nuZDvf7//3P3WidY23pnrtM6Mp2hsrPP2W9rr3Umebc5lbeTRNJwSSyp+Z4NyfIs9td2lLVVLdnTppZ871AfpVRzKIqI1bXFnNJ015cY7YKBRy6mW3EJavxBCJtqIi+P38nI3O0oA7n4Q6mZqJbArxEmFzJIPPBDlWnMWUCZowaQkrrsyBFM78O2F8mp5yBrS46Jc4zSoAoKkCwHQdpEXpD61loOE/qipm70R3LOziBEx74otw3eOUY/lBi/6tyTUB3HvjzmhFH1erg4Ue7KjSfpI3wPOi+QG3PXct8i6jZeeWi9Vn6ZLAgOm3192MznhKQh71sBZfAg5xjyq2waTNSkA453t3uh+AESjh3bVTys/2E6rEiruiBLuYcOOcRONEbeCuL4860rmNGSopgGtkl3E8BsEXCvuJyxQgXpSECTfKo6BKFE3Lwt07Itl57t+thvsSQoGoY2M8BBQ02h8YhkBKN3tuCThNWHmHve+90ZVcxQYeYMN4DULPIsxKaa7rrazJ6ODbHjssyWMcTB/Ei+MnT7qkNxOByOm4St2/0WiLQnbMIsNgtFTdVxPZBKGHERJxcLoDhx37997co1EsApoNXJeqfX2PXoNpgVglfcUqkIgV5PLbRQ9RUr1rAdHR57VUyUF3OxX16BfyUPUG1GoRRO3tI1TFebWtBimulgQmJvE9fXWe+Ui/yWp/T++KHXrU9+6Ui/QZSGq48yOcwc5WEAVGlhauLLrZeGpbdMi/UyKuUEhOlhvwnyg5iwPWydJKgx3hDTXa/Q72PJgRzl8VFZD/B/oMCp4IB2EtDg2GJTgsw/1dZZNy5nG/DHj5Pw3Ct5Gi4miL0/35Tx7iB7yNIPWRAGKROqWbHJSLH1+dbZAzBSZUUO6HCTZaGXpnEUelN9rA/ksw2G/dkQg1wOd9gxOR3M39OUjxH41DtQynS0Xu9dUXeEJvP5+WAw7vd107O1sWnrpmmCrs6Kwgb082G8DoMiz+qnzfZJEj85rkmwJzJojybpiuvEam1NsfcrgUSQkz0T2TzhhA0GI3SWPVMlFvuP2o+n471b76VTIMHJfXnuOBvow3gvNpMlKkE68kH5nVwh23qfVFWyTSA9HEXluk0932vKpW1Cvk/XjKmtjyUgzoBggVjBGXWY3yF676rhv3nh6F2L+ItaQBgy7+NYnHUK3sjQwJ47GOtjwzDQLfANU9KV2PNj+U2CNJb4JWe3lniBza9ku6kTJKjbOdr0i1UCRPi1st7FrVItAbjg+XGPUqrDlDJZ/smlDtWw/0dhkdUE4yvl2pXv3d29Kr4ppZ728tx1HW46gPQjIju3RxZPUBmU0rGSjIA3c3UoJdh6TWxbdpm6vgkRK2zkTgHWHvbPgf8863MwizDAfbVPsmXlbL9ekqmallYa2MSbnkvt0tcHIBVC59AAD64xs6W8ztKl68fxcl2UsSQvbVVUe85bgnqDBuR+64AyA7lfgrRZIu9EgVtu5eaj8XjKJiAXfu3o6L92llN7CWp5hc37X9sErwiwHRnsPTmB5dh+x0xjNyFeEGQS7OfJfXGJGk1+lU19SA5YL8ilxG3idZxG1sxrGtPU+jN9NpCkBbq5YzbkQXoOJT8uapx/FB7+4Hu906r9r82NDq6h8mWE3T61OOXpoEENIWxtrIEox/KiLDNNwD/8OGwh8HFsMmCBj4EUQkA0O/sagtgOe1aE1F+jx4s2L1IWkpg/Trrl3bdXJSqiPE2BkNlA7uzJePsvKfi/ce3xTYHiUZ4ptjAkKlAq5zO5vbkEQl6Crly+SPVqyeWTQ9BC3QfkwFIu2VM/bizL0HRS7mErd4xaQxtCrH5oGBR1OZ3Q3l917ocGfdefx3lVA/KhrvUhrTseGDPNjNdQRhxo8koHx5xdxj4IvuwmLMO4cvIwDTZZW2wAoz7m2T55mh+RuYAd9WGRQC2RRHPoVRFRioO22ykk/d0dwC33r4pRXS2rILS+YeNR5SbKphz94p9gPp5X6KtPFLLyGcUGZV+fIR8kDwlpJmQa0Rw4Jkme5EGQZ2WZBWW5tqxlFK/BFyf5niY53pQbZtp4CqJHZBtsy/+Nvfjyd92hwgeJcEcdihlxe2xCm+h8MAaqSp/q1kwKGm2gL6VW8y13uVx7YWimwVqiSJi2xeFYQ9n0kIvpnMRZQBZWCa/OVyB0fYD15LMt5myCwO+U9tA99eNIpk4XQ8Nd0mmMz34ARNsVZ2gn/7yVfI/LUzCf4ufaqcUa7PE/k+vxBg+JBKOrJ+hZoDkQtvnxkGd5lTWRCfJym5MgkKObcqmPcevJhwQHEHmCgX7v1Od6n/jeH9kLg8d5h/gjq5IYcGRokioP+gB2TDVzatgS1geWYdm+bq1Nw/Z8M23i2EP4bZ1jdSyqzUb+Ss2B1X+a7+pqfnSu0Kcn+HrC9Q0ab0LhmmembADUq1kjUhEs+bx+RRB5+45lUUVrRt0HMjvu6HmS83TvQy9+flGl7uTi+tQVXezlK5GzW7VBUVRZ0JYxbuso9m0xmytVJxxiSuVX+ZD93hm7A2iHYrBx2sX93HofGW0UO5Vasz8JSPT7Z7phAFB0hniuT3EfyO03s+yZ5RrLcu2GTYMWreeGVZvnIM+Wm28xlwAnicvckXrjUhxAvlMQ85aYvgtiM6Czd8PUDwvQb0SRIeUjIQN6L2CDI/1hJ5FGgC0uPVjvnjzOF93EDu+Hnb67R/I3XK4kQV5I1HIW27reA6VcFWWRtlkYe2I8b2natmVNl2tzhrb80sCCHlipybA84trPUHXr/va93qfWUxp/HcAZ2+RoOI+nLvaOdLlhwbUBFtMBlhkMuW6l5jDXZZMCSl+mWCNK5XxIwvIw30jut8CId7HiEtHVxW4igfCWOonILW4UsZZithZjiS0oYP3a4RUVk8o3kOFQDxD0Am/fuNIiWYviEsf450ZlkVDQ2qGEnnAS9DBHuf2UJEiUN3nWSsoSVG2D1bSlhNula3vidvIZNM0YDlCg9Q2gFocMF0SC9j+y8n/qe38YFVFjqHoGUBnqgRJSn2k6mG4kOs1MQ7KW2Rimc32M4cvY81LfDtOmPVZZViyr4rCv99dOUYvt6uOejcknNErlQD3MSTiCwo0+yD8SRHZYppQvgnneXjjWmShRLGoTqS7eaY6hrKdgAxQJv7lFkrxjT5Sn9urh4gpZ8hNUD/doKBcBUCuQlWoi2/dtyY89H5qRmmF5GikeR+NzzsMU3PtsdJKgG30knfof1ntfeua9BwJ/CCRKmQufBiJLPA+Z5ViD2pB8m0na7EWlbXnh1A7DpsjLfHPwJCuQyOFI2kws/XbuOKB2fVhdg0LrYTW/Rt4CvjSl36TgabsdK14Sld5zxUzNf5/Btk93JPBUflCiGUpkmN2oU+rDt0NLFAFqdX2NeLGQu1duPYlmeZQGbZA1YRR7cu1MLbGebchZGkOzWedYgrhPJRXUMdj839ZTY7WOmZTJH1bLCamCRiyo6LGDJL44GJu6QQkE108jXbciN278uGzLY1KnTdZKRt+2HDs7m7mzIcwFOJKHB1DjYjj9SA5GovqA7rslsFkstmPZ0DWZ0MZ/fO4MSgD827fXe7W9AJjKnQIVMWOBE18RayTvDD3V1VO9AVxvK48wqesNlIbTtCw9gCH8pWvOXHc6lY8xlSxlpg2p0CwXFLxv9C6/1E0tPsmWP3E9xSg8OonpsFYb9QcEGVDRTlI+9HPkptVdbSbnFlW2if68HS29ojhmaZSGeXWs8ienyMWaW6cGjf9CCXDIebpUOR/SZgkZ5AtA/YYccIcQvOuWFB5VRGZ46MaOdMI7eqn6puyHn6Xge7xVa0ryn1xJfesUwMbh1CYJUWdFG4dxW4rh/EgOr+v7M990fYkZri6OgTIDgO/B+ehd5rr3vmPwp+/98fqECu/1FLuNGrahdJGH0TuHzNMQiPD/UnatvYljSxCQYIJRHAdjHCcsWDhgwxhnjC2/Lfjg//+btqqPySTz2Ju7u8qOVtpJ5tDndFd3ddXMmwHvok6yDF0z6Zpj2qg72bKP67xMw7LLyzYDHsejF9KafSNeFo+yNK76pL3I3L0ok+7k6ePqfU8BWN5kXJBexEb2+21VhuMfgpQf6uvuGYnlTQwB3lhHivnDq7jQvtIFImxxZpcO6KdtyqrIuxz3I48dN4nmdpC4loFXHBlDj2fUBeY8QnRaVZUneivvgffbzf0cgv0976l9SgFCkXD5ELB3Y+hDFM7SAZuzV+o5HOQxZ+GrZwH7xklUXZquuHB5M0yb5rI54/DWq5Ny6sSlXcoa6v3zUjYoSW7pKUKMsR8PO/VrOR9SPx8Iu6hz/iaa56ofKFKi8mI+vP3DO4+CWdzVpRmK4Jau3mpFj1zKuZcN/jqinr/mbArtUV8ZBoLP1EjUGQ/t2KBwo/gUcKlZeWZMe5/mT3bhf3r33mccypq4b9Sz5XJHAVxyEybayKQWMU21J1T6mpt710DdAqRjmrZmUY8ZRYsfVXV9bTMU9118YU8t26zPuEIZnZMXT0uZkuMUxUqeBIOFzIyUWNr9m3hmvwgp6oVyEGRUEBc/sHvyQwl3q9OTydzby4Pwup+EbERZiVfJTki3HOCeZR8trZrzKY3qa507yTX39yTaOsBNGneZR5puDafDmYYYYWd0IowyKXand5/mZ38+vU+XW80wlZrwnZqw0ZkTUTg0zBE9m5iCEYlCztcN+nhYlpt3geUer7VXV10076q8utb1+YBKtT2tT9k5vGSrx+2jtCxZtIgT+j1nXoslI0wUNFioSOZ8kZTwXXCYQGGKaii9/d2DaOSIgq30o/gE4MUTgXEK7JGGeeAqWgOA24YhoHdZtu2xBrwI4jin62Hg2TqX75j3ZgRpY+7ncQwr9lR3ar3lJh/y7T9P72YwOb1pu9644HcTJaXBVhUOzZAFLH4vnKFpWMhZPpCOa1lB3OVAjl3g1V50RG1QdZf0WGzSpiC/5bA6ZG12eFytRPRhS1bQ/ZpxJ3bUFIDgRoc8Z4Lj+hAT8SimUzVq/K4k9wXgvgkhUEldLNRW60Kg9FpaEqSINqiSyfEqj8cmPXbXCNAW5ZU3d4L9HjDdMvDBmxZKCF1UqWWTngBVE57ytMdef+sSfOz28f/VejlhVeSgWmZ/WiZFA6C/EVIS84Zu4/aiTjJ9b+75vsWL6wS+H9TIHV7gRHFeHvOaaXfTlhUXAVcr1l3n7fn0Smbu9lHMEBb0ThTxkWdFLxU5fVWnvDDgfii26e75nuHGI/uu+Ac7dcg7YQpwD0Nt8y+4fXsgfZAbr2wztukFP0bV1eWxyIMEZ2aJvoxt7WOLIEM3LLpQTZguxspTEwGo6r1vXzm9D7KtA/Gq66vDwUCbSctP+KSTIZtfY3qL266uAX4gfxhsU5j6yMJLgjvg+XtUUxEK53zvdU1bNCnS3vmwXh6onJEhhRzOnPXy6tIpZHnLv71vp3rDpH5+4PAIOfdN2nZPL28/vksPfidAT3FSJc1KD1kSOQDGllqe+C6sVNgbQJl8qZrj1auPRdwVQLh737FNm+OZOQrX2dz1kDHoIDcjy1a0fcYfxJX/Asl+x2g/u37sUonlECsgajCzahkzvMmPmZEObuC/E25okxmKJdPxHXdux8hm/jzJ866Onbps0iI/4siy0ynLDufT9pVCvWslV/XMP/hC/BCU1pw0XZ4UUYPnqbZ8mE14eju2nnCR31S4MeEom5b+rpJihhJvczptt4BnIed7adY2m+0JsVfHXp4naXmtu27v2L7nGLZrs2EpZdhU07mQzB78B6vcwa/7uP8T595KPunSq717sUrE9xgh0PHcMclPaNqEYNTnqF4mQG4zPB9UGvcQeLbn7L2qSqriWlVFxZpl1YYZN8g54F3hdqGuIJp6FAdPHuaCPkRv8v4L0VOaqLdQ5IBMEoQgMrGlElrHMx0WRAjzVfhaqy15PsCEZMW35JqFTREeNnjz6v1+X8dVtHeD3CdC4742Tsw0DGRb6r1R2luWVj6q7PW4/2un9+EOj0UbjdErYkHkoI4MKq7jbxwhUog+mxvGHBUzjT+RfU2/q30bjx8eZ9fIu7iok7wrOYbZrC9peGDVgqhYkfh/4B7vViSrlhy5imQadbbI81RIRJFNpQPYU1/kLAWkPInOAZm9ovrH/QZh5504CsBX3NcWKLFty67Ew5d2dQ0cGRcR4Jm/TyjrNtO5l8FpBuEt79OYsPQmSzhQ9O5BLxzy1dP7KVF1I7jQzg5ZiC2IoRKsRzGONwJ53gTOcCK8wJ5h2J5v6TpevraMkHnjfVfGzhEBcCzSQxE1hzA7bU9ZuD3RSWpF/2kudDBjMvZE2f/pXgkfKpazQnOC4p77V1F6W8vnneg4irGc7DdspTY+IcWeVzQdabMW3zWs0rQsKhRPwfUa0bY7tiLXxyPocAsFYcDBg3RSqAs/Hk8/cFZkAHn3a6H8l9Mb9E2C9/zBUXqfidWnoJFJPrzj1iDz0piE8Bkg79yZUxzbsSLkDcfxchSlORJHknSJV3cF/gTpIW0uh3PGLu+GzgznLcpZzmzYd1luD49iysEV0IW46kgdfX+j2stFVbH38IF9z/NdbvnbUJCDRIEMeeLMzS+2QgHPjgAY1yPZ3dHeqR3doaCMh7MzNRsXiZWxNpICT1pS0/FPExIlTz0dfClrfGqYvpuWiI3EqMdsmi6La6z4RvxO3L83XNOc8wW0RyM7QuVHaQ4ULMwablBHSV4UYdGEKL3SzSHL0vbMHfwNKr/tlqoP7PYtV6dHee7u1/3c6LYmwxIE1YzqRisHTVIBea15q5lzSI7mvjfy7AlBx15KFjZtSmJtWh4bdqSimIvLno+n2RFrcI2jwiFlGyi1p8pjVZcp37lvPztTf4u035tT779mhfKt96+bzIRaoD6XsWa6pjGZcftyOjFRKBmz2XzIx3ekO+TA7T0/iv34mHu2W9dJUlRAmCUQ7yWjPi/3nM64YXieEGoAwFT2Xx+QQgjt+Q5KI4HbWUp1eNEbucui3k7S9LOs7YvihuKnip+lTC/OWZrin4bn1hxLALQqz+sgDvYo4i3Hc0TWyJ4NqRlChUbEHke4JAGIHrrYRX7awB185fQ+HeRofOPzDZT8yJ0aVOJf+gwfmjEyxpo2QdDN5nM70OZxNNdMx6JIn07RXIf6MAFem+5YHcMyb6v00pVNuyH3NZQLtuGVBU7bPW5X4etC/E8pWqrc2ES2SrTWmWAXC2Xo/kR+ANf219zcf+WgeEVKLVWnz/xtuabeVlVzKcu0rY5NVeaoVFCrJEHh2j7wpLFPXBslMqeEIwSgmG2K8ECvK/orpv1D9P3n6d3Q7nvpwryrbu94OhIxSerA4tNCpUS5P5wXcxiwtk3XbdN03QCYKAoSNnOrpuvOm7Apy8ulbsIsC1uUgCE9RFm2MOeut9SBkJsqp/f0rO6ubJffS0mo9EypuCo1DsmAa7bdRQomI8HndLlQ1qzl0nDZVO0lLYF49lbc0TEIVXKSWIYJVG7qxsyg981Q2AOIwndnUqXa/beY+8rp3f0SiHe3irGPQULeiWL3Ticj/CwoYKhThZ9oZrh+sic9Fzgy8VwH9yW5Ftdrdq6oUNnEZZsBtW8QgLy9bFm98uDYrV+w74Kvr4uloC/lkLXoocRyrTbOZVlPCZwKPZDkqKxFPG82aXlp8RHhpUOu6Mqq6Io88d0gjgKmCi9wLduwOFrAraVJroglKf2GT6c3eJ/gDv7v0/scr4OfdA2VToaCBsWpaDrU5rbO1882fX+kaYaJ6xoBvsln7eDTxs9cdNE1LAuK+5fXAgiAcIBWZofDK9UM8OhRM/JRbWeJO9H9v6xda2+j2BIEJDs2SIgBsQgpGqMQAUYYCYN8eAo+8P9/061qbCezu3d2XhnNK8pMcLtPd9Xp7upND/7LJnFAmxGaiNbBX5Rt5K07FQhfZYzgWhQnujTjXd91fd7NRY+8lSHrq6zkhEQSRnFKDVAvsi2TYikegP9etC/4cvZypaQ9areH3UF7+Unf+9bWT0Fr7bM7steAu3YMNvbt8ASRg+gB4mHYthUECHiRa5IHRYDzOL6Z6uYsWVS/tlPbdlXZUX6kZaEGfgPO+3a6InpxFfUb18TwXIqSFfmXrPb8Kjt5cW7/4tQ5eOz7l9fTBeT561l6y9lrWVyldnG7saV2yefitViXGk+gVJkmVQpUFaeIe4lHAXg4H57YRPZj6fEoxZp7IeKhwGrsvudf388aL8/a0OHDAeXe6rA/8DLiuLN2zPTUGkL0MCkAo3uVvTcjljwCCgf5TpJUKhnapR6GJB/KlmL4SITXoqm65vZ6mgpqCIkGzte3M8jC9SzjWZRdF+b6tvUOvTHwMUtw+I0TXDysp3c2l70C3V2uIGUjgMo8Uvu874GTpzEfVJzWi0h4xG4QuBHba03Hl9I3CK7rmNt6a4Q90fz5qKBp26rh37De57HAbcfpbrtu2UmDFj2PDc4kucz6CH52aet2Kqpfjo2jEtYlxfoWHFxYb1Wspc5N2yF/IAZOb0AWE1vU3jkKAIpFvMuOSeFa0j30xnlLdvFID+U9v3JI9AzK9/4Oq4PCFqAvYzNSub3jYrkOKKVd8nVAtANS8TO8kSlFftzAEb9zjCPl4RxrL62Joq+/2z32P8gt01H7TwN9l+h+dIRvPnfYbpmlnXQrru0FAu5NjrKyp891bM7bsMIXO0YYpGVCdZ2+K+uVKm1liZeEoNT0bdeMPYgbIuCJHbpAuTNcEUgQVO4Ld3nzA/bjMLKMl11ehca+CpXl5dPlcj0jbZ9uILHAKA25LJgtnJv2G5cB71uWJgMeoAq5HJJZlvnC3tsm3Y111d1Rt6TH8eXedPIMWds6A+0XrXfQPncz83+S+8L9Nn5/PMrULyvHx4PFTdnGzrA9b8flALYbyA5GN63iqqrDAZ629IAOcapAmZZ+zNUABwGIvrFYfr1ebnM/IWaBKwBMn97Pt9O5YDbluFtx5V75m9zXnel2xU1akEks5BeAlKloZrwtBd6WHCkKP0Qdqa4SgOS4Ttnt5bLrlW1gXPbF2yjq63GR0r0GoW36jp9TwO9ab/vK4/FREN7EhDYNWHYF6fqR40gGNxbvRRfctmzXsyzLj50oQ9ipKxxbNswNa06du3VYYDi1dkXRAQjeevgMAlZDrQCc4nPRUN4NDsnhANoMxgUYvp7gl9NXHlyYk/Vteh+C36nI+67hMl/QsrJq4eQU01uyOq4rJC0wMxf8DDiUg3u8wuMmeaA8AJad7Fre9lVpvIH76Ez+/2Dl+9b7uCj4KHYctIfM+l0el6o3XDOug+8ebF4x7lmSsmzH4Riqb1OeOao8IARg1GRZqtKvgb2ydRxXtfAQd3M/dmNBeJH3PTIofe/tXeTUTjPsdpWFXa+X2+3yCg4mNWHYFH+HJa9cqEXkeJtYaeybkS0W1bCuNfuoqTaQwvEykAvXsoMgsNlgq9twQI9LmPeWzV3Wxn5bEUkEZlG29kM35OXX4963NbiNvrCH+XkJceDGLBle1RD5bDyFbBOzPNlfyUG2MMhUYAdRAHIE2DL4KU+TaqclLHlxL0ugW/hLOa8rizcTzQRfayhzxGVJNyTTMyUab+dpnuS4vp4nomKkCUa5jjs+mqbtuX4ZyUnVahnKOKyqOM2qwffTmhd5keMEoc9uC9tyeRm6N6gWwofn1E3Su/wAABMFSURBVDx7xAxL31psP2kP/HLO/bz05dm1q4mm8L2vWarupkPZJfi8yXLRJldns8wL7kalcS+NfTty/dTxwyQGcEUMWtYq9au8m2a+3LVolvHa8vjmzYUSsKzh5A0b7rns7Fqcv1yakStQWKAAyyt4hzIDoMD1urZvbtMMIk1SMZSroloCUF4cRskAnMcrbj+MPFsK9SbbffA+mx5bLjiRsU1EiY73XvvXFttf9b3HFx3uegXbfasscZIxaN4X2JxO0KgVRmsynCD6seLhu8AwQZCGgZMF7DDkfsEMCTBOSuDXhWNZeavasei7gn1hABm9KOb3HfxqBoCjD16vc/F2JRphA/lE3a15ArKbwSkmfHD99gwYzsjAbVsDVdnqxI8rMMVy4BVyErKh20eyDbgNfQd0yhWPgrVElpBDyPz5j9Ltb1vvo9D2+DjeYaQmb95OeoQQi6lnz2FWj6P8AH6Bz31uyL6em/lRFEQR3A7ENwWGqAYkw4wdJQqMCjEPtlSIXNOtYUd2Pt9uE/HbCH8D+y+6sekm3nfOvOKSsWRe3jVNcR251QbYTqmhwqFVdV2WdVolUYzv6Gdylydieh5OrSvZVq5VxIrG1mbBpik5VnCJ3eEHzaL9kOE+ZDW15y391pPF7tR7RzT8Ds9lIN3ueVMGW3oIM6Fj6W4SeSoDxAfab8clrrMsBPfljce6qKoe1NLmgDHLosZxvhQwS78iAwDNNP0437idF3+4AQlT21dANgwHgLJZN8dvc16mSLJRviheyiJNqTpO3MhP09j1PJpOFM1sP7KZ2XTRkd6G0eRaT3DETm7R9cMP2uZHrPfyDd34uHWQ1lykDSm6i0DYkWfWsHX2b4GGSFuLYwaJH/r1kLLMC+QH1lHFSRYnSqkqxIvMam4OVcAXIzucCsCOZimprwavhKVmjszM+Dz4cQfnnEccWZgZORZ/zTmr15FS5DnAMf7zamnbKCzBDOOM9qOCLXyOeYKCA67O3d66sbdcU0bf5SZeGqX0Oy19efljvvf3ltJngZOQb7fpFuhsreJkCGuisJxuuTSjZwK82Dg7lhUiaiNx+GDrJV6Tn2asq4ZhnUVDVaWI8/CYVhyLVE7BFft+nW8zjLMQisBS6zKso/SQjSOtCKO1edu2VGEDD2up/Ly0oDYAeG6yZKGfxp4D80WeRwK+1QEtag7I7otNSlTbLpK3k/TRUPGfCfenrfd5r8k9h4jWHNcn7GzzTn51U+cYkYOwY3Luy/NtkjjLi9LQBfZaKq5KSENEvoRjseWi4H0ro764T6WApWE6cpGJUhvMIjmne2AqAYb4LR8Z9tp15T9guSLJSkTUUsFrEfBiP8lClwMsbiSDK5YubTdAK8y4OmcKjN1jGoC9ic9FSw/P+DMn91/hH5IGvz8i7cuWr/hmcnvMcWd77Kr3DDuNnT3lsGBBk8fZ42pB/kLR+yiKknpBcI+HBNxDlWDydbYMNeLh2rRr06l1qcsWfLVDlp1Wrk0FFm5p435pVNsB3gzcpooU1OKfk0FzzWCAWItzilThOYZphj6H2gHxDAOJw+T5NffGdrUhm0elz+fwKTIdXv70ydU+7Ut8yvM9d8WwIZ+5g0NFBNKwZUTwp7PyhqdmdxoYUhB6XhYBOQQIhE7quTjE5VD5IPBKJW6MI10OcVojD4Mm5Di7K8dnYawOR7kFM+YYHHJ0pbKhKmFYwG18qo4rBgGOrcQAR0aK7+O7uo43iYRRZxOtzV54/In7WeWI8C5Uf65P3+Cr9qIdfsaffuJrD/cFxdpDUv0hnrE73DXst0uXhwwdH1GXNOLZVpCyCByww4oRPI7AmjzdSytEe3zWDrI0q2FIf1ijrALZyqplGChmCerVlStOtAIpyXkz3aslX0p8BTAdkE8Jo4PHwoZ1GiRpZDnx/7i7ttXIkSVYJdAdhJAQQm8CQUvsQ0PTB7x7+sUP/v9vOhGRVeqLl+GMp+3xbjMD7WF8UTrvGRkJm0VoJZYRtXY/Qnpk1eKPArfHtVGhapVrGVGe+m55/rAD6Z4cNdyjE7SFylC2BYY6da8ceXYzrmXhV9wwFfSIHxOx6VU3r6jWu6EbeUVlHdmKGXmw4zyPCzLe8+sfbyfo3nFDCoeY8bK+/vUHkmto4cv2Qo18ezsiaJ9pqZuS4XlFXXY+zCd8tUmd2Wlp6h4Ft7VUGGQtQTaj1ekL4z1Xz824lIsb6M8nSK+4h0i6SPkaD+rQj7DeSRoE3JFXeBnZUtZFNatfqOAw89TRNKDuXVF69jMK95Hj89PxQEAdLHBaN1I4//c0neHeEA6Of/2HspxPf8JkIbpX+ESSDyEyo3A5LNu2nNa54YR2HA5cnUOROBLexfYdT58TLuJtkUBLe8KR5C6e+XI2wTD0zyMS/mlR44YkzYAZ5A6y+MuUT2tdRQpVS3j+WaCQBr/3sU+J7UvgA5FyQSlaGNRhGQdemIb5oZqfV+TQG/HiK9LCYXtFEHlDkfW6cYfxcDyfYKovyAKPpzPS6mO3QlUvl8u2QvPWvh4XYmd5j2rAF+gGRHXTtRbJXeI1RaDgSp7n01yVctIkzQcCn51b4JYQ7qkx926hI5A18632a8j7oOzPZ6LRcb7xWc2OaZXVLJCgg0mWQCm6mg2PbjicZqjaDFNepnVFijPg2ZHeDudtHNYzdOyyIM/ZtiOKr9PLn9v5BZr28nq69KxYjq8XyGs4rUhN5o4SFE0yF5VHUg8mlSdxEUMs3pJWSmfOUkf61VTVrZ2Zy++Aej8TSz8mv7v2lzPKF+PahP2mXoHEibcuy1poHB6IulfQ++DFSx2IxAO0plNCi/RswavroX6w7Y5IaBQMLy8bPNrhfN4u5E1BYnI8HRAoTjM07ryd3shnN00TnF2DL6q1n7om/r1nyEp8M/OOGe8ZamXPbsa5zLrjhXked6UCcS7/nJj7+CrVL7W3xnZVEF5aiHUzMA8XnBhw3wv5STJyZaEi0qCtm6mbUHQSC4E6hBS6DRQRrm0mV/nSoiTuu21ZjpdmOh8HhJiFEJ5pRWTd3mDKEwyfIeN0Wcmq05OTd5xmlILjqUde0jWsLpCrdxfmKrWIV60gh64VWVU8Qmqd+3/d3S9J7waQat+ecBeBS5mkkNefvpdCQ17K1i28DhHVtG7utjH9ms4zlLJZNhJRHE54bqjfsk7LYe7G9YXuC+oIT3doOzKdrnO3LKhL4BWn9QRfSGe4vZEHRAUg8h/Oe2ro67gQRw3HChXHL6oZOaetsjDgYVmmpVtf3C16/1yi90Hp3SGxXKBuYWvMtnltt4ENWlcvHbd3PVNoODwyJKgphAcpPTzTmJRZ2ynvg9VBALBYxGHEkWGCN1xQuC7jdpjqYVkQU9ZhWpHWILqu01lExdC/My98Dzw32nd9p9wEVgsPi8rCW4mTaGpaple20NRmCuW+UhHSCffzYvlopRay5rhGGYlKxL2ea0WkOfROQw9YSuULRj8i0tlG0OIwhNkPIyo5Mrpn49i0+NutyABRpSL741IA92Z5DwWODXn20i+WIR+mgcD8ARGhX5dlnvAleEGgapAoaQuHwR7OLzHeN1Y/qV0oKCMjTUxX97ss7gOG+CF1DUCqvWdqzP624Laz+Nl41Gt0zqYpd4WpjFnSdYQ8wK7a+TxRCDVR/j3PTVcDZDSfTqiC235cOt7vXpCUjChQxxXOEFKdEJ0Rn6GLiLcdPlgaYgM6tj7JaszsvKW3bbzadi407/TjeTtdHZaV9zDxYLefGnO1h2Dj3dDmi1v4uyUEBJxhMTO1nr1WteCC6kYH8roaSSE8HxKNfoWbQi2K8IkiBHlvzy4+bLrrJu5rI3uDXiKkckC2bpxOtNPMw+jjOql4GUmPMLee5yx4DSRBpTNoWKuVs6IIS2OhS/TAQph/PPP46GcVN9iW+FOFVeBwx51x2GtkjndiY1LLmUl/wqVeToK7ASrYD8j/Mk7eRnG4dRDEeKTQ6M+WAzLAbeS/IjoM3WGZUdmN0E0xeHKCMo5J0iDxSbWtQsVGitl45sKE2GQ60FVE7kZ3ewntl9ToVyTvIsJqn+AphyJyWns22lZwmhzJgGnifDKCXkjizs2PpkcB39CMWwTbuWvZS5h5UOGyQYY1shp4tmE6MKgehKToe2TAbVUz0LL1VTZERNG3thkriQQhvq2rkgkU9G5odOYilLTGaflw3CYvnPtQFMif8IonTuSW7UhCHtDOci0C+UGKSGC08CrUn1aPSnj3hCtiMLZOyPuaNUgDBUXhUHXIPVreHIDikbtpYnDt8H9Y+7fIbUbuKKVIu5uGNKHs4xEpkPACsMu5HZ/5jp5QTOdxImMchO4+Av50svfrVn/Tjwj3FV3VeYZi+umMu9WylLSSr05tct63rEt4sIIQGNagVZOILSuhGFEFe14x6lmgNA3UrRtsOAf1RJHSJi230SFWXg/oeZy1gdbxPnfGKE+/YIBrugxf+9JGf9YHFwmoe0cplX+15T6OKwvdkUVxYX17+LxUg14WIz7Mg3lei4GvKrl2WZESjCCSlpIj3Qbp/aBAtGPEAUhFHYVRCU3XNz3RYy0LMYiVYTYjTpW+LoMTyPjl2eJGRZNZ50RRPuRU2tcudNX7Wle4XxHGE6UXh6G+3FNrc3j7srTjgZRKJNipWDtEzsbJKv6mLHFZA1veVkkkvPmLN8Sd0HarnjsCLSsYfJARqZr6lk6OGzhc8mlovqXV3fK1hmcU7btK3MJuuLqnPL173qfHO55X7mt7sfVIfoRoSprfl3ZeVo+XsM2RUXmapanEJpNxdavKam4S4j9wFtEj52NiB1l2iA0careCSje8WDb2arzzFkM26Ewr4YVFoKEJTVvnGr9v7r3Htf8Oy71xveU9FdOe1sfhQZAoD8yUCdyRgDci5OQWNhxgNSMSM0fzJObR+doa0uNqSENkFvIXeEki20h6XyE3ZseGa1JEv3kB4IiCsvyOE8fQ/VQTyhoEeRx2PyVcPu/lfHFl1bjrJgixoUgn1EipnXVSW3nen/AaL3idDCxFwFOwJIZbZELdZNzl4a0LX/c9owunm+yzZpwtJgIAV21C+VOFSzuIEZMT6VwZxtwuL90PFzB+p/RSdzf8uNlUKmpJlo0/lU6wnVJFHMlx1GyDqOzmlo4fCQqWNVVaDx29G+oTohV4yRLuDo6vqryw0wmXg7kZjLja8DB1vCq1I2524HVsCLm7htQ3kN67S6j59eeM4HNmzaGcS8kHawMtMQyl4mXi7S11z9WTiZwyCUtXHQHFW8E8dOnHo9pDyCjJz5hpeFfpFIYIB4XdDqN7E2VZvBs2uh989Dt072HLIxpxGQSZesW8OBAmiTMP5Imcs02oWimZnziFo1MkUkKHachsZBUYVDPtyDZDtCwpGtMAoCGVdhtAITpe4++6J/Gwg/vbnRT3XaT3bqKiEji0MCJyLfLqEi1ulLoFD5ZJoCpDlMAwMhOXKoiO0WpxuyYlIpDDHtURSQAf4dfAUF3GHkAaDwQHwsGrvd62176X33uQ3q0ilmGxX9O/iLOhjebhKGiZxu4qVa6lMNOarU1rBFOZCNFPS1gs8pRMimvAI5IM8jN9Y7P4fQfeiMuK99r2tOf/DOn9CEQU9uj21nSkKXHBLTLs+lRIRKqkDqmW5HimCrFbIoookiBDQS2bLEUtFvl3rE/rrqcu3Cc+9VdKLy923vUrP7FObolvJ5OSGYhYNUquzBrahRJM/Lsc7FDR2GXlmoU+K1PwluEbIunaK3NR89yntUe+Qun2cV/oY6U7Y4R6+EmpSwC2WKzUDKVo4H0moL2thVrgkYsy4XHCNJBiaV+pKENBUYYELxDOXlvv7scb8N9fetd6eA91pe5+wv21VYAxGdFQQnclrknbGSu0K2uIrcJXbERR7TLb+QoAsvImx1OtfbdZ6/52KvNPkJ67lx7FESOJtCwNNUEIzOYF83DXSAmJyZjwBBjyWAmoVcRpharmvfF5w4MSwv3dQ7pPUouvCx3xT5EGfk6pSQCW5CF/tjG/03ULkx7rOb4nyiPkiz7slaVpXITY2VAi9eftY7rPM6ovFmEZU3+2jFIxoIil006s2oVzw3ekwQM6ERFBTKiM0wBXLUPWHdo30ZO6a49n/36Fe5KxfgPpqf0SDu84H2+gaIfLxT1MVfcqHkpjwCsMohiKVxvZOUtRrkuwMcFzT/Nt31B6eWRmK/Z6VI2kuNAepp1xAUozOzEAinfXuevxsrDyH9/nLv8Suf1e6b2LKQoQxT6b3kdd1+yttDhSVj5wUha3xOXubg/5oV/xb5XeNYFQEig/b55r5zgurVcYMrpiv87l8vuLDe7+RtIjCPnfLL2bNpd1giVIAShguGbnRXldk4vSu1kgCf/w3IzuHyO923HIlUgmJNih05nfEHvus4DbCY9zv+EX/q3E52Iy43YKp0CPf0NK+b+xY9+7Db1MfuSGHqLQh7R9GRi54B1ldtSMiWXJImjomoFefgMADXqOQg2E6akAAAAASUVORK5CYII=',
-
-	initialize: function(canvas, opt) {
-		var self = this;
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.opacity = opt.opacity || this.opacity;
-		this.color = opt.color || this.color;
-
-		this.canvas.contextTop.lineJoin = 'round';
-		this.canvas.contextTop.lineCap = 'round';
-
-		this._reset();
-
-		fabric.Image.fromURL(this.sprayBrushDataUrl, function(brush) {
-			self.brush = brush;
-			self.brush.filters = [];
-			self._setColor(self.color || this.color);
-		}, { crossOrigin: 'anonymous' });
-	},
-
-
-	_setColor: function(color) {
-		this.color = color;
-		this.brush.filters[0] = new fabric.Image.filters.BlendColor({ color:color, alpha:1, mode:'tint' });
-		this.brush.applyFilters();
-	},
-
-	onMouseDown: function(pointer) {
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._point = new fabric.Point(pointer.x, pointer.y);
-		this._lastPoint = this._point;
-
-		// this.size = this.width + this._baseWidth;
-		this.size = this.width + this.width/2;
-		this._inkAmount = 0;
-
-		this._setColor(this.color);
-		this._render();
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = this._point;
-		this._point = new fabric.Point(pointer.x, pointer.y);
-	},
-
-	onMouseUp: function() {
-		var self = this;
-		setTimeout(function() {
-			self.convertToImg();
-			self._reset();
-		}, this._interval);
-	},
-
-	_render: function() {
-		var self = this;
-
-		function draw() {
-			var point, distance, angle, amount, x, y;
-
-			point = new fabric.Point(self._point.x || 0, self._point.y || 0);
-			distance = point.distanceFrom(self._lastPoint);
-			angle = point.angleBetween(self._lastPoint);
-			amount = (100 / self.size) / (Math.pow(distance, 2) + 1);
-
-			self._inkAmount += amount;
-			self._inkAmount = Math.max(self._inkAmount - distance / 10, 0);
-
-			x = self._lastPoint.x + Math.sin(angle) - self.size / 2;
-			y = self._lastPoint.y + Math.cos(angle) - self.size / 2;
-			self.canvas.contextTop.drawImage(self.brush._element, x, y, self.size, self.size);
-
-			if (self.canvas._isCurrentlyDrawing) {
-				setTimeout(draw, self._interval);
-			} else {
-				self._reset();
-			}
-		}
-
-		draw();
-	},
-
-	_reset: function() {
-		this._point = null;
-		this._lastPoint = null;
-		this.canvas.contextTop.globalAlpha = 1;
-	}
-}); // End SpraypaintBrush
-
-/**
- * SquaresBrush
- * Based on code by Mr. Doob.
- */
-fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	bgColor: '#fff',
-	opacity: 1,
-	width: 1,
-
-	_lastPoint: null,
-	_drawn: false,
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.bgColor = opt.bgColor || '#fff';
-		this.opacity = opt.opacity || this.opacity;
-	},
-
-	onMouseDown: function(pointer) {
-		var ctx = this.canvas.contextTop,
-			color = fabric.util.colorValues(this.color),
-			bgColor = fabric.util.colorValues(this.bgColor);
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._lastPoint = pointer;
-		this._drawn = false;
-
-		//ctx.globalCompositeOperation = 'source-over';
-		this.canvas.contextTop.globalAlpha = this.opacity;
-		ctx.fillStyle = 'rgba(' + bgColor[0] + ',' + bgColor[1] + ',' + bgColor[2] + ',' + bgColor[3] + ')';
-		ctx.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
-		ctx.lineWidth = this.width;
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		var ctx = this.canvas.contextTop,
-			dx = pointer.x - this._lastPoint.x,
-			dy = pointer.y - this._lastPoint.y,
-			angle = 1.57079633,
-			px = Math.cos(angle) * dx - Math.sin(angle) * dy,
-			py = Math.sin(angle) * dx + Math.cos(angle) * dy;
-
-		ctx.beginPath();
-		ctx.moveTo(this._lastPoint.x - px, this._lastPoint.y - py);
-		ctx.lineTo(this._lastPoint.x + px, this._lastPoint.y + py);
-		ctx.lineTo(pointer.x + px, pointer.y + py);
-		ctx.lineTo(pointer.x - px, pointer.y - py);
-		ctx.lineTo(this._lastPoint.x - px, this._lastPoint.y - py);
-		ctx.fill();
-		ctx.stroke();
-
-		this._lastPoint = pointer;
-		this._drawn = true;
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._drawn) {
-			this.convertToImg();
-		}
-		this.canvas.contextTop.globalAlpha = 1;
-	},
-
-	_render: function() {}
-}); // End SquaresBrush
-
-/**
- * WebBrush
- * Based on code by Mr. Doob.
- */
-fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
-	color: '#000',
-	opacity: 1,
-	width: 1,
-
-	_count: 0,
-	_points: [],
-
-	initialize: function(canvas, opt) {
-		opt = opt || {};
-
-		this.canvas = canvas;
-		this.width = opt.width || this.width;
-		this.color = opt.color || this.color;
-		this.opacity = opt.opacity || 1;
-	},
-
-	onMouseDown: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points = [pointer];
-		this._count = 0;
-		this._colorValues = fabric.util.colorValues(this.color);
-	},
-
-	onMouseMove: function(pointer) {
-		pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
-		pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
-		this._points.push(pointer);
-
-		var ctx = this.canvas.contextTop,
-			points = this._points,
-			lastPoint = points[points.length - 2],
-			colorValues = this._colorValues,
-			i, dx, dy, d;
-
-		ctx.lineWidth = this.width;
-		ctx.strokeStyle = 'rgba(' + colorValues[0] + ',' + colorValues[1] + ',' + colorValues[2] + ',' + (.5 * this.opacity) + ')';
-
-		ctx.beginPath();
-		ctx.moveTo(lastPoint.x, lastPoint.y);
-		ctx.lineTo(pointer.x, pointer.y);
-		ctx.stroke();
-
-		ctx.strokeStyle = 'rgba(' + colorValues[0] + ',' + colorValues[1] + ',' + colorValues[2] + ',' + (.1 * this.opacity) + ')';
-
-		for (i = 0; i < points.length; i++) {
-			dx = points[i].x - points[this._count].x;
-			dy = points[i].y - points[this._count].y;
-			d = dx * dx + dy * dy;
-
-			if (d < 2500 && Math.random() > .9) {
-				ctx.beginPath();
-				ctx.moveTo(points[this._count].x, points[this._count].y);
-				ctx.lineTo(points[i].x, points[i].y);
-				ctx.stroke();
-			}
-		}
-		this._count++;
-	},
-
-	onMouseUp: function(pointer) {
-		if (this._count > 0) {
-			this.convertToImg();
-		}
-	},
-
-	_render: function() {}
-}); // End WebBrush
-
-})(typeof fabric !== 'undefined' ? fabric : require('fabric').fabric);
diff --git a/public/js/fabric.min.js b/public/js/fabric.min.js
deleted file mode 100644
index 416d1172..00000000
--- a/public/js/fabric.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var fabric=fabric||{version:"5.2.1"};if("undefined"!=typeof exports?exports.fabric=fabric:"function"==typeof define&&define.amd&&define([],function(){return fabric}),"undefined"!=typeof document&&"undefined"!=typeof window)fabric.document=document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?document:document.implementation.createHTMLDocument(""),fabric.window=window;else{var jsdom=require("jsdom"),virtualWindow=new jsdom.JSDOM(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window;fabric.document=virtualWindow.document,fabric.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,fabric.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,fabric.window=virtualWindow,DOMParser=fabric.window.DOMParser}fabric.isTouchSupported="ontouchstart"in fabric.window||"ontouchstart"in fabric.document||fabric.window&&fabric.window.navigator&&fabric.window.navigator.maxTouchPoints>0,fabric.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,fabric.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-dashoffset","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id","paint-order","vector-effect","instantiated_by_use","clip-path"],fabric.DPI=96,fabric.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)",fabric.commaWsp="(?:\\s+,?\\s*|,\\s*)",fabric.rePathCommand=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi,fabric.reNonWord=/[ \n\.,;!\?\-]/,fabric.fontPaths={},fabric.iMatrix=[1,0,0,1,0,0],fabric.svgNS="http://www.w3.org/2000/svg",fabric.perfLimitSizeTotal=2097152,fabric.maxCacheSideLimit=4096,fabric.minCacheSideLimit=256,fabric.charWidthsCache={},fabric.textureSize=2048,fabric.disableStyleCopyPaste=!1,fabric.enableGLFiltering=!0,fabric.devicePixelRatio=fabric.window.devicePixelRatio||fabric.window.webkitDevicePixelRatio||fabric.window.mozDevicePixelRatio||1,fabric.browserShadowBlurConstant=1,fabric.arcToSegmentsCache={},fabric.boundsOfCurveCache={},fabric.cachesBoundsOfCurve=!0,fabric.forceGLPutImageData=!1,fabric.initFilterBackend=function(){return fabric.enableGLFiltering&&fabric.isWebglSupported&&fabric.isWebglSupported(fabric.textureSize)?(console.log("max texture size: "+fabric.maxTextureSize),new fabric.WebglFilterBackend({tileSize:fabric.textureSize})):fabric.Canvas2dFilterBackend?new fabric.Canvas2dFilterBackend:void 0};"undefined"!=typeof document&&"undefined"!=typeof window&&(window.fabric=fabric);if("undefined"==typeof eventjs)var eventjs={};if(function(e){"use strict";e.modifyEventListener=!1,e.modifySelectors=!1,e.configure=function(t){isFinite(t.modifyEventListener)&&(e.modifyEventListener=t.modifyEventListener),isFinite(t.modifySelectors)&&(e.modifySelectors=t.modifySelectors),l===!1&&e.modifyEventListener&&p(),g===!1&&e.modifySelectors&&m()},e.add=function(e,t,r,o){return n(e,t,r,o,"add")},e.remove=function(e,t,r,o){return n(e,t,r,o,"remove")},e.returnFalse=function(){return!1},e.stop=function(e){e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0,e.cancelBubbleCount=0)},e.prevent=function(e){e&&(e.preventDefault?e.preventDefault():e.preventManipulation?e.preventManipulation():e.returnValue=!1)},e.cancel=function(t){e.stop(t),e.prevent(t)},e.blur=function(){var e=document.activeElement;if(e){var t=document.activeElement.nodeName;("INPUT"===t||"TEXTAREA"===t||"true"===e.contentEditable)&&e.blur&&e.blur()}},e.getEventSupport=function(e,t){if("string"==typeof e&&(t=e,e=window),t="on"+t,t in e)return!0;if(e.setAttribute||(e=document.createElement("div")),e.setAttribute&&e.removeAttribute){e.setAttribute(t,"");var n="function"==typeof e[t];return"undefined"!=typeof e[t]&&(e[t]=null),e.removeAttribute(t),n}};var t=function(e){if(!e||"object"!=typeof e)return e;var n=new e.constructor;for(var r in e)n[r]=e[r]&&"object"==typeof e[r]?t(e[r]):e[r];return n},n=function(i,s,d,l,p,g){if(l=l||{},"[object Object]"===String(i)){var m=i;if(i=m.target,delete m.target,!m.type||!m.listener){for(var y in m){var j=m[y];"function"!=typeof j&&(l[y]=j)}var w={};for(var h in m){var y=h.split(","),b=m[h],x={};for(var P in l)x[P]=l[P];if("function"==typeof b)var d=b;else{if("function"!=typeof b.listener)continue;var d=b.listener;for(var P in b)"function"!=typeof b[P]&&(x[P]=b[P])}for(var E=0;E<y.length;E++)w[h]=eventjs.add(i,y[E],d,x,p)}return w}s=m.type,delete m.type,d=m.listener,delete m.listener;for(var h in m)l[h]=m[h]}if(i&&s&&d){if("string"==typeof i&&"ready"===s){if(!window.eventjs_stallOnReady){var M=(new Date).getTime(),T=l.timeout,D=l.interval||1e3/60,G=window.setInterval(function(){(new Date).getTime()-M>T&&window.clearInterval(G),document.querySelector(i)&&(window.clearInterval(G),setTimeout(d,1))},D);return}s="load",i=window}if("string"==typeof i){if(i=document.querySelectorAll(i),0===i.length)return o("Missing target on listener!",arguments);1===i.length&&(i=i[0])}var L,k={};if(i.length>0&&i!==window){for(var S=0,C=i.length;C>S;S++)L=n(i[S],s,d,t(l),p),L&&(k[S]=L);return r(k)}if("string"==typeof s&&(s=s.toLowerCase(),-1!==s.indexOf(" ")?s=s.split(" "):-1!==s.indexOf(",")&&(s=s.split(","))),"string"!=typeof s){if("number"==typeof s.length)for(var H=0,F=s.length;F>H;H++)L=n(i,s[H],d,t(l),p),L&&(k[s[H]]=L);else for(var h in s)L="function"==typeof s[h]?n(i,h,s[h],t(l),p):n(i,h,s[h].listener,t(s[h]),p),L&&(k[h]=L);return r(k)}if(0===s.indexOf("on")&&(s=s.slice(2)),"object"!=typeof i)return o("Target is not defined!",arguments);if("function"!=typeof d)return o("Listener is not a function!",arguments);var X=l.useCapture||!1,Y=v(i)+"."+v(d)+"."+(X?1:0);if(e.Gesture&&e.Gesture._gestureHandlers[s]){if(Y=s+Y,"remove"===p){if(!u[Y])return;u[Y].remove(),delete u[Y]}else if("add"===p){if(u[Y])return u[Y].add(),u[Y];if(l.useCall&&!e.modifyEventListener){var _=d;d=function(e,t){for(var n in t)e[n]=t[n];return _.call(i,e)}}l.gesture=s,l.target=i,l.listener=d,l.fromOverwrite=g,u[Y]=e.proxy[s](l)}return u[Y]}for(var U,O=a(s),E=0;E<O.length;E++)if(s=O[E],U=s+"."+Y,"remove"===p){if(!u[U])continue;i[c](s,d,X),delete u[U]}else if("add"===p){if(u[U])return u[U];i[f](s,d,X),u[U]={id:U,type:s,target:i,listener:d,remove:function(){for(var t=0;t<O.length;t++)e.remove(i,O[t],d,l)}}}return u[U]}},r=function(e){return{remove:function(){for(var t in e)e[t].remove()},add:function(){for(var t in e)e[t].add()}}},o=function(e,t){"undefined"!=typeof console&&"undefined"!=typeof console.error&&console.error(e,t)},i={msPointer:["MSPointerDown","MSPointerMove","MSPointerUp"],touch:["touchstart","touchmove","touchend"],mouse:["mousedown","mousemove","mouseup"]},s={MSPointerDown:0,MSPointerMove:1,MSPointerUp:2,touchstart:0,touchmove:1,touchend:2,mousedown:0,mousemove:1,mouseup:2},a=(function(){e.supports={},window.navigator.msPointerEnabled&&(e.supports.msPointer=!0),e.getEventSupport("touchstart")&&(e.supports.touch=!0),e.getEventSupport("mousedown")&&(e.supports.mouse=!0)}(),function(){return function(t){var n=document.addEventListener?"":"on",r=s[t];if(isFinite(r)){var o=[];for(var a in e.supports)o.push(n+i[a][r]);return o}return[n+t]}}()),u={},d=0,v=function(e){return e===window?"#window":e===document?"#document":(e.uniqueID||(e.uniqueID="e"+d++),e.uniqueID)},f=document.addEventListener?"addEventListener":"attachEvent",c=document.removeEventListener?"removeEventListener":"detachEvent";e.createPointerEvent=function(t,n,r){var o=n.gesture,i=n.target,s=t.changedTouches||e.proxy.getCoords(t);if(s.length){var a=s[0];n.pointers=r?[]:s,n.pageX=a.pageX,n.pageY=a.pageY,n.x=n.pageX,n.y=n.pageY}var u=document.createEvent("Event");u.initEvent(o,!0,!0),u.originalEvent=t;for(var d in n)"target"!==d&&(u[d]=n[d]);var v=u.type;e.Gesture&&e.Gesture._gestureHandlers[v]&&n.oldListener.call(i,u,n,!1)};var l=!1,p=function(){if(window.HTMLElement){var t=function(t){var r=function(r){var o=r+"EventListener",i=t[o];t[o]=function(t,o,s){if(e.Gesture&&e.Gesture._gestureHandlers[t]){var u=s;"object"==typeof s?u.useCall=!0:u={useCall:!0,useCapture:s},n(this,t,o,u,r,!0)}else for(var d=a(t),v=0;v<d.length;v++)i.call(this,d[v],o,s)}};r("add"),r("remove")};navigator.userAgent.match(/Firefox/)?(t(HTMLDivElement.prototype),t(HTMLCanvasElement.prototype)):t(HTMLElement.prototype),t(document),t(window)}},g=!1,m=function(){var e=NodeList.prototype;e.removeEventListener=function(e,t,n){for(var r=0,o=this.length;o>r;r++)this[r].removeEventListener(e,t,n)},e.addEventListener=function(e,t,n){for(var r=0,o=this.length;o>r;r++)this[r].addEventListener(e,t,n)}};return e}(eventjs),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";e.pointerSetup=function(e,t){e.target=e.target||window,e.doc=e.target.ownerDocument||e.target,e.minFingers=e.minFingers||e.fingers||1,e.maxFingers=e.maxFingers||e.fingers||1/0,e.position=e.position||"relative",delete e.fingers,t=t||{},t.enabled=!0,t.gesture=e.gesture,t.target=e.target,t.env=e.env,eventjs.modifyEventListener&&e.fromOverwrite&&(e.oldListener=e.listener,e.listener=eventjs.createPointerEvent);var n=0,r=0===t.gesture.indexOf("pointer")&&eventjs.modifyEventListener?"pointer":"mouse";return e.oldListener&&(t.oldListener=e.oldListener),t.listener=e.listener,t.proxy=function(n){t.defaultListener=e.listener,e.listener=n,n(e.event,t)},t.add=function(){t.enabled!==!0&&(e.onPointerDown&&eventjs.add(e.target,r+"down",e.onPointerDown),e.onPointerMove&&eventjs.add(e.doc,r+"move",e.onPointerMove),e.onPointerUp&&eventjs.add(e.doc,r+"up",e.onPointerUp),t.enabled=!0)},t.remove=function(){t.enabled!==!1&&(e.onPointerDown&&eventjs.remove(e.target,r+"down",e.onPointerDown),e.onPointerMove&&eventjs.remove(e.doc,r+"move",e.onPointerMove),e.onPointerUp&&eventjs.remove(e.doc,r+"up",e.onPointerUp),t.reset(),t.enabled=!1)},t.pause=function(t){!e.onPointerMove||t&&!t.move||eventjs.remove(e.doc,r+"move",e.onPointerMove),!e.onPointerUp||t&&!t.up||eventjs.remove(e.doc,r+"up",e.onPointerUp),n=e.fingers,e.fingers=0},t.resume=function(t){!e.onPointerMove||t&&!t.move||eventjs.add(e.doc,r+"move",e.onPointerMove),!e.onPointerUp||t&&!t.up||eventjs.add(e.doc,r+"up",e.onPointerUp),e.fingers=n},t.reset=function(){e.tracker={},e.fingers=0},t};var t=eventjs.supports;eventjs.isMouse=!!t.mouse,eventjs.isMSPointer=!!t.touch,eventjs.isTouch=!!t.msPointer,e.pointerStart=function(t,n,r){var o=(t.type||"mousedown").toUpperCase();0===o.indexOf("MOUSE")?(eventjs.isMouse=!0,eventjs.isTouch=!1,eventjs.isMSPointer=!1):0===o.indexOf("TOUCH")?(eventjs.isMouse=!1,eventjs.isTouch=!0,eventjs.isMSPointer=!1):0===o.indexOf("MSPOINTER")&&(eventjs.isMouse=!1,eventjs.isTouch=!1,eventjs.isMSPointer=!0);var i=function(e,t){var n=r.bbox,o=a[t]={};switch(r.position){case"absolute":o.offsetX=0,o.offsetY=0;break;case"differenceFromLast":o.offsetX=e.pageX,o.offsetY=e.pageY;break;case"difference":o.offsetX=e.pageX,o.offsetY=e.pageY;break;case"move":o.offsetX=e.pageX-n.x1,o.offsetY=e.pageY-n.y1;break;default:o.offsetX=n.x1-n.scrollLeft,o.offsetY=n.y1-n.scrollTop}var i=e.pageX-o.offsetX,s=e.pageY-o.offsetY;o.rotation=0,o.scale=1,o.startTime=o.moveTime=(new Date).getTime(),o.move={x:i,y:s},o.start={x:i,y:s},r.fingers++};r.event=t,n.defaultListener&&(r.listener=n.defaultListener,delete n.defaultListener);for(var s=!r.fingers,a=r.tracker,u=t.changedTouches||e.getCoords(t),d=u.length,v=0;d>v;v++){var f=u[v],c=f.identifier||1/0;if(r.fingers){if(r.fingers>=r.maxFingers){var l=[];for(var c in r.tracker)l.push(c);return n.identifier=l.join(","),s}var p=0;for(var g in a){if(a[g].up){delete a[g],i(f,c),r.cancel=!0;break}p++}if(a[c])continue;i(f,c)}else a=r.tracker={},n.bbox=r.bbox=e.getBoundingBox(r.target),r.fingers=0,r.cancel=!1,i(f,c)}var l=[];for(var c in r.tracker)l.push(c);return n.identifier=l.join(","),s},e.pointerEnd=function(e,t,n,r){for(var o=e.touches||[],i=o.length,s={},a=0;i>a;a++){var u=o[a],d=u.identifier;s[d||1/0]=!0}for(var d in n.tracker){var v=n.tracker[d];s[d]||v.up||(r&&r({pageX:v.pageX,pageY:v.pageY,changedTouches:[{pageX:v.pageX,pageY:v.pageY,identifier:"Infinity"===d?1/0:d}]},"up"),v.up=!0,n.fingers--)}if(0!==n.fingers)return!1;var f=[];n.gestureFingers=0;for(var d in n.tracker)n.gestureFingers++,f.push(d);return t.identifier=f.join(","),!0},e.getCoords=function(t){return e.getCoords="undefined"!=typeof t.pageX?function(e){return Array({type:"mouse",x:e.pageX,y:e.pageY,pageX:e.pageX,pageY:e.pageY,identifier:e.pointerId||1/0})}:function(e){var t=document.documentElement;return e=e||window.event,Array({type:"mouse",x:e.clientX+t.scrollLeft,y:e.clientY+t.scrollTop,pageX:e.clientX+t.scrollLeft,pageY:e.clientY+t.scrollTop,identifier:1/0})},e.getCoords(t)},e.getCoord=function(t){if("ontouchstart"in window){var n=0,r=0;e.getCoord=function(e){var t=e.changedTouches;return t&&t.length?{x:n=t[0].pageX,y:r=t[0].pageY}:{x:n,y:r}}}else e.getCoord="undefined"!=typeof t.pageX&&"undefined"!=typeof t.pageY?function(e){return{x:e.pageX,y:e.pageY}}:function(e){var t=document.documentElement;return e=e||window.event,{x:e.clientX+t.scrollLeft,y:e.clientY+t.scrollTop}};return e.getCoord(t)};var n=function(e,t){var n=parseFloat(e.getPropertyValue(t),10);return isFinite(n)?n:0};return e.getBoundingBox=function(e){(e===window||e===document)&&(e=document.body);var t={},r=e.getBoundingClientRect();t.width=r.width,t.height=r.height,t.x1=r.left,t.y1=r.top,t.scaleX=r.width/e.offsetWidth||1,t.scaleY=r.height/e.offsetHeight||1,t.scrollLeft=0,t.scrollTop=0;var o=window.getComputedStyle(e),i="border-box"===o.getPropertyValue("box-sizing");if(i===!1){var s=n(o,"border-left-width"),a=n(o,"border-right-width"),u=n(o,"border-bottom-width"),d=n(o,"border-top-width");t.border=[s,a,d,u],t.x1+=s,t.y1+=d,t.width-=a+s,t.height-=u+d}t.x2=t.x1+t.width,t.y2=t.y1+t.height;for(var v=o.getPropertyValue("position"),f="fixed"===v?e:e.parentNode;null!==f&&f!==document.body&&void 0!==f.scrollTop;){var o=window.getComputedStyle(f),v=o.getPropertyValue("position");if("absolute"===v);else{if("fixed"===v){t.scrollTop-=f.parentNode.scrollTop,t.scrollLeft-=f.parentNode.scrollLeft;break}t.scrollLeft+=f.scrollLeft,t.scrollTop+=f.scrollTop}f=f.parentNode}return t.scrollBodyLeft=void 0!==window.pageXOffset?window.pageXOffset:(document.documentElement||document.body.parentNode||document.body).scrollLeft,t.scrollBodyTop=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,t.scrollLeft-=t.scrollBodyLeft,t.scrollTop-=t.scrollBodyTop,t},function(){var t,n=navigator.userAgent.toLowerCase(),r=-1!==n.indexOf("macintosh");t=r&&-1!==n.indexOf("khtml")?{91:!0,93:!0}:r&&-1!==n.indexOf("firefox")?{224:!0}:{17:!0},(e.metaTrackerReset=function(){eventjs.fnKey=e.fnKey=!1,eventjs.metaKey=e.metaKey=!1,eventjs.escKey=e.escKey=!1,eventjs.ctrlKey=e.ctrlKey=!1,eventjs.shiftKey=e.shiftKey=!1,eventjs.altKey=e.altKey=!1})(),e.metaTracker=function(n){var r="keydown"===n.type;27===n.keyCode&&(eventjs.escKey=e.escKey=r),t[n.keyCode]&&(eventjs.metaKey=e.metaKey=r),eventjs.ctrlKey=e.ctrlKey=n.ctrlKey,eventjs.shiftKey=e.shiftKey=n.shiftKey,eventjs.altKey=e.altKey=n.altKey}}(),e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if(eventjs.MutationObserver=function(){var e=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,t=!e&&function(){var e=document.createElement("p"),t=!1,n=function(){t=!0};if(e.addEventListener)e.addEventListener("DOMAttrModified",n,!1);else{if(!e.attachEvent)return!1;e.attachEvent("onDOMAttrModified",n)}return e.setAttribute("id","target"),t}();return function(n,r){if(e){var o={subtree:!1,attributes:!0},i=new e(function(e){e.forEach(function(e){r.call(e.target,e.attributeName)})});i.observe(n,o)}else t?eventjs.add(n,"DOMAttrModified",function(e){r.call(n,e.attrName)}):"onpropertychange"in document.body&&eventjs.add(n,"propertychange",function(){r.call(n,window.event.propertyName)})}}(),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.click=function(t){t.gesture=t.gesture||"click",t.maxFingers=t.maxFingers||t.fingers||1,t.onPointerDown=function(r){e.pointerStart(r,n,t)&&eventjs.add(t.target,"mouseup",t.onPointerUp)},t.onPointerUp=function(r){if(e.pointerEnd(r,n,t)){eventjs.remove(t.target,"mouseup",t.onPointerUp);var o=r.changedTouches||e.getCoords(r),i=o[0],s=t.bbox,a=e.getBoundingBox(t.target),u=i.pageY-a.scrollBodyTop,d=i.pageX-a.scrollBodyLeft;if(d>s.x1&&u>s.y1&&d<s.x2&&u<s.y2&&s.scrollTop===a.scrollTop){for(var v in t.tracker)break;var f=t.tracker[v];n.x=f.start.x,n.y=f.start.y,t.listener(r,n)}}};var n=e.pointerSetup(t);return n.state="click",eventjs.add(t.target,"mousedown",t.onPointerDown),n},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.click=e.click,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.dbltap=e.dblclick=function(t){t.gesture=t.gesture||"dbltap",t.maxFingers=t.maxFingers||t.fingers||1;var n,r,o,i,s,a=700;t.onPointerDown=function(d){var v=d.changedTouches||e.getCoords(d);n&&!r?(s=v[0],r=(new Date).getTime()-n):(i=v[0],n=(new Date).getTime(),r=0,clearTimeout(o),o=setTimeout(function(){n=0},a)),e.pointerStart(d,u,t)&&(eventjs.add(t.target,"mousemove",t.onPointerMove).listener(d),eventjs.add(t.target,"mouseup",t.onPointerUp))},t.onPointerMove=function(a){if(n&&!r){var u=a.changedTouches||e.getCoords(a);s=u[0]}var d=t.bbox,v=s.pageX-d.x1,f=s.pageY-d.y1;v>0&&v<d.width&&f>0&&f<d.height&&Math.abs(s.pageX-i.pageX)<=25&&Math.abs(s.pageY-i.pageY)<=25||(eventjs.remove(t.target,"mousemove",t.onPointerMove),clearTimeout(o),n=r=0)},t.onPointerUp=function(i){if(e.pointerEnd(i,u,t)&&(eventjs.remove(t.target,"mousemove",t.onPointerMove),eventjs.remove(t.target,"mouseup",t.onPointerUp)),n&&r){if(a>=r){u.state=t.gesture;for(var s in t.tracker)break;var d=t.tracker[s];u.x=d.start.x,u.y=d.start.y,t.listener(i,u)}clearTimeout(o),n=r=0}};var u=e.pointerSetup(t);return u.state="dblclick",eventjs.add(t.target,"mousedown",t.onPointerDown),u},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.dbltap=e.dbltap,eventjs.Gesture._gestureHandlers.dblclick=e.dblclick,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.dragElement=function(t,n){e.drag({event:n,target:t,position:"move",listener:function(e,n){t.style.left=n.x+"px",t.style.top=n.y+"px",eventjs.prevent(e)}})},e.drag=function(t){t.gesture="drag",t.onPointerDown=function(r){e.pointerStart(r,n,t)&&(t.monitor||(eventjs.add(t.doc,"mousemove",t.onPointerMove),eventjs.add(t.doc,"mouseup",t.onPointerUp))),t.onPointerMove(r,"down")},t.onPointerMove=function(r,o){if(!t.tracker)return t.onPointerDown(r);for(var i=(t.bbox,r.changedTouches||e.getCoords(r)),s=i.length,a=0;s>a;a++){var u=i[a],d=u.identifier||1/0,v=t.tracker[d];v&&(v.pageX=u.pageX,v.pageY=u.pageY,n.state=o||"move",n.identifier=d,n.start=v.start,n.fingers=t.fingers,"differenceFromLast"===t.position?(n.x=v.pageX-v.offsetX,n.y=v.pageY-v.offsetY,v.offsetX=v.pageX,v.offsetY=v.pageY):(n.x=v.pageX-v.offsetX,n.y=v.pageY-v.offsetY),t.listener(r,n))}},t.onPointerUp=function(r){e.pointerEnd(r,n,t,t.onPointerMove)&&(t.monitor||(eventjs.remove(t.doc,"mousemove",t.onPointerMove),eventjs.remove(t.doc,"mouseup",t.onPointerUp)))};var n=e.pointerSetup(t);return t.event?t.onPointerDown(t.event):(eventjs.add(t.target,"mousedown",t.onPointerDown),t.monitor&&(eventjs.add(t.doc,"mousemove",t.onPointerMove),eventjs.add(t.doc,"mouseup",t.onPointerUp))),n},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.drag=e.drag,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";var t=Math.PI/180,n=function(e,t){var n=0,r=0,o=0;for(var i in t){var s=t[i];s.up||(n+=s.move.x,r+=s.move.y,o++)}return e.x=n/=o,e.y=r/=o,e};return e.gesture=function(r){r.gesture=r.gesture||"gesture",r.minFingers=r.minFingers||r.fingers||2,r.onPointerDown=function(t){var i=r.fingers;if(e.pointerStart(t,o,r)&&(eventjs.add(r.doc,"mousemove",r.onPointerMove),eventjs.add(r.doc,"mouseup",r.onPointerUp)),r.fingers===r.minFingers&&i!==r.fingers){o.fingers=r.minFingers,o.scale=1,o.rotation=0,o.state="start";var s="";for(var a in r.tracker)s+=a;o.identifier=parseInt(s),n(o,r.tracker),r.listener(t,o)}},r.onPointerMove=function(i){for(var s=r.bbox,a=r.tracker,u=i.changedTouches||e.getCoords(i),d=u.length,v=0;d>v;v++){var f=u[v],c=f.identifier||1/0,l=a[c];l&&(l.move.x=f.pageX-s.x1,l.move.y=f.pageY-s.y1)}if(!(r.fingers<r.minFingers)){var u=[],p=0,g=0;n(o,a);for(var c in a){var f=a[c];if(!f.up){var m=f.start;if(!m.distance){var y=m.x-o.x,j=m.y-o.y;m.distance=Math.sqrt(y*y+j*j),m.angle=Math.atan2(y,j)/t}var y=f.move.x-o.x,j=f.move.y-o.y,w=Math.sqrt(y*y+j*j);0!==m.distance&&(p+=w/m.distance);var h=Math.atan2(y,j)/t,b=(m.angle-h+360)%360-180;f.DEG2=f.DEG1,f.DEG1=b>0?b:-b,"undefined"!=typeof f.DEG2&&(b>0?f.rotation+=f.DEG1-f.DEG2:f.rotation-=f.DEG1-f.DEG2,g+=f.rotation),u.push(f.move)}}o.touches=u,o.fingers=r.fingers,o.scale=p/r.fingers,o.rotation=g/r.fingers,o.state="change",r.listener(i,o)}},r.onPointerUp=function(t){var n=r.fingers;e.pointerEnd(t,o,r)&&(eventjs.remove(r.doc,"mousemove",r.onPointerMove),eventjs.remove(r.doc,"mouseup",r.onPointerUp)),n===r.minFingers&&r.fingers<r.minFingers&&(o.fingers=r.fingers,o.state="end",r.listener(t,o))};var o=e.pointerSetup(r);return eventjs.add(r.target,"mousedown",r.onPointerDown),o},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.gesture=e.gesture,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.pointerdown=e.pointermove=e.pointerup=function(t){if(t.gesture=t.gesture||"pointer",!t.target.isPointerEmitter){var n=!0;t.onPointerDown=function(e){n=!1,r.gesture="pointerdown",t.listener(e,r)},t.onPointerMove=function(e){r.gesture="pointermove",t.listener(e,r,n)},t.onPointerUp=function(e){n=!0,r.gesture="pointerup",t.listener(e,r,!0)};var r=e.pointerSetup(t);return eventjs.add(t.target,"mousedown",t.onPointerDown),eventjs.add(t.target,"mousemove",t.onPointerMove),eventjs.add(t.doc,"mouseup",t.onPointerUp),t.target.isPointerEmitter=!0,r}},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.pointerdown=e.pointerdown,eventjs.Gesture._gestureHandlers.pointermove=e.pointermove,eventjs.Gesture._gestureHandlers.pointerup=e.pointerup,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.shake=function(e){var t={gesture:"devicemotion",acceleration:{},accelerationIncludingGravity:{},target:e.target,listener:e.listener,remove:function(){window.removeEventListener("devicemotion",d,!1)}},n=4,r=1e3,o=200,i=3,s=(new Date).getTime(),a={x:0,y:0,z:0},u={x:{count:0,value:0},y:{count:0,value:0},z:{count:0,value:0}},d=function(d){var v=.8,f=d.accelerationIncludingGravity;if(a.x=v*a.x+(1-v)*f.x,a.y=v*a.y+(1-v)*f.y,a.z=v*a.z+(1-v)*f.z,t.accelerationIncludingGravity=a,t.acceleration.x=f.x-a.x,t.acceleration.y=f.y-a.y,t.acceleration.z=f.z-a.z,"devicemotion"===e.gesture)return void e.listener(d,t);for(var c="xyz",l=(new Date).getTime(),p=0,g=c.length;g>p;p++){var m=c[p],y=t.acceleration[m],j=u[m],w=Math.abs(y);if(!(r>l-s)&&w>n){var h=l*y/w,b=Math.abs(h+j.value);j.value&&o>b?(j.value=h,j.count++,j.count===i&&(e.listener(d,t),s=l,j.value=0,j.count=0)):(j.value=h,j.count=1)}}};return window.addEventListener?(window.addEventListener("devicemotion",d,!1),t):void 0},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.shake=e.shake,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";var t=Math.PI/180;return e.swipe=function(n){n.snap=n.snap||90,n.threshold=n.threshold||1,n.gesture=n.gesture||"swipe",n.onPointerDown=function(t){e.pointerStart(t,r,n)&&(eventjs.add(n.doc,"mousemove",n.onPointerMove).listener(t),eventjs.add(n.doc,"mouseup",n.onPointerUp))},n.onPointerMove=function(t){for(var r=t.changedTouches||e.getCoords(t),o=r.length,i=0;o>i;i++){var s=r[i],a=s.identifier||1/0,u=n.tracker[a];u&&(u.move.x=s.pageX,u.move.y=s.pageY,u.moveTime=(new Date).getTime())}},n.onPointerUp=function(o){if(e.pointerEnd(o,r,n)){eventjs.remove(n.doc,"mousemove",n.onPointerMove),eventjs.remove(n.doc,"mouseup",n.onPointerUp);var i,s,a,u,d={x:0,y:0},v=0,f=0,c=0;for(var l in n.tracker){var p=n.tracker[l],g=p.move.x-p.start.x,m=p.move.y-p.start.y;v+=p.move.x,f+=p.move.y,d.x+=p.start.x,d.y+=p.start.y,c++;var y=Math.sqrt(g*g+m*m),j=p.moveTime-p.startTime,u=Math.atan2(g,m)/t+180,s=j?y/j:0;if("undefined"==typeof a)a=u,i=s;else{if(!(Math.abs(u-a)<=20))return;a=(a+u)/2,i=(i+s)/2}}var w=n.gestureFingers;n.minFingers<=w&&n.maxFingers>=w&&i>n.threshold&&(d.x/=c,d.y/=c,r.start=d,r.x=v/c,r.y=f/c,r.angle=-(((a/n.snap+.5>>0)*n.snap||360)-360),r.velocity=i,r.fingers=w,r.state="swipe",n.listener(o,r))}};var r=e.pointerSetup(n);return eventjs.add(n.target,"mousedown",n.onPointerDown),r},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.swipe=e.swipe,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.longpress=function(t){return t.gesture="longpress",e.tap(t)},e.tap=function(t){t.delay=t.delay||500,t.timeout=t.timeout||250,t.driftDeviance=t.driftDeviance||10,t.gesture=t.gesture||"tap";var n,r;t.onPointerDown=function(i){if(e.pointerStart(i,o,t)){if(n=(new Date).getTime(),eventjs.add(t.doc,"mousemove",t.onPointerMove).listener(i),eventjs.add(t.doc,"mouseup",t.onPointerUp),"longpress"!==t.gesture)return;r=setTimeout(function(){if(!(i.cancelBubble&&++i.cancelBubbleCount>1)){var e=0;for(var n in t.tracker){var r=t.tracker[n];if(r.end===!0)return;if(t.cancel)return;e++}t.minFingers<=e&&t.maxFingers>=e&&(o.state="start",o.fingers=e,o.x=r.start.x,o.y=r.start.y,t.listener(i,o))}},t.delay)}},t.onPointerMove=function(n){for(var r=t.bbox,o=n.changedTouches||e.getCoords(n),i=o.length,s=0;i>s;s++){var a=o[s],u=a.identifier||1/0,d=t.tracker[u];if(d){var v=a.pageX-r.x1-parseInt(window.scrollX),f=a.pageY-r.y1-parseInt(window.scrollY),c=v-d.start.x,l=f-d.start.y,p=Math.sqrt(c*c+l*l);if(!(v>0&&v<r.width&&f>0&&f<r.height&&p<=t.driftDeviance))return eventjs.remove(t.doc,"mousemove",t.onPointerMove),void(t.cancel=!0)}}},t.onPointerUp=function(i){if(e.pointerEnd(i,o,t)){if(clearTimeout(r),eventjs.remove(t.doc,"mousemove",t.onPointerMove),eventjs.remove(t.doc,"mouseup",t.onPointerUp),i.cancelBubble&&++i.cancelBubbleCount>1)return;if("longpress"===t.gesture)return void("start"===o.state&&(o.state="end",t.listener(i,o)));if(t.cancel)return;if((new Date).getTime()-n>t.timeout)return;var s=t.gestureFingers;t.minFingers<=s&&t.maxFingers>=s&&(o.state="tap",o.fingers=t.gestureFingers,t.listener(i,o))}};var o=e.pointerSetup(t);return eventjs.add(t.target,"mousedown",t.onPointerDown),o},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.tap=e.tap,eventjs.Gesture._gestureHandlers.longpress=e.longpress,e}(eventjs.proxy),"undefined"==typeof eventjs)var eventjs={};if("undefined"==typeof eventjs.proxy&&(eventjs.proxy={}),eventjs.proxy=function(e){"use strict";return e.wheelPreventElasticBounce=function(e){e&&("string"==typeof e&&(e=document.querySelector(e)),eventjs.add(e,"wheel",function(e,t){t.preventElasticBounce(),eventjs.stop(e)}))},e.wheel=function(e){var t,n=e.timeout||150,r=0,o={gesture:"wheel",state:"start",wheelDelta:0,target:e.target,listener:e.listener,preventElasticBounce:function(e){var t=this.target,n=t.scrollTop,r=n+t.offsetHeight,o=t.scrollHeight;r===o&&this.wheelDelta<=0?eventjs.cancel(e):0===n&&this.wheelDelta>=0&&eventjs.cancel(e),eventjs.stop(e)},add:function(){e.target[s](u,i,!1)},remove:function(){e.target[a](u,i,!1)}},i=function(i){i=i||window.event,o.state=r++?"change":"start",o.wheelDelta=i.detail?-20*i.detail:i.wheelDelta,e.listener(i,o),clearTimeout(t),t=setTimeout(function(){r=0,o.state="end",o.wheelDelta=0,e.listener(i,o)},n)},s=document.addEventListener?"addEventListener":"attachEvent",a=document.removeEventListener?"removeEventListener":"detachEvent",u=eventjs.getEventSupport("mousewheel")?"mousewheel":"DOMMouseScroll";return e.target[s](u,i,!1),o},eventjs.Gesture=eventjs.Gesture||{},eventjs.Gesture._gestureHandlers=eventjs.Gesture._gestureHandlers||{},eventjs.Gesture._gestureHandlers.wheel=e.wheel,e}(eventjs.proxy),"undefined"==typeof Event)var Event={};"undefined"==typeof Event.proxy&&(Event.proxy={}),Event.proxy=function(e){"use strict";return e.orientation=function(e){var t={gesture:"orientationchange",previous:null,current:window.orientation,target:e.target,listener:e.listener,remove:function(){window.removeEventListener("orientationchange",n,!1)}},n=function(n){return t.previous=t.current,t.current=window.orientation,null!==t.previous&&t.previous!=t.current?void e.listener(n,t):void 0};return window.DeviceOrientationEvent&&window.addEventListener("orientationchange",n,!1),t},Event.Gesture=Event.Gesture||{},Event.Gesture._gestureHandlers=Event.Gesture._gestureHandlers||{},Event.Gesture._gestureHandlers.orientation=e.orientation,e}(Event.proxy);!function(){function e(e,t){if(this.__eventListeners[e]){var n=this.__eventListeners[e];t?n[n.indexOf(t)]=!1:fabric.util.array.fill(n,!1)}}function t(e,t){if(this.__eventListeners||(this.__eventListeners={}),1===arguments.length)for(var n in e)this.on(n,e[n]);else this.__eventListeners[e]||(this.__eventListeners[e]=[]),this.__eventListeners[e].push(t);return this}function n(e,t){var n=function(){t.apply(this,arguments),this.off(e,n)}.bind(this);this.on(e,n)}function r(e,t){if(1===arguments.length)for(var r in e)n.call(this,r,e[r]);else n.call(this,e,t);return this}function o(t,n){if(!this.__eventListeners)return this;if(0===arguments.length)for(t in this.__eventListeners)e.call(this,t);else if(1===arguments.length&&"object"==typeof arguments[0])for(var r in t)e.call(this,r,t[r]);else e.call(this,t,n);return this}function i(e,t){if(!this.__eventListeners)return this;var n=this.__eventListeners[e];if(!n)return this;for(var r=0,o=n.length;o>r;r++)n[r]&&n[r].call(this,t||{});return this.__eventListeners[e]=n.filter(function(e){return e!==!1}),this}fabric.Observable={fire:i,on:t,once:r,off:o}}();fabric.Collection={_objects:[],add:function(){if(this._objects.push.apply(this._objects,arguments),this._onObjectAdded)for(var e=0,t=arguments.length;t>e;e++)this._onObjectAdded(arguments[e]);return this.renderOnAddRemove&&this.requestRenderAll(),this},insertAt:function(e,t,n){var r=this._objects;return n?r[t]=e:r.splice(t,0,e),this._onObjectAdded&&this._onObjectAdded(e),this.renderOnAddRemove&&this.requestRenderAll(),this},remove:function(){for(var e,t=this._objects,n=!1,r=0,o=arguments.length;o>r;r++)e=t.indexOf(arguments[r]),-1!==e&&(n=!0,t.splice(e,1),this._onObjectRemoved&&this._onObjectRemoved(arguments[r]));return this.renderOnAddRemove&&n&&this.requestRenderAll(),this},forEachObject:function(e,t){for(var n=this.getObjects(),r=0,o=n.length;o>r;r++)e.call(t,n[r],r,n);return this},getObjects:function(e){return"undefined"==typeof e?this._objects.concat():this._objects.filter(function(t){return t.type===e})},item:function(e){return this._objects[e]},isEmpty:function(){return 0===this._objects.length},size:function(){return this._objects.length},contains:function(e,t){return this._objects.indexOf(e)>-1?!0:t?this._objects.some(function(t){return"function"==typeof t.contains&&t.contains(e,!0)}):!1},complexity:function(){return this._objects.reduce(function(e,t){return e+=t.complexity?t.complexity():0},0)}};fabric.CommonMethods={_setOptions:function(e){for(var t in e)this.set(t,e[t])},_initGradient:function(e,t){!e||!e.colorStops||e instanceof fabric.Gradient||this.set(t,new fabric.Gradient(e))},_initPattern:function(e,t,n){!e||!e.source||e instanceof fabric.Pattern?n&&n():this.set(t,new fabric.Pattern(e,n))},_setObject:function(e){for(var t in e)this._set(t,e[t])},set:function(e,t){return"object"==typeof e?this._setObject(e):this._set(e,t),this},_set:function(e,t){this[e]=t},toggle:function(e){var t=this.get(e);return"boolean"==typeof t&&this.set(e,!t),this},get:function(e){return this[e]}};!function(e){var t=Math.sqrt,n=Math.atan2,r=Math.pow,i=Math.PI/180,o=Math.PI/2;fabric.util={cos:function(e){if(0===e)return 1;0>e&&(e=-e);var t=e/o;switch(t){case 1:case 3:return 0;case 2:return-1}return Math.cos(e)},sin:function(e){if(0===e)return 0;var t=e/o,n=1;switch(0>e&&(n=-1),t){case 1:return n;case 2:return 0;case 3:return-n}return Math.sin(e)},removeFromArray:function(e,t){var n=e.indexOf(t);return-1!==n&&e.splice(n,1),e},getRandomInt:function(e,t){return Math.floor(Math.random()*(t-e+1))+e},degreesToRadians:function(e){return e*i},radiansToDegrees:function(e){return e/i},rotatePoint:function(e,t,n){var r=new fabric.Point(e.x-t.x,e.y-t.y),i=fabric.util.rotateVector(r,n);return new fabric.Point(i.x,i.y).addEquals(t)},rotateVector:function(e,t){var n=fabric.util.sin(t),r=fabric.util.cos(t),i=e.x*r-e.y*n,o=e.x*n+e.y*r;return{x:i,y:o}},createVector:function(e,t){return new fabric.Point(t.x-e.x,t.y-e.y)},calcAngleBetweenVectors:function(e,t){return Math.acos((e.x*t.x+e.y*t.y)/(Math.hypot(e.x,e.y)*Math.hypot(t.x,t.y)))},getHatVector:function(e){return new fabric.Point(e.x,e.y).multiply(1/Math.hypot(e.x,e.y))},getBisector:function(e,t,n){var r=fabric.util.createVector(e,t),i=fabric.util.createVector(e,n),o=fabric.util.calcAngleBetweenVectors(r,i),a=fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(r,o),i),s=o*(0===a?1:-1)/2;return{vector:fabric.util.getHatVector(fabric.util.rotateVector(r,s)),angle:o}},projectStrokeOnPoints:function(e,t,n){var r=[],i=t.strokeWidth/2,o=t.strokeUniform?new fabric.Point(1/t.scaleX,1/t.scaleY):new fabric.Point(1,1),a=function(e){var t=i/Math.hypot(e.x,e.y);return new fabric.Point(e.x*t*o.x,e.y*t*o.y)};return e.length<=1?r:(e.forEach(function(s,u){var c,f,d=new fabric.Point(s.x,s.y);0===u?(f=e[u+1],c=n?a(fabric.util.createVector(f,d)).addEquals(d):e[e.length-1]):u===e.length-1?(c=e[u-1],f=n?a(fabric.util.createVector(c,d)).addEquals(d):e[0]):(c=e[u-1],f=e[u+1]);var l,v,p=fabric.util.getBisector(d,c,f),g=p.vector,m=p.angle;return"miter"===t.strokeLineJoin&&(l=-i/Math.sin(m/2),v=new fabric.Point(g.x*l*o.x,g.y*l*o.y),Math.hypot(v.x,v.y)/i<=t.strokeMiterLimit)?(r.push(d.add(v)),void r.push(d.subtract(v))):(l=-i*Math.SQRT2,v=new fabric.Point(g.x*l*o.x,g.y*l*o.y),r.push(d.add(v)),void r.push(d.subtract(v)))}),r)},transformPoint:function(e,t,n){return n?new fabric.Point(t[0]*e.x+t[2]*e.y,t[1]*e.x+t[3]*e.y):new fabric.Point(t[0]*e.x+t[2]*e.y+t[4],t[1]*e.x+t[3]*e.y+t[5])},makeBoundingBoxFromPoints:function(e,t){if(t)for(var n=0;n<e.length;n++)e[n]=fabric.util.transformPoint(e[n],t);var r=[e[0].x,e[1].x,e[2].x,e[3].x],i=fabric.util.array.min(r),o=fabric.util.array.max(r),a=o-i,s=[e[0].y,e[1].y,e[2].y,e[3].y],u=fabric.util.array.min(s),c=fabric.util.array.max(s),f=c-u;return{left:i,top:u,width:a,height:f}},invertTransform:function(e){var t=1/(e[0]*e[3]-e[1]*e[2]),n=[t*e[3],-t*e[1],-t*e[2],t*e[0]],r=fabric.util.transformPoint({x:e[4],y:e[5]},n,!0);return n[4]=-r.x,n[5]=-r.y,n},toFixed:function(e,t){return parseFloat(Number(e).toFixed(t))},parseUnit:function(e,t){var n=/\D{0,2}$/.exec(e),r=parseFloat(e);switch(t||(t=fabric.Text.DEFAULT_SVG_FONT_SIZE),n[0]){case"mm":return r*fabric.DPI/25.4;case"cm":return r*fabric.DPI/2.54;case"in":return r*fabric.DPI;case"pt":return r*fabric.DPI/72;case"pc":return r*fabric.DPI/72*12;case"em":return r*t;default:return r}},falseFunction:function(){return!1},getKlass:function(e,t){return e=fabric.util.string.camelize(e.charAt(0).toUpperCase()+e.slice(1)),fabric.util.resolveNamespace(t)[e]},getSvgAttributes:function(e){var t=["instantiated_by_use","style","id","class"];switch(e){case"linearGradient":t=t.concat(["x1","y1","x2","y2","gradientUnits","gradientTransform"]);break;case"radialGradient":t=t.concat(["gradientUnits","gradientTransform","cx","cy","r","fx","fy","fr"]);break;case"stop":t=t.concat(["offset","stop-color","stop-opacity"])}return t},resolveNamespace:function(t){if(!t)return fabric;var n,r=t.split("."),i=r.length,o=e||fabric.window;for(n=0;i>n;++n)o=o[r[n]];return o},loadImage:function(e,t,n,r){if(!e)return void(t&&t.call(n,e));var i=fabric.util.createImage(),o=function(){t&&t.call(n,i,!1),i=i.onload=i.onerror=null};i.onload=o,i.onerror=function(){fabric.log("Error loading "+i.src),t&&t.call(n,null,!0),i=i.onload=i.onerror=null},0!==e.indexOf("data")&&void 0!==r&&null!==r&&(i.crossOrigin=r),"data:image/svg"===e.substring(0,14)&&(i.onload=null,fabric.util.loadImageInDom(i,o)),i.src=e},loadImageInDom:function(e,t){var n=fabric.document.createElement("div");n.style.width=n.style.height="1px",n.style.left=n.style.top="-100%",n.style.position="absolute",n.appendChild(e),fabric.document.querySelector("body").appendChild(n),e.onload=function(){t(),n.parentNode.removeChild(n),n=null}},enlivenObjects:function(e,t,n,r){function i(){++a===s&&t&&t(o.filter(function(e){return e}))}e=e||[];var o=[],a=0,s=e.length;return s?void e.forEach(function(e,t){if(!e||!e.type)return void i();var a=fabric.util.getKlass(e.type,n);a.fromObject(e,function(n,a){a||(o[t]=n),r&&r(e,n,a),i()})}):void(t&&t(o))},enlivenObjectEnlivables:function(e,t,n){var r=fabric.Object.ENLIVEN_PROPS.filter(function(t){return!!e[t]});fabric.util.enlivenObjects(r.map(function(t){return e[t]}),function(e){var i={};r.forEach(function(n,r){i[n]=e[r],t&&(t[n]=e[r])}),n&&n(i)})},enlivenPatterns:function(e,t){function n(){++i===o&&t&&t(r)}e=e||[];var r=[],i=0,o=e.length;return o?void e.forEach(function(e,t){e&&e.source?new fabric.Pattern(e,function(e){r[t]=e,n()}):(r[t]=e,n())}):void(t&&t(r))},groupSVGElements:function(e,t,n){var r;return e&&1===e.length?e[0]:(t&&(t.width&&t.height?t.centerPoint={x:t.width/2,y:t.height/2}:(delete t.width,delete t.height)),r=new fabric.Group(e,t),"undefined"!=typeof n&&(r.sourcePath=n),r)},populateWithProperties:function(e,t,n){if(n&&Array.isArray(n))for(var r=0,i=n.length;i>r;r++)n[r]in e&&(t[n[r]]=e[n[r]])},createCanvasElement:function(){return fabric.document.createElement("canvas")},copyCanvasElement:function(e){var t=fabric.util.createCanvasElement();return t.width=e.width,t.height=e.height,t.getContext("2d").drawImage(e,0,0),t},toDataURL:function(e,t,n){return e.toDataURL("image/"+t,n)},createImage:function(){return fabric.document.createElement("img")},multiplyTransformMatrices:function(e,t,n){return[e[0]*t[0]+e[2]*t[1],e[1]*t[0]+e[3]*t[1],e[0]*t[2]+e[2]*t[3],e[1]*t[2]+e[3]*t[3],n?0:e[0]*t[4]+e[2]*t[5]+e[4],n?0:e[1]*t[4]+e[3]*t[5]+e[5]]},qrDecompose:function(e){var o=n(e[1],e[0]),a=r(e[0],2)+r(e[1],2),s=t(a),u=(e[0]*e[3]-e[2]*e[1])/s,c=n(e[0]*e[2]+e[1]*e[3],a);return{angle:o/i,scaleX:s,scaleY:u,skewX:c/i,skewY:0,translateX:e[4],translateY:e[5]}},calcRotateMatrix:function(e){if(!e.angle)return fabric.iMatrix.concat();var t=fabric.util.degreesToRadians(e.angle),n=fabric.util.cos(t),r=fabric.util.sin(t);return[n,r,-r,n,0,0]},calcDimensionsMatrix:function(e){var t="undefined"==typeof e.scaleX?1:e.scaleX,n="undefined"==typeof e.scaleY?1:e.scaleY,r=[e.flipX?-t:t,0,0,e.flipY?-n:n,0,0],i=fabric.util.multiplyTransformMatrices,o=fabric.util.degreesToRadians;return e.skewX&&(r=i(r,[1,0,Math.tan(o(e.skewX)),1],!0)),e.skewY&&(r=i(r,[1,Math.tan(o(e.skewY)),0,1],!0)),r},composeMatrix:function(e){var t=[1,0,0,1,e.translateX||0,e.translateY||0],n=fabric.util.multiplyTransformMatrices;return e.angle&&(t=n(t,fabric.util.calcRotateMatrix(e))),(1!==e.scaleX||1!==e.scaleY||e.skewX||e.skewY||e.flipX||e.flipY)&&(t=n(t,fabric.util.calcDimensionsMatrix(e))),t},resetObjectTransform:function(e){e.scaleX=1,e.scaleY=1,e.skewX=0,e.skewY=0,e.flipX=!1,e.flipY=!1,e.rotate(0)},saveObjectTransform:function(e){return{scaleX:e.scaleX,scaleY:e.scaleY,skewX:e.skewX,skewY:e.skewY,angle:e.angle,left:e.left,flipX:e.flipX,flipY:e.flipY,top:e.top}},isTransparent:function(e,t,n,r){r>0&&(t>r?t-=r:t=0,n>r?n-=r:n=0);var i,o,a=!0,s=e.getImageData(t,n,2*r||1,2*r||1),u=s.data.length;for(i=3;u>i&&(o=s.data[i],a=0>=o,a!==!1);i+=4);return s=null,a},parsePreserveAspectRatioAttribute:function(e){var t,n="meet",r="Mid",i="Mid",o=e.split(" ");return o&&o.length&&(n=o.pop(),"meet"!==n&&"slice"!==n?(t=n,n="meet"):o.length&&(t=o.pop())),r="none"!==t?t.slice(1,4):"none",i="none"!==t?t.slice(5,8):"none",{meetOrSlice:n,alignX:r,alignY:i}},clearFabricFontCache:function(e){e=(e||"").toLowerCase(),e?fabric.charWidthsCache[e]&&delete fabric.charWidthsCache[e]:fabric.charWidthsCache={}},limitDimsByArea:function(e,t){var n=Math.sqrt(t*e),r=Math.floor(t/n);return{x:Math.floor(n),y:r}},capValue:function(e,t,n){return Math.max(e,Math.min(t,n))},findScaleToFit:function(e,t){return Math.min(t.width/e.width,t.height/e.height)},findScaleToCover:function(e,t){return Math.max(t.width/e.width,t.height/e.height)},matrixToSVG:function(e){return"matrix("+e.map(function(e){return fabric.util.toFixed(e,fabric.Object.NUM_FRACTION_DIGITS)}).join(" ")+")"},removeTransformFromObject:function(e,t){var n=fabric.util.invertTransform(t),r=fabric.util.multiplyTransformMatrices(n,e.calcOwnMatrix());fabric.util.applyTransformToObject(e,r)},addTransformToObject:function(e,t){fabric.util.applyTransformToObject(e,fabric.util.multiplyTransformMatrices(t,e.calcOwnMatrix()))},applyTransformToObject:function(e,t){var n=fabric.util.qrDecompose(t),r=new fabric.Point(n.translateX,n.translateY);e.flipX=!1,e.flipY=!1,e.set("scaleX",n.scaleX),e.set("scaleY",n.scaleY),e.skewX=n.skewX,e.skewY=n.skewY,e.angle=n.angle,e.setPositionByOrigin(r,"center","center")},sizeAfterTransform:function(e,t,n){var r=e/2,i=t/2,o=[{x:-r,y:-i},{x:r,y:-i},{x:-r,y:i},{x:r,y:i}],a=fabric.util.calcDimensionsMatrix(n),s=fabric.util.makeBoundingBoxFromPoints(o,a);return{x:s.width,y:s.height}},mergeClipPaths:function(e,t){var n=e,r=t;n.inverted&&!r.inverted&&(n=t,r=e),fabric.util.applyTransformToObject(r,fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(n.calcTransformMatrix()),r.calcTransformMatrix()));var i=n.inverted&&r.inverted;return i&&(n.inverted=r.inverted=!1),new fabric.Group([n],{clipPath:r,inverted:i})},hasStyleChanged:function(e,t,n){return n=n||!1,e.fill!==t.fill||e.stroke!==t.stroke||e.strokeWidth!==t.strokeWidth||e.fontSize!==t.fontSize||e.fontFamily!==t.fontFamily||e.fontWeight!==t.fontWeight||e.fontStyle!==t.fontStyle||e.deltaY!==t.deltaY||n&&(e.overline!==t.overline||e.underline!==t.underline||e.linethrough!==t.linethrough)},stylesToArray:function(e,t){for(var e=fabric.util.object.clone(e,!0),n=t.split("\n"),r=-1,i={},o=[],a=0;a<n.length;a++)if(e[a])for(var s=0;s<n[a].length;s++){r++;var u=e[a][s];if(u){var c=fabric.util.hasStyleChanged(i,u,!0);c?o.push({start:r,end:r+1,style:u}):o[o.length-1].end++}i=u||{}}else r+=n[a].length;return o},stylesFromArray:function(e,t){if(!Array.isArray(e))return e;for(var n=t.split("\n"),r=-1,i=0,o={},a=0;a<n.length;a++)for(var s=0;s<n[a].length;s++)r++,e[i]&&e[i].start<=r&&r<e[i].end&&(o[a]=o[a]||{},o[a][s]=Object.assign({},e[i].style),r===e[i].end-1&&i++);return o}}}("undefined"!=typeof exports?exports:this);!function(){fabric.util.createAccessors=function(e){var t,n,r,i,o,a=e.prototype;for(t=a.stateProperties.length;t--;)n=a.stateProperties[t],r=n.charAt(0).toUpperCase()+n.slice(1),i="set"+r,o="get"+r,a[o]||(a[o]=function(e){return new Function('return this.get("'+e+'")')}(n)),a[i]||(a[i]=function(e){return new Function("value",'return this.set("'+e+'", value)')}(n))}}("undefined"!=typeof exports?exports:this);!function(){function e(e,t,n,r,i,o,a,s,u,c,f){var l=fabric.util.cos(e),d=fabric.util.sin(e),v=fabric.util.cos(t),p=fabric.util.sin(t),g=n*i*v-r*o*p+a,m=r*i*v+n*o*p+s,h=c+u*(-n*i*d-r*o*l),y=f+u*(-r*i*d+n*o*l),b=g+u*(n*i*p+r*o*v),w=m+u*(r*i*p-n*o*v);return["C",h,y,b,w,g,m]}function t(t,r,i,o,a,s,u){var c=Math.PI,f=u*c/180,l=fabric.util.sin(f),d=fabric.util.cos(f),v=0,p=0;i=Math.abs(i),o=Math.abs(o);var g=-d*t*.5-l*r*.5,m=-d*r*.5+l*t*.5,h=i*i,y=o*o,b=m*m,w=g*g,x=h*y-h*b-y*w,j=0;if(0>x){var P=Math.sqrt(1-x/(h*y));i*=P,o*=P}else j=(a===s?-1:1)*Math.sqrt(x/(h*b+y*w));var M=j*i*m/o,E=-j*o*g/i,T=d*M-l*E+.5*t,k=l*M+d*E+.5*r,L=n(1,0,(g-M)/i,(m-E)/o),_=n((g-M)/i,(m-E)/o,(-g-M)/i,(-m-E)/o);0===s&&_>0?_-=2*c:1===s&&0>_&&(_+=2*c);for(var C=Math.ceil(Math.abs(_/c*2)),D=[],O=_/C,S=8/3*Math.sin(O/4)*Math.sin(O/4)/Math.sin(O/2),G=L+O,Y=0;C>Y;Y++)D[Y]=e(L,G,d,l,i,o,T,k,S,v,p),v=D[Y][5],p=D[Y][6],L=G,G+=O;return D}function n(e,t,n,r){var i=Math.atan2(t,e),o=Math.atan2(r,n);return o>=i?o-i:2*Math.PI-(i-o)}function r(e,t,n,r,i,o,a,s){var u;if(fabric.cachesBoundsOfCurve&&(u=E.call(arguments),fabric.boundsOfCurveCache[u]))return fabric.boundsOfCurveCache[u];var c,f,l,d,v,p,g,m,h=Math.sqrt,y=Math.min,b=Math.max,w=Math.abs,x=[],j=[[],[]];f=6*e-12*n+6*i,c=-3*e+9*n-9*i+3*a,l=3*n-3*e;for(var P=0;2>P;++P)if(P>0&&(f=6*t-12*r+6*o,c=-3*t+9*r-9*o+3*s,l=3*r-3*t),w(c)<1e-12){if(w(f)<1e-12)continue;d=-l/f,d>0&&1>d&&x.push(d)}else g=f*f-4*l*c,0>g||(m=h(g),v=(-f+m)/(2*c),v>0&&1>v&&x.push(v),p=(-f-m)/(2*c),p>0&&1>p&&x.push(p));for(var M,T,k,L=x.length,_=L;L--;)d=x[L],k=1-d,M=k*k*k*e+3*k*k*d*n+3*k*d*d*i+d*d*d*a,j[0][L]=M,T=k*k*k*t+3*k*k*d*r+3*k*d*d*o+d*d*d*s,j[1][L]=T;j[0][_]=e,j[1][_]=t,j[0][_+1]=a,j[1][_+1]=s;var C=[{x:y.apply(null,j[0]),y:y.apply(null,j[1])},{x:b.apply(null,j[0]),y:b.apply(null,j[1])}];return fabric.cachesBoundsOfCurve&&(fabric.boundsOfCurveCache[u]=C),C}function i(e,n,r){for(var i=r[1],o=r[2],a=r[3],s=r[4],u=r[5],c=r[6],f=r[7],l=t(c-e,f-n,i,o,s,u,a),d=0,v=l.length;v>d;d++)l[d][1]+=e,l[d][2]+=n,l[d][3]+=e,l[d][4]+=n,l[d][5]+=e,l[d][6]+=n;return l}function o(e){var t,n,r,o,a,s,u=0,c=0,f=e.length,l=0,d=0,v=[];for(n=0;f>n;++n){switch(r=!1,t=e[n].slice(0),t[0]){case"l":t[0]="L",t[1]+=u,t[2]+=c;case"L":u=t[1],c=t[2];break;case"h":t[1]+=u;case"H":t[0]="L",t[2]=c,u=t[1];break;case"v":t[1]+=c;case"V":t[0]="L",c=t[1],t[1]=u,t[2]=c;break;case"m":t[0]="M",t[1]+=u,t[2]+=c;case"M":u=t[1],c=t[2],l=t[1],d=t[2];break;case"c":t[0]="C",t[1]+=u,t[2]+=c,t[3]+=u,t[4]+=c,t[5]+=u,t[6]+=c;case"C":a=t[3],s=t[4],u=t[5],c=t[6];break;case"s":t[0]="S",t[1]+=u,t[2]+=c,t[3]+=u,t[4]+=c;case"S":"C"===o?(a=2*u-a,s=2*c-s):(a=u,s=c),u=t[3],c=t[4],t[0]="C",t[5]=t[3],t[6]=t[4],t[3]=t[1],t[4]=t[2],t[1]=a,t[2]=s,a=t[3],s=t[4];break;case"q":t[0]="Q",t[1]+=u,t[2]+=c,t[3]+=u,t[4]+=c;case"Q":a=t[1],s=t[2],u=t[3],c=t[4];break;case"t":t[0]="T",t[1]+=u,t[2]+=c;case"T":"Q"===o?(a=2*u-a,s=2*c-s):(a=u,s=c),t[0]="Q",u=t[1],c=t[2],t[1]=a,t[2]=s,t[3]=u,t[4]=c;break;case"a":t[0]="A",t[6]+=u,t[7]+=c;case"A":r=!0,v=v.concat(i(u,c,t)),u=t[6],c=t[7];break;case"z":case"Z":u=l,c=d}r||v.push(t),o=t[0]}return v}function a(e,t,n,r){return Math.sqrt((n-e)*(n-e)+(r-t)*(r-t))}function s(e){return e*e*e}function u(e){return 3*e*e*(1-e)}function c(e){return 3*e*(1-e)*(1-e)}function f(e){return(1-e)*(1-e)*(1-e)}function l(e,t,n,r,i,o,a,l){return function(d){var v=s(d),p=u(d),g=c(d),m=f(d);return{x:a*v+i*p+n*g+e*m,y:l*v+o*p+r*g+t*m}}}function d(e,t,n,r,i,o,a,s){return function(u){var c=1-u,f=3*c*c*(n-e)+6*c*u*(i-n)+3*u*u*(a-i),l=3*c*c*(r-t)+6*c*u*(o-r)+3*u*u*(s-o);return Math.atan2(l,f)}}function v(e){return e*e}function p(e){return 2*e*(1-e)}function g(e){return(1-e)*(1-e)}function m(e,t,n,r,i,o){return function(a){var s=v(a),u=p(a),c=g(a);return{x:i*s+n*u+e*c,y:o*s+r*u+t*c}}}function h(e,t,n,r,i,o){return function(a){var s=1-a,u=2*s*(n-e)+2*a*(i-n),c=2*s*(r-t)+2*a*(o-r);return Math.atan2(c,u)}}function y(e,t,n){var r,i,o={x:t,y:n},s=0;for(i=1;100>=i;i+=1)r=e(i/100),s+=a(o.x,o.y,r.x,r.y),o=r;return s}function b(e,t){for(var n,r,i,o=0,s=0,u=e.iterator,c={x:e.x,y:e.y},f=.01,l=e.angleFinder;t>s&&f>1e-4;)n=u(o),i=o,r=a(c.x,c.y,n.x,n.y),r+s>t?(o-=f,f/=2):(c=n,o+=f,s+=r);return n.angle=l(i),n}function w(e){for(var t,n,r,i,o=0,s=e.length,u=0,c=0,f=0,v=0,p=[],g=0;s>g;g++){switch(t=e[g],r={x:u,y:c,command:t[0]},t[0]){case"M":r.length=0,f=u=t[1],v=c=t[2];break;case"L":r.length=a(u,c,t[1],t[2]),u=t[1],c=t[2];break;case"C":n=l(u,c,t[1],t[2],t[3],t[4],t[5],t[6]),i=d(u,c,t[1],t[2],t[3],t[4],t[5],t[6]),r.iterator=n,r.angleFinder=i,r.length=y(n,u,c),u=t[5],c=t[6];break;case"Q":n=m(u,c,t[1],t[2],t[3],t[4]),i=h(u,c,t[1],t[2],t[3],t[4]),r.iterator=n,r.angleFinder=i,r.length=y(n,u,c),u=t[3],c=t[4];break;case"Z":case"z":r.destX=f,r.destY=v,r.length=a(u,c,f,v),u=f,c=v}o+=r.length,p.push(r)}return p.push({length:o,x:u,y:c}),p}function x(e,t,n){n||(n=w(e));for(var r=0;t-n[r].length>0&&r<n.length-2;)t-=n[r].length,r++;var i,o=n[r],a=t/o.length,s=o.command,u=e[r];switch(s){case"M":return{x:o.x,y:o.y,angle:0};case"Z":case"z":return i=new fabric.Point(o.x,o.y).lerp(new fabric.Point(o.destX,o.destY),a),i.angle=Math.atan2(o.destY-o.y,o.destX-o.x),i;case"L":return i=new fabric.Point(o.x,o.y).lerp(new fabric.Point(u[1],u[2]),a),i.angle=Math.atan2(u[2]-o.y,u[1]-o.x),i;case"C":return b(o,t);case"Q":return b(o,t)}}function j(e){var t,n,r,i,o,a=[],s=[],u=fabric.rePathCommand,c="[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*",f="("+c+")"+fabric.commaWsp,l="([01])"+fabric.commaWsp+"?",d=f+"?"+f+"?"+f+l+l+f+"?("+c+")",v=new RegExp(d,"g");if(!e||!e.match)return a;o=e.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);for(var p,g=0,m=o.length;m>g;g++){t=o[g],i=t.slice(1).trim(),s.length=0;var h=t.charAt(0);if(p=[h],"a"===h.toLowerCase())for(var y;y=v.exec(i);)for(var b=1;b<y.length;b++)s.push(y[b]);else for(;r=u.exec(i);)s.push(r[0]);for(var b=0,w=s.length;w>b;b++)n=parseFloat(s[b]),isNaN(n)||p.push(n);var x=T[h.toLowerCase()],j=k[h]||h;if(p.length-1>x)for(var P=1,M=p.length;M>P;P+=x)a.push([h].concat(p.slice(P,P+x))),h=j;else a.push(p)}return a}function P(e,t){var n,r=[],i=new fabric.Point(e[0].x,e[0].y),o=new fabric.Point(e[1].x,e[1].y),a=e.length,s=1,u=0,c=a>2;for(t=t||0,c&&(s=e[2].x<o.x?-1:e[2].x===o.x?0:1,u=e[2].y<o.y?-1:e[2].y===o.y?0:1),r.push(["M",i.x-s*t,i.y-u*t]),n=1;a>n;n++){if(!i.eq(o)){var f=i.midPointFrom(o);r.push(["Q",i.x,i.y,f.x,f.y])}i=e[n],n+1<e.length&&(o=e[n+1])}return c&&(s=i.x>e[n-2].x?1:i.x===e[n-2].x?0:-1,u=i.y>e[n-2].y?1:i.y===e[n-2].y?0:-1),r.push(["L",i.x+s*t,i.y+u*t]),r}function M(e,t,n){return n&&(t=fabric.util.multiplyTransformMatrices(t,[1,0,0,1,-n.x,-n.y])),e.map(function(e){for(var n=e.slice(0),r={},i=1;i<e.length-1;i+=2)r.x=e[i],r.y=e[i+1],r=fabric.util.transformPoint(r,t),n[i]=r.x,n[i+1]=r.y;return n})}var E=Array.prototype.join,T={m:2,l:2,h:1,v:1,c:6,s:4,q:4,t:2,a:7},k={m:"l",M:"L"};fabric.util.joinPath=function(e){return e.map(function(e){return e.join(" ")}).join(" ")},fabric.util.parsePath=j,fabric.util.makePathSimpler=o,fabric.util.getSmoothPathFromPoints=P,fabric.util.getPathSegmentsInfo=w,fabric.util.getBoundsOfCurve=r,fabric.util.getPointOnPath=x,fabric.util.transformPath=M}();!function(){function e(e,t){for(var n=o.call(arguments,2),r=[],i=0,a=e.length;a>i;i++)r[i]=n.length?e[i][t].apply(e[i],n):e[i][t].call(e[i]);return r}function t(e,t){return i(e,t,function(e,t){return e>=t})}function n(e,t){return i(e,t,function(e,t){return t>e})}function r(e,t){for(var n=e.length;n--;)e[n]=t;return e}function i(e,t,n){if(e&&0!==e.length){var r=e.length-1,i=t?e[r][t]:e[r];if(t)for(;r--;)n(e[r][t],i)&&(i=e[r][t]);else for(;r--;)n(e[r],i)&&(i=e[r]);return i}}var o=Array.prototype.slice;fabric.util.array={fill:r,invoke:e,min:n,max:t}}();!function(){function e(t,n,r){if(r)if(!fabric.isLikelyNode&&n instanceof Element)t=n;else if(n instanceof Array){t=[];for(var i=0,o=n.length;o>i;i++)t[i]=e({},n[i],r)}else if(n&&"object"==typeof n)for(var a in n)"canvas"===a||"group"===a?t[a]=null:n.hasOwnProperty(a)&&(t[a]=e({},n[a],r));else t=n;else for(var a in n)t[a]=n[a];return t}function t(t,n){return e({},t,n)}fabric.util.object={extend:e,clone:t},fabric.util.object.extend(fabric.util,fabric.Observable)}();!function(){function e(e){return e.replace(/-+(.)?/g,function(e,t){return t?t.toUpperCase():""})}function t(e,t){return e.charAt(0).toUpperCase()+(t?e.slice(1):e.slice(1).toLowerCase())}function r(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&apos;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function n(e){var t,r=0,n=[];for(r=0,t;r<e.length;r++)(t=i(e,r))!==!1&&n.push(t);return n}function i(e,t){var r=e.charCodeAt(t);if(isNaN(r))return"";if(55296>r||r>57343)return e.charAt(t);if(r>=55296&&56319>=r){if(e.length<=t+1)throw"High surrogate without following low surrogate";var n=e.charCodeAt(t+1);if(56320>n||n>57343)throw"High surrogate without following low surrogate";return e.charAt(t)+e.charAt(t+1)}if(0===t)throw"Low surrogate without preceding high surrogate";var i=e.charCodeAt(t-1);if(55296>i||i>56319)throw"Low surrogate without preceding high surrogate";return!1}fabric.util.string={camelize:e,capitalize:t,escapeXml:r,graphemeSplit:n}}();!function(){function e(){}function t(e){for(var t=null,n=this;n.constructor.superclass;){var i=n.constructor.superclass.prototype[e];if(n[e]!==i){t=i;break}n=n.constructor.superclass.prototype}return t?arguments.length>1?t.apply(this,r.call(arguments,1)):t.call(this):console.log("tried to callSuper "+e+", method not found in prototype chain",this)}function n(){function n(){this.initialize.apply(this,arguments)}var o=null,s=r.call(arguments,0);"function"==typeof s[0]&&(o=s.shift()),n.superclass=o,n.subclasses=[],o&&(e.prototype=o.prototype,n.prototype=new e,o.subclasses.push(n));for(var u=0,c=s.length;c>u;u++)a(n,s[u],o);return n.prototype.initialize||(n.prototype.initialize=i),n.prototype.constructor=n,n.prototype.callSuper=t,n}var r=Array.prototype.slice,i=function(){},o=function(){for(var e in{toString:1})if("toString"===e)return!1;return!0}(),a=function(e,t,n){for(var r in t)e.prototype[r]=r in e.prototype&&"function"==typeof e.prototype[r]&&(t[r]+"").indexOf("callSuper")>-1?function(e){return function(){var r=this.constructor.superclass;this.constructor.superclass=n;var i=t[e].apply(this,arguments);return this.constructor.superclass=r,"initialize"!==e?i:void 0}}(r):t[r],o&&(t.toString!==Object.prototype.toString&&(e.prototype.toString=t.toString),t.valueOf!==Object.prototype.valueOf&&(e.prototype.valueOf=t.valueOf))};fabric.util.createClass=n}();!function(){function e(e){var t=e.changedTouches;return t&&t[0]?t[0]:e}var t=!!fabric.document.createElement("div").attachEvent,n=["touchstart","touchmove","touchend"];fabric.util.addListener=function(e,n,r,i){e&&e.addEventListener(n,r,t?!1:i)},fabric.util.removeListener=function(e,n,r,i){e&&e.removeEventListener(n,r,t?!1:i)},fabric.util.getPointer=function(t){var n=t.target,r=fabric.util.getScrollLeftTop(n),i=e(t);return{x:i.clientX+r.left,y:i.clientY+r.top}},fabric.util.isTouchEvent=function(e){return n.indexOf(e.type)>-1||"touch"===e.pointerType}}();!function(){function e(e,t){var n=e.style;if(!n)return e;if("string"==typeof t)return e.style.cssText+=";"+t,t.indexOf("opacity")>-1?o(e,t.match(/opacity:\s*(\d?\.?\d*)/)[1]):e;for(var r in t)if("opacity"===r)o(e,t[r]);else{var i="float"===r||"cssFloat"===r?"undefined"==typeof n.styleFloat?"cssFloat":"styleFloat":r;n.setProperty(i,t[r])}return e}var t=fabric.document.createElement("div"),n="string"==typeof t.style.opacity,r="string"==typeof t.style.filter,i=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,o=function(e){return e};n?o=function(e,t){return e.style.opacity=t,e}:r&&(o=function(e,t){var n=e.style;return e.currentStyle&&!e.currentStyle.hasLayout&&(n.zoom=1),i.test(n.filter)?(t=t>=.9999?"":"alpha(opacity="+100*t+")",n.filter=n.filter.replace(i,t)):n.filter+=" alpha(opacity="+100*t+")",e}),fabric.util.setStyle=e}();!function(){function e(e){return"string"==typeof e?fabric.document.getElementById(e):e}function t(e,t){var n=fabric.document.createElement(e);for(var r in t)"class"===r?n.className=t[r]:"for"===r?n.htmlFor=t[r]:n.setAttribute(r,t[r]);return n}function n(e,t){e&&-1===(" "+e.className+" ").indexOf(" "+t+" ")&&(e.className+=(e.className?" ":"")+t)}function r(e,n,r){return"string"==typeof n&&(n=t(n,r)),e.parentNode&&e.parentNode.replaceChild(n,e),n.appendChild(e),n}function i(e){for(var t=0,n=0,r=fabric.document.documentElement,i=fabric.document.body||{scrollLeft:0,scrollTop:0};e&&(e.parentNode||e.host)&&(e=e.parentNode||e.host,e===fabric.document?(t=i.scrollLeft||r.scrollLeft||0,n=i.scrollTop||r.scrollTop||0):(t+=e.scrollLeft||0,n+=e.scrollTop||0),1!==e.nodeType||"fixed"!==e.style.position););return{left:t,top:n}}function o(e){var t,n,r=e&&e.ownerDocument,o={left:0,top:0},a={left:0,top:0},s={borderLeftWidth:"left",borderTopWidth:"top",paddingLeft:"left",paddingTop:"top"};if(!r)return a;for(var c in s)a[s[c]]+=parseInt(v(e,c),10)||0;return t=r.documentElement,"undefined"!=typeof e.getBoundingClientRect&&(o=e.getBoundingClientRect()),n=i(e),{left:o.left+n.left-(t.clientLeft||0)+a.left,top:o.top+n.top-(t.clientTop||0)+a.top}}function a(e){var t=fabric.jsdomImplForWrapper(e);return t._canvas||t._image}function s(e){if(fabric.isLikelyNode){var t=fabric.jsdomImplForWrapper(e);t&&(t._image=null,t._canvas=null,t._currentSrc=null,t._attributes=null,t._classList=null)}}function c(e,t){e.imageSmoothingEnabled=e.imageSmoothingEnabled||e.webkitImageSmoothingEnabled||e.mozImageSmoothingEnabled||e.msImageSmoothingEnabled||e.oImageSmoothingEnabled,e.imageSmoothingEnabled=t}var u,f=Array.prototype.slice,l=function(e){return f.call(e,0)};try{u=l(fabric.document.childNodes)instanceof Array}catch(d){}u||(l=function(e){for(var t=new Array(e.length),n=e.length;n--;)t[n]=e[n];return t});var v;v=fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?function(e,t){var n=fabric.document.defaultView.getComputedStyle(e,null);return n?n[t]:void 0}:function(e,t){var n=e.style[t];return!n&&e.currentStyle&&(n=e.currentStyle[t]),n},function(){function e(e){return"undefined"!=typeof e.onselectstart&&(e.onselectstart=fabric.util.falseFunction),r?e.style[r]="none":"string"==typeof e.unselectable&&(e.unselectable="on"),e}function t(e){return"undefined"!=typeof e.onselectstart&&(e.onselectstart=null),r?e.style[r]="":"string"==typeof e.unselectable&&(e.unselectable=""),e}var n=fabric.document.documentElement.style,r="userSelect"in n?"userSelect":"MozUserSelect"in n?"MozUserSelect":"WebkitUserSelect"in n?"WebkitUserSelect":"KhtmlUserSelect"in n?"KhtmlUserSelect":"";fabric.util.makeElementUnselectable=e,fabric.util.makeElementSelectable=t}(),fabric.util.setImageSmoothing=c,fabric.util.getById=e,fabric.util.toArray=l,fabric.util.addClass=n,fabric.util.makeElement=t,fabric.util.wrapElement=r,fabric.util.getScrollLeftTop=i,fabric.util.getElementOffset=o,fabric.util.getNodeCanvas=a,fabric.util.cleanUpJsdomNode=s}();!function(){function e(e,t){return e+(/\?/.test(e)?"&":"?")+t}function t(){}function n(n,r){r||(r={});var i=r.method?r.method.toUpperCase():"GET",o=r.onComplete||function(){},a=new fabric.window.XMLHttpRequest,s=r.body||r.parameters;return a.onreadystatechange=function(){4===a.readyState&&(o(a),a.onreadystatechange=t)},"GET"===i&&(s=null,"string"==typeof r.parameters&&(n=e(n,r.parameters))),a.open(i,n,!0),("POST"===i||"PUT"===i)&&a.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),a.send(s),a}fabric.util.request=n}();fabric.log=console.log,fabric.warn=console.warn;!function(){function e(){return!1}function t(e,t,n,r){return-n*Math.cos(e/r*(Math.PI/2))+n+t}function n(n){n||(n={});var i,s=!1,c=function(){var e=fabric.runningAnimations.indexOf(i);return e>-1&&fabric.runningAnimations.splice(e,1)[0]};return i=o(a(n),{cancel:function(){return s=!0,c()},currentValue:"startValue"in n?n.startValue:0,completionRate:0,durationRate:0}),fabric.runningAnimations.push(i),r(function(o){var a,u=o||+new Date,f=n.duration||500,l=u+f,d=n.onChange||e,v=n.abort||e,p=n.onComplete||e,g=n.easing||t,m="startValue"in n?n.startValue.length>0:!1,h="startValue"in n?n.startValue:0,y="endValue"in n?n.endValue:100,b=n.byValue||(m?h.map(function(e,t){return y[t]-h[t]}):y-h);n.onStart&&n.onStart(),function w(e){a=e||+new Date;var t=a>l?f:a-u,n=t/f,o=m?h.map(function(e,n){return g(t,h[n],b[n],f)}):g(t,h,b,f),x=Math.abs(m?(o[0]-h[0])/b[0]:(o-h)/b);return i.currentValue=m?o.slice():o,i.completionRate=x,i.durationRate=n,s?void 0:v(o,x,n)?void c():a>l?(i.currentValue=m?y.slice():y,i.completionRate=1,i.durationRate=1,d(m?y.slice():y,1,1),p(y,1,1),void c()):(d(o,x,n),void r(w))}(u)}),i.cancel}function r(){return c.apply(fabric.window,arguments)}function i(){return u.apply(fabric.window,arguments)}var o=fabric.util.object.extend,a=fabric.util.object.clone,s=[];fabric.util.object.extend(s,{cancelAll:function(){var e=this.splice(0);return e.forEach(function(e){e.cancel()}),e},cancelByCanvas:function(e){if(!e)return[];var t=this.filter(function(t){return"object"==typeof t.target&&t.target.canvas===e});return t.forEach(function(e){e.cancel()}),t},cancelByTarget:function(e){var t=this.findAnimationsByTarget(e);return t.forEach(function(e){e.cancel()}),t},findAnimationIndex:function(e){return this.indexOf(this.findAnimation(e))},findAnimation:function(e){return this.find(function(t){return t.cancel===e})},findAnimationsByTarget:function(e){return e?this.filter(function(t){return t.target===e}):[]}});var c=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(e){return fabric.window.setTimeout(e,1e3/60)},u=fabric.window.cancelAnimationFrame||fabric.window.clearTimeout;fabric.util.animate=n,fabric.util.requestAnimFrame=r,fabric.util.cancelAnimFrame=i,fabric.runningAnimations=s}();!function(){function e(e,t,n){var r="rgba("+parseInt(e[0]+n*(t[0]-e[0]),10)+","+parseInt(e[1]+n*(t[1]-e[1]),10)+","+parseInt(e[2]+n*(t[2]-e[2]),10);return r+=","+(e&&t?parseFloat(e[3]+n*(t[3]-e[3])):1),r+=")"}function t(t,n,r,o){var i=new fabric.Color(t).getSource(),a=new fabric.Color(n).getSource(),s=o.onComplete,c=o.onChange;return o=o||{},fabric.util.animate(fabric.util.object.extend(o,{duration:r||500,startValue:i,endValue:a,byValue:a,easing:function(t,n,r,i){var a=o.colorEasing?o.colorEasing(t,i):1-Math.cos(t/i*(Math.PI/2));return e(n,r,a)},onComplete:function(t,n,r){return s?s(e(a,a,0),n,r):void 0},onChange:function(t,n,r){if(c){if(Array.isArray(t))return c(e(t,t,0),n,r);c(t,n,r)}}}))}fabric.util.animateColor=t}();!function(){function e(e,t,n,r){return e<Math.abs(t)?(e=t,r=n/4):r=0===t&&0===e?n/(2*Math.PI)*Math.asin(1):n/(2*Math.PI)*Math.asin(t/e),{a:e,c:t,p:n,s:r}}function t(e,t,n){return e.a*Math.pow(2,10*(t-=1))*Math.sin(2*(t*n-e.s)*Math.PI/e.p)}function n(e,t,n,r){return n*((e=e/r-1)*e*e+1)+t}function r(e,t,n,r){return e/=r/2,1>e?n/2*e*e*e+t:n/2*((e-=2)*e*e+2)+t}function i(e,t,n,r){return n*(e/=r)*e*e*e+t}function o(e,t,n,r){return-n*((e=e/r-1)*e*e*e-1)+t}function a(e,t,n,r){return e/=r/2,1>e?n/2*e*e*e*e+t:-n/2*((e-=2)*e*e*e-2)+t}function s(e,t,n,r){return n*(e/=r)*e*e*e*e+t}function u(e,t,n,r){return n*((e=e/r-1)*e*e*e*e+1)+t}function c(e,t,n,r){return e/=r/2,1>e?n/2*e*e*e*e*e+t:n/2*((e-=2)*e*e*e*e+2)+t}function f(e,t,n,r){return-n*Math.cos(e/r*(Math.PI/2))+n+t}function l(e,t,n,r){return n*Math.sin(e/r*(Math.PI/2))+t}function d(e,t,n,r){return-n/2*(Math.cos(Math.PI*e/r)-1)+t}function v(e,t,n,r){return 0===e?t:n*Math.pow(2,10*(e/r-1))+t}function p(e,t,n,r){return e===r?t+n:n*(-Math.pow(2,-10*e/r)+1)+t}function g(e,t,n,r){return 0===e?t:e===r?t+n:(e/=r/2,1>e?n/2*Math.pow(2,10*(e-1))+t:n/2*(-Math.pow(2,-10*--e)+2)+t)}function m(e,t,n,r){return-n*(Math.sqrt(1-(e/=r)*e)-1)+t}function h(e,t,n,r){return n*Math.sqrt(1-(e=e/r-1)*e)+t}function y(e,t,n,r){return e/=r/2,1>e?-n/2*(Math.sqrt(1-e*e)-1)+t:n/2*(Math.sqrt(1-(e-=2)*e)+1)+t}function b(n,r,i,o){var a=1.70158,s=0,u=i;if(0===n)return r;if(n/=o,1===n)return r+i;s||(s=.3*o);var c=e(u,i,s,a);return-t(c,n,o)+r}function w(t,n,r,i){var o=1.70158,a=0,s=r;if(0===t)return n;if(t/=i,1===t)return n+r;a||(a=.3*i);var u=e(s,r,a,o);return u.a*Math.pow(2,-10*t)*Math.sin(2*(t*i-u.s)*Math.PI/u.p)+u.c+n}function x(n,r,i,o){var a=1.70158,s=0,u=i;if(0===n)return r;if(n/=o/2,2===n)return r+i;s||(s=.3*o*1.5);var c=e(u,i,s,a);return 1>n?-.5*t(c,n,o)+r:c.a*Math.pow(2,-10*(n-=1))*Math.sin(2*(n*o-c.s)*Math.PI/c.p)*.5+c.c+r}function j(e,t,n,r,i){return void 0===i&&(i=1.70158),n*(e/=r)*e*((i+1)*e-i)+t}function M(e,t,n,r,i){return void 0===i&&(i=1.70158),n*((e=e/r-1)*e*((i+1)*e+i)+1)+t}function P(e,t,n,r,i){return void 0===i&&(i=1.70158),e/=r/2,1>e?n/2*e*e*(((i*=1.525)+1)*e-i)+t:n/2*((e-=2)*e*(((i*=1.525)+1)*e+i)+2)+t}function E(e,t,n,r){return n-T(r-e,0,n,r)+t}function T(e,t,n,r){return(e/=r)<1/2.75?7.5625*n*e*e+t:2/2.75>e?n*(7.5625*(e-=1.5/2.75)*e+.75)+t:2.5/2.75>e?n*(7.5625*(e-=2.25/2.75)*e+.9375)+t:n*(7.5625*(e-=2.625/2.75)*e+.984375)+t}function S(e,t,n,r){return r/2>e?.5*E(2*e,0,n,r)+t:.5*T(2*e-r,0,n,r)+.5*n+t}fabric.util.ease={easeInQuad:function(e,t,n,r){return n*(e/=r)*e+t},easeOutQuad:function(e,t,n,r){return-n*(e/=r)*(e-2)+t},easeInOutQuad:function(e,t,n,r){return e/=r/2,1>e?n/2*e*e+t:-n/2*(--e*(e-2)-1)+t},easeInCubic:function(e,t,n,r){return n*(e/=r)*e*e+t},easeOutCubic:n,easeInOutCubic:r,easeInQuart:i,easeOutQuart:o,easeInOutQuart:a,easeInQuint:s,easeOutQuint:u,easeInOutQuint:c,easeInSine:f,easeOutSine:l,easeInOutSine:d,easeInExpo:v,easeOutExpo:p,easeInOutExpo:g,easeInCirc:m,easeOutCirc:h,easeInOutCirc:y,easeInElastic:b,easeOutElastic:w,easeInOutElastic:x,easeInBack:j,easeOutBack:M,easeInOutBack:P,easeInBounce:E,easeOutBounce:T,easeInOutBounce:S}}();!function(e){"use strict";function t(e){return e in S?S[e]:e}function n(e,t,n,r){var i,o=Array.isArray(t);if("fill"!==e&&"stroke"!==e||"none"!==t){if("strokeUniform"===e)return"non-scaling-stroke"===t;if("strokeDashArray"===e)t="none"===t?null:t.replace(/,/g," ").split(/\s+/).map(parseFloat);else if("transformMatrix"===e)t=n&&n.transformMatrix?j(n.transformMatrix,h.parseTransformAttribute(t)):h.parseTransformAttribute(t);else if("visible"===e)t="none"!==t&&"hidden"!==t,n&&n.visible===!1&&(t=!1);else if("opacity"===e)t=parseFloat(t),n&&"undefined"!=typeof n.opacity&&(t*=n.opacity);else if("textAnchor"===e)t="start"===t?"left":"end"===t?"right":"center";else if("charSpacing"===e)i=x(t,r)/r*1e3;else if("paintFirst"===e){var a=t.indexOf("fill"),s=t.indexOf("stroke"),t="fill";a>-1&&s>-1&&a>s?t="stroke":-1===a&&s>-1&&(t="stroke")}else{if("href"===e||"xlink:href"===e||"font"===e)return t;if("imageSmoothing"===e)return"optimizeQuality"===t;i=o?t.map(x):x(t,r)}}else t="";return!o&&isNaN(i)?t:i}function r(e){return new RegExp("^("+e.join("|")+")\\b","i")}function i(e){for(var t in k)if("undefined"!=typeof e[k[t]]&&""!==e[t]){if("undefined"==typeof e[t]){if(!h.Object.prototype[t])continue;e[t]=h.Object.prototype[t]}if(0!==e[t].indexOf("url(")){var n=new h.Color(e[t]);e[t]=n.setAlpha(w(n.getAlpha()*e[k[t]],2)).toRgba()}}return e}function o(e,t){var n,r,i,o,a=[];for(i=0,o=t.length;o>i;i++)n=t[i],r=e.getElementsByTagName(n),a=a.concat(Array.prototype.slice.call(r));return a}function a(e,t){var n,r;e.replace(/;\s*$/,"").split(";").forEach(function(e){var i=e.split(":");n=i[0].trim().toLowerCase(),r=i[1].trim(),t[n]=r})}function s(e,t){var n,r;for(var i in e)"undefined"!=typeof e[i]&&(n=i.toLowerCase(),r=e[i],t[n]=r)}function u(e,t){var n={};for(var r in h.cssRules[t])if(c(e,r.split(" ")))for(var i in h.cssRules[t][r])n[i]=h.cssRules[t][r][i];return n}function c(e,t){var n,r=!0;return n=l(e,t.pop()),n&&t.length&&(r=f(e,t)),n&&r&&0===t.length}function f(e,t){for(var n,r=!0;e.parentNode&&1===e.parentNode.nodeType&&t.length;)r&&(n=t.pop()),e=e.parentNode,r=l(e,n);return 0===t.length}function l(e,t){var n,r,i=e.nodeName,o=e.getAttribute("class"),a=e.getAttribute("id");if(n=new RegExp("^"+i,"i"),t=t.replace(n,""),a&&t.length&&(n=new RegExp("#"+a+"(?![a-zA-Z\\-]+)","i"),t=t.replace(n,"")),o&&t.length)for(o=o.split(" "),r=o.length;r--;)n=new RegExp("\\."+o[r]+"(?![a-zA-Z\\-]+)","i"),t=t.replace(n,"");return 0===t.length}function d(e,t){var n;if(e.getElementById&&(n=e.getElementById(t)),n)return n;var r,i,o,a=e.getElementsByTagName("*");for(i=0,o=a.length;o>i;i++)if(r=a[i],t===r.getAttribute("id"))return r}function v(e){for(var t=o(e,["use","svg:use"]),n=0;t.length&&n<t.length;){var r=t[n],i=r.getAttribute("xlink:href")||r.getAttribute("href");if(null===i)return;var a,s,u,c,f,l=i.slice(1),v=r.getAttribute("x")||0,g=r.getAttribute("y")||0,m=d(e,l).cloneNode(!0),y=(m.getAttribute("transform")||"")+" translate("+v+", "+g+")",b=t.length,w=h.svgNS;if(p(m),/^svg$/i.test(m.nodeName)){var x=m.ownerDocument.createElementNS(w,"g");for(u=0,c=m.attributes,f=c.length;f>u;u++)s=c.item(u),x.setAttributeNS(w,s.nodeName,s.nodeValue);for(;m.firstChild;)x.appendChild(m.firstChild);m=x}for(u=0,c=r.attributes,f=c.length;f>u;u++)s=c.item(u),"x"!==s.nodeName&&"y"!==s.nodeName&&"xlink:href"!==s.nodeName&&"href"!==s.nodeName&&("transform"===s.nodeName?y=s.nodeValue+" "+y:m.setAttribute(s.nodeName,s.nodeValue));m.setAttribute("transform",y),m.setAttribute("instantiated_by_use","1"),m.removeAttribute("id"),a=r.parentNode,a.replaceChild(m,r),t.length===b&&n++}}function p(e){if(!h.svgViewBoxElementsRegEx.test(e.nodeName))return{};var t,n,r,i,o=e.getAttribute("viewBox"),a=1,s=1,u=0,c=0,f=e.getAttribute("width"),l=e.getAttribute("height"),d=e.getAttribute("x")||0,v=e.getAttribute("y")||0,p=e.getAttribute("preserveAspectRatio")||"",g=!o||!(o=o.match(O)),m=!f||!l||"100%"===f||"100%"===l,y=g&&m,b={},w="",j=0,M=0;if(b.width=0,b.height=0,b.toBeParsed=y,g&&(d||v)&&e.parentNode&&"#document"!==e.parentNode.nodeName&&(w=" translate("+x(d)+" "+x(v)+") ",r=(e.getAttribute("transform")||"")+w,e.setAttribute("transform",r),e.removeAttribute("x"),e.removeAttribute("y")),y)return b;if(g)return b.width=x(f),b.height=x(l),b;if(u=-parseFloat(o[1]),c=-parseFloat(o[2]),t=parseFloat(o[3]),n=parseFloat(o[4]),b.minX=u,b.minY=c,b.viewBoxWidth=t,b.viewBoxHeight=n,m?(b.width=t,b.height=n):(b.width=x(f),b.height=x(l),a=b.width/t,s=b.height/n),p=h.util.parsePreserveAspectRatioAttribute(p),"none"!==p.alignX&&("meet"===p.meetOrSlice&&(s=a=a>s?s:a),"slice"===p.meetOrSlice&&(s=a=a>s?a:s),j=b.width-t*a,M=b.height-n*a,"Mid"===p.alignX&&(j/=2),"Mid"===p.alignY&&(M/=2),"Min"===p.alignX&&(j=0),"Min"===p.alignY&&(M=0)),1===a&&1===s&&0===u&&0===c&&0===d&&0===v)return b;if((d||v)&&"#document"!==e.parentNode.nodeName&&(w=" translate("+x(d)+" "+x(v)+") "),r=w+" matrix("+a+" 0 0 "+s+" "+(u*a+j)+" "+(c*s+M)+") ","svg"===e.nodeName){for(i=e.ownerDocument.createElementNS(h.svgNS,"g");e.firstChild;)i.appendChild(e.firstChild);e.appendChild(i)}else i=e,i.removeAttribute("x"),i.removeAttribute("y"),r=i.getAttribute("transform")+r;return i.setAttribute("transform",r),b}function g(e,t){for(;e&&(e=e.parentNode);)if(e.nodeName&&t.test(e.nodeName.replace("svg:",""))&&!e.getAttribute("instantiated_by_use"))return!0;return!1}function m(e,t){var n=["gradientTransform","x1","x2","y1","y2","gradientUnits","cx","cy","r","fx","fy"],r="xlink:href",i=t.getAttribute(r).slice(1),o=d(e,i);if(o&&o.getAttribute(r)&&m(e,o),n.forEach(function(e){o&&!t.hasAttribute(e)&&o.hasAttribute(e)&&t.setAttribute(e,o.getAttribute(e))}),!t.children.length)for(var a=o.cloneNode(!0);a.firstChild;)t.appendChild(a.firstChild);t.removeAttribute(r)}var h=e.fabric||(e.fabric={}),y=h.util.object.extend,b=h.util.object.clone,w=h.util.toFixed,x=h.util.parseUnit,j=h.util.multiplyTransformMatrices,M=["path","circle","polygon","polyline","ellipse","rect","line","image","text"],P=["symbol","image","marker","pattern","view","svg"],E=["pattern","defs","symbol","metadata","clipPath","mask","desc"],T=["symbol","g","a","svg","clipPath","defs"],S={cx:"left",x:"left",r:"radius",cy:"top",y:"top",display:"visible",visibility:"visible",transform:"transformMatrix","fill-opacity":"fillOpacity","fill-rule":"fillRule","font-family":"fontFamily","font-size":"fontSize","font-style":"fontStyle","font-weight":"fontWeight","letter-spacing":"charSpacing","paint-order":"paintFirst","stroke-dasharray":"strokeDashArray","stroke-dashoffset":"strokeDashOffset","stroke-linecap":"strokeLineCap","stroke-linejoin":"strokeLineJoin","stroke-miterlimit":"strokeMiterLimit","stroke-opacity":"strokeOpacity","stroke-width":"strokeWidth","text-decoration":"textDecoration","text-anchor":"textAnchor",opacity:"opacity","clip-path":"clipPath","clip-rule":"clipRule","vector-effect":"strokeUniform","image-rendering":"imageSmoothing"},k={stroke:"strokeOpacity",fill:"fillOpacity"},A="font-size",C="clip-path";h.svgValidTagNamesRegEx=r(M),h.svgViewBoxElementsRegEx=r(P),h.svgInvalidAncestorsRegEx=r(E),h.svgValidParentsRegEx=r(T),h.cssRules={},h.gradientDefs={},h.clipPaths={},h.parseTransformAttribute=function(){function e(e,t){var n=h.util.cos(t[0]),r=h.util.sin(t[0]),i=0,o=0;3===t.length&&(i=t[1],o=t[2]),e[0]=n,e[1]=r,e[2]=-r,e[3]=n,e[4]=i-(n*i-r*o),e[5]=o-(r*i+n*o)}function t(e,t){var n=t[0],r=2===t.length?t[1]:t[0];e[0]=n,e[3]=r}function n(e,t,n){e[n]=Math.tan(h.util.degreesToRadians(t[0]))}function r(e,t){e[4]=t[0],2===t.length&&(e[5]=t[1])}var i=h.iMatrix,o=h.reNum,a=h.commaWsp,s="(?:(skewX)\\s*\\(\\s*("+o+")\\s*\\))",u="(?:(skewY)\\s*\\(\\s*("+o+")\\s*\\))",c="(?:(rotate)\\s*\\(\\s*("+o+")(?:"+a+"("+o+")"+a+"("+o+"))?\\s*\\))",f="(?:(scale)\\s*\\(\\s*("+o+")(?:"+a+"("+o+"))?\\s*\\))",l="(?:(translate)\\s*\\(\\s*("+o+")(?:"+a+"("+o+"))?\\s*\\))",d="(?:(matrix)\\s*\\(\\s*("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")\\s*\\))",v="(?:"+d+"|"+l+"|"+f+"|"+c+"|"+s+"|"+u+")",p="(?:"+v+"(?:"+a+"*"+v+")*)",g="^\\s*(?:"+p+"?)\\s*$",m=new RegExp(g),y=new RegExp(v,"g");return function(o){var a=i.concat(),s=[];if(!o||o&&!m.test(o))return a;o.replace(y,function(o){var u=new RegExp(v).exec(o).filter(function(e){return!!e}),c=u[1],f=u.slice(2).map(parseFloat);switch(c){case"translate":r(a,f);break;case"rotate":f[0]=h.util.degreesToRadians(f[0]),e(a,f);break;case"scale":t(a,f);break;case"skewX":n(a,f,2);break;case"skewY":n(a,f,1);break;case"matrix":a=f}s.push(a.concat()),a=i.concat()});for(var u=s[0];s.length>1;)s.shift(),u=h.util.multiplyTransformMatrices(u,s[0]);return u}}();var O=new RegExp("^\\s*("+h.reNum+"+)\\s*,?\\s*("+h.reNum+"+)\\s*,?\\s*("+h.reNum+"+)\\s*,?\\s*("+h.reNum+"+)\\s*$");h.parseSVGDocument=function(e,t,n,r){if(e){v(e);var i,o,a=h.Object.__uid++,s=p(e),u=h.util.toArray(e.getElementsByTagName("*"));if(s.crossOrigin=r&&r.crossOrigin,s.svgUid=a,0===u.length&&h.isLikelyNode){u=e.selectNodes('//*[name(.)!="svg"]');var c=[];for(i=0,o=u.length;o>i;i++)c[i]=u[i];u=c}var f=u.filter(function(e){return p(e),h.svgValidTagNamesRegEx.test(e.nodeName.replace("svg:",""))&&!g(e,h.svgInvalidAncestorsRegEx)});if(!f||f&&!f.length)return void(t&&t([],{}));var l={};u.filter(function(e){return"clipPath"===e.nodeName.replace("svg:","")}).forEach(function(e){var t=e.getAttribute("id");l[t]=h.util.toArray(e.getElementsByTagName("*")).filter(function(e){return h.svgValidTagNamesRegEx.test(e.nodeName.replace("svg:",""))})}),h.gradientDefs[a]=h.getGradientDefs(e),h.cssRules[a]=h.getCSSRules(e),h.clipPaths[a]=l,h.parseElements(f,function(e,n){t&&(t(e,s,n,u),delete h.gradientDefs[a],delete h.cssRules[a],delete h.clipPaths[a])},b(s),n,r)}};var L=new RegExp("(normal|italic)?\\s*(normal|small-caps)?\\s*(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*("+h.reNum+"(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|"+h.reNum+"))?\\s+(.*)");y(h,{parseFontDeclaration:function(e,t){var n=e.match(L);if(n){var r=n[1],i=n[3],o=n[4],a=n[5],s=n[6];r&&(t.fontStyle=r),i&&(t.fontWeight=isNaN(parseFloat(i))?i:parseFloat(i)),o&&(t.fontSize=x(o)),s&&(t.fontFamily=s),a&&(t.lineHeight="normal"===a?1:a)}},getGradientDefs:function(e){var t,n=["linearGradient","radialGradient","svg:linearGradient","svg:radialGradient"],r=o(e,n),i=0,a={};for(i=r.length;i--;)t=r[i],t.getAttribute("xlink:href")&&m(e,t),a[t.getAttribute("id")]=t;return a},parseAttributes:function(e,r,o){if(e){var a,s,c,f={};"undefined"==typeof o&&(o=e.getAttribute("svgUid")),e.parentNode&&h.svgValidParentsRegEx.test(e.parentNode.nodeName)&&(f=h.parseAttributes(e.parentNode,r,o));var l=r.reduce(function(t,n){return a=e.getAttribute(n),a&&(t[n]=a),t},{}),d=y(u(e,o),h.parseStyleAttribute(e));l=y(l,d),d[C]&&e.setAttribute(C,d[C]),s=c=f.fontSize||h.Text.DEFAULT_SVG_FONT_SIZE,l[A]&&(l[A]=s=x(l[A],c));var v,p,g={};for(var m in l)v=t(m),p=n(v,l[m],f,s),g[v]=p;g&&g.font&&h.parseFontDeclaration(g.font,g);var b=y(f,g);return h.svgValidParentsRegEx.test(e.nodeName)?b:i(b)}},parseElements:function(e,t,n,r,i){new h.ElementsParser(e,t,n,r,i).parse()},parseStyleAttribute:function(e){var t={},n=e.getAttribute("style");return n?("string"==typeof n?a(n,t):s(n,t),t):t},parsePointsAttribute:function(e){if(!e)return null;e=e.replace(/,/g," ").trim(),e=e.split(/\s+/);var t,n,r=[];for(t=0,n=e.length;n>t;t+=2)r.push({x:parseFloat(e[t]),y:parseFloat(e[t+1])});return r},getCSSRules:function(e){var t,n,r,i=e.getElementsByTagName("style"),o={};for(t=0,n=i.length;n>t;t++){var a=i[t].textContent;a=a.replace(/\/\*[\s\S]*?\*\//g,""),""!==a.trim()&&(r=a.split("}"),r=r.filter(function(e){return e.trim()}),r.forEach(function(e){var r=e.split("{"),i={},a=r[1].trim(),s=a.split(";").filter(function(e){return e.trim()});for(t=0,n=s.length;n>t;t++){var u=s[t].split(":"),c=u[0].trim(),f=u[1].trim();i[c]=f}e=r[0].trim(),e.split(",").forEach(function(e){e=e.replace(/^svg/i,"").trim(),""!==e&&(o[e]?h.util.object.extend(o[e],i):o[e]=h.util.object.clone(i))})}))}return o},loadSVGFromURL:function(e,t,n,r){function i(e){var i=e.responseXML;return i&&i.documentElement?void h.parseSVGDocument(i.documentElement,function(e,n,r,i){t&&t(e,n,r,i)},n,r):(t&&t(null),!1)}e=e.replace(/^\n\s*/,"").trim(),new h.util.request(e,{method:"get",onComplete:i})},loadSVGFromString:function(e,t,n,r){var i=new h.window.DOMParser,o=i.parseFromString(e.trim(),"text/xml");h.parseSVGDocument(o.documentElement,function(e,n,r,i){t(e,n,r,i)},n,r)}})}("undefined"!=typeof exports?exports:this);fabric.ElementsParser=function(e,t,n,r,i,o){this.elements=e,this.callback=t,this.options=n,this.reviver=r,this.svgUid=n&&n.svgUid||0,this.parsingOptions=i,this.regexUrl=/^url\(['"]?#([^'"]+)['"]?\)/g,this.doc=o},function(e){e.parse=function(){this.instances=new Array(this.elements.length),this.numElements=this.elements.length,this.createObjects()},e.createObjects=function(){var e=this;this.elements.forEach(function(t,n){t.setAttribute("svgUid",e.svgUid),e.createObject(t,n)})},e.findTag=function(e){return fabric[fabric.util.string.capitalize(e.tagName.replace("svg:",""))]},e.createObject=function(e,t){var n=this.findTag(e);if(n&&n.fromElement)try{n.fromElement(e,this.createCallback(t,e),this.options)}catch(r){fabric.log(r)}else this.checkIfDone()},e.createCallback=function(e,t){var n=this;return function(r){var i;n.resolveGradient(r,t,"fill"),n.resolveGradient(r,t,"stroke"),r instanceof fabric.Image&&r._originalElement&&(i=r.parsePreserveAspectRatioAttribute(t)),r._removeTransformMatrix(i),n.resolveClipPath(r,t),n.reviver&&n.reviver(t,r),n.instances[e]=r,n.checkIfDone()}},e.extractPropertyDefinition=function(e,t,n){var r=e[t],i=this.regexUrl;if(i.test(r)){i.lastIndex=0;var o=i.exec(r)[1];return i.lastIndex=0,fabric[n][this.svgUid][o]}},e.resolveGradient=function(e,t,n){var r=this.extractPropertyDefinition(e,n,"gradientDefs");if(r){var i=t.getAttribute(n+"-opacity"),o=fabric.Gradient.fromElement(r,e,i,this.options);e.set(n,o)}},e.createClipPathCallback=function(e,t){return function(e){e._removeTransformMatrix(),e.fillRule=e.clipRule,t.push(e)}},e.resolveClipPath=function(e,t){var n,r,i,o,a,s,u=this.extractPropertyDefinition(e,"clipPath","clipPaths");if(u){o=[],i=fabric.util.invertTransform(e.calcTransformMatrix());for(var c=u[0].parentNode,f=t;f.parentNode&&f.getAttribute("clip-path")!==e.clipPath;)f=f.parentNode;f.parentNode.appendChild(c);for(var l=0;l<u.length;l++)n=u[l],r=this.findTag(n),r.fromElement(n,this.createClipPathCallback(e,o),this.options);u=1===o.length?o[0]:new fabric.Group(o),a=fabric.util.multiplyTransformMatrices(i,u.calcTransformMatrix()),u.clipPath&&this.resolveClipPath(u,f);var s=fabric.util.qrDecompose(a);u.flipX=!1,u.flipY=!1,u.set("scaleX",s.scaleX),u.set("scaleY",s.scaleY),u.angle=s.angle,u.skewX=s.skewX,u.skewY=0,u.setPositionByOrigin({x:s.translateX,y:s.translateY},"center","center"),e.clipPath=u}else delete e.clipPath},e.checkIfDone=function(){0===--this.numElements&&(this.instances=this.instances.filter(function(e){return null!=e}),this.callback(this.instances,this.elements))}}(fabric.ElementsParser.prototype);!function(e){"use strict";function t(e,t){this.x=e,this.y=t}var n=e.fabric||(e.fabric={});return n.Point?void n.warn("fabric.Point is already defined"):(n.Point=t,void(t.prototype={type:"point",constructor:t,add:function(e){return new t(this.x+e.x,this.y+e.y)},addEquals:function(e){return this.x+=e.x,this.y+=e.y,this},scalarAdd:function(e){return new t(this.x+e,this.y+e)},scalarAddEquals:function(e){return this.x+=e,this.y+=e,this},subtract:function(e){return new t(this.x-e.x,this.y-e.y)},subtractEquals:function(e){return this.x-=e.x,this.y-=e.y,this},scalarSubtract:function(e){return new t(this.x-e,this.y-e)},scalarSubtractEquals:function(e){return this.x-=e,this.y-=e,this},multiply:function(e){return new t(this.x*e,this.y*e)},multiplyEquals:function(e){return this.x*=e,this.y*=e,this},divide:function(e){return new t(this.x/e,this.y/e)},divideEquals:function(e){return this.x/=e,this.y/=e,this},eq:function(e){return this.x===e.x&&this.y===e.y},lt:function(e){return this.x<e.x&&this.y<e.y},lte:function(e){return this.x<=e.x&&this.y<=e.y},gt:function(e){return this.x>e.x&&this.y>e.y},gte:function(e){return this.x>=e.x&&this.y>=e.y},lerp:function(e,n){return"undefined"==typeof n&&(n=.5),n=Math.max(Math.min(1,n),0),new t(this.x+(e.x-this.x)*n,this.y+(e.y-this.y)*n)},distanceFrom:function(e){var t=this.x-e.x,n=this.y-e.y;return Math.sqrt(t*t+n*n)},midPointFrom:function(e){return this.lerp(e)},min:function(e){return new t(Math.min(this.x,e.x),Math.min(this.y,e.y))},max:function(e){return new t(Math.max(this.x,e.x),Math.max(this.y,e.y))},toString:function(){return this.x+","+this.y},setXY:function(e,t){return this.x=e,this.y=t,this},setX:function(e){return this.x=e,this},setY:function(e){return this.y=e,this},setFromPoint:function(e){return this.x=e.x,this.y=e.y,this},swap:function(e){var t=this.x,n=this.y;this.x=e.x,this.y=e.y,e.x=t,e.y=n},clone:function(){return new t(this.x,this.y)}}))}("undefined"!=typeof exports?exports:this);!function(e){"use strict";function t(e){this.status=e,this.points=[]}var n=e.fabric||(e.fabric={});return n.Intersection?void n.warn("fabric.Intersection is already defined"):(n.Intersection=t,n.Intersection.prototype={constructor:t,appendPoint:function(e){return this.points.push(e),this},appendPoints:function(e){return this.points=this.points.concat(e),this}},n.Intersection.intersectLineLine=function(e,r,i,o){var a,s=(o.x-i.x)*(e.y-i.y)-(o.y-i.y)*(e.x-i.x),c=(r.x-e.x)*(e.y-i.y)-(r.y-e.y)*(e.x-i.x),u=(o.y-i.y)*(r.x-e.x)-(o.x-i.x)*(r.y-e.y);if(0!==u){var f=s/u,l=c/u;f>=0&&1>=f&&l>=0&&1>=l?(a=new t("Intersection"),a.appendPoint(new n.Point(e.x+f*(r.x-e.x),e.y+f*(r.y-e.y)))):a=new t}else a=new t(0===s||0===c?"Coincident":"Parallel");return a},n.Intersection.intersectLinePolygon=function(e,n,r){var i,o,a,s,c=new t,u=r.length;for(s=0;u>s;s++)i=r[s],o=r[(s+1)%u],a=t.intersectLineLine(e,n,i,o),c.appendPoints(a.points);return c.points.length>0&&(c.status="Intersection"),c},n.Intersection.intersectPolygonPolygon=function(e,n){var r,i=new t,o=e.length;for(r=0;o>r;r++){var a=e[r],s=e[(r+1)%o],c=t.intersectLinePolygon(a,s,n);i.appendPoints(c.points)}return i.points.length>0&&(i.status="Intersection"),i},void(n.Intersection.intersectPolygonRectangle=function(e,r,i){var o=r.min(i),a=r.max(i),s=new n.Point(a.x,o.y),c=new n.Point(o.x,a.y),u=t.intersectLinePolygon(o,s,e),f=t.intersectLinePolygon(s,a,e),l=t.intersectLinePolygon(a,c,e),d=t.intersectLinePolygon(c,o,e),p=new t;return p.appendPoints(u.points),p.appendPoints(f.points),p.appendPoints(l.points),p.appendPoints(d.points),p.points.length>0&&(p.status="Intersection"),p}))}("undefined"!=typeof exports?exports:this);!function(e){"use strict";function t(e){e?this._tryParsingColor(e):this.setSource([0,0,0,1])}function n(e,t,n){return 0>n&&(n+=1),n>1&&(n-=1),1/6>n?e+6*(t-e)*n:.5>n?t:2/3>n?e+(t-e)*(2/3-n)*6:e}var r=e.fabric||(e.fabric={});return r.Color?void r.warn("fabric.Color is already defined."):(r.Color=t,r.Color.prototype={_tryParsingColor:function(e){var n;e in t.colorNameMap&&(e=t.colorNameMap[e]),"transparent"===e&&(n=[255,255,255,0]),n||(n=t.sourceFromHex(e)),n||(n=t.sourceFromRgb(e)),n||(n=t.sourceFromHsl(e)),n||(n=[0,0,0,1]),n&&this.setSource(n)},_rgbToHsl:function(e,t,n){e/=255,t/=255,n/=255;var i,o,a,s=r.util.array.max([e,t,n]),u=r.util.array.min([e,t,n]);if(a=(s+u)/2,s===u)i=o=0;else{var c=s-u;switch(o=a>.5?c/(2-s-u):c/(s+u),s){case e:i=(t-n)/c+(n>t?6:0);break;case t:i=(n-e)/c+2;break;case n:i=(e-t)/c+4}i/=6}return[Math.round(360*i),Math.round(100*o),Math.round(100*a)]},getSource:function(){return this._source},setSource:function(e){this._source=e},toRgb:function(){var e=this.getSource();return"rgb("+e[0]+","+e[1]+","+e[2]+")"},toRgba:function(){var e=this.getSource();return"rgba("+e[0]+","+e[1]+","+e[2]+","+e[3]+")"},toHsl:function(){var e=this.getSource(),t=this._rgbToHsl(e[0],e[1],e[2]);return"hsl("+t[0]+","+t[1]+"%,"+t[2]+"%)"},toHsla:function(){var e=this.getSource(),t=this._rgbToHsl(e[0],e[1],e[2]);return"hsla("+t[0]+","+t[1]+"%,"+t[2]+"%,"+e[3]+")"},toHex:function(){var e,t,n,r=this.getSource();return e=r[0].toString(16),e=1===e.length?"0"+e:e,t=r[1].toString(16),t=1===t.length?"0"+t:t,n=r[2].toString(16),n=1===n.length?"0"+n:n,e.toUpperCase()+t.toUpperCase()+n.toUpperCase()},toHexa:function(){var e,t=this.getSource();return e=Math.round(255*t[3]),e=e.toString(16),e=1===e.length?"0"+e:e,this.toHex()+e.toUpperCase()},getAlpha:function(){return this.getSource()[3]},setAlpha:function(e){var t=this.getSource();return t[3]=e,this.setSource(t),this},toGrayscale:function(){var e=this.getSource(),t=parseInt((.3*e[0]+.59*e[1]+.11*e[2]).toFixed(0),10),n=e[3];return this.setSource([t,t,t,n]),this},toBlackWhite:function(e){var t=this.getSource(),n=(.3*t[0]+.59*t[1]+.11*t[2]).toFixed(0),r=t[3];return e=e||127,n=Number(n)<Number(e)?0:255,this.setSource([n,n,n,r]),this},overlayWith:function(e){e instanceof t||(e=new t(e));var n,r=[],i=this.getAlpha(),o=.5,a=this.getSource(),s=e.getSource();for(n=0;3>n;n++)r.push(Math.round(a[n]*(1-o)+s[n]*o));return r[3]=i,this.setSource(r),this}},r.Color.reRGBa=/^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i,r.Color.reHSLa=/^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i,r.Color.reHex=/^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i,r.Color.colorNameMap={aliceblue:"#F0F8FF",antiquewhite:"#FAEBD7",aqua:"#00FFFF",aquamarine:"#7FFFD4",azure:"#F0FFFF",beige:"#F5F5DC",bisque:"#FFE4C4",black:"#000000",blanchedalmond:"#FFEBCD",blue:"#0000FF",blueviolet:"#8A2BE2",brown:"#A52A2A",burlywood:"#DEB887",cadetblue:"#5F9EA0",chartreuse:"#7FFF00",chocolate:"#D2691E",coral:"#FF7F50",cornflowerblue:"#6495ED",cornsilk:"#FFF8DC",crimson:"#DC143C",cyan:"#00FFFF",darkblue:"#00008B",darkcyan:"#008B8B",darkgoldenrod:"#B8860B",darkgray:"#A9A9A9",darkgrey:"#A9A9A9",darkgreen:"#006400",darkkhaki:"#BDB76B",darkmagenta:"#8B008B",darkolivegreen:"#556B2F",darkorange:"#FF8C00",darkorchid:"#9932CC",darkred:"#8B0000",darksalmon:"#E9967A",darkseagreen:"#8FBC8F",darkslateblue:"#483D8B",darkslategray:"#2F4F4F",darkslategrey:"#2F4F4F",darkturquoise:"#00CED1",darkviolet:"#9400D3",deeppink:"#FF1493",deepskyblue:"#00BFFF",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1E90FF",firebrick:"#B22222",floralwhite:"#FFFAF0",forestgreen:"#228B22",fuchsia:"#FF00FF",gainsboro:"#DCDCDC",ghostwhite:"#F8F8FF",gold:"#FFD700",goldenrod:"#DAA520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#ADFF2F",honeydew:"#F0FFF0",hotpink:"#FF69B4",indianred:"#CD5C5C",indigo:"#4B0082",ivory:"#FFFFF0",khaki:"#F0E68C",lavender:"#E6E6FA",lavenderblush:"#FFF0F5",lawngreen:"#7CFC00",lemonchiffon:"#FFFACD",lightblue:"#ADD8E6",lightcoral:"#F08080",lightcyan:"#E0FFFF",lightgoldenrodyellow:"#FAFAD2",lightgray:"#D3D3D3",lightgrey:"#D3D3D3",lightgreen:"#90EE90",lightpink:"#FFB6C1",lightsalmon:"#FFA07A",lightseagreen:"#20B2AA",lightskyblue:"#87CEFA",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#B0C4DE",lightyellow:"#FFFFE0",lime:"#00FF00",limegreen:"#32CD32",linen:"#FAF0E6",magenta:"#FF00FF",maroon:"#800000",mediumaquamarine:"#66CDAA",mediumblue:"#0000CD",mediumorchid:"#BA55D3",mediumpurple:"#9370DB",mediumseagreen:"#3CB371",mediumslateblue:"#7B68EE",mediumspringgreen:"#00FA9A",mediumturquoise:"#48D1CC",mediumvioletred:"#C71585",midnightblue:"#191970",mintcream:"#F5FFFA",mistyrose:"#FFE4E1",moccasin:"#FFE4B5",navajowhite:"#FFDEAD",navy:"#000080",oldlace:"#FDF5E6",olive:"#808000",olivedrab:"#6B8E23",orange:"#FFA500",orangered:"#FF4500",orchid:"#DA70D6",palegoldenrod:"#EEE8AA",palegreen:"#98FB98",paleturquoise:"#AFEEEE",palevioletred:"#DB7093",papayawhip:"#FFEFD5",peachpuff:"#FFDAB9",peru:"#CD853F",pink:"#FFC0CB",plum:"#DDA0DD",powderblue:"#B0E0E6",purple:"#800080",rebeccapurple:"#663399",red:"#FF0000",rosybrown:"#BC8F8F",royalblue:"#4169E1",saddlebrown:"#8B4513",salmon:"#FA8072",sandybrown:"#F4A460",seagreen:"#2E8B57",seashell:"#FFF5EE",sienna:"#A0522D",silver:"#C0C0C0",skyblue:"#87CEEB",slateblue:"#6A5ACD",slategray:"#708090",slategrey:"#708090",snow:"#FFFAFA",springgreen:"#00FF7F",steelblue:"#4682B4",tan:"#D2B48C",teal:"#008080",thistle:"#D8BFD8",tomato:"#FF6347",turquoise:"#40E0D0",violet:"#EE82EE",wheat:"#F5DEB3",white:"#FFFFFF",whitesmoke:"#F5F5F5",yellow:"#FFFF00",yellowgreen:"#9ACD32"},r.Color.fromRgb=function(e){return t.fromSource(t.sourceFromRgb(e))},r.Color.sourceFromRgb=function(e){var n=e.match(t.reRGBa);if(n){var r=parseInt(n[1],10)/(/%$/.test(n[1])?100:1)*(/%$/.test(n[1])?255:1),i=parseInt(n[2],10)/(/%$/.test(n[2])?100:1)*(/%$/.test(n[2])?255:1),o=parseInt(n[3],10)/(/%$/.test(n[3])?100:1)*(/%$/.test(n[3])?255:1);return[parseInt(r,10),parseInt(i,10),parseInt(o,10),n[4]?parseFloat(n[4]):1]}},r.Color.fromRgba=t.fromRgb,r.Color.fromHsl=function(e){return t.fromSource(t.sourceFromHsl(e))},r.Color.sourceFromHsl=function(e){var r=e.match(t.reHSLa);if(r){var i,o,a,s=(parseFloat(r[1])%360+360)%360/360,u=parseFloat(r[2])/(/%$/.test(r[2])?100:1),c=parseFloat(r[3])/(/%$/.test(r[3])?100:1);if(0===u)i=o=a=c;else{var l=.5>=c?c*(u+1):c+u-c*u,f=2*c-l;i=n(f,l,s+1/3),o=n(f,l,s),a=n(f,l,s-1/3)}return[Math.round(255*i),Math.round(255*o),Math.round(255*a),r[4]?parseFloat(r[4]):1]}},r.Color.fromHsla=t.fromHsl,r.Color.fromHex=function(e){return t.fromSource(t.sourceFromHex(e))},r.Color.sourceFromHex=function(e){if(e.match(t.reHex)){var n=e.slice(e.indexOf("#")+1),r=3===n.length||4===n.length,i=8===n.length||4===n.length,o=r?n.charAt(0)+n.charAt(0):n.substring(0,2),a=r?n.charAt(1)+n.charAt(1):n.substring(2,4),s=r?n.charAt(2)+n.charAt(2):n.substring(4,6),u=i?r?n.charAt(3)+n.charAt(3):n.substring(6,8):"FF";return[parseInt(o,16),parseInt(a,16),parseInt(s,16),parseFloat((parseInt(u,16)/255).toFixed(2))]}},void(r.Color.fromSource=function(e){var n=new t;return n.setSource(e),n}))}("undefined"!=typeof exports?exports:this);!function(e){"use strict";function t(e,t){var n=e.angle+G(Math.atan2(t.y,t.x))+360;return Math.round(n%360/45)}function n(e,t){var n=t.transform.target,r=n.canvas,i=C.util.object.clone(t);i.target=n,r&&r.fire("object:"+e,i),n.fire(e,t)}function r(e,t){var n=t.canvas,r=n.uniScaleKey,i=e[r];return n.uniformScaling&&!i||!n.uniformScaling&&i}function i(e){return e.originX===I&&e.originY===I}function o(e,t,n){var r=e.lockScalingX,i=e.lockScalingY;return r&&i?!0:!t&&(r||i)&&n?!0:r&&"x"===t?!0:i&&"y"===t?!0:!1}function a(e,n,i){var a="not-allowed",s=r(e,i),c="";if(0!==n.x&&0===n.y?c="x":0===n.x&&0!==n.y&&(c="y"),o(i,c,s))return a;var u=t(i,n);return O[u]+"-resize"}function s(e,n,r){var i="not-allowed";if(0!==n.x&&r.lockSkewingY)return i;if(0!==n.y&&r.lockSkewingX)return i;var o=t(r,n)%4;return X[o]+"-resize"}function c(e,t,n){return e[n.canvas.altActionKey]?Y.skewCursorStyleHandler(e,t,n):Y.scaleCursorStyleHandler(e,t,n)}function u(e,t,n){var r=e[n.canvas.altActionKey];return 0===t.x?r?"skewX":"scaleY":0===t.y?r?"skewY":"scaleX":void 0}function f(e,t,n){return n.lockRotation?"not-allowed":t.cursorStyle}function l(e,t,n,r){return{e:e,transform:t,pointer:{x:n,y:r}}}function d(e){return function(t,n,r,i){var o=n.target,a=o.getCenterPoint(),s=o.translateToOriginPoint(a,n.originX,n.originY),c=e(t,n,r,i);return o.setPositionByOrigin(s,n.originX,n.originY),c}}function v(e,t){return function(r,i,o,a){var s=t(r,i,o,a);return s&&n(e,l(r,i,o,a)),s}}function p(e,t,n,r,i){var o=e.target,a=o.controls[e.corner],s=o.canvas.getZoom(),c=o.padding/s,u=o.toLocalPoint(new C.Point(r,i),t,n);return u.x>=c&&(u.x-=c),u.x<=-c&&(u.x+=c),u.y>=c&&(u.y-=c),u.y<=c&&(u.y+=c),u.x-=a.offsetX,u.y-=a.offsetY,u}function g(e){return e.flipX!==e.flipY}function h(e,t,n,r,i){if(0!==e[t]){var o=e._getTransformedDimensions()[r],a=i/o*e[n];e.set(n,a)}}function m(e,t,n,r){var i,o=t.target,a=o._getTransformedDimensions(0,o.skewY),s=p(t,t.originX,t.originY,n,r),c=Math.abs(2*s.x)-a.x,u=o.skewX;2>c?i=0:(i=G(Math.atan2(c/o.scaleX,a.y/o.scaleY)),t.originX===L&&t.originY===F&&(i=-i),t.originX===_&&t.originY===D&&(i=-i),g(o)&&(i=-i));var f=u!==i;if(f){var l=o._getTransformedDimensions().y;o.set("skewX",i),h(o,"skewY","scaleY","y",l)}return f}function y(e,t,n,r){var i,o=t.target,a=o._getTransformedDimensions(o.skewX,0),s=p(t,t.originX,t.originY,n,r),c=Math.abs(2*s.y)-a.y,u=o.skewY;2>c?i=0:(i=G(Math.atan2(c/o.scaleY,a.x/o.scaleX)),t.originX===L&&t.originY===F&&(i=-i),t.originX===_&&t.originY===D&&(i=-i),g(o)&&(i=-i));var f=u!==i;if(f){var l=o._getTransformedDimensions().x;o.set("skewY",i),h(o,"skewX","scaleX","x",l)}return f}function b(e,t,n,r){var i,o=t.target,a=o.skewX,s=t.originY;if(o.lockSkewingX)return!1;if(0===a){var c=p(t,I,I,n,r);i=c.x>0?L:_}else a>0&&(i=s===D?L:_),0>a&&(i=s===D?_:L),g(o)&&(i=i===L?_:L);t.originX=i;var u=v("skewing",d(m));return u(e,t,n,r)}function x(e,t,n,r){var i,o=t.target,a=o.skewY,s=t.originX;if(o.lockSkewingY)return!1;if(0===a){var c=p(t,I,I,n,r);i=c.y>0?D:F}else a>0&&(i=s===L?D:F),0>a&&(i=s===L?F:D),g(o)&&(i=i===D?F:D);t.originY=i;var u=v("skewing",d(y));return u(e,t,n,r)}function w(e,t,n,r){var i=t,o=i.target,a=o.translateToOriginPoint(o.getCenterPoint(),i.originX,i.originY);if(o.lockRotation)return!1;var s=Math.atan2(i.ey-a.y,i.ex-a.x),c=Math.atan2(r-a.y,n-a.x),u=G(c-s+i.theta),f=!0;if(o.snapAngle>0){var l=o.snapAngle,d=o.snapThreshold||l,v=Math.ceil(u/l)*l,p=Math.floor(u/l)*l;Math.abs(u-p)<d?u=p:Math.abs(u-v)<d&&(u=v)}return 0>u&&(u=360+u),u%=360,f=o.angle!==u,o.angle=u,f}function j(e,t,n,a,s){s=s||{};var c,u,f,l,d,v,g=t.target,h=g.lockScalingX,m=g.lockScalingY,y=s.by,b=r(e,g),x=o(g,y,b),w=t.gestureScale;if(x)return!1;if(w)u=t.scaleX*w,f=t.scaleY*w;else{if(c=p(t,t.originX,t.originY,n,a),d="y"!==y?R(c.x):1,v="x"!==y?R(c.y):1,t.signX||(t.signX=d),t.signY||(t.signY=v),g.lockScalingFlip&&(t.signX!==d||t.signY!==v))return!1;if(l=g._getTransformedDimensions(),b&&!y){var j=Math.abs(c.x)+Math.abs(c.y),P=t.original,M=Math.abs(l.x*P.scaleX/g.scaleX)+Math.abs(l.y*P.scaleY/g.scaleY),E=j/M;u=P.scaleX*E,f=P.scaleY*E}else u=Math.abs(c.x*g.scaleX/l.x),f=Math.abs(c.y*g.scaleY/l.y);i(t)&&(u*=2,f*=2),t.signX!==d&&"y"!==y&&(t.originX=N[t.originX],u*=-1,t.signX=d),t.signY!==v&&"x"!==y&&(t.originY=N[t.originY],f*=-1,t.signY=v)}var k=g.scaleX,S=g.scaleY;return y?("x"===y&&g.set("scaleX",u),"y"===y&&g.set("scaleY",f)):(!h&&g.set("scaleX",u),!m&&g.set("scaleY",f)),k!==g.scaleX||S!==g.scaleY}function P(e,t,n,r){return j(e,t,n,r)}function M(e,t,n,r){return j(e,t,n,r,{by:"x"})}function E(e,t,n,r){return j(e,t,n,r,{by:"y"})}function k(e,t,n,r){return e[t.target.canvas.altActionKey]?Y.skewHandlerX(e,t,n,r):Y.scalingY(e,t,n,r)}function S(e,t,n,r){return e[t.target.canvas.altActionKey]?Y.skewHandlerY(e,t,n,r):Y.scalingX(e,t,n,r)}function T(e,t,n,r){var o=t.target,a=p(t,t.originX,t.originY,n,r),s=o.strokeWidth/(o.strokeUniform?o.scaleX:1),c=i(t)?2:1,u=o.width,f=Math.abs(a.x*c/o.scaleX)-s;return o.set("width",Math.max(f,0)),u!==f}function A(e,t,r,i){var o=t.target,a=r-t.offsetX,s=i-t.offsetY,c=!o.get("lockMovementX")&&o.left!==a,u=!o.get("lockMovementY")&&o.top!==s;return c&&o.set("left",a),u&&o.set("top",s),(c||u)&&n("moving",l(e,t,r,i)),c||u}var C=e.fabric||(e.fabric={}),O=["e","se","s","sw","w","nw","n","ne","e"],X=["ns","nesw","ew","nwse"],Y={},L="left",D="top",_="right",F="bottom",I="center",N={top:F,bottom:D,left:_,right:L,center:I},G=C.util.radiansToDegrees,R=Math.sign||function(e){return(e>0)-(0>e)||+e};Y.scaleCursorStyleHandler=a,Y.skewCursorStyleHandler=s,Y.scaleSkewCursorStyleHandler=c,Y.rotationWithSnapping=v("rotating",d(w)),Y.scalingEqually=v("scaling",d(P)),Y.scalingX=v("scaling",d(M)),Y.scalingY=v("scaling",d(E)),Y.scalingYOrSkewingX=k,Y.scalingXOrSkewingY=S,Y.changeWidth=v("resizing",d(T)),Y.skewHandlerX=b,Y.skewHandlerY=x,Y.dragHandler=A,Y.scaleOrSkewActionName=u,Y.rotationStyleHandler=f,Y.fireEvent=n,Y.wrapWithFixedAnchor=d,Y.wrapWithFireEvent=v,Y.getLocalPoint=p,C.controlsUtils=Y}("undefined"!=typeof exports?exports:this);!function(e){"use strict";function t(e,t,n,r,i){r=r||{};var o,a=this.sizeX||r.cornerSize||i.cornerSize,s=this.sizeY||r.cornerSize||i.cornerSize,c="undefined"!=typeof r.transparentCorners?r.transparentCorners:i.transparentCorners,u=c?"stroke":"fill",l=!c&&(r.cornerStrokeColor||i.cornerStrokeColor),f=t,d=n;e.save(),e.fillStyle=r.cornerColor||i.cornerColor,e.strokeStyle=r.cornerStrokeColor||i.cornerStrokeColor,a>s?(o=a,e.scale(1,s/a),d=n*a/s):s>a?(o=s,e.scale(a/s,1),f=t*s/a):o=a,e.lineWidth=1,e.beginPath(),e.arc(f,d,o/2,0,2*Math.PI,!1),e[u](),l&&e.stroke(),e.restore()}function n(e,t,n,r,o){r=r||{};var a=this.sizeX||r.cornerSize||o.cornerSize,s=this.sizeY||r.cornerSize||o.cornerSize,c="undefined"!=typeof r.transparentCorners?r.transparentCorners:o.transparentCorners,u=c?"stroke":"fill",l=!c&&(r.cornerStrokeColor||o.cornerStrokeColor),f=a/2,d=s/2;e.save(),e.fillStyle=r.cornerColor||o.cornerColor,e.strokeStyle=r.cornerStrokeColor||o.cornerStrokeColor,e.lineWidth=1,e.translate(t,n),e.rotate(i(o.angle)),e[u+"Rect"](-f,-d,a,s),l&&e.strokeRect(-f,-d,a,s),e.restore()}var r=e.fabric||(e.fabric={}),i=r.util.degreesToRadians,o=r.controlsUtils;o.renderCircleControl=t,o.renderSquareControl=n}("undefined"!=typeof exports?exports:this);!function(e){"use strict";function t(e){for(var t in e)this[t]=e[t]}var n=e.fabric||(e.fabric={});n.Control=t,n.Control.prototype={visible:!0,actionName:"scale",angle:0,x:0,y:0,offsetX:0,offsetY:0,sizeX:null,sizeY:null,touchSizeX:null,touchSizeY:null,cursorStyle:"crosshair",withConnection:!1,actionHandler:function(){},mouseDownHandler:function(){},mouseUpHandler:function(){},getActionHandler:function(){return this.actionHandler},getMouseDownHandler:function(){return this.mouseDownHandler},getMouseUpHandler:function(){return this.mouseUpHandler},cursorStyleHandler:function(e,t){return t.cursorStyle},getActionName:function(e,t){return t.actionName},getVisibility:function(e,t){var n=e._controlsVisibility;return n&&"undefined"!=typeof n[t]?n[t]:this.visible},setVisibility:function(e){this.visible=e},positionHandler:function(e,t){var r=n.util.transformPoint({x:this.x*e.x+this.offsetX,y:this.y*e.y+this.offsetY},t);return r},calcCornerCoords:function(e,t,r,i,o){var a,s,u,c,l=o?this.touchSizeX:this.sizeX,f=o?this.touchSizeY:this.sizeY;if(l&&f&&l!==f){var d=Math.atan2(f,l),p=Math.sqrt(l*l+f*f)/2,v=d-n.util.degreesToRadians(e),g=Math.PI/2-d-n.util.degreesToRadians(e);a=p*n.util.cos(v),s=p*n.util.sin(v),u=p*n.util.cos(g),c=p*n.util.sin(g)}else{var h=l&&f?l:t;p=.7071067812*h;var v=n.util.degreesToRadians(45-e);a=u=p*n.util.cos(v),s=c=p*n.util.sin(v)}return{tl:{x:r-c,y:i-u},tr:{x:r+a,y:i-s},bl:{x:r-a,y:i+s},br:{x:r+c,y:i+u}}},render:function(e,t,r,i,o){switch(i=i||{},i.cornerStyle||o.cornerStyle){case"circle":n.controlsUtils.renderCircleControl.call(this,e,t,r,i,o);break;default:n.controlsUtils.renderSquareControl.call(this,e,t,r,i,o)}}}}("undefined"!=typeof exports?exports:this);!function(){function e(e,t){var n,r,i,o,a=e.getAttribute("style"),s=e.getAttribute("offset")||0;if(s=parseFloat(s)/(/%$/.test(s)?100:1),s=0>s?0:s>1?1:s,a){var c=a.split(/\s*;\s*/);for(""===c[c.length-1]&&c.pop(),o=c.length;o--;){var u=c[o].split(/\s*:\s*/),l=u[0].trim(),f=u[1].trim();"stop-color"===l?n=f:"stop-opacity"===l&&(i=f)}}return n||(n=e.getAttribute("stop-color")||"rgb(0,0,0)"),i||(i=e.getAttribute("stop-opacity")),n=new fabric.Color(n),r=n.getAlpha(),i=isNaN(parseFloat(i))?1:parseFloat(i),i*=r*t,{offset:s,color:n.toRgb(),opacity:i}}function t(e){return{x1:e.getAttribute("x1")||0,y1:e.getAttribute("y1")||0,x2:e.getAttribute("x2")||"100%",y2:e.getAttribute("y2")||0}}function n(e){return{x1:e.getAttribute("fx")||e.getAttribute("cx")||"50%",y1:e.getAttribute("fy")||e.getAttribute("cy")||"50%",r1:0,x2:e.getAttribute("cx")||"50%",y2:e.getAttribute("cy")||"50%",r2:e.getAttribute("r")||"50%"}}function r(e,t,n,r){var i,o;Object.keys(t).forEach(function(e){i=t[e],"Infinity"===i?o=1:"-Infinity"===i?o=0:(o=parseFloat(t[e],10),"string"==typeof i&&/^(\d+\.\d+)%|(\d+)%$/.test(i)&&(o*=.01,"pixels"===r&&(("x1"===e||"x2"===e||"r2"===e)&&(o*=n.viewBoxWidth||n.width),("y1"===e||"y2"===e)&&(o*=n.viewBoxHeight||n.height)))),t[e]=o})}var i=fabric.util.object.clone;fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,gradientTransform:null,gradientUnits:"pixels",type:"linear",initialize:function(e){e||(e={}),e.coords||(e.coords={});var t,n=this;Object.keys(e).forEach(function(t){n[t]=e[t]}),this.id?this.id+="_"+fabric.Object.__uid++:this.id=fabric.Object.__uid++,t={x1:e.coords.x1||0,y1:e.coords.y1||0,x2:e.coords.x2||0,y2:e.coords.y2||0},"radial"===this.type&&(t.r1=e.coords.r1||0,t.r2=e.coords.r2||0),this.coords=t,this.colorStops=e.colorStops.slice()},addColorStop:function(e){for(var t in e){var n=new fabric.Color(e[t]);this.colorStops.push({offset:parseFloat(t),color:n.toRgb(),opacity:n.getAlpha()})}return this},toObject:function(e){var t={type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform};return fabric.util.populateWithProperties(this,t,e),t},toSVG:function(e,t){var n,r,o,a,s=i(this.coords,!0),t=t||{},c=i(this.colorStops,!0),u=s.r1>s.r2,l=this.gradientTransform?this.gradientTransform.concat():fabric.iMatrix.concat(),f=-this.offsetX,d=-this.offsetY,p=!!t.additionalTransform,g="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(c.sort(function(e,t){return e.offset-t.offset}),"objectBoundingBox"===g?(f/=e.width,d/=e.height):(f+=e.width/2,d+=e.height/2),"path"===e.type&&"percentage"!==this.gradientUnits&&(f-=e.pathOffset.x,d-=e.pathOffset.y),l[4]-=f,l[5]-=d,a='id="SVGID_'+this.id+'" gradientUnits="'+g+'"',a+=' gradientTransform="'+(p?t.additionalTransform+" ":"")+fabric.util.matrixToSVG(l)+'" ',"linear"===this.type?o=["<linearGradient ",a,' x1="',s.x1,'" y1="',s.y1,'" x2="',s.x2,'" y2="',s.y2,'">\n']:"radial"===this.type&&(o=["<radialGradient ",a,' cx="',u?s.x1:s.x2,'" cy="',u?s.y1:s.y2,'" r="',u?s.r1:s.r2,'" fx="',u?s.x2:s.x1,'" fy="',u?s.y2:s.y1,'">\n']),"radial"===this.type){if(u)for(c=c.concat(),c.reverse(),n=0,r=c.length;r>n;n++)c[n].offset=1-c[n].offset;var v=Math.min(s.r1,s.r2);if(v>0){var h=Math.max(s.r1,s.r2),m=v/h;for(n=0,r=c.length;r>n;n++)c[n].offset+=m*(1-c[n].offset)}}for(n=0,r=c.length;r>n;n++){var y=c[n];o.push("<stop ",'offset="',100*y.offset+"%",'" style="stop-color:',y.color,"undefined"!=typeof y.opacity?";stop-opacity: "+y.opacity:";",'"/>\n')}return o.push("linear"===this.type?"</linearGradient>\n":"</radialGradient>\n"),o.join("")},toLive:function(e){var t,n,r,i=fabric.util.object.clone(this.coords);if(this.type){for("linear"===this.type?t=e.createLinearGradient(i.x1,i.y1,i.x2,i.y2):"radial"===this.type&&(t=e.createRadialGradient(i.x1,i.y1,i.r1,i.x2,i.y2,i.r2)),n=0,r=this.colorStops.length;r>n;n++){var o=this.colorStops[n].color,a=this.colorStops[n].opacity,s=this.colorStops[n].offset;"undefined"!=typeof a&&(o=new fabric.Color(o).setAlpha(a).toRgba()),t.addColorStop(s,o)}return t}}}),fabric.util.object.extend(fabric.Gradient,{fromElement:function(i,o,a,s){var c=parseFloat(a)/(/%$/.test(a)?100:1);c=0>c?0:c>1?1:c,isNaN(c)&&(c=1);var u,l,f,d,p=i.getElementsByTagName("stop"),g="userSpaceOnUse"===i.getAttribute("gradientUnits")?"pixels":"percentage",v=i.getAttribute("gradientTransform")||"",h=[],m=0,y=0;for("linearGradient"===i.nodeName||"LINEARGRADIENT"===i.nodeName?(u="linear",l=t(i)):(u="radial",l=n(i)),f=p.length;f--;)h.push(e(p[f],c));d=fabric.parseTransformAttribute(v),r(o,l,s,g),"pixels"===g&&(m=-o.left,y=-o.top);var b=new fabric.Gradient({id:i.getAttribute("id"),type:u,coords:l,colorStops:h,gradientUnits:g,gradientTransform:d,offsetX:m,offsetY:y});return b}})}();!function(){"use strict";var e=fabric.util.toFixed;fabric.Pattern=fabric.util.createClass({repeat:"repeat",offsetX:0,offsetY:0,crossOrigin:"",patternTransform:null,initialize:function(e,t){if(e||(e={}),this.id=fabric.Object.__uid++,this.setOptions(e),!e.source||e.source&&"string"!=typeof e.source)return void(t&&t(this));var r=this;this.source=fabric.util.createImage(),fabric.util.loadImage(e.source,function(e,n){r.source=e,t&&t(r,n)},null,this.crossOrigin)},toObject:function(t){var r,n,i=fabric.Object.NUM_FRACTION_DIGITS;return"string"==typeof this.source.src?r=this.source.src:"object"==typeof this.source&&this.source.toDataURL&&(r=this.source.toDataURL()),n={type:"pattern",source:r,repeat:this.repeat,crossOrigin:this.crossOrigin,offsetX:e(this.offsetX,i),offsetY:e(this.offsetY,i),patternTransform:this.patternTransform?this.patternTransform.concat():null},fabric.util.populateWithProperties(this,n,t),n},toSVG:function(e){var t="function"==typeof this.source?this.source():this.source,r=t.width/e.width,n=t.height/e.height,i=this.offsetX/e.width,o=this.offsetY/e.height,a="";return("repeat-x"===this.repeat||"no-repeat"===this.repeat)&&(n=1,o&&(n+=Math.abs(o))),("repeat-y"===this.repeat||"no-repeat"===this.repeat)&&(r=1,i&&(r+=Math.abs(i))),t.src?a=t.src:t.toDataURL&&(a=t.toDataURL()),'<pattern id="SVGID_'+this.id+'" x="'+i+'" y="'+o+'" width="'+r+'" height="'+n+'">\n<image x="0" y="0" width="'+t.width+'" height="'+t.height+'" xlink:href="'+a+'"></image>\n</pattern>\n'},setOptions:function(e){for(var t in e)this[t]=e[t]},toLive:function(e){var t=this.source;if(!t)return"";if("undefined"!=typeof t.src){if(!t.complete)return"";if(0===t.naturalWidth||0===t.naturalHeight)return""}return e.createPattern(t,this.repeat)}})}();!function(e){"use strict";var t=e.fabric||(e.fabric={}),r=t.util.toFixed;return t.Shadow?void t.warn("fabric.Shadow is already defined."):(t.Shadow=t.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(e){"string"==typeof e&&(e=this._parseShadow(e));for(var r in e)this[r]=e[r];this.id=t.Object.__uid++},_parseShadow:function(e){var r=e.trim(),n=t.Shadow.reOffsetsAndBlur.exec(r)||[],i=r.replace(t.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)";return{color:i.trim(),offsetX:parseFloat(n[1],10)||0,offsetY:parseFloat(n[2],10)||0,blur:parseFloat(n[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(e){var n=40,i=40,o=t.Object.NUM_FRACTION_DIGITS,a=t.util.rotateVector({x:this.offsetX,y:this.offsetY},t.util.degreesToRadians(-e.angle)),s=20,c=new t.Color(this.color);return e.width&&e.height&&(n=100*r((Math.abs(a.x)+this.blur)/e.width,o)+s,i=100*r((Math.abs(a.y)+this.blur)/e.height,o)+s),e.flipX&&(a.x*=-1),e.flipY&&(a.y*=-1),'<filter id="SVGID_'+this.id+'" y="-'+i+'%" height="'+(100+2*i)+'%" x="-'+n+'%" width="'+(100+2*n)+'%" >\n	<feGaussianBlur in="SourceAlpha" stdDeviation="'+r(this.blur?this.blur/2:0,o)+'"></feGaussianBlur>\n	<feOffset dx="'+r(a.x,o)+'" dy="'+r(a.y,o)+'" result="oBlur" ></feOffset>\n	<feFlood flood-color="'+c.toRgb()+'" flood-opacity="'+c.getAlpha()+'"/>\n	<feComposite in2="oBlur" operator="in" />\n	<feMerge>\n		<feMergeNode></feMergeNode>\n		<feMergeNode in="SourceGraphic"></feMergeNode>\n	</feMerge>\n</filter>\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var e={},r=t.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach(function(t){this[t]!==r[t]&&(e[t]=this[t])},this),e}}),void(t.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/))}("undefined"!=typeof exports?exports:this);!function(){"use strict";if(fabric.StaticCanvas)return void fabric.warn("fabric.StaticCanvas is already defined.");var e=fabric.util.object.extend,t=fabric.util.getElementOffset,r=fabric.util.removeFromArray,n=fabric.util.toFixed,i=fabric.util.transformPoint,o=fabric.util.invertTransform,a=fabric.util.getNodeCanvas,s=fabric.util.createCanvasElement,c=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,{initialize:function(e,t){t||(t={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(e,t)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(e,t){var r=this.requestRenderAllBound;this._objects=[],this._createLowerCanvas(e),this._initOptions(t),this.interactive||this._initRetinaScaling(),t.overlayImage&&this.setOverlayImage(t.overlayImage,r),t.backgroundImage&&this.setBackgroundImage(t.backgroundImage,r),t.backgroundColor&&this.setBackgroundColor(t.backgroundColor,r),t.overlayColor&&this.setOverlayColor(t.overlayColor,r),this.calcOffset()},_isRetinaScaling:function(){return fabric.devicePixelRatio>1&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?Math.max(1,fabric.devicePixelRatio):1},_initRetinaScaling:function(){if(this._isRetinaScaling()){var e=fabric.devicePixelRatio;this.__initRetinaScaling(e,this.lowerCanvasEl,this.contextContainer),this.upperCanvasEl&&this.__initRetinaScaling(e,this.upperCanvasEl,this.contextTop)}},__initRetinaScaling:function(e,t,r){t.setAttribute("width",this.width*e),t.setAttribute("height",this.height*e),r.scale(e,e)},calcOffset:function(){return this._offset=t(this.lowerCanvasEl),this},setOverlayImage:function(e,t,r){return this.__setBgOverlayImage("overlayImage",e,t,r)},setBackgroundImage:function(e,t,r){return this.__setBgOverlayImage("backgroundImage",e,t,r)},setOverlayColor:function(e,t){return this.__setBgOverlayColor("overlayColor",e,t)},setBackgroundColor:function(e,t){return this.__setBgOverlayColor("backgroundColor",e,t)},__setBgOverlayImage:function(e,t,r,n){return"string"==typeof t?fabric.util.loadImage(t,function(t,i){if(t){var o=new fabric.Image(t,n);this[e]=o,o.canvas=this}r&&r(t,i)},this,n&&n.crossOrigin):(n&&t.setOptions(n),this[e]=t,t&&(t.canvas=this),r&&r(t,!1)),this},__setBgOverlayColor:function(e,t,r){return this[e]=t,this._initGradient(t,e),this._initPattern(t,e,r),this},_createCanvasElement:function(){var e=s();if(!e)throw c;if(e.style||(e.style={}),"undefined"==typeof e.getContext)throw c;return e},_initOptions:function(e){var t=this.lowerCanvasEl;this._setOptions(e),this.width=this.width||parseInt(t.width,10)||0,this.height=this.height||parseInt(t.height,10)||0,this.lowerCanvasEl.style&&(t.width=this.width,t.height=this.height,t.style.width=this.width+"px",t.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(e){this.lowerCanvasEl=e&&e.getContext?e:fabric.util.getById(e)||this._createCanvasElement(),fabric.util.addClass(this.lowerCanvasEl,"lower-canvas"),this._originalCanvasStyle=this.lowerCanvasEl.style,this.interactive&&this._applyCanvasStyle(this.lowerCanvasEl),this.contextContainer=this.lowerCanvasEl.getContext("2d")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(e,t){return this.setDimensions({width:e},t)},setHeight:function(e,t){return this.setDimensions({height:e},t)},setDimensions:function(e,t){var r;t=t||{};for(var n in e)r=e[n],t.cssOnly||(this._setBackstoreDimension(n,e[n]),r+="px",this.hasLostContext=!0),t.backstoreOnly||this._setCssDimension(n,r);return this._isCurrentlyDrawing&&this.freeDrawingBrush&&this.freeDrawingBrush._setBrushStyles(this.contextTop),this._initRetinaScaling(),this.calcOffset(),t.cssOnly||this.requestRenderAll(),this},_setBackstoreDimension:function(e,t){return this.lowerCanvasEl[e]=t,this.upperCanvasEl&&(this.upperCanvasEl[e]=t),this.cacheCanvasEl&&(this.cacheCanvasEl[e]=t),this[e]=t,this},_setCssDimension:function(e,t){return this.lowerCanvasEl.style[e]=t,this.upperCanvasEl&&(this.upperCanvasEl.style[e]=t),this.wrapperEl&&(this.wrapperEl.style[e]=t),this},getZoom:function(){return this.viewportTransform[0]},setViewportTransform:function(e){var t,r,n,i=this._activeObject,o=this.backgroundImage,a=this.overlayImage;for(this.viewportTransform=e,r=0,n=this._objects.length;n>r;r++)t=this._objects[r],t.group||t.setCoords(!0);return i&&i.setCoords(),o&&o.setCoords(!0),a&&a.setCoords(!0),this.calcViewportBoundaries(),this.renderOnAddRemove&&this.requestRenderAll(),this},zoomToPoint:function(e,t){var r=e,n=this.viewportTransform.slice(0);e=i(e,o(this.viewportTransform)),n[0]=t,n[3]=t;var a=i(e,n);return n[4]+=r.x-a.x,n[5]+=r.y-a.y,this.setViewportTransform(n)},setZoom:function(e){return this.zoomToPoint(new fabric.Point(0,0),e),this},absolutePan:function(e){var t=this.viewportTransform.slice(0);return t[4]=-e.x,t[5]=-e.y,this.setViewportTransform(t)},relativePan:function(e){return this.absolutePan(new fabric.Point(-e.x-this.viewportTransform[4],-e.y-this.viewportTransform[5]))},getElement:function(){return this.lowerCanvasEl},_onObjectAdded:function(e){this.stateful&&e.setupState(),e._set("canvas",this),e.setCoords(),this.fire("object:added",{target:e}),e.fire("added")},_onObjectRemoved:function(e){this.fire("object:removed",{target:e}),e.fire("removed"),delete e.canvas},clearContext:function(e){return e.clearRect(0,0,this.width,this.height),this},getContext:function(){return this.contextContainer},clear:function(){return this.remove.apply(this,this.getObjects()),this.backgroundImage=null,this.overlayImage=null,this.backgroundColor="",this.overlayColor="",this._hasITextHandlers&&(this.off("mouse:up",this._mouseUpITextHandler),this._iTextInstances=null,this._hasITextHandlers=!1),this.clearContext(this.contextContainer),this.fire("canvas:cleared"),this.renderOnAddRemove&&this.requestRenderAll(),this},renderAll:function(){var e=this.contextContainer;return this.renderCanvas(e,this._objects),this},renderAndReset:function(){this.isRendering=0,this.renderAll()},requestRenderAll:function(){return this.isRendering||(this.isRendering=fabric.util.requestAnimFrame(this.renderAndResetBound)),this},calcViewportBoundaries:function(){var e={},t=this.width,r=this.height,n=o(this.viewportTransform);return e.tl=i({x:0,y:0},n),e.br=i({x:t,y:r},n),e.tr=new fabric.Point(e.br.x,e.tl.y),e.bl=new fabric.Point(e.tl.x,e.br.y),this.vptCoords=e,e},cancelRequestedRender:function(){this.isRendering&&(fabric.util.cancelAnimFrame(this.isRendering),this.isRendering=0)},renderCanvas:function(e,t){var r=this.viewportTransform,n=this.clipPath;this.cancelRequestedRender(),this.calcViewportBoundaries(),this.clearContext(e),fabric.util.setImageSmoothing(e,this.imageSmoothingEnabled),this.fire("before:render",{ctx:e}),this._renderBackground(e),e.save(),e.transform(r[0],r[1],r[2],r[3],r[4],r[5]),this._renderObjects(e,t),e.restore(),!this.controlsAboveOverlay&&this.interactive&&this.drawControls(e),n&&(n.canvas=this,n.shouldCache(),n._transformDone=!0,n.renderCache({forClipping:!0}),this.drawClipPathOnCanvas(e)),this._renderOverlay(e),this.controlsAboveOverlay&&this.interactive&&this.drawControls(e),this.fire("after:render",{ctx:e})},drawClipPathOnCanvas:function(e){var t=this.viewportTransform,r=this.clipPath;e.save(),e.transform(t[0],t[1],t[2],t[3],t[4],t[5]),e.globalCompositeOperation="destination-in",r.transform(e),e.scale(1/r.zoomX,1/r.zoomY),e.drawImage(r._cacheCanvas,-r.cacheTranslationX,-r.cacheTranslationY),e.restore()},_renderObjects:function(e,t){var r,n;for(r=0,n=t.length;n>r;++r)t[r]&&t[r].render(e)},_renderBackgroundOrOverlay:function(e,t){var r=this[t+"Color"],n=this[t+"Image"],i=this.viewportTransform,o=this[t+"Vpt"];if(r||n){if(r){e.save(),e.beginPath(),e.moveTo(0,0),e.lineTo(this.width,0),e.lineTo(this.width,this.height),e.lineTo(0,this.height),e.closePath(),e.fillStyle=r.toLive?r.toLive(e,this):r,o&&e.transform(i[0],i[1],i[2],i[3],i[4],i[5]),e.transform(1,0,0,1,r.offsetX||0,r.offsetY||0);var a=r.gradientTransform||r.patternTransform;a&&e.transform(a[0],a[1],a[2],a[3],a[4],a[5]),e.fill(),e.restore()}n&&(e.save(),o&&e.transform(i[0],i[1],i[2],i[3],i[4],i[5]),n.render(e),e.restore())}},_renderBackground:function(e){this._renderBackgroundOrOverlay(e,"background")},_renderOverlay:function(e){this._renderBackgroundOrOverlay(e,"overlay")},getCenter:function(){return{top:this.height/2,left:this.width/2}},getCenterPoint:function(){return new fabric.Point(this.width/2,this.height/2)},centerObjectH:function(e){return this._centerObject(e,new fabric.Point(this.getCenterPoint().x,e.getCenterPoint().y))},centerObjectV:function(e){return this._centerObject(e,new fabric.Point(e.getCenterPoint().x,this.getCenterPoint().y))},centerObject:function(e){var t=this.getCenterPoint();return this._centerObject(e,t)},viewportCenterObject:function(e){var t=this.getVpCenter();return this._centerObject(e,t)},viewportCenterObjectH:function(e){var t=this.getVpCenter();return this._centerObject(e,new fabric.Point(t.x,e.getCenterPoint().y)),this},viewportCenterObjectV:function(e){var t=this.getVpCenter();return this._centerObject(e,new fabric.Point(e.getCenterPoint().x,t.y))},getVpCenter:function(){var e=this.getCenterPoint(),t=o(this.viewportTransform);return i(e,t)},_centerObject:function(e,t){return e.setPositionByOrigin(t,"center","center"),e.setCoords(),this.renderOnAddRemove&&this.requestRenderAll(),this},toDatalessJSON:function(e){return this.toDatalessObject(e)},toObject:function(e){return this._toObjectMethod("toObject",e)},toDatalessObject:function(e){return this._toObjectMethod("toDatalessObject",e)},_toObjectMethod:function(t,r){var n=this.clipPath,i={version:fabric.version,objects:this._toObjects(t,r)};return n&&!n.excludeFromExport&&(i.clipPath=this._toObject(this.clipPath,t,r)),e(i,this.__serializeBgOverlay(t,r)),fabric.util.populateWithProperties(this,i,r),i},_toObjects:function(e,t){return this._objects.filter(function(e){return!e.excludeFromExport}).map(function(r){return this._toObject(r,e,t)},this)},_toObject:function(e,t,r){var n;this.includeDefaultValues||(n=e.includeDefaultValues,e.includeDefaultValues=!1);var i=e[t](r);return this.includeDefaultValues||(e.includeDefaultValues=n),i},__serializeBgOverlay:function(e,t){var r={},n=this.backgroundImage,i=this.overlayImage,o=this.backgroundColor,a=this.overlayColor;return o&&o.toObject?o.excludeFromExport||(r.background=o.toObject(t)):o&&(r.background=o),a&&a.toObject?a.excludeFromExport||(r.overlay=a.toObject(t)):a&&(r.overlay=a),n&&!n.excludeFromExport&&(r.backgroundImage=this._toObject(n,e,t)),i&&!i.excludeFromExport&&(r.overlayImage=this._toObject(i,e,t)),r},svgViewportTransformation:!0,toSVG:function(e,t){e||(e={}),e.reviver=t;var r=[];return this._setSVGPreamble(r,e),this._setSVGHeader(r,e),this.clipPath&&r.push('<g clip-path="url(#'+this.clipPath.clipPathId+')" >\n'),this._setSVGBgOverlayColor(r,"background"),this._setSVGBgOverlayImage(r,"backgroundImage",t),this._setSVGObjects(r,t),this.clipPath&&r.push("</g>\n"),this._setSVGBgOverlayColor(r,"overlay"),this._setSVGBgOverlayImage(r,"overlayImage",t),r.push("</svg>"),r.join("")},_setSVGPreamble:function(e,t){t.suppressPreamble||e.push('<?xml version="1.0" encoding="',t.encoding||"UTF-8",'" standalone="no" ?>\n','<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ','"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n')},_setSVGHeader:function(e,t){var r,i=t.width||this.width,o=t.height||this.height,a='viewBox="0 0 '+this.width+" "+this.height+'" ',s=fabric.Object.NUM_FRACTION_DIGITS;t.viewBox?a='viewBox="'+t.viewBox.x+" "+t.viewBox.y+" "+t.viewBox.width+" "+t.viewBox.height+'" ':this.svgViewportTransformation&&(r=this.viewportTransform,a='viewBox="'+n(-r[4]/r[0],s)+" "+n(-r[5]/r[3],s)+" "+n(this.width/r[0],s)+" "+n(this.height/r[3],s)+'" '),e.push("<svg ",'xmlns="http://www.w3.org/2000/svg" ','xmlns:xlink="http://www.w3.org/1999/xlink" ','version="1.1" ','width="',i,'" ','height="',o,'" ',a,'xml:space="preserve">\n',"<desc>Created with Fabric.js ",fabric.version,"</desc>\n","<defs>\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(t),"</defs>\n")},createSVGClipPathMarkup:function(e){var t=this.clipPath;return t?(t.clipPathId="CLIPPATH_"+fabric.Object.__uid++,'<clipPath id="'+t.clipPathId+'" >\n'+this.clipPath.toClipPathSVG(e.reviver)+"</clipPath>\n"):""},createSVGRefElementsMarkup:function(){var e=this,t=["background","overlay"].map(function(t){var r=e[t+"Color"];if(r&&r.toLive){var n=e[t+"Vpt"],i=e.viewportTransform,o={width:e.width/(n?i[0]:1),height:e.height/(n?i[3]:1)};return r.toSVG(o,{additionalTransform:n?fabric.util.matrixToSVG(i):""})}});return t.join("")},createSVGFontFacesMarkup:function(){var e,t,r,n,i,o,a,s,c,u="",l={},f=fabric.fontPaths,d=[];for(this._objects.forEach(function p(e){d.push(e),e._objects&&e._objects.forEach(p)}),s=0,c=d.length;c>s;s++)if(e=d[s],t=e.fontFamily,-1!==e.type.indexOf("text")&&!l[t]&&f[t]&&(l[t]=!0,e.styles)){r=e.styles;for(i in r){n=r[i];for(a in n)o=n[a],t=o.fontFamily,!l[t]&&f[t]&&(l[t]=!0)}}for(var h in l)u+=["		@font-face {\n","			font-family: '",h,"';\n","			src: url('",f[h],"');\n","		}\n"].join("");return u&&(u=['	<style type="text/css">',"<![CDATA[\n",u,"]]>","</style>\n"].join("")),u},_setSVGObjects:function(e,t){var r,n,i,o=this._objects;for(n=0,i=o.length;i>n;n++)r=o[n],r.excludeFromExport||this._setSVGObject(e,r,t)},_setSVGObject:function(e,t,r){e.push(t.toSVG(r))},_setSVGBgOverlayImage:function(e,t,r){this[t]&&!this[t].excludeFromExport&&this[t].toSVG&&e.push(this[t].toSVG(r))},_setSVGBgOverlayColor:function(e,t){var r=this[t+"Color"],n=this.viewportTransform,i=this.width,o=this.height;if(r)if(r.toLive){var a=r.repeat,s=fabric.util.invertTransform(n),c=this[t+"Vpt"],u=c?fabric.util.matrixToSVG(s):"";e.push('<rect transform="'+u+" translate(",i/2,",",o/2,')"',' x="',r.offsetX-i/2,'" y="',r.offsetY-o/2,'" ','width="',"repeat-y"===a||"no-repeat"===a?r.source.width:i,'" height="',"repeat-x"===a||"no-repeat"===a?r.source.height:o,'" fill="url(#SVGID_'+r.id+')"',"></rect>\n")}else e.push('<rect x="0" y="0" width="100%" height="100%" ','fill="',r,'"',"></rect>\n")},sendToBack:function(e){if(!e)return this;var t,n,i,o=this._activeObject;if(e===o&&"activeSelection"===e.type)for(i=o._objects,t=i.length;t--;)n=i[t],r(this._objects,n),this._objects.unshift(n);else r(this._objects,e),this._objects.unshift(e);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(e){if(!e)return this;var t,n,i,o=this._activeObject;if(e===o&&"activeSelection"===e.type)for(i=o._objects,t=0;t<i.length;t++)n=i[t],r(this._objects,n),this._objects.push(n);else r(this._objects,e),this._objects.push(e);return this.renderOnAddRemove&&this.requestRenderAll(),this},sendBackwards:function(e,t){if(!e)return this;var n,i,o,a,s,c=this._activeObject,u=0;if(e===c&&"activeSelection"===e.type)for(s=c._objects,n=0;n<s.length;n++)i=s[n],o=this._objects.indexOf(i),o>0+u&&(a=o-1,r(this._objects,i),this._objects.splice(a,0,i)),u++;else o=this._objects.indexOf(e),0!==o&&(a=this._findNewLowerIndex(e,o,t),r(this._objects,e),this._objects.splice(a,0,e));return this.renderOnAddRemove&&this.requestRenderAll(),this},_findNewLowerIndex:function(e,t,r){var n,i;if(r)for(n=t,i=t-1;i>=0;--i){var o=e.intersectsWithObject(this._objects[i])||e.isContainedWithinObject(this._objects[i])||this._objects[i].isContainedWithinObject(e);if(o){n=i;break}}else n=t-1;return n},bringForward:function(e,t){if(!e)return this;var n,i,o,a,s,c=this._activeObject,u=0;if(e===c&&"activeSelection"===e.type)for(s=c._objects,n=s.length;n--;)i=s[n],o=this._objects.indexOf(i),o<this._objects.length-1-u&&(a=o+1,r(this._objects,i),this._objects.splice(a,0,i)),u++;else o=this._objects.indexOf(e),o!==this._objects.length-1&&(a=this._findNewUpperIndex(e,o,t),r(this._objects,e),this._objects.splice(a,0,e));return this.renderOnAddRemove&&this.requestRenderAll(),this},_findNewUpperIndex:function(e,t,r){var n,i,o;if(r)for(n=t,i=t+1,o=this._objects.length;o>i;++i){var a=e.intersectsWithObject(this._objects[i])||e.isContainedWithinObject(this._objects[i])||this._objects[i].isContainedWithinObject(e);if(a){n=i;break}}else n=t+1;return n},moveTo:function(e,t){return r(this._objects,e),this._objects.splice(t,0,e),this.renderOnAddRemove&&this.requestRenderAll()},dispose:function(){return this.isRendering&&(fabric.util.cancelAnimFrame(this.isRendering),this.isRendering=0),this.forEachObject(function(e){e.dispose&&e.dispose()}),this._objects=[],this.backgroundImage&&this.backgroundImage.dispose&&this.backgroundImage.dispose(),this.backgroundImage=null,this.overlayImage&&this.overlayImage.dispose&&this.overlayImage.dispose(),this.overlayImage=null,this._iTextInstances=null,this.contextContainer=null,this.lowerCanvasEl.classList.remove("lower-canvas"),fabric.util.setStyle(this.lowerCanvasEl,this._originalCanvasStyle),delete this._originalCanvasStyle,this.lowerCanvasEl.setAttribute("width",this.width),this.lowerCanvasEl.setAttribute("height",this.height),fabric.util.cleanUpJsdomNode(this.lowerCanvasEl),this.lowerCanvasEl=void 0,this},toString:function(){return"#<fabric.Canvas ("+this.complexity()+"): { objects: "+this._objects.length+" }>"}}),e(fabric.StaticCanvas.prototype,fabric.Observable),e(fabric.StaticCanvas.prototype,fabric.Collection),e(fabric.StaticCanvas.prototype,fabric.DataURLExporter),e(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(e){var t=s();if(!t||!t.getContext)return null;var r=t.getContext("2d");if(!r)return null;switch(e){case"setLineDash":return"undefined"!=typeof r.setLineDash;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject,fabric.isLikelyNode&&(fabric.StaticCanvas.prototype.createPNGStream=function(){var e=a(this.lowerCanvasEl);return e&&e.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(e){var t=a(this.lowerCanvasEl);return t&&t.createJPEGStream(e)})}();fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(e){e.strokeStyle=this.color,e.lineWidth=this.width,e.lineCap=this.strokeLineCap,e.miterLimit=this.strokeMiterLimit,e.lineJoin=this.strokeLineJoin,e.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(e){var t=this.canvas.viewportTransform;e.save(),e.transform(t[0],t[1],t[2],t[3],t[4],t[5])},_setShadow:function(){if(this.shadow){var e=this.canvas,t=this.shadow,r=e.contextTop,n=e.getZoom();e&&e._isRetinaScaling()&&(n*=fabric.devicePixelRatio),r.shadowColor=t.color,r.shadowBlur=t.blur*n,r.shadowOffsetX=t.offsetX*n,r.shadowOffsetY=t.offsetY*n}},needsFullRender:function(){var e=new fabric.Color(this.color);return e.getAlpha()<1||!!this.shadow},_resetShadow:function(){var e=this.canvas.contextTop;e.shadowColor="",e.shadowBlur=e.shadowOffsetX=e.shadowOffsetY=0},_isOutSideCanvas:function(e){return e.x<0||e.x>this.canvas.getWidth()||e.y<0||e.y>this.canvas.getHeight()}});!function(){fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{decimate:.4,drawStraightLine:!1,straightLineKey:"shiftKey",initialize:function(e){this.canvas=e,this._points=[]},needsFullRender:function(){return this.callSuper("needsFullRender")||this._hasStraightLine},_drawSegment:function(e,t,r){var n=t.midPointFrom(r);return e.quadraticCurveTo(t.x,t.y,n.x,n.y),n},onMouseDown:function(e,t){this.canvas._isMainEvent(t.e)&&(this.drawStraightLine=t.e[this.straightLineKey],this._prepareForDrawing(e),this._captureDrawingPath(e),this._render())},onMouseMove:function(e,t){if(this.canvas._isMainEvent(t.e)&&(this.drawStraightLine=t.e[this.straightLineKey],(this.limitedToCanvasSize!==!0||!this._isOutSideCanvas(e))&&this._captureDrawingPath(e)&&this._points.length>1))if(this.needsFullRender())this.canvas.clearContext(this.canvas.contextTop),this._render();else{var r=this._points,n=r.length,i=this.canvas.contextTop;this._saveAndTransform(i),this.oldEnd&&(i.beginPath(),i.moveTo(this.oldEnd.x,this.oldEnd.y)),this.oldEnd=this._drawSegment(i,r[n-2],r[n-1],!0),i.stroke(),i.restore()}},onMouseUp:function(e){return this.canvas._isMainEvent(e.e)?(this.drawStraightLine=!1,this.oldEnd=void 0,this._finalizeAndAddPath(),!1):!0},_prepareForDrawing:function(e){var t=new fabric.Point(e.x,e.y);this._reset(),this._addPoint(t),this.canvas.contextTop.moveTo(t.x,t.y)},_addPoint:function(e){return this._points.length>1&&e.eq(this._points[this._points.length-1])?!1:(this.drawStraightLine&&this._points.length>1&&(this._hasStraightLine=!0,this._points.pop()),this._points.push(e),!0)},_reset:function(){this._points=[],this._setBrushStyles(this.canvas.contextTop),this._setShadow(),this._hasStraightLine=!1},_captureDrawingPath:function(e){var t=new fabric.Point(e.x,e.y);return this._addPoint(t)},_render:function(e){var t,r,n=this._points[0],i=this._points[1];if(e=e||this.canvas.contextTop,this._saveAndTransform(e),e.beginPath(),2===this._points.length&&n.x===i.x&&n.y===i.y){var o=this.width/1e3;n=new fabric.Point(n.x,n.y),i=new fabric.Point(i.x,i.y),n.x-=o,i.x+=o}for(e.moveTo(n.x,n.y),t=1,r=this._points.length;r>t;t++)this._drawSegment(e,n,i),n=this._points[t],i=this._points[t+1];e.lineTo(n.x,n.y),e.stroke(),e.restore()},convertPointsToSVGPath:function(e){var t=this.width/1e3;return fabric.util.getSmoothPathFromPoints(e,t)},_isEmptySVGPath:function(e){var t=fabric.util.joinPath(e);return"M 0 0 Q 0 0 0 0 L 0 0"===t},createPath:function(e){var t=new fabric.Path(e,{fill:null,stroke:this.color,strokeWidth:this.width,strokeLineCap:this.strokeLineCap,strokeMiterLimit:this.strokeMiterLimit,strokeLineJoin:this.strokeLineJoin,strokeDashArray:this.strokeDashArray});return this.shadow&&(this.shadow.affectStroke=!0,t.shadow=new fabric.Shadow(this.shadow)),t},decimatePoints:function(e,t){if(e.length<=2)return e;var r,n,i=this.canvas.getZoom(),o=Math.pow(t/i,2),a=e.length-1,s=e[0],c=[s];for(r=1;a-1>r;r++)n=Math.pow(s.x-e[r].x,2)+Math.pow(s.y-e[r].y,2),n>=o&&(s=e[r],c.push(s));return c.push(e[a]),c},_finalizeAndAddPath:function(){var e=this.canvas.contextTop;e.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate));var t=this.convertPointsToSVGPath(this._points);if(this._isEmptySVGPath(t))return void this.canvas.requestRenderAll();var r=this.createPath(t);this.canvas.clearContext(this.canvas.contextTop),this.canvas.fire("before:path:created",{path:r}),this.canvas.add(r),this.canvas.requestRenderAll(),r.setCoords(),this._resetShadow(),this.canvas.fire("path:created",{path:r})}})}();fabric.CircleBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,initialize:function(e){this.canvas=e,this.points=[]},drawDot:function(e){var t=this.addPoint(e),n=this.canvas.contextTop;this._saveAndTransform(n),this.dot(n,t),n.restore()},dot:function(e,t){e.fillStyle=t.fill,e.beginPath(),e.arc(t.x,t.y,t.radius,0,2*Math.PI,!1),e.closePath(),e.fill()},onMouseDown:function(e){this.points.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.drawDot(e)},_render:function(){var e,t,n=this.canvas.contextTop,r=this.points;for(this._saveAndTransform(n),e=0,t=r.length;t>e;e++)this.dot(n,r[e]);n.restore()},onMouseMove:function(e){this.limitedToCanvasSize===!0&&this._isOutSideCanvas(e)||(this.needsFullRender()?(this.canvas.clearContext(this.canvas.contextTop),this.addPoint(e),this._render()):this.drawDot(e))},onMouseUp:function(){var e,t,n=this.canvas.renderOnAddRemove;this.canvas.renderOnAddRemove=!1;var r=[];for(e=0,t=this.points.length;t>e;e++){var i=this.points[e],o=new fabric.Circle({radius:i.radius,left:i.x,top:i.y,originX:"center",originY:"center",fill:i.fill});this.shadow&&(o.shadow=new fabric.Shadow(this.shadow)),r.push(o)}var a=new fabric.Group(r);a.canvas=this.canvas,this.canvas.fire("before:path:created",{path:a}),this.canvas.add(a),this.canvas.fire("path:created",{path:a}),this.canvas.clearContext(this.canvas.contextTop),this._resetShadow(),this.canvas.renderOnAddRemove=n,this.canvas.requestRenderAll()},addPoint:function(e){var t=new fabric.Point(e.x,e.y),n=fabric.util.getRandomInt(Math.max(0,this.width-20),this.width+20)/2,r=new fabric.Color(this.color).setAlpha(fabric.util.getRandomInt(0,100)/100).toRgba();return t.radius=n,t.fill=r,this.points.push(t),t}});fabric.SprayBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,density:20,dotWidth:1,dotWidthVariance:1,randomOpacity:!1,optimizeOverlapping:!0,initialize:function(e){this.canvas=e,this.sprayChunks=[]},onMouseDown:function(e){this.sprayChunks.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.addSprayChunk(e),this.render(this.sprayChunkPoints)},onMouseMove:function(e){this.limitedToCanvasSize===!0&&this._isOutSideCanvas(e)||(this.addSprayChunk(e),this.render(this.sprayChunkPoints))},onMouseUp:function(){var e=this.canvas.renderOnAddRemove;this.canvas.renderOnAddRemove=!1;for(var t=[],r=0,n=this.sprayChunks.length;n>r;r++)for(var i=this.sprayChunks[r],o=0,a=i.length;a>o;o++){var s=new fabric.Rect({width:i[o].width,height:i[o].width,left:i[o].x+1,top:i[o].y+1,originX:"center",originY:"center",fill:this.color});t.push(s)}this.optimizeOverlapping&&(t=this._getOptimizedRects(t));var c=new fabric.Group(t);this.shadow&&c.set("shadow",new fabric.Shadow(this.shadow)),this.canvas.fire("before:path:created",{path:c}),this.canvas.add(c),this.canvas.fire("path:created",{path:c}),this.canvas.clearContext(this.canvas.contextTop),this._resetShadow(),this.canvas.renderOnAddRemove=e,this.canvas.requestRenderAll()},_getOptimizedRects:function(e){var t,r,n,i={};for(r=0,n=e.length;n>r;r++)t=e[r].left+""+e[r].top,i[t]||(i[t]=e[r]);var o=[];for(t in i)o.push(i[t]);return o},render:function(e){var t,r,n=this.canvas.contextTop;for(n.fillStyle=this.color,this._saveAndTransform(n),t=0,r=e.length;r>t;t++){var i=e[t];"undefined"!=typeof i.opacity&&(n.globalAlpha=i.opacity),n.fillRect(i.x,i.y,i.width,i.width)}n.restore()},_render:function(){var e,t,r=this.canvas.contextTop;for(r.fillStyle=this.color,this._saveAndTransform(r),e=0,t=this.sprayChunks.length;t>e;e++)this.render(this.sprayChunks[e]);r.restore()},addSprayChunk:function(e){this.sprayChunkPoints=[];var t,r,n,i,o=this.width/2;for(i=0;i<this.density;i++){t=fabric.util.getRandomInt(e.x-o,e.x+o),r=fabric.util.getRandomInt(e.y-o,e.y+o),n=this.dotWidthVariance?fabric.util.getRandomInt(Math.max(1,this.dotWidth-this.dotWidthVariance),this.dotWidth+this.dotWidthVariance):this.dotWidth;var a=new fabric.Point(t,r);a.width=n,this.randomOpacity&&(a.opacity=fabric.util.getRandomInt(0,100)/100),this.sprayChunkPoints.push(a)}this.sprayChunks.push(this.sprayChunkPoints)}});fabric.PatternBrush=fabric.util.createClass(fabric.PencilBrush,{getPatternSrc:function(){var e=20,t=5,r=fabric.util.createCanvasElement(),n=r.getContext("2d");return r.width=r.height=e+t,n.fillStyle=this.color,n.beginPath(),n.arc(e/2,e/2,e/2,0,2*Math.PI,!1),n.closePath(),n.fill(),r},getPatternSrcFunction:function(){return String(this.getPatternSrc).replace("this.color",'"'+this.color+'"')},getPattern:function(e){return e.createPattern(this.source||this.getPatternSrc(),"repeat")},_setBrushStyles:function(e){this.callSuper("_setBrushStyles",e),e.strokeStyle=this.getPattern(e)},createPath:function(e){var t=this.callSuper("createPath",e),r=t._getLeftTopCoords().scalarAdd(t.strokeWidth/2);return t.stroke=new fabric.Pattern({source:this.source||this.getPatternSrcFunction(),offsetX:-r.x,offsetY:-r.y}),t}});!function(){var e=fabric.util.getPointer,t=fabric.util.degreesToRadians,r=fabric.util.isTouchEvent;fabric.Canvas=fabric.util.createClass(fabric.StaticCanvas,{initialize:function(e,t){t||(t={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(e,t),this._initInteractive(),this._createCacheCanvas()},uniformScaling:!0,uniScaleKey:"shiftKey",centeredScaling:!1,centeredRotation:!1,centeredKey:"altKey",altActionKey:"shiftKey",interactive:!0,selection:!0,selectionKey:"shiftKey",altSelectionKey:null,selectionColor:"rgba(100, 100, 255, 0.3)",selectionDashArray:[],selectionBorderColor:"rgba(255, 255, 255, 0.3)",selectionLineWidth:1,selectionFullyContained:!1,hoverCursor:"move",moveCursor:"move",defaultCursor:"default",freeDrawingCursor:"crosshair",notAllowedCursor:"not-allowed",containerClass:"canvas-container",perPixelTargetFind:!1,targetFindTolerance:0,skipTargetFind:!1,isDrawingMode:!1,preserveObjectStacking:!1,snapAngle:0,snapThreshold:null,stopContextMenu:!1,fireRightClick:!1,fireMiddleClick:!1,targets:[],enablePointerEvents:!1,_hoveredTarget:null,_hoveredTargets:[],_initInteractive:function(){this._currentTransform=null,this._groupSelector=null,this._initWrapperElement(),this._createUpperCanvas(),this._initEventListeners(),this._initRetinaScaling(),this.freeDrawingBrush=fabric.PencilBrush&&new fabric.PencilBrush(this),this.calcOffset()},_chooseObjectsToRender:function(){var e,t,r,n=this.getActiveObjects();if(n.length>0&&!this.preserveObjectStacking){t=[],r=[];for(var i=0,o=this._objects.length;o>i;i++)e=this._objects[i],-1===n.indexOf(e)?t.push(e):r.push(e);n.length>1&&(this._activeObject._objects=r),t.push.apply(t,r)}else t=this._objects;return t},renderAll:function(){!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1),this.hasLostContext&&(this.renderTopLayer(this.contextTop),this.hasLostContext=!1);var e=this.contextContainer;return this.renderCanvas(e,this._chooseObjectsToRender()),this},renderTopLayer:function(e){e.save(),this.isDrawingMode&&this._isCurrentlyDrawing&&(this.freeDrawingBrush&&this.freeDrawingBrush._render(),this.contextTopDirty=!0),this.selection&&this._groupSelector&&(this._drawSelection(e),this.contextTopDirty=!0),e.restore()},renderTop:function(){var e=this.contextTop;return this.clearContext(e),this.renderTopLayer(e),this.fire("after:render"),this},_normalizePointer:function(e,t){var r=e.calcTransformMatrix(),n=fabric.util.invertTransform(r),i=this.restorePointerVpt(t);return fabric.util.transformPoint(i,n)},isTargetTransparent:function(e,t,r){if(e.shouldCache()&&e._cacheCanvas&&e!==this._activeObject){var n=this._normalizePointer(e,{x:t,y:r}),i=Math.max(e.cacheTranslationX+n.x*e.zoomX,0),o=Math.max(e.cacheTranslationY+n.y*e.zoomY,0),a=fabric.util.isTransparent(e._cacheContext,Math.round(i),Math.round(o),this.targetFindTolerance);return a}var s=this.contextCache,c=e.selectionBackgroundColor,u=this.viewportTransform;e.selectionBackgroundColor="",this.clearContext(s),s.save(),s.transform(u[0],u[1],u[2],u[3],u[4],u[5]),e.render(s),s.restore(),e.selectionBackgroundColor=c;var a=fabric.util.isTransparent(s,t,r,this.targetFindTolerance);return a},_isSelectionKeyPressed:function(e){var t=!1;return t=Array.isArray(this.selectionKey)?!!this.selectionKey.find(function(t){return e[t]===!0}):e[this.selectionKey]},_shouldClearSelection:function(e,t){var r=this.getActiveObjects(),n=this._activeObject;return!t||t&&n&&r.length>1&&-1===r.indexOf(t)&&n!==t&&!this._isSelectionKeyPressed(e)||t&&!t.evented||t&&!t.selectable&&n&&n!==t},_shouldCenterTransform:function(e,t,r){if(e){var n;return"scale"===t||"scaleX"===t||"scaleY"===t||"resizing"===t?n=this.centeredScaling||e.centeredScaling:"rotate"===t&&(n=this.centeredRotation||e.centeredRotation),n?!r:r}},_getOriginFromCorner:function(e,t){var r={x:e.originX,y:e.originY};return"ml"===t||"tl"===t||"bl"===t?r.x="right":("mr"===t||"tr"===t||"br"===t)&&(r.x="left"),"tl"===t||"mt"===t||"tr"===t?r.y="bottom":("bl"===t||"mb"===t||"br"===t)&&(r.y="top"),r},_getActionFromCorner:function(e,t,r,n){if(!t||!e)return"drag";var i=n.controls[t];return i.getActionName(r,i,n)},_setupCurrentTransform:function(e,r,n){if(r){var i=this.getPointer(e),o=r.__corner,a=r.controls[o],s=n&&o?a.getActionHandler(e,r,a):fabric.controlsUtils.dragHandler,c=this._getActionFromCorner(n,o,e,r),u=this._getOriginFromCorner(r,o),l=e[this.centeredKey],f={target:r,action:c,actionHandler:s,corner:o,scaleX:r.scaleX,scaleY:r.scaleY,skewX:r.skewX,skewY:r.skewY,offsetX:i.x-r.left,offsetY:i.y-r.top,originX:u.x,originY:u.y,ex:i.x,ey:i.y,lastX:i.x,lastY:i.y,theta:t(r.angle),width:r.width*r.scaleX,shiftKey:e.shiftKey,altKey:l,original:fabric.util.saveObjectTransform(r)};this._shouldCenterTransform(r,c,l)&&(f.originX="center",f.originY="center"),f.original.originX=u.x,f.original.originY=u.y,this._currentTransform=f,this._beforeTransform(e)}},setCursor:function(e){this.upperCanvasEl.style.cursor=e},_drawSelection:function(e){var t=this._groupSelector,r=new fabric.Point(t.ex,t.ey),n=fabric.util.transformPoint(r,this.viewportTransform),i=new fabric.Point(t.ex+t.left,t.ey+t.top),o=fabric.util.transformPoint(i,this.viewportTransform),a=Math.min(n.x,o.x),s=Math.min(n.y,o.y),c=Math.max(n.x,o.x),u=Math.max(n.y,o.y),l=this.selectionLineWidth/2;this.selectionColor&&(e.fillStyle=this.selectionColor,e.fillRect(a,s,c-a,u-s)),this.selectionLineWidth&&this.selectionBorderColor&&(e.lineWidth=this.selectionLineWidth,e.strokeStyle=this.selectionBorderColor,a+=l,s+=l,c-=l,u-=l,fabric.Object.prototype._setLineDash.call(this,e,this.selectionDashArray),e.strokeRect(a,s,c-a,u-s))},findTarget:function(e,t){if(!this.skipTargetFind){var n,i,o=!0,a=this.getPointer(e,o),s=this._activeObject,c=this.getActiveObjects(),u=r(e),l=c.length>1&&!t||1===c.length;if(this.targets=[],l&&s._findTargetCorner(a,u))return s;if(c.length>1&&!t&&s===this._searchPossibleTargets([s],a))return s;if(1===c.length&&s===this._searchPossibleTargets([s],a)){if(!this.preserveObjectStacking)return s;n=s,i=this.targets,this.targets=[]}var f=this._searchPossibleTargets(this._objects,a);return e[this.altSelectionKey]&&f&&n&&f!==n&&(f=n,this.targets=i),f}},_checkTarget:function(e,t,r){if(t&&t.visible&&t.evented&&t.containsPoint(e)){if(!this.perPixelTargetFind&&!t.perPixelTargetFind||t.isEditing)return!0;var n=this.isTargetTransparent(t,r.x,r.y);if(!n)return!0}},_searchPossibleTargets:function(e,t){for(var r,n,i=e.length;i--;){var o=e[i],a=o.group?this._normalizePointer(o.group,t):t;if(this._checkTarget(a,o,t)){r=e[i],r.subTargetCheck&&r instanceof fabric.Group&&(n=this._searchPossibleTargets(r._objects,t),n&&this.targets.push(n));break}}return r},restorePointerVpt:function(e){return fabric.util.transformPoint(e,fabric.util.invertTransform(this.viewportTransform))},getPointer:function(t,r){if(this._absolutePointer&&!r)return this._absolutePointer;if(this._pointer&&r)return this._pointer;var n,i=e(t),o=this.upperCanvasEl,a=o.getBoundingClientRect(),s=a.width||0,c=a.height||0;s&&c||("top"in a&&"bottom"in a&&(c=Math.abs(a.top-a.bottom)),"right"in a&&"left"in a&&(s=Math.abs(a.right-a.left))),this.calcOffset(),i.x=i.x-this._offset.left,i.y=i.y-this._offset.top,r||(i=this.restorePointerVpt(i));var u=this.getRetinaScaling();return 1!==u&&(i.x/=u,i.y/=u),n=0===s||0===c?{width:1,height:1}:{width:o.width/s,height:o.height/c},{x:i.x*n.width,y:i.y*n.height}},_createUpperCanvas:function(){var e=this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/,""),t=this.lowerCanvasEl,r=this.upperCanvasEl;r?r.className="":(r=this._createCanvasElement(),this.upperCanvasEl=r),fabric.util.addClass(r,"upper-canvas "+e),this.wrapperEl.appendChild(r),this._copyCanvasStyle(t,r),this._applyCanvasStyle(r),this.contextTop=r.getContext("2d")},getTopContext:function(){return this.contextTop},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute("width",this.width),this.cacheCanvasEl.setAttribute("height",this.height),this.contextCache=this.cacheCanvasEl.getContext("2d")},_initWrapperElement:function(){this.wrapperEl=fabric.util.wrapElement(this.lowerCanvasEl,"div",{"class":this.containerClass}),fabric.util.setStyle(this.wrapperEl,{width:this.width+"px",height:this.height+"px",position:"relative"}),fabric.util.makeElementUnselectable(this.wrapperEl)},_applyCanvasStyle:function(e){var t=this.width||e.width,r=this.height||e.height;fabric.util.setStyle(e,{position:"absolute",width:t+"px",height:r+"px",left:0,top:0,"touch-action":this.allowTouchScrolling?"manipulation":"none","-ms-touch-action":this.allowTouchScrolling?"manipulation":"none"}),e.width=t,e.height=r,fabric.util.makeElementUnselectable(e)},_copyCanvasStyle:function(e,t){t.style.cssText=e.style.cssText},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},getActiveObject:function(){return this._activeObject},getActiveObjects:function(){var e=this._activeObject;return e?"activeSelection"===e.type&&e._objects?e._objects.slice(0):[e]:[]},_onObjectRemoved:function(e){e===this._activeObject&&(this.fire("before:selection:cleared",{target:e}),this._discardActiveObject(),this.fire("selection:cleared",{target:e}),e.fire("deselected")),e===this._hoveredTarget&&(this._hoveredTarget=null,this._hoveredTargets=[]),this.callSuper("_onObjectRemoved",e)},_fireSelectionEvents:function(e,t){var r=!1,n=this.getActiveObjects(),i=[],o=[];e.forEach(function(e){-1===n.indexOf(e)&&(r=!0,e.fire("deselected",{e:t,target:e}),o.push(e))}),n.forEach(function(n){-1===e.indexOf(n)&&(r=!0,n.fire("selected",{e:t,target:n}),i.push(n))}),e.length>0&&n.length>0?r&&this.fire("selection:updated",{e:t,selected:i,deselected:o}):n.length>0?this.fire("selection:created",{e:t,selected:i}):e.length>0&&this.fire("selection:cleared",{e:t,deselected:o})},setActiveObject:function(e,t){var r=this.getActiveObjects();return this._setActiveObject(e,t),this._fireSelectionEvents(r,t),this},_setActiveObject:function(e,t){return this._activeObject===e?!1:this._discardActiveObject(t,e)?e.onSelect({e:t})?!1:(this._activeObject=e,!0):!1},_discardActiveObject:function(e,t){var r=this._activeObject;if(r){if(r.onDeselect({e:e,object:t}))return!1;this._activeObject=null}return!0},discardActiveObject:function(e){var t=this.getActiveObjects(),r=this.getActiveObject();return t.length&&this.fire("before:selection:cleared",{target:r,e:e}),this._discardActiveObject(e),this._fireSelectionEvents(t,e),this},dispose:function(){var e=this.wrapperEl;return this.removeListeners(),e.removeChild(this.upperCanvasEl),e.removeChild(this.lowerCanvasEl),this.contextCache=null,this.contextTop=null,["upperCanvasEl","cacheCanvasEl"].forEach(function(e){fabric.util.cleanUpJsdomNode(this[e]),this[e]=void 0}.bind(this)),e.parentNode&&e.parentNode.replaceChild(this.lowerCanvasEl,this.wrapperEl),delete this.wrapperEl,fabric.StaticCanvas.prototype.dispose.call(this),this},clear:function(){return this.discardActiveObject(),this.clearContext(this.contextTop),this.callSuper("clear")},drawControls:function(e){var t=this._activeObject;t&&t._renderControls(e)},_toObject:function(e,t,r){var n=this._realizeGroupTransformOnObject(e),i=this.callSuper("_toObject",e,t,r);return this._unwindGroupTransformOnObject(e,n),i},_realizeGroupTransformOnObject:function(e){if(e.group&&"activeSelection"===e.group.type&&this._activeObject===e.group){var t=["angle","flipX","flipY","left","scaleX","scaleY","skewX","skewY","top"],r={};return t.forEach(function(t){r[t]=e[t]}),fabric.util.addTransformToObject(e,this._activeObject.calcOwnMatrix()),r}return null},_unwindGroupTransformOnObject:function(e,t){t&&e.set(t)},_setSVGObject:function(e,t,r){var n=this._realizeGroupTransformOnObject(t);this.callSuper("_setSVGObject",e,t,r),this._unwindGroupTransformOnObject(t,n)},setViewportTransform:function(e){this.renderOnAddRemove&&this._activeObject&&this._activeObject.isEditing&&this._activeObject.clearContextTop(),fabric.StaticCanvas.prototype.setViewportTransform.call(this,e)}});for(var n in fabric.StaticCanvas)"prototype"!==n&&(fabric.Canvas[n]=fabric.StaticCanvas[n])}();!function(){function e(e,t){return e.button&&e.button===t-1}var t=fabric.util.addListener,r=fabric.util.removeListener,n=3,i=2,o=1,s={passive:!1};fabric.util.object.extend(fabric.Canvas.prototype,{mainTouchId:null,_initEventListeners:function(){this.removeListeners(),this._bindEvents(),this.addOrRemove(t,"add")},_getEventPrefix:function(){return this.enablePointerEvents?"pointer":"mouse"},addOrRemove:function(e,t){var r=this.upperCanvasEl,n=this._getEventPrefix();e(fabric.window,"resize",this._onResize),e(r,n+"down",this._onMouseDown),e(r,n+"move",this._onMouseMove,s),e(r,n+"out",this._onMouseOut),e(r,n+"enter",this._onMouseEnter),e(r,"wheel",this._onMouseWheel),e(r,"contextmenu",this._onContextMenu),e(r,"dblclick",this._onDoubleClick),e(r,"dragover",this._onDragOver),e(r,"dragenter",this._onDragEnter),e(r,"dragleave",this._onDragLeave),e(r,"drop",this._onDrop),this.enablePointerEvents||e(r,"touchstart",this._onTouchStart,s),"undefined"!=typeof eventjs&&t in eventjs&&(eventjs[t](r,"gesture",this._onGesture),eventjs[t](r,"drag",this._onDrag),eventjs[t](r,"orientation",this._onOrientationChange),eventjs[t](r,"shake",this._onShake),eventjs[t](r,"longpress",this._onLongPress))},removeListeners:function(){this.addOrRemove(r,"remove");var e=this._getEventPrefix();r(fabric.document,e+"up",this._onMouseUp),r(fabric.document,"touchend",this._onTouchEnd,s),r(fabric.document,e+"move",this._onMouseMove,s),r(fabric.document,"touchmove",this._onMouseMove,s)},_bindEvents:function(){this.eventsBound||(this._onMouseDown=this._onMouseDown.bind(this),this._onTouchStart=this._onTouchStart.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._onResize=this._onResize.bind(this),this._onGesture=this._onGesture.bind(this),this._onDrag=this._onDrag.bind(this),this._onShake=this._onShake.bind(this),this._onLongPress=this._onLongPress.bind(this),this._onOrientationChange=this._onOrientationChange.bind(this),this._onMouseWheel=this._onMouseWheel.bind(this),this._onMouseOut=this._onMouseOut.bind(this),this._onMouseEnter=this._onMouseEnter.bind(this),this._onContextMenu=this._onContextMenu.bind(this),this._onDoubleClick=this._onDoubleClick.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDragEnter=this._simpleEventHandler.bind(this,"dragenter"),this._onDragLeave=this._simpleEventHandler.bind(this,"dragleave"),this._onDrop=this._onDrop.bind(this),this.eventsBound=!0)},_onGesture:function(e,t){this.__onTransformGesture&&this.__onTransformGesture(e,t)},_onDrag:function(e,t){this.__onDrag&&this.__onDrag(e,t)},_onMouseWheel:function(e){this.__onMouseWheel(e)},_onMouseOut:function(e){var t=this._hoveredTarget;this.fire("mouse:out",{target:t,e:e}),this._hoveredTarget=null,t&&t.fire("mouseout",{e:e});var r=this;this._hoveredTargets.forEach(function(n){r.fire("mouse:out",{target:t,e:e}),n&&t.fire("mouseout",{e:e})}),this._hoveredTargets=[],this._iTextInstances&&this._iTextInstances.forEach(function(e){e.isEditing&&e.hiddenTextarea.focus()})},_onMouseEnter:function(e){this._currentTransform||this.findTarget(e)||(this.fire("mouse:over",{target:null,e:e}),this._hoveredTarget=null,this._hoveredTargets=[])},_onOrientationChange:function(e,t){this.__onOrientationChange&&this.__onOrientationChange(e,t)},_onShake:function(e,t){this.__onShake&&this.__onShake(e,t)},_onLongPress:function(e,t){this.__onLongPress&&this.__onLongPress(e,t)},_onDragOver:function(e){e.preventDefault();var t=this._simpleEventHandler("dragover",e);this._fireEnterLeaveEvents(t,e)},_onDrop:function(e){return this._simpleEventHandler("drop:before",e),this._simpleEventHandler("drop",e)},_onContextMenu:function(e){return this.stopContextMenu&&(e.stopPropagation(),e.preventDefault()),!1},_onDoubleClick:function(e){this._cacheTransformEventData(e),this._handleEvent(e,"dblclick"),this._resetTransformEventData(e)},getPointerId:function(e){var t=e.changedTouches;return t?t[0]&&t[0].identifier:this.enablePointerEvents?e.pointerId:-1},_isMainEvent:function(e){return e.isPrimary===!0?!0:e.isPrimary===!1?!1:"touchend"===e.type&&0===e.touches.length?!0:e.changedTouches?e.changedTouches[0].identifier===this.mainTouchId:!0},_onTouchStart:function(e){e.preventDefault(),null===this.mainTouchId&&(this.mainTouchId=this.getPointerId(e)),this.__onMouseDown(e),this._resetTransformEventData();var n=this.upperCanvasEl,i=this._getEventPrefix();t(fabric.document,"touchend",this._onTouchEnd,s),t(fabric.document,"touchmove",this._onMouseMove,s),r(n,i+"down",this._onMouseDown)},_onMouseDown:function(e){this.__onMouseDown(e),this._resetTransformEventData();var n=this.upperCanvasEl,i=this._getEventPrefix();r(n,i+"move",this._onMouseMove,s),t(fabric.document,i+"up",this._onMouseUp),t(fabric.document,i+"move",this._onMouseMove,s)},_onTouchEnd:function(e){if(!(e.touches.length>0)){this.__onMouseUp(e),this._resetTransformEventData(),this.mainTouchId=null;var n=this._getEventPrefix();r(fabric.document,"touchend",this._onTouchEnd,s),r(fabric.document,"touchmove",this._onMouseMove,s);var i=this;this._willAddMouseDown&&clearTimeout(this._willAddMouseDown),this._willAddMouseDown=setTimeout(function(){t(i.upperCanvasEl,n+"down",i._onMouseDown),i._willAddMouseDown=0},400)}},_onMouseUp:function(e){this.__onMouseUp(e),this._resetTransformEventData();var n=this.upperCanvasEl,i=this._getEventPrefix();this._isMainEvent(e)&&(r(fabric.document,i+"up",this._onMouseUp),r(fabric.document,i+"move",this._onMouseMove,s),t(n,i+"move",this._onMouseMove,s))},_onMouseMove:function(e){!this.allowTouchScrolling&&e.preventDefault&&e.preventDefault(),this.__onMouseMove(e)},_onResize:function(){this.calcOffset()},_shouldRender:function(e){var t=this._activeObject;return!!t!=!!e||t&&e&&t!==e?!0:t&&t.isEditing?!1:!1},__onMouseUp:function(t){var r,s=this._currentTransform,a=this._groupSelector,c=!1,u=!a||0===a.left&&0===a.top;if(this._cacheTransformEventData(t),r=this._target,this._handleEvent(t,"up:before"),e(t,n))return void(this.fireRightClick&&this._handleEvent(t,"up",n,u));if(e(t,i))return this.fireMiddleClick&&this._handleEvent(t,"up",i,u),void this._resetTransformEventData();if(this.isDrawingMode&&this._isCurrentlyDrawing)return void this._onMouseUpInDrawingMode(t);if(this._isMainEvent(t)){if(s&&(this._finalizeCurrentTransform(t),c=s.actionPerformed),!u){var l=r===this._activeObject;this._maybeGroupObjects(t),c||(c=this._shouldRender(r)||!l&&r===this._activeObject)}var f,h;if(r){if(f=r._findTargetCorner(this.getPointer(t,!0),fabric.util.isTouchEvent(t)),r.selectable&&r!==this._activeObject&&"up"===r.activeOn)this.setActiveObject(r,t),c=!0;else{var d=r.controls[f],v=d&&d.getMouseUpHandler(t,r,d);v&&(h=this.getPointer(t),v(t,s,h.x,h.y))}r.isMoving=!1}if(s&&(s.target!==r||s.corner!==f)){var p=s.target&&s.target.controls[s.corner],g=p&&p.getMouseUpHandler(t,r,d);h=h||this.getPointer(t),g&&g(t,s,h.x,h.y)}this._setCursorFromEvent(t,r),this._handleEvent(t,"up",o,u),this._groupSelector=null,this._currentTransform=null,r&&(r.__corner=0),c?this.requestRenderAll():u||this.renderTop()}},_simpleEventHandler:function(e,t){var r=this.findTarget(t),n=this.targets,i={e:t,target:r,subTargets:n};if(this.fire(e,i),r&&r.fire(e,i),!n)return r;for(var o=0;o<n.length;o++)n[o].fire(e,i);return r},_handleEvent:function(e,t,r,n){var i=this._target,s=this.targets||[],a={e:e,target:i,subTargets:s,button:r||o,isClick:n||!1,pointer:this._pointer,absolutePointer:this._absolutePointer,transform:this._currentTransform};"up"===t&&(a.currentTarget=this.findTarget(e),a.currentSubTargets=this.targets),this.fire("mouse:"+t,a),i&&i.fire("mouse"+t,a);for(var c=0;c<s.length;c++)s[c].fire("mouse"+t,a)},_finalizeCurrentTransform:function(e){var t=this._currentTransform,r=t.target,n={e:e,target:r,transform:t,action:t.action};r._scaling&&(r._scaling=!1),r.setCoords(),(t.actionPerformed||this.stateful&&r.hasStateChanged())&&this._fire("modified",n)},_onMouseDownInDrawingMode:function(e){this._isCurrentlyDrawing=!0,this.getActiveObject()&&this.discardActiveObject(e).requestRenderAll();var t=this.getPointer(e);this.freeDrawingBrush.onMouseDown(t,{e:e,pointer:t}),this._handleEvent(e,"down")},_onMouseMoveInDrawingMode:function(e){if(this._isCurrentlyDrawing){var t=this.getPointer(e);this.freeDrawingBrush.onMouseMove(t,{e:e,pointer:t})}this.setCursor(this.freeDrawingCursor),this._handleEvent(e,"move")},_onMouseUpInDrawingMode:function(e){var t=this.getPointer(e);this._isCurrentlyDrawing=this.freeDrawingBrush.onMouseUp({e:e,pointer:t}),this._handleEvent(e,"up")},__onMouseDown:function(t){this._cacheTransformEventData(t),this._handleEvent(t,"down:before");var r=this._target;if(e(t,n))return void(this.fireRightClick&&this._handleEvent(t,"down",n));if(e(t,i))return void(this.fireMiddleClick&&this._handleEvent(t,"down",i));if(this.isDrawingMode)return void this._onMouseDownInDrawingMode(t);if(this._isMainEvent(t)&&!this._currentTransform){var o=this._pointer;this._previousPointer=o;var s=this._shouldRender(r),a=this._shouldGroup(t,r);if(this._shouldClearSelection(t,r)?this.discardActiveObject(t):a&&(this._handleGrouping(t,r),r=this._activeObject),!this.selection||r&&(r.selectable||r.isEditing||r===this._activeObject)||(this._groupSelector={ex:this._absolutePointer.x,ey:this._absolutePointer.y,top:0,left:0}),r){var c=r===this._activeObject;r.selectable&&"down"===r.activeOn&&this.setActiveObject(r,t);var u=r._findTargetCorner(this.getPointer(t,!0),fabric.util.isTouchEvent(t));if(r.__corner=u,r===this._activeObject&&(u||!a)){this._setupCurrentTransform(t,r,c);var l=r.controls[u],o=this.getPointer(t),f=l&&l.getMouseDownHandler(t,r,l);f&&f(t,this._currentTransform,o.x,o.y)}}this._handleEvent(t,"down"),(s||a)&&this.requestRenderAll()}},_resetTransformEventData:function(){this._target=null,this._pointer=null,this._absolutePointer=null},_cacheTransformEventData:function(e){this._resetTransformEventData(),this._pointer=this.getPointer(e,!0),this._absolutePointer=this.restorePointerVpt(this._pointer),this._target=this._currentTransform?this._currentTransform.target:this.findTarget(e)||null},_beforeTransform:function(e){var t=this._currentTransform;this.stateful&&t.target.saveState(),this.fire("before:transform",{e:e,transform:t})},__onMouseMove:function(e){this._handleEvent(e,"move:before"),this._cacheTransformEventData(e);var t,r;if(this.isDrawingMode)return void this._onMouseMoveInDrawingMode(e);if(this._isMainEvent(e)){var n=this._groupSelector;n?(r=this._absolutePointer,n.left=r.x-n.ex,n.top=r.y-n.ey,this.renderTop()):this._currentTransform?this._transformObject(e):(t=this.findTarget(e)||null,this._setCursorFromEvent(e,t),this._fireOverOutEvents(t,e)),this._handleEvent(e,"move"),this._resetTransformEventData()}},_fireOverOutEvents:function(e,t){var r=this._hoveredTarget,n=this._hoveredTargets,i=this.targets,o=Math.max(n.length,i.length);this.fireSyntheticInOutEvents(e,t,{oldTarget:r,evtOut:"mouseout",canvasEvtOut:"mouse:out",evtIn:"mouseover",canvasEvtIn:"mouse:over"});for(var s=0;o>s;s++)this.fireSyntheticInOutEvents(i[s],t,{oldTarget:n[s],evtOut:"mouseout",evtIn:"mouseover"});this._hoveredTarget=e,this._hoveredTargets=this.targets.concat()},_fireEnterLeaveEvents:function(e,t){var r=this._draggedoverTarget,n=this._hoveredTargets,i=this.targets,o=Math.max(n.length,i.length);this.fireSyntheticInOutEvents(e,t,{oldTarget:r,evtOut:"dragleave",evtIn:"dragenter"});for(var s=0;o>s;s++)this.fireSyntheticInOutEvents(i[s],t,{oldTarget:n[s],evtOut:"dragleave",evtIn:"dragenter"});this._draggedoverTarget=e},fireSyntheticInOutEvents:function(e,t,r){var n,i,o,s,a=r.oldTarget,c=a!==e,u=r.canvasEvtIn,l=r.canvasEvtOut;c&&(n={e:t,target:e,previousTarget:a},i={e:t,target:a,nextTarget:e}),s=e&&c,o=a&&c,o&&(l&&this.fire(l,i),a.fire(r.evtOut,i)),s&&(u&&this.fire(u,n),e.fire(r.evtIn,n))},__onMouseWheel:function(e){this._cacheTransformEventData(e),this._handleEvent(e,"wheel"),this._resetTransformEventData()},_transformObject:function(e){var t=this.getPointer(e),r=this._currentTransform;r.reset=!1,r.shiftKey=e.shiftKey,r.altKey=e[this.centeredKey],this._performTransformAction(e,r,t),r.actionPerformed&&this.requestRenderAll()},_performTransformAction:function(e,t,r){var n=r.x,i=r.y,o=t.action,s=!1,a=t.actionHandler;a&&(s=a(e,t,n,i)),"drag"===o&&s&&(t.target.isMoving=!0,this.setCursor(t.target.moveCursor||this.moveCursor)),t.actionPerformed=t.actionPerformed||s},_fire:fabric.controlsUtils.fireEvent,_setCursorFromEvent:function(e,t){if(!t)return this.setCursor(this.defaultCursor),!1;var r=t.hoverCursor||this.hoverCursor,n=this._activeObject&&"activeSelection"===this._activeObject.type?this._activeObject:null,i=(!n||!n.contains(t))&&t._findTargetCorner(this.getPointer(e,!0));i?this.setCursor(this.getCornerCursor(i,t,e)):(t.subTargetCheck&&this.targets.concat().reverse().map(function(e){r=e.hoverCursor||r}),this.setCursor(r))},getCornerCursor:function(e,t,r){var n=t.controls[e];return n.cursorStyleHandler(r,n,t)}})}();!function(){var e=Math.min,t=Math.max;fabric.util.object.extend(fabric.Canvas.prototype,{_shouldGroup:function(e,t){var r=this._activeObject;return r&&this._isSelectionKeyPressed(e)&&t&&t.selectable&&this.selection&&(r!==t||"activeSelection"===r.type)&&!t.onSelect({e:e})},_handleGrouping:function(e,t){var r=this._activeObject;r.__corner||(t!==r||(t=this.findTarget(e,!0),t&&t.selectable))&&(r&&"activeSelection"===r.type?this._updateActiveSelection(t,e):this._createActiveSelection(t,e))},_updateActiveSelection:function(e,t){var r=this._activeObject,n=r._objects.slice(0);r.contains(e)?(r.removeWithUpdate(e),this._hoveredTarget=e,this._hoveredTargets=this.targets.concat(),1===r.size()&&this._setActiveObject(r.item(0),t)):(r.addWithUpdate(e),this._hoveredTarget=r,this._hoveredTargets=this.targets.concat()),this._fireSelectionEvents(n,t)},_createActiveSelection:function(e,t){var r=this.getActiveObjects(),n=this._createGroup(e);this._hoveredTarget=n,this._setActiveObject(n,t),this._fireSelectionEvents(r,t)},_createGroup:function(e){var t=this._objects,r=t.indexOf(this._activeObject)<t.indexOf(e),n=r?[this._activeObject,e]:[e,this._activeObject];return this._activeObject.isEditing&&this._activeObject.exitEditing(),new fabric.ActiveSelection(n,{canvas:this})},_groupSelectedObjects:function(e){var t,r=this._collectObjects(e);1===r.length?this.setActiveObject(r[0],e):r.length>1&&(t=new fabric.ActiveSelection(r.reverse(),{canvas:this}),this.setActiveObject(t,e))},_collectObjects:function(r){for(var n,i=[],o=this._groupSelector.ex,s=this._groupSelector.ey,a=o+this._groupSelector.left,c=s+this._groupSelector.top,u=new fabric.Point(e(o,a),e(s,c)),l=new fabric.Point(t(o,a),t(s,c)),f=!this.selectionFullyContained,h=o===a&&s===c,d=this._objects.length;d--&&(n=this._objects[d],!(n&&n.selectable&&n.visible&&(f&&n.intersectsWithRect(u,l,!0)||n.isContainedWithinRect(u,l,!0)||f&&n.containsPoint(u,null,!0)||f&&n.containsPoint(l,null,!0))&&(i.push(n),h))););return i.length>1&&(i=i.filter(function(e){return!e.onSelect({e:r})})),i},_maybeGroupObjects:function(e){this.selection&&this._groupSelector&&this._groupSelectedObjects(e),this.setCursor(this.defaultCursor),this._groupSelector=null}})}();!function(){fabric.util.object.extend(fabric.StaticCanvas.prototype,{toDataURL:function(e){e||(e={});var t=e.format||"png",r=e.quality||1,n=(e.multiplier||1)*(e.enableRetinaScaling?this.getRetinaScaling():1),i=this.toCanvasElement(n,e);return fabric.util.toDataURL(i,t,r)},toCanvasElement:function(e,t){e=e||1,t=t||{};var r=(t.width||this.width)*e,n=(t.height||this.height)*e,i=this.getZoom(),o=this.width,s=this.height,a=i*e,c=this.viewportTransform,u=(c[4]-(t.left||0))*e,l=(c[5]-(t.top||0))*e,h=this.interactive,f=[a,0,0,a,u,l],d=this.enableRetinaScaling,v=fabric.util.createCanvasElement(),p=this.contextTop;return v.width=r,v.height=n,this.contextTop=null,this.enableRetinaScaling=!1,this.interactive=!1,this.viewportTransform=f,this.width=r,this.height=n,this.calcViewportBoundaries(),this.renderCanvas(v.getContext("2d"),this._objects),this.viewportTransform=c,this.width=o,this.height=s,this.calcViewportBoundaries(),this.interactive=h,this.enableRetinaScaling=d,this.contextTop=p,v}})}();fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromJSON:function(e,t,n){if(e){var r="string"==typeof e?JSON.parse(e):fabric.util.object.clone(e),i=this,o=r.clipPath,s=this.renderOnAddRemove;return this.renderOnAddRemove=!1,delete r.clipPath,this._enlivenObjects(r.objects,function(e){i.clear(),i._setBgOverlay(r,function(){o?i._enlivenObjects([o],function(n){i.clipPath=n[0],i.__setupCanvas.call(i,r,e,s,t)}):i.__setupCanvas.call(i,r,e,s,t)})},n),this}},__setupCanvas:function(e,t,n,r){var i=this;t.forEach(function(e,t){i.insertAt(e,t)}),this.renderOnAddRemove=n,delete e.objects,delete e.backgroundImage,delete e.overlayImage,delete e.background,delete e.overlay,this._setOptions(e),this.renderAll(),r&&r()},_setBgOverlay:function(e,t){var n={backgroundColor:!1,overlayColor:!1,backgroundImage:!1,overlayImage:!1};if(!(e.backgroundImage||e.overlayImage||e.background||e.overlay))return void(t&&t());var r=function(){n.backgroundImage&&n.overlayImage&&n.backgroundColor&&n.overlayColor&&t&&t()};this.__setBgOverlay("backgroundImage",e.backgroundImage,n,r),this.__setBgOverlay("overlayImage",e.overlayImage,n,r),this.__setBgOverlay("backgroundColor",e.background,n,r),this.__setBgOverlay("overlayColor",e.overlay,n,r)},__setBgOverlay:function(e,t,n,r){var i=this;return t?void("backgroundImage"===e||"overlayImage"===e?fabric.util.enlivenObjects([t],function(t){i[e]=t[0],n[e]=!0,r&&r()}):this["set"+fabric.util.string.capitalize(e,!0)](t,function(){n[e]=!0,r&&r()})):(n[e]=!0,void(r&&r()))},_enlivenObjects:function(e,t,n){return e&&0!==e.length?void fabric.util.enlivenObjects(e,function(e){t&&t(e)},null,n):void(t&&t([]))},_toDataURL:function(e,t){this.clone(function(n){t(n.toDataURL(e))})},_toDataURLWithMultiplier:function(e,t,n){this.clone(function(r){n(r.toDataURLWithMultiplier(e,t))})},clone:function(e,t){var n=JSON.stringify(this.toJSON(t));this.cloneWithoutData(function(t){t.loadFromJSON(n,function(){e&&e(t)})})},cloneWithoutData:function(e){var t=fabric.util.createCanvasElement();t.width=this.width,t.height=this.height;var n=new fabric.Canvas(t);this.backgroundImage?(n.setBackgroundImage(this.backgroundImage.src,function(){n.renderAll(),e&&e(n)}),n.backgroundImageOpacity=this.backgroundImageOpacity,n.backgroundImageStretch=this.backgroundImageStretch):e&&e(n)}});!function(){var e=fabric.util.degreesToRadians,t=fabric.util.radiansToDegrees;fabric.util.object.extend(fabric.Canvas.prototype,{__onTransformGesture:function(e,t){if(!this.isDrawingMode&&e.touches&&2===e.touches.length&&"gesture"===t.gesture){var r=this.findTarget(e);"undefined"!=typeof r&&(this.__gesturesParams={e:e,self:t,target:r},this.__gesturesRenderer()),this.fire("touch:gesture",{target:r,e:e,self:t})}},__gesturesParams:null,__gesturesRenderer:function(){if(null!==this.__gesturesParams&&null!==this._currentTransform){var e=this.__gesturesParams.self,t=this._currentTransform,r=this.__gesturesParams.e;t.action="scale",t.originX=t.originY="center",this._scaleObjectBy(e.scale,r),0!==e.rotation&&(t.action="rotate",this._rotateObjectByAngle(e.rotation,r)),this.requestRenderAll(),t.action="drag"}},__onDrag:function(e,t){this.fire("touch:drag",{e:e,self:t})},__onOrientationChange:function(e,t){this.fire("touch:orientation",{e:e,self:t})},__onShake:function(e,t){this.fire("touch:shake",{e:e,self:t})},__onLongPress:function(e,t){this.fire("touch:longpress",{e:e,self:t})},_scaleObjectBy:function(e,t){var r=this._currentTransform,n=r.target;return r.gestureScale=e,n._scaling=!0,fabric.controlsUtils.scalingEqually(t,r,0,0)},_rotateObjectByAngle:function(r,n){var i=this._currentTransform;i.target.get("lockRotation")||(i.target.rotate(t(e(r)+i.theta)),this._fire("rotating",{target:i.target,e:n,transform:i}))}})}();!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.object.clone,n=e.util.toFixed,s=e.util.string.capitalize,o=e.util.degreesToRadians,a=!e.isLikelyNode,c=2;e.Object||(e.Object=e.util.createClass(e.CommonMethods,{type:"object",originX:"left",originY:"top",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,skewX:0,skewY:0,cornerSize:13,touchCornerSize:24,transparentCorners:!0,hoverCursor:null,moveCursor:null,padding:0,borderColor:"rgb(178,204,255)",borderDashArray:null,cornerColor:"rgb(178,204,255)",cornerStrokeColor:null,cornerStyle:"rect",cornerDashArray:null,centeredScaling:!1,centeredRotation:!0,fill:"rgb(0,0,0)",fillRule:"nonzero",globalCompositeOperation:"source-over",backgroundColor:"",selectionBackgroundColor:"",stroke:null,strokeWidth:1,strokeDashArray:null,strokeDashOffset:0,strokeLineCap:"butt",strokeLineJoin:"miter",strokeMiterLimit:4,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,minScaleLimit:0,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,perPixelTargetFind:!1,includeDefaultValues:!0,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockSkewingX:!1,lockSkewingY:!1,lockScalingFlip:!1,excludeFromExport:!1,objectCaching:a,statefullCache:!1,noScaleCache:!0,strokeUniform:!1,dirty:!0,__corner:0,paintFirst:"fill",activeOn:"down",stateProperties:"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit angle opacity fill globalCompositeOperation shadow visible backgroundColor skewX skewY fillRule paintFirst clipPath strokeUniform".split(" "),cacheProperties:"fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath".split(" "),colorProperties:"fill stroke backgroundColor".split(" "),clipPath:void 0,inverted:!1,absolutePositioned:!1,initialize:function(t){t&&this.setOptions(t)},_createCacheCanvas:function(){this._cacheProperties={},this._cacheCanvas=e.util.createCanvasElement(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0},_limitCacheSize:function(t){var i=e.perfLimitSizeTotal,r=t.width,n=t.height,s=e.maxCacheSideLimit,o=e.minCacheSideLimit;if(s>=r&&s>=n&&i>=r*n)return o>r&&(t.width=o),o>n&&(t.height=o),t;var a=r/n,c=e.util.limitDimsByArea(a,i),h=e.util.capValue,l=h(o,c.x,s),u=h(o,c.y,s);return r>l&&(t.zoomX/=r/l,t.width=l,t.capped=!0),n>u&&(t.zoomY/=n/u,t.height=u,t.capped=!0),t},_getCacheCanvasDimensions:function(){var t=this.getTotalObjectScaling(),e=this._getTransformedDimensions(0,0),i=e.x*t.scaleX/this.scaleX,r=e.y*t.scaleY/this.scaleY;return{width:i+c,height:r+c,zoomX:t.scaleX,zoomY:t.scaleY,x:i,y:r}},_updateCacheCanvas:function(){var t=this.canvas;if(this.noScaleCache&&t&&t._currentTransform){var i=t._currentTransform.target,r=t._currentTransform.action;if(this===i&&r.slice&&"scale"===r.slice(0,5))return!1}var n,s,o=this._cacheCanvas,a=this._limitCacheSize(this._getCacheCanvasDimensions()),c=e.minCacheSideLimit,h=a.width,l=a.height,u=a.zoomX,f=a.zoomY,d=h!==this.cacheWidth||l!==this.cacheHeight,g=this.zoomX!==u||this.zoomY!==f,v=d||g,p=0,m=0,b=!1;if(d){var y=this._cacheCanvas.width,_=this._cacheCanvas.height,w=h>y||l>_,x=(.9*y>h||.9*_>l)&&y>c&&_>c;b=w||x,w&&!a.capped&&(h>c||l>c)&&(p=.1*h,m=.1*l)}return this instanceof e.Text&&this.path&&(v=!0,b=!0,p+=this.getHeightOfLine(0)*this.zoomX,m+=this.getHeightOfLine(0)*this.zoomY),v?(b?(o.width=Math.ceil(h+p),o.height=Math.ceil(l+m)):(this._cacheContext.setTransform(1,0,0,1,0,0),this._cacheContext.clearRect(0,0,o.width,o.height)),n=a.x/2,s=a.y/2,this.cacheTranslationX=Math.round(o.width/2-n)+n,this.cacheTranslationY=Math.round(o.height/2-s)+s,this.cacheWidth=h,this.cacheHeight=l,this._cacheContext.translate(this.cacheTranslationX,this.cacheTranslationY),this._cacheContext.scale(u,f),this.zoomX=u,this.zoomY=f,!0):!1},setOptions:function(t){this._setOptions(t),this._initGradient(t.fill,"fill"),this._initGradient(t.stroke,"stroke"),this._initPattern(t.fill,"fill"),this._initPattern(t.stroke,"stroke")},transform:function(t){var e=this.group&&!this.group._transformDone||this.group&&this.canvas&&t===this.canvas.contextTop,i=this.calcTransformMatrix(!e);t.transform(i[0],i[1],i[2],i[3],i[4],i[5])},toObject:function(t){var i=e.Object.NUM_FRACTION_DIGITS,r={type:this.type,version:e.version,originX:this.originX,originY:this.originY,left:n(this.left,i),top:n(this.top,i),width:n(this.width,i),height:n(this.height,i),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:n(this.strokeWidth,i),strokeDashArray:this.strokeDashArray?this.strokeDashArray.concat():this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeDashOffset:this.strokeDashOffset,strokeLineJoin:this.strokeLineJoin,strokeUniform:this.strokeUniform,strokeMiterLimit:n(this.strokeMiterLimit,i),scaleX:n(this.scaleX,i),scaleY:n(this.scaleY,i),angle:n(this.angle,i),flipX:this.flipX,flipY:this.flipY,opacity:n(this.opacity,i),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,backgroundColor:this.backgroundColor,fillRule:this.fillRule,paintFirst:this.paintFirst,globalCompositeOperation:this.globalCompositeOperation,skewX:n(this.skewX,i),skewY:n(this.skewY,i)};return this.clipPath&&!this.clipPath.excludeFromExport&&(r.clipPath=this.clipPath.toObject(t),r.clipPath.inverted=this.clipPath.inverted,r.clipPath.absolutePositioned=this.clipPath.absolutePositioned),e.util.populateWithProperties(this,r,t),this.includeDefaultValues||(r=this._removeDefaultValues(r)),r},toDatalessObject:function(t){return this.toObject(t)},_removeDefaultValues:function(t){var i=e.util.getKlass(t.type).prototype,r=i.stateProperties;return r.forEach(function(e){"left"!==e&&"top"!==e&&(t[e]===i[e]&&delete t[e],Array.isArray(t[e])&&Array.isArray(i[e])&&0===t[e].length&&0===i[e].length&&delete t[e])}),t},toString:function(){return"#<fabric."+s(this.type)+">"},getObjectScaling:function(){if(!this.group)return{scaleX:this.scaleX,scaleY:this.scaleY};var t=e.util.qrDecompose(this.calcTransformMatrix());return{scaleX:Math.abs(t.scaleX),scaleY:Math.abs(t.scaleY)}},getTotalObjectScaling:function(){var t=this.getObjectScaling(),e=t.scaleX,i=t.scaleY;if(this.canvas){var r=this.canvas.getZoom(),n=this.canvas.getRetinaScaling();e*=r*n,i*=r*n}return{scaleX:e,scaleY:i}},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},_set:function(t,i){var r="scaleX"===t||"scaleY"===t,n=this[t]!==i,s=!1;return r&&(i=this._constrainScale(i)),"scaleX"===t&&0>i?(this.flipX=!this.flipX,i*=-1):"scaleY"===t&&0>i?(this.flipY=!this.flipY,i*=-1):"shadow"!==t||!i||i instanceof e.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",i):i=new e.Shadow(i),this[t]=i,n&&(s=this.group&&this.group.isOnACache(),this.cacheProperties.indexOf(t)>-1?(this.dirty=!0,s&&this.group.set("dirty",!0)):s&&this.stateProperties.indexOf(t)>-1&&this.group.set("dirty",!0)),this},setOnGroup:function(){},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:e.iMatrix.concat()},isNotVisible:function(){return 0===this.opacity||!this.width&&!this.height&&0===this.strokeWidth||!this.visible},render:function(t){this.isNotVisible()||(!this.canvas||!this.canvas.skipOffscreen||this.group||this.isOnScreen())&&(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),this.transform(t),this._setOpacity(t),this._setShadow(t,this),this.shouldCache()?(this.renderCache(),this.drawCacheOnCanvas(t)):(this._removeCacheCanvas(),this.dirty=!1,this.drawObject(t),this.objectCaching&&this.statefullCache&&this.saveState({propertySet:"cacheProperties"})),t.restore())},renderCache:function(t){t=t||{},this._cacheCanvas&&this._cacheContext||this._createCacheCanvas(),this.isCacheDirty()&&(this.statefullCache&&this.saveState({propertySet:"cacheProperties"}),this.drawObject(this._cacheContext,t.forClipping),this.dirty=!1)},_removeCacheCanvas:function(){this._cacheCanvas=null,this._cacheContext=null,this.cacheWidth=0,this.cacheHeight=0},hasStroke:function(){return this.stroke&&"transparent"!==this.stroke&&0!==this.strokeWidth},hasFill:function(){return this.fill&&"transparent"!==this.fill},needsItsOwnCache:function(){return"stroke"===this.paintFirst&&this.hasFill()&&this.hasStroke()&&"object"==typeof this.shadow?!0:this.clipPath?!0:!1},shouldCache:function(){return this.ownCaching=this.needsItsOwnCache()||this.objectCaching&&(!this.group||!this.group.isOnACache()),this.ownCaching},willDrawShadow:function(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)},drawClipPathOnCache:function(t,i){if(t.save(),t.globalCompositeOperation=i.inverted?"destination-out":"destination-in",i.absolutePositioned){var r=e.util.invertTransform(this.calcTransformMatrix());t.transform(r[0],r[1],r[2],r[3],r[4],r[5])}i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},drawObject:function(t,e){var i=this.fill,r=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t,this.clipPath),this.fill=i,this.stroke=r},_drawClipPath:function(t,e){e&&(e.canvas=this.canvas,e.shouldCache(),e._transformDone=!0,e.renderCache({forClipping:!0}),this.drawClipPathOnCache(t,e))},drawCacheOnCanvas:function(t){t.scale(1/this.zoomX,1/this.zoomY),t.drawImage(this._cacheCanvas,-this.cacheTranslationX,-this.cacheTranslationY)},isCacheDirty:function(t){if(this.isNotVisible())return!1;if(this._cacheCanvas&&this._cacheContext&&!t&&this._updateCacheCanvas())return!0;if(this.dirty||this.clipPath&&this.clipPath.absolutePositioned||this.statefullCache&&this.hasStateChanged("cacheProperties")){if(this._cacheCanvas&&this._cacheContext&&!t){var e=this.cacheWidth/this.zoomX,i=this.cacheHeight/this.zoomY;this._cacheContext.clearRect(-e/2,-i/2,e,i)}return!0}return!1},_renderBackground:function(t){if(this.backgroundColor){var e=this._getNonTransformedDimensions();t.fillStyle=this.backgroundColor,t.fillRect(-e.x/2,-e.y/2,e.x,e.y),this._removeShadow(t)}},_setOpacity:function(t){this.group&&!this.group._transformDone?t.globalAlpha=this.getObjectOpacity():t.globalAlpha*=this.opacity},_setStrokeStyles:function(t,e){var i=e.stroke;i&&(t.lineWidth=e.strokeWidth,t.lineCap=e.strokeLineCap,t.lineDashOffset=e.strokeDashOffset,t.lineJoin=e.strokeLineJoin,t.miterLimit=e.strokeMiterLimit,i.toLive?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?this._applyPatternForTransformedGradient(t,i):(t.strokeStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,i)):t.strokeStyle=e.stroke)},_setFillStyles:function(t,e){var i=e.fill;i&&(i.toLive?(t.fillStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,e.fill)):t.fillStyle=i)},_setClippingProperties:function(t){t.globalAlpha=1,t.strokeStyle="transparent",t.fillStyle="#000000"},_setLineDash:function(t,e){e&&0!==e.length&&(1&e.length&&e.push.apply(e,e),t.setLineDash(e))},_renderControls:function(t,i){var r,n,s,a=this.getViewportTransform(),c=this.calcTransformMatrix();i=i||{},n="undefined"!=typeof i.hasBorders?i.hasBorders:this.hasBorders,s="undefined"!=typeof i.hasControls?i.hasControls:this.hasControls,c=e.util.multiplyTransformMatrices(a,c),r=e.util.qrDecompose(c),t.save(),t.translate(r.translateX,r.translateY),t.lineWidth=1*this.borderScaleFactor,this.group||(t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1),this.flipX&&(r.angle-=180),t.rotate(o(this.group?r.angle:this.angle)),i.forActiveSelection||this.group?n&&this.drawBordersInGroup(t,r,i):n&&this.drawBorders(t,i),s&&this.drawControls(t,i),t.restore()},_setShadow:function(t){if(this.shadow){var i,r=this.shadow,n=this.canvas,s=n&&n.viewportTransform[0]||1,o=n&&n.viewportTransform[3]||1;i=r.nonScaling?{scaleX:1,scaleY:1}:this.getObjectScaling(),n&&n._isRetinaScaling()&&(s*=e.devicePixelRatio,o*=e.devicePixelRatio),t.shadowColor=r.color,t.shadowBlur=r.blur*e.browserShadowBlurConstant*(s+o)*(i.scaleX+i.scaleY)/4,t.shadowOffsetX=r.offsetX*s*i.scaleX,t.shadowOffsetY=r.offsetY*o*i.scaleY}},_removeShadow:function(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)},_applyPatternGradientTransform:function(t,e){if(!e||!e.toLive)return{offsetX:0,offsetY:0};var i=e.gradientTransform||e.patternTransform,r=-this.width/2+e.offsetX||0,n=-this.height/2+e.offsetY||0;return"percentage"===e.gradientUnits?t.transform(this.width,0,0,this.height,r,n):t.transform(1,0,0,1,r,n),i&&t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),{offsetX:r,offsetY:n}},_renderPaintInOrder:function(t){"stroke"===this.paintFirst?(this._renderStroke(t),this._renderFill(t)):(this._renderFill(t),this._renderStroke(t))},_render:function(){},_renderFill:function(t){this.fill&&(t.save(),this._setFillStyles(t,this),"evenodd"===this.fillRule?t.fill("evenodd"):t.fill(),t.restore())},_renderStroke:function(t){if(this.stroke&&0!==this.strokeWidth){if(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this.strokeUniform&&this.group){var e=this.getObjectScaling();t.scale(1/e.scaleX,1/e.scaleY)}else this.strokeUniform&&t.scale(1/this.scaleX,1/this.scaleY);this._setLineDash(t,this.strokeDashArray),this._setStrokeStyles(t,this),t.stroke(),t.restore()}},_applyPatternForTransformedGradient:function(t,i){var r,n=this._limitCacheSize(this._getCacheCanvasDimensions()),s=e.util.createCanvasElement(),o=this.canvas.getRetinaScaling(),a=n.x/this.scaleX/o,c=n.y/this.scaleY/o;s.width=a,s.height=c,r=s.getContext("2d"),r.beginPath(),r.moveTo(0,0),r.lineTo(a,0),r.lineTo(a,c),r.lineTo(0,c),r.closePath(),r.translate(a/2,c/2),r.scale(n.zoomX/this.scaleX/o,n.zoomY/this.scaleY/o),this._applyPatternGradientTransform(r,i),r.fillStyle=i.toLive(t),r.fill(),t.translate(-this.width/2-this.strokeWidth/2,-this.height/2-this.strokeWidth/2),t.scale(o*this.scaleX/n.zoomX,o*this.scaleY/n.zoomY),t.strokeStyle=r.createPattern(s,"no-repeat")},_findCenterFromElement:function(){return{x:this.left+this.width/2,y:this.top+this.height/2}},_assignTransformMatrixProps:function(){if(this.transformMatrix){var t=e.util.qrDecompose(this.transformMatrix);this.flipX=!1,this.flipY=!1,this.set("scaleX",t.scaleX),this.set("scaleY",t.scaleY),this.angle=t.angle,this.skewX=t.skewX,this.skewY=0}},_removeTransformMatrix:function(t){var i=this._findCenterFromElement();this.transformMatrix&&(this._assignTransformMatrixProps(),i=e.util.transformPoint(i,this.transformMatrix)),this.transformMatrix=null,t&&(this.scaleX*=t.scaleX,this.scaleY*=t.scaleY,this.cropX=t.cropX,this.cropY=t.cropY,i.x+=t.offsetLeft,i.y+=t.offsetTop,this.width=t.width,this.height=t.height),this.setPositionByOrigin(i,"center","center")},clone:function(t,i){var r=this.toObject(i);this.constructor.fromObject?this.constructor.fromObject(r,t):e.Object._fromObject("Object",r,t)},cloneAsImage:function(t,i){var r=this.toCanvasElement(i);return t&&t(new e.Image(r)),this},toCanvasElement:function(t){t||(t={});var i=e.util,r=i.saveObjectTransform(this),n=this.group,s=this.shadow,o=Math.abs,a=(t.multiplier||1)*(t.enableRetinaScaling?e.devicePixelRatio:1);delete this.group,t.withoutTransform&&i.resetObjectTransform(this),t.withoutShadow&&(this.shadow=null);var c,h,l,u,f=e.util.createCanvasElement(),d=this.getBoundingRect(!0,!0),g=this.shadow,v={x:0,y:0};g&&(h=g.blur,c=g.nonScaling?{scaleX:1,scaleY:1}:this.getObjectScaling(),v.x=2*Math.round(o(g.offsetX)+h)*o(c.scaleX),v.y=2*Math.round(o(g.offsetY)+h)*o(c.scaleY)),l=d.width+v.x,u=d.height+v.y,f.width=Math.ceil(l),f.height=Math.ceil(u);var p=new e.StaticCanvas(f,{enableRetinaScaling:!1,renderOnAddRemove:!1,skipOffscreen:!1});"jpeg"===t.format&&(p.backgroundColor="#fff"),this.setPositionByOrigin(new e.Point(p.width/2,p.height/2),"center","center");var m=this.canvas;p.add(this);var b=p.toCanvasElement(a||1,t);return this.shadow=s,this.set("canvas",m),n&&(this.group=n),this.set(r).setCoords(),p._objects=[],p.dispose(),p=null,b},toDataURL:function(t){return t||(t={}),e.util.toDataURL(this.toCanvasElement(t),t.format||"png",t.quality||1)},isType:function(t){return arguments.length>1?Array.from(arguments).includes(this.type):this.type===t},complexity:function(){return 1},toJSON:function(t){return this.toObject(t)},rotate:function(t){var e=("center"!==this.originX||"center"!==this.originY)&&this.centeredRotation;return e&&this._setOriginToCenter(),this.set("angle",t),e&&this._resetOrigin(),this},centerH:function(){return this.canvas&&this.canvas.centerObjectH(this),this},viewportCenterH:function(){return this.canvas&&this.canvas.viewportCenterObjectH(this),this},centerV:function(){return this.canvas&&this.canvas.centerObjectV(this),this},viewportCenterV:function(){return this.canvas&&this.canvas.viewportCenterObjectV(this),this},center:function(){return this.canvas&&this.canvas.centerObject(this),this},viewportCenter:function(){return this.canvas&&this.canvas.viewportCenterObject(this),this},getLocalPointer:function(t,i){i=i||this.canvas.getPointer(t);var r=new e.Point(i.x,i.y),n=this._getLeftTopCoords();return this.angle&&(r=e.util.rotatePoint(r,n,o(-this.angle))),{x:r.x-n.x,y:r.y-n.y}},_setupCompositeOperation:function(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)},dispose:function(){e.runningAnimations&&e.runningAnimations.cancelByTarget(this)}}),e.util.createAccessors&&e.util.createAccessors(e.Object),i(e.Object.prototype,e.Observable),e.Object.NUM_FRACTION_DIGITS=2,e.Object.ENLIVEN_PROPS=["clipPath"],e.Object._fromObject=function(t,i,n,s){var o=e[t];i=r(i,!0),e.util.enlivenPatterns([i.fill,i.stroke],function(t){"undefined"!=typeof t[0]&&(i.fill=t[0]),"undefined"!=typeof t[1]&&(i.stroke=t[1]),e.util.enlivenObjectEnlivables(i,i,function(){var t=s?new o(i[s],i):new o(i);n&&n(t)})})},e.Object.__uid=0)}("undefined"!=typeof exports?exports:this);!function(){var t=fabric.util.degreesToRadians,e={left:-.5,center:0,right:.5},n={top:-.5,center:0,bottom:.5};fabric.util.object.extend(fabric.Object.prototype,{translateToGivenOrigin:function(t,r,i,o,s){var a,c,u,l=t.x,h=t.y;return"string"==typeof r?r=e[r]:r-=.5,"string"==typeof o?o=e[o]:o-=.5,a=o-r,"string"==typeof i?i=n[i]:i-=.5,"string"==typeof s?s=n[s]:s-=.5,c=s-i,(a||c)&&(u=this._getTransformedDimensions(),l=t.x+a*u.x,h=t.y+c*u.y),new fabric.Point(l,h)},translateToCenterPoint:function(e,n,r){var i=this.translateToGivenOrigin(e,n,r,"center","center");return this.angle?fabric.util.rotatePoint(i,e,t(this.angle)):i},translateToOriginPoint:function(e,n,r){var i=this.translateToGivenOrigin(e,"center","center",n,r);return this.angle?fabric.util.rotatePoint(i,e,t(this.angle)):i},getCenterPoint:function(){var t=new fabric.Point(this.left,this.top);return this.translateToCenterPoint(t,this.originX,this.originY)},getPointByOrigin:function(t,e){var n=this.getCenterPoint();return this.translateToOriginPoint(n,t,e)},toLocalPoint:function(e,n,r){var i,o,s=this.getCenterPoint();return i="undefined"!=typeof n&&"undefined"!=typeof r?this.translateToGivenOrigin(s,"center","center",n,r):new fabric.Point(this.left,this.top),o=new fabric.Point(e.x,e.y),this.angle&&(o=fabric.util.rotatePoint(o,s,-t(this.angle))),o.subtractEquals(i)},setPositionByOrigin:function(t,e,n){var r=this.translateToCenterPoint(t,e,n),i=this.translateToOriginPoint(r,this.originX,this.originY);this.set("left",i.x),this.set("top",i.y)},adjustPosition:function(n){var r,i,o=t(this.angle),s=this.getScaledWidth(),a=fabric.util.cos(o)*s,c=fabric.util.sin(o)*s;r="string"==typeof this.originX?e[this.originX]:this.originX-.5,i="string"==typeof n?e[n]:n-.5,this.left+=a*(i-r),this.top+=c*(i-r),this.setCoords(),this.originX=n},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var t=this.getCenterPoint();this.originX="center",this.originY="center",this.left=t.x,this.top=t.y},_resetOrigin:function(){var t=this.translateToOriginPoint(this.getCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=t.x,this.top=t.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getCenterPoint(),"left","top")}})}();!function(){function t(t){return[new fabric.Point(t.tl.x,t.tl.y),new fabric.Point(t.tr.x,t.tr.y),new fabric.Point(t.br.x,t.br.y),new fabric.Point(t.bl.x,t.bl.y)]}var e=fabric.util,r=e.degreesToRadians,n=e.multiplyTransformMatrices,i=e.transformPoint;e.object.extend(fabric.Object.prototype,{oCoords:null,aCoords:null,lineCoords:null,ownMatrixCache:null,matrixCache:null,controls:{},_getCoords:function(t,e){return e?t?this.calcACoords():this.calcLineCoords():(this.aCoords&&this.lineCoords||this.setCoords(!0),t?this.aCoords:this.lineCoords)},getCoords:function(e,r){return t(this._getCoords(e,r))},intersectsWithRect:function(t,e,r,n){var i=this.getCoords(r,n),o=fabric.Intersection.intersectPolygonRectangle(i,t,e);return"Intersection"===o.status},intersectsWithObject:function(t,e,r){var n=fabric.Intersection.intersectPolygonPolygon(this.getCoords(e,r),t.getCoords(e,r));return"Intersection"===n.status||t.isContainedWithinObject(this,e,r)||this.isContainedWithinObject(t,e,r)},isContainedWithinObject:function(t,e,r){for(var n=this.getCoords(e,r),i=e?t.aCoords:t.lineCoords,o=0,s=t._getImageLines(i);4>o;o++)if(!t.containsPoint(n[o],s))return!1;return!0},isContainedWithinRect:function(t,e,r,n){var i=this.getBoundingRect(r,n);return i.left>=t.x&&i.left+i.width<=e.x&&i.top>=t.y&&i.top+i.height<=e.y},containsPoint:function(t,e,r,n){var i=this._getCoords(r,n),e=e||this._getImageLines(i),o=this._findCrossPoints(t,e);return 0!==o&&o%2===1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,r=this.canvas.vptCoords.br,n=this.getCoords(!0,t);return n.some(function(t){return t.x<=r.x&&t.x>=e.x&&t.y<=r.y&&t.y>=e.y})?!0:this.intersectsWithRect(e,r,!0,t)?!0:this._containsCenterOfCanvas(e,r,t)},_containsCenterOfCanvas:function(t,e,r){var n={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return this.containsPoint(n,null,!0,r)?!0:!1},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,r=this.canvas.vptCoords.br;if(this.intersectsWithRect(e,r,!0,t))return!0;var n=this.getCoords(!0,t).every(function(t){return(t.x>=r.x||t.x<=e.x)&&(t.y>=r.y||t.y<=e.y)});return n&&this._containsCenterOfCanvas(e,r,t)},_getImageLines:function(t){var e={topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}};return e},_findCrossPoints:function(t,e){var r,n,i,o,s,a,c=0;for(var u in e)if(a=e[u],!(a.o.y<t.y&&a.d.y<t.y||a.o.y>=t.y&&a.d.y>=t.y||(a.o.x===a.d.x&&a.o.x>=t.x?s=a.o.x:(r=0,n=(a.d.y-a.o.y)/(a.d.x-a.o.x),i=t.y-r*t.x,o=a.o.y-n*a.o.x,s=-(i-o)/(r-n)),s>=t.x&&(c+=1),2!==c)))break;return c},getBoundingRect:function(t,r){var n=this.getCoords(t,r);return e.makeBoundingBoxFromPoints(n)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)<this.minScaleLimit?0>t?-this.minScaleLimit:this.minScaleLimit:0===t?1e-4:t},scale:function(t){return this._set("scaleX",t),this._set("scaleY",t),this.setCoords()},scaleToWidth:function(t,e){var r=this.getBoundingRect(e).width/this.getScaledWidth();return this.scale(t/this.width/r)},scaleToHeight:function(t,e){var r=this.getBoundingRect(e).height/this.getScaledHeight();return this.scale(t/this.height/r)},calcLineCoords:function(){var t=this.getViewportTransform(),n=this.padding,o=r(this.angle),s=e.cos(o),a=e.sin(o),c=s*n,u=a*n,l=c+u,h=c-u,f=this.calcACoords(),d={tl:i(f.tl,t),tr:i(f.tr,t),bl:i(f.bl,t),br:i(f.br,t)};return n&&(d.tl.x-=h,d.tl.y-=l,d.tr.x+=l,d.tr.y-=h,d.bl.x-=l,d.bl.y+=h,d.br.x+=h,d.br.y+=l),d},calcOCoords:function(){var t=this._calcRotateMatrix(),e=this._calcTranslateMatrix(),r=this.getViewportTransform(),i=n(r,e),o=n(i,t),o=n(o,[1/r[0],0,0,1/r[3],0,0]),s=this._calculateCurrentDimensions(),a={};return this.forEachControl(function(t,e,r){a[e]=t.positionHandler(s,o,r)}),a},calcACoords:function(){var t=this._calcRotateMatrix(),e=this._calcTranslateMatrix(),r=n(e,t),o=this._getTransformedDimensions(),s=o.x/2,a=o.y/2;return{tl:i({x:-s,y:-a},r),tr:i({x:s,y:-a},r),bl:i({x:-s,y:a},r),br:i({x:s,y:a},r)}},setCoords:function(t){return this.aCoords=this.calcACoords(),this.lineCoords=this.group?this.aCoords:this.calcLineCoords(),t?this:(this.oCoords=this.calcOCoords(),this._setCornerCoords&&this._setCornerCoords(),this)},_calcRotateMatrix:function(){return e.calcRotateMatrix(this)},_calcTranslateMatrix:function(){var t=this.getCenterPoint();return[1,0,0,1,t.x,t.y]},transformMatrixKey:function(t){var e="_",r="";return!t&&this.group&&(r=this.group.transformMatrixKey(t)+e),r+this.top+e+this.left+e+this.scaleX+e+this.scaleY+e+this.skewX+e+this.skewY+e+this.angle+e+this.originX+e+this.originY+e+this.width+e+this.height+e+this.strokeWidth+this.flipX+this.flipY},calcTransformMatrix:function(t){var e=this.calcOwnMatrix();if(t||!this.group)return e;var r=this.transformMatrixKey(t),i=this.matrixCache||(this.matrixCache={});return i.key===r?i.value:(this.group&&(e=n(this.group.calcTransformMatrix(!1),e)),i.key=r,i.value=e,e)},calcOwnMatrix:function(){var t=this.transformMatrixKey(!0),r=this.ownMatrixCache||(this.ownMatrixCache={});if(r.key===t)return r.value;var n=this._calcTranslateMatrix(),i={angle:this.angle,translateX:n[4],translateY:n[5],scaleX:this.scaleX,scaleY:this.scaleY,skewX:this.skewX,skewY:this.skewY,flipX:this.flipX,flipY:this.flipY};return r.key=t,r.value=e.composeMatrix(i),r.value},_getNonTransformedDimensions:function(){var t=this.strokeWidth,e=this.width+t,r=this.height+t;return{x:e,y:r}},_getTransformedDimensions:function(t,r){"undefined"==typeof t&&(t=this.skewX),"undefined"==typeof r&&(r=this.skewY);var n,i,o,s=0===t&&0===r;if(this.strokeUniform?(i=this.width,o=this.height):(n=this._getNonTransformedDimensions(),i=n.x,o=n.y),s)return this._finalizeDimensions(i*this.scaleX,o*this.scaleY);var a=e.sizeAfterTransform(i,o,{scaleX:this.scaleX,scaleY:this.scaleY,skewX:t,skewY:r});return this._finalizeDimensions(a.x,a.y)},_finalizeDimensions:function(t,e){return this.strokeUniform?{x:t+this.strokeWidth,y:e+this.strokeWidth}:{x:t,y:e}},_calculateCurrentDimensions:function(){var t=this.getViewportTransform(),e=this._getTransformedDimensions(),r=i(e,t,!0);return r.scalarAdd(2*this.padding)}})}();fabric.util.object.extend(fabric.Object.prototype,{sendToBack:function(){return this.group?fabric.StaticCanvas.prototype.sendToBack.call(this.group,this):this.canvas&&this.canvas.sendToBack(this),this},bringToFront:function(){return this.group?fabric.StaticCanvas.prototype.bringToFront.call(this.group,this):this.canvas&&this.canvas.bringToFront(this),this},sendBackwards:function(t){return this.group?fabric.StaticCanvas.prototype.sendBackwards.call(this.group,this,t):this.canvas&&this.canvas.sendBackwards(this,t),this},bringForward:function(t){return this.group?fabric.StaticCanvas.prototype.bringForward.call(this.group,this,t):this.canvas&&this.canvas.bringForward(this,t),this},moveTo:function(t){return this.group&&"activeSelection"!==this.group.type?fabric.StaticCanvas.prototype.moveTo.call(this.group,this,t):this.canvas&&this.canvas.moveTo(this,t),this}});!function(){function t(t,e){if(e){if(e.toLive)return t+": url(#SVGID_"+e.id+"); ";var n=new fabric.Color(e),r=t+": "+n.toRgb()+"; ",i=n.getAlpha();return 1!==i&&(r+=t+"-opacity: "+i.toString()+"; "),r}return t+": none; "}var e=fabric.util.toFixed;fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(e){var n=this.fillRule?this.fillRule:"nonzero",r=this.strokeWidth?this.strokeWidth:"0",i=this.strokeDashArray?this.strokeDashArray.join(" "):"none",o=this.strokeDashOffset?this.strokeDashOffset:"0",s=this.strokeLineCap?this.strokeLineCap:"butt",a=this.strokeLineJoin?this.strokeLineJoin:"miter",c=this.strokeMiterLimit?this.strokeMiterLimit:"4",u="undefined"!=typeof this.opacity?this.opacity:"1",l=this.visible?"":" visibility: hidden;",h=e?"":this.getSvgFilter(),f=t("fill",this.fill),d=t("stroke",this.stroke);return[d,"stroke-width: ",r,"; ","stroke-dasharray: ",i,"; ","stroke-linecap: ",s,"; ","stroke-dashoffset: ",o,"; ","stroke-linejoin: ",a,"; ","stroke-miterlimit: ",c,"; ",f,"fill-rule: ",n,"; ","opacity: ",u,";",h,l].join("")},getSvgSpanStyles:function(e,n){var r="; ",i=e.fontFamily?"font-family: "+(-1===e.fontFamily.indexOf("'")&&-1===e.fontFamily.indexOf('"')?"'"+e.fontFamily+"'":e.fontFamily)+r:"",o=e.strokeWidth?"stroke-width: "+e.strokeWidth+r:"",i=i,s=e.fontSize?"font-size: "+e.fontSize+"px"+r:"",a=e.fontStyle?"font-style: "+e.fontStyle+r:"",c=e.fontWeight?"font-weight: "+e.fontWeight+r:"",u=e.fill?t("fill",e.fill):"",l=e.stroke?t("stroke",e.stroke):"",h=this.getSvgTextDecoration(e),f=e.deltaY?"baseline-shift: "+-e.deltaY+"; ":"";return h&&(h="text-decoration: "+h+r),[l,o,i,s,a,c,h,u,f,n?"white-space: pre; ":""].join("")},getSvgTextDecoration:function(t){return["overline","underline","line-through"].filter(function(e){return t[e.replace("-","")]}).join(" ")},getSvgFilter:function(){return this.shadow?"filter: url(#SVGID_"+this.shadow.id+");":""},getSvgCommons:function(){return[this.id?'id="'+this.id+'" ':"",this.clipPath?'clip-path="url(#'+this.clipPath.clipPathId+')" ':""].join("")},getSvgTransform:function(t,e){var n=t?this.calcTransformMatrix():this.calcOwnMatrix(),r='transform="'+fabric.util.matrixToSVG(n);return r+(e||"")+'" '},_setSVGBg:function(t){if(this.backgroundColor){var n=fabric.Object.NUM_FRACTION_DIGITS;t.push("		<rect ",this._getFillAttributes(this.backgroundColor),' x="',e(-this.width/2,n),'" y="',e(-this.height/2,n),'" width="',e(this.width,n),'" height="',e(this.height,n),'"></rect>\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"	"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){e=e||{};var n=e.reviver,r=e.additionalTransform||"",i=[this.getSvgTransform(!0,r),this.getSvgCommons()].join(""),o=t.indexOf("COMMON_PARTS");return t[o]=i,n?n(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){e=e||{};var n,r,i=e.noStyle,o=e.reviver,s=i?"":'style="'+this.getSvgStyles()+'" ',a=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",c=this.clipPath,u=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",l=c&&c.absolutePositioned,h=this.stroke,f=this.fill,d=this.shadow,v=[],g=t.indexOf("COMMON_PARTS"),p=e.additionalTransform;return c&&(c.clipPathId="CLIPPATH_"+fabric.Object.__uid++,r='<clipPath id="'+c.clipPathId+'" >\n'+c.toClipPathSVG(o)+"</clipPath>\n"),l&&v.push("<g ",a,this.getSvgCommons()," >\n"),v.push("<g ",this.getSvgTransform(!1),l?"":a+this.getSvgCommons()," >\n"),n=[s,u,i?"":this.addPaintOrder()," ",p?'transform="'+p+'" ':""].join(""),t[g]=n,f&&f.toLive&&v.push(f.toSVG(this)),h&&h.toLive&&v.push(h.toSVG(this)),d&&v.push(d.toSVG(this)),c&&v.push(r),v.push(t.join("")),v.push("</g>\n"),l&&v.push("</g>\n"),o?o(v.join("")):v.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}();!function(){function t(t,e,n){var i={},o=!0;n.forEach(function(e){i[e]=t[e]}),r(t[e],i,o)}function e(t,r,n){if(t===r)return!0;if(Array.isArray(t)){if(!Array.isArray(r)||t.length!==r.length)return!1;for(var i=0,o=t.length;o>i;i++)if(!e(t[i],r[i]))return!1;return!0}if(t&&"object"==typeof t){var s,a=Object.keys(t);if(!r||"object"!=typeof r||!n&&a.length!==Object.keys(r).length)return!1;for(var i=0,o=a.length;o>i;i++)if(s=a[i],"canvas"!==s&&"group"!==s&&!e(t[s],r[s]))return!1;return!0}}var r=fabric.util.object.extend,n="stateProperties";fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(t){t=t||n;var r="_"+t;return Object.keys(this[r]).length<this[t].length?!0:!e(this[r],this,!0)},saveState:function(e){var r=e&&e.propertySet||n,i="_"+r;return this[i]?(t(this,i,this[r]),e&&e.stateProperties&&t(this,i,e.stateProperties),this):this.setupState(e)},setupState:function(t){t=t||{};var e=t.propertySet||n;return t.propertySet=e,this["_"+e]={},this.saveState(t),this}})}();!function(){var t=fabric.util.degreesToRadians;fabric.util.object.extend(fabric.Object.prototype,{_findTargetCorner:function(t,e){if(!this.hasControls||this.group||!this.canvas||this.canvas._activeObject!==this)return!1;var r,n,i,o=t.x,s=t.y,a=Object.keys(this.oCoords),c=a.length-1;for(this.__corner=0;c>=0;c--)if(i=a[c],this.isControlVisible(i)&&(n=this._getImageLines(e?this.oCoords[i].touchCorner:this.oCoords[i].corner),r=this._findCrossPoints({x:o,y:s},n),0!==r&&r%2===1))return this.__corner=i,i;return!1},forEachControl:function(t){for(var e in this.controls)t(this.controls[e],e,this)},_setCornerCoords:function(){var t=this.oCoords;for(var e in t){var r=this.controls[e];t[e].corner=r.calcCornerCoords(this.angle,this.cornerSize,t[e].x,t[e].y,!1),t[e].touchCorner=r.calcCornerCoords(this.angle,this.touchCornerSize,t[e].x,t[e].y,!0)}},drawSelectionBackground:function(e){if(!this.selectionBackgroundColor||this.canvas&&!this.canvas.interactive||this.canvas&&this.canvas._activeObject!==this)return this;e.save();var r=this.getCenterPoint(),n=this._calculateCurrentDimensions(),i=this.canvas.viewportTransform;return e.translate(r.x,r.y),e.scale(1/i[0],1/i[3]),e.rotate(t(this.angle)),e.fillStyle=this.selectionBackgroundColor,e.fillRect(-n.x/2,-n.y/2,n.x,n.y),e.restore(),this},drawBorders:function(t,e){e=e||{};var r=this._calculateCurrentDimensions(),n=this.borderScaleFactor,i=r.x+n,o=r.y+n,s="undefined"!=typeof e.hasControls?e.hasControls:this.hasControls,a=!1;return t.save(),t.strokeStyle=e.borderColor||this.borderColor,this._setLineDash(t,e.borderDashArray||this.borderDashArray),t.strokeRect(-i/2,-o/2,i,o),s&&(t.beginPath(),this.forEachControl(function(e,r,n){e.withConnection&&e.getVisibility(n,r)&&(a=!0,t.moveTo(e.x*i,e.y*o),t.lineTo(e.x*i+e.offsetX,e.y*o+e.offsetY))}),a&&t.stroke()),t.restore(),this},drawBordersInGroup:function(t,e,r){r=r||{};var n=fabric.util.sizeAfterTransform(this.width,this.height,e),i=this.strokeWidth,o=this.strokeUniform,s=this.borderScaleFactor,a=n.x+i*(o?this.canvas.getZoom():e.scaleX)+s,c=n.y+i*(o?this.canvas.getZoom():e.scaleY)+s;return t.save(),this._setLineDash(t,r.borderDashArray||this.borderDashArray),t.strokeStyle=r.borderColor||this.borderColor,t.strokeRect(-a/2,-c/2,a,c),t.restore(),this},drawControls:function(t,e){e=e||{},t.save();var r,n,i=this.canvas.getRetinaScaling();return t.setTransform(i,0,0,i,0,0),t.strokeStyle=t.fillStyle=e.cornerColor||this.cornerColor,this.transparentCorners||(t.strokeStyle=e.cornerStrokeColor||this.cornerStrokeColor),this._setLineDash(t,e.cornerDashArray||this.cornerDashArray),this.setCoords(),this.group&&(r=this.group.calcTransformMatrix()),this.forEachControl(function(i,o,s){n=s.oCoords[o],i.getVisibility(s,o)&&(r&&(n=fabric.util.transformPoint(n,r)),i.render(t,n.x,n.y,e,s))}),t.restore(),this},isControlVisible:function(t){return this.controls[t]&&this.controls[t].getVisibility(this,t)},setControlVisible:function(t,e){return this._controlsVisibility||(this._controlsVisibility={}),this._controlsVisibility[t]=e,this},setControlsVisibility:function(t){t||(t={});for(var e in t)this.setControlVisible(e,t[e]);return this},onDeselect:function(){},onSelect:function(){}})}();fabric.util.object.extend(fabric.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(t,e){e=e||{};var i=function(){},r=e.onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.left,endValue:this.getCenterPoint().x,duration:this.FX_DURATION,onChange:function(e){t.set("left",e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxCenterObjectV:function(t,e){e=e||{};var i=function(){},r=e.onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.top,endValue:this.getCenterPoint().y,duration:this.FX_DURATION,onChange:function(e){t.set("top",e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxRemove:function(t,e){e=e||{};var i=function(){},r=e.onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.opacity,endValue:0,duration:this.FX_DURATION,onChange:function(e){t.set("opacity",e),s.requestRenderAll(),n()},onComplete:function(){s.remove(t),r()}})}}),fabric.util.object.extend(fabric.Object.prototype,{animate:function(){if(arguments[0]&&"object"==typeof arguments[0]){var t,e,i=[],r=[];for(t in arguments[0])i.push(t);for(var n=0,s=i.length;s>n;n++)t=i[n],e=n!==s-1,r.push(this._animate(t,arguments[0][t],arguments[1],e));return r}return this._animate.apply(this,arguments)},_animate:function(t,e,i,r){var n,s=this;e=e.toString(),i=i?fabric.util.object.clone(i):{},~t.indexOf(".")&&(n=t.split("."));var o=s.colorProperties.indexOf(t)>-1||n&&s.colorProperties.indexOf(n[1])>-1,a=n?this.get(n[0])[n[1]]:this.get(t);"from"in i||(i.from=a),o||(e=~e.indexOf("=")?a+parseFloat(e.replace("=","")):parseFloat(e));var c={target:this,startValue:i.from,endValue:e,byValue:i.by,easing:i.easing,duration:i.duration,abort:i.abort&&function(t,e,r){return i.abort.call(s,t,e,r)},onChange:function(e,o,a){n?s[n[0]][n[1]]=e:s.set(t,e),r||i.onChange&&i.onChange(e,o,a)},onComplete:function(t,e,n){r||(s.setCoords(),i.onComplete&&i.onComplete(t,e,n))}};return o?fabric.util.animateColor(c.startValue,c.endValue,c.duration,c):fabric.util.animate(c)}});!function(t){"use strict";function e(t,e){var r=t.origin,i=t.axis1,n=t.axis2,o=t.dimension,s=e.nearest,a=e.center,c=e.farthest;return function(){switch(this.get(r)){case s:return Math.min(this.get(i),this.get(n));case a:return Math.min(this.get(i),this.get(n))+.5*this.get(o);case c:return Math.max(this.get(i),this.get(n))}}}var r=t.fabric||(t.fabric={}),i=r.util.object.extend,n=r.util.object.clone,o={x1:1,x2:1,y1:1,y2:1};return r.Line?void r.warn("fabric.Line is already defined"):(r.Line=r.util.createClass(r.Object,{type:"line",x1:0,y1:0,x2:0,y2:0,cacheProperties:r.Object.prototype.cacheProperties.concat("x1","x2","y1","y2"),initialize:function(t,e){t||(t=[0,0,0,0]),this.callSuper("initialize",e),this.set("x1",t[0]),this.set("y1",t[1]),this.set("x2",t[2]),this.set("y2",t[3]),this._setWidthHeight(e)},_setWidthHeight:function(t){t||(t={}),this.width=Math.abs(this.x2-this.x1),this.height=Math.abs(this.y2-this.y1),this.left="left"in t?t.left:this._getLeftToOriginX(),this.top="top"in t?t.top:this._getTopToOriginY()},_set:function(t,e){return this.callSuper("_set",t,e),"undefined"!=typeof o[t]&&this._setWidthHeight(),this},_getLeftToOriginX:e({origin:"originX",axis1:"x1",axis2:"x2",dimension:"width"},{nearest:"left",center:"center",farthest:"right"}),_getTopToOriginY:e({origin:"originY",axis1:"y1",axis2:"y2",dimension:"height"},{nearest:"top",center:"center",farthest:"bottom"}),_render:function(t){t.beginPath();var e=this.calcLinePoints();t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.lineWidth=this.strokeWidth;var r=t.strokeStyle;t.strokeStyle=this.stroke||t.fillStyle,this.stroke&&this._renderStroke(t),t.strokeStyle=r},_findCenterFromElement:function(){return{x:(this.x1+this.x2)/2,y:(this.y1+this.y2)/2}},toObject:function(t){return i(this.callSuper("toObject",t),this.calcLinePoints())},_getNonTransformedDimensions:function(){var t=this.callSuper("_getNonTransformedDimensions");return"butt"===this.strokeLineCap&&(0===this.width&&(t.y-=this.strokeWidth),0===this.height&&(t.x-=this.strokeWidth)),t},calcLinePoints:function(){var t=this.x1<=this.x2?-1:1,e=this.y1<=this.y2?-1:1,r=t*this.width*.5,i=e*this.height*.5,n=t*this.width*-.5,o=e*this.height*-.5;return{x1:r,x2:n,y1:i,y2:o}},_toSVG:function(){var t=this.calcLinePoints();return["<line ","COMMON_PARTS",'x1="',t.x1,'" y1="',t.y1,'" x2="',t.x2,'" y2="',t.y2,'" />\n']}}),r.Line.ATTRIBUTE_NAMES=r.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),r.Line.fromElement=function(t,e,n){n=n||{};var o=r.parseAttributes(t,r.Line.ATTRIBUTE_NAMES),s=[o.x1||0,o.y1||0,o.x2||0,o.y2||0];e(new r.Line(s,i(o,n)))},void(r.Line.fromObject=function(t,e){function i(t){delete t.points,e&&e(t)}var o=n(t,!0);o.points=[t.x1,t.y1,t.x2,t.y2],r.Object._fromObject("Line",o,i,"points")}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";function e(t){return"radius"in t&&t.radius>=0}var r=t.fabric||(t.fabric={}),i=r.util.degreesToRadians;return r.Circle?void r.warn("fabric.Circle is already defined."):(r.Circle=r.util.createClass(r.Object,{type:"circle",radius:0,startAngle:0,endAngle:360,cacheProperties:r.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,e=0,n=0,o=(this.endAngle-this.startAngle)%360;if(0===o)t=["<circle ","COMMON_PARTS",'cx="'+e+'" cy="'+n+'" ','r="',this.radius,'" />\n'];else{var s=i(this.startAngle),a=i(this.endAngle),c=this.radius,u=r.util.cos(s)*c,l=r.util.sin(s)*c,h=r.util.cos(a)*c,f=r.util.sin(a)*c,d=o>180?"1":"0";t=['<path d="M '+u+" "+l," A "+c+" "+c," 0 ",+d+" 1"," "+h+" "+f,'" ',"COMMON_PARTS"," />\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,i(this.startAngle),i(this.endAngle),!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),r.Circle.ATTRIBUTE_NAMES=r.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),r.Circle.fromElement=function(t,i){var n=r.parseAttributes(t,r.Circle.ATTRIBUTE_NAMES);if(!e(n))throw new Error("value of `r` attribute is required and can not be negative");n.left=(n.left||0)-n.radius,n.top=(n.top||0)-n.radius,i(new r.Circle(n))},void(r.Circle.fromObject=function(t,e){r.Object._fromObject("Circle",t,e)}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={});return e.Triangle?void e.warn("fabric.Triangle is already defined"):(e.Triangle=e.util.createClass(e.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2,i=[-t+" "+e,"0 "+-e,t+" "+e].join(",");return["<polygon ","COMMON_PARTS",'points="',i,'" />']}}),void(e.Triangle.fromObject=function(t,i){return e.Object._fromObject("Triangle",t,i)}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=2*Math.PI;return e.Ellipse?void e.warn("fabric.Ellipse is already defined."):(e.Ellipse=e.util.createClass(e.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["<ellipse ","COMMON_PARTS",'cx="0" cy="0" ','rx="',this.rx,'" ry="',this.ry,'" />\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,i,!1),t.restore(),this._renderPaintInOrder(t)}}),e.Ellipse.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),e.Ellipse.fromElement=function(t,i){var r=e.parseAttributes(t,e.Ellipse.ATTRIBUTE_NAMES);r.left=(r.left||0)-r.rx,r.top=(r.top||0)-r.ry,i(new e.Ellipse(r))},void(e.Ellipse.fromObject=function(t,i){e.Object._fromObject("Ellipse",t,i)}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend;return e.Rect?void e.warn("fabric.Rect is already defined"):(e.Rect=e.util.createClass(e.Object,{stateProperties:e.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,r=this.width,n=this.height,s=-this.width/2,o=-this.height/2,a=0!==e||0!==i,c=.4477152502;t.beginPath(),t.moveTo(s+e,o),t.lineTo(s+r-e,o),a&&t.bezierCurveTo(s+r-c*e,o,s+r,o+c*i,s+r,o+i),t.lineTo(s+r,o+n-i),a&&t.bezierCurveTo(s+r,o+n-c*i,s+r-c*e,o+n,s+r-e,o+n),t.lineTo(s+e,o+n),a&&t.bezierCurveTo(s+c*e,o+n,s,o+n-c*i,s,o+n-i),t.lineTo(s,o+i),a&&t.bezierCurveTo(s,o+c*i,s+c*e,o,s+e,o),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){var t=-this.width/2,e=-this.height/2;return["<rect ","COMMON_PARTS",'x="',t,'" y="',e,'" rx="',this.rx,'" ry="',this.ry,'" width="',this.width,'" height="',this.height,'" />\n']}}),e.Rect.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),e.Rect.fromElement=function(t,r,n){if(!t)return r(null);n=n||{};var s=e.parseAttributes(t,e.Rect.ATTRIBUTE_NAMES);s.left=s.left||0,s.top=s.top||0,s.height=s.height||0,s.width=s.width||0;var o=new e.Rect(i(n?e.util.object.clone(n):{},s));o.visible=o.visible&&o.width>0&&o.height>0,r(o)},void(e.Rect.fromObject=function(t,i){return e.Object._fromObject("Rect",t,i)}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.array.min,n=e.util.array.max,s=e.util.toFixed,o=e.util.projectStrokeOnPoints;return e.Polyline?void e.warn("fabric.Polyline is already defined"):(e.Polyline=e.util.createClass(e.Object,{type:"polyline",points:null,exactBoundingBox:!1,cacheProperties:e.Object.prototype.cacheProperties.concat("points"),initialize:function(t,e){e=e||{},this.points=t||[],this.callSuper("initialize",e),this._setPositionDimensions(e)},_projectStrokeOnPoints:function(){return o(this.points,this,!0)},_setPositionDimensions:function(t){var e,i=this._calcDimensions(t),r=this.exactBoundingBox?this.strokeWidth:0;this.width=i.width-r,this.height=i.height-r,t.fromSVG||(e=this.translateToGivenOrigin({x:i.left-this.strokeWidth/2+r/2,y:i.top-this.strokeWidth/2+r/2},"left","top",this.originX,this.originY)),"undefined"==typeof t.left&&(this.left=t.fromSVG?i.left:e.x),"undefined"==typeof t.top&&(this.top=t.fromSVG?i.top:e.y),this.pathOffset={x:i.left+this.width/2+r/2,y:i.top+this.height/2+r/2}},_calcDimensions:function(){var t=this.exactBoundingBox?this._projectStrokeOnPoints():this.points,e=r(t,"x")||0,i=r(t,"y")||0,s=n(t,"x")||0,o=n(t,"y")||0,a=s-e,c=o-i;return{left:e,top:i,width:a,height:c}},toObject:function(t){return i(this.callSuper("toObject",t),{points:this.points.concat()})},_toSVG:function(){for(var t=[],i=this.pathOffset.x,r=this.pathOffset.y,n=e.Object.NUM_FRACTION_DIGITS,o=0,a=this.points.length;a>o;o++)t.push(s(this.points[o].x-i,n),",",s(this.points[o].y-r,n)," ");return["<"+this.type+" ","COMMON_PARTS",'points="',t.join(""),'" />\n']},commonRender:function(t){var e,i=this.points.length,r=this.pathOffset.x,n=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-r,this.points[0].y-n);for(var s=0;i>s;s++)e=this.points[s],t.lineTo(e.x-r,e.y-n);return!0},_render:function(t){this.commonRender(t)&&this._renderPaintInOrder(t)},complexity:function(){return this.get("points").length}}),e.Polyline.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat(),e.Polyline.fromElementGenerator=function(t){return function(r,n,s){if(!r)return n(null);s||(s={});var o=e.parsePointsAttribute(r.getAttribute("points")),a=e.parseAttributes(r,e[t].ATTRIBUTE_NAMES);a.fromSVG=!0,n(new e[t](o,i(a,s)))}},e.Polyline.fromElement=e.Polyline.fromElementGenerator("Polyline"),void(e.Polyline.fromObject=function(t,i){return e.Object._fromObject("Polyline",t,i,"points")}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.projectStrokeOnPoints;return e.Polygon?void e.warn("fabric.Polygon is already defined"):(e.Polygon=e.util.createClass(e.Polyline,{type:"polygon",_projectStrokeOnPoints:function(){return i(this.points,this)},_render:function(t){this.commonRender(t)&&(t.closePath(),this._renderPaintInOrder(t))}}),e.Polygon.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat(),e.Polygon.fromElement=e.Polyline.fromElementGenerator("Polygon"),void(e.Polygon.fromObject=function(t,i){e.Object._fromObject("Polygon",t,i,"points")}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.array.min,r=e.util.array.max,n=e.util.object.extend,s=e.util.object.clone,o=e.util.toFixed;return e.Path?void e.warn("fabric.Path is already defined"):(e.Path=e.util.createClass(e.Object,{type:"path",path:null,cacheProperties:e.Object.prototype.cacheProperties.concat("path","fillRule"),stateProperties:e.Object.prototype.stateProperties.concat("path"),initialize:function(t,e){e=s(e||{}),delete e.path,this.callSuper("initialize",e),this._setPath(t||[],e)},_setPath:function(t,i){this.path=e.util.makePathSimpler(Array.isArray(t)?t:e.util.parsePath(t)),e.Polyline.prototype._setPositionDimensions.call(this,i||{})},_renderPathCommands:function(t){var e,i=0,r=0,n=0,s=0,o=0,a=0,c=-this.pathOffset.x,h=-this.pathOffset.y;t.beginPath();for(var l=0,u=this.path.length;u>l;++l)switch(e=this.path[l],e[0]){case"L":n=e[1],s=e[2],t.lineTo(n+c,s+h);break;case"M":n=e[1],s=e[2],i=n,r=s,t.moveTo(n+c,s+h);break;case"C":n=e[5],s=e[6],o=e[3],a=e[4],t.bezierCurveTo(e[1]+c,e[2]+h,o+c,a+h,n+c,s+h);break;case"Q":t.quadraticCurveTo(e[1]+c,e[2]+h,e[3]+c,e[4]+h),n=e[3],s=e[4],o=e[1],a=e[2];break;case"z":case"Z":n=i,s=r,t.closePath()}},_render:function(t){this._renderPathCommands(t),this._renderPaintInOrder(t)},toString:function(){return"#<fabric.Path ("+this.complexity()+'): { "top": '+this.top+', "left": '+this.left+" }>"},toObject:function(t){return n(this.callSuper("toObject",t),{path:this.path.map(function(t){return t.slice()})})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){var t=e.util.joinPath(this.path);return["<path ","COMMON_PARTS",'d="',t,'" stroke-linecap="round" ',"/>\n"]},_getOffsetTransform:function(){var t=e.Object.NUM_FRACTION_DIGITS;return" translate("+o(-this.pathOffset.x,t)+", "+o(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"	"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,n,s=[],o=[],a=0,c=0,h=0,l=0,u=0,f=this.path.length;f>u;++u){switch(t=this.path[u],t[0]){case"L":h=t[1],l=t[2],n=[];break;case"M":h=t[1],l=t[2],a=h,c=l,n=[];break;case"C":n=e.util.getBoundsOfCurve(h,l,t[1],t[2],t[3],t[4],t[5],t[6]),h=t[5],l=t[6];break;case"Q":n=e.util.getBoundsOfCurve(h,l,t[1],t[2],t[1],t[2],t[3],t[4]),h=t[3],l=t[4];break;case"z":case"Z":h=a,l=c}n.forEach(function(t){s.push(t.x),o.push(t.y)}),s.push(h),o.push(l)}var d=i(s)||0,g=i(o)||0,p=r(s)||0,v=r(o)||0,m=p-d,b=v-g;return{left:d,top:g,width:m,height:b}}}),e.Path.fromObject=function(t,i){if("string"==typeof t.sourcePath){var r=t.sourcePath;e.loadSVGFromURL(r,function(e){var r=e[0];r.setOptions(t),i&&i(r)})}else e.Object._fromObject("Path",t,i,"path")},e.Path.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat(["d"]),void(e.Path.fromElement=function(t,i,r){var s=e.parseAttributes(t,e.Path.ATTRIBUTE_NAMES);s.fromSVG=!0,i(new e.Path(s.d,n(s,r)))}))}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.array.min,r=e.util.array.max;e.Group||(e.Group=e.util.createClass(e.Object,e.Collection,{type:"group",strokeWidth:0,subTargetCheck:!1,cacheProperties:[],useSetOnGroup:!1,initialize:function(t,e,i){e=e||{},this._objects=[],i&&this.callSuper("initialize",e),this._objects=t||[];for(var r=this._objects.length;r--;)this._objects[r].group=this;if(i)this._updateObjectsACoords();else{var n=e&&e.centerPoint;void 0!==e.originX&&(this.originX=e.originX),void 0!==e.originY&&(this.originY=e.originY),n||this._calcBounds(),this._updateObjectsCoords(n),delete e.centerPoint,this.callSuper("initialize",e)}this.setCoords()},_updateObjectsACoords:function(){for(var t=!0,e=this._objects.length;e--;)this._objects[e].setCoords(t)},_updateObjectsCoords:function(t){for(var t=t||this.getCenterPoint(),e=this._objects.length;e--;)this._updateObjectCoords(this._objects[e],t)},_updateObjectCoords:function(t,e){var i=t.left,r=t.top,n=!0;t.set({left:i-e.x,top:r-e.y}),t.group=this,t.setCoords(n)},toString:function(){return"#<fabric.Group: ("+this.complexity()+")>"},addWithUpdate:function(t){var i=!!this.group;return this._restoreObjectsState(),e.util.resetObjectTransform(this),t&&(i&&e.util.removeTransformFromObject(t,this.group.calcTransformMatrix()),this._objects.push(t),t.group=this,t._set("canvas",this.canvas)),this._calcBounds(),this._updateObjectsCoords(),this.dirty=!0,i?this.group.addWithUpdate():this.setCoords(),this},removeWithUpdate:function(t){return this._restoreObjectsState(),e.util.resetObjectTransform(this),this.remove(t),this._calcBounds(),this._updateObjectsCoords(),this.setCoords(),this.dirty=!0,this},_onObjectAdded:function(t){this.dirty=!0,t.group=this,t._set("canvas",this.canvas)},_onObjectRemoved:function(t){this.dirty=!0,delete t.group},_set:function(t,i){var r=this._objects.length;if(this.useSetOnGroup)for(;r--;)this._objects[r].setOnGroup(t,i);if("canvas"===t)for(;r--;)this._objects[r]._set(t,i);e.Object.prototype._set.call(this,t,i)},toObject:function(t){var i=this.includeDefaultValues,r=this._objects.filter(function(t){return!t.excludeFromExport}).map(function(e){var r=e.includeDefaultValues;e.includeDefaultValues=i;var n=e.toObject(t);return e.includeDefaultValues=r,n}),n=e.Object.prototype.toObject.call(this,t);return n.objects=r,n},toDatalessObject:function(t){var i,r=this.sourcePath;if(r)i=r;else{var n=this.includeDefaultValues;i=this._objects.map(function(e){var i=e.includeDefaultValues;e.includeDefaultValues=n;var r=e.toDatalessObject(t);return e.includeDefaultValues=i,r})}var s=e.Object.prototype.toDatalessObject.call(this,t);return s.objects=i,s},render:function(t){this._transformDone=!0,this.callSuper("render",t),this._transformDone=!1},shouldCache:function(){var t=e.Object.prototype.shouldCache.call(this);if(t)for(var i=0,r=this._objects.length;r>i;i++)if(this._objects[i].willDrawShadow())return this.ownCaching=!1,!1;return t},willDrawShadow:function(){if(e.Object.prototype.willDrawShadow.call(this))return!0;for(var t=0,i=this._objects.length;i>t;t++)if(this._objects[t].willDrawShadow())return!0;return!1},isOnACache:function(){return this.ownCaching||this.group&&this.group.isOnACache()},drawObject:function(t){for(var e=0,i=this._objects.length;i>e;e++)this._objects[e].render(t);this._drawClipPath(t,this.clipPath)},isCacheDirty:function(t){if(this.callSuper("isCacheDirty",t))return!0;if(!this.statefullCache)return!1;for(var e=0,i=this._objects.length;i>e;e++)if(this._objects[e].isCacheDirty(!0)){if(this._cacheCanvas){var r=this.cacheWidth/this.zoomX,n=this.cacheHeight/this.zoomY;this._cacheContext.clearRect(-r/2,-n/2,r,n)}return!0}return!1},_restoreObjectsState:function(){var t=this.calcOwnMatrix();return this._objects.forEach(function(i){e.util.addTransformToObject(i,t),delete i.group,i.setCoords()}),this},destroy:function(){return this._objects.forEach(function(t){t.set("dirty",!0)}),this._restoreObjectsState()},dispose:function(){this.callSuper("dispose"),this.forEachObject(function(t){t.dispose&&t.dispose()}),this._objects=[]},toActiveSelection:function(){if(this.canvas){var t=this._objects,i=this.canvas;this._objects=[];var r=this.toObject();delete r.objects;var n=new e.ActiveSelection([]);return n.set(r),n.type="activeSelection",i.remove(this),t.forEach(function(t){t.group=n,t.dirty=!0,i.add(t)}),n.canvas=i,n._objects=t,i._activeObject=n,n.setCoords(),n}},ungroupOnCanvas:function(){return this._restoreObjectsState()},setObjectsCoords:function(){var t=!0;return this.forEachObject(function(e){e.setCoords(t)}),this},_calcBounds:function(t){for(var e,i,r,n,s=[],o=[],a=["tr","br","bl","tl"],c=0,h=this._objects.length,l=a.length;h>c;++c){for(e=this._objects[c],r=e.calcACoords(),n=0;l>n;n++)i=a[n],s.push(r[i].x),o.push(r[i].y);e.aCoords=r}this._getBounds(s,o,t)},_getBounds:function(t,n,s){var o=new e.Point(i(t),i(n)),a=new e.Point(r(t),r(n)),c=o.y||0,h=o.x||0,l=a.x-o.x||0,u=a.y-o.y||0;this.width=l,this.height=u,s||this.setPositionByOrigin({x:h,y:c},"left","top")},_toSVG:function(t){for(var e=["<g ","COMMON_PARTS"," >\n"],i=0,r=this._objects.length;r>i;i++)e.push("		",this._objects[i].toSVG(t));return e.push("</g>\n"),e},getSvgStyles:function(){var t="undefined"!=typeof this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){for(var e=[],i=0,r=this._objects.length;r>i;i++)e.push("	",this._objects[i].toClipPathSVG(t));return this._createBaseClipPathSVGMarkup(e,{reviver:t})}}),e.Group.fromObject=function(t,i){var r=t.objects,n=e.util.object.clone(t,!0);return delete n.objects,"string"==typeof r?void e.loadSVGFromURL(r,function(s){var o=e.util.groupSVGElements(s,t,r);o.set(n),i&&i(o)}):void e.util.enlivenObjects(r,function(r){var n=e.util.object.clone(t,!0);delete n.objects,e.util.enlivenObjectEnlivables(t,n,function(){i&&i(new e.Group(r,n,!0))})})})}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={});e.ActiveSelection||(e.ActiveSelection=e.util.createClass(e.Group,{type:"activeSelection",initialize:function(t,i){i=i||{},this._objects=t||[];for(var r=this._objects.length;r--;)this._objects[r].group=this;i.originX&&(this.originX=i.originX),i.originY&&(this.originY=i.originY),this._calcBounds(),this._updateObjectsCoords(),e.Object.prototype.initialize.call(this,i),this.setCoords()},toGroup:function(){var t=this._objects.concat();this._objects=[];var i=e.Object.prototype.toObject.call(this),r=new e.Group([]);if(delete i.type,r.set(i),t.forEach(function(t){t.canvas.remove(t),t.group=r}),r._objects=t,!this.canvas)return r;var n=this.canvas;return n.add(r),n._activeObject=r,r.setCoords(),r},onDeselect:function(){return this.destroy(),!1},toString:function(){return"#<fabric.ActiveSelection: ("+this.complexity()+")>"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e),i=i||{},"undefined"==typeof i.hasControls&&(i.hasControls=!1),i.forActiveSelection=!0;for(var r=0,n=this._objects.length;n>r;r++)this._objects[r]._renderControls(t,i);t.restore()}}),e.ActiveSelection.fromObject=function(t,i){e.util.enlivenObjects(t.objects,function(r){delete t.objects,i&&i(new e.ActiveSelection(r,t,!0))})})}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=fabric.util.object.extend;return t.fabric||(t.fabric={}),t.fabric.Image?void fabric.warn("fabric.Image is already defined."):(fabric.Image=fabric.util.createClass(fabric.Object,{type:"image",strokeWidth:0,srcFromAttribute:!1,_lastScaleX:1,_lastScaleY:1,_filterScalingX:1,_filterScalingY:1,minimumScaleTrigger:.5,stateProperties:fabric.Object.prototype.stateProperties.concat("cropX","cropY"),cacheProperties:fabric.Object.prototype.cacheProperties.concat("cropX","cropY"),cacheKey:"",cropX:0,cropY:0,imageSmoothing:!0,initialize:function(t,e){e||(e={}),this.filters=[],this.cacheKey="texture"+fabric.Object.__uid++,this.callSuper("initialize",e),this._initElement(t,e)},getElement:function(){return this._element||{}},setElement:function(t,e){return this.removeTexture(this.cacheKey),this.removeTexture(this.cacheKey+"_filtered"),this._element=t,this._originalElement=t,this._initConfig(e),0!==this.filters.length&&this.applyFilters(),this.resizeFilter&&this.applyResizeFilters(),this},removeTexture:function(t){var e=fabric.filterBackend;e&&e.evictCachesForKey&&e.evictCachesForKey(t)},dispose:function(){this.callSuper("dispose"),this.removeTexture(this.cacheKey),this.removeTexture(this.cacheKey+"_filtered"),this._cacheContext=void 0,["_originalElement","_element","_filteredEl","_cacheCanvas"].forEach(function(t){fabric.util.cleanUpJsdomNode(this[t]),this[t]=void 0}.bind(this))},getCrossOrigin:function(){return this._originalElement&&(this._originalElement.crossOrigin||null)},getOriginalSize:function(){var t=this.getElement();return{width:t.naturalWidth||t.width,height:t.naturalHeight||t.height}},_stroke:function(t){if(this.stroke&&0!==this.strokeWidth){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,-i),t.lineTo(e,-i),t.lineTo(e,i),t.lineTo(-e,i),t.lineTo(-e,-i),t.closePath()}},toObject:function(t){var i=[];this.filters.forEach(function(t){t&&i.push(t.toObject())});var r=e(this.callSuper("toObject",["cropX","cropY"].concat(t)),{src:this.getSrc(),crossOrigin:this.getCrossOrigin(),filters:i});return this.resizeFilter&&(r.resizeFilter=this.resizeFilter.toObject()),r},hasCrop:function(){return this.cropX||this.cropY||this.width<this._element.width||this.height<this._element.height},_toSVG:function(){var t,e=[],i=[],r=this._element,n=-this.width/2,s=-this.height/2,o="",a="";if(!r)return[];if(this.hasCrop()){var c=fabric.Object.__uid++;e.push('<clipPath id="imageCrop_'+c+'">\n','	<rect x="'+n+'" y="'+s+'" width="'+this.width+'" height="'+this.height+'" />\n',"</clipPath>\n"),o=' clip-path="url(#imageCrop_'+c+')" '}if(this.imageSmoothing||(a='" image-rendering="optimizeSpeed'),i.push("	<image ","COMMON_PARTS",'xlink:href="',this.getSvgSrc(!0),'" x="',n-this.cropX,'" y="',s-this.cropY,'" width="',r.width||r.naturalWidth,'" height="',r.height||r.height,a,'"',o,"></image>\n"),this.stroke||this.strokeDashArray){var h=this.fill;this.fill=null,t=["	<rect ",'x="',n,'" y="',s,'" width="',this.width,'" height="',this.height,'" style="',this.getSvgStyles(),'"/>\n'],this.fill=h}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,e,i){return fabric.util.loadImage(t,function(t,r){this.setElement(t,i),this._setWidthHeight(),e&&e(this,r)},this,i&&i.crossOrigin),this},toString:function(){return'#<fabric.Image: { src: "'+this.getSrc()+'" }>'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),r=i.scaleX,n=i.scaleY,s=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||r>e&&n>e)return this._element=s,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=r,void(this._lastScaleY=n);fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend());var o=fabric.util.createCanvasElement(),a=this._filteredEl?this.cacheKey+"_filtered":this.cacheKey,c=s.width,h=s.height;o.width=c,o.height=h,this._element=o,this._lastScaleX=t.scaleX=r,this._lastScaleY=t.scaleY=n,fabric.filterBackend.applyFilters([t],s,c,h,this._element,a),this._filterScalingX=o.width/this._originalElement.width,this._filterScalingY=o.height/this._originalElement.height},applyFilters:function(t){if(t=t||this.filters||[],t=t.filter(function(t){return t&&!t.isNeutralState()}),this.set("dirty",!0),this.removeTexture(this.cacheKey+"_filtered"),0===t.length)return this._element=this._originalElement,this._filteredEl=null,this._filterScalingX=1,this._filterScalingY=1,this;var e=this._originalElement,i=e.naturalWidth||e.width,r=e.naturalHeight||e.height;if(this._element===this._originalElement){var n=fabric.util.createCanvasElement();n.width=i,n.height=r,this._element=n,this._filteredEl=n}else this._element=this._filteredEl,this._filteredEl.getContext("2d").clearRect(0,0,i,r),this._lastScaleX=1,this._lastScaleY=1;return fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend()),fabric.filterBackend.applyFilters(t,this._originalElement,i,r,this._element,this.cacheKey),(this._originalElement.width!==this._element.width||this._originalElement.height!==this._element.height)&&(this._filterScalingX=this._element.width/this._originalElement.width,this._filterScalingY=this._element.height/this._originalElement.height),this},_render:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),this.isMoving!==!0&&this.resizeFilter&&this._needsResize()&&this.applyResizeFilters(),this._stroke(t),this._renderPaintInOrder(t)},drawCacheOnCanvas:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),fabric.Object.prototype.drawCacheOnCanvas.call(this,t)},shouldCache:function(){return this.needsItsOwnCache()},_renderFill:function(t){var e=this._element;if(e){var i=this._filterScalingX,r=this._filterScalingY,n=this.width,s=this.height,o=Math.min,a=Math.max,c=a(this.cropX,0),h=a(this.cropY,0),l=e.naturalWidth||e.width,u=e.naturalHeight||e.height,f=c*i,d=h*r,g=o(n*i,l-f),p=o(s*r,u-d),v=-n/2,m=-s/2,b=o(n,l/i-c),y=o(s,u/r-h);e&&t.drawImage(e,f,d,g,p,v,m,b,y)}},_needsResize:function(){var t=this.getTotalObjectScaling();return t.scaleX!==this._lastScaleX||t.scaleY!==this._lastScaleY},_resetWidthHeight:function(){this.set(this.getOriginalSize())},_initElement:function(t,e){this.setElement(fabric.util.getById(t),e),fabric.util.addClass(this.getElement(),fabric.Image.CSS_CANVAS)},_initConfig:function(t){t||(t={}),this.setOptions(t),this._setWidthHeight(t)},_initFilters:function(t,e){t&&t.length?fabric.util.enlivenObjects(t,function(t){e&&e(t)},"fabric.Image.filters"):e&&e()},_setWidthHeight:function(t){t||(t={});var e=this.getElement();this.width=t.width||e.naturalWidth||e.width||0,this.height=t.height||e.naturalHeight||e.height||0},parsePreserveAspectRatioAttribute:function(){var t,e=fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio||""),i=this._element.width,r=this._element.height,n=1,s=1,o=0,a=0,c=0,h=0,l=this.width,u=this.height,f={width:l,height:u};return!e||"none"===e.alignX&&"none"===e.alignY?(n=l/i,s=u/r):("meet"===e.meetOrSlice&&(n=s=fabric.util.findScaleToFit(this._element,f),t=(l-i*n)/2,"Min"===e.alignX&&(o=-t),"Max"===e.alignX&&(o=t),t=(u-r*s)/2,"Min"===e.alignY&&(a=-t),"Max"===e.alignY&&(a=t)),"slice"===e.meetOrSlice&&(n=s=fabric.util.findScaleToCover(this._element,f),t=i-l/n,"Mid"===e.alignX&&(c=t/2),"Max"===e.alignX&&(c=t),t=r-u/s,"Mid"===e.alignY&&(h=t/2),"Max"===e.alignY&&(h=t),i=l/n,r=u/s)),{width:i,height:r,scaleX:n,scaleY:s,offsetLeft:o,offsetTop:a,cropX:c,cropY:h}}}),fabric.Image.CSS_CANVAS="canvas-img",fabric.Image.prototype.getSvgSrc=fabric.Image.prototype.getSrc,fabric.Image.fromObject=function(t,e){var i=fabric.util.object.clone(t);fabric.util.loadImage(i.src,function(t,r){return r?void(e&&e(null,!0)):void fabric.Image.prototype._initFilters.call(i,i.filters,function(r){i.filters=r||[],fabric.Image.prototype._initFilters.call(i,[i.resizeFilter],function(r){i.resizeFilter=r[0],fabric.util.enlivenObjectEnlivables(i,i,function(){var r=new fabric.Image(t,i);e(r,!1)})})})},null,i.crossOrigin)},fabric.Image.fromURL=function(t,e,i){fabric.util.loadImage(t,function(t,r){e&&e(new fabric.Image(t,i),r)},null,i&&i.crossOrigin)},fabric.Image.ATTRIBUTE_NAMES=fabric.SHARED_ATTRIBUTES.concat("x y width height preserveAspectRatio xlink:href crossOrigin image-rendering".split(" ")),void(fabric.Image.fromElement=function(t,i,r){var n=fabric.parseAttributes(t,fabric.Image.ATTRIBUTE_NAMES);fabric.Image.fromURL(n["xlink:href"],i,e(r?fabric.util.object.clone(r):{},n))}))}("undefined"!=typeof exports?exports:this);fabric.util.object.extend(fabric.Object.prototype,{_getAngleValueForStraighten:function(){var t=this.angle%360;return t>0?90*Math.round((t-1)/90):90*Math.round(t/90)},straighten:function(){return this.rotate(this._getAngleValueForStraighten())},fxStraighten:function(t){t=t||{};var e=function(){},i=t.onComplete||e,r=t.onChange||e,n=this;return fabric.util.animate({target:this,startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(t){n.rotate(t),r()},onComplete:function(){n.setCoords(),i()}})}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{straightenObject:function(t){return t.straighten(),this.requestRenderAll(),this},fxStraightenObject:function(t){return t.fxStraighten({onChange:this.requestRenderAllBound})}});function resizeCanvasIfNeeded(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;(i!==n||r!==s)&&(e.width=n,e.height=s)}function copyGLTo2DDrawImage(t,e){var i=t.canvas,r=e.targetCanvas,n=r.getContext("2d");n.translate(0,r.height),n.scale(1,-1);var s=i.height-r.height;n.drawImage(i,0,s,r.width,r.height,0,0,r.width,r.height)}function copyGLTo2DPutImageData(t,e){var i=e.targetCanvas,r=i.getContext("2d"),n=e.destinationWidth,s=e.destinationHeight,o=n*s*4,a=new Uint8Array(this.imageBuffer,0,o),c=new Uint8ClampedArray(this.imageBuffer,0,o);t.readPixels(0,0,n,s,t.RGBA,t.UNSIGNED_BYTE,a);var h=new ImageData(c,n,s);r.putImageData(h,0,0)}!function(){"use strict";function t(t,e){var i="precision "+e+" float;\nvoid main(){}",r=t.createShader(t.FRAGMENT_SHADER);return t.shaderSource(r,i),t.compileShader(r),t.getShaderParameter(r,t.COMPILE_STATUS)?!0:!1}function e(t){t&&t.tileSize&&(this.tileSize=t.tileSize),this.setupGLContext(this.tileSize,this.tileSize),this.captureGPUInfo()}fabric.isWebglSupported=function(e){if(fabric.isLikelyNode)return!1;e=e||fabric.WebglFilterBackend.prototype.tileSize;var i=document.createElement("canvas"),r=i.getContext("webgl")||i.getContext("experimental-webgl"),n=!1;if(r){fabric.maxTextureSize=r.getParameter(r.MAX_TEXTURE_SIZE),n=fabric.maxTextureSize>=e;for(var s=["highp","mediump","lowp"],o=0;3>o;o++)if(t(r,s[o])){fabric.webGlPrecision=s[o];break}}return this.isSupported=n,n},fabric.WebglFilterBackend=e,e.prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,r="undefined"!=typeof window.performance;try{new ImageData(1,1),i=!0}catch(n){i=!1}var s="undefined"!=typeof ArrayBuffer,o="undefined"!=typeof Uint8ClampedArray;if(r&&i&&s&&o){var a=fabric.util.createCanvasElement(),c=new ArrayBuffer(t*e*4);if(fabric.forceGLPutImageData)return this.imageBuffer=c,void(this.copyGLTo2D=copyGLTo2DPutImageData);var h,l,u,f={imageBuffer:c,destinationWidth:t,destinationHeight:e,targetCanvas:a};a.width=t,a.height=e,h=window.performance.now(),copyGLTo2DDrawImage.call(f,this.gl,f),l=window.performance.now()-h,h=window.performance.now(),copyGLTo2DPutImageData.call(f,this.gl,f),u=window.performance.now()-h,l>u?(this.imageBuffer=c,this.copyGLTo2D=copyGLTo2DPutImageData):this.copyGLTo2D=copyGLTo2DDrawImage}},createWebGLCanvas:function(t,e){var i=fabric.util.createCanvasElement();i.width=t,i.height=e;var r={alpha:!0,premultipliedAlpha:!1,depth:!1,stencil:!1,antialias:!1},n=i.getContext("webgl",r);n||(n=i.getContext("experimental-webgl",r)),n&&(n.clearColor(0,0,0,0),this.canvas=i,this.gl=n)},applyFilters:function(t,e,i,r,n,s){var o,a=this.gl;s&&(o=this.getCachedTexture(s,e));var c={originalWidth:e.width||e.originalWidth,originalHeight:e.height||e.originalHeight,sourceWidth:i,sourceHeight:r,destinationWidth:i,destinationHeight:r,context:a,sourceTexture:this.createTexture(a,i,r,!o&&e),targetTexture:this.createTexture(a,i,r),originalTexture:o||this.createTexture(a,i,r,!o&&e),passes:t.length,webgl:!0,aPosition:this.aPosition,programCache:this.programCache,pass:0,filterBackend:this,targetCanvas:n},h=a.createFramebuffer();return a.bindFramebuffer(a.FRAMEBUFFER,h),t.forEach(function(t){t&&t.applyTo(c)}),resizeCanvasIfNeeded(c),this.copyGLTo2D(a,c),a.bindTexture(a.TEXTURE_2D,null),a.deleteTexture(c.sourceTexture),a.deleteTexture(c.targetTexture),a.deleteFramebuffer(h),n.getContext("2d").setTransform(1,0,0,1,0,0),c},dispose:function(){this.canvas&&(this.canvas=null,this.gl=null),this.clearWebGLCaches()},clearWebGLCaches:function(){this.programCache={},this.textureCache={}},createTexture:function(t,e,i,r){var n=t.createTexture();return t.bindTexture(t.TEXTURE_2D,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),r?t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r):t.texImage2D(t.TEXTURE_2D,0,t.RGBA,e,i,0,t.RGBA,t.UNSIGNED_BYTE,null),n},getCachedTexture:function(t,e){if(this.textureCache[t])return this.textureCache[t];var i=this.createTexture(this.gl,e.width,e.height,e);return this.textureCache[t]=i,i},evictCachesForKey:function(t){this.textureCache[t]&&(this.gl.deleteTexture(this.textureCache[t]),delete this.textureCache[t])},copyGLTo2D:copyGLTo2DDrawImage,captureGPUInfo:function(){if(this.gpuInfo)return this.gpuInfo;var t=this.gl,e={renderer:"",vendor:""};if(!t)return e;var i=t.getExtension("WEBGL_debug_renderer_info");if(i){var r=t.getParameter(i.UNMASKED_RENDERER_WEBGL),n=t.getParameter(i.UNMASKED_VENDOR_WEBGL);r&&(e.renderer=r.toLowerCase()),n&&(e.vendor=n.toLowerCase())}return this.gpuInfo=e,e}}}();!function(){"use strict";function t(){}var e=function(){};fabric.Canvas2dFilterBackend=t,t.prototype={evictCachesForKey:e,dispose:e,clearWebGLCaches:e,resources:{},applyFilters:function(t,e,i,r,n){var s=n.getContext("2d");s.drawImage(e,0,0,i,r);var o=s.getImageData(0,0,i,r),a=s.getImageData(0,0,i,r),c={sourceWidth:i,sourceHeight:r,imageData:o,originalEl:e,originalImageData:a,canvasEl:n,ctx:s,filterBackend:this};return t.forEach(function(t){t.applyTo(c)}),(c.imageData.width!==i||c.imageData.height!==r)&&(n.width=c.imageData.width,n.height=c.imageData.height),s.putImageData(c.imageData,0,0),c}}}();fabric.Image=fabric.Image||{},fabric.Image.filters=fabric.Image.filters||{},fabric.Image.filters.BaseFilter=fabric.util.createClass({type:"BaseFilter",vertexSource:"attribute vec2 aPosition;\nvarying vec2 vTexCoord;\nvoid main() {\nvTexCoord = aPosition;\ngl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n}",fragmentSource:"precision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D uTexture;\nvoid main() {\ngl_FragColor = texture2D(uTexture, vTexCoord);\n}",initialize:function(t){t&&this.setOptions(t)},setOptions:function(t){for(var e in t)this[e]=t[e]},createProgram:function(t,e,i){e=e||this.fragmentSource,i=i||this.vertexSource,"highp"!==fabric.webGlPrecision&&(e=e.replace(/precision highp float/g,"precision "+fabric.webGlPrecision+" float"));var r=t.createShader(t.VERTEX_SHADER);if(t.shaderSource(r,i),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS))throw new Error("Vertex shader compile error for "+this.type+": "+t.getShaderInfoLog(r));var n=t.createShader(t.FRAGMENT_SHADER);if(t.shaderSource(n,e),t.compileShader(n),!t.getShaderParameter(n,t.COMPILE_STATUS))throw new Error("Fragment shader compile error for "+this.type+": "+t.getShaderInfoLog(n));var s=t.createProgram();if(t.attachShader(s,r),t.attachShader(s,n),t.linkProgram(s),!t.getProgramParameter(s,t.LINK_STATUS))throw new Error('Shader link error for "${this.type}" '+t.getProgramInfoLog(s));var o=this.getAttributeLocations(t,s),a=this.getUniformLocations(t,s)||{};return a.uStepW=t.getUniformLocation(s,"uStepW"),a.uStepH=t.getUniformLocation(s,"uStepH"),{program:s,attributeLocations:o,uniformLocations:a}},getAttributeLocations:function(t,e){return{aPosition:t.getAttribLocation(e,"aPosition")}},getUniformLocations:function(){return{}},sendAttributeData:function(t,e,i){var r=e.aPosition,n=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,n),t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW)},_setupFrameBuffer:function(t){var e,i,r=t.context;t.passes>1?(e=t.destinationWidth,i=t.destinationHeight,(t.sourceWidth!==e||t.sourceHeight!==i)&&(r.deleteTexture(t.targetTexture),t.targetTexture=t.filterBackend.createTexture(r,e,i)),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,t.targetTexture,0)):(r.bindFramebuffer(r.FRAMEBUFFER,null),r.finish())},_swapTextures:function(t){t.passes--,t.pass++;var e=t.targetTexture;t.targetTexture=t.sourceTexture,t.sourceTexture=e},isNeutralState:function(){var t=this.mainParameter,e=fabric.Image.filters[this.type].prototype;if(t){if(Array.isArray(e[t])){for(var i=e[t].length;i--;)if(this[t][i]!==e[t][i])return!1;return!0}return e[t]===this[t]}return!1},applyTo:function(t){t.webgl?(this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t)):this.applyTo2d(t)},retrieveShader:function(t){return t.programCache.hasOwnProperty(this.type)||(t.programCache[this.type]=this.createProgram(t.context)),t.programCache[this.type]},applyToWebGL:function(t){var e=t.context,i=this.retrieveShader(t);0===t.pass&&t.originalTexture?e.bindTexture(e.TEXTURE_2D,t.originalTexture):e.bindTexture(e.TEXTURE_2D,t.sourceTexture),e.useProgram(i.program),this.sendAttributeData(e,i.attributeLocations,t.aPosition),e.uniform1f(i.uniformLocations.uStepW,1/t.sourceWidth),e.uniform1f(i.uniformLocations.uStepH,1/t.sourceHeight),this.sendUniformData(e,i.uniformLocations),e.viewport(0,0,t.destinationWidth,t.destinationHeight),e.drawArrays(e.TRIANGLE_STRIP,0,4)},bindAdditionalTexture:function(t,e,i){t.activeTexture(i),t.bindTexture(t.TEXTURE_2D,e),t.activeTexture(t.TEXTURE0)},unbindAdditionalTexture:function(t,e){t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,null),t.activeTexture(t.TEXTURE0)},getMainParameter:function(){return this[this.mainParameter]},setMainParameter:function(t){this[this.mainParameter]=t},sendUniformData:function(){},createHelpLayer:function(t){if(!t.helpLayer){var e=document.createElement("canvas");e.width=t.sourceWidth,e.height=t.sourceHeight,t.helpLayer=e}},toObject:function(){var t={type:this.type},e=this.mainParameter;return e&&(t[e]=this[e]),t},toJSON:function(){return this.toObject()}}),fabric.Image.filters.BaseFilter.fromObject=function(t,e){var i=new fabric.Image.filters[t.type](t);return e&&e(i),i};!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.ColorMatrix=r(i.BaseFilter,{type:"ColorMatrix",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nuniform mat4 uColorMatrix;\nuniform vec4 uConstants;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor *= uColorMatrix;\ncolor += uConstants;\ngl_FragColor = color;\n}",matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],mainParameter:"matrix",colorsOnly:!0,initialize:function(t){this.callSuper("initialize",t),this.matrix=this.matrix.slice(0)},applyTo2d:function(t){var e,i,r,n,o,s=t.imageData,a=s.data,c=a.length,h=this.matrix,l=this.colorsOnly;for(o=0;c>o;o+=4)e=a[o],i=a[o+1],r=a[o+2],l?(a[o]=e*h[0]+i*h[1]+r*h[2]+255*h[4],a[o+1]=e*h[5]+i*h[6]+r*h[7]+255*h[9],a[o+2]=e*h[10]+i*h[11]+r*h[12]+255*h[14]):(n=a[o+3],a[o]=e*h[0]+i*h[1]+r*h[2]+n*h[3]+255*h[4],a[o+1]=e*h[5]+i*h[6]+r*h[7]+n*h[8]+255*h[9],a[o+2]=e*h[10]+i*h[11]+r*h[12]+n*h[13]+255*h[14],a[o+3]=e*h[15]+i*h[16]+r*h[17]+n*h[18]+255*h[19])},getUniformLocations:function(t,e){return{uColorMatrix:t.getUniformLocation(e,"uColorMatrix"),uConstants:t.getUniformLocation(e,"uConstants")}},sendUniformData:function(t,e){var i=this.matrix,r=[i[0],i[1],i[2],i[3],i[5],i[6],i[7],i[8],i[10],i[11],i[12],i[13],i[15],i[16],i[17],i[18]],n=[i[4],i[9],i[14],i[19]];t.uniformMatrix4fv(e.uColorMatrix,!1,r),t.uniform4fv(e.uConstants,n)}}),e.Image.filters.ColorMatrix.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Brightness=r(i.BaseFilter,{type:"Brightness",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uBrightness;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor.rgb += uBrightness;\ngl_FragColor = color;\n}",brightness:0,mainParameter:"brightness",applyTo2d:function(t){if(0!==this.brightness){var e,i=t.imageData,r=i.data,n=r.length,o=Math.round(255*this.brightness);for(e=0;n>e;e+=4)r[e]=r[e]+o,r[e+1]=r[e+1]+o,r[e+2]=r[e+2]+o}},getUniformLocations:function(t,e){return{uBrightness:t.getUniformLocation(e,"uBrightness")}},sendUniformData:function(t,e){t.uniform1f(e.uBrightness,this.brightness)}}),e.Image.filters.Brightness.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.Image.filters,n=e.util.createClass;r.Convolute=n(r.BaseFilter,{type:"Convolute",opaque:!1,matrix:[0,0,0,0,1,0,0,0,0],fragmentSource:{Convolute_3_1:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[9];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 0);\nfor (float h = 0.0; h < 3.0; h+=1.0) {\nfor (float w = 0.0; w < 3.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\ncolor += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n}\n}\ngl_FragColor = color;\n}",Convolute_3_0:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[9];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 1);\nfor (float h = 0.0; h < 3.0; h+=1.0) {\nfor (float w = 0.0; w < 3.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\ncolor.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n}\n}\nfloat alpha = texture2D(uTexture, vTexCoord).a;\ngl_FragColor = color;\ngl_FragColor.a = alpha;\n}",Convolute_5_1:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[25];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 0);\nfor (float h = 0.0; h < 5.0; h+=1.0) {\nfor (float w = 0.0; w < 5.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\ncolor += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n}\n}\ngl_FragColor = color;\n}",Convolute_5_0:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[25];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 1);\nfor (float h = 0.0; h < 5.0; h+=1.0) {\nfor (float w = 0.0; w < 5.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\ncolor.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n}\n}\nfloat alpha = texture2D(uTexture, vTexCoord).a;\ngl_FragColor = color;\ngl_FragColor.a = alpha;\n}",Convolute_7_1:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[49];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 0);\nfor (float h = 0.0; h < 7.0; h+=1.0) {\nfor (float w = 0.0; w < 7.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\ncolor += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n}\n}\ngl_FragColor = color;\n}",Convolute_7_0:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[49];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 1);\nfor (float h = 0.0; h < 7.0; h+=1.0) {\nfor (float w = 0.0; w < 7.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\ncolor.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n}\n}\nfloat alpha = texture2D(uTexture, vTexCoord).a;\ngl_FragColor = color;\ngl_FragColor.a = alpha;\n}",Convolute_9_1:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[81];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 0);\nfor (float h = 0.0; h < 9.0; h+=1.0) {\nfor (float w = 0.0; w < 9.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\ncolor += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n}\n}\ngl_FragColor = color;\n}",Convolute_9_0:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uMatrix[81];\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = vec4(0, 0, 0, 1);\nfor (float h = 0.0; h < 9.0; h+=1.0) {\nfor (float w = 0.0; w < 9.0; w+=1.0) {\nvec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\ncolor.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n}\n}\nfloat alpha = texture2D(uTexture, vTexCoord).a;\ngl_FragColor = color;\ngl_FragColor.a = alpha;\n}"},retrieveShader:function(t){var e=Math.sqrt(this.matrix.length),i=this.type+"_"+e+"_"+(this.opaque?1:0),r=this.fragmentSource[i];return t.programCache.hasOwnProperty(i)||(t.programCache[i]=this.createProgram(t.context,r)),t.programCache[i]},applyTo2d:function(t){var e,i,r,n,o,s,a,c,l,h,u,f,d,g=t.imageData,p=g.data,v=this.matrix,m=Math.round(Math.sqrt(v.length)),b=Math.floor(m/2),y=g.width,_=g.height,x=t.ctx.createImageData(y,_),C=x.data,w=this.opaque?1:0;for(u=0;_>u;u++)for(h=0;y>h;h++){for(o=4*(u*y+h),e=0,i=0,r=0,n=0,d=0;m>d;d++)for(f=0;m>f;f++)a=u+d-b,s=h+f-b,0>a||a>=_||0>s||s>=y||(c=4*(a*y+s),l=v[d*m+f],e+=p[c]*l,i+=p[c+1]*l,r+=p[c+2]*l,w||(n+=p[c+3]*l));C[o]=e,C[o+1]=i,C[o+2]=r,C[o+3]=w?p[o+3]:n}t.imageData=x},getUniformLocations:function(t,e){return{uMatrix:t.getUniformLocation(e,"uMatrix"),uOpaque:t.getUniformLocation(e,"uOpaque"),uHalfSize:t.getUniformLocation(e,"uHalfSize"),uSize:t.getUniformLocation(e,"uSize")}},sendUniformData:function(t,e){t.uniform1fv(e.uMatrix,this.matrix)},toObject:function(){return i(this.callSuper("toObject"),{opaque:this.opaque,matrix:this.matrix})}}),e.Image.filters.Convolute.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Grayscale=r(i.BaseFilter,{type:"Grayscale",fragmentSource:{average:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat average = (color.r + color.b + color.g) / 3.0;\ngl_FragColor = vec4(average, average, average, color.a);\n}",lightness:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\ngl_FragColor = vec4(average, average, average, col.a);\n}",luminosity:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\ngl_FragColor = vec4(average, average, average, col.a);\n}"},mode:"average",mainParameter:"mode",applyTo2d:function(t){var e,i,r=t.imageData,n=r.data,o=n.length,s=this.mode;for(e=0;o>e;e+=4)"average"===s?i=(n[e]+n[e+1]+n[e+2])/3:"lightness"===s?i=(Math.min(n[e],n[e+1],n[e+2])+Math.max(n[e],n[e+1],n[e+2]))/2:"luminosity"===s&&(i=.21*n[e]+.72*n[e+1]+.07*n[e+2]),n[e]=i,n[e+1]=i,n[e+2]=i},retrieveShader:function(t){var e=this.type+"_"+this.mode;if(!t.programCache.hasOwnProperty(e)){var i=this.fragmentSource[this.mode];t.programCache[e]=this.createProgram(t.context,i)}return t.programCache[e]},getUniformLocations:function(t,e){return{uMode:t.getUniformLocation(e,"uMode")}},sendUniformData:function(t,e){var i=1;t.uniform1i(e.uMode,i)},isNeutralState:function(){return!1}}),e.Image.filters.Grayscale.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Invert=r(i.BaseFilter,{type:"Invert",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uInvert;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nif (uInvert == 1) {\ngl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n} else {\ngl_FragColor = color;\n}\n}",invert:!0,mainParameter:"invert",applyTo2d:function(t){var e,i=t.imageData,r=i.data,n=r.length;for(e=0;n>e;e+=4)r[e]=255-r[e],r[e+1]=255-r[e+1],r[e+2]=255-r[e+2]},isNeutralState:function(){return!this.invert},getUniformLocations:function(t,e){return{uInvert:t.getUniformLocation(e,"uInvert")}},sendUniformData:function(t,e){t.uniform1i(e.uInvert,this.invert)}}),e.Image.filters.Invert.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.Image.filters,n=e.util.createClass;r.Noise=n(r.BaseFilter,{type:"Noise",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uStepH;\nuniform float uNoise;\nuniform float uSeed;\nvarying vec2 vTexCoord;\nfloat rand(vec2 co, float seed, float vScale) {\nreturn fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n}\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\ngl_FragColor = color;\n}",mainParameter:"noise",noise:0,applyTo2d:function(t){if(0!==this.noise){var e,i,r=t.imageData,n=r.data,o=n.length,s=this.noise;for(e=0,o=n.length;o>e;e+=4)i=(.5-Math.random())*s,n[e]+=i,n[e+1]+=i,n[e+2]+=i}},getUniformLocations:function(t,e){return{uNoise:t.getUniformLocation(e,"uNoise"),uSeed:t.getUniformLocation(e,"uSeed")}},sendUniformData:function(t,e){t.uniform1f(e.uNoise,this.noise/255),t.uniform1f(e.uSeed,Math.random())},toObject:function(){return i(this.callSuper("toObject"),{noise:this.noise})}}),e.Image.filters.Noise.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Pixelate=r(i.BaseFilter,{type:"Pixelate",blocksize:4,mainParameter:"blocksize",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uBlocksize;\nuniform float uStepW;\nuniform float uStepH;\nvarying vec2 vTexCoord;\nvoid main() {\nfloat blockW = uBlocksize * uStepW;\nfloat blockH = uBlocksize * uStepW;\nint posX = int(vTexCoord.x / blockW);\nint posY = int(vTexCoord.y / blockH);\nfloat fposX = float(posX);\nfloat fposY = float(posY);\nvec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\nvec4 color = texture2D(uTexture, squareCoords);\ngl_FragColor = color;\n}",applyTo2d:function(t){var e,i,r,n,o,s,a,c,h,l,u,f=t.imageData,d=f.data,g=f.height,p=f.width;for(i=0;g>i;i+=this.blocksize)for(r=0;p>r;r+=this.blocksize)for(e=4*i*p+4*r,n=d[e],o=d[e+1],s=d[e+2],a=d[e+3],l=Math.min(i+this.blocksize,g),u=Math.min(r+this.blocksize,p),c=i;l>c;c++)for(h=r;u>h;h++)e=4*c*p+4*h,d[e]=n,d[e+1]=o,d[e+2]=s,d[e+3]=a},isNeutralState:function(){return 1===this.blocksize},getUniformLocations:function(t,e){return{uBlocksize:t.getUniformLocation(e,"uBlocksize"),uStepW:t.getUniformLocation(e,"uStepW"),uStepH:t.getUniformLocation(e,"uStepH")}},sendUniformData:function(t,e){t.uniform1f(e.uBlocksize,this.blocksize)}}),e.Image.filters.Pixelate.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.Image.filters,n=e.util.createClass;r.RemoveColor=n(r.BaseFilter,{type:"RemoveColor",color:"#FFFFFF",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec4 uLow;\nuniform vec4 uHigh;\nvarying vec2 vTexCoord;\nvoid main() {\ngl_FragColor = texture2D(uTexture, vTexCoord);\nif(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\ngl_FragColor.a = 0.0;\n}\n}",distance:.02,useAlpha:!1,applyTo2d:function(t){var i,r,n,o,s=t.imageData,a=s.data,c=255*this.distance,h=new e.Color(this.color).getSource(),l=[h[0]-c,h[1]-c,h[2]-c],u=[h[0]+c,h[1]+c,h[2]+c];for(i=0;i<a.length;i+=4)r=a[i],n=a[i+1],o=a[i+2],r>l[0]&&n>l[1]&&o>l[2]&&r<u[0]&&n<u[1]&&o<u[2]&&(a[i+3]=0)},getUniformLocations:function(t,e){return{uLow:t.getUniformLocation(e,"uLow"),uHigh:t.getUniformLocation(e,"uHigh")}},sendUniformData:function(t,i){var r=new e.Color(this.color).getSource(),n=parseFloat(this.distance),o=[0+r[0]/255-n,0+r[1]/255-n,0+r[2]/255-n,1],s=[r[0]/255+n,r[1]/255+n,r[2]/255+n,1];t.uniform4fv(i.uLow,o),t.uniform4fv(i.uHigh,s)},toObject:function(){return i(this.callSuper("toObject"),{color:this.color,distance:this.distance})}}),e.Image.filters.RemoveColor.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass,n={Brownie:[.5997,.34553,-.27082,0,.186,-.0377,.86095,.15059,0,-.1449,.24113,-.07441,.44972,0,-.02965,0,0,0,1,0],Vintage:[.62793,.32021,-.03965,0,.03784,.02578,.64411,.03259,0,.02926,.0466,-.08512,.52416,0,.02023,0,0,0,1,0],Kodachrome:[1.12855,-.39673,-.03992,0,.24991,-.16404,1.08352,-.05498,0,.09698,-.16786,-.56034,1.60148,0,.13972,0,0,0,1,0],Technicolor:[1.91252,-.85453,-.09155,0,.04624,-.30878,1.76589,-.10601,0,-.27589,-.2311,-.75018,1.84759,0,.12137,0,0,0,1,0],Polaroid:[1.438,-.062,-.062,0,0,-.122,1.378,-.122,0,0,-.016,-.016,1.483,0,0,0,0,0,1,0],Sepia:[.393,.769,.189,0,0,.349,.686,.168,0,0,.272,.534,.131,0,0,0,0,0,1,0],BlackWhite:[1.5,1.5,1.5,0,-1,1.5,1.5,1.5,0,-1,1.5,1.5,1.5,0,-1,0,0,0,1,0]};for(var o in n)i[o]=r(i.ColorMatrix,{type:o,matrix:n[o],mainParameter:!1,colorsOnly:!0}),e.Image.filters[o].fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric,i=e.Image.filters,r=e.util.createClass;i.BlendColor=r(i.BaseFilter,{type:"BlendColor",color:"#F95C63",mode:"multiply",alpha:1,fragmentSource:{multiply:"gl_FragColor.rgb *= uColor.rgb;\n",screen:"gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n",add:"gl_FragColor.rgb += uColor.rgb;\n",diff:"gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n",subtract:"gl_FragColor.rgb -= uColor.rgb;\n",lighten:"gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n",darken:"gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n",exclusion:"gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n",overlay:"if (uColor.r < 0.5) {\ngl_FragColor.r *= 2.0 * uColor.r;\n} else {\ngl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n}\nif (uColor.g < 0.5) {\ngl_FragColor.g *= 2.0 * uColor.g;\n} else {\ngl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n}\nif (uColor.b < 0.5) {\ngl_FragColor.b *= 2.0 * uColor.b;\n} else {\ngl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n}\n",tint:"gl_FragColor.rgb *= (1.0 - uColor.a);\ngl_FragColor.rgb += uColor.rgb;\n"},buildSource:function(t){return"precision highp float;\nuniform sampler2D uTexture;\nuniform vec4 uColor;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ngl_FragColor = color;\nif (color.a > 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var i,r,n,o,s,a,c,h=t.imageData,l=h.data,u=l.length,f=1-this.alpha;c=new e.Color(this.color).getSource(),i=c[0]*this.alpha,r=c[1]*this.alpha,n=c[2]*this.alpha;for(var d=0;u>d;d+=4)switch(o=l[d],s=l[d+1],a=l[d+2],this.mode){case"multiply":l[d]=o*i/255,l[d+1]=s*r/255,l[d+2]=a*n/255;break;case"screen":l[d]=255-(255-o)*(255-i)/255,l[d+1]=255-(255-s)*(255-r)/255,l[d+2]=255-(255-a)*(255-n)/255;break;case"add":l[d]=o+i,l[d+1]=s+r,l[d+2]=a+n;break;case"diff":case"difference":l[d]=Math.abs(o-i),l[d+1]=Math.abs(s-r),l[d+2]=Math.abs(a-n);break;case"subtract":l[d]=o-i,l[d+1]=s-r,l[d+2]=a-n;break;case"darken":l[d]=Math.min(o,i),l[d+1]=Math.min(s,r),l[d+2]=Math.min(a,n);break;case"lighten":l[d]=Math.max(o,i),l[d+1]=Math.max(s,r),l[d+2]=Math.max(a,n);break;case"overlay":l[d]=128>i?2*o*i/255:255-2*(255-o)*(255-i)/255,l[d+1]=128>r?2*s*r/255:255-2*(255-s)*(255-r)/255,l[d+2]=128>n?2*a*n/255:255-2*(255-a)*(255-n)/255;break;case"exclusion":l[d]=i+o-2*i*o/255,l[d+1]=r+s-2*r*s/255,l[d+2]=n+a-2*n*a/255;break;case"tint":l[d]=i+o*f,l[d+1]=r+s*f,l[d+2]=n+a*f}},getUniformLocations:function(t,e){return{uColor:t.getUniformLocation(e,"uColor")}},sendUniformData:function(t,i){var r=new e.Color(this.color).getSource();r[0]=this.alpha*r[0]/255,r[1]=this.alpha*r[1]/255,r[2]=this.alpha*r[2]/255,r[3]=this.alpha,t.uniform4fv(i.uColor,r)},toObject:function(){return{type:this.type,color:this.color,mode:this.mode,alpha:this.alpha}}}),e.Image.filters.BlendColor.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric,i=e.Image.filters,r=e.util.createClass;i.BlendImage=r(i.BaseFilter,{type:"BlendImage",image:null,mode:"multiply",alpha:1,vertexSource:"attribute vec2 aPosition;\nvarying vec2 vTexCoord;\nvarying vec2 vTexCoord2;\nuniform mat3 uTransformMatrix;\nvoid main() {\nvTexCoord = aPosition;\nvTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\ngl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n}",fragmentSource:{multiply:"precision highp float;\nuniform sampler2D uTexture;\nuniform sampler2D uImage;\nuniform vec4 uColor;\nvarying vec2 vTexCoord;\nvarying vec2 vTexCoord2;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec4 color2 = texture2D(uImage, vTexCoord2);\ncolor.rgba *= color2.rgba;\ngl_FragColor = color;\n}",mask:"precision highp float;\nuniform sampler2D uTexture;\nuniform sampler2D uImage;\nuniform vec4 uColor;\nvarying vec2 vTexCoord;\nvarying vec2 vTexCoord2;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec4 color2 = texture2D(uImage, vTexCoord2);\ncolor.a = color2.a;\ngl_FragColor = color;\n}"},retrieveShader:function(t){var e=this.type+"_"+this.mode,i=this.fragmentSource[this.mode];return t.programCache.hasOwnProperty(e)||(t.programCache[e]=this.createProgram(t.context,i)),t.programCache[e]},applyToWebGL:function(t){var e=t.context,i=this.createTexture(t.filterBackend,this.image);this.bindAdditionalTexture(e,i,e.TEXTURE1),this.callSuper("applyToWebGL",t),this.unbindAdditionalTexture(e,e.TEXTURE1)},createTexture:function(t,e){return t.getCachedTexture(e.cacheKey,e._element)},calculateMatrix:function(){var t=this.image,e=t._element.width,i=t._element.height;return[1/t.scaleX,0,0,0,1/t.scaleY,0,-t.left/e,-t.top/i,1]},applyTo2d:function(t){var i,r,n,o,s,a,c,l,h,u,f,d=t.imageData,g=t.filterBackend.resources,p=d.data,v=p.length,m=d.width,b=d.height,y=this.image;g.blendImage||(g.blendImage=e.util.createCanvasElement()),h=g.blendImage,u=h.getContext("2d"),h.width!==m||h.height!==b?(h.width=m,h.height=b):u.clearRect(0,0,m,b),u.setTransform(y.scaleX,0,0,y.scaleY,y.left,y.top),u.drawImage(y._element,0,0,m,b),f=u.getImageData(0,0,m,b).data;for(var _=0;v>_;_+=4)switch(s=p[_],a=p[_+1],c=p[_+2],l=p[_+3],i=f[_],r=f[_+1],n=f[_+2],o=f[_+3],this.mode){case"multiply":p[_]=s*i/255,p[_+1]=a*r/255,p[_+2]=c*n/255,p[_+3]=l*o/255;break;case"mask":p[_+3]=o}},getUniformLocations:function(t,e){return{uTransformMatrix:t.getUniformLocation(e,"uTransformMatrix"),uImage:t.getUniformLocation(e,"uImage")}},sendUniformData:function(t,e){var i=this.calculateMatrix();t.uniform1i(e.uImage,1),t.uniformMatrix3fv(e.uTransformMatrix,!1,i)},toObject:function(){return{type:this.type,image:this.image&&this.image.toObject(),mode:this.mode,alpha:this.alpha}}}),e.Image.filters.BlendImage.fromObject=function(t,i){e.Image.fromObject(t.image,function(r){var n=e.util.object.clone(t);n.image=r,i(new e.Image.filters.BlendImage(n))})}}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=Math.pow,r=Math.floor,n=Math.sqrt,o=Math.abs,s=Math.round,a=Math.sin,c=Math.ceil,l=e.Image.filters,h=e.util.createClass;l.Resize=h(l.BaseFilter,{type:"Resize",resizeType:"hermite",scaleX:1,scaleY:1,lanczosLobes:3,getUniformLocations:function(t,e){return{uDelta:t.getUniformLocation(e,"uDelta"),uTaps:t.getUniformLocation(e,"uTaps")}},sendUniformData:function(t,e){t.uniform2fv(e.uDelta,this.horizontal?[1/this.width,0]:[0,1/this.height]),t.uniform1fv(e.uTaps,this.taps)},retrieveShader:function(t){var e=this.getFilterWindow(),i=this.type+"_"+e;if(!t.programCache.hasOwnProperty(i)){var r=this.generateShader(e);t.programCache[i]=this.createProgram(t.context,r)}return t.programCache[i]},getFilterWindow:function(){var t=this.tempScale;return Math.ceil(this.lanczosLobes/t)},getTaps:function(){for(var t=this.lanczosCreate(this.lanczosLobes),e=this.tempScale,i=this.getFilterWindow(),r=new Array(i),n=1;i>=n;n++)r[n-1]=t(n*e);return r},generateShader:function(t){for(var t,e=new Array(t),i=this.fragmentSourceTOP,r=1;t>=r;r++)e[r-1]=r+".0 * uDelta";return i+="uniform float uTaps["+t+"];\n",i+="void main() {\n",i+="  vec4 color = texture2D(uTexture, vTexCoord);\n",i+="  float sum = 1.0;\n",e.forEach(function(t,e){i+="  color += texture2D(uTexture, vTexCoord + "+t+") * uTaps["+e+"];\n",i+="  color += texture2D(uTexture, vTexCoord - "+t+") * uTaps["+e+"];\n",i+="  sum += 2.0 * uTaps["+e+"];\n"}),i+="  gl_FragColor = color / sum;\n",i+="}"},fragmentSourceTOP:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec2 uDelta;\nvarying vec2 vTexCoord;\n",applyTo:function(t){t.webgl?(t.passes++,this.width=t.sourceWidth,this.horizontal=!0,this.dW=Math.round(this.width*this.scaleX),this.dH=t.sourceHeight,this.tempScale=this.dW/this.width,this.taps=this.getTaps(),t.destinationWidth=this.dW,this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t),t.sourceWidth=t.destinationWidth,this.height=t.sourceHeight,this.horizontal=!1,this.dH=Math.round(this.height*this.scaleY),this.tempScale=this.dH/this.height,this.taps=this.getTaps(),t.destinationHeight=this.dH,this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t),t.sourceHeight=t.destinationHeight):this.applyTo2d(t)},isNeutralState:function(){return 1===this.scaleX&&1===this.scaleY},lanczosCreate:function(t){return function(e){if(e>=t||-t>=e)return 0;if(1.1920929e-7>e&&e>-1.1920929e-7)return 1;e*=Math.PI;var i=e/t;return a(e)/e*a(i)/i}},applyTo2d:function(t){var e=t.imageData,i=this.scaleX,r=this.scaleY;this.rcpScaleX=1/i,this.rcpScaleY=1/r;var n,o=e.width,a=e.height,c=s(o*i),l=s(a*r);"sliceHack"===this.resizeType?n=this.sliceByTwo(t,o,a,c,l):"hermite"===this.resizeType?n=this.hermiteFastResize(t,o,a,c,l):"bilinear"===this.resizeType?n=this.bilinearFiltering(t,o,a,c,l):"lanczos"===this.resizeType&&(n=this.lanczosResize(t,o,a,c,l)),t.imageData=n},sliceByTwo:function(t,i,n,o,s){var a,c,l=t.imageData,h=.5,u=!1,f=!1,d=i*h,g=n*h,p=e.filterBackend.resources,v=0,m=0,b=i,y=0;for(p.sliceByTwo||(p.sliceByTwo=document.createElement("canvas")),a=p.sliceByTwo,(a.width<1.5*i||a.height<n)&&(a.width=1.5*i,a.height=n),c=a.getContext("2d"),c.clearRect(0,0,1.5*i,n),c.putImageData(l,0,0),o=r(o),s=r(s);!u||!f;)i=d,n=g,o<r(d*h)?d=r(d*h):(d=o,u=!0),s<r(g*h)?g=r(g*h):(g=s,f=!0),c.drawImage(a,v,m,i,n,b,y,d,g),v=b,m=y,y+=g;return c.getImageData(v,m,o,s)},lanczosResize:function(t,e,s,a,l){function h(t){var c,T,S,O,j,P,E,k,M,A,D;for(C.x=(t+.5)*p,w.x=r(C.x),c=0;l>c;c++){for(C.y=(c+.5)*v,w.y=r(C.y),j=0,P=0,E=0,k=0,M=0,T=w.x-y;T<=w.x+y;T++)if(!(0>T||T>=e)){A=r(1e3*o(T-C.x)),_[A]||(_[A]={});for(var F=w.y-x;F<=w.y+x;F++)0>F||F>=s||(D=r(1e3*o(F-C.y)),_[A][D]||(_[A][D]=g(n(i(A*m,2)+i(D*b,2))/1e3)),S=_[A][D],S>0&&(O=4*(F*e+T),j+=S,P+=S*u[O],E+=S*u[O+1],k+=S*u[O+2],M+=S*u[O+3]))}O=4*(c*a+t),d[O]=P/j,d[O+1]=E/j,d[O+2]=k/j,d[O+3]=M/j}return++t<a?h(t):f}var u=t.imageData.data,f=t.ctx.createImageData(a,l),d=f.data,g=this.lanczosCreate(this.lanczosLobes),p=this.rcpScaleX,v=this.rcpScaleY,m=2/this.rcpScaleX,b=2/this.rcpScaleY,y=c(p*this.lanczosLobes/2),x=c(v*this.lanczosLobes/2),_={},C={},w={};return h(0)},bilinearFiltering:function(t,e,i,n,o){var s,a,c,l,h,u,f,d,g,p,v,m,b,y=0,x=this.rcpScaleX,_=this.rcpScaleY,C=4*(e-1),w=t.imageData,T=w.data,S=t.ctx.createImageData(n,o),O=S.data;for(f=0;o>f;f++)for(d=0;n>d;d++)for(h=r(x*d),u=r(_*f),g=x*d-h,p=_*f-u,b=4*(u*e+h),v=0;4>v;v++)s=T[b+v],a=T[b+4+v],c=T[b+C+v],l=T[b+C+4+v],m=s*(1-g)*(1-p)+a*g*(1-p)+c*p*(1-g)+l*g*p,O[y++]=m;return S},hermiteFastResize:function(t,e,i,s,a){for(var l=this.rcpScaleX,h=this.rcpScaleY,u=c(l/2),f=c(h/2),d=t.imageData,g=d.data,p=t.ctx.createImageData(s,a),v=p.data,m=0;a>m;m++)for(var b=0;s>b;b++){for(var y=4*(b+m*s),x=0,_=0,C=0,w=0,T=0,S=0,O=0,j=(m+.5)*h,P=r(m*h);(m+1)*h>P;P++)for(var E=o(j-(P+.5))/f,k=(b+.5)*l,M=E*E,A=r(b*l);(b+1)*l>A;A++){var D=o(k-(A+.5))/u,F=n(M+D*D);F>1&&-1>F||(x=2*F*F*F-3*F*F+1,x>0&&(D=4*(A+P*e),O+=x*g[D+3],C+=x,g[D+3]<255&&(x=x*g[D+3]/250),w+=x*g[D],T+=x*g[D+1],S+=x*g[D+2],_+=x))}v[y]=w/_,v[y+1]=T/_,v[y+2]=S/_,v[y+3]=O/C}return p},toObject:function(){return{type:this.type,scaleX:this.scaleX,scaleY:this.scaleY,resizeType:this.resizeType,lanczosLobes:this.lanczosLobes}}}),e.Image.filters.Resize.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Contrast=r(i.BaseFilter,{type:"Contrast",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uContrast;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\ncolor.rgb = contrastF * (color.rgb - 0.5) + 0.5;\ngl_FragColor = color;\n}",contrast:0,mainParameter:"contrast",applyTo2d:function(t){if(0!==this.contrast){var e,i,r=t.imageData,n=r.data,i=n.length,o=Math.floor(255*this.contrast),s=259*(o+255)/(255*(259-o));for(e=0;i>e;e+=4)n[e]=s*(n[e]-128)+128,n[e+1]=s*(n[e+1]-128)+128,n[e+2]=s*(n[e+2]-128)+128}},getUniformLocations:function(t,e){return{uContrast:t.getUniformLocation(e,"uContrast")}},sendUniformData:function(t,e){t.uniform1f(e.uContrast,this.contrast)}}),e.Image.filters.Contrast.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Saturation=r(i.BaseFilter,{type:"Saturation",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uSaturation;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat rgMax = max(color.r, color.g);\nfloat rgbMax = max(rgMax, color.b);\ncolor.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\ncolor.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\ncolor.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\ngl_FragColor = color;\n}",saturation:0,mainParameter:"saturation",applyTo2d:function(t){if(0!==this.saturation){var e,i,r=t.imageData,n=r.data,o=n.length,s=-this.saturation;for(e=0;o>e;e+=4)i=Math.max(n[e],n[e+1],n[e+2]),n[e]+=i!==n[e]?(i-n[e])*s:0,n[e+1]+=i!==n[e+1]?(i-n[e+1])*s:0,n[e+2]+=i!==n[e+2]?(i-n[e+2])*s:0}},getUniformLocations:function(t,e){return{uSaturation:t.getUniformLocation(e,"uSaturation")}},sendUniformData:function(t,e){t.uniform1f(e.uSaturation,-this.saturation)}}),e.Image.filters.Saturation.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Blur=r(i.BaseFilter,{type:"Blur",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec2 uDelta;\nvarying vec2 vTexCoord;\nconst float nSamples = 15.0;\nvec3 v3offset = vec3(12.9898, 78.233, 151.7182);\nfloat random(vec3 scale) {\nreturn fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n}\nvoid main() {\nvec4 color = vec4(0.0);\nfloat total = 0.0;\nfloat offset = random(v3offset);\nfor (float t = -nSamples; t <= nSamples; t++) {\nfloat percent = (t + offset - 0.5) / nSamples;\nfloat weight = 1.0 - abs(percent);\ncolor += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\ntotal += weight;\n}\ngl_FragColor = color / total;\n}",blur:0,mainParameter:"blur",applyTo:function(t){t.webgl?(this.aspectRatio=t.sourceWidth/t.sourceHeight,t.passes++,this._setupFrameBuffer(t),this.horizontal=!0,this.applyToWebGL(t),this._swapTextures(t),this._setupFrameBuffer(t),this.horizontal=!1,this.applyToWebGL(t),this._swapTextures(t)):this.applyTo2d(t)},applyTo2d:function(t){t.imageData=this.simpleBlur(t)},simpleBlur:function(t){var i,r,n=t.filterBackend.resources,o=t.imageData.width,a=t.imageData.height;n.blurLayer1||(n.blurLayer1=e.util.createCanvasElement(),n.blurLayer2=e.util.createCanvasElement()),i=n.blurLayer1,r=n.blurLayer2,(i.width!==o||i.height!==a)&&(r.width=i.width=o,r.height=i.height=a);var s,c,l,h,u=i.getContext("2d"),f=r.getContext("2d"),d=15,g=.06*this.blur*.5;for(u.putImageData(t.imageData,0,0),f.clearRect(0,0,o,a),h=-d;d>=h;h++)s=(Math.random()-.5)/4,c=h/d,l=g*c*o+s,f.globalAlpha=1-Math.abs(c),f.drawImage(i,l,s),u.drawImage(r,0,0),f.globalAlpha=1,f.clearRect(0,0,r.width,r.height);for(h=-d;d>=h;h++)s=(Math.random()-.5)/4,c=h/d,l=g*c*a+s,f.globalAlpha=1-Math.abs(c),f.drawImage(i,s,l),u.drawImage(r,0,0),f.globalAlpha=1,f.clearRect(0,0,r.width,r.height);t.ctx.drawImage(i,0,0);var p=t.ctx.getImageData(0,0,i.width,i.height);return u.globalAlpha=1,u.clearRect(0,0,i.width,i.height),p},getUniformLocations:function(t,e){return{delta:t.getUniformLocation(e,"uDelta")}},sendUniformData:function(t,e){var i=this.chooseRightDelta();t.uniform2fv(e.delta,i)},chooseRightDelta:function(){var t,e=1,i=[0,0];return this.horizontal?this.aspectRatio>1&&(e=1/this.aspectRatio):this.aspectRatio<1&&(e=this.aspectRatio),t=e*this.blur*.12,this.horizontal?i[0]=t:i[1]=t,i}}),i.Blur.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Gamma=r(i.BaseFilter,{type:"Gamma",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec3 uGamma;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec3 correction = (1.0 / uGamma);\ncolor.r = pow(color.r, correction.r);\ncolor.g = pow(color.g, correction.g);\ncolor.b = pow(color.b, correction.b);\ngl_FragColor = color;\ngl_FragColor.rgb *= color.a;\n}",gamma:[1,1,1],mainParameter:"gamma",initialize:function(t){this.gamma=[1,1,1],i.BaseFilter.prototype.initialize.call(this,t)},applyTo2d:function(t){var e,i=t.imageData,r=i.data,n=this.gamma,o=r.length,a=1/n[0],s=1/n[1],c=1/n[2];for(this.rVals||(this.rVals=new Uint8Array(256),this.gVals=new Uint8Array(256),this.bVals=new Uint8Array(256)),e=0,o=256;o>e;e++)this.rVals[e]=255*Math.pow(e/255,a),this.gVals[e]=255*Math.pow(e/255,s),this.bVals[e]=255*Math.pow(e/255,c);for(e=0,o=r.length;o>e;e+=4)r[e]=this.rVals[r[e]],r[e+1]=this.gVals[r[e+1]],r[e+2]=this.bVals[r[e+2]]},getUniformLocations:function(t,e){return{uGamma:t.getUniformLocation(e,"uGamma")}},sendUniformData:function(t,e){t.uniform3fv(e.uGamma,this.gamma)}}),e.Image.filters.Gamma.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Composed=r(i.BaseFilter,{type:"Composed",subFilters:[],initialize:function(t){this.callSuper("initialize",t),this.subFilters=this.subFilters.slice(0)},applyTo:function(t){t.passes+=this.subFilters.length-1,this.subFilters.forEach(function(e){e.applyTo(t)})},toObject:function(){return e.util.object.extend(this.callSuper("toObject"),{subFilters:this.subFilters.map(function(t){return t.toObject()})})},isNeutralState:function(){return!this.subFilters.some(function(t){return!t.isNeutralState()})}}),e.Image.filters.Composed.fromObject=function(t,i){var r=t.subFilters||[],n=r.map(function(t){return new e.Image.filters[t.type](t)}),o=new e.Image.filters.Composed({subFilters:n});return i&&i(o),o}}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.HueRotation=r(i.ColorMatrix,{type:"HueRotation",rotation:0,mainParameter:"rotation",calculateMatrix:function(){var t=this.rotation*Math.PI,i=e.util.cos(t),r=e.util.sin(t),n=1/3,o=Math.sqrt(n)*r,a=1-i;this.matrix=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],this.matrix[0]=i+a/3,this.matrix[1]=n*a-o,this.matrix[2]=n*a+o,this.matrix[5]=n*a+o,this.matrix[6]=i+n*a,this.matrix[7]=n*a-o,this.matrix[10]=n*a-o,this.matrix[11]=n*a+o,this.matrix[12]=i+n*a},isNeutralState:function(t){return this.calculateMatrix(),i.BaseFilter.prototype.isNeutralState.call(this,t)},applyTo:function(t){this.calculateMatrix(),i.BaseFilter.prototype.applyTo.call(this,t)}}),e.Image.filters.HueRotation.fromObject=e.Image.filters.BaseFilter.fromObject}("undefined"!=typeof exports?exports:this);!function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.clone;if(e.Text)return void e.warn("fabric.Text is already defined");var r="fontFamily fontWeight fontSize text underline overline linethrough textAlign fontStyle lineHeight textBackgroundColor charSpacing styles direction path pathStartOffset pathSide pathAlign".split(" ");e.Text=e.util.createClass(e.Object,{_dimensionAffectingProps:["fontSize","fontWeight","fontFamily","fontStyle","lineHeight","text","charSpacing","textAlign","styles","path","pathStartOffset","pathSide","pathAlign"],_reNewline:/\r?\n/,_reSpacesAndTabs:/[ \t\r]/g,_reSpaceAndTab:/[ \t\r]/,_reWords:/\S+/g,type:"text",fontSize:40,fontWeight:"normal",fontFamily:"Times New Roman",underline:!1,overline:!1,linethrough:!1,textAlign:"left",fontStyle:"normal",lineHeight:1.16,superscript:{size:.6,baseline:-.35},subscript:{size:.6,baseline:.11},textBackgroundColor:"",stateProperties:e.Object.prototype.stateProperties.concat(r),cacheProperties:e.Object.prototype.cacheProperties.concat(r),stroke:null,shadow:null,path:null,pathStartOffset:0,pathSide:"left",pathAlign:"baseline",_fontSizeFraction:.222,offsets:{underline:.1,linethrough:-.315,overline:-.88},_fontSizeMult:1.13,charSpacing:0,styles:null,_measuringContext:null,deltaY:0,direction:"ltr",_styleProperties:["stroke","strokeWidth","fill","fontFamily","fontSize","fontWeight","fontStyle","underline","overline","linethrough","deltaY","textBackgroundColor"],__charBounds:[],CACHE_FONT_SIZE:400,MIN_TEXT_WIDTH:2,initialize:function(t,e){this.styles=e?e.styles||{}:{},this.text=t,this.__skipDimension=!0,this.callSuper("initialize",e),this.path&&this.setPathInfo(),this.__skipDimension=!1,this.initDimensions(),this.setCoords(),this.setupState({propertySet:"_dimensionAffectingProps"})},setPathInfo:function(){var t=this.path;t&&(t.segmentsInfo=e.util.getPathSegmentsInfo(t.path))},getMeasuringContext:function(){return e._measuringContext||(e._measuringContext=this.canvas&&this.canvas.contextCache||e.util.createCanvasElement().getContext("2d")),e._measuringContext},_splitText:function(){var t=this._splitTextIntoLines(this.text);return this.textLines=t.lines,this._textLines=t.graphemeLines,this._unwrappedTextLines=t._unwrappedLines,this._text=t.graphemeText,t},initDimensions:function(){this.__skipDimension||(this._splitText(),this._clearCache(),this.path?(this.width=this.path.width,this.height=this.path.height):(this.width=this.calcTextWidth()||this.cursorWidth||this.MIN_TEXT_WIDTH,this.height=this.calcTextHeight()),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.saveState({propertySet:"_dimensionAffectingProps"}))},enlargeSpaces:function(){for(var t,e,i,r,n,o,s,a=0,c=this._textLines.length;c>a;a++)if(("justify"===this.textAlign||a!==c-1&&!this.isEndOfWrapping(a))&&(r=0,n=this._textLines[a],e=this.getLineWidth(a),e<this.width&&(s=this.textLines[a].match(this._reSpacesAndTabs)))){i=s.length,t=(this.width-e)/i;for(var h=0,l=n.length;l>=h;h++)o=this.__charBounds[a][h],this._reSpaceAndTab.test(n[h])?(o.width+=t,o.kernedWidth+=t,o.left+=r,r+=t):o.left+=r}},isEndOfWrapping:function(t){return t===this._textLines.length-1},missingNewlineOffset:function(){return 1},toString:function(){return"#<fabric.Text ("+this.complexity()+'): { "text": "'+this.text+'", "fontFamily": "'+this.fontFamily+'" }>'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){if(t.textBaseline="alphabetical",this.path)switch(this.pathAlign){case"center":t.textBaseline="middle";break;case"ascender":t.textBaseline="top";break;case"descender":t.textBaseline="bottom"}t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;i>e;e++){var r=this.getLineWidth(e);r>t&&(t=r)}return t},_renderTextLine:function(t,e,i,r,n,o){this._renderChars(t,e,i,r,n,o)},_renderTextLinesBackground:function(t){if(this.textBackgroundColor||this.styleHas("textBackgroundColor")){for(var e,i,r,n,o,s,a,c=t.fillStyle,h=this._getLeftOffset(),l=this._getTopOffset(),u=0,f=0,d=this.path,g=0,p=this._textLines.length;p>g;g++)if(e=this.getHeightOfLine(g),this.textBackgroundColor||this.styleHas("textBackgroundColor",g)){r=this._textLines[g],i=this._getLineLeftOffset(g),f=0,u=0,n=this.getValueOfPropertyAt(g,0,"textBackgroundColor");for(var v=0,m=r.length;m>v;v++)o=this.__charBounds[g][v],s=this.getValueOfPropertyAt(g,v,"textBackgroundColor"),d?(t.save(),t.translate(o.renderLeft,o.renderTop),t.rotate(o.angle),t.fillStyle=s,s&&t.fillRect(-o.width/2,-e/this.lineHeight*(1-this._fontSizeFraction),o.width,e/this.lineHeight),t.restore()):s!==n?(a=h+i+u,"rtl"===this.direction&&(a=this.width-a-f),t.fillStyle=n,n&&t.fillRect(a,l,f,e/this.lineHeight),u=o.left,f=o.width,n=s):f+=o.kernedWidth;s&&!d&&(a=h+i+u,"rtl"===this.direction&&(a=this.width-a-f),t.fillStyle=s,t.fillRect(a,l,f,e/this.lineHeight)),l+=e}else l+=e;t.fillStyle=c,this._removeShadow(t)}},getFontCache:function(t){var i=t.fontFamily.toLowerCase();e.charWidthsCache[i]||(e.charWidthsCache[i]={});var r=e.charWidthsCache[i],n=t.fontStyle.toLowerCase()+"_"+(t.fontWeight+"").toLowerCase();return r[n]||(r[n]={}),r[n]},_measureChar:function(t,e,i,r){var n,o,s,a,c=this.getFontCache(e),h=this._getFontDeclaration(e),l=this._getFontDeclaration(r),u=i+t,f=h===l,d=e.fontSize/this.CACHE_FONT_SIZE;if(i&&void 0!==c[i]&&(s=c[i]),void 0!==c[t]&&(a=n=c[t]),f&&void 0!==c[u]&&(o=c[u],a=o-s),void 0===n||void 0===s||void 0===o){var g=this.getMeasuringContext();this._setTextStyles(g,e,!0)}return void 0===n&&(a=n=g.measureText(t).width,c[t]=n),void 0===s&&f&&i&&(s=g.measureText(i).width,c[i]=s),f&&void 0===o&&(o=g.measureText(u).width,c[u]=o,a=o-s),{width:n*d,kernedWidth:a*d}},getHeightOfChar:function(t,e){return this.getValueOfPropertyAt(t,e,"fontSize")},measureLine:function(t){var e=this._measureLine(t);return 0!==this.charSpacing&&(e.width-=this._getWidthOfCharSpacing()),e.width<0&&(e.width=0),e},_measureLine:function(t){var i,r,n,o,s,a,c=0,h=this._textLines[t],l=0,u=new Array(h.length),f=0,d=this.path,g="right"===this.pathSide;for(this.__charBounds[t]=u,i=0;i<h.length;i++)r=h[i],o=this._getGraphemeBox(r,t,i,n),u[i]=o,c+=o.kernedWidth,n=r;if(u[i]={left:o?o.left+o.width:0,width:0,kernedWidth:0,height:this.fontSize},d){switch(a=d.segmentsInfo[d.segmentsInfo.length-1].length,s=e.util.getPointOnPath(d.path,0,d.segmentsInfo),s.x+=d.pathOffset.x,s.y+=d.pathOffset.y,this.textAlign){case"left":f=g?a-c:0;break;case"center":f=(a-c)/2;break;case"right":f=g?0:a-c}for(f+=this.pathStartOffset*(g?-1:1),i=g?h.length-1:0;g?i>=0:i<h.length;g?i--:i++)o=u[i],f>a?f%=a:0>f&&(f+=a),this._setGraphemeOnPath(f,o,s),f+=o.kernedWidth}return{width:c,numOfSpaces:l}},_setGraphemeOnPath:function(t,i,r){var n=t+i.kernedWidth/2,o=this.path,s=e.util.getPointOnPath(o.path,n,o.segmentsInfo);i.renderLeft=s.x-r.x,i.renderTop=s.y-r.y,i.angle=s.angle+("right"===this.pathSide?Math.PI:0)},_getGraphemeBox:function(t,e,i,r,n){var o,s=this.getCompleteStyleDeclaration(e,i),a=r?this.getCompleteStyleDeclaration(e,i-1):{},c=this._measureChar(t,s,r,a),h=c.kernedWidth,l=c.width;0!==this.charSpacing&&(o=this._getWidthOfCharSpacing(),l+=o,h+=o);var u={width:l,left:0,height:s.fontSize,kernedWidth:h,deltaY:s.deltaY};if(i>0&&!n){var f=this.__charBounds[e][i-1];u.left=f.left+f.width+c.kernedWidth-c.width}return u},getHeightOfLine:function(t){if(this.__lineHeights[t])return this.__lineHeights[t];for(var e=this._textLines[t],i=this.getHeightOfChar(t,0),r=1,n=e.length;n>r;r++)i=Math.max(this.getHeightOfChar(t,r),i);return this.__lineHeights[t]=i*this.lineHeight*this._fontSizeMult},calcTextHeight:function(){for(var t,e=0,i=0,r=this._textLines.length;r>i;i++)t=this.getHeightOfLine(i),e+=i===r-1?t/this.lineHeight:t;return e},_getLeftOffset:function(){return"ltr"===this.direction?-this.width/2:this.width/2},_getTopOffset:function(){return-this.height/2},_renderTextCommon:function(t,e){t.save();for(var i=0,r=this._getLeftOffset(),n=this._getTopOffset(),o=0,s=this._textLines.length;s>o;o++){var a=this.getHeightOfLine(o),c=a/this.lineHeight,h=this._getLineLeftOffset(o);this._renderTextLine(e,t,this._textLines[o],r+h,n+i+c,o),i+=a}t.restore()},_renderTextFill:function(t){(this.fill||this.styleHas("fill"))&&this._renderTextCommon(t,"fillText")},_renderTextStroke:function(t){(this.stroke&&0!==this.strokeWidth||!this.isEmptyStyles())&&(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this._setLineDash(t,this.strokeDashArray),t.beginPath(),this._renderTextCommon(t,"strokeText"),t.closePath(),t.restore())},_renderChars:function(t,i,r,n,o,s){var a,c,h,l,u,f=this.getHeightOfLine(s),d=-1!==this.textAlign.indexOf("justify"),g="",p=0,v=this.path,m=!d&&0===this.charSpacing&&this.isEmptyStyles(s)&&!v,b="ltr"===this.direction,y="ltr"===this.direction?1:-1,x=i.canvas.getAttribute("dir");if(i.save(),x!==this.direction&&(i.canvas.setAttribute("dir",b?"ltr":"rtl"),i.direction=b?"ltr":"rtl",i.textAlign=b?"left":"right"),o-=f*this._fontSizeFraction/this.lineHeight,m)return this._renderChar(t,i,s,0,r.join(""),n,o,f),void i.restore();for(var _=0,C=r.length-1;C>=_;_++)l=_===C||this.charSpacing||v,g+=r[_],h=this.__charBounds[s][_],0===p?(n+=y*(h.kernedWidth-h.width),p+=h.width):p+=h.kernedWidth,d&&!l&&this._reSpaceAndTab.test(r[_])&&(l=!0),l||(a=a||this.getCompleteStyleDeclaration(s,_),c=this.getCompleteStyleDeclaration(s,_+1),l=e.util.hasStyleChanged(a,c,!1)),l&&(v?(i.save(),i.translate(h.renderLeft,h.renderTop),i.rotate(h.angle),this._renderChar(t,i,s,_,g,-p/2,0,f),i.restore()):(u=n,this._renderChar(t,i,s,_,g,u,o,f)),g="",a=c,n+=y*p,p=0);i.restore()},_applyPatternGradientTransformText:function(t){var i,r=e.util.createCanvasElement(),n=this.width+this.strokeWidth,o=this.height+this.strokeWidth;return r.width=n,r.height=o,i=r.getContext("2d"),i.beginPath(),i.moveTo(0,0),i.lineTo(n,0),i.lineTo(n,o),i.lineTo(0,o),i.closePath(),i.translate(n/2,o/2),i.fillStyle=t.toLive(i),this._applyPatternGradientTransform(i,t),i.fill(),i.createPattern(r,"no-repeat")},handleFiller:function(t,e,i){var r,n;return i.toLive?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?(r=-this.width/2,n=-this.height/2,t.translate(r,n),t[e]=this._applyPatternGradientTransformText(i),{offsetX:r,offsetY:n}):(t[e]=i.toLive(t,this),this._applyPatternGradientTransform(t,i)):(t[e]=i,{offsetX:0,offsetY:0})},_setStrokeStyles:function(t,e){return t.lineWidth=e.strokeWidth,t.lineCap=this.strokeLineCap,t.lineDashOffset=this.strokeDashOffset,t.lineJoin=this.strokeLineJoin,t.miterLimit=this.strokeMiterLimit,this.handleFiller(t,"strokeStyle",e.stroke)},_setFillStyles:function(t,e){return this.handleFiller(t,"fillStyle",e.fill)},_renderChar:function(t,e,i,r,n,o,s){var a,c,h=this._getStyleDeclaration(i,r),l=this.getCompleteStyleDeclaration(i,r),u="fillText"===t&&l.fill,f="strokeText"===t&&l.stroke&&l.strokeWidth;(f||u)&&(e.save(),u&&(a=this._setFillStyles(e,l)),f&&(c=this._setStrokeStyles(e,l)),e.font=this._getFontDeclaration(l),h&&h.textBackgroundColor&&this._removeShadow(e),h&&h.deltaY&&(s+=h.deltaY),u&&e.fillText(n,o-a.offsetX,s-a.offsetY),f&&e.strokeText(n,o-c.offsetX,s-c.offsetY),e.restore())},setSuperscript:function(t,e){return this._setScript(t,e,this.superscript)},setSubscript:function(t,e){return this._setScript(t,e,this.subscript)},_setScript:function(t,e,i){var r=this.get2DCursorLocation(t,!0),n=this.getValueOfPropertyAt(r.lineIndex,r.charIndex,"fontSize"),o=this.getValueOfPropertyAt(r.lineIndex,r.charIndex,"deltaY"),s={fontSize:n*i.size,deltaY:o+n*i.baseline};return this.setSelectionStyles(s,t,e),this},_getLineLeftOffset:function(t){var e,i=this.getLineWidth(t),r=this.width-i,n=this.textAlign,o=this.direction,s=0,e=this.isEndOfWrapping(t);return"justify"===n||"justify-center"===n&&!e||"justify-right"===n&&!e||"justify-left"===n&&!e?0:("center"===n&&(s=r/2),"right"===n&&(s=r),"justify-center"===n&&(s=r/2),"justify-right"===n&&(s=r),"rtl"===o&&(s-=r),s)},_clearCache:function(){this.__lineWidths=[],this.__lineHeights=[],this.__charBounds=[]},_shouldClearDimensionCache:function(){var t=this._forceClearCache;return t||(t=this.hasStateChanged("_dimensionAffectingProps")),t&&(this.dirty=!0,this._forceClearCache=!1),t},getLineWidth:function(t){if(void 0!==this.__lineWidths[t])return this.__lineWidths[t];var e=this.measureLine(t),i=e.width;return this.__lineWidths[t]=i,i},_getWidthOfCharSpacing:function(){return 0!==this.charSpacing?this.fontSize*this.charSpacing/1e3:0},getValueOfPropertyAt:function(t,e,i){var r=this._getStyleDeclaration(t,e);return r&&"undefined"!=typeof r[i]?r[i]:this[i]},_renderTextDecoration:function(t,e){if(this[e]||this.styleHas(e)){for(var i,r,n,o,s,a,c,h,l,u,f,d,g,p,v,m,b=this._getLeftOffset(),y=this._getTopOffset(),x=this.path,_=this._getWidthOfCharSpacing(),C=this.offsets[e],w=0,S=this._textLines.length;S>w;w++)if(i=this.getHeightOfLine(w),this[e]||this.styleHas(e,w)){c=this._textLines[w],p=i/this.lineHeight,o=this._getLineLeftOffset(w),u=0,f=0,h=this.getValueOfPropertyAt(w,0,e),m=this.getValueOfPropertyAt(w,0,"fill"),l=y+p*(1-this._fontSizeFraction),r=this.getHeightOfChar(w,0),s=this.getValueOfPropertyAt(w,0,"deltaY");for(var T=0,O=c.length;O>T;T++)if(d=this.__charBounds[w][T],g=this.getValueOfPropertyAt(w,T,e),v=this.getValueOfPropertyAt(w,T,"fill"),n=this.getHeightOfChar(w,T),a=this.getValueOfPropertyAt(w,T,"deltaY"),x&&g&&v)t.save(),t.fillStyle=m,t.translate(d.renderLeft,d.renderTop),t.rotate(d.angle),t.fillRect(-d.kernedWidth/2,C*n+a,d.kernedWidth,this.fontSize/15),t.restore();else if((g!==h||v!==m||n!==r||a!==s)&&f>0){var j=b+o+u;"rtl"===this.direction&&(j=this.width-j-f),h&&m&&(t.fillStyle=m,t.fillRect(j,l+C*r+s,f,this.fontSize/15)),u=d.left,f=d.width,h=g,m=v,r=n,s=a}else f+=d.kernedWidth;var j=b+o+u;"rtl"===this.direction&&(j=this.width-j-f),t.fillStyle=v,g&&v&&t.fillRect(j,l+C*r+s,f-_,this.fontSize/15),y+=i}else y+=i;this._removeShadow(t)}},_getFontDeclaration:function(t,i){var r=t||this,n=this.fontFamily,o=e.Text.genericFonts.indexOf(n.toLowerCase())>-1,s=void 0===n||n.indexOf("'")>-1||n.indexOf(",")>-1||n.indexOf('"')>-1||o?r.fontFamily:'"'+r.fontFamily+'"';return[e.isLikelyNode?r.fontWeight:r.fontStyle,e.isLikelyNode?r.fontStyle:r.fontWeight,i?this.CACHE_FONT_SIZE+"px":r.fontSize+"px",s].join(" ")},render:function(t){this.visible&&(!this.canvas||!this.canvas.skipOffscreen||this.group||this.isOnScreen())&&(this._shouldClearDimensionCache()&&this.initDimensions(),this.callSuper("render",t))},_splitTextIntoLines:function(t){for(var i=t.split(this._reNewline),r=new Array(i.length),n=["\n"],o=[],s=0;s<i.length;s++)r[s]=e.util.string.graphemeSplit(i[s]),o=o.concat(r[s],n);return o.pop(),{_unwrappedLines:r,lines:i,graphemeText:o,graphemeLines:r}},toObject:function(t){var i=r.concat(t),n=this.callSuper("toObject",i);return n.styles=e.util.stylesToArray(this.styles,this.text),n.path&&(n.path=this.path.toObject()),n},set:function(t,e){this.callSuper("set",t,e);var i=!1,r=!1;if("object"==typeof t)for(var n in t)"path"===n&&this.setPathInfo(),i=i||-1!==this._dimensionAffectingProps.indexOf(n),r=r||"path"===n;else i=-1!==this._dimensionAffectingProps.indexOf(t),r="path"===t;return r&&this.setPathInfo(),i&&(this.initDimensions(),this.setCoords()),this},complexity:function(){return 1}}),e.Text.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor".split(" ")),e.Text.DEFAULT_SVG_FONT_SIZE=16,e.Text.fromElement=function(t,r,n){if(!t)return r(null);var o=e.parseAttributes(t,e.Text.ATTRIBUTE_NAMES),s=o.textAnchor||"left";if(n=e.util.object.extend(n?i(n):{},o),n.top=n.top||0,n.left=n.left||0,o.textDecoration){var a=o.textDecoration;-1!==a.indexOf("underline")&&(n.underline=!0),-1!==a.indexOf("overline")&&(n.overline=!0),-1!==a.indexOf("line-through")&&(n.linethrough=!0),delete n.textDecoration}"dx"in o&&(n.left+=o.dx),"dy"in o&&(n.top+=o.dy),"fontSize"in n||(n.fontSize=e.Text.DEFAULT_SVG_FONT_SIZE);var c="";"textContent"in t?c=t.textContent:"firstChild"in t&&null!==t.firstChild&&"data"in t.firstChild&&null!==t.firstChild.data&&(c=t.firstChild.data),c=c.replace(/^\s+|\s+$|\n+/g,"").replace(/\s+/g," ");var h=n.strokeWidth;n.strokeWidth=0;var l=new e.Text(c,n),u=l.getScaledHeight()/l.height,f=(l.height+l.strokeWidth)*l.lineHeight-l.height,d=f*u,g=l.getScaledHeight()+d,p=0;"center"===s&&(p=l.getScaledWidth()/2),"right"===s&&(p=l.getScaledWidth()),l.set({left:l.left-p,top:l.top-(g-l.fontSize*(.07+l._fontSizeFraction))/l.lineHeight,strokeWidth:"undefined"!=typeof h?h:1}),r(l)},e.Text.fromObject=function(t,r){var n=i(t),o=t.path;return delete n.path,e.Object._fromObject("Text",n,function(i){i.styles=e.util.stylesFromArray(t.styles,t.text),o?e.Object._fromObject("Path",o,function(t){i.set("path",t),r(i)},"path"):r(i)},"text")},e.Text.genericFonts=["sans-serif","serif","cursive","fantasy","monospace"],e.util.createAccessors&&e.util.createAccessors(e.Text)}("undefined"!=typeof exports?exports:this);!function(){fabric.util.object.extend(fabric.Text.prototype,{isEmptyStyles:function(t){if(!this.styles)return!0;if("undefined"!=typeof t&&!this.styles[t])return!0;var e="undefined"==typeof t?this.styles:{line:this.styles[t]};for(var i in e)for(var r in e[i])for(var n in e[i][r])return!1;return!0},styleHas:function(t,e){if(!this.styles||!t||""===t)return!1;if("undefined"!=typeof e&&!this.styles[e])return!1;var i="undefined"==typeof e?this.styles:{0:this.styles[e]};for(var r in i)for(var n in i[r])if("undefined"!=typeof i[r][n][t])return!0;return!1},cleanStyle:function(t){if(!this.styles||!t||""===t)return!1;var e,i,r,n=this.styles,o=0,s=!0,a=0;for(var c in n){e=0;for(var h in n[c]){var r=n[c][h],l=r.hasOwnProperty(t);o++,l?(i?r[t]!==i&&(s=!1):i=r[t],r[t]===this[t]&&delete r[t]):s=!1,0!==Object.keys(r).length?e++:delete n[c][h]}0===e&&delete n[c]}for(var u=0;u<this._textLines.length;u++)a+=this._textLines[u].length;s&&o===a&&(this[t]=i,this.removeStyle(t))},removeStyle:function(t){if(this.styles&&t&&""!==t){var e,i,r,n=this.styles;for(i in n){e=n[i];for(r in e)delete e[r][t],0===Object.keys(e[r]).length&&delete e[r];0===Object.keys(e).length&&delete n[i]}}},_extendStyles:function(t,e){var i=this.get2DCursorLocation(t);this._getLineStyle(i.lineIndex)||this._setLineStyle(i.lineIndex),this._getStyleDeclaration(i.lineIndex,i.charIndex)||this._setStyleDeclaration(i.lineIndex,i.charIndex,{}),fabric.util.object.extend(this._getStyleDeclaration(i.lineIndex,i.charIndex),e)},get2DCursorLocation:function(t,e){"undefined"==typeof t&&(t=this.selectionStart);for(var i=e?this._unwrappedTextLines:this._textLines,r=i.length,n=0;r>n;n++){if(t<=i[n].length)return{lineIndex:n,charIndex:t};t-=i[n].length+this.missingNewlineOffset(n)}return{lineIndex:n-1,charIndex:i[n-1].length<t?i[n-1].length:t}},getSelectionStyles:function(t,e,i){"undefined"==typeof t&&(t=this.selectionStart||0),"undefined"==typeof e&&(e=this.selectionEnd||t);for(var r=[],n=t;e>n;n++)r.push(this.getStyleAtPosition(n,i));return r},getStyleAtPosition:function(t,e){var i=this.get2DCursorLocation(t),r=e?this.getCompleteStyleDeclaration(i.lineIndex,i.charIndex):this._getStyleDeclaration(i.lineIndex,i.charIndex);return r||{}},setSelectionStyles:function(t,e,i){"undefined"==typeof e&&(e=this.selectionStart||0),"undefined"==typeof i&&(i=this.selectionEnd||e);for(var r=e;i>r;r++)this._extendStyles(r,t);return this._forceClearCache=!0,this},_getStyleDeclaration:function(t,e){var i=this.styles&&this.styles[t];return i?i[e]:null},getCompleteStyleDeclaration:function(t,e){for(var i,r=this._getStyleDeclaration(t,e)||{},n={},o=0;o<this._styleProperties.length;o++)i=this._styleProperties[o],n[i]="undefined"==typeof r[i]?this[i]:r[i];return n},_setStyleDeclaration:function(t,e,i){this.styles[t][e]=i},_deleteStyleDeclaration:function(t,e){delete this.styles[t][e]},_getLineStyle:function(t){return!!this.styles[t]},_setLineStyle:function(t){this.styles[t]={}},_deleteLineStyle:function(t){delete this.styles[t]}})}();!function(){function t(t){t.textDecoration&&(t.textDecoration.indexOf("underline")>-1&&(t.underline=!0),t.textDecoration.indexOf("line-through")>-1&&(t.linethrough=!0),t.textDecoration.indexOf("overline")>-1&&(t.overline=!0),delete t.textDecoration)}fabric.IText=fabric.util.createClass(fabric.Text,fabric.Observable,{type:"i-text",selectionStart:0,selectionEnd:0,selectionColor:"rgba(17,119,255,0.3)",isEditing:!1,editable:!0,editingBorderColor:"rgba(102,153,255,0.25)",cursorWidth:2,cursorColor:"",cursorDelay:1e3,cursorDuration:600,caching:!0,hiddenTextareaContainer:null,_reSpace:/\s|\n/,_currentCursorOpacity:0,_selectionDirection:null,_abortCursorAnimation:!1,__widthOfSpace:[],inCompositionMode:!1,initialize:function(t,e){this.callSuper("initialize",t,e),this.initBehavior()},setSelectionStart:function(t){t=Math.max(t,0),this._updateAndFire("selectionStart",t)},setSelectionEnd:function(t){t=Math.min(t,this.text.length),this._updateAndFire("selectionEnd",t)},_updateAndFire:function(t,e){this[t]!==e&&(this._fireSelectionChanged(),this[t]=e),this._updateTextarea()},_fireSelectionChanged:function(){this.fire("selection:changed"),this.canvas&&this.canvas.fire("text:selection:changed",{target:this})},initDimensions:function(){this.isEditing&&this.initDelayedCursor(),this.clearContextTop(),this.callSuper("initDimensions")},render:function(t){this.clearContextTop(),this.callSuper("render",t),this.cursorOffsetCache={},this.renderCursorOrSelection()},_render:function(t){this.callSuper("_render",t)},clearContextTop:function(t){if(this.isEditing&&this.canvas&&this.canvas.contextTop){var e=this.canvas.contextTop,i=this.canvas.viewportTransform;e.save(),e.transform(i[0],i[1],i[2],i[3],i[4],i[5]),this.transform(e),this._clearTextArea(e),t||e.restore()}},renderCursorOrSelection:function(){if(this.isEditing&&this.canvas&&this.canvas.contextTop){var t=this._getCursorBoundaries(),e=this.canvas.contextTop;this.clearContextTop(!0),this.selectionStart===this.selectionEnd?this.renderCursor(t,e):this.renderSelection(t,e),e.restore()}},_clearTextArea:function(t){var e=this.width+4,i=this.height+4;t.clearRect(-e/2,-i/2,e,i)},_getCursorBoundaries:function(t){"undefined"==typeof t&&(t=this.selectionStart);var e=this._getLeftOffset(),i=this._getTopOffset(),r=this._getCursorBoundariesOffsets(t);return{left:e,top:i,leftOffset:r.left,topOffset:r.top}},_getCursorBoundariesOffsets:function(t){if(this.cursorOffsetCache&&"top"in this.cursorOffsetCache)return this.cursorOffsetCache;var e,i,r,n,o=0,s=0,a=this.get2DCursorLocation(t);r=a.charIndex,i=a.lineIndex;for(var c=0;i>c;c++)o+=this.getHeightOfLine(c);e=this._getLineLeftOffset(i);var h=this.__charBounds[i][r];return h&&(s=h.left),0!==this.charSpacing&&r===this._textLines[i].length&&(s-=this._getWidthOfCharSpacing()),n={top:o,left:e+(s>0?s:0)},"rtl"===this.direction&&(n.left*=-1),this.cursorOffsetCache=n,this.cursorOffsetCache},renderCursor:function(t,e){var i=this.get2DCursorLocation(),r=i.lineIndex,n=i.charIndex>0?i.charIndex-1:0,o=this.getValueOfPropertyAt(r,n,"fontSize"),s=this.scaleX*this.canvas.getZoom(),a=this.cursorWidth/s,c=t.topOffset,h=this.getValueOfPropertyAt(r,n,"deltaY");c+=(1-this._fontSizeFraction)*this.getHeightOfLine(r)/this.lineHeight-o*(1-this._fontSizeFraction),this.inCompositionMode&&this.renderSelection(t,e),e.fillStyle=this.cursorColor||this.getValueOfPropertyAt(r,n,"fill"),e.globalAlpha=this.__isMousedown?1:this._currentCursorOpacity,e.fillRect(t.left+t.leftOffset-a/2,c+t.top+h,a,o)},renderSelection:function(t,e){for(var i=this.inCompositionMode?this.hiddenTextarea.selectionStart:this.selectionStart,r=this.inCompositionMode?this.hiddenTextarea.selectionEnd:this.selectionEnd,n=-1!==this.textAlign.indexOf("justify"),o=this.get2DCursorLocation(i),s=this.get2DCursorLocation(r),a=o.lineIndex,c=s.lineIndex,h=o.charIndex<0?0:o.charIndex,l=s.charIndex<0?0:s.charIndex,u=a;c>=u;u++){var f=this._getLineLeftOffset(u)||0,d=this.getHeightOfLine(u),g=0,p=0,v=0;if(u===a&&(p=this.__charBounds[a][h].left),u>=a&&c>u)v=n&&!this.isEndOfWrapping(u)?this.width:this.getLineWidth(u)||5;else if(u===c)if(0===l)v=this.__charBounds[c][l].left;else{var m=this._getWidthOfCharSpacing();v=this.__charBounds[c][l-1].left+this.__charBounds[c][l-1].width-m}g=d,(this.lineHeight<1||u===c&&this.lineHeight>1)&&(d/=this.lineHeight);var b=t.left+f+p,y=v-p,x=d,_=0;this.inCompositionMode?(e.fillStyle=this.compositionColor||"black",x=1,_=d):e.fillStyle=this.selectionColor,"rtl"===this.direction&&(b=this.width-b-y),e.fillRect(b,t.top+t.topOffset+_,y,x),t.topOffset+=g}},getCurrentCharFontSize:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fontSize")},getCurrentCharColor:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fill")},_getCurrentCharIndex:function(){var t=this.get2DCursorLocation(this.selectionStart,!0),e=t.charIndex>0?t.charIndex-1:0;return{l:t.lineIndex,c:e}}}),fabric.IText.fromObject=function(e,i){if(e.styles=fabric.util.stylesFromArray(e.styles,e.text),t(e),e.styles)for(var r in e.styles)for(var n in e.styles[r])t(e.styles[r][n]);fabric.Object._fromObject("IText",e,i,"text")}}();!function(){var t=fabric.util.object.clone;fabric.util.object.extend(fabric.IText.prototype,{initBehavior:function(){this.initAddedHandler(),this.initRemovedHandler(),this.initCursorSelectionHandlers(),this.initDoubleClickSimulation(),this.mouseMoveHandler=this.mouseMoveHandler.bind(this)},onDeselect:function(){this.isEditing&&this.exitEditing(),this.selected=!1},initAddedHandler:function(){var t=this;this.on("added",function(){var e=t.canvas;e&&(e._hasITextHandlers||(e._hasITextHandlers=!0,t._initCanvasHandlers(e)),e._iTextInstances=e._iTextInstances||[],e._iTextInstances.push(t))})},initRemovedHandler:function(){var t=this;this.on("removed",function(){var e=t.canvas;e&&(e._iTextInstances=e._iTextInstances||[],fabric.util.removeFromArray(e._iTextInstances,t),0===e._iTextInstances.length&&(e._hasITextHandlers=!1,t._removeCanvasHandlers(e)))})},_initCanvasHandlers:function(t){t._mouseUpITextHandler=function(){t._iTextInstances&&t._iTextInstances.forEach(function(t){t.__isMousedown=!1})},t.on("mouse:up",t._mouseUpITextHandler)},_removeCanvasHandlers:function(t){t.off("mouse:up",t._mouseUpITextHandler)},_tick:function(){this._currentTickState=this._animateCursor(this,1,this.cursorDuration,"_onTickComplete")},_animateCursor:function(t,e,i,r){var n;return n={isAborted:!1,abort:function(){this.isAborted=!0}},t.animate("_currentCursorOpacity",e,{duration:i,onComplete:function(){n.isAborted||t[r]()},onChange:function(){t.canvas&&t.selectionStart===t.selectionEnd&&t.renderCursorOrSelection()},abort:function(){return n.isAborted}}),n},_onTickComplete:function(){var t=this;this._cursorTimeout1&&clearTimeout(this._cursorTimeout1),this._cursorTimeout1=setTimeout(function(){t._currentTickCompleteState=t._animateCursor(t,0,this.cursorDuration/2,"_tick")},100)},initDelayedCursor:function(t){var e=this,i=t?0:this.cursorDelay;this.abortCursorAnimation(),this._currentCursorOpacity=1,this._cursorTimeout2=setTimeout(function(){e._tick()},i)},abortCursorAnimation:function(){var t=this._currentTickState||this._currentTickCompleteState,e=this.canvas;this._currentTickState&&this._currentTickState.abort(),this._currentTickCompleteState&&this._currentTickCompleteState.abort(),clearTimeout(this._cursorTimeout1),clearTimeout(this._cursorTimeout2),this._currentCursorOpacity=0,t&&e&&e.clearContext(e.contextTop||e.contextContainer)},selectAll:function(){return this.selectionStart=0,this.selectionEnd=this._text.length,this._fireSelectionChanged(),this._updateTextarea(),this},getSelectedText:function(){return this._text.slice(this.selectionStart,this.selectionEnd).join("")},findWordBoundaryLeft:function(t){var e=0,i=t-1;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i--;for(;/\S/.test(this._text[i])&&i>-1;)e++,i--;return t-e},findWordBoundaryRight:function(t){var e=0,i=t;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i++;for(;/\S/.test(this._text[i])&&i<this._text.length;)e++,i++;return t+e},findLineBoundaryLeft:function(t){for(var e=0,i=t-1;!/\n/.test(this._text[i])&&i>-1;)e++,i--;return t-e},findLineBoundaryRight:function(t){for(var e=0,i=t;!/\n/.test(this._text[i])&&i<this._text.length;)e++,i++;return t+e},searchWordBoundary:function(t,e){for(var i=this._text,r=this._reSpace.test(i[t])?t-1:t,n=i[r],s=fabric.reNonWord;!s.test(n)&&r>0&&r<i.length;)r+=e,n=i[r];return s.test(n)&&(r+=1===e?0:1),r},selectWord:function(t){t=t||this.selectionStart;var e=this.searchWordBoundary(t,-1),i=this.searchWordBoundary(t,1);this.selectionStart=e,this.selectionEnd=i,this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()},selectLine:function(t){t=t||this.selectionStart;var e=this.findLineBoundaryLeft(t),i=this.findLineBoundaryRight(t);return this.selectionStart=e,this.selectionEnd=i,this._fireSelectionChanged(),this._updateTextarea(),this},enterEditing:function(t){return!this.isEditing&&this.editable?(this.canvas&&(this.canvas.calcOffset(),this.exitEditingOnOthers(this.canvas)),this.isEditing=!0,this.initHiddenTextarea(t),this.hiddenTextarea.focus(),this.hiddenTextarea.value=this.text,this._updateTextarea(),this._saveEditingProps(),this._setEditingProps(),this._textBeforeEdit=this.text,this._tick(),this.fire("editing:entered"),this._fireSelectionChanged(),this.canvas?(this.canvas.fire("text:editing:entered",{target:this}),this.initMouseMoveHandler(),this.canvas.requestRenderAll(),this):this):void 0},exitEditingOnOthers:function(t){t._iTextInstances&&t._iTextInstances.forEach(function(t){t.selected=!1,t.isEditing&&t.exitEditing()})},initMouseMoveHandler:function(){this.canvas.on("mouse:move",this.mouseMoveHandler)},mouseMoveHandler:function(t){if(this.__isMousedown&&this.isEditing){var e=this.getSelectionStartFromPointer(t.e),i=this.selectionStart,r=this.selectionEnd;(e===this.__selectionStartOnMouseDown&&i!==r||i!==e&&r!==e)&&(e>this.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),(this.selectionStart!==i||this.selectionEnd!==r)&&(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var r=i.slice(0,t),n=fabric.util.string.graphemeSplit(r).length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e),o=fabric.util.string.graphemeSplit(s).length;return{selectionStart:n,selectionEnd:n+o}},fromGraphemeToStringSelection:function(t,e,i){var r=i.slice(0,t),n=r.join("").length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e),o=s.join("").length;return{selectionStart:n,selectionEnd:n+o}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,e=this._getCursorBoundaries(t),i=this.get2DCursorLocation(t),r=i.lineIndex,n=i.charIndex,s=this.getValueOfPropertyAt(r,n,"fontSize")*this.lineHeight,o=e.leftOffset,a=this.calcTransformMatrix(),c={x:e.left+o,y:e.top+e.topOffset+s},h=this.canvas.getRetinaScaling(),l=this.canvas.upperCanvasEl,u=l.width/h,f=l.height/h,d=u-s,g=f-s,p=l.clientWidth/u,v=l.clientHeight/f;return c=fabric.util.transformPoint(c,a),c=fabric.util.transformPoint(c,this.canvas.viewportTransform),c.x*=p,c.y*=v,c.x<0&&(c.x=0),c.x>d&&(c.x=d),c.y<0&&(c.y=0),c.y>g&&(c.y=g),c.x+=this.canvas._offset.left,c.y+=this.canvas._offset.top,{left:c.x+"px",top:c.y+"px",fontSize:s+"px",charHeight:s}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor))},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,r,n=this.get2DCursorLocation(t,!0),s=this.get2DCursorLocation(e,!0),o=n.lineIndex,a=n.charIndex,c=s.lineIndex,h=s.charIndex;if(o!==c){if(this.styles[o])for(i=a;i<this._unwrappedTextLines[o].length;i++)delete this.styles[o][i];if(this.styles[c])for(i=h;i<this._unwrappedTextLines[c].length;i++)r=this.styles[c][i],r&&(this.styles[o]||(this.styles[o]={}),this.styles[o][a+i-h]=r);for(i=o+1;c>=i;i++)delete this.styles[i];this.shiftLineStyles(c,o-c)}else if(this.styles[o]){r=this.styles[o];var l,u,f=h-a;for(i=a;h>i;i++)delete r[i];for(u in this.styles[o])l=parseInt(u,10),l>=h&&(r[l-f]=r[u],delete r[u])}},shiftLineStyles:function(e,i){var r=t(this.styles);for(var n in this.styles){var s=parseInt(n,10);s>e&&(this.styles[s+i]=r[s],r[s-i]||delete this.styles[s])}},restartCursorIfNeeded:function(){(!this._currentTickState||this._currentTickState.isAborted||!this._currentTickCompleteState||this._currentTickCompleteState.isAborted)&&this.initDelayedCursor()},insertNewlineStyleObject:function(e,i,r,n){var s,o={},a=!1,c=this._unwrappedTextLines[e].length===i;r||(r=1),this.shiftLineStyles(e,r),this.styles[e]&&(s=this.styles[e][0===i?i:i-1]);for(var h in this.styles[e]){var l=parseInt(h,10);l>=i&&(a=!0,o[l-i]=this.styles[e][h],c&&0===i||delete this.styles[e][h])}var u=!1;for(a&&!c&&(this.styles[e+r]=o,u=!0),u&&r--;r>0;)n&&n[r-1]?this.styles[e+r]={0:t(n[r-1])}:s?this.styles[e+r]={0:t(s)}:delete this.styles[e+r],r--;this._forceClearCache=!0},insertCharStyleObject:function(e,i,r,n){this.styles||(this.styles={});var s=this.styles[e],o=s?t(s):{};r||(r=1);for(var a in o){var c=parseInt(a,10);c>=i&&(s[c+r]=o[c],o[c-r]||delete s[c])}if(this._forceClearCache=!0,n)for(;r--;)Object.keys(n[r]).length&&(this.styles[e]||(this.styles[e]={}),this.styles[e][i+r]=t(n[r]));else if(s)for(var h=s[i?i-1:1];h&&r--;)this.styles[e][i+r]=t(h)},insertNewStyleBlock:function(t,e,i){for(var r=this.get2DCursorLocation(e,!0),n=[0],s=0,o=0;o<t.length;o++)"\n"===t[o]?(s++,n[s]=0):n[s]++;n[0]>0&&(this.insertCharStyleObject(r.lineIndex,r.charIndex,n[0],i),i=i&&i.slice(n[0]+1)),s&&this.insertNewlineStyleObject(r.lineIndex,r.charIndex+n[0],s);for(var o=1;s>o;o++)n[o]>0?this.insertCharStyleObject(r.lineIndex+o,0,n[o],i):i&&this.styles[r.lineIndex+o]&&i[0]&&(this.styles[r.lineIndex+o][0]=i[0]),i=i&&i.slice(n[o]+1);n[o]>0&&this.insertCharStyleObject(r.lineIndex+o,0,n[o],i)},setSelectionStartEndWithShift:function(t,e,i){t>=i?(e===t?this._selectionDirection="left":"right"===this._selectionDirection&&(this._selectionDirection="left",this.selectionEnd=t),this.selectionStart=i):i>t&&e>i?"right"===this._selectionDirection?this.selectionEnd=i:this.selectionStart=i:(e===t?this._selectionDirection="right":"left"===this._selectionDirection&&(this._selectionDirection="right",this.selectionStart=e),this.selectionEnd=i)},setSelectionInBoundaries:function(){var t=this.text.length;this.selectionStart>t?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}})}();fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,r=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,r,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i,r=this.getLocalPointer(t),n=0,o=0,s=0,a=0,c=0,h=0,l=this._textLines.length;l>h&&s<=r.y;h++)s+=this.getHeightOfLine(h)*this.scaleY,c=h,h>0&&(a+=this._textLines[h-1].length+this.missingNewlineOffset(h-1));e=this._getLineLeftOffset(c),o=e*this.scaleX,i=this._textLines[c],"rtl"===this.direction&&(r.x=this.width*this.scaleX-r.x+o);for(var u=0,f=i.length;f>u&&(n=o,o+=this.__charBounds[c][u].kernedWidth*this.scaleX,o<=r.x);u++)a++;return this._getNewSelectionStartFromOffset(r,n,o,a,f)},_getNewSelectionStartFromOffset:function(t,e,i,r,n){var o=t.x-e,s=i-t.x,a=s>o||0>s?0:1,c=r+a;return this.flipX&&(c=n-c),c>this._text.length&&(c=this._text.length),c}});fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; paddingｰtop: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),fabric.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),fabric.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown&&(t.ctrlKey||t.metaKey)))return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),t.keyCode>=33&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){return!this.isEditing||this._copyDone||this.inCompositionMode?void(this._copyDone=!1):void(t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll()))},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,r,n,o,s,a=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,c=this._text.length,h=a.length,l=h-c,u=this.selectionStart,f=this.selectionEnd,d=u!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var g=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),p=u>g.selectionStart;d?(i=this._text.slice(u,f),l+=f-u):c>h&&(i=p?this._text.slice(f+l,f):this._text.slice(u,u-l)),r=a.slice(g.selectionEnd-l,g.selectionEnd),i&&i.length&&(r.length&&(n=this.getSelectionStyles(u,u+1,!1),n=r.map(function(){return n[0]})),d?(o=u,s=f):p?(o=f-i.length,s=f):(o=f,s=f+i.length),this.removeStyleFromTo(o,s)),r.length&&(e&&r.join("")===fabric.copiedText&&!fabric.disableStyleCopyPaste&&(n=fabric.copiedTextStyle),this.insertNewStyleBlock(r,u,n)),this.updateFromTextArea(),this.fire("changed"),this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll())}},onCompositionStart:function(){this.inCompositionMode=!0},onCompositionEnd:function(){this.inCompositionMode=!1},onCompositionUpdate:function(t){this.compositionStart=t.target.selectionStart,this.compositionEnd=t.target.selectionEnd,this.updateTextareaPosition()},copy:function(){this.selectionStart!==this.selectionEnd&&(fabric.copiedText=this.getSelectedText(),fabric.copiedTextStyle=fabric.disableStyleCopyPaste?null:this.getSelectionStyles(this.selectionStart,this.selectionEnd,!0),this._copyDone=!0)},paste:function(){this.fromPaste=!0},_getClipboardData:function(t){return t&&t.clipboardData||fabric.window.clipboardData},_getWidthBeforeCursor:function(t,e){var i,r=this._getLineLeftOffset(t);return e>0&&(i=this.__charBounds[t][e-1],r+=i.left+i.width),r},getDownCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(n===this._textLines.length-1||t.metaKey||34===t.keyCode)return this._text.length-i;var o=r.charIndex,s=this._getWidthBeforeCursor(n,o),a=this._getIndexOnLine(n+1,s),c=this._textLines[n].slice(o);return c.length+a+1+this.missingNewlineOffset(n)},_getSelectionForOffset:function(t,e){return t.shiftKey&&this.selectionStart!==this.selectionEnd&&e?this.selectionEnd:this.selectionStart},getUpCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(0===n||t.metaKey||33===t.keyCode)return-i;var o=r.charIndex,s=this._getWidthBeforeCursor(n,o),a=this._getIndexOnLine(n-1,s),c=this._textLines[n].slice(0,o),h=this.missingNewlineOffset(n-1);return-this._textLines[n-1].length+a-c.length+(1-h)},_getIndexOnLine:function(t,e){for(var i,r,n=this._textLines[t],o=this._getLineLeftOffset(t),s=o,a=0,c=0,h=n.length;h>c;c++)if(i=this.__charBounds[t][c].width,s+=i,s>e){r=!0;var l=s-i,u=s,f=Math.abs(l-e),d=Math.abs(u-e);a=f>d?c:c-1;break}return r||(a=n.length-1),a},moveCursorDown:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){(0!==this.selectionStart||0!==this.selectionEnd)&&this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i="get"+t+"CursorOffset",r=this[i](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(r):this.moveCursorWithoutShift(r),0!==r&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return 0>t?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){(0!==this.selectionStart||0!==this.selectionEnd)&&this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var r;if(t.altKey)r=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;r=this["findLineBoundary"+i](this[e])}return void 0!==typeof r&&this[e]!==r?(this[e]=r,!0):void 0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,i+=e.shiftKey?"Shift":"outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){"undefined"==typeof e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,r){"undefined"==typeof r&&(r=i),r>i&&this.removeStyleFromTo(i,r);var n=fabric.util.string.graphemeSplit(t);this.insertNewStyleBlock(n,i,e),this._text=[].concat(this._text.slice(0,i),n,this._text.slice(r)),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()}});!function(){var t=fabric.util.toFixed,e=/  +/g;fabric.util.object.extend(fabric.Text.prototype,{_toSVG:function(){var t=this._getSVGLeftTopOffsets(),e=this._getSVGTextAndBg(t.textTop,t.textLeft);return this._wrapSVGTextAndBg(e)},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,noStyle:!0,withShadow:!0})},_getSVGLeftTopOffsets:function(){return{textLeft:-this.width/2,textTop:-this.height/2,lineTop:this.getHeightOfLine(0)}},_wrapSVGTextAndBg:function(t){var e=!0,i=this.getSvgTextDecoration(this);return[t.textBgRects.join(""),'		<text xml:space="preserve" ',this.fontFamily?'font-family="'+this.fontFamily.replace(/"/g,"'")+'" ':"",this.fontSize?'font-size="'+this.fontSize+'" ':"",this.fontStyle?'font-style="'+this.fontStyle+'" ':"",this.fontWeight?'font-weight="'+this.fontWeight+'" ':"",i?'text-decoration="'+i+'" ':"",'style="',this.getSvgStyles(e),'"',this.addPaintOrder()," >",t.textSpans.join(""),"</text>\n"]},_getSVGTextAndBg:function(t,e){var i,r=[],n=[],o=t;this._setSVGBg(n);for(var s=0,a=this._textLines.length;a>s;s++)i=this._getLineLeftOffset(s),(this.textBackgroundColor||this.styleHas("textBackgroundColor",s))&&this._setSVGTextLineBg(n,s,e+i,o),this._setSVGTextLineText(r,s,e+i,o),o+=this.getHeightOfLine(s);return{textSpans:r,textBgRects:n}},_createTextCharSpan:function(i,r,n,o){var s=i!==i.trim()||i.match(e),a=this.getSvgSpanStyles(r,s),c=a?'style="'+a+'"':"",h=r.deltaY,l="",u=fabric.Object.NUM_FRACTION_DIGITS;return h&&(l=' dy="'+t(h,u)+'" '),['<tspan x="',t(n,u),'" y="',t(o,u),'" ',l,c,">",fabric.util.string.escapeXml(i),"</tspan>"].join("")},_setSVGTextLineText:function(t,e,i,r){var n,o,s,a,c,h=this.getHeightOfLine(e),l=-1!==this.textAlign.indexOf("justify"),u="",f=0,d=this._textLines[e];r+=h*(1-this._fontSizeFraction)/this.lineHeight;for(var g=0,p=d.length-1;p>=g;g++)c=g===p||this.charSpacing,u+=d[g],s=this.__charBounds[e][g],0===f?(i+=s.kernedWidth-s.width,f+=s.width):f+=s.kernedWidth,l&&!c&&this._reSpaceAndTab.test(d[g])&&(c=!0),c||(n=n||this.getCompleteStyleDeclaration(e,g),o=this.getCompleteStyleDeclaration(e,g+1),c=fabric.util.hasStyleChanged(n,o,!0)),c&&(a=this._getStyleDeclaration(e,g)||{},t.push(this._createTextCharSpan(u,a,i,r)),u="",n=o,i+=f,f=0)},_pushTextBgRect:function(e,i,r,n,o,s){var a=fabric.Object.NUM_FRACTION_DIGITS;e.push("		<rect ",this._getFillAttributes(i),' x="',t(r,a),'" y="',t(n,a),'" width="',t(o,a),'" height="',t(s,a),'"></rect>\n')},_setSVGTextLineBg:function(t,e,i,r){for(var n,o,s=this._textLines[e],a=this.getHeightOfLine(e)/this.lineHeight,c=0,h=0,l=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),u=0,f=s.length;f>u;u++)n=this.__charBounds[e][u],o=this.getValueOfPropertyAt(e,u,"textBackgroundColor"),o!==l?(l&&this._pushTextBgRect(t,l,i+h,r,c,a),h=n.left,c=n.width,l=o):c+=n.kernedWidth;o&&this._pushTextBgRect(t,o,i+h,r,c,a)},_getFillAttributes:function(t){var e=t&&"string"==typeof t?new fabric.Color(t):"";return e&&e.getSource()&&1!==e.getAlpha()?'opacity="'+e.getAlpha()+'" fill="'+e.setAlpha(1).toRgb()+'"':'fill="'+t+'"'},_getSVGLineTopOffset:function(t){for(var e=0,i=0,r=0;t>r;r++)e+=this.getHeightOfLine(r);return i=this.getHeightOfLine(r),{lineTop:e,offset:(this._fontSizeMult-this._fontSizeFraction)*i/(this.lineHeight*this._fontSizeMult)}},getSvgStyles:function(t){var e=fabric.Object.prototype.getSvgStyles.call(this,t);return e+" white-space: pre;"}})}();!function(t){"use strict";var e=t.fabric||(t.fabric={});e.Textbox=e.util.createClass(e.IText,e.Observable,{type:"textbox",minWidth:20,dynamicMinWidth:2,__cachedLines:null,lockScalingFlip:!0,noScaleCache:!1,_dimensionAffectingProps:e.Text.prototype._dimensionAffectingProps.concat("width"),_wordJoiners:/[ \t\r]/,splitByGrapheme:!1,initDimensions:function(){this.__skipDimension||(this.isEditing&&this.initDelayedCursor(),this.clearContextTop(),this._clearCache(),this.dynamicMinWidth=0,this._styleMap=this._generateStyleMap(this._splitText()),this.dynamicMinWidth>this.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,r=0,n={},o=0;o<t.graphemeLines.length;o++)"\n"===t.graphemeText[r]&&o>0?(i=0,r++,e++):!this.splitByGrapheme&&this._reSpaceAndTab.test(t.graphemeText[r])&&o>0&&(i++,r++),n[o]={line:e,offset:i},r+=t.graphemeLines[o].length,i+=t.graphemeLines[o].length;return n},styleHas:function(t,i){if(this._styleMap&&!this.isWrapping){var r=this._styleMap[i];r&&(i=r.line)}return e.Text.prototype.styleHas.call(this,t,i)},isEmptyStyles:function(t){if(!this.styles)return!0;var e,i,r=0,n=t+1,o=!1,s=this._styleMap[t],a=this._styleMap[t+1];s&&(t=s.line,r=s.offset),a&&(n=a.line,o=n===t,e=a.offset),i="undefined"==typeof t?this.styles:{line:this.styles[t]};for(var c in i)for(var h in i[c])if(h>=r&&(!o||e>h))for(var l in i[c][h])return!1;return!0},_getStyleDeclaration:function(t,e){if(this._styleMap&&!this.isWrapping){var i=this._styleMap[t];if(!i)return null;t=i.line,e=i.offset+e}return this.callSuper("_getStyleDeclaration",t,e)},_setStyleDeclaration:function(t,e,i){var r=this._styleMap[t];t=r.line,e=r.offset+e,this.styles[t][e]=i},_deleteStyleDeclaration:function(t,e){var i=this._styleMap[t];t=i.line,e=i.offset+e,delete this.styles[t][e]},_getLineStyle:function(t){var e=this._styleMap[t];return!!this.styles[e.line]},_setLineStyle:function(t){var e=this._styleMap[t];this.styles[e.line]={}},_wrapText:function(t,e){var i,r=[];for(this.isWrapping=!0,i=0;i<t.length;i++)r=r.concat(this._wrapLine(t[i],i,e));return this.isWrapping=!1,r},_measureWord:function(t,e,i){var r,n=0,o=!0;i=i||0;for(var s=0,a=t.length;a>s;s++){var c=this._getGraphemeBox(t[s],e,s+i,r,o);n+=c.kernedWidth,r=t[s]}return n},_wrapLine:function(t,i,r,n){var o=0,s=this.splitByGrapheme,a=[],c=[],h=s?e.util.string.graphemeSplit(t):t.split(this._wordJoiners),l="",u=0,f=s?"":" ",d=0,g=0,p=0,v=!0,m=this._getWidthOfCharSpacing(),n=n||0;0===h.length&&h.push([]),r-=n;for(var b=0;b<h.length;b++)l=s?h[b]:e.util.string.graphemeSplit(h[b]),d=this._measureWord(l,i,u),u+=l.length,o+=g+d-m,o>r&&!v?(a.push(c),c=[],o=d,v=!0):o+=m,v||s||c.push(f),c=c.concat(l),g=s?0:this._measureWord([f],i,u),u++,v=!1,d>p&&(p=d);return b&&a.push(c),p+n>this.dynamicMinWidth&&(this.dynamicMinWidth=p-m+n),a},isEndOfWrapping:function(t){return this._styleMap[t+1]?this._styleMap[t+1].line!==this._styleMap[t].line?!0:!1:!0},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var i=e.Text.prototype._splitTextIntoLines.call(this,t),r=this._wrapText(i.lines,this.width),n=new Array(r.length),o=0;o<r.length;o++)n[o]=r[o].join("");return i.lines=n,i.graphemeLines=r,i},getMinWidth:function(){return Math.max(this.minWidth,this.dynamicMinWidth)},_removeExtraneousStyles:function(){var t={};for(var e in this._styleMap)this._textLines[e]&&(t[this._styleMap[e].line]=1);for(var e in this.styles)t[e]||delete this.styles[e]},toObject:function(t){return this.callSuper("toObject",["minWidth","splitByGrapheme"].concat(t))}}),e.Textbox.fromObject=function(t,i){return t.styles=e.util.stylesFromArray(t.styles,t.text),e.Object._fromObject("Textbox",t,i,"text")}}("undefined"!=typeof exports?exports:this);!function(){var t=fabric.controlsUtils,e=t.scaleSkewCursorStyleHandler,i=t.scaleCursorStyleHandler,r=t.scalingEqually,n=t.scalingYOrSkewingX,o=t.scalingXOrSkewingY,s=t.scaleOrSkewActionName,a=fabric.Object.prototype.controls;if(a.ml=new fabric.Control({x:-.5,y:0,cursorStyleHandler:e,actionHandler:o,getActionName:s}),a.mr=new fabric.Control({x:.5,y:0,cursorStyleHandler:e,actionHandler:o,getActionName:s}),a.mb=new fabric.Control({x:0,y:.5,cursorStyleHandler:e,actionHandler:n,getActionName:s}),a.mt=new fabric.Control({x:0,y:-.5,cursorStyleHandler:e,actionHandler:n,getActionName:s}),a.tl=new fabric.Control({x:-.5,y:-.5,cursorStyleHandler:i,actionHandler:r}),a.tr=new fabric.Control({x:.5,y:-.5,cursorStyleHandler:i,actionHandler:r}),a.bl=new fabric.Control({x:-.5,y:.5,cursorStyleHandler:i,actionHandler:r}),a.br=new fabric.Control({x:.5,y:.5,cursorStyleHandler:i,actionHandler:r}),a.mtr=new fabric.Control({x:0,y:-.5,actionHandler:t.rotationWithSnapping,cursorStyleHandler:t.rotationStyleHandler,offsetY:-40,withConnection:!0,actionName:"rotate"}),fabric.Textbox){var c=fabric.Textbox.prototype.controls={};c.mtr=a.mtr,c.tr=a.tr,c.br=a.br,c.tl=a.tl,c.bl=a.bl,c.mt=a.mt,c.mb=a.mb,c.mr=new fabric.Control({x:.5,y:0,actionHandler:t.changeWidth,cursorStyleHandler:e,actionName:"resizing"}),c.ml=new fabric.Control({x:-.5,y:0,actionHandler:t.changeWidth,cursorStyleHandler:e,actionName:"resizing"})}}();!function(){fabric.Object.ENLIVEN_PROPS.push("eraser");var t=fabric.Object.prototype._drawClipPath,e=fabric.Object.prototype.needsItsOwnCache,i=fabric.Object.prototype.toObject,r=fabric.Object.prototype.getSvgCommons,n=fabric.Object.prototype._createBaseClipPathSVGMarkup,o=fabric.Object.prototype._createBaseSVGMarkup;fabric.Object.prototype.cacheProperties.push("eraser"),fabric.Object.prototype.stateProperties.push("eraser"),fabric.util.object.extend(fabric.Object.prototype,{erasable:!0,eraser:void 0,needsItsOwnCache:function(){return e.call(this)||!!this.eraser},_drawClipPath:function(e,i){if(t.call(this,e,i),this.eraser){var r=this._getNonTransformedDimensions();this.eraser.isType("eraser")&&this.eraser.set({width:r.x,height:r.y}),t.call(this,e,this.eraser)}},toObject:function(t){var e=i.call(this,["erasable"].concat(t));return this.eraser&&!this.eraser.excludeFromExport&&(e.eraser=this.eraser.toObject(t)),e},getSvgCommons:function(){return r.call(this)+(this.eraser?'mask="url(#'+this.eraser.clipPathId+')" ':"")},_createEraserSVGMarkup:function(t){return this.eraser?(this.eraser.clipPathId="MASK_"+fabric.Object.__uid++,['<mask id="',this.eraser.clipPathId,'" >',this.eraser.toSVG(t),"</mask>","\n"].join("")):""},_createBaseClipPathSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),n.call(this,t,e)].join("")},_createBaseSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),o.call(this,t,e)].join("")}});var s=fabric.Group.prototype._restoreObjectsState;fabric.util.object.extend(fabric.Group.prototype,{_addEraserPathToObjects:function(t){this._objects.forEach(function(e){fabric.EraserBrush.prototype._addPathToObjectEraser.call(fabric.EraserBrush.prototype,e,t)})},applyEraserToObjects:function(){var t=this,e=this.eraser;if(e){delete this.eraser;var i=t.calcTransformMatrix();e.clone(function(e){var r=t.clipPath;e.getObjects("path").forEach(function(e){var n=fabric.util.multiplyTransformMatrices(i,e.calcTransformMatrix());fabric.util.applyTransformToObject(e,n),r?r.clone(function(r){var n=fabric.EraserBrush.prototype.applyClipPathToPath.call(fabric.EraserBrush.prototype,e,r,i);t._addEraserPathToObjects(n)},["absolutePositioned","inverted"]):t._addEraserPathToObjects(e)})})}},_restoreObjectsState:function(){return this.erasable===!0&&this.applyEraserToObjects(),s.call(this)}}),fabric.Eraser=fabric.util.createClass(fabric.Group,{type:"eraser",originX:"center",originY:"center",drawObject:function(t){t.save(),t.fillStyle="black",t.fillRect(-this.width/2,-this.height/2,this.width,this.height),t.restore(),this.callSuper("drawObject",t)},_getBounds:function(){},_toSVG:function(t){var e=["<g ","COMMON_PARTS"," >\n"],i=-this.width/2,r=-this.height/2,n=["<rect ",'fill="white" ','x="',i,'" y="',r,'" width="',this.width,'" height="',this.height,'" />\n'].join("");e.push("		",n);for(var o=0,s=this._objects.length;s>o;o++)e.push("		",this._objects[o].toSVG(t));return e.push("</g>\n"),e}}),fabric.Eraser.fromObject=function(t,e){var i=t.objects;fabric.util.enlivenObjects(i,function(i){var r=fabric.util.object.clone(t,!0);delete r.objects,fabric.util.enlivenObjectEnlivables(t,r,function(){e&&e(new fabric.Eraser(i,r,!0))})})};var a=fabric.Canvas.prototype._renderOverlay;fabric.util.object.extend(fabric.Canvas.prototype,{isErasing:function(){return this.isDrawingMode&&this.freeDrawingBrush&&"eraser"===this.freeDrawingBrush.type&&this.freeDrawingBrush._isErasing},_renderOverlay:function(t){a.call(this,t),this.isErasing()&&!this.freeDrawingBrush.inverted&&this.freeDrawingBrush._render()}}),fabric.EraserBrush=fabric.util.createClass(fabric.PencilBrush,{type:"eraser",inverted:!1,_isErasing:!1,_isErasable:function(t){return t.erasable!==!1},_prepareCollectionTraversal:function(t,e,i){t.forEachObject(function(r){r.forEachObject&&"deep"===r.erasable?this._prepareCollectionTraversal(r,e,i):!this.inverted&&r.erasable&&r.visible?(r.visible=!1,t.dirty=!0,i.visibility.push(r),i.collection.push(t)):this.inverted&&r.visible&&(r.erasable&&r.eraser?(r.eraser.inverted=!0,r.dirty=!0,t.dirty=!0,i.eraser.push(r),i.collection.push(t)):(r.visible=!1,t.dirty=!0,i.visibility.push(r),i.collection.push(t)))},this)},preparePattern:function(){this._patternCanvas||(this._patternCanvas=fabric.util.createCanvasElement());var t=this._patternCanvas;t.width=this.canvas.width,t.height=this.canvas.height;var e=t.getContext("2d");if(this.canvas._isRetinaScaling()){var i=this.canvas.getRetinaScaling();this.canvas.__initRetinaScaling(i,t,e)}var r=this.canvas.backgroundImage,n=r&&this._isErasable(r),o=this.canvas.overlayImage,s=o&&this._isErasable(o);if(!this.inverted&&(r&&!n||this.canvas.backgroundColor))n&&(this.canvas.backgroundImage=void 0),this.canvas._renderBackground(e),n&&(this.canvas.backgroundImage=r);else if(this.inverted&&r&&n){var c=this.canvas.backgroundColor;this.canvas.backgroundColor=void 0,this.canvas._renderBackground(e),this.canvas.backgroundColor=c}e.save(),e.transform.apply(e,this.canvas.viewportTransform);var h={visibility:[],eraser:[],collection:[]};if(this._prepareCollectionTraversal(this.canvas,e,h),this.canvas._renderObjects(e,this.canvas._objects),h.visibility.forEach(function(t){t.visible=!0}),h.eraser.forEach(function(t){t.eraser.inverted=!1,t.dirty=!0}),h.collection.forEach(function(t){t.dirty=!0}),e.restore(),!this.inverted&&(o&&!s||this.canvas.overlayColor))s&&(this.canvas.overlayImage=void 0),a.call(this.canvas,e),s&&(this.canvas.overlayImage=o);else if(this.inverted&&o&&s){var c=this.canvas.overlayColor;this.canvas.overlayColor=void 0,a.call(this.canvas,e),this.canvas.overlayColor=c}},_setBrushStyles:function(t){this.callSuper("_setBrushStyles",t),t.strokeStyle="black"},_saveAndTransform:function(t){this.callSuper("_saveAndTransform",t),this._setBrushStyles(t),t.globalCompositeOperation=t===this.canvas.getContext()?"destination-out":"source-over"},needsFullRender:function(){return!0},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this._prepareForDrawing(t),this._captureDrawingPath(t),this.preparePattern(),this._isErasing=!0,this.canvas.fire("erasing:start"),this._render())},_render:function(){var t;this.inverted||(t=this.canvas.getContext(),this.callSuper("_render",t)),t=this.canvas.contextTop,this.canvas.clearContext(t),this.callSuper("_render",t),t.save();var e=this.canvas.getRetinaScaling(),i=1/e;t.scale(i,i),t.globalCompositeOperation="source-in",t.drawImage(this._patternCanvas,0,0),t.restore()},createPath:function(t){var e=this.callSuper("createPath",t);return e.globalCompositeOperation=this.inverted?"source-over":"destination-out",e.stroke=this.inverted?"white":"black",e},applyClipPathToPath:function(t,e,i){var r=fabric.util.invertTransform(t.calcTransformMatrix()),n=e.calcTransformMatrix(),o=e.absolutePositioned?r:fabric.util.multiplyTransformMatrices(r,i);return e.absolutePositioned=!1,fabric.util.applyTransformToObject(e,fabric.util.multiplyTransformMatrices(o,n)),t.clipPath=t.clipPath?fabric.util.mergeClipPaths(e,t.clipPath):e,t},clonePathWithClipPath:function(t,e,i){var r=e.calcTransformMatrix(),n=e.clipPath,o=this;t.clone(function(t){n.clone(function(e){i(o.applyClipPathToPath(t,e,r))},["absolutePositioned","inverted"])})},_addPathToObjectEraser:function(t,e){var i=this;if(t.forEachObject&&"deep"===t.erasable){var r=t._objects.filter(function(t){return t.erasable});return void(r.length>0&&t.clipPath?this.clonePathWithClipPath(e,t,function(t){r.forEach(function(e){i._addPathToObjectEraser(e,t)})}):r.length>0&&r.forEach(function(t){i._addPathToObjectEraser(t,e)}))}var n=t.eraser;n||(n=new fabric.Eraser,t.eraser=n),e.clone(function(e){var r=fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(t.calcTransformMatrix()),e.calcTransformMatrix());fabric.util.applyTransformToObject(e,r),n.addWithUpdate(e),t.set("dirty",!0),t.fire("erasing:end",{path:e}),t.group&&Array.isArray(i.__subTargets)&&i.__subTargets.push(t)})},applyEraserToCanvas:function(t){var e=this.canvas,i={};return["backgroundImage","overlayImage"].forEach(function(r){var n=e[r];n&&n.erasable&&(this._addPathToObjectEraser(n,t),i[r]=n)},this),i},_finalizeAndAddPath:function(){var t=this.canvas.contextTop,e=this.canvas;t.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate)),e.clearContext(e.contextTop),this._isErasing=!1;var i=this._points&&this._points.length>1?this.convertPointsToSVGPath(this._points):null;if(!i||this._isEmptySVGPath(i))return e.fire("erasing:end"),void e.requestRenderAll();var r=this.createPath(i);r.setCoords(),e.fire("before:path:created",{path:r});var n=this.applyEraserToCanvas(r),o=this;this.__subTargets=[];var s=[];e.forEachObject(function(t){t.erasable&&t.intersectsWithObject(r,!0,!0)&&(o._addPathToObjectEraser(t,r),s.push(t))}),e.fire("erasing:end",{path:r,targets:s,subTargets:this.__subTargets,drawables:n}),delete this.__subTargets,e.requestRenderAll(),this._resetShadow(),e.fire("path:created",{path:r})}})}();
\ No newline at end of file
diff --git a/src/assets/icons/CBottom.svg b/src/assets/icons/CBottom.svg
new file mode 100644
index 00000000..635510c6
--- /dev/null
+++ b/src/assets/icons/CBottom.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089605497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22868" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M185.396221 1024a49.219161 49.219161 0 0 1 0-98.462134h630.08622a49.219161 49.219161 0 0 1 0 98.462134z m273.146103-175.898375L141.772852 518.402301a49.147725 49.147725 0 1 1 70.84035-68.149608l232.689715 242.000161a0.142871 0.142871 0 0 0 0.142872-0.142871V50.332128a49.83827 49.83827 0 0 1 52.409953-50.243072 49.195349 49.195349 0 0 1 46.242675 49.100102v641.111122c0 0.142871 0 0.309554 0.142872 0.142871l232.713527-241.976349a49.147725 49.147725 0 1 1 70.84035 68.149608L529.382674 848.101625a48.981042 48.981042 0 0 1-70.84035 0z" fill="#040000" p-id="22869"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CBrushTop.svg b/src/assets/icons/CBrushTop.svg
new file mode 100644
index 00000000..c78aa8fd
--- /dev/null
+++ b/src/assets/icons/CBrushTop.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749782068136" class="icon" viewBox="0 0 1137 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3340" xmlns:xlink="http://www.w3.org/1999/xlink" width="222.0703125" height="200"><path d="M853.339307 938.666667v-224.512l0.056889-0.085334C905.477973 768 938.67264 820.053333 938.67264 850.972444c0 48.355556-38.286222 87.694222-85.333333 87.694223m0-341.333334c-21.902222 18.574222-61.895111 54.613333-97.649778 98.076445-10.723556 13.027556-21.048889 26.709333-30.407111 40.760889C700.59264 773.347556 682.67264 813.226667 682.67264 850.972444a173.653333 173.653333 0 0 0 41.642667 113.066667A169.244444 169.244444 0 0 0 853.339307 1024c94.151111 0 170.666667-77.653333 170.666666-173.027556 0-99.640889-124.871111-214.812444-170.666666-253.639111m271.957333-524.515555l-711.111111 711.111111a42.439111 42.439111 0 0 1-16.696889 10.325333l-341.333333 113.777778a42.638222 42.638222 0 0 1-53.959111-53.987556l113.777777-341.333333c2.076444-6.257778 5.632-11.975111 10.296889-16.668444l483.555556-483.555556a42.723556 42.723556 0 0 1 60.359111 0 42.723556 42.723556 0 0 1 0 60.359111L344.809529 398.222222h334.392889L1064.965973 12.487111a42.723556 42.723556 0 0 1 60.359111 0 42.723556 42.723556 0 0 1 0 60.359111"  p-id="3341"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CCancelGroup.svg b/src/assets/icons/CCancelGroup.svg
new file mode 100644
index 00000000..b23b646b
--- /dev/null
+++ b/src/assets/icons/CCancelGroup.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749920881941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3277" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M797.7 442.4q-60.4 0-113.2 22.5t-91.6 62-62 92.2-23 113.2q0 50.2 17.4 97.3H133.1q-21.5 0-44.5-9.2t-42.5-26.1-31.7-41-12.3-53.8V575.6q0-47.1-0.5-100.9t-0.5-99.8V260.3q0-61.4 34.3-97.3t94.7-35.8h503.8q23.6 0 47.6 8.7t43 24.1 31.2 35.8 12.3 44v13.3H250.9q-51.2 0-67.6 57.3-8.2 29.7-18.4 63t-18.4 62q-10.2 33.8-20.5 65.5-2 8.2-2 14.3 0 16.4 11.3 28.2t28.7 11.8 26.6-12.3 14.3-27.6l56.3-196.6h541.7q18.4 3.1 35.8 11.8t30.2 23.6 18.4 36.9 0.5 51.7q0 2-0.5 5.1t-1.5 8.2q-39.9-13.3-88.1-13.3z m5.1 68.6q46.1 0 86 17.4t70.1 47.6 47.6 70.1 17.4 86-17.4 86-47.6 70.1-70.1 47.6-86 17.4-86-17.4-70.1-47.6-47.6-70.1-17.4-86 17.4-86 47.6-70.1 70.1-47.6 86-17.4z m43 218.1l67.6-68.6q9.2-9.2 9.2-22.5t-9.2-22.5-22.5-9.2-22.5 9.2l-68.6 68.6-67.6-68.6q-9.2-9.2-22.5-9.2t-22.5 9.2T678 638t9.2 22.5l67.6 68.6-67.6 67.6q-9.2 9.2-9.2 22.5t9.2 22.5q9.2 10.2 22.5 10.2t22.5-10.2l67.6-67.6 68.6 67.6q9.2 10.2 22.5 10.2t22.5-10.2q9.2-9.2 9.2-22.5t-9.2-22.5z" p-id="3278"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CCheckbox.svg b/src/assets/icons/CCheckbox.svg
new file mode 100644
index 00000000..ff6331de
--- /dev/null
+++ b/src/assets/icons/CCheckbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749838313310" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4537" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M533.01342 0.015975h-336.323199a187.380068 187.380068 0 0 0-138.132742 58.135868A187.380068 187.380068 0 0 0 0.421612 195.804123v336.323199a48.046171 48.046171 0 1 0 95.251534 0V210.33809a123.238429 123.238429 0 0 1 30.389204-84.0808 123.238429 123.238429 0 0 1 84.681376-30.389203h322.269694a48.046171 48.046171 0 1 0 0-95.251535z" fill="#4D4D4D" p-id="4538"></path><path d="M373.860478 538.73367l-2.402309 2.282194a46.124324 46.124324 0 0 0-1.201154 66.423831L518.959915 756.743172a46.124324 46.124324 0 0 0 65.222677 0l410.194187-410.794764a46.124324 46.124324 0 0 0 0-65.222677 46.124324 46.124324 0 0 0-65.102562 0L584.182592 621.373085a46.124324 46.124324 0 0 1-65.102562 0L437.882001 540.535402a46.24444 46.24444 0 0 0-64.021523-1.801732zM868.856157 928.868581H337.945965a72.069257 72.069257 0 0 1-72.069257-72.069257V320.483938a57.174944 57.174944 0 0 1 57.174944-57.174944h371.156673a48.046171 48.046171 0 0 0 48.046171-48.046171 48.046171 48.046171 0 0 0-48.046171-48.046172H266.35717a95.37165 95.37165 0 0 0-95.131419 95.131419v666.520511a95.37165 95.37165 0 0 0 95.131419 95.131419h665.559587a95.37165 95.37165 0 0 0 95.011303-95.131419V596.02873a48.046171 48.046171 0 0 0-47.445594-47.445594 48.046171 48.046171 0 0 0-48.046171 47.445594v269.779251a63.0606 63.0606 0 0 1-62.580138 63.0606z" fill="#4D4D4D" p-id="4539"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CCheckboxList.svg b/src/assets/icons/CCheckboxList.svg
new file mode 100644
index 00000000..0f965497
--- /dev/null
+++ b/src/assets/icons/CCheckboxList.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749838309246" class="icon" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4387" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><path d="M340.267533 68.40185m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="4388"></path><path d="M340.267533 474.853563m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="4389"></path><path d="M340.267533 881.441806m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="4390"></path><path d="M301.21977 10.64939A36.044089 36.044089 0 0 0 275.688541 0a35.907558 35.907558 0 0 0-25.53123 10.64939L123.047286 138.032476 61.745029 76.184097a36.044089 36.044089 0 0 0-25.531229-10.64939A36.180619 36.180619 0 0 0 10.68257 127.246556l87.106548 87.516139A35.771027 35.771027 0 0 0 123.047286 225.275555a35.224905 35.224905 0 0 0 25.394699-10.64939L301.21977 61.575318a36.31715 36.31715 0 0 0 0-50.925928zM301.21977 423.244981a35.907558 35.907558 0 0 0-25.531229-10.512859 35.771027 35.771027 0 0 0-25.53123 10.512859L123.047286 550.491537l-61.302257-61.84838A36.044089 36.044089 0 0 0 36.2138 477.857237a36.180619 36.180619 0 0 0-25.53123 61.848379l87.106548 87.37961a35.771027 35.771027 0 0 0 50.925928 0l152.504724-153.050847a36.453681 36.453681 0 0 0 0-50.789398zM301.21977 809.353629a36.044089 36.044089 0 0 0-25.531229-10.64939 35.907558 35.907558 0 0 0-25.53123 10.64939L123.047286 936.736715l-61.302257-61.848379a35.907558 35.907558 0 0 0-25.531229-10.51286 35.771027 35.771027 0 0 0-25.53123 10.51286 36.180619 36.180619 0 0 0 0 51.062459l87.106548 87.516139a36.044089 36.044089 0 0 0 50.925928 0L301.21977 860.143027a36.453681 36.453681 0 0 0 0-50.789398z" fill="#4D4D4D" p-id="4391"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CCloseNo.svg b/src/assets/icons/CCloseNo.svg
new file mode 100644
index 00000000..f6167370
--- /dev/null
+++ b/src/assets/icons/CCloseNo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749837535549" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M622.376408 512.036566l378.313415 376.631372c30.423039 30.569304 31.08123 79.787345 1.462646 111.234236a75.545671 75.545671 0 0 1-108.747738 1.682043L512.019759 621.808156l-381.384971 379.776061a75.545671 75.545671 0 0 1-108.82087-1.462646 80.079874 80.079874 0 0 1 1.535778-111.380501L401.663111 512.036566 23.349696 135.405194A80.079874 80.079874 0 0 1 21.88705 24.24409 75.545671 75.545671 0 0 1 130.561655 22.488915L512.019759 402.264976 893.404731 22.488915a75.545671 75.545671 0 0 1 108.82087 1.462646c29.545451 31.520024 28.887261 80.738065-1.535778 111.380501L622.376408 512.036566z"   p-id="2590"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CCreateGroup.svg b/src/assets/icons/CCreateGroup.svg
new file mode 100644
index 00000000..f5a7b27c
--- /dev/null
+++ b/src/assets/icons/CCreateGroup.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749920877071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27982" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M589.824 524.288q-30.72 30.72-50.688 68.096t-28.672 77.312-6.144 80.896 16.896 79.872l-388.096 0q-21.504 0-45.056-8.704t-42.496-25.6-31.744-40.96-12.8-54.784l0-438.272q0-62.464 34.304-97.792t94.72-35.328l30.72 0 60.416 0 77.824 0q44.032 0 88.576-0.512t87.552-0.512l76.8 0 56.32 0 25.6 0q23.552 0 47.616 9.216t43.008 24.576 31.232 35.84 12.288 43.008l0 12.288q-54.272 0-125.952 0.512t-144.384 0.512l-140.288 0-110.592 0q-25.6 0-40.448 15.36t-23.04 43.008q-8.192 29.696-18.432 64t-18.432 64l-20.48 69.632q-4.096 14.336 6.656 30.208t31.232 15.872q16.384 0 27.136-9.216t15.872-24.576l54.272-203.776 533.504 1.024q19.456 2.048 38.4 10.24t32.768 23.04 20.48 37.376 1.536 54.272q0 2.048-0.512 3.584t-0.512 4.608q-76.8-24.576-156.672-6.656t-140.288 78.336zM800.768 514.048q46.08 0 86.016 17.408t70.144 47.616 47.616 70.144 17.408 86.016-17.408 86.016-47.616 70.144-70.144 47.616-86.016 17.408-86.016-17.408-70.144-47.616-47.616-70.144-17.408-86.016 17.408-86.016 47.616-70.144 70.144-47.616 86.016-17.408zM929.792 763.904q13.312 0 22.528-9.216t9.216-22.528-9.216-22.528-22.528-9.216l-96.256 0 0-96.256q0-13.312-9.216-22.528t-22.528-9.216q-14.336 0-23.552 9.216t-9.216 22.528l0 96.256-95.232 0q-14.336 0-23.552 9.216t-9.216 22.528 9.216 22.528 23.552 9.216l95.232 0 0 96.256q0 13.312 9.216 22.528t23.552 9.216q13.312 0 22.528-9.216t9.216-22.528l0-96.256 96.256 0z" p-id="27983"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CDelete.svg b/src/assets/icons/CDelete.svg
index cd8324c9..bfb56dd9 100644
--- a/src/assets/icons/CDelete.svg
+++ b/src/assets/icons/CDelete.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746501838166" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14477" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.9765625" height="200"><path d="M133.076426 1013.469886c-1.621429-1.358835-3.271525-3.124748-4.892955-4.891808 1.79458 1.765913 3.271525 3.532972 4.892955 4.891808z m-10.939485-6.270137c-1.724632-1.574414-3.427476-3.147682-5.039732-4.892954 1.590468 1.745272 3.313953 3.31854 5.039732 4.892954zM1017.567032 158.745227c-7.794096-7.79295-19.126898-12.137783-30.123717-12.137782H776.022289V80.738903c0-44.54572-36.192036-80.738903-80.738903-80.738903H334.387028c-44.54572 0-80.738903 36.193183-80.738903 80.738903v65.868542H41.151498c-22.553227 0-41.008161 18.319624-41.008161 41.007014s18.32077 41.008161 41.008161 41.008161h36.192036v713.661492c0 44.546867 36.193183 80.738903 80.738903 80.738903h725.017227c44.546867 0 80.738903-36.192036 80.738903-80.738903V228.62262h23.584107c22.553227 0 42.149124-18.32077 42.149124-41.008161 0.022934-10.884443-4.21067-21.075135-12.003619-28.868085zM334.252865 80.986589h360.671605v66.315754h-360.670459z m548.734423 861.18744H158.083583V228.62262H882.965501v713.550262zM514.29798 366.047319c-22.799767 0-41.231767 18.432-41.231767 41.231767v382.552869c0 22.799767 18.432 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.432-41.231767-41.231767-41.231767z m-223.337496 0c-22.799767 0-41.231767 18.432-41.231767 41.231767v382.552869c0 22.799767 18.432 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.453787-41.231767-41.231767-41.231767z m444.390772 0c-22.799767 0-41.232914 18.432-41.232913 41.231767v382.552869c0 22.799767 18.433147 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.432-41.231767-41.231767-41.231767z" fill="#000000" p-id="14478"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746501838166" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14477" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.9765625" height="200"><path d="M133.076426 1013.469886c-1.621429-1.358835-3.271525-3.124748-4.892955-4.891808 1.79458 1.765913 3.271525 3.532972 4.892955 4.891808z m-10.939485-6.270137c-1.724632-1.574414-3.427476-3.147682-5.039732-4.892954 1.590468 1.745272 3.313953 3.31854 5.039732 4.892954zM1017.567032 158.745227c-7.794096-7.79295-19.126898-12.137783-30.123717-12.137782H776.022289V80.738903c0-44.54572-36.192036-80.738903-80.738903-80.738903H334.387028c-44.54572 0-80.738903 36.193183-80.738903 80.738903v65.868542H41.151498c-22.553227 0-41.008161 18.319624-41.008161 41.007014s18.32077 41.008161 41.008161 41.008161h36.192036v713.661492c0 44.546867 36.193183 80.738903 80.738903 80.738903h725.017227c44.546867 0 80.738903-36.192036 80.738903-80.738903V228.62262h23.584107c22.553227 0 42.149124-18.32077 42.149124-41.008161 0.022934-10.884443-4.21067-21.075135-12.003619-28.868085zM334.252865 80.986589h360.671605v66.315754h-360.670459z m548.734423 861.18744H158.083583V228.62262H882.965501v713.550262zM514.29798 366.047319c-22.799767 0-41.231767 18.432-41.231767 41.231767v382.552869c0 22.799767 18.432 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.432-41.231767-41.231767-41.231767z m-223.337496 0c-22.799767 0-41.231767 18.432-41.231767 41.231767v382.552869c0 22.799767 18.432 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.453787-41.231767-41.231767-41.231767z m444.390772 0c-22.799767 0-41.232914 18.432-41.232913 41.231767v382.552869c0 22.799767 18.433147 41.231767 41.231767 41.231767s41.231767-18.432 41.231767-41.231767V407.279086c0-22.776833-18.432-41.231767-41.231767-41.231767z"  p-id="14478"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CDown.svg b/src/assets/icons/CDown.svg
new file mode 100644
index 00000000..fca0e038
--- /dev/null
+++ b/src/assets/icons/CDown.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089438636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4690" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M309.41 873.04625c-3.555-0.77625-7.09875-2.0025-10.6875-2.21625-3.20625-0.2025-5.74875-1.24875-8.0775-3.20624999-3.34125-2.80125-6.80624999-5.45625-9.945-8.47125001-67.6125-65.25-135.1575-130.545-202.73625-195.795-11.0025-10.59749999-17.13375-23.09625-15.71625-38.6775a36.9675 36.9675 0 0 1 7.83-19.88999999c21.81375-27.57375 55.38375-27.50625 77.0175-6.45750001 38.77875 37.77750001 77.8275 75.29625 116.76375 112.9275 0.9675 0.945 1.98 1.8675 3.7575 3.54375l0-515.07c0-25.38 15.51375-43.63875 40.5225-47.73375 26.65125-4.37625 53.58375 18.23625 53.65125 45.2475 0.10125 44.29125 0.0225 88.56 0.0225 132.84 0 163.71 0.0225 327.42 0 491.11875 0 23.6475-13.39875 42.64875-34.88625 49.4775-3.02625 0.95625-6.15375 1.58625-9.2475 2.3625l-8.26875 0z m226.45125 0c-3.43125-0.77625-6.93-1.3725-10.305-2.3625a60.22125 60.22125 0 0 1-43.30125-61.39125c1.53000001-27.855 22.43249999-51.12 50.265-55.81125001 3.36375-0.5625 6.84-0.79875 10.27125-0.79874999 119.475-0.045 238.95-0.10125 358.43625 0 29.89125 0.0225 53.6625 19.7775 59.68125 48.9825 0.315 1.54125 0.6975 3.07125 1.04625 4.60125L961.955 819.35c-0.2025 0.64125-0.50625 1.26-0.59625 1.9125a59.90625 59.90625 0 0 1-44.42625 49.8375c-2.86875 0.73125-5.77125 1.305-8.6625 1.9575l-372.40875-0.01125zM961.955 518.53625c-0.55125 2.565-1.0575 5.11875001-1.67625 7.65-6.78375 27.495-30.5325 45.97875-59.36625 46.0125-62.9775 0.05625-125.94375 0.01125-188.91 0.01125-56.32875 0-112.64625 0.05625001-168.96375-0.0225-28.65375001-0.03375-52.2675-18.4725-59.11875-45.87750001-9.29249999-37.11375 18.79875-74.0025 57.06-74.41874998 30.72375-0.32625 61.48125-0.09 92.205-0.09000001 89.13375 0 178.25625-0.0225 267.39 1e-8C929.65625 451.82375 953.48375 470.22875001 960.29 497.825c0.63 2.5425 1.13625001 5.1075 1.67625 7.65l0 13.06125-0.01125 0z m0-300.79125c-0.63 2.75625-1.1925 5.52375-1.89 8.28a59.9625 59.9625 0 0 1-57.16125 45.2925c-6.5475 0.13500001-13.095 0.05625001-19.63125 0.05625-112.8825 0-225.77625001 0-338.65875-0.03375001-24.89625 0-43.9425-10.51875-55.63125-32.61374999-19.36125-36.675 3.88125-81.3375 44.955-87.17625 0.6525-0.09000001 1.2825-0.3825 1.92375-0.6075L908.27 150.9425c0.64125 0.225 1.27125 0.51749999 1.935 0.6075a59.8275 59.8275 0 0 1 49.7925 44.46c0.73125 2.86875 1.305 5.76 1.9575 8.64l0 13.095z"  p-id="4691"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CEllipse.svg b/src/assets/icons/CEllipse.svg
index 153d50a9..fb8c628e 100644
--- a/src/assets/icons/CEllipse.svg
+++ b/src/assets/icons/CEllipse.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748768934736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13564" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M581.485714 778.971429c-3.657143-7.314286-3.657143-14.628571-10.971428-18.285715l-10.971429-10.971428c-7.314286-3.657143-10.971429-10.971429-18.285714-10.971429-7.314286-3.657143-10.971429-3.657143-18.285714-7.314286-10.971429-3.657143-25.6-3.657143-36.571429 3.657143-10.971429 3.657143-21.942857 10.971429-29.257143 18.285715-7.314286 7.314286-14.628571 18.285714-14.628571 29.257142-3.657143 10.971429-3.657143 25.6 0 36.571429 0 7.314286 3.657143 14.628571 7.314285 21.942857 3.657143 7.314286 7.314286 10.971429 14.628572 18.285714 3.657143 3.657143 7.314286 7.314286 10.971428 7.314286 10.971429 3.657143 18.285714 10.971429 29.257143 10.971429 10.971429 3.657143 25.6 0 36.571429-3.657143 7.314286-3.657143 18.285714-10.971429 25.6-14.628572 10.971429-10.971429 18.285714-21.942857 18.285714-36.571428 0-18.285714 0-32.914286-3.657143-43.885714z m-43.885714 47.542857s-3.657143 3.657143-7.314286 3.657143c-7.314286 7.314286-21.942857 7.314286-32.914285 3.657142 0 0-3.657143 0-3.657143-3.657142-3.657143 0-7.314286-3.657143-7.314286-7.314286s-3.657143-7.314286-7.314286-10.971429c0-3.657143-3.657143-7.314286-3.657143-10.971428-3.657143-7.314286 0-18.285714 3.657143-25.6l3.657143-3.657143s0-3.657143 3.657143-3.657143c7.314286-7.314286 18.285714-10.971429 29.257143-7.314286 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 7.314286 3.657143 10.971428 7.314286l7.314286 7.314286s3.657143 3.657143 3.657143 7.314285c3.657143 10.971429 3.657143 21.942857 0 29.257143-3.657143 7.314286-3.657143 7.314286-7.314286 10.971429zM585.142857 215.771429c-3.657143-10.971429-7.314286-18.285714-10.971428-25.6l-10.971429-10.971429c-3.657143-3.657143-10.971429-10.971429-18.285714-10.971429-7.314286-3.657143-10.971429-3.657143-18.285715-7.314285-10.971429-3.657143-25.6 0-36.571428 3.657143-10.971429 3.657143-21.942857 10.971429-29.257143 18.285714-10.971429 10.971429-14.628571 21.942857-18.285714 36.571428-3.657143 10.971429 0 25.6 3.657143 36.571429 0 3.657143 3.657143 10.971429 7.314285 14.628571 3.657143 7.314286 7.314286 10.971429 14.628572 18.285715-3.657143-3.657143 0 0 7.314285 3.657143 10.971429 7.314286 18.285714 7.314286 29.257143 10.971428 10.971429 0 25.6 0 36.571429-3.657143 7.314286-7.314286 18.285714-10.971429 21.942857-18.285714 7.314286-7.314286 14.628571-18.285714 18.285714-29.257143 3.657143-14.628571 3.657143-25.6 3.657143-36.571428zM537.6 256c0 3.657143-3.657143 3.657143-7.314286 3.657143-7.314286 7.314286-21.942857 7.314286-32.914285 3.657143 0 0-3.657143 0-3.657143-3.657143-3.657143 0-7.314286-3.657143-7.314286-3.657143l-7.314286-7.314286c0-3.657143-3.657143-7.314286-3.657143-10.971428 0-10.971429 0-18.285714 3.657143-25.6 0-3.657143 3.657143-3.657143 3.657143-7.314286 0 0 0-3.657143 3.657143-3.657143 7.314286-7.314286 18.285714-10.971429 29.257143-7.314286 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 7.314286 3.657143 10.971428 7.314286l7.314286 7.314286v3.657143c7.314286 10.971429 7.314286 21.942857 0 32.914285 0 3.657143 0 3.657143-3.657143 7.314286zM138.971429 475.428571l-10.971429-10.971428c-7.314286-3.657143-10.971429-10.971429-18.285714-10.971429-3.657143-3.657143-10.971429-3.657143-18.285715-7.314285H73.142857c-7.314286 0-10.971429 0-18.285714 3.657142-10.971429 3.657143-21.942857 10.971429-29.257143 18.285715-21.942857 21.942857-25.6 58.514286-10.971429 87.771428 3.657143 7.314286 7.314286 10.971429 10.971429 18.285715 3.657143 3.657143 7.314286 7.314286 14.628571 10.971428 10.971429-3.657143 21.942857 0 32.914286 3.657143h3.657143c10.971429 0 21.942857 0 32.914286-7.314286h3.657143c7.314286-3.657143 14.628571-7.314286 21.942857-14.628571 21.942857-25.6 25.6-65.828571 3.657143-91.428572z m-32.914286 65.828572l-3.657143 3.657143c-7.314286 7.314286-21.942857 7.314286-32.914286 3.657143 0 0-3.657143 0-3.657143-3.657143-3.657143 0-7.314286-3.657143-7.314285-3.657143-3.657143-3.657143-7.314286-10.971429-10.971429-18.285714-3.657143-10.971429 0-21.942857 10.971429-32.914286 0 0 0-3.657143 3.657143-3.657143s3.657143-3.657143 7.314285-3.657143c7.314286-3.657143 14.628571-3.657143 21.942857-3.657143 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 3.657143 3.657143 7.314286 3.657143l3.657143 3.657143c3.657143 3.657143 7.314286 7.314286 7.314285 10.971428 3.657143 14.628571 0 29.257143-10.971428 40.228572zM1005.714286 475.428571s0-3.657143 0 0l-10.971429-10.971428c-3.657143-3.657143-10.971429-10.971429-18.285714-14.628572-3.657143-3.657143-10.971429-3.657143-18.285714-7.314285H950.857143c-10.971429 0-18.285714 0-29.257143 3.657143-3.657143 0-3.657143 0-7.314286 3.657142-7.314286 3.657143-14.628571 10.971429-21.942857 14.628572-21.942857 21.942857-25.6 58.514286-10.971428 84.114286 3.657143 7.314286 7.314286 10.971429 10.971428 18.285714 3.657143 3.657143 7.314286 7.314286 10.971429 7.314286 3.657143 0 3.657143 3.657143 7.314285 3.657142 7.314286 3.657143 14.628571 3.657143 21.942858 7.314286h14.628571c7.314286 0 14.628571 0 21.942857-3.657143 3.657143 0 7.314286-3.657143 10.971429-3.657143 7.314286-3.657143 10.971429-7.314286 14.628571-10.971428 3.657143-3.657143 7.314286-10.971429 10.971429-14.628572 14.628571-25.6 14.628571-54.857143 0-76.8z m-36.571429 65.828572c-3.657143 3.657143-3.657143 3.657143-7.314286 3.657143 0 0-3.657143 0-3.657142 3.657143-7.314286 3.657143-18.285714 3.657143-25.6 0-3.657143 0-3.657143 0-3.657143-3.657143 0 0-3.657143 0-3.657143-3.657143l-3.657143-3.657143c-7.314286-3.657143-10.971429-10.971429-10.971429-18.285714v-3.657143c0-10.971429 0-21.942857 10.971429-29.257143l3.657143-3.657143h3.657143c7.314286-3.657143 14.628571-7.314286 25.6-7.314286 3.657143 0 3.657143 0 7.314285 3.657143h3.657143c3.657143 0 7.314286 3.657143 10.971429 7.314286 3.657143 3.657143 7.314286 7.314286 7.314286 10.971429 0 18.285714-3.657143 32.914286-14.628572 43.885714z" fill="" p-id="13565"></path><path d="M482.742857 782.628571c-14.628571 0-25.6 0-40.228571-3.657142-160.914286-18.285714-292.571429-95.085714-332.8-197.485715-3.657143-10.971429-7.314286-25.6-10.971429-36.571428-7.314286 7.314286-21.942857 7.314286-32.914286 3.657143 0 0-3.657143 0-3.657142-3.657143 3.657143 14.628571 7.314286 25.6 10.971428 40.228571 43.885714 117.028571 186.514286 208.457143 365.714286 226.742857 14.628571 0 25.6 3.657143 40.228571 3.657143 0-3.657143-3.657143-7.314286-3.657143-10.971428 0-7.314286 0-14.628571 7.314286-21.942858zM932.571429 548.571429c-3.657143 0-3.657143 0-7.314286-3.657143 0 0-3.657143 0-3.657143-3.657143 0 10.971429-3.657143 25.6-10.971429 36.571428-40.228571 102.4-168.228571 179.2-332.8 197.485715-14.628571 0-25.6 3.657143-40.228571 3.657143 0 0 3.657143 3.657143 3.657143 7.314285 3.657143 10.971429 3.657143 21.942857 0 29.257143 14.628571 0 25.6 0 40.228571-3.657143 179.2-18.285714 321.828571-109.714286 365.714286-226.742857 3.657143-14.628571 7.314286-25.6 10.971429-40.228571-7.314286 7.314286-14.628571 7.314286-25.6 3.657143z m-351.085715-296.228572c160.914286 18.285714 292.571429 95.085714 332.8 197.485714 3.657143 10.971429 7.314286 25.6 10.971429 36.571429 7.314286-3.657143 14.628571-7.314286 25.6-7.314286 3.657143 0 3.657143 0 7.314286 3.657143h3.657142c-3.657143-14.628571-3.657143-25.6-10.971428-40.228571-43.885714-117.028571-186.514286-208.457143-365.714286-226.742857-14.628571 0-25.6-3.657143-40.228571-3.657143v3.657143c3.657143 10.971429 3.657143 21.942857-3.657143 32.914285 14.628571 0 29.257143 0 40.228571 3.657143zM475.428571 237.714286c0-10.971429 0-18.285714 3.657143-25.6-14.628571 0-25.6 3.657143-40.228571 3.657143-179.2 18.285714-321.828571 109.714286-365.714286 226.742857-3.657143 14.628571-7.314286 25.6-10.971428 40.228571 7.314286-3.657143 14.628571-3.657143 21.942857-3.657143 3.657143 0 3.657143 0 7.314285 3.657143 3.657143 0 3.657143 3.657143 7.314286 3.657143 0-10.971429 3.657143-25.6 10.971429-36.571429 40.228571-102.4 168.228571-179.2 332.8-197.485714 10.971429 0 25.6-3.657143 36.571428-3.657143 0-3.657143-3.657143-7.314286-3.657143-10.971428z" fill="" p-id="13566"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748768934736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13564" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M581.485714 778.971429c-3.657143-7.314286-3.657143-14.628571-10.971428-18.285715l-10.971429-10.971428c-7.314286-3.657143-10.971429-10.971429-18.285714-10.971429-7.314286-3.657143-10.971429-3.657143-18.285714-7.314286-10.971429-3.657143-25.6-3.657143-36.571429 3.657143-10.971429 3.657143-21.942857 10.971429-29.257143 18.285715-7.314286 7.314286-14.628571 18.285714-14.628571 29.257142-3.657143 10.971429-3.657143 25.6 0 36.571429 0 7.314286 3.657143 14.628571 7.314285 21.942857 3.657143 7.314286 7.314286 10.971429 14.628572 18.285714 3.657143 3.657143 7.314286 7.314286 10.971428 7.314286 10.971429 3.657143 18.285714 10.971429 29.257143 10.971429 10.971429 3.657143 25.6 0 36.571429-3.657143 7.314286-3.657143 18.285714-10.971429 25.6-14.628572 10.971429-10.971429 18.285714-21.942857 18.285714-36.571428 0-18.285714 0-32.914286-3.657143-43.885714z m-43.885714 47.542857s-3.657143 3.657143-7.314286 3.657143c-7.314286 7.314286-21.942857 7.314286-32.914285 3.657142 0 0-3.657143 0-3.657143-3.657142-3.657143 0-7.314286-3.657143-7.314286-7.314286s-3.657143-7.314286-7.314286-10.971429c0-3.657143-3.657143-7.314286-3.657143-10.971428-3.657143-7.314286 0-18.285714 3.657143-25.6l3.657143-3.657143s0-3.657143 3.657143-3.657143c7.314286-7.314286 18.285714-10.971429 29.257143-7.314286 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 7.314286 3.657143 10.971428 7.314286l7.314286 7.314286s3.657143 3.657143 3.657143 7.314285c3.657143 10.971429 3.657143 21.942857 0 29.257143-3.657143 7.314286-3.657143 7.314286-7.314286 10.971429zM585.142857 215.771429c-3.657143-10.971429-7.314286-18.285714-10.971428-25.6l-10.971429-10.971429c-3.657143-3.657143-10.971429-10.971429-18.285714-10.971429-7.314286-3.657143-10.971429-3.657143-18.285715-7.314285-10.971429-3.657143-25.6 0-36.571428 3.657143-10.971429 3.657143-21.942857 10.971429-29.257143 18.285714-10.971429 10.971429-14.628571 21.942857-18.285714 36.571428-3.657143 10.971429 0 25.6 3.657143 36.571429 0 3.657143 3.657143 10.971429 7.314285 14.628571 3.657143 7.314286 7.314286 10.971429 14.628572 18.285715-3.657143-3.657143 0 0 7.314285 3.657143 10.971429 7.314286 18.285714 7.314286 29.257143 10.971428 10.971429 0 25.6 0 36.571429-3.657143 7.314286-7.314286 18.285714-10.971429 21.942857-18.285714 7.314286-7.314286 14.628571-18.285714 18.285714-29.257143 3.657143-14.628571 3.657143-25.6 3.657143-36.571428zM537.6 256c0 3.657143-3.657143 3.657143-7.314286 3.657143-7.314286 7.314286-21.942857 7.314286-32.914285 3.657143 0 0-3.657143 0-3.657143-3.657143-3.657143 0-7.314286-3.657143-7.314286-3.657143l-7.314286-7.314286c0-3.657143-3.657143-7.314286-3.657143-10.971428 0-10.971429 0-18.285714 3.657143-25.6 0-3.657143 3.657143-3.657143 3.657143-7.314286 0 0 0-3.657143 3.657143-3.657143 7.314286-7.314286 18.285714-10.971429 29.257143-7.314286 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 7.314286 3.657143 10.971428 7.314286l7.314286 7.314286v3.657143c7.314286 10.971429 7.314286 21.942857 0 32.914285 0 3.657143 0 3.657143-3.657143 7.314286zM138.971429 475.428571l-10.971429-10.971428c-7.314286-3.657143-10.971429-10.971429-18.285714-10.971429-3.657143-3.657143-10.971429-3.657143-18.285715-7.314285H73.142857c-7.314286 0-10.971429 0-18.285714 3.657142-10.971429 3.657143-21.942857 10.971429-29.257143 18.285715-21.942857 21.942857-25.6 58.514286-10.971429 87.771428 3.657143 7.314286 7.314286 10.971429 10.971429 18.285715 3.657143 3.657143 7.314286 7.314286 14.628571 10.971428 10.971429-3.657143 21.942857 0 32.914286 3.657143h3.657143c10.971429 0 21.942857 0 32.914286-7.314286h3.657143c7.314286-3.657143 14.628571-7.314286 21.942857-14.628571 21.942857-25.6 25.6-65.828571 3.657143-91.428572z m-32.914286 65.828572l-3.657143 3.657143c-7.314286 7.314286-21.942857 7.314286-32.914286 3.657143 0 0-3.657143 0-3.657143-3.657143-3.657143 0-7.314286-3.657143-7.314285-3.657143-3.657143-3.657143-7.314286-10.971429-10.971429-18.285714-3.657143-10.971429 0-21.942857 10.971429-32.914286 0 0 0-3.657143 3.657143-3.657143s3.657143-3.657143 7.314285-3.657143c7.314286-3.657143 14.628571-3.657143 21.942857-3.657143 3.657143 0 3.657143 0 7.314286 3.657143 3.657143 0 3.657143 3.657143 7.314286 3.657143l3.657143 3.657143c3.657143 3.657143 7.314286 7.314286 7.314285 10.971428 3.657143 14.628571 0 29.257143-10.971428 40.228572zM1005.714286 475.428571s0-3.657143 0 0l-10.971429-10.971428c-3.657143-3.657143-10.971429-10.971429-18.285714-14.628572-3.657143-3.657143-10.971429-3.657143-18.285714-7.314285H950.857143c-10.971429 0-18.285714 0-29.257143 3.657143-3.657143 0-3.657143 0-7.314286 3.657142-7.314286 3.657143-14.628571 10.971429-21.942857 14.628572-21.942857 21.942857-25.6 58.514286-10.971428 84.114286 3.657143 7.314286 7.314286 10.971429 10.971428 18.285714 3.657143 3.657143 7.314286 7.314286 10.971429 7.314286 3.657143 0 3.657143 3.657143 7.314285 3.657142 7.314286 3.657143 14.628571 3.657143 21.942858 7.314286h14.628571c7.314286 0 14.628571 0 21.942857-3.657143 3.657143 0 7.314286-3.657143 10.971429-3.657143 7.314286-3.657143 10.971429-7.314286 14.628571-10.971428 3.657143-3.657143 7.314286-10.971429 10.971429-14.628572 14.628571-25.6 14.628571-54.857143 0-76.8z m-36.571429 65.828572c-3.657143 3.657143-3.657143 3.657143-7.314286 3.657143 0 0-3.657143 0-3.657142 3.657143-7.314286 3.657143-18.285714 3.657143-25.6 0-3.657143 0-3.657143 0-3.657143-3.657143 0 0-3.657143 0-3.657143-3.657143l-3.657143-3.657143c-7.314286-3.657143-10.971429-10.971429-10.971429-18.285714v-3.657143c0-10.971429 0-21.942857 10.971429-29.257143l3.657143-3.657143h3.657143c7.314286-3.657143 14.628571-7.314286 25.6-7.314286 3.657143 0 3.657143 0 7.314285 3.657143h3.657143c3.657143 0 7.314286 3.657143 10.971429 7.314286 3.657143 3.657143 7.314286 7.314286 7.314286 10.971429 0 18.285714-3.657143 32.914286-14.628572 43.885714z"  p-id="13565"></path><path d="M482.742857 782.628571c-14.628571 0-25.6 0-40.228571-3.657142-160.914286-18.285714-292.571429-95.085714-332.8-197.485715-3.657143-10.971429-7.314286-25.6-10.971429-36.571428-7.314286 7.314286-21.942857 7.314286-32.914286 3.657143 0 0-3.657143 0-3.657142-3.657143 3.657143 14.628571 7.314286 25.6 10.971428 40.228571 43.885714 117.028571 186.514286 208.457143 365.714286 226.742857 14.628571 0 25.6 3.657143 40.228571 3.657143 0-3.657143-3.657143-7.314286-3.657143-10.971428 0-7.314286 0-14.628571 7.314286-21.942858zM932.571429 548.571429c-3.657143 0-3.657143 0-7.314286-3.657143 0 0-3.657143 0-3.657143-3.657143 0 10.971429-3.657143 25.6-10.971429 36.571428-40.228571 102.4-168.228571 179.2-332.8 197.485715-14.628571 0-25.6 3.657143-40.228571 3.657143 0 0 3.657143 3.657143 3.657143 7.314285 3.657143 10.971429 3.657143 21.942857 0 29.257143 14.628571 0 25.6 0 40.228571-3.657143 179.2-18.285714 321.828571-109.714286 365.714286-226.742857 3.657143-14.628571 7.314286-25.6 10.971429-40.228571-7.314286 7.314286-14.628571 7.314286-25.6 3.657143z m-351.085715-296.228572c160.914286 18.285714 292.571429 95.085714 332.8 197.485714 3.657143 10.971429 7.314286 25.6 10.971429 36.571429 7.314286-3.657143 14.628571-7.314286 25.6-7.314286 3.657143 0 3.657143 0 7.314286 3.657143h3.657142c-3.657143-14.628571-3.657143-25.6-10.971428-40.228571-43.885714-117.028571-186.514286-208.457143-365.714286-226.742857-14.628571 0-25.6-3.657143-40.228571-3.657143v3.657143c3.657143 10.971429 3.657143 21.942857-3.657143 32.914285 14.628571 0 29.257143 0 40.228571 3.657143zM475.428571 237.714286c0-10.971429 0-18.285714 3.657143-25.6-14.628571 0-25.6 3.657143-40.228571 3.657143-179.2 18.285714-321.828571 109.714286-365.714286 226.742857-3.657143 14.628571-7.314286 25.6-10.971428 40.228571 7.314286-3.657143 14.628571-3.657143 21.942857-3.657143 3.657143 0 3.657143 0 7.314285 3.657143 3.657143 0 3.657143 3.657143 7.314286 3.657143 0-10.971429 3.657143-25.6 10.971429-36.571429 40.228571-102.4 168.228571-179.2 332.8-197.485714 10.971429 0 25.6-3.657143 36.571428-3.657143 0-3.657143-3.657143-7.314286-3.657143-10.971428z"  p-id="13566"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CEraser.svg b/src/assets/icons/CEraser.svg
index 34f086ad..674c7d45 100644
--- a/src/assets/icons/CEraser.svg
+++ b/src/assets/icons/CEraser.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746587925372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14649" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M969.806769 938.771692H370.477949l232.474256-298.614154 272.541539-354.829128a65.641026 65.641026 0 0 0-8.349539-91.871179L639.264821 13.548308a64.459487 64.459487 0 0 0-90.584616 14.25723L273.670564 381.768205 23.236923 701.80759a101.848615 101.848615 0 0 0 13.758359 142.572307l174.867692 137.58359a93.630359 93.630359 0 0 0 54.272 19.718564h703.671795c17.302974 0 31.323897-14.073436 31.323898-31.455179 0-17.381744-14.020923-31.455179-31.323898-31.45518zM73.307897 798.693744a42.010256 42.010256 0 0 1-4.174769-61.650052l213.700923-274.72082 239.143385 187.890872-213.674667 274.72082c-4.673641 5.77641-10.502564 10.502564-17.119179 13.837128h-21.267693a31.166359 31.166359 0 0 0-10.870153 2.100513 36.653949 36.653949 0 0 1-9.609847-5.041231L73.307897 798.72z" fill="#333333" p-id="14650"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746587925372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14649" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M969.806769 938.771692H370.477949l232.474256-298.614154 272.541539-354.829128a65.641026 65.641026 0 0 0-8.349539-91.871179L639.264821 13.548308a64.459487 64.459487 0 0 0-90.584616 14.25723L273.670564 381.768205 23.236923 701.80759a101.848615 101.848615 0 0 0 13.758359 142.572307l174.867692 137.58359a93.630359 93.630359 0 0 0 54.272 19.718564h703.671795c17.302974 0 31.323897-14.073436 31.323898-31.455179 0-17.381744-14.020923-31.455179-31.323898-31.45518zM73.307897 798.693744a42.010256 42.010256 0 0 1-4.174769-61.650052l213.700923-274.72082 239.143385 187.890872-213.674667 274.72082c-4.673641 5.77641-10.502564 10.502564-17.119179 13.837128h-21.267693a31.166359 31.166359 0 0 0-10.870153 2.100513 36.653949 36.653949 0 0 1-9.609847-5.041231L73.307897 798.72z" p-id="14650"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CFont.svg b/src/assets/icons/CFont.svg
index 39c4c79a..256fbe9b 100644
--- a/src/assets/icons/CFont.svg
+++ b/src/assets/icons/CFont.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746611285722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29545" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M32 0 972.651987 0 972.651987 316.651576 931.05337 316.651576C931.05337 316.651576 851.664627 123.301587 757.99696 106.426488 664.326945 89.551388 599.217138 101.163665 599.217138 101.163665L598.048275 908.460659C598.048275 908.460659 624.046382 963.027206 666.957181 966.897965L761.948781 966.897965 761.948781 1022.63337 242.777214 1022.63337 244.09057 965.511776 327.28898 964.19607C327.28898 964.19607 389.765027 944.689555 389.765027 899.258944 389.765027 853.896474 391.083083 107.668185 391.083083 107.668185 391.083083 107.668185 288.327649 93.496156 234.939369 106.496972 181.625097 119.427304 87.881073 197.297106 73.598618 311.462763L32 312.778468 32 0 32 0 32 0Z" fill="#272636" p-id="29546"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746611285722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29545" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M32 0 972.651987 0 972.651987 316.651576 931.05337 316.651576C931.05337 316.651576 851.664627 123.301587 757.99696 106.426488 664.326945 89.551388 599.217138 101.163665 599.217138 101.163665L598.048275 908.460659C598.048275 908.460659 624.046382 963.027206 666.957181 966.897965L761.948781 966.897965 761.948781 1022.63337 242.777214 1022.63337 244.09057 965.511776 327.28898 964.19607C327.28898 964.19607 389.765027 944.689555 389.765027 899.258944 389.765027 853.896474 391.083083 107.668185 391.083083 107.668185 391.083083 107.668185 288.327649 93.496156 234.939369 106.496972 181.625097 119.427304 87.881073 197.297106 73.598618 311.462763L32 312.778468 32 0 32 0 32 0Z"  p-id="29546"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CGroup.svg b/src/assets/icons/CGroup.svg
new file mode 100644
index 00000000..a7033ecc
--- /dev/null
+++ b/src/assets/icons/CGroup.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750090989124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3199" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M855.04 385.024q19.456 2.048 38.912 10.24t33.792 23.04 21.504 37.376 2.048 54.272q-2.048 8.192-8.192 40.448t-14.336 74.24-18.432 86.528-19.456 76.288q-5.12 18.432-14.848 37.888t-25.088 35.328-36.864 26.112-51.2 10.24l-567.296 0q-21.504 0-44.544-9.216t-42.496-26.112-31.744-40.96-12.288-53.76l0-439.296q0-62.464 33.792-97.792t95.232-35.328l503.808 0q22.528 0 46.592 8.704t43.52 24.064 31.744 35.84 12.288 44.032l0 11.264-53.248 0q-40.96 0-95.744-0.512t-116.736-0.512-115.712-0.512-92.672-0.512l-47.104 0q-26.624 0-41.472 16.896t-23.04 44.544q-8.192 29.696-18.432 62.976t-18.432 61.952q-10.24 33.792-20.48 65.536-2.048 8.192-2.048 13.312 0 17.408 11.776 29.184t29.184 11.776q31.744 0 43.008-39.936l54.272-198.656q133.12 1.024 243.712 1.024l286.72 0z" p-id="3200"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CLassoArea.svg b/src/assets/icons/CLassoArea.svg
index 999fd3cf..73ccb7e5 100644
--- a/src/assets/icons/CLassoArea.svg
+++ b/src/assets/icons/CLassoArea.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746588005687" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16633" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M138.666667 765.781333H85.333333v84.608C85.333333 899.157333 121.173333 938.666667 165.333333 938.666667h57.770667v-58.88H165.333333c-14.72 0-26.666667-13.141333-26.666666-29.397334v-84.608z m0-169.173333H85.333333v-169.216h53.333334v169.216z m0-338.389333H85.333333V173.610667C85.333333 124.842667 121.173333 85.333333 165.333333 85.333333h57.770667v58.88H165.333333c-14.72 0-26.666667 13.141333-26.666666 29.397334v84.608z m200.021333-114.048V85.333333h115.541333v58.88H338.645333z m231.082667 0V85.333333h115.584v58.88h-115.584z m231.125333 0V85.333333h57.770667C902.826667 85.333333 938.666667 124.842667 938.666667 173.610667v84.608h-53.333334V173.610667c0-16.213333-11.946667-29.44-26.666666-29.44h-57.770667z m84.437333 283.221333H938.666667V554.666667h-53.333334v-127.274667zM454.229333 879.829333V938.666667H338.645333v-58.88h115.584z" fill="#1E2226" p-id="16634"></path><path d="M597.333333 725.333333h341.333334v85.333334h-341.333334z" fill="#1E2226" p-id="16635"></path><path d="M725.333333 938.666667v-341.333334h85.333334v341.333334z" fill="#1E2226" p-id="16636"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746588005687" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16633" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M138.666667 765.781333H85.333333v84.608C85.333333 899.157333 121.173333 938.666667 165.333333 938.666667h57.770667v-58.88H165.333333c-14.72 0-26.666667-13.141333-26.666666-29.397334v-84.608z m0-169.173333H85.333333v-169.216h53.333334v169.216z m0-338.389333H85.333333V173.610667C85.333333 124.842667 121.173333 85.333333 165.333333 85.333333h57.770667v58.88H165.333333c-14.72 0-26.666667 13.141333-26.666666 29.397334v84.608z m200.021333-114.048V85.333333h115.541333v58.88H338.645333z m231.082667 0V85.333333h115.584v58.88h-115.584z m231.125333 0V85.333333h57.770667C902.826667 85.333333 938.666667 124.842667 938.666667 173.610667v84.608h-53.333334V173.610667c0-16.213333-11.946667-29.44-26.666666-29.44h-57.770667z m84.437333 283.221333H938.666667V554.666667h-53.333334v-127.274667zM454.229333 879.829333V938.666667H338.645333v-58.88h115.584z" fill="#1E2226" p-id="16634"></path><path d="M597.333333 725.333333h341.333334v85.333334h-341.333334z" fill="#1E2226" p-id="16635"></path><path d="M725.333333 938.666667v-341.333334h85.333334v341.333334z"  p-id="16636"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CLayout.svg b/src/assets/icons/CLayout.svg
index c0868e8f..84145023 100644
--- a/src/assets/icons/CLayout.svg
+++ b/src/assets/icons/CLayout.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746500420404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8000" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M938.633323 570.21589 554.672082 742.800573c-36.761735 15.990183-51.399706 15.990183-85.329837 0L85.366677 570.21589c-20.383048-10.82658-25.879451-50.886971-25.879451-72.745814 25.630777 14.637372 61.674122 30.959106 60.334559 30.131251l392.178726 180.787506 392.19203-180.787506c0.662106-0.165776 35.628888-17.786085 60.320232-30.131251C964.512773 519.839549 957.57959 561.377594 938.633323 570.21589zM938.633323 389.413034 554.672082 562.012044c-36.761735 15.991206-51.399706 15.991206-85.329837 0L85.366677 389.413034c-30.160116-16.004509-29.221706-66.407456 0-85.229127L469.342245 101.453646c33.930131-16.943904 55.155394-17.882276 85.329837 0l383.961241 202.730261C967.854005 320.188416 966.887964 376.225687 938.633323 389.413034zM511.999488 135.865387 119.820762 346.798471l392.178726 165.252695L904.192541 346.798471 511.999488 135.865387zM511.999488 135.865387M511.999488 889.202944l392.19203-180.815135c0.662106-0.165776 35.628888-17.786085 60.320232-30.130228 0 22.369473-6.93216 63.907519-25.879451 72.745814L554.672082 923.615709c-36.761735 15.990183-51.399706 15.990183-85.329837 0L85.366677 751.002372c-20.383048-10.82658-25.879451-50.872644-25.879451-72.745814 25.630777 14.637372 61.674122 30.959106 60.334559 30.130228L511.999488 889.202944z" fill="#272636" p-id="8001"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749783744939" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12334" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M510.3 754.4c-22.9 0-45.7-7.5-63.6-22.6L91.5 537.2l-1.9-1.7C55.8 505.1 51.7 456 80 421.1l34.7 28.2c-12.7 15.7-11.3 36.9 3.1 51.3L472.6 695l1.9 1.7c19.4 17.4 52.1 17.5 71.5 0l1.9-1.7 354.8-194.3c14.4-14.4 15.8-35.6 3.1-51.3l34.7-28.2c28.3 34.8 24.2 84-9.6 114.3l-1.9 1.7-355.2 194.6c-17.8 15-40.7 22.6-63.5 22.6z" p-id="12335"></path><path d="M510.3 946.6c-22.9 0-45.7-7.5-63.6-22.6L91.5 729.4l-1.9-1.7c-33.7-30.4-37.8-79.5-9.6-114.3l34.7 28.2c-12.7 15.7-11.3 36.9 3.1 51.3l354.8 194.3 1.9 1.7c19.4 17.4 52.1 17.5 71.5 0l1.9-1.7 354.8-194.3c14.4-14.4 15.8-35.6 3.1-51.3l34.7-28.2c28.3 34.8 24.2 84-9.6 114.3l-1.9 1.7L573.8 924c-17.8 15.1-40.7 22.6-63.5 22.6zM916.1 275.6L561 85.6c-28-25.2-73.4-25.2-101.4 0l-355.1 190c-25.3 22.8-27.7 58.4-7.2 83.6 2.2 2.7 4.5 5.2 7.2 7.7l56.1 30.7 299 163.8c28 25.2 73.4 25.2 101.4 0l299-163.8 56.1-30.7c2.7-2.4 5-5 7.2-7.7 20.4-25.2 18.1-60.8-7.2-83.6z" p-id="12336"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CLiquefying.svg b/src/assets/icons/CLiquefying.svg
index 0f3e8329..c45d984c 100644
--- a/src/assets/icons/CLiquefying.svg
+++ b/src/assets/icons/CLiquefying.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746587793915" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7023" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.8828125" height="200"><path d="M199.8848 263.8848a76.8 76.8 0 0 1 76.8-76.8h496.2304a76.8 76.8 0 0 1 76.8 76.8v496.2304a76.8 76.8 0 0 1-76.8 76.8H276.6848a76.8 76.8 0 0 1-76.8-76.8V263.8848z m466.816-12.8v230.528h119.04v-217.728a12.8 12.8 0 0 0-12.8-12.8h-106.24z m-64 214.4256V251.0848h-149.12l-28.7488 101.1712c-2.4064 8.4224-4.4544 16.9216-6.144 25.4976 18.1504 2.6112 36.0448 8.3712 52.8896 17.408l131.1232 70.3488z m-190.2848-23.9616c0 14.848 1.024 29.7472 3.072 44.544l39.6032 286.8224h147.584v-234.7776l-161.3824-86.6048a95.872 95.872 0 0 0-28.8768-9.984z m-59.4688-59.5456c2.4576-15.9232 5.888-31.6928 10.3168-47.232l23.7824-83.712h-110.3616a12.8 12.8 0 0 0-12.8 12.8v177.3568l20.8896-20.1984a159.6928 159.6928 0 0 1 68.1728-39.0144z m-89.088 148.1728v229.9392a12.8 12.8 0 0 0 12.8 12.8h113.8176l-38.4-278.0416c-1.9456-14.0544-3.0976-28.16-3.5072-42.24-6.912 3.8912-13.4144 8.704-19.328 14.4384l-65.3568 63.104z m402.8416 15.4368v227.328h106.24a12.8 12.8 0 0 0 12.8-12.8v-214.528h-119.04z" fill="#555555" p-id="7024"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746587793915" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7023" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.8828125" height="200"><path d="M199.8848 263.8848a76.8 76.8 0 0 1 76.8-76.8h496.2304a76.8 76.8 0 0 1 76.8 76.8v496.2304a76.8 76.8 0 0 1-76.8 76.8H276.6848a76.8 76.8 0 0 1-76.8-76.8V263.8848z m466.816-12.8v230.528h119.04v-217.728a12.8 12.8 0 0 0-12.8-12.8h-106.24z m-64 214.4256V251.0848h-149.12l-28.7488 101.1712c-2.4064 8.4224-4.4544 16.9216-6.144 25.4976 18.1504 2.6112 36.0448 8.3712 52.8896 17.408l131.1232 70.3488z m-190.2848-23.9616c0 14.848 1.024 29.7472 3.072 44.544l39.6032 286.8224h147.584v-234.7776l-161.3824-86.6048a95.872 95.872 0 0 0-28.8768-9.984z m-59.4688-59.5456c2.4576-15.9232 5.888-31.6928 10.3168-47.232l23.7824-83.712h-110.3616a12.8 12.8 0 0 0-12.8 12.8v177.3568l20.8896-20.1984a159.6928 159.6928 0 0 1 68.1728-39.0144z m-89.088 148.1728v229.9392a12.8 12.8 0 0 0 12.8 12.8h113.8176l-38.4-278.0416c-1.9456-14.0544-3.0976-28.16-3.5072-42.24-6.912 3.8912-13.4144 8.704-19.328 14.4384l-65.3568 63.104z m402.8416 15.4368v227.328h106.24a12.8 12.8 0 0 0 12.8-12.8v-214.528h-119.04z"  p-id="7024"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CMergeGroup.svg b/src/assets/icons/CMergeGroup.svg
new file mode 100644
index 00000000..16c445ba
--- /dev/null
+++ b/src/assets/icons/CMergeGroup.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750085976588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3390" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M976.457143 365.714286c46.884571 0 49.408 23.844571 46.884571 53.028571l-42.422857 479.195429c-2.56 29.147429-8.228571 52.918857-56.32 52.918857H99.401143c-47.030857 0-53.76-23.771429-56.32-52.918857L0.694857 418.742857C-1.828571 389.558857 0.512 365.714286 47.652571 365.714286zM658.285714 768H182.857143a36.571429 36.571429 0 0 0 0 73.142857h475.428571a36.571429 36.571429 0 0 0 0-73.142857z m-182.857143-146.285714H182.857143a36.571429 36.571429 0 0 0 0 73.142857h292.571428a36.571429 36.571429 0 0 0 0-73.142857z"  p-id="3391"></path><path d="M940.361143 244.041143C934.656 217.234286 906.459429 195.291429 877.714286 195.291429h-353.28c-28.818286-0.182857-69.229714-19.529143-89.307429-43.227429l-30.866286-35.84C384 92.525714 343.844571 73.142857 314.989714 73.142857H146.212571c-29.366857 0.694857-53.942857 26.368-57.929142 60.598857L73.142857 292.571429h877.714286l-10.496-48.530286z"  fill-opacity=".85" p-id="3392"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CMiniMap.svg b/src/assets/icons/CMiniMap.svg
index ac994d5b..f29898e3 100644
--- a/src/assets/icons/CMiniMap.svg
+++ b/src/assets/icons/CMiniMap.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746611649007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45073" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 495.424V128a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v768a32 32 0 0 0 32 32h433.68a30.32 30.32 0 1 0 0-60.64H127.824V157.968h768.688v337.44a31.744 31.744 0 1 0 63.488 0zM630.512 928c-5.968 0-11.696-2.448-15.92-6.8A23.568 23.568 0 0 1 608 904.8V583.216c0-6.16 2.368-12.064 6.592-16.416s9.952-6.8 15.936-6.8h311.84c5.984 0 11.712 2.448 15.936 6.8s6.592 10.24 6.592 16.416v321.376c0 6.16-2.368 12.064-6.592 16.432a22.176 22.176 0 0 1-15.936 6.784L630.528 928zM672 624v240h224V624H672z m-358.096-150.432l93.392-0.24L184.16 250.176l40.848-40.848 223.136 223.136 0.24-93.392 57.68-0.16-0.48 162.912a28.96 28.96 0 0 1-28.928 28.928l-162.928 0.48 0.16-57.664z" fill="#2C2C2C" p-id="45074"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746611649007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45073" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 495.424V128a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v768a32 32 0 0 0 32 32h433.68a30.32 30.32 0 1 0 0-60.64H127.824V157.968h768.688v337.44a31.744 31.744 0 1 0 63.488 0zM630.512 928c-5.968 0-11.696-2.448-15.92-6.8A23.568 23.568 0 0 1 608 904.8V583.216c0-6.16 2.368-12.064 6.592-16.416s9.952-6.8 15.936-6.8h311.84c5.984 0 11.712 2.448 15.936 6.8s6.592 10.24 6.592 16.416v321.376c0 6.16-2.368 12.064-6.592 16.432a22.176 22.176 0 0 1-15.936 6.784L630.528 928zM672 624v240h224V624H672z m-358.096-150.432l93.392-0.24L184.16 250.176l40.848-40.848 223.136 223.136 0.24-93.392 57.68-0.16-0.48 162.912a28.96 28.96 0 0 1-28.928 28.928l-162.928 0.48 0.16-57.664z"  p-id="45074"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CPicture.svg b/src/assets/icons/CPicture.svg
index 3bdc19dc..f9bcd118 100644
--- a/src/assets/icons/CPicture.svg
+++ b/src/assets/icons/CPicture.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746503112377" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17415" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z" fill="#000000" p-id="17416"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750088041003" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17251" xmlns:xlink="http://www.w3.org/1999/xlink" width="242.7734375" height="200"><path d="M962.194286 728.502857l-91.428572-128a36.571429 36.571429 0 0 0-59.245714 0l-61.44 85.942857-134.948571-192.731428a36.571429 36.571429 0 0 0-59.977143 0l-164.571429 235.154285a36.571429 36.571429 0 0 0-2.56 36.571429 36.571429 36.571429 0 0 0 32.548572 19.748571h512a36.571429 36.571429 0 0 0 29.622857-57.782857z" fill="#FFC824" p-id="17252"></path><path d="M962.194286 728.502857l-182.857143-256a36.571429 36.571429 0 0 0-59.245714 0L658.285714 556.982857l-135.68-193.828571a36.571429 36.571429 0 0 0-59.977143 0l-256 365.714285a36.571429 36.571429 0 0 0 59.977143 41.691429l226.011429-322.925714 226.011428 322.925714a36.571429 36.571429 0 0 0 29.988572 15.725714 36.571429 36.571429 0 0 0 29.988571-57.417143l-75.702857-109.714285 45.714286-64 153.234286 214.308571a36.571429 36.571429 0 0 0 29.622857 15.36 36.571429 36.571429 0 0 0 21.211428-6.948571 36.571429 36.571429 0 0 0 9.508572-49.371429zM374.857143 182.857143h-36.571429a36.571429 36.571429 0 0 1 0-73.142857h36.571429a36.571429 36.571429 0 0 1 0 73.142857z" fill="#6B400D" p-id="17253"></path><path d="M1133.714286 1024H109.714286a109.714286 109.714286 0 0 1-109.714286-109.714286V219.428571a109.714286 109.714286 0 0 1 109.714286-109.714285h82.285714a36.571429 36.571429 0 0 1 0 73.142857H109.714286a36.571429 36.571429 0 0 0-36.571429 36.571428v694.857143a36.571429 36.571429 0 0 0 36.571429 36.571429h1024a36.571429 36.571429 0 0 0 36.571428-36.571429V219.428571a36.571429 36.571429 0 0 0-36.571428-36.571428H557.714286a36.571429 36.571429 0 0 1 0-73.142857H1133.714286a109.714286 109.714286 0 0 1 109.714285 109.714285v694.857143a109.714286 109.714286 0 0 1-109.714285 109.714286z" fill="#6B400D" p-id="17254"></path><path d="M914.285714 182.857143m-146.285714 0a146.285714 146.285714 0 1 0 292.571429 0 146.285714 146.285714 0 1 0-292.571429 0Z" fill="#FFC824" p-id="17255"></path><path d="M914.285714 0a182.857143 182.857143 0 1 0 182.857143 182.857143 182.857143 182.857143 0 0 0-182.857143-182.857143z m0 292.571429a109.714286 109.714286 0 1 1 109.714286-109.714286 109.714286 109.714286 0 0 1-109.714286 109.714286z" fill="#6B400D" p-id="17256"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CPlus.svg b/src/assets/icons/CPlus.svg
new file mode 100644
index 00000000..f12f6e13
--- /dev/null
+++ b/src/assets/icons/CPlus.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749782138532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7139" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"  p-id="7140"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CRight.svg b/src/assets/icons/CRight.svg
new file mode 100644
index 00000000..27117054
--- /dev/null
+++ b/src/assets/icons/CRight.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749993035876" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4161" id="mx_n_1749993035877" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M247.765333 991.616c11.946667 0 24.106667-4.010667 34.218667-11.989333l529.749333-426.112a54.656 54.656 0 0 0 0-85.12L284.245333 44.501333A54.613333 54.613333 0 0 0 215.893333 129.621333l474.453334 381.397334-476.842667 383.488a54.613333 54.613333 0 0 0 34.261333 97.109333z"  p-id="4162"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CSelect.svg b/src/assets/icons/CSelect.svg
index b6972b74..717e534e 100644
--- a/src/assets/icons/CSelect.svg
+++ b/src/assets/icons/CSelect.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121290756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51598" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M829.888 739.392L547.84 457.28 706.112 364.8l-512-170.624L364.8 706.112l92.48-158.336 282.112 282.112z" fill="#040000" p-id="51599"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121290756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51598" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M829.888 739.392L547.84 457.28 706.112 364.8l-512-170.624L364.8 706.112l92.48-158.336 282.112 282.112z"  p-id="51599"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CSort.svg b/src/assets/icons/CSort.svg
new file mode 100644
index 00000000..6ac831aa
--- /dev/null
+++ b/src/assets/icons/CSort.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749838755945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5511" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M346.741022 0h126.756232v126.756232H346.741022zM550.502746 0h126.756232v126.756232H550.502746zM346.741022 224.52725h126.756232v126.756231H346.741022zM550.502746 224.52725h126.756232v126.756231H550.502746zM346.741022 448.621884h126.756232v126.756232H346.741022zM550.502746 448.621884h126.756232v126.756232H550.502746zM346.741022 673.149134h126.756232v126.756231H346.741022zM550.502746 673.149134h126.756232v126.756231H550.502746zM346.741022 897.243768h126.756232v126.756232H346.741022zM550.502746 897.243768h126.756232v126.756232H550.502746z" p-id="5512"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CTop.svg b/src/assets/icons/CTop.svg
new file mode 100644
index 00000000..483a172d
--- /dev/null
+++ b/src/assets/icons/CTop.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089460412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4842" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.095 911c23.749 0 43-19.252 43-43V449.812l104.69 104.689c16.793 16.793 44.019 16.793 60.812 0 16.792-16.792 16.792-44.019 0-60.811L544.92 318.013c-0.735-0.86-1.51-1.7-2.325-2.514-8.42-8.42-19.464-12.619-30.5-12.594-11.037-0.025-22.081 4.174-30.502 12.594a43.591 43.591 0 0 0-2.324 2.514L303.594 493.69c-16.792 16.792-16.792 44.019 0 60.811 16.793 16.793 44.019 16.793 60.812 0l104.689-104.689V868c0 23.748 19.252 43 43 43zM820 200c23.748 0 43-19.252 43-43s-19.252-43-43-43H204c-23.748 0-43 19.252-43 43s19.252 43 43 43h616z"  p-id="4843"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/CUp.svg b/src/assets/icons/CUp.svg
new file mode 100644
index 00000000..ef8ac0ee
--- /dev/null
+++ b/src/assets/icons/CUp.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750089434755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M714.59 150.95375c3.555 0.77625 7.09875 2.0025 10.6875 2.21625 3.20625 0.2025 5.74875 1.24875 8.0775 3.20624999 3.34125 2.80125 6.80624999 5.45625 9.945 8.47125001 67.6125 65.25 135.1575 130.545 202.73625 195.795 11.0025 10.59749999 17.13375 23.09625 15.71625 38.6775a36.9675 36.9675 0 0 1-7.83 19.88999999c-21.81375 27.57375-55.38375 27.50625-77.0175 6.45750001-38.77875-37.77750001-77.8275-75.29625-116.76375-112.9275-0.9675-0.945-1.98-1.8675-3.7575-3.54375l0 515.07c0 25.38-15.51375 43.63875-40.5225 47.73375-26.65125 4.37625-53.58375-18.23625-53.65125-45.2475-0.10125-44.29125-0.0225-88.56-0.0225-132.84 0-163.71-0.0225-327.42 0-491.11875 0-23.6475 13.39875-42.64875 34.88625-49.4775 3.02625-0.95625 6.15375-1.58625 9.2475-2.3625l8.26875 0z m-226.45125 0c3.43125 0.77625 6.93 1.3725 10.305 2.3625a60.22125 60.22125 0 0 1 43.30125 61.39125c-1.53000001 27.855-22.43249999 51.12-50.265 55.81125001-3.36375 0.5625-6.84 0.79875-10.27125 0.79874999-119.475 0.045-238.95 0.10125-358.43625 0-29.89125-0.0225-53.6625-19.7775-59.68125-48.9825-0.315-1.54125-0.6975-3.07125-1.04625-4.60125L62.045 204.65c0.2025-0.64125 0.50625-1.26 0.59625-1.9125a59.90625 59.90625 0 0 1 44.42625-49.8375c2.86875-0.73125 5.77125-1.305 8.6625-1.9575l372.40875 0.01125zM62.045 505.46375c0.55125-2.565 1.0575-5.11875001 1.67625-7.65 6.78375-27.495 30.5325-45.97875 59.36625-46.0125 62.9775-0.05625 125.94375-0.01125 188.91-0.01125 56.32875 0 112.64625-0.05625001 168.96375 0.0225 28.65375001 0.03375 52.2675 18.4725 59.11875 45.87750001 9.29249999 37.11375-18.79875 74.0025-57.06 74.41874998-30.72375 0.32625-61.48125 0.09-92.205 0.09000001-89.13375 0-178.25625 0.0225-267.39-1e-8C94.34375 572.17625 70.51625 553.77124999 63.71 526.175c-0.63-2.5425-1.13625001-5.1075-1.67625-7.65l0-13.06125 0.01125 0z m0 300.79125c0.63-2.75625 1.1925-5.52375 1.89-8.28a59.9625 59.9625 0 0 1 57.16125-45.2925c6.5475-0.13500001 13.095-0.05625001 19.63125-0.05625 112.8825 0 225.77625001 0 338.65875 0.03375001 24.89625 0 43.9425 10.51875 55.63125 32.61374999 19.36125 36.675-3.88125 81.3375-44.955 87.17625-0.6525 0.09000001-1.2825 0.3825-1.92375 0.6075L115.73 873.0575c-0.64125-0.225-1.27125-0.51749999-1.935-0.6075a59.8275 59.8275 0 0 1-49.7925-44.46c-0.73125-2.86875-1.305-5.76-1.9575-8.64l0-13.095z" fill="" p-id="4539"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/fonticon/CFcenter.svg b/src/assets/icons/fonticon/CFcenter.svg
new file mode 100644
index 00000000..bc5f568d
--- /dev/null
+++ b/src/assets/icons/fonticon/CFcenter.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749746246836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4311" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M929.664 251.093333a52.096 52.096 0 0 0 0-104.192H94.976a52.096 52.096 0 0 0 0 104.192z m-208.682667 208.682667a52.138667 52.138667 0 0 0 0-104.234667H303.658667a52.138667 52.138667 0 0 0 0 104.234667zM981.546667 616.192a52.181333 52.181333 0 0 1-52.096 52.096H94.976a52.096 52.096 0 1 1 0-104.192h834.688A52.181333 52.181333 0 0 1 981.546667 616.192m-260.778667 260.992a52.138667 52.138667 0 0 0 0-104.234667H303.658667a52.138667 52.138667 0 0 0 0 104.234667z" p-id="4312"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/fonticon/CFleft.svg b/src/assets/icons/fonticon/CFleft.svg
new file mode 100644
index 00000000..a9e9c4f1
--- /dev/null
+++ b/src/assets/icons/fonticon/CFleft.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749746098847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2369" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M929.28 250.538667a52.096 52.096 0 0 0 0-104.192H94.634667a52.096 52.096 0 0 0 0 104.192zM511.872 459.221333a52.138667 52.138667 0 0 0 0-104.234666H94.634667a52.138667 52.138667 0 0 0 0 104.234666zM981.205333 615.466667a52.181333 52.181333 0 0 1-52.096 52.096H94.634667a52.096 52.096 0 1 1 0-104.192h834.645333A52.181333 52.181333 0 0 1 981.205333 615.466667m-469.333333 261.077333a52.138667 52.138667 0 0 0 0-104.234667H94.634667a52.138667 52.138667 0 0 0 0 104.234667z" p-id="2370"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/fonticon/CFright.svg b/src/assets/icons/fonticon/CFright.svg
new file mode 100644
index 00000000..189655ec
--- /dev/null
+++ b/src/assets/icons/fonticon/CFright.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749746222897" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3327" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M929.578667 251.093333a52.096 52.096 0 0 0 0-104.192H94.933333a52.096 52.096 0 1 0 0 104.192z m0 208.682667a52.138667 52.138667 0 0 0 0-104.234667H512.128a52.138667 52.138667 0 0 0 0 104.234667zM981.461333 616.192a52.181333 52.181333 0 0 1-52.096 52.096H94.933333a52.096 52.096 0 1 1 0-104.192h834.645334A52.181333 52.181333 0 0 1 981.461333 616.192m-52.096 260.992a52.138667 52.138667 0 0 0 0-104.234667H512.128a52.138667 52.138667 0 0 0 0 104.234667z" p-id="3328"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/fonticon/CFtretch.svg b/src/assets/icons/fonticon/CFtretch.svg
new file mode 100644
index 00000000..6abc022d
--- /dev/null
+++ b/src/assets/icons/fonticon/CFtretch.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749746899231" class="icon" viewBox="0 0 1462 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8628" xmlns:xlink="http://www.w3.org/1999/xlink" width="285.546875" height="200"><path d="M258.19383386 353.04924526h953.4008432c14.61924623 0 27.07032366 5.2050163 37.45916917 15.5232382 10.33234661 10.40297098 15.52323819 22.84698604 15.52323819 37.47329462s-5.19089157 27.06326129-15.52323819 37.46623226c-10.38178315 10.33940898-22.83286131 15.52323819-37.45916917 15.5232382H258.19383386c-14.61924623 0-27.07032366-5.18382922-37.4591699-15.5232382C210.42350516 433.10197701 205.21142577 420.67208668 205.21142577 406.04577808c0-14.61924623 5.21207939-27.07032366 15.52323819-37.47329462 10.38178315-10.31115879 22.83286131-15.52323819 37.4591699-15.5232382m0 211.85194421h953.4008432c14.61924623 0 27.07032366 5.16264212 37.45916917 15.55148836 10.33234661 10.33234661 15.52323819 22.82579894 15.52323819 37.43091973 0 14.62630859-5.19089157 27.11976093-15.52323819 37.43091973-10.38178315 10.41003333-22.83286131 15.58680018-37.45916917 15.58680018H258.19383386c-14.61924623 0-27.07032366-5.17676685-37.4591699-15.57973783C210.42350516 645.01042084 205.21142577 632.50990616 205.21142577 617.89065992s5.21207939-27.10563621 15.52323819-37.43091972c10.38178315-10.39590861 22.83286131-15.55855001 37.4591699-15.55855074m0 211.89431911h953.4008432c14.61924623 0 27.07032366 5.13439194 37.45916917 15.55148837 10.33234661 10.31115879 15.52323819 22.79754877 15.52323819 37.43091973 0 14.63337096-5.19089157 27.11976093-15.52323819 37.43091973-10.38178315 10.39590861-22.83286131 15.55855001-37.45916917 15.55855073H258.19383386c-14.61924623 0-27.07032366-5.16264212-37.4591699-15.55148838-10.31115879-10.31115879-15.52323819-22.8116735-15.52323819-37.43091971 0-14.64043332 5.21207939-27.11976093 15.52323819-37.43091972 10.38178315-10.42415807 22.83286131-15.55855001 37.4591699-15.55855075M258.19383386 141.21142578h953.4008432c14.61924623 0 27.07032366 5.15557975 37.45916917 15.53736293C1259.38619285 167.05994749 1264.57708442 179.56752528 1264.57708442 194.17970842c0 14.64043332-5.19089157 27.13388565-15.52323819 37.43092045-10.38178315 10.42415807-22.83286131 15.57267547-37.45916917 15.57267474H258.19383386c-14.61924623 0-27.07032366-5.15557975-37.4591699-15.56561237C210.42350516 221.3135948 205.21142577 208.82014247 205.21142577 194.17970842c0-14.61924623 5.21207939-27.11976093 15.52323819-37.43091971C231.11644712 146.35288008 243.56752527 141.21142578 258.19383386 141.21142578" p-id="8629"></path></svg>
\ No newline at end of file
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index e6af49c5..93aae752 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -1911,6 +1911,7 @@ textarea:focus {
   padding-right: 0;
   background-color: #fff;
   flex: 1;
+  height: 5rem;
 }
 .collection_modal_body .input_border .input_box_btnBox.sketch,
 .design_detail_modal_component .input_border .input_box_btnBox.sketch,
@@ -1922,6 +1923,33 @@ textarea:focus {
 .generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
 .generate .input_border .input_box_btnBox.sketch {
   padding: 0;
+  overflow: hidden;
+  flex: 1;
+  border: none;
+  background-color: rgba(0, 0, 0, 0);
+}
+.collection_modal_body .input_border .input_box_btnBox.sketch .upload_item,
+.design_detail_modal_component .input_border .input_box_btnBox.sketch .upload_item,
+.library_page .input_border .input_box_btnBox.sketch .upload_item,
+.productImg_content .input_border .input_box_btnBox.sketch .upload_item,
+.poseTransfer .input_border .input_box_btnBox.sketch .upload_item,
+.scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item,
+.accountEdit_page .input_border .input_box_btnBox.sketch .upload_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item,
+.generate .input_border .input_box_btnBox.sketch .upload_item {
+  width: 6rem;
+}
+.collection_modal_body .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.design_detail_modal_component .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.library_page .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.productImg_content .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.poseTransfer .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.scaleImage_modal .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.accountEdit_page .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch .upload_item .upload_file_item,
+.generate .input_border .input_box_btnBox.sketch .upload_item .upload_file_item {
+  height: 6rem;
+  width: 6rem;
 }
 .collection_modal_body .input_border .input_box_btnBox > .textarea,
 .design_detail_modal_component .input_border .input_box_btnBox > .textarea,
@@ -1977,7 +2005,7 @@ textarea:focus {
 .accountEdit_page .input_border .input_box_btnBox .upload_item,
 .generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
 .generate .input_border .input_box_btnBox .upload_item {
-  width: 5.7rem;
+  width: 4.7rem;
 }
 .collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
 .design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
@@ -1992,8 +2020,8 @@ textarea:focus {
   left: 0;
   top: 50%;
   transform: translateY(-50%);
-  height: 5.7rem;
-  width: 5.7rem;
+  height: 4.7rem;
+  width: 4.7rem;
   border-radius: 1rem;
   overflow: hidden;
 }
@@ -2087,7 +2115,6 @@ textarea:focus {
   z-index: 4;
   width: 4rem;
   align-items: center;
-  background-color: #fff;
   justify-content: center;
 }
 .collection_modal_body .input_border .fi.fi-br-loading,
@@ -2214,7 +2241,7 @@ textarea:focus {
 .generage_btn_box .generage_btn {
   margin-left: 2rem;
   display: flex;
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   padding: 1rem 2rem;
   box-sizing: content-box;
   justify-content: center;
@@ -2250,12 +2277,13 @@ textarea:focus {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #fff;
 }
 .generage_btn_box .content > div.active {
-  background-color: #616161;
+  background-color: #000;
 }
 .generage_btn_box .content > div:hover {
-  background: #999999;
+  background: #000;
 }
 .hideChecked {
   user-select: none;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 9c217929..c5c3c8be 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -1986,9 +1986,21 @@ textarea:focus{
 			padding-right: 0;
 			background-color: #fff;
 			flex: 1;
+			height: 5rem;
 			// border
 			&.sketch{
 				padding: 0;
+				overflow: hidden;
+				flex: 1;
+				border: none;
+				background-color: rgba(0, 0, 0, 0);
+				.upload_item{
+					width: 6rem;
+					.upload_file_item{
+						height: 6rem;
+						width: 6rem;
+					}
+				}
 			}
 			> .textarea{
 					border-radius: 1rem;
@@ -2013,14 +2025,14 @@ textarea:focus{
 				border-right: calc(0.1rem* 1.2) solid #F1F1F1;
 			}
 			.upload_item{
-				width: 5.7rem;
+				width: 4.7rem;
 				.upload_file_item{
 					position: absolute;
 					left: 0;
 					top: 50%;
 					transform: translateY(-50%);
-					height: 5.7rem;
-					width: 5.7rem;
+					height: 4.7rem;
+					width: 4.7rem;
 					border-radius: 1rem;
 					overflow: hidden;
 				}
@@ -2064,7 +2076,6 @@ textarea:focus{
 			z-index: 4;
 			width: 4rem;
 			align-items: center;
-			background-color: #fff;
 			justify-content: center;
 			&.fi-br-loading{
 				height: 100%;
@@ -2150,7 +2161,7 @@ textarea:focus{
 		// margin: 0 auto;
 		margin-left: 2rem;
 		display: flex;
-		font-size: 1.8rem;
+		font-size: 1.6rem;
 		padding: 1rem 2rem;
 		box-sizing: content-box;
 		justify-content: center;
@@ -2185,12 +2196,13 @@ textarea:focus{
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			color: #fff;
 			&.active{
-				background-color: #616161;
+				background-color: #000;
 			}
 		}
 		>div:hover{
-			background: #999999;
+			background: #000;
 		}
 	}
 }
diff --git a/src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js b/src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js
index 80f2525d..9bd933f0 100644
--- a/src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js
@@ -1,5 +1,5 @@
 import { Command } from "./Command";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 
 /**
  * 创建背景图层命令
@@ -195,10 +195,13 @@ export class BackgroundSizeCommand extends Command {
     this.newWidth = options.newWidth;
     this.newHeight = options.newHeight;
     this.historyManager = options.historyManager;
+    this.isRedGreenMode = options.isRedGreenMode;
+
+    this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
 
     // 记录原尺寸
-    this.oldWidth = this.canvas.width;
-    this.oldHeight = this.canvas.height;
+    this.oldWidth = this.bgLayer.fabricObject.width;
+    this.oldHeight = this.bgLayer.fabricObject.height;
 
     // 查找背景图层
     this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
diff --git a/src/component/Canvas/CanvasEditor/commands/BrushCommands.js b/src/component/Canvas/CanvasEditor/commands/BrushCommands.js
index cc1cdd27..3821e660 100644
--- a/src/component/Canvas/CanvasEditor/commands/BrushCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/BrushCommands.js
@@ -609,12 +609,15 @@ export class TextureUploadCommand extends BaseBrushCommand {
   constructor(options = {}) {
     super({
       ...options,
-      name: `上传纹理: ${options.name || options.file?.name || '未知'}`,
+      name: `上传纹理: ${options.name || options.file?.name || "未知"}`,
       description: `上传自定义纹理文件`,
     });
 
     this.file = options.file;
-    this.name = options.name || options.file?.name?.replace(/\.[^/.]+$/, "") || "自定义纹理";
+    this.name =
+      options.name ||
+      options.file?.name?.replace(/\.[^/.]+$/, "") ||
+      "自定义纹理";
     this.category = options.category || "自定义材质";
     this.texturePresetManager = options.texturePresetManager;
     this.brushManager = options.brushManager;
@@ -623,13 +626,13 @@ export class TextureUploadCommand extends BaseBrushCommand {
 
   async execute() {
     if (!this.file || !this.texturePresetManager) {
-      throw new Error('缺少必要的文件或纹理预设管理器');
+      throw new Error("缺少必要的文件或纹理预设管理器");
     }
 
     try {
       // 创建文件 data URL
       const dataUrl = await this._fileToDataUrl(this.file);
-      
+
       // 添加到纹理预设管理器
       this.uploadedTextureId = this.texturePresetManager.addCustomTexture({
         name: this.name,
@@ -654,10 +657,10 @@ export class TextureUploadCommand extends BaseBrushCommand {
       return {
         textureId: this.uploadedTextureId,
         dataUrl: dataUrl,
-        name: this.name
+        name: this.name,
       };
     } catch (error) {
-      console.error('纹理上传失败:', error);
+      console.error("纹理上传失败:", error);
       throw new Error(`纹理上传失败: ${error.message}`);
     }
   }
@@ -672,7 +675,7 @@ export class TextureUploadCommand extends BaseBrushCommand {
       this.texturePresetManager.removeCustomTexture(this.uploadedTextureId);
       return true;
     } catch (error) {
-      console.error('撤销纹理上传失败:', error);
+      console.error("撤销纹理上传失败:", error);
       return false;
     }
   }
@@ -680,7 +683,7 @@ export class TextureUploadCommand extends BaseBrushCommand {
   /**
    * 将文件转换为 data URL
    * @private
-   * @param {File} file 
+   * @param {File} file
    * @returns {Promise<string>}
    */
   _fileToDataUrl(file) {
diff --git a/src/component/Canvas/CanvasEditor/commands/EraserCommand.js b/src/component/Canvas/CanvasEditor/commands/EraserCommand.js
new file mode 100644
index 00000000..7c746adf
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/commands/EraserCommand.js
@@ -0,0 +1,100 @@
+import { isArray } from "lodash-es";
+import { optimizeCanvasRendering } from "../utils/helper";
+import { restoreObjectLayerAssociations } from "../utils/layerUtils";
+import { Command } from "./Command";
+
+/**
+ * 橡皮擦操作命令
+ * 支持橡皮擦操作的撤销和重做
+ */
+export class EraserCommand extends Command {
+  /**
+   * 构造函数
+   * @param {Object} options 命令选项
+   * @param {Object} options.canvas Fabric画布实例
+   * @param {Object} options.layerManager 图层管理器
+   * @param {Object} options.beforeSnapshot 擦除前的状态快照
+   * @param {Object} options.afterSnapshot 擦除后的状态快照
+   * @param {Array} options.affectedObjects 擦除影响的对象列表（可选）
+   */
+  constructor(options) {
+    super({
+      name: "橡皮擦操作",
+      description: `擦除`,
+      ...options,
+    });
+
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager;
+    this.beforeSnapshot = options.beforeSnapshot;
+    this.afterSnapshot = options.afterSnapshot;
+    this.affectedObjects = options.affectedObjects || [];
+    this.fristLoad = true; // 是否是第一次加载
+  }
+
+  /**
+   * 执行橡皮擦操作
+   */
+  async execute() {
+    if (!this.beforeSnapshot || !this.afterSnapshot) {
+      console.warn("缺少状态快照，无法执行橡皮擦命令");
+      return false;
+    }
+    if (!this.fristLoad)
+      await this._restoreCanvasState(this.afterSnapshot); // 应用重做的状态
+    else await this.layerManager?.updateLayersObjectsInteractivity?.(false);
+    this.fristLoad = false; // 标记为非第一次加载
+    return true;
+  }
+
+  /**
+   * 撤销橡皮擦操作
+   */
+  async undo() {
+    if (!this.beforeSnapshot) {
+      console.warn("缺少擦除前的状态快照，无法撤销");
+      return false;
+    }
+
+    // 恢复到擦除前的状态
+    await this._restoreCanvasState(this.beforeSnapshot);
+
+    return true;
+  }
+
+  /**
+   * 恢复画布状态
+   * @param {Object} snapshot 状态快照
+   * @private
+   */
+  async _restoreCanvasState(snapshot) {
+    // 对比  eraser   erasable  两个属性，如果当前对象的eraser属性和erasable属性不一致，则需要更新对象的eraser属性
+    if (!snapshot || !snapshot.objects) return;
+    // 优化渲染  -  统一批处理  支持异步回调  防止闪屏
+    await optimizeCanvasRendering(this.canvas, async () => {
+      return new Promise((resolve) => {
+        this.canvas.loadFromJSON(snapshot, async () => {
+          // 恢复图层关联
+          this._restoreObjectLayerAssociations();
+          // 确保所有对象的交互性正确设置
+          await this.layerManager?.updateLayersObjectsInteractivity?.(false);
+          resolve();
+        });
+      });
+    });
+  }
+
+  /**
+   * 恢复对象与图层的关联关系
+   * @private
+   */
+  _restoreObjectLayerAssociations() {
+    if (!this.layerManager) return;
+
+    const canvasObjects = this.canvas.getObjects();
+    restoreObjectLayerAssociations(
+      this.layerManager?.layers?.value,
+      canvasObjects
+    );
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/commands/GroupCommands.js b/src/component/Canvas/CanvasEditor/commands/GroupCommands.js
new file mode 100644
index 00000000..c6e6c4e1
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/commands/GroupCommands.js
@@ -0,0 +1,1087 @@
+import { generateId } from "../utils/helper";
+import {
+  createLayer,
+  findLayerRecursively,
+  LayerType,
+} from "../utils/layerHelper";
+import { Command } from "./Command";
+import {
+  findObjectById,
+  removeCanvasObjectByObject,
+  optimizeCanvasRendering,
+} from "../utils/helper";
+import { fabric } from "fabric-with-all";
+
+/**
+ * 合并组图层命令 - 将图层及其子图层合并为单个图层
+ */
+export class MergeGroupLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "合并组图层为单个图层",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.activeLayerId = options.activeLayerId;
+    this.layerManager = options.layerManager;
+
+    this.originalLayers = [...this.layers.value];
+    this.originalObjects = [...this.canvas.getObjects()];
+    this.flattenedLayer = null;
+    this.flattenedLayerId = null;
+
+    this.existingGroupId = null; // 用于查找现有组对象
+    // 组对象相关
+    this.newGroupId =
+      generateId("group") ||
+      `group_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+  }
+
+  async execute() {
+    // 查找源图层
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    const sourceLayer = layer;
+    if (!sourceLayer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return null;
+    }
+
+    // 收集要展平的图层（包括子图层）
+    const layersToFlatten = this._collectLayersToFlatten(sourceLayer);
+
+    if (layersToFlatten.length === 0) {
+      console.warn("没有找到可展平的图层");
+      return null;
+    }
+
+    // 收集所有图层的fabricObjects
+    const allLayerObjects = [];
+    layersToFlatten.forEach((layer) => {
+      if (layer.fabricObjects && layer.fabricObjects.length > 0) {
+        allLayerObjects.push(...layer.fabricObjects);
+      }
+    });
+
+    if (allLayerObjects.length === 0) {
+      console.warn("图层中没有fabricObjects");
+      return null;
+    }
+
+    // 在画布中查找这些对象对应的真实Canvas对象
+    const canvasObjects = [];
+    const originalObjectStates = new Map(); // 保存对象的原始状态
+
+    allLayerObjects.forEach((layerObj) => {
+      if (layerObj && layerObj.id) {
+        const { object } = findObjectById(this.canvas, layerObj.id);
+        if (object) {
+          // 深度克隆对象状态，避免引用问题
+          const originalState = {
+            left: object.left,
+            top: object.top,
+            scaleX: object.scaleX,
+            scaleY: object.scaleY,
+            angle: object.angle,
+            flipX: object.flipX,
+            flipY: object.flipY,
+            opacity: object.opacity,
+            originX: object.originX,
+            originY: object.originY,
+            layerId: object.layerId,
+            layerName: object.layerName,
+            // 保存其他重要属性
+            width: object.width,
+            height: object.height,
+            strokeWidth: object.strokeWidth,
+            visible: object.visible,
+          };
+          originalObjectStates.set(object.id, originalState);
+
+          canvasObjects.unshift(object);
+          // 从画布中移除原对象，准备重新组织
+          removeCanvasObjectByObject(this.canvas, object);
+        }
+      }
+    });
+
+    // 保存原始对象状态到实例变量，供undo使用
+    this.originalObjectStates = originalObjectStates;
+
+    if (canvasObjects.length === 0) {
+      console.warn("没有找到对应的Canvas对象");
+      return null;
+    }
+
+    // 根据对象数量决定处理方式
+    let finalObjects = [];
+    if (canvasObjects.length > 1) {
+      // 创建对象的克隆副本用于组合，避免修改原始对象
+      const clonedObjects = canvasObjects.map((obj) => {
+        return fabric.util.object.clone(obj);
+      });
+
+      // 使用克隆的对象创建组
+      const group = new fabric.Group(clonedObjects, {
+        id: this.newGroupId,
+        name: `${sourceLayer.name} (group)`,
+        layerId: sourceLayer.id,
+        layerName: sourceLayer.name,
+        type: "group",
+      });
+
+      // 将组对象添加到画布
+      this.canvas.add(group);
+      this.canvas.setActiveObject(group);
+      this.existingGroupId = group.id;
+      finalObjects = [group];
+
+      console.log(`已创建组对象，包含 ${canvasObjects.length} 个子对象`);
+    } else {
+      // 单个对象，创建副本避免修改原始对象
+      const clonedObject = fabric.util.object.clone(canvasObjects[0]);
+
+      // 重新添加到画布
+      this.canvas.add(clonedObject);
+      this.canvas.setActiveObject(clonedObject);
+      finalObjects = [clonedObject];
+
+      console.log("单个对象，已更新关联关系");
+    }
+
+    // 生成新图层ID
+    this.flattenedLayerId = `flattened_${Date.now()}_${Math.floor(
+      Math.random() * 1000
+    )}`;
+
+    // 创建展平后的图层
+    this.flattenedLayer = createLayer({
+      id: this.flattenedLayerId,
+      name: `${sourceLayer.name} (merged)`,
+      type: LayerType.BITMAP,
+      visible: sourceLayer.visible,
+      locked: false,
+      opacity: sourceLayer.opacity,
+      fabricObjects: finalObjects,
+    });
+
+    // 更新对象关联
+    finalObjects.forEach((obj) => {
+      obj.layerId = this.flattenedLayerId;
+      obj.layerName = this.flattenedLayer.name;
+    });
+
+    // 获取源图层在数组中的索引
+    const sourceIndex = this.layers.value.findIndex(
+      (l) => l.id === this.layerId
+    );
+
+    // 移除所有相关图层
+    const layerIdsToRemove = layersToFlatten.map((layer) => layer.id);
+    this.layers.value = this.layers.value.filter(
+      (layer) => !layerIdsToRemove.includes(layer.id)
+    );
+
+    // 在原位置插入展平后的图层
+    this.layers.value.splice(sourceIndex, 0, this.flattenedLayer);
+
+    // 设置为活动图层
+    this.activeLayerId.value = this.flattenedLayerId;
+
+    // 重新渲染画布
+    await optimizeCanvasRendering(this.canvas, () => {
+      this.canvas.renderAll();
+    });
+
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
+
+    console.log(`已合并图层：${this.flattenedLayer.name}`);
+    return this.flattenedLayerId;
+  }
+
+  async undo() {
+    if (
+      !this.flattenedLayer ||
+      !this.originalLayers ||
+      !this.originalObjectStates
+    ) {
+      console.warn("没有可撤销的数据");
+      return;
+    }
+
+    try {
+      await optimizeCanvasRendering(this.canvas, async () => {
+        this.canvas.discardActiveObject();
+        this.canvas.clear();
+
+        // 恢复原始对象及其状态
+        this.originalObjects.forEach((obj) => {
+          // 如果保存了该对象的原始状态，则恢复状态
+          if (this.originalObjectStates.has(obj.id)) {
+            const originalState = this.originalObjectStates.get(obj.id);
+            obj.set(originalState);
+          }
+
+          this.canvas.add(obj);
+          obj.setCoords();
+        });
+
+        // 恢复原始图层结构
+        this.layers.value = [...this.originalLayers];
+
+        // 恢复原活动图层
+        this.activeLayerId.value = this.layerId;
+
+        // 更新画布交互性
+        await this.layerManager?.updateLayersObjectsInteractivity(false);
+
+        console.log("✅ 成功撤销组图层合并操作");
+      });
+    } catch (error) {
+      console.error("撤销组图层合并时发生错误:", error);
+    }
+  }
+
+  /**
+   * 查找当前合并后的对象
+   * @returns {Object} 包含对象信息的结果
+   * @private
+   */
+  _findMergedObjects() {
+    const objects = [];
+
+    // 查找合并后的图层中的对象
+    if (this.flattenedLayer?.fabricObjects) {
+      this.flattenedLayer.fabricObjects.forEach((layerObj) => {
+        if (layerObj?.id) {
+          const { object } = findObjectById(this.canvas, layerObj.id);
+          if (object) {
+            objects.push({
+              canvasObject: object,
+              layerObject: layerObj,
+              isGroup: object.type === "group",
+            });
+          }
+        }
+      });
+    }
+
+    return { objects };
+  }
+
+  /**
+   * 拆解合并的对象（组对象或单个对象）
+   * @param {Object} mergedObjectResult 合并对象结果
+   * @private
+   */
+  async _unmergeMergedObjects(mergedObjectResult) {
+    const restoredObjects = [];
+
+    for (const objInfo of mergedObjectResult.objects) {
+      const { canvasObject, isGroup } = objInfo;
+
+      if (isGroup) {
+        // 拆解组对象
+        const ungroupedObjects = await this._ungroupObject(canvasObject);
+        restoredObjects.push(...ungroupedObjects);
+      } else {
+        // 单个对象直接保留，但需要清除合并相关的属性
+        this._clearMergedObjectProperties(canvasObject);
+        restoredObjects.push(canvasObject);
+      }
+
+      // 从画布中移除原对象
+      removeCanvasObjectByObject(this.canvas, canvasObject);
+    }
+
+    // 将拆解后的对象重新添加到画布
+    restoredObjects.forEach((obj) => {
+      if (obj && !this.canvas.getObjects().includes(obj)) {
+        this.canvas.add(obj);
+      }
+    });
+
+    return restoredObjects;
+  }
+
+  /**
+   * 拆解组对象为单个对象
+   * @param {fabric.Group} groupObject 组对象
+   * @returns {Array} 拆解后的对象数组
+   * @private
+   */
+  async _ungroupObject(groupObject) {
+    if (!groupObject || groupObject.type !== "group") {
+      return [];
+    }
+
+    const ungroupedObjects = [];
+    const groupObjects = groupObject.getObjects() || [];
+
+    // 逐个拆解组内对象
+    groupObjects.forEach((obj) => {
+      try {
+        // 计算对象的绝对位置
+        const absolutePosition = this._calculateObjectAbsolutePosition(
+          obj,
+          groupObject
+        );
+
+        // 使用removeWithUpdate移除对象，这会自动恢复对象的独立状态
+        groupObject.removeWithUpdate(obj);
+
+        // 应用计算出的绝对位置
+        obj.set({
+          left: absolutePosition.left,
+          top: absolutePosition.top,
+          scaleX: absolutePosition.scaleX,
+          scaleY: absolutePosition.scaleY,
+          angle: absolutePosition.angle,
+          originX: absolutePosition.originX || "center",
+          originY: absolutePosition.originY || "center",
+          flipX: absolutePosition.flipX || false,
+          flipY: absolutePosition.flipY || false,
+          opacity: absolutePosition.opacity || 1,
+          selectable: true,
+          evented: true,
+        });
+
+        // 更新对象坐标
+        obj.setCoords();
+
+        ungroupedObjects.push(obj);
+
+        console.log(
+          `📤 拆解组内对象: ${obj.id || obj.type} 到位置 (${
+            absolutePosition.left
+          }, ${absolutePosition.top})`
+        );
+      } catch (error) {
+        console.error(`拆解组内对象时发生错误:`, error);
+      }
+    });
+
+    return ungroupedObjects;
+  }
+
+  /**
+   * 计算对象在画布中的绝对位置
+   * @param {fabric.Object} obj 组内对象
+   * @param {fabric.Group} group 组对象
+   * @returns {Object} 绝对位置信息
+   * @private
+   */
+  _calculateObjectAbsolutePosition(obj, group) {
+    try {
+      // 获取组的变换矩阵
+      const groupTransform = group.calcTransformMatrix();
+
+      // 获取对象在组内的相对位置
+      const objectPoint = new fabric.Point(obj.left || 0, obj.top || 0);
+
+      // 应用组的变换矩阵计算绝对位置
+      const absolutePoint = fabric.util.transformPoint(
+        objectPoint,
+        groupTransform
+      );
+
+      // 计算缩放比例
+      const totalScaleX = (group.scaleX || 1) * (obj.scaleX || 1);
+      const totalScaleY = (group.scaleY || 1) * (obj.scaleY || 1);
+
+      // 计算总旋转角度
+      const totalAngle = (group.angle || 0) + (obj.angle || 0);
+
+      return {
+        left: absolutePoint.x,
+        top: absolutePoint.y,
+        scaleX: totalScaleX,
+        scaleY: totalScaleY,
+        angle: totalAngle,
+        flipX: obj.flipX || false,
+        flipY: obj.flipY || false,
+        originX: obj.originX || "center",
+        originY: obj.originY || "center",
+        opacity: obj.opacity || 1,
+      };
+    } catch (error) {
+      console.warn("使用变换矩阵计算位置失败，使用简化计算:", error);
+
+      // 备选方案：基于组的中心点和对象的相对偏移计算
+      const groupCenterX = group.left || 0;
+      const groupCenterY = group.top || 0;
+
+      const scaleX = group.scaleX || 1;
+      const scaleY = group.scaleY || 1;
+      const angle = group.angle || 0;
+
+      const offsetX = (obj.left || 0) * scaleX;
+      const offsetY = (obj.top || 0) * scaleY;
+
+      let finalX = groupCenterX + offsetX;
+      let finalY = groupCenterY + offsetY;
+
+      if (angle !== 0) {
+        const cos = Math.cos(fabric.util.degreesToRadians(angle));
+        const sin = Math.sin(fabric.util.degreesToRadians(angle));
+
+        finalX = groupCenterX + offsetX * cos - offsetY * sin;
+        finalY = groupCenterY + offsetX * sin + offsetY * cos;
+      }
+
+      return {
+        left: finalX,
+        top: finalY,
+        scaleX: scaleX * (obj.scaleX || 1),
+        scaleY: scaleY * (obj.scaleY || 1),
+        angle: angle + (obj.angle || 0),
+        flipX: obj.flipX || false,
+        flipY: obj.flipY || false,
+        originX: obj.originX || "center",
+        originY: obj.originY || "center",
+        opacity: obj.opacity || 1,
+      };
+    }
+  }
+
+  /**
+   * 清除对象的合并相关属性
+   * @param {fabric.Object} obj 对象
+   * @private
+   */
+  _clearMergedObjectProperties(obj) {
+    if (!obj) return;
+
+    // 重置对象的选择和事件属性
+    obj.set({
+      selectable: true,
+      evented: true,
+      opacity: 1,
+    });
+  }
+
+  /**
+   * 恢复对象与图层的关联关系
+   * @private
+   */
+  async _restoreObjectLayerAssociations() {
+    // 获取当前画布上的所有对象
+    const canvasObjects = this.canvas.getObjects();
+
+    // 遍历原始图层结构，重新建立关联
+    const processLayer = (layer) => {
+      if (!layer || !layer.fabricObjects) return;
+
+      // 为每个图层对象查找对应的canvas对象并更新关联
+      layer.fabricObjects.forEach((layerObj) => {
+        if (layerObj?.id) {
+          const canvasObj = canvasObjects.find((obj) => obj.id === layerObj.id);
+          if (canvasObj) {
+            // 恢复对象的图层关联信息
+            canvasObj.layerId = layer.id;
+            canvasObj.layerName = layer.name;
+
+            console.log(
+              `🔗 恢复对象 ${canvasObj.id} 与图层 ${layer.name} 的关联`
+            );
+          }
+        }
+      });
+
+      // 递归处理子图层
+      if (layer.children && Array.isArray(layer.children)) {
+        layer.children.forEach((childLayer) => {
+          processLayer(childLayer);
+        });
+      }
+    };
+
+    // 处理所有原始图层
+    this.originalLayers.forEach((layer) => {
+      processLayer(layer);
+    });
+  }
+
+  _collectLayersToFlatten(sourceLayer) {
+    const result = [sourceLayer];
+
+    // 如果是组图层，收集所有子图层
+    if (sourceLayer.children && sourceLayer.children.length > 0) {
+      result.push(...sourceLayer.children);
+
+      // 递归收集子图层 - 暂时不支持多层
+      // sourceLayer.children.forEach((childLayer) => {
+      //   if (childLayer) {
+      //     result.push(...this._collectLayersToFlatten(childLayer));
+      //   }
+      // });
+    }
+
+    return result;
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      sourceLayerId: this.layerId,
+      flattenedLayerId: this.flattenedLayerId,
+      flattenedLayerName: this.flattenedLayer?.name,
+    };
+  }
+}
+
+/**
+ * 栅格化图层命令
+ * 将图层中的所有矢量对象转换为位图图像
+ * 支持普通图层和组图层的栅格化
+ */
+export class RasterizeLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "栅格化图层",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.activeLayerId = options.activeLayerId;
+    this.layerManager = options.layerManager;
+
+    // 查找目标图层
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    this.layer = layer;
+    this.parentLayer = parent;
+    this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
+
+    // 保存原始状态用于撤销
+    this.originalLayers = [...this.layers.value];
+    this.originalCanvasObjects = [...this.canvas.getObjects()];
+    this.originalObjectStates = new Map();
+
+    // 栅格化结果
+    this.rasterizedImage = null;
+    this.rasterizedImageId = null;
+    this.rasterizedLayerId = null;
+    this.rasterizedLayer = null;
+
+    // 要栅格化的图层和对象
+    this.layersToRasterize = [];
+    this.objectsToRasterize = [];
+  }
+
+  async execute() {
+    if (!this.layer) {
+      throw new Error(`图层 ${this.layerId} 不存在`);
+    }
+
+    // 检查是否可以栅格化
+    if (this.layer.isBackground || this.layer.isFixed) {
+      throw new Error("背景图层和固定图层不能栅格化");
+    }
+
+    try {
+      // 收集要栅格化的图层和对象
+      this._collectLayersAndObjects();
+
+      if (this.objectsToRasterize.length === 0) {
+        throw new Error("图层没有内容可栅格化");
+      }
+
+      // 保存原始对象状态
+      this._saveOriginalObjectStates();
+
+      // 创建栅格化图像
+      const rasterizedImage = await this._createRasterizedImage();
+
+      // 创建新的栅格化图层并替换原图层
+      await this._createRasterizedLayer(rasterizedImage);
+
+      console.log(`✅ 图层 ${this.layer.name} 栅格化完成`);
+      return this.rasterizedLayerId;
+    } catch (error) {
+      console.error("栅格化图层失败:", error);
+      throw error;
+    }
+  }
+
+  async undo() {
+    if (!this.originalLayers || !this.originalCanvasObjects) {
+      throw new Error("没有可恢复的原始数据");
+    }
+
+    try {
+      await optimizeCanvasRendering(this.canvas, async () => {
+        // 清空画布
+        this.canvas.discardActiveObject();
+        this.canvas.clear();
+
+        // 恢复原始对象及其状态
+        this.originalCanvasObjects.forEach((obj) => {
+          // 如果保存了该对象的原始状态，则恢复状态
+          if (this.originalObjectStates.has(obj.id)) {
+            const originalState = this.originalObjectStates.get(obj.id);
+            obj.set(originalState);
+          }
+
+          this.canvas.add(obj);
+          obj.setCoords();
+        });
+
+        // 恢复原始图层结构
+        this.layers.value = [...this.originalLayers];
+
+        // 恢复原活动图层
+        this.activeLayerId.value = this.layerId;
+
+        // 更新画布交互性
+        await this.layerManager?.updateLayersObjectsInteractivity(false);
+      });
+
+      console.log(`↩️ 图层 ${this.layer.name} 栅格化已撤销`);
+      return true;
+    } catch (error) {
+      console.error("撤销栅格化失败:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 收集要栅格化的图层和对象
+   * @private
+   */
+  _collectLayersAndObjects() {
+    if (this.isGroupLayer) {
+      // 组图层：收集自身和所有子图层
+      this.layersToRasterize = this._collectLayersToRasterize(this.layer);
+    } else {
+      // 普通图层：只收集自身
+      this.layersToRasterize = [this.layer];
+    }
+
+    // 收集所有图层的fabricObjects并按画布z-index顺序排序
+    const allCanvasObjects = this.canvas.getObjects();
+    const objectsWithZIndex = [];
+
+    this.layersToRasterize.forEach((layer) => {
+      if (layer.fabricObjects && layer.fabricObjects.length > 0) {
+        layer.fabricObjects.forEach((layerObj) => {
+          if (layerObj && layerObj.id) {
+            const { object } = findObjectById(this.canvas, layerObj.id);
+            if (object) {
+              // 获取对象在画布中的z-index（数组索引）
+              const zIndex = allCanvasObjects.indexOf(object);
+              objectsWithZIndex.push({
+                object: object,
+                zIndex: zIndex,
+                layerObj: layerObj,
+              });
+            }
+          }
+        });
+      }
+    });
+
+    // 按z-index排序，确保保持原有的渲染顺序
+    objectsWithZIndex.sort((a, b) => a.zIndex - b.zIndex);
+
+    // 提取排序后的对象
+    this.objectsToRasterize = objectsWithZIndex.map((item) => item.object);
+
+    console.log(
+      `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行栅格化`
+    );
+    console.log(
+      "🔢 对象z-index顺序:",
+      objectsWithZIndex.map((item) => ({
+        id: item.object.id,
+        type: item.object.type,
+        zIndex: item.zIndex,
+      }))
+    );
+  }
+
+  /**
+   * 收集要栅格化的图层（递归收集子图层）
+   * @param {Object} sourceLayer 源图层
+   * @returns {Array} 图层数组
+   * @private
+   */
+  _collectLayersToRasterize(sourceLayer) {
+    const result = [sourceLayer];
+
+    // 如果是组图层，收集所有子图层
+    if (sourceLayer.children && sourceLayer.children.length > 0) {
+      sourceLayer.children.forEach((childLayer) => {
+        if (childLayer) {
+          result.push(...this._collectLayersToRasterize(childLayer));
+        }
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * 保存原始对象状态
+   * @private
+   */
+  _saveOriginalObjectStates() {
+    this.objectsToRasterize.forEach((object) => {
+      if (object && object.id) {
+        const originalState = {
+          left: object.left,
+          top: object.top,
+          scaleX: object.scaleX,
+          scaleY: object.scaleY,
+          angle: object.angle,
+          flipX: object.flipX,
+          flipY: object.flipY,
+          opacity: object.opacity,
+          originX: object.originX,
+          originY: object.originY,
+          layerId: object.layerId,
+          layerName: object.layerName,
+          width: object.width,
+          height: object.height,
+          strokeWidth: object.strokeWidth,
+          visible: object.visible,
+        };
+        this.originalObjectStates.set(object.id, originalState);
+      }
+    });
+  }
+
+  /**
+   * 创建栅格化图像
+   * @returns {Promise<fabric.Image>} 栅格化后的图像对象
+   * @private
+   */
+  async _createRasterizedImage() {
+    return new Promise((resolve, reject) => {
+      try {
+        // 计算所有对象的总边界
+        const bounds = this._calculateObjectsBounds(this.objectsToRasterize);
+        if (!bounds) {
+          reject(new Error("无法计算对象边界"));
+          return;
+        }
+
+        console.log("🎯 栅格化边界信息:", bounds);
+
+        // 创建临时画布进行栅格化
+        const tempCanvas = this._createTempCanvas(bounds);
+        const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
+          width: bounds.width,
+          height: bounds.height,
+          backgroundColor: "transparent",
+          renderOnAddRemove: false,
+        });
+
+        // 直接复制对象到临时画布，不使用临时组
+        this._addObjectsToTempCanvas(
+          tempFabricCanvas,
+          this.objectsToRasterize,
+          bounds
+        );
+
+        // 强制渲染临时画布
+        tempFabricCanvas.renderOnAddRemove = true;
+        tempFabricCanvas.renderAll();
+
+        // 等待渲染完成后生成图像
+        setTimeout(() => {
+          try {
+            // 生成高质量图像
+            const dataUrl = tempFabricCanvas.toDataURL({
+              format: "png",
+              quality: 1.0,
+              multiplier: 1, // 降低multiplier避免性能问题
+            });
+
+            console.log("📷 栅格化图像生成完成，DataURL长度:", dataUrl.length);
+
+            // 创建fabric图像对象
+            fabric.Image.fromURL(
+              dataUrl,
+              (img) => {
+                // 设置图像属性，使用原始边界的中心点
+                this.rasterizedImageId = generateId("rasterized_");
+                img.set({
+                  id: this.rasterizedImageId,
+                  left: bounds.centerX,
+                  top: bounds.centerY,
+                  originX: "center",
+                  originY: "center",
+                  selectable: true,
+                  evented: true,
+                });
+
+                this.rasterizedImage = img;
+
+                // 清理临时画布
+                this._cleanupTempCanvas(tempFabricCanvas);
+
+                console.log("✅ 栅格化图像对象创建完成");
+                resolve(img);
+              },
+              { crossOrigin: "anonymous" }
+            );
+          } catch (error) {
+            console.error("生成图像时发生错误:", error);
+            this._cleanupTempCanvas(tempFabricCanvas);
+            reject(error);
+          }
+        }, 100); // 给一点时间确保渲染完成
+      } catch (error) {
+        console.error("创建栅格化图像时发生错误:", error);
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * 计算对象边界
+   * @param {Array} objects 对象数组
+   * @returns {Object|null} 边界信息
+   * @private
+   */
+  _calculateObjectsBounds(objects) {
+    if (!objects || objects.length === 0) {
+      return null;
+    }
+
+    let minLeft = Infinity;
+    let minTop = Infinity;
+    let maxRight = -Infinity;
+    let maxBottom = -Infinity;
+
+    objects.forEach((obj) => {
+      try {
+        // 使用更准确的边界计算，不包含绝对变换
+        const bounds = obj.getBoundingRect(false, false);
+
+        console.log(`📐 对象 ${obj.id || obj.type} 边界:`, bounds);
+
+        minLeft = Math.min(minLeft, bounds.left);
+        minTop = Math.min(minTop, bounds.top);
+        maxRight = Math.max(maxRight, bounds.left + bounds.width);
+        maxBottom = Math.max(maxBottom, bounds.top + bounds.height);
+      } catch (error) {
+        console.warn(`计算对象 ${obj.id || obj.type} 边界时发生错误:`, error);
+        // 备选方案：使用对象的基础位置信息
+        const left = obj.left || 0;
+        const top = obj.top || 0;
+        const width = (obj.width || 100) * (obj.scaleX || 1);
+        const height = (obj.height || 100) * (obj.scaleY || 1);
+
+        minLeft = Math.min(minLeft, left - width / 2);
+        minTop = Math.min(minTop, top - height / 2);
+        maxRight = Math.max(maxRight, left + width / 2);
+        maxBottom = Math.max(maxBottom, top + height / 2);
+      }
+    });
+
+    const padding = 10; // 增加边距确保不被裁剪
+
+    const bounds = {
+      left: minLeft - padding,
+      top: minTop - padding,
+      width: maxRight - minLeft + padding * 2,
+      height: maxBottom - minTop + padding * 2,
+      centerX: (minLeft + maxRight) / 2,
+      centerY: (minTop + maxBottom) / 2,
+    };
+
+    // 确保最小尺寸
+    bounds.width = Math.max(bounds.width, 50);
+    bounds.height = Math.max(bounds.height, 50);
+
+    return bounds;
+  }
+
+  /**
+   * 创建临时画布
+   * @param {Object} bounds 边界信息
+   * @returns {HTMLCanvasElement} 临时画布
+   * @private
+   */
+  _createTempCanvas(bounds) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = Math.ceil(bounds.width);
+    tempCanvas.height = Math.ceil(bounds.height);
+
+    const ctx = tempCanvas.getContext("2d");
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+
+    // 设置透明背景
+    ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
+
+    console.log(
+      `🖼️ 创建临时画布尺寸: ${tempCanvas.width} x ${tempCanvas.height}`
+    );
+
+    return tempCanvas;
+  }
+
+  /**
+   * 添加对象到临时画布
+   * @param {fabric.StaticCanvas} tempCanvas 临时画布
+   * @param {Array} objects 对象数组
+   * @param {Object} bounds 边界信息
+   * @private
+   */
+  _addObjectsToTempCanvas(tempCanvas, objects, bounds) {
+    console.log(`📥 开始添加 ${objects.length} 个对象到临时画布`);
+
+    objects.forEach((obj, index) => {
+      try {
+        // 深度克隆对象，避免影响原对象
+        const clonedObj = fabric.util.object.clone(obj);
+
+        // 计算对象在临时画布中的新位置
+        // 将对象从原始画布坐标系转换到临时画布坐标系
+        const newLeft = obj.left - bounds.left;
+        const newTop = obj.top - bounds.top;
+
+        // 设置对象在临时画布中的位置，保持原有的originX和originY
+        clonedObj.set({
+          left: newLeft,
+          top: newTop,
+          // 保持原有的变换属性
+          scaleX: obj.scaleX,
+          scaleY: obj.scaleY,
+          angle: obj.angle,
+          flipX: obj.flipX,
+          flipY: obj.flipY,
+          opacity: obj.opacity,
+          originX: obj.originX,
+          originY: obj.originY,
+          // 确保可见
+          visible: true,
+        });
+
+        console.log(
+          `📍 对象 ${index + 1} 位置转换: (${obj.left}, ${
+            obj.top
+          }) -> (${newLeft}, ${newTop})`
+        );
+
+        tempCanvas.add(clonedObj);
+      } catch (error) {
+        console.error(`添加对象 ${obj.id || obj.type} 到临时画布失败:`, error);
+      }
+    });
+
+    console.log(
+      `✅ 临时画布对象添加完成，共 ${tempCanvas.getObjects().length} 个对象`
+    );
+  }
+
+  /**
+   * 清理临时画布
+   * @param {fabric.StaticCanvas} tempCanvas 临时画布
+   * @private
+   */
+  _cleanupTempCanvas(tempCanvas) {
+    try {
+      if (tempCanvas) {
+        tempCanvas.clear();
+        tempCanvas.dispose();
+      }
+    } catch (error) {
+      console.warn("清理临时画布时发生错误:", error);
+    }
+  }
+
+  /**
+   * 创建栅格化图层并替换原图层
+   * @param {fabric.Image} rasterizedImage 栅格化后的图像
+   * @private
+   */
+  async _createRasterizedLayer(rasterizedImage) {
+    // 从画布中移除原有对象
+    this.objectsToRasterize.forEach((obj) => {
+      removeCanvasObjectByObject(this.canvas, obj);
+    });
+
+    // 添加栅格化图像到画布
+    this.canvas.add(rasterizedImage);
+    this.canvas.setActiveObject(rasterizedImage);
+
+    // 生成新图层ID
+    this.rasterizedLayerId = generateId("rasterized_layer_");
+
+    // 创建新的栅格化图层
+    this.rasterizedLayer = createLayer({
+      id: this.rasterizedLayerId,
+      name: `${this.layer.name} (栅格化)`,
+      type: LayerType.BITMAP,
+      visible: this.layer.visible,
+      locked: this.layer.locked,
+      opacity: this.layer.opacity,
+      fabricObjects: [rasterizedImage],
+    });
+
+    // 更新图像对象的图层关联
+    rasterizedImage.set({
+      layerId: this.rasterizedLayerId,
+      layerName: this.rasterizedLayer.name,
+    });
+
+    // 替换图层结构
+    if (this.isGroupLayer) {
+      // 组图层：移除所有相关图层
+      const layerIdsToRemove = this.layersToRasterize.map((layer) => layer.id);
+      this.layers.value = this.layers.value.filter(
+        (layer) => !layerIdsToRemove.includes(layer.id)
+      );
+    } else {
+      // 普通图层：移除原图层
+      const layerIndex = this.layers.value.findIndex(
+        (l) => l.id === this.layerId
+      );
+      if (layerIndex !== -1) {
+        this.layers.value.splice(layerIndex, 1);
+      }
+    }
+
+    // 在适当位置添加新的栅格化图层
+    const insertIndex = this.layers.value.findIndex(
+      (l) => l.id === (this.parentLayer?.id || this.layerId)
+    );
+    if (insertIndex !== -1) {
+      this.layers.value.splice(insertIndex, 0, this.rasterizedLayer);
+    } else {
+      this.layers.value.push(this.rasterizedLayer);
+    }
+
+    // 设置为活动图层
+    this.activeLayerId.value = this.rasterizedLayerId;
+
+    // 重新渲染画布
+    await optimizeCanvasRendering(this.canvas, () => {
+      this.canvas.renderAll();
+    });
+
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
+
+    console.log(`🎨 栅格化图层 ${this.rasterizedLayer.name} 创建完成`);
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      originalLayerId: this.layerId,
+      originalLayerName: this.layer?.name,
+      rasterizedLayerId: this.rasterizedLayerId,
+      rasterizedLayerName: this.rasterizedLayer?.name,
+      isGroupLayer: this.isGroupLayer,
+      objectCount: this.objectsToRasterize?.length || 0,
+    };
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
index f6efffa5..3459c6e9 100644
--- a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
@@ -3,7 +3,7 @@ import { AddLayerCommand, CreateImageLayerCommand } from "./LayerCommands.js";
 import { ToolCommand } from "./ToolCommands.js";
 import { ClearSelectionCommand } from "./SelectionCommands.js";
 import { createLayer, LayerType, OperationType } from "../utils/layerHelper.js";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 
 /**
  * 套索抠图命令
diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
index 3a57ecd2..1d699387 100644
--- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
@@ -1,8 +1,21 @@
 import { Command } from "./Command";
-import { createLayer, LayerType, OperationType } from "../utils/layerHelper";
+import {
+  createLayer,
+  findLayerRecursively,
+  LayerType,
+  OperationType,
+} from "../utils/layerHelper";
 import { createStaticCanvas } from "../utils/canvasFactory";
 import { AddObjectToLayerCommand } from "./ObjectLayerCommands";
 import { ToolCommand } from "./ToolCommands";
+import {
+  findObjectById,
+  generateId,
+  objectIsInCanvas,
+  optimizeCanvasRendering,
+  removeCanvasObjectByObject,
+} from "../utils/helper";
+import { fabric } from "fabric-with-all";
 
 /**
  * 添加图层命令
@@ -147,8 +160,6 @@ export class PasteLayerCommand extends Command {
    * @private
    */
   async _restoreObjectsAsync(data) {
-    const fabric = window.fabric;
-
     return new Promise((resolve, reject) => {
       fabric.util.enlivenObjects(data.serializedObjects, (objects) => {
         try {
@@ -393,68 +404,82 @@ export class MoveLayerCommand extends Command {
     this.layers = options.layers;
     this.layerId = options.layerId;
     this.direction = options.direction; // "up" or "down"
+    this.layerSort = options.layerSort;
 
-    // 查找图层索引
-    this.layerIndex = this.layers.value.findIndex(
-      (layer) => layer.id === this.layerId
+    this.parentLayer = null; // 父图层
+
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
     );
-    // this.beforeLayers = [...this.layers.value]; // 备份原图层列表
+
+    // 如果parent 有值   或者 layer 上有parentId  则视为子图层的置顶
+    if (parent?.id) {
+      // 查找子图层索引
+      this.layerIndex = parent?.children?.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+      this.parentLayer = parent;
+    } else {
+      // 查找图层索引
+      this.layerIndex = this.layers.value.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+    }
+
+    this.layer = layer;
+    this.originalIndex = this.layerIndex;
+    // 目标位置
+    this.targetIndex =
+      options.direction === "up" ? this.layerIndex - 1 : this.layerIndex + 1;
   }
 
-  execute() {
-    if (this.layerIndex === -1) {
+  async execute() {
+    if (this.layerIndex === -1 || !this.layer) {
       console.error(`图层 ${this.layerId} 不存在`);
       return false;
     }
 
-    const layer = this.layers.value[this.layerIndex];
-    let newIndex = this.layerIndex;
-
-    // 计算新索引
-    if (this.direction === "up") {
-      // 向上移动（在数组中向前移动）
-      if (this.layerIndex > 0) {
-        // 确保不会移动到背景层之前
-        const prevLayer = this.layers.value[this.layerIndex - 1];
-        if (!prevLayer.isBackground) {
-          newIndex = this.layerIndex - 1;
-        }
-      }
-    } else if (this.direction === "down") {
-      // 向下移动（在数组中向后移动）
-      if (this.layerIndex < this.layers.value.length - 1) {
-        // 确保不会移动背景层
-        if (!layer.isBackground) {
-          newIndex = this.layerIndex + 1;
-        }
-      }
+    // 检查是否是背景层或固定层（不允许移动）
+    if (this.layer.isBackground || this.layer.isFixed) {
+      console.warn("背景层和固定层不能移动");
+      return false;
     }
 
-    // 如果位置有变化，执行移动
-    if (newIndex !== this.layerIndex) {
-      // 移除原位置
-      this.layers.value.splice(this.layerIndex, 1);
-      // 插入到新位置
-      this.layers.value.splice(newIndex, 0, layer);
-      this.newIndex = newIndex;
-
+    // 如果已经在顶部，无需移动
+    if (this.layerIndex === this.targetIndex) {
+      console.log("图层已在顶部位置");
       return true;
     }
 
-    return false;
+    // 执行移动
+    if (this.parentLayer) {
+      const tempLayer = this.parentLayer.children[this.targetIndex];
+      this.parentLayer.children[this.layerIndex] = tempLayer;
+      this.parentLayer.children[this.targetIndex] = this.layer;
+    } else {
+      const tempLayer = this.layers.value[this.targetIndex];
+      this.layers.value[this.layerIndex] = tempLayer;
+      this.layers.value[this.targetIndex] = this.layer;
+    }
+
+    // 使用LayerSort工具重新排列画布对象（如果可用）
+    await this.layerSort?.rearrangeObjects();
+
+    console.log(`图层${this.layer.name}已经移动`);
   }
 
-  undo() {
-    if (this.layerIndex !== this.newIndex && this.newIndex !== undefined) {
-      // 获取图层
-      const layer = this.layers.value[this.newIndex];
+  async undo() {
+    const tempOldIndex = this.layerIndex;
+    this.layerIndex = this.targetIndex;
+    this.targetIndex = tempOldIndex;
+    await this.execute();
 
-      // 移除新位置
-      this.layers.value.splice(this.newIndex, 1);
+    // 执行完成恢复索引
+    this.targetIndex = this.layerIndex;
+    this.layerIndex = tempOldIndex;
 
-      // 插入到原位置
-      this.layers.value.splice(this.layerIndex, 0, layer);
-    }
+    console.log(`↩️ 图层 ${this.layer.name} 已恢复到原位置`);
   }
 
   getInfo() {
@@ -480,7 +505,8 @@ export class ToggleLayerVisibilityCommand extends Command {
     this.layerId = options.layerId;
 
     // 查找图层
-    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    this.layer = layer;
     this.oldVisibility = this.layer ? this.layer.visible : null;
   }
 
@@ -554,7 +580,9 @@ export class RenameLayerCommand extends Command {
     this.newName = options.newName;
 
     // 查找图层
-    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    this.layer = layer;
+
     this.oldName = this.layer ? this.layer.name : null;
   }
 
@@ -621,56 +649,76 @@ export class LayerLockCommand extends Command {
     this.canvas = options.canvas;
     this.layers = options.layers;
     this.layerId = options.layerId;
+    this.layerManager = options.layerManager;
 
+    // 查找图层（包括子图层）
     // 查找图层
-    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    this.layer = layer;
+    this.parentLayer = parent || null; // 父图层
     this.oldLocked = this.layer ? this.layer.locked : null;
   }
+  /**
+   * 更新图层及其子图层的锁定状态
+   * @param {Object} layer 要更新的图层
+   * @param {boolean} locked 锁定状态
+   * @private
+   */
+  _updateLayerLockState(layer, locked) {
+    if (!layer) return;
 
-  execute() {
+    // 更新当前图层的锁定状态
+    layer.locked = locked;
+
+    // 如果是组图层，递归更新所有子图层
+    if (
+      layer.type === "group" &&
+      layer.children &&
+      Array.isArray(layer.children)
+    ) {
+      layer.children.forEach((child) => {
+        this._updateLayerLockState(child, locked);
+      });
+    }
+  }
+
+  async execute() {
     if (!this.layer) {
       console.error(`图层 ${this.layerId} 不存在`);
       return false;
     }
 
     // 切换锁定状态
-    this.layer.locked = !this.oldLocked;
+    const newLocked = !this.oldLocked;
+
+    // 更新图层及其子图层的锁定状态
+    this._updateLayerLockState(this.layer, newLocked);
 
     // 更新画布上对象的可选择状态
-    if (this.canvas) {
-      const layerObjects = this.canvas
-        .getObjects()
-        .filter((obj) => obj.layerId === this.layerId);
-
-      layerObjects.forEach((obj) => {
-        obj.selectable = !this.layer.locked && this.layer.visible;
-        obj.evented = !this.layer.locked && this.layer.visible;
-      });
-
-      this.canvas.renderAll();
-    }
+    await this.layerManager?.updateLayersObjectsInteractivity();
 
+    console.log(
+      `${newLocked ? "锁定" : "解锁"}图层: ${this.layer.name} (ID: ${
+        this.layerId
+      })`
+    );
     return true;
   }
 
-  undo() {
+  async undo() {
     if (this.layer) {
       // 恢复锁定状态
-      this.layer.locked = this.oldLocked;
+      this._updateLayerLockState(this.layer, this.oldLocked);
 
       // 更新画布上对象的可选择状态
-      if (this.canvas) {
-        const layerObjects = this.canvas
-          .getObjects()
-          .filter((obj) => obj.layerId === this.layerId);
+      await this.layerManager?.updateLayersObjectsInteractivity();
 
-        layerObjects.forEach((obj) => {
-          obj.selectable = !this.oldLocked && this.layer.visible;
-          obj.evented = !this.oldLocked && this.layer.visible;
-        });
-
-        this.canvas.renderAll();
-      }
+      console.log(
+        `恢复图层锁定状态: ${this.layer.name} (锁定: ${this.oldLocked})`
+      );
     }
   }
 
@@ -679,7 +727,10 @@ export class LayerLockCommand extends Command {
       name: this.name,
       layerName: this.layer?.name || "未知图层",
       layerId: this.layerId,
+      isChildLayer: !!this.parentLayer,
+      parentLayerName: this.parentLayer?.name,
       newLocked: this.layer?.locked,
+      oldLocked: this.oldLocked,
     };
   }
 }
@@ -699,7 +750,8 @@ export class SetLayerOpacityCommand extends Command {
     this.opacity = options.opacity;
 
     // 查找图层
-    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    this.layer = layer;
     this.oldOpacity = this.layer ? this.layer.opacity : null;
   }
 
@@ -774,7 +826,9 @@ export class SetLayerBlendModeCommand extends Command {
     this.blendMode = options.blendMode;
 
     // 查找图层
-    this.layer = this.layers.value.find((layer) => layer.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    this.layer = layer;
+
     this.oldBlendMode = this.layer ? this.layer.blendMode : null;
   }
 
@@ -883,9 +937,10 @@ export class MergeLayersCommand extends Command {
       return null;
     }
 
-    // 查找最顶层图层的索引，用于插入合并后的图层
     const topLayerIndex = Math.min(
-      ...layersToMerge.map((layer) => this.layers.value.indexOf(layer))
+      ...layersToGroup.map((layer) =>
+        this.layers.value.findIndex((fLayer) => fLayer.id === layer.id)
+      )
     );
 
     // 获取要保留的所有对象
@@ -979,9 +1034,11 @@ export class GroupLayersCommand extends Command {
     this.groupId = `group_layer_${Date.now()}_${Math.floor(
       Math.random() * 1000
     )}`;
+
+    this.originalActiveLayerId = this.activeLayerId.value; // 备份原活动图层ID
   }
 
-  execute() {
+  async execute() {
     if (
       !this.layerIds ||
       !Array.isArray(this.layerIds) ||
@@ -993,7 +1050,10 @@ export class GroupLayersCommand extends Command {
 
     // 查找所有要组合的图层
     const layersToGroup = this.layerIds
-      .map((id) => this.layers.value.find((layer) => layer.id === id))
+      .map((id) => {
+        const tempLayer = this.layers.value.find((layer) => layer.id === id); // 需要给子图层加上parentId
+        return tempLayer ? { ...tempLayer, parentId: this.groupId } : false;
+      })
       .filter(Boolean);
 
     if (layersToGroup.length < 2) {
@@ -1009,7 +1069,9 @@ export class GroupLayersCommand extends Command {
 
     // 查找最顶层图层的索引，用于插入组图层
     const topLayerIndex = Math.min(
-      ...layersToGroup.map((layer) => this.layers.value.indexOf(layer))
+      ...layersToGroup.map((layer) =>
+        this.layers.value.findIndex((fLayer) => fLayer.id === layer.id)
+      )
     );
 
     // 创建新的组图层
@@ -1033,17 +1095,17 @@ export class GroupLayersCommand extends Command {
     this.layers.value.splice(topLayerIndex, 0, groupLayer);
 
     // 更新当前活动图层
-    this.activeLayerId.value = this.groupId;
+    this.activeLayerId.value = this.layerIds[0];
 
     return this.groupId;
   }
 
-  undo() {
+  async undo() {
     // 恢复原始图层状态
     this.layers.value = [...this.originalLayers];
     // 恢复活动图层为原先第一个合并前层
     if (this.activeLayerId) {
-      this.activeLayerId.value = this.layerIds[0];
+      this.activeLayerId.value = this.originalActiveLayerId;
     }
   }
 
@@ -1077,7 +1139,7 @@ export class UngroupLayersCommand extends Command {
     this.childLayerIds = [];
   }
 
-  execute() {
+  async execute() {
     // 查找组图层
     const groupIndex = this.layers.value.findIndex(
       (layer) => layer.id === this.groupId
@@ -1099,8 +1161,15 @@ export class UngroupLayersCommand extends Command {
     this.childLayerIds = groupLayer.children.map((layer) => layer.id);
 
     // 将子图层添加到原位置
-    this.layers.value.splice(groupIndex, 1, ...groupLayer.children);
-
+    this.layers.value.splice(
+      groupIndex,
+      1,
+      ...groupLayer.children?.map((child) => {
+        // 为子图层添加parentId
+        delete child.parentId; // 删除parentId属性
+        return { ...child };
+      })
+    );
     // 更新当前活动图层为第一个子图层
     if (this.childLayerIds.length > 0 && this.activeLayerId) {
       this.activeLayerId.value = this.childLayerIds[0];
@@ -1109,7 +1178,7 @@ export class UngroupLayersCommand extends Command {
     return this.childLayerIds;
   }
 
-  undo() {
+  async undo() {
     // 恢复原始图层状态
     this.layers.value = [...this.originalLayers];
     // 恢复活动图层为原始组ID
@@ -1544,24 +1613,69 @@ export class LayerObjectsToGroupCommand extends Command {
     this.layers = options.layers;
     this.fabricImage = options.fabricImage;
     this.activeLayer = options.activeLayer;
+    this.layerManager = options.layerManager;
+
+    // 存储对象ID而不是对象引用，避免引用丢失问题
+    this.originalObjectIds = [];
+    this.addedObjectIds = [];
 
     // 备份原始对象，用于撤销
     if (this.activeLayer && Array.isArray(this.activeLayer.fabricObjects)) {
-      this.originalObjects =
-        this.canvas
-          ?.getObjects()
-          ?.filter((fItem) => fItem.layerId === this.activeLayer.id) || [];
-    } else {
-      this.originalObjects = [];
+      this.originalObjectIds = this.activeLayer.fabricObjects
+        .filter((obj) => obj && obj.id)
+        .map((obj) => obj.id);
     }
 
     // 组对象相关
-    this.existingGroup = null; // 现有的组对象
-    this.groupObject = null; // 最终的组对象（可能是现有的或新创建的）
-    this.newGroupId = `group_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
-    this.wasGroupCreated = false; // 是否创建了新组
-    this.addedObjectsToGroup = []; // 添加到组中的新对象
-    this.originalLayerObjects = [...(this.activeLayer.fabricObjects || [])]; // 备份图层原始对象列表
+    this.existingGroupId = null;
+    this.groupObjectId = null;
+    this.newGroupId =
+      generateId("group") ||
+      `group_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    this.wasGroupCreated = false;
+
+    // 保存原始位置信息
+    this.originalObjectPositions = new Map();
+
+    this.originalObjectIds.forEach((id) => {
+      const result = findObjectById(this.canvas, id);
+      if (result.object) {
+        this.originalObjectPositions.set(id, {
+          left: result.object.left,
+          top: result.object.top,
+          scaleX: result.object.scaleX,
+          scaleY: result.object.scaleY,
+          angle: result.object.angle,
+          originX: result.object.originX,
+          originY: result.object.originY,
+          flipX: result.object.flipX,
+          flipY: result.object.flipY,
+          layerId: result.object.layerId,
+          layerName: result.object.layerName,
+        });
+      }
+    });
+
+    // 新增：保存新添加对象的位置信息
+    this.newObjectPositions = new Map();
+    if (this.fabricImage && this.fabricImage.id) {
+      this.newObjectPositions.set(this.fabricImage.id, {
+        left: this.fabricImage.left,
+        top: this.fabricImage.top,
+        scaleX: this.fabricImage.scaleX,
+        scaleY: this.fabricImage.scaleY,
+        angle: this.fabricImage.angle,
+        originX: this.fabricImage.originX,
+        originY: this.fabricImage.originY,
+        flipX: this.fabricImage.flipX,
+        flipY: this.fabricImage.flipY,
+        layerId: this.fabricImage.layerId,
+        layerName: this.fabricImage.layerName,
+      });
+    }
+
+    // 记录执行状态，用于区分首次执行和重做
+    this.isFirstExecution = true;
   }
 
   async execute() {
@@ -1571,51 +1685,67 @@ export class LayerObjectsToGroupCommand extends Command {
     }
 
     // 查找图层中是否已有组对象
-    this.existingGroup = this._findExistingGroup();
+    const existingGroup = this._findExistingGroup();
+    this.existingGroupId = existingGroup?.id || null;
 
     // 准备要添加的新对象
     const newObjectsToAdd = [];
     if (this.fabricImage) {
+      // 如果是重做，恢复新对象的原始位置
+      if (
+        !this.isFirstExecution &&
+        this.newObjectPositions.has(this.fabricImage.id)
+      ) {
+        const savedPosition = this.newObjectPositions.get(this.fabricImage.id);
+        this.fabricImage.set({
+          left: savedPosition.left,
+          top: savedPosition.top,
+          scaleX: savedPosition.scaleX,
+          scaleY: savedPosition.scaleY,
+          angle: savedPosition.angle,
+          originX: savedPosition.originX,
+          originY: savedPosition.originY,
+          flipX: savedPosition.flipX,
+          flipY: savedPosition.flipY,
+        });
+        console.log(
+          `🔄 重做时恢复新对象位置: (${savedPosition.left}, ${savedPosition.top})`
+        );
+      }
+
       newObjectsToAdd.push(this.fabricImage);
+      this.addedObjectIds.push(this.fabricImage.id);
     }
 
     if (newObjectsToAdd.length === 0) {
       console.log("没有新对象需要添加到组");
-      return this.existingGroup?.id || null;
+      return this.existingGroupId;
     }
 
     try {
-      // 暂时禁用画布自动渲染
-      const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
-      this.canvas.renderOnAddRemove = false;
+      await optimizeCanvasRendering(this.canvas, () => {
+        if (existingGroup) {
+          // 向现有组添加对象
+          this._addObjectsToExistingGroup(existingGroup, newObjectsToAdd);
+          this.groupObjectId = existingGroup.id;
+          this.wasGroupCreated = false;
+        } else {
+          // 创建新组包含所有对象
+          this._createNewGroupWithAllObjects(newObjectsToAdd);
+          this.groupObjectId = this.newGroupId;
+          this.wasGroupCreated = true;
+        }
 
-      if (this.existingGroup) {
-        // 如果已有组，将新对象添加到现有组中
-        this.groupObject = this.existingGroup;
-        this._addObjectsToExistingGroup(newObjectsToAdd);
-        console.log(`✅ 将 ${newObjectsToAdd.length} 个对象添加到现有组中`);
-      } else {
-        // 如果没有组，创建新组
-        this._createNewGroupWithAllObjects(newObjectsToAdd);
-        this.wasGroupCreated = true;
-        console.log(
-          `✅ 创建新组并添加 ${
-            this.originalObjects.length + newObjectsToAdd.length
-          } 个对象`
-        );
-      }
+        // 更新交互性
+        this.layerManager?.updateLayersObjectsInteractivity?.(false);
 
-      // 恢复画布自动渲染并重新渲染
-      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
-      this.canvas.renderAll();
+        // 更新缩略图
+        this._updateThumbnail();
+      });
 
-      // 选中组对象
-      // this.canvas.setActiveObject(this.groupObject);
-
-      // 更新缩略图
-      this._updateThumbnail();
-
-      return this.groupObject.id;
+      // 标记为非首次执行
+      this.isFirstExecution = false;
+      return this.groupObjectId;
     } catch (error) {
       console.error("执行组合操作时发生错误:", error);
       return null;
@@ -1628,38 +1758,48 @@ export class LayerObjectsToGroupCommand extends Command {
    * @private
    */
   _findExistingGroup() {
+    // 查找当前的组对象
     if (!this.activeLayer.fabricObjects) return null;
 
-    return (
-      this.activeLayer.fabricObjects.find(
-        (obj) => obj && obj.type === "group"
-      ) || null
-    );
+    if (!this.existingGroupId) {
+      const groupObjects =
+        this.activeLayer.fabricObjects.find(
+          (obj) => obj && obj.type === "group"
+        ) || null;
+
+      this.existingGroupId = groupObjects?.id || null;
+    }
+
+    if (!this.existingGroupId) {
+      console.warn("未找到有效的组对象");
+      return null;
+    }
+
+    const { object } = findObjectById(this.canvas, this.existingGroupId);
+
+    if (!object || object.type !== "group") {
+      console.warn("未找到有效的组对象");
+      return null;
+    }
+    return object;
   }
 
   /**
    * 将新对象添加到现有组中
+   * @param {fabric.Group} existingGroup 现有组
    * @param {Array} newObjects 要添加的新对象
    * @private
    */
-  _addObjectsToExistingGroup(newObjects) {
+  _addObjectsToExistingGroup(existingGroup, newObjects) {
     // 先从画布移除新对象（避免重复添加）
     newObjects.forEach((obj) => {
-      if (this.canvas.getObjects().includes(obj)) {
-        this.canvas.remove(obj);
-      }
+      removeCanvasObjectByObject(this.canvas, obj);
     });
 
     // 使用 addWithUpdate 方法正确添加对象到组
     newObjects.forEach((obj) => {
-      this.existingGroup.addWithUpdate(obj);
+      existingGroup.addWithUpdate(obj);
     });
-
-    // 记录添加的对象，用于撤销
-    this.addedObjectsToGroup = newObjects;
-
-    // 组对象引用不变，只是内容更新了
-    this.groupObject = this.existingGroup;
   }
 
   /**
@@ -1668,58 +1808,99 @@ export class LayerObjectsToGroupCommand extends Command {
    * @private
    */
   _createNewGroupWithAllObjects(newObjects) {
-    const allObjects = [...this.originalObjects, ...newObjects];
+    // 获取原始对象（通过ID重新查找）
+    const originalObjects = this._getOriginalObjectsFromCanvas();
+
+    // 如果是重做，恢复原始对象的位置
+    if (!this.isFirstExecution) {
+      originalObjects.forEach((obj) => {
+        if (this.originalObjectPositions.has(obj.id)) {
+          const savedPosition = this.originalObjectPositions.get(obj.id);
+          obj.set({
+            left: savedPosition.left,
+            top: savedPosition.top,
+            scaleX: savedPosition.scaleX,
+            scaleY: savedPosition.scaleY,
+            angle: savedPosition.angle,
+            originX: savedPosition.originX,
+            originY: savedPosition.originY,
+            flipX: savedPosition.flipX,
+            flipY: savedPosition.flipY,
+          });
+          console.log(
+            `🔄 重做时恢复原始对象位置: ${obj.id} (${savedPosition.left}, ${savedPosition.top})`
+          );
+        }
+      });
+    }
+
+    const allObjects = [...originalObjects, ...newObjects];
 
     // 从画布中移除所有要组合的对象
     allObjects.forEach((obj) => {
-      if (obj && this.canvas.getObjects().includes(obj)) {
-        this.canvas.remove(obj);
-      }
+      obj.opacity = 1;
+      removeCanvasObjectByObject(this.canvas, obj);
     });
 
-    // 创建组对象 - Fabric.js 5 中创建组时会自动将对象从画布移除
-    // 不需要手动从画布中移除对象
-    this.groupObject = new fabric.Group(allObjects, {
+    // 创建组对象
+    const groupObject = new fabric.Group(allObjects, {
       id: this.newGroupId,
       layerId: this.activeLayer.id,
       layerName: this.activeLayer.name,
+      type: "group",
       selectable: true,
       evented: true,
     });
 
     // 添加组对象到画布
-    this.canvas.add(this.groupObject);
+    this.canvas.add(groupObject);
 
-    // 更新图层的对象列表 - 只包含组对象
-    this.activeLayer.fabricObjects = [this.groupObject];
-
-    // 记录添加的对象
-    this.addedObjectsToGroup = newObjects;
+    // 更新图层的对象列表
+    // this.activeLayer.fabricObjects = [groupObject];
+    this.activeLayer.fabricObjects = [
+      groupObject.toObject(["id", "layerId", "layerName"]),
+    ];
   }
 
-  undo() {
-    if (!this.activeLayer || !this.canvas || !this.groupObject) return;
+  /**
+   * 从画布中重新获取原始对象
+   * @returns {Array} 原始对象数组
+   * @private
+   */
+  _getOriginalObjectsFromCanvas() {
+    const objects = [];
+
+    for (const objectId of this.originalObjectIds) {
+      const result = findObjectById(this.canvas, objectId);
+      if (result.object) {
+        objects.push(result.object);
+      }
+    }
+
+    return objects;
+  }
+
+  async undo() {
+    if (!this.activeLayer || !this.canvas || !this.groupObjectId) return;
 
     try {
-      // 暂时禁用画布自动渲染
-      const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
-      this.canvas.renderOnAddRemove = false;
+      await optimizeCanvasRendering(this.canvas, async () => {
+        if (this.wasGroupCreated) {
+          // 如果是新创建的组，完全撤销到原始状态
+          this._undoNewGroupCreation();
+        } else {
+          // 如果是向现有组添加对象，只移除新添加的对象
+          this._undoAddToExistingGroup();
+        }
 
-      if (this.wasGroupCreated) {
-        // 如果是新创建的组，完全撤销到原始状态
-        this._undoNewGroupCreation();
-      } else {
-        // 如果是向现有组添加对象，只移除新添加的对象
-        this._undoAddToExistingGroup();
-      }
+        await this.layerManager?.updateLayersObjectsInteractivity?.(false);
 
-      // 恢复画布自动渲染并重新渲染
-      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
-      this.canvas.renderAll();
-
-      // 更新缩略图
-      this._updateThumbnail();
+        // 更新缩略图
+        this._updateThumbnail();
+      });
 
+      // 重置为首次执行状态，以便重做时能正确恢复位置
+      this.isFirstExecution = false;
       console.log(`↩️ 成功撤销图层 ${this.activeLayer.name} 的对象组合操作`);
     } catch (error) {
       console.error("撤销组合操作时发生错误:", error);
@@ -1727,63 +1908,265 @@ export class LayerObjectsToGroupCommand extends Command {
   }
 
   /**
-   * 撤销新组的创建
+   * 撤销新组的创建（修正版 - 删除新添加的元素）
    * @private
    */
   _undoNewGroupCreation() {
-    // 从画布中移除组对象
-    if (this.canvas.getObjects().includes(this.groupObject)) {
-      this.canvas.remove(this.groupObject);
+    // 查找当前的组对象
+    const groupResult = findObjectById(this.canvas, this.groupObjectId);
+    if (!groupResult.object) {
+      console.error("找不到要撤销的组对象");
+      return;
     }
 
-    // 解散组 - 使用 destroy 方法或直接处理
-    if (typeof this.groupObject.destroy === "function") {
-      this.groupObject?.destroy?.();
+    const groupObject = groupResult.object;
+
+    // 获取组内的所有对象
+    const groupObjects = groupObject.getObjects();
+
+    if (groupObjects.length === 0) {
+      console.warn("组对象为空，直接移除");
+      this.canvas.remove(groupObject);
+      return;
     }
 
-    // 将原始对象重新添加到画布
-    // 注意：解散组后，对象会自动恢复到画布上，但需要重新设置属性
-    this.originalObjects.forEach((obj) => {
-      if (obj && !this.canvas.getObjects().includes(obj)) {
-        // 恢复对象的原始属性
-        obj.layerId = this.activeLayer.id;
-        obj.layerName = this.activeLayer.name;
-        this.canvas.add(obj);
+    // 分离原始对象和新添加的对象
+    const objectsToRestore = [];
+    const objectsToDelete = [];
+
+    groupObjects.forEach((obj) => {
+      if (this.originalObjectIds.includes(obj.id)) {
+        // 这是原始对象，需要恢复
+        const originalPosition = this.originalObjectPositions.get(obj.id);
+
+        let restorePosition;
+        if (originalPosition) {
+          // 优先使用原始保存的位置
+          restorePosition = { ...originalPosition };
+        } else {
+          // 计算对象在画布中的当前绝对位置
+          restorePosition = this._calculateObjectAbsolutePosition(
+            obj,
+            groupObject
+          );
+        }
+
+        objectsToRestore.push({
+          object: obj,
+          position: restorePosition,
+        });
+      } else if (this.addedObjectIds.includes(obj.id)) {
+        // 这是新添加的对象，需要删除
+        objectsToDelete.push(obj);
       }
     });
 
-    // 恢复图层对象列表
-    this.activeLayer.fabricObjects = [...this.originalObjects];
+    // 从画布中移除组对象
+    this.canvas.remove(groupObject);
+
+    // 禁用渲染以提高性能
+    const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
+    this.canvas.renderOnAddRemove = false;
+
+    try {
+      // 逐个恢复原始对象到画布
+      const restoredObjects = [];
+
+      objectsToRestore.forEach(({ object: obj, position }) => {
+        try {
+          // 从组中移除对象（这会重置对象的变换状态）
+          groupObject.removeWithUpdate(obj);
+
+          // 重新设置对象的位置和属性
+          obj.set({
+            left: position.left,
+            top: position.top,
+            scaleX: position.scaleX || 1,
+            scaleY: position.scaleY || 1,
+            angle: position.angle || 0,
+            flipX: position.flipX || false,
+            flipY: position.flipY || false,
+            originX: position.originX || "center",
+            originY: position.originY || "center",
+            layerId: this.activeLayer.id,
+            layerName: this.activeLayer.name,
+            selectable: true,
+            evented: true,
+            opacity: position.opacity || 1,
+          });
+
+          // 更新对象坐标
+          obj.setCoords();
+
+          // 将对象添加回画布
+          this.canvas.add(obj);
+          restoredObjects.push(obj);
+
+          console.log(
+            `✅ 恢复原始对象 ${obj.id || obj.type} 到位置 (${position.left}, ${
+              position.top
+            })`
+          );
+        } catch (error) {
+          console.error(`恢复对象 ${obj.id || obj.type} 时发生错误:`, error);
+        }
+      });
+
+      // 删除新添加的对象（不添加回画布）
+      objectsToDelete.forEach((obj) => {
+        try {
+          // 从组中移除对象
+          groupObject.removeWithUpdate(obj);
+
+          // 销毁对象以释放内存
+          if (typeof obj.destroy === "function") {
+            obj.destroy();
+          }
+
+          console.log(`🗑️ 删除新添加的对象 ${obj.id || obj.type}`);
+        } catch (error) {
+          console.error(`删除对象 ${obj.id || obj.type} 时发生错误:`, error);
+        }
+      });
+
+      // 更新图层对象列表（只包含恢复的原始对象）
+      this.activeLayer.fabricObjects = restoredObjects;
+
+      // 销毁组对象释放内存
+      if (typeof groupObject.destroy === "function") {
+        groupObject.destroy();
+      }
+
+      console.log(
+        `✅ 成功撤销组创建，恢复了 ${restoredObjects.length} 个原始对象，删除了 ${objectsToDelete.length} 个新对象`
+      );
+    } catch (error) {
+      console.error("撤销组创建过程中发生错误:", error);
+    } finally {
+      // 恢复渲染设置
+      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
+      this.canvas.renderAll();
+    }
   }
 
   /**
-   * 撤销向现有组添加对象的操作
+   * 计算对象在画布中的绝对位置（改进版）
+   * @param {fabric.Object} obj 组内对象
+   * @param {fabric.Group} group 组对象
+   * @returns {Object} 绝对位置信息
+   * @private
+   */
+  _calculateObjectAbsolutePosition(obj, group) {
+    try {
+      // 获取组的变换矩阵
+      const groupTransform = group.calcTransformMatrix();
+
+      // 获取对象在组内的相对位置
+      const objectPoint = new fabric.Point(obj.left || 0, obj.top || 0);
+
+      // 应用组的变换矩阵计算绝对位置
+      const absolutePoint = fabric.util.transformPoint(
+        objectPoint,
+        groupTransform
+      );
+
+      // 计算缩放比例
+      const totalScaleX = (group.scaleX || 1) * (obj.scaleX || 1);
+      const totalScaleY = (group.scaleY || 1) * (obj.scaleY || 1);
+
+      // 计算总旋转角度
+      const totalAngle = (group.angle || 0) + (obj.angle || 0);
+
+      return {
+        left: absolutePoint.x,
+        top: absolutePoint.y,
+        scaleX: totalScaleX,
+        scaleY: totalScaleY,
+        angle: totalAngle,
+        flipX: obj.flipX || false,
+        flipY: obj.flipY || false,
+        originX: obj.originX || "center",
+        originY: obj.originY || "center",
+        opacity: obj.opacity || 1,
+      };
+    } catch (error) {
+      console.warn("使用变换矩阵计算位置失败，使用简化计算:", error);
+
+      // 备选方案：基于组的中心点和对象的相对偏移计算
+      const groupCenterX = group.left || 0;
+      const groupCenterY = group.top || 0;
+
+      // 考虑组的缩放和旋转影响
+      const scaleX = group.scaleX || 1;
+      const scaleY = group.scaleY || 1;
+      const angle = group.angle || 0;
+
+      // 计算对象相对于组中心的偏移
+      const offsetX = (obj.left || 0) * scaleX;
+      const offsetY = (obj.top || 0) * scaleY;
+
+      // 如果组有旋转，需要旋转偏移量
+      let finalX = groupCenterX + offsetX;
+      let finalY = groupCenterY + offsetY;
+
+      if (angle !== 0) {
+        const cos = Math.cos(fabric.util.degreesToRadians(angle));
+        const sin = Math.sin(fabric.util.degreesToRadians(angle));
+
+        finalX = groupCenterX + offsetX * cos - offsetY * sin;
+        finalY = groupCenterY + offsetX * sin + offsetY * cos;
+      }
+
+      return {
+        left: finalX,
+        top: finalY,
+        scaleX: scaleX * (obj.scaleX || 1),
+        scaleY: scaleY * (obj.scaleY || 1),
+        angle: angle + (obj.angle || 0),
+        flipX: obj.flipX || false,
+        flipY: obj.flipY || false,
+        originX: obj.originX || "center",
+        originY: obj.originY || "center",
+        opacity: obj.opacity || 1,
+      };
+    }
+  }
+
+  /**
+   * 撤销向现有组添加对象的操作（优化版）
    * @private
    */
   _undoAddToExistingGroup() {
-    // 使用 removeWithUpdate 方法从组中移除新添加的对象
-    // 在 Fabric.js 5 中，removeWithUpdate 会自动将对象重新添加到画布
-    this.addedObjectsToGroup.forEach((obj) => {
-      this.existingGroup.removeWithUpdate(obj);
+    // 查找现有的组对象
+    const groupResult = findObjectById(this.canvas, this.existingGroupId);
+    if (!groupResult.object) {
+      console.error("找不到现有的组对象");
+      return;
+    }
 
-      // 重新设置对象的图层关联
-      obj.layerId = this.activeLayer.id;
-      obj.layerName = this.activeLayer.name;
+    const existingGroup = groupResult.object;
 
-      // 确保对象在图层对象列表中
-      if (!this.activeLayer.fabricObjects.includes(obj)) {
-        this.activeLayer.fabricObjects.push(obj);
+    // 移除新添加的对象
+    for (const objectId of this.addedObjectIds) {
+      const objResult = objectIsInCanvas(this.canvas, { id: objectId });
+
+      if (objResult.flag && objResult.parent === existingGroup) {
+        // 对象在组中，使用 removeWithUpdate 移除
+        existingGroup.removeWithUpdate(objResult.object);
+        // 从画布中完全移除这个对象
+        if (this.canvas.getObjects().includes(objResult.object)) {
+          this.canvas.remove(objResult.object);
+        }
       }
-    });
+    }
+
+    // 检查组的状态
+    const remainingObjects = existingGroup.getObjects();
 
-    // 检查组是否变为空或只有一个对象
-    const remainingObjects = this.existingGroup.getObjects();
     if (remainingObjects.length === 0) {
       // 组为空，移除组
-      this.canvas.remove(this.existingGroup);
-      const groupIndex = this.activeLayer.fabricObjects.indexOf(
-        this.existingGroup
-      );
+      this.canvas.remove(existingGroup);
+      const groupIndex = this.activeLayer.fabricObjects.indexOf(existingGroup);
       if (groupIndex !== -1) {
         this.activeLayer.fabricObjects.splice(groupIndex, 1);
       }
@@ -1792,20 +2175,19 @@ export class LayerObjectsToGroupCommand extends Command {
       const singleObj = remainingObjects[0];
 
       // 从画布移除组
-      this.canvas.remove(this.existingGroup);
+      this.canvas.remove(existingGroup);
 
-      // 使用 removeWithUpdate 移除最后一个对象
-      // 这会自动将对象添加回画布
-      this.existingGroup.removeWithUpdate(singleObj);
+      // 使用 removeWithUpdate 移除最后一个对象（会自动添加到画布）
+      existingGroup.removeWithUpdate(singleObj);
 
       // 重新设置对象属性
-      singleObj.layerId = this.activeLayer.id;
-      singleObj.layerName = this.activeLayer.name;
+      singleObj.set({
+        layerId: this.activeLayer.id,
+        layerName: this.activeLayer.name,
+      });
 
       // 更新图层对象列表
-      const groupIndex = this.activeLayer.fabricObjects.indexOf(
-        this.existingGroup
-      );
+      const groupIndex = this.activeLayer.fabricObjects.indexOf(existingGroup);
       if (groupIndex !== -1) {
         this.activeLayer.fabricObjects[groupIndex] = singleObj;
       }
@@ -1818,11 +2200,7 @@ export class LayerObjectsToGroupCommand extends Command {
    */
   _updateThumbnail() {
     if (this.canvas.thumbnailManager) {
-      setTimeout(() => {
-        this.canvas.thumbnailManager.generateLayerThumbnail(
-          this.activeLayer.id
-        );
-      }, 100);
+      this.canvas.thumbnailManager.generateLayerThumbnail(this.activeLayer.id);
     }
   }
 
@@ -1831,11 +2209,10 @@ export class LayerObjectsToGroupCommand extends Command {
       name: this.name,
       layerId: this.activeLayer?.id,
       layerName: this.activeLayer?.name || "未知图层",
-      originalObjectCount: this.originalObjects.length,
-      hasNewImage: !!this.fabricImage,
-      groupId: this.groupObject?.id,
+      originalObjectCount: this.originalObjectIds.length,
+      addedObjectsCount: this.addedObjectIds.length,
+      groupId: this.groupObjectId,
       wasGroupCreated: this.wasGroupCreated,
-      addedObjectsCount: this.addedObjectsToGroup.length,
     };
   }
 }
@@ -1879,6 +2256,7 @@ export class CreateImageLayerCommand extends Command {
         canvas: this.layerManager.canvas,
         layers: this.layerManager.layers,
         newLayer: createLayer({
+          id: this.newLayerId || generateId("layer"),
           name: fileName,
           type: LayerType.BITMAP,
           visible: true,
@@ -1889,7 +2267,6 @@ export class CreateImageLayerCommand extends Command {
         activeLayerId: this.layerManager.activeLayerId,
         insertIndex: this.layerManager._getInsertIndexAboveActiveLayer(),
       });
-
       // 执行创建图层命令
       this.newLayerId = await createLayerCmd.execute();
       this.commands.push(createLayerCmd);
@@ -1899,7 +2276,9 @@ export class CreateImageLayerCommand extends Command {
       const addObjectCmd = new AddObjectToLayerCommand({
         canvas: this.layerManager.canvas,
         layers: this.layerManager.layers,
+        layerManager: this.layerManager,
         layerId: this.newLayerId,
+        layerName: this.layerName,
         fabricObject: this.fabricImage,
       });
 
@@ -2029,110 +2408,75 @@ export class CreateImageLayerCommand extends Command {
 }
 
 /**
- * 图层重新排序命令
+ * 拖拽排序图层命令
  */
 export class ReorderLayersCommand extends Command {
   constructor(options) {
     super({
-      name: "图层重新排序",
-      saveState: false,
+      name: "拖拽排序图层",
+      saveState: true,
     });
     this.layers = options.layers;
     this.oldIndex = options.oldIndex;
     this.newIndex = options.newIndex;
     this.layerId = options.layerId;
-
-    // 验证参数
-    if (this.oldIndex === undefined || this.newIndex === undefined) {
-      throw new Error("缺少必要的索引参数");
-    }
-
-    if (this.oldIndex === this.newIndex) {
-      console.warn("新旧索引相同，无需排序");
-    }
+    this.canvas = options.canvas;
+    this.layerSort = options.layerSort || null; // LayerSort实例
   }
 
-  execute() {
+  async execute() {
+    // 验证索引有效性
     if (
-      !this.layers ||
-      !this.layers.value ||
-      !Array.isArray(this.layers.value)
+      this.oldIndex < 0 ||
+      this.newIndex < 0 ||
+      this.oldIndex >= this.layers.value.length ||
+      this.newIndex >= this.layers.value.length ||
+      this.oldIndex === this.newIndex
     ) {
-      console.error("图层数组无效");
       return false;
     }
 
-    if (this.oldIndex < 0 || this.oldIndex >= this.layers.value.length) {
-      console.error("原始索引超出范围");
+    // 验证图层ID
+    const layer = this.layers.value[this.oldIndex];
+    if (!layer || layer.id !== this.layerId) {
       return false;
     }
 
-    if (this.newIndex < 0 || this.newIndex >= this.layers.value.length) {
-      console.error("目标索引超出范围");
+    // 不允许移动背景层和固定层
+    if (layer.isBackground || layer.isFixed) {
       return false;
     }
 
-    // 获取要移动的图层
-    const layerToMove = this.layers.value[this.oldIndex];
+    // 执行排序 - 直接操作数组  不重排页面数据
+    // const layersArray = [...this.layers.value];
+    // const [movedLayer] = layersArray.splice(this.oldIndex, 1);
+    // layersArray.splice(this.newIndex, 0, movedLayer);
+    // this.layers.value = layersArray;
+    // this.layers.value
 
-    if (!layerToMove) {
-      console.error("找不到要移动的图层");
-      return false;
-    }
+    // 更新父图层的children数组
+    this.layers.value[this.oldIndex] = this.layers.value[this.newIndex]; // 确保旧索引位置的图层ID正确
+    this.layers.value[this.newIndex] = layer; // 确保旧索引位置的图层ID正确
 
-    // 验证图层ID是否匹配
-    if (this.layerId && layerToMove.id !== this.layerId) {
-      console.error("图层ID不匹配");
-      return false;
-    }
+    // 使用LayerSort工具重新排列画布对象（如果可用）
+    await this.layerSort?.rearrangeObjects();
 
-    // 执行重新排序
-    this.layers.value.splice(this.oldIndex, 1);
-    this.layers.value.splice(this.newIndex, 0, layerToMove);
-
-    console.log(
-      `✅ 图层 "${layerToMove.name}" 从索引 ${this.oldIndex} 移动到 ${this.newIndex}`
-    );
     return true;
   }
 
-  undo() {
-    if (
-      !this.layers ||
-      !this.layers.value ||
-      !Array.isArray(this.layers.value)
-    ) {
-      console.error("图层数组无效");
-      return false;
-    }
+  async undo() {
+    // 交换索引进行反向操作
+    const tempOldIndex = this.oldIndex;
+    this.oldIndex = this.newIndex;
+    this.newIndex = tempOldIndex;
 
-    if (this.newIndex < 0 || this.newIndex >= this.layers.value.length) {
-      console.error("当前索引超出范围");
-      return false;
-    }
+    const result = await this.execute();
 
-    // 获取当前在新位置的图层
-    const layerToRestore = this.layers.value[this.newIndex];
+    // 恢复原始索引
+    this.newIndex = this.oldIndex;
+    this.oldIndex = tempOldIndex;
 
-    if (!layerToRestore) {
-      console.error("找不到要恢复的图层");
-      return false;
-    }
-
-    // 验证图层ID是否匹配
-    if (this.layerId && layerToRestore.id !== this.layerId) {
-      console.error("图层ID不匹配");
-      return false;
-    }
-
-    // 恢复原始排序
-    this.layers.value.splice(this.newIndex, 1);
-    this.layers.value.splice(this.oldIndex, 0, layerToRestore);
-
-    console.log(
-      `↩️ 图层 "${layerToRestore.name}" 恢复到原始位置 ${this.oldIndex}`
-    );
-    return true;
+    return result;
   }
 
   getInfo() {
@@ -2146,56 +2490,71 @@ export class ReorderLayersCommand extends Command {
 }
 
 /**
- * 子图层重新排序命令
+ * 拖拽排序子图层命令
  */
 export class ReorderChildLayersCommand extends Command {
   constructor(options) {
     super({
-      name: "子图层重新排序",
-      saveState: false,
+      name: "拖拽排序子图层",
+      saveState: true,
     });
     this.layers = options.layers;
     this.parentId = options.parentId;
     this.oldIndex = options.oldIndex;
     this.newIndex = options.newIndex;
     this.layerId = options.layerId;
+    this.canvas = options.canvas;
+    this.layerSort = options.layerSort || null; // LayerSort实例
   }
 
-  execute() {
+  async execute() {
     // 查找父图层
     const parentLayer = this.layers.value.find(
       (layer) => layer.id === this.parentId
     );
+    if (!parentLayer) return false;
 
-    if (!parentLayer || !parentLayer.children) {
-      console.error("找不到父图层或父图层没有子图层");
+    // 获取子图层
+    const childLayers = parentLayer?.children || [];
+
+    // 验证索引
+    if (
+      this.oldIndex < 0 ||
+      this.newIndex < 0 ||
+      this.oldIndex >= childLayers.length ||
+      this.newIndex >= childLayers.length ||
+      this.oldIndex === this.newIndex
+    ) {
       return false;
     }
 
-    // 执行重新排序
-    const childToMove = parentLayer.children[this.oldIndex];
-    parentLayer.children.splice(this.oldIndex, 1);
-    parentLayer.children.splice(this.newIndex, 0, childToMove);
+    // 验证子图层ID
+    const layer = childLayers[this.oldIndex];
+    if (!layer || layer.id !== this.layerId) return false;
+
+    // 更新父图层的children数组
+    parentLayer.children[this.oldIndex] = parentLayer.children[this.newIndex]; // 确保旧索引位置的图层ID正确
+    parentLayer.children[this.newIndex] = layer; // 确保旧索引位置的图层ID正确
+
+    // 使用LayerSort工具重新排列画布对象（如果可用）
+    await this.layerSort?.rearrangeObjects();
 
     return true;
   }
 
-  undo() {
-    // 查找父图层
-    const parentLayer = this.layers.value.find(
-      (layer) => layer.id === this.parentId
-    );
+  async undo() {
+    // 交换索引进行反向操作
+    const tempOldIndex = this.oldIndex;
+    this.oldIndex = this.newIndex;
+    this.newIndex = tempOldIndex;
 
-    if (!parentLayer || !parentLayer.children) {
-      return false;
-    }
+    const result = await this.execute();
 
-    // 恢复原始排序
-    const childToRestore = parentLayer.children[this.newIndex];
-    parentLayer.children.splice(this.newIndex, 1);
-    parentLayer.children.splice(this.oldIndex, 0, childToRestore);
+    // 恢复原始索引
+    this.newIndex = this.oldIndex;
+    this.oldIndex = tempOldIndex;
 
-    return true;
+    return result;
   }
 
   getInfo() {
@@ -2210,592 +2569,1655 @@ export class ReorderChildLayersCommand extends Command {
 }
 
 /**
- * 更改固定图层图像命令
- * 用于更换固定图层（红绿图模式、模特图层等）的图像内容
+ * 复制图层命令
  */
-export class ChangeFixedImageCommand extends Command {
+export class CopyLayerCommand extends Command {
   constructor(options) {
     super({
-      name: "更改固定图层图像",
-      saveState: true,
+      name: "复制图层",
+      saveState: false,
     });
     this.canvas = options.canvas;
     this.layers = options.layers;
     this.layerId = options.layerId;
-    this.newImageFile = options.newImageFile;
     this.layerManager = options.layerManager;
-
-    // 备份原始数据
-    this.originalLayer = null;
-    this.originalObject = null;
-    this.newImageObject = null;
+    this.clipboardData = null;
   }
 
-  async execute() {
-    if (!this.canvas || !this.layers || !this.layerId || !this.newImageFile) {
-      throw new Error("更改固定图层图像命令缺少必要参数");
-    }
-
-    // 查找目标固定图层
-    this.originalLayer = this.layers.value.find(
-      (layer) => layer.id === this.layerId
-    );
-
-    if (!this.originalLayer) {
-      throw new Error(`找不到图层 ID: ${this.layerId}`);
-    }
-
-    // 验证是否为固定图层
-    if (!this.originalLayer.isFixed && !this.originalLayer.isBackground) {
-      throw new Error("只能更改固定图层或背景图层的图像");
-    }
-
-    // 备份原始对象
-    if (this.originalLayer.fabricObject) {
-      this.originalObject = this.originalLayer.fabricObject;
-    }
-
-    // 创建新的图像对象
-    this.newImageObject = await this._createImageFromFile(this.newImageFile);
-
-    // 设置新图像的属性
-    this._setupNewImageProperties();
-
-    // 替换图层中的对象
-    this._replaceLayerObject();
-
-    // 重新渲染画布
-    this.canvas.renderAll();
-
-    console.log(`✅ 成功更改固定图层 "${this.originalLayer.name}" 的图像`);
-    return this.newImageObject.id;
-  }
-
-  /**
-   * 从文件创建图像对象
-   * @param {File} file 图像文件
-   * @returns {Promise<fabric.Image>} 图像对象
-   * @private
-   */
-  async _createImageFromFile(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        fabric.Image.fromURL(
-          e.target.result,
-          (img) => {
-            if (!img) {
-              reject(new Error("无法创建图像对象"));
-              return;
-            }
-            resolve(img);
-          },
-          {
-            crossOrigin: "anonymous",
-          }
-        );
-      };
-      reader.onerror = () => reject(new Error("文件读取失败"));
-      reader.readAsDataURL(file);
-    });
-  }
-
-  /**
-   * 设置新图像的属性
-   * @private
-   */
-  _setupNewImageProperties() {
-    if (!this.newImageObject || !this.originalLayer) return;
-
-    // 生成新的ID
-    const newId = `fixed_image_${Date.now()}_${Math.floor(
-      Math.random() * 1000
-    )}`;
-
-    // 基本属性设置
-    this.newImageObject.set({
-      id: newId,
-      layerId: this.originalLayer.id,
-      layerName: this.originalLayer.name,
-      selectable: false, // 固定图层通常不可选择
-      evented: false, // 固定图层通常不响应事件
-      visible: this.originalLayer.visible,
-      opacity: this.originalLayer.opacity || 1.0,
-    });
-
-    // 如果有原始对象，继承其位置和变换属性
-    if (this.originalObject) {
-      this.newImageObject.set({
-        left: this.originalObject.left,
-        top: this.originalObject.top,
-        scaleX: this.originalObject.scaleX,
-        scaleY: this.originalObject.scaleY,
-        angle: this.originalObject.angle,
-        flipX: this.originalObject.flipX,
-        flipY: this.originalObject.flipY,
-        originX: this.originalObject.originX || "center",
-        originY: this.originalObject.originY || "center",
-      });
-    } else {
-      // 如果没有原始对象，设置默认居中位置
-      const canvasCenter = this.canvas.getCenter();
-      this.newImageObject.set({
-        left: canvasCenter.left,
-        top: canvasCenter.top,
-        originX: "center",
-        originY: "center",
-      });
-    }
-
-    // 如果是背景图层，可能需要特殊处理
-    if (this.originalLayer.isBackground) {
-      this.newImageObject.set({
-        isBackground: true,
-      });
-    }
-  }
-
-  /**
-   * 替换图层中的对象
-   * @private
-   */
-  _replaceLayerObject() {
-    // 从画布移除原始对象
-    if (
-      this.originalObject &&
-      this.canvas.getObjects().includes(this.originalObject)
-    ) {
-      this.canvas.remove(this.originalObject);
-    }
-
-    // 添加新对象到画布
-    this.canvas.add(this.newImageObject);
-
-    // 更新图层引用
-    this.originalLayer.fabricObject = this.newImageObject;
-
-    // 如果图层有 fabricObjects 数组，也要更新
-    if (this.originalLayer.fabricObjects) {
-      if (this.originalObject) {
-        const index = this.originalLayer.fabricObjects.indexOf(
-          this.originalObject
-        );
-        if (index !== -1) {
-          this.originalLayer.fabricObjects[index] = this.newImageObject;
-        } else {
-          this.originalLayer.fabricObjects.push(this.newImageObject);
-        }
-      } else {
-        this.originalLayer.fabricObjects.push(this.newImageObject);
-      }
-    }
-
-    // 确保图层顺序正确（固定图层通常在特定位置）
-    this._adjustObjectZIndex();
-  }
-
-  /**
-   * 调整对象的Z轴顺序
-   * @private
-   */
-  _adjustObjectZIndex() {
-    if (!this.newImageObject || !this.originalLayer) return;
-
-    // 如果是背景图层，确保在最底层
-    if (this.originalLayer.isBackground) {
-      this.newImageObject.sendToBack();
-    } else if (this.originalLayer.isFixed) {
-      // 如果是固定图层，放在背景层之上，普通图层之下
-      const backgroundObjects = this.canvas
-        .getObjects()
-        .filter((obj) => obj.isBackground);
-      if (backgroundObjects.length > 0) {
-        this.newImageObject.bringForward(); // 向前移动一层
-      }
-    }
-  }
-
-  async undo() {
-    if (!this.canvas || !this.originalLayer) {
-      console.error("无法撤销：缺少必要的状态信息");
+  execute() {
+    const layer = this.layers.value.find((l) => l.id === this.layerId);
+    if (!layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
       return false;
     }
 
-    try {
-      // 从画布移除新对象
-      if (
-        this.newImageObject &&
-        this.canvas.getObjects().includes(this.newImageObject)
-      ) {
-        this.canvas.remove(this.newImageObject);
-      }
-
-      // 恢复原始对象
-      if (this.originalObject) {
-        this.canvas.add(this.originalObject);
-        this.originalLayer.fabricObject = this.originalObject;
-
-        // 恢复 fabricObjects 数组
-        if (this.originalLayer.fabricObjects) {
-          const newIndex = this.originalLayer.fabricObjects.indexOf(
-            this.newImageObject
-          );
-          if (newIndex !== -1) {
-            this.originalLayer.fabricObjects[newIndex] = this.originalObject;
-          }
-        }
-      } else {
-        // 如果原来没有对象，清空图层引用
-        this.originalLayer.fabricObject = null;
-        if (this.originalLayer.fabricObjects) {
-          this.originalLayer.fabricObjects =
-            this.originalLayer.fabricObjects.filter(
-              (obj) => obj !== this.newImageObject
-            );
-        }
-      }
-
-      // 重新渲染画布
-      this.canvas.renderAll();
-
-      console.log(
-        `↩️ 成功撤销固定图层 "${this.originalLayer.name}" 的图像更改`
-      );
-      return true;
-    } catch (error) {
-      console.error("撤销更改固定图层图像时发生错误:", error);
+    // 不允许复制背景图层
+    if (layer.isBackground) {
+      console.warn("不能复制背景图层");
       return false;
     }
+
+    // 序列化图层中的对象
+    const serializedObjects = [];
+    if (layer.fabricObjects && layer.fabricObjects.length > 0) {
+      layer.fabricObjects.forEach((obj) => {
+        if (obj && typeof obj.toObject === "function") {
+          serializedObjects.push(obj.toObject(["id", "layerId", "layerName"]));
+        }
+      });
+    }
+
+    // 创建剪贴板数据
+    this.clipboardData = {
+      ...layer,
+      serializedObjects,
+      isCut: false,
+      originalLayerId: layer.id,
+    };
+
+    // 保存到图层管理器的剪贴板
+    if (this.layerManager) {
+      this.layerManager.clipboardData = this.clipboardData;
+    }
+
+    console.log(`已复制图层：${layer.name}`);
+    return true;
+  }
+
+  undo() {
+    // 复制操作无需撤销，只需清空剪贴板
+    if (this.layerManager) {
+      this.layerManager.clipboardData = null;
+    }
   }
 
   getInfo() {
     return {
       name: this.name,
       layerId: this.layerId,
-      layerName: this.originalLayer?.name || "未知图层",
-      fileName: this.newImageFile?.name || "未知文件",
-      hasOriginalObject: !!this.originalObject,
-      newImageId: this.newImageObject?.id,
     };
   }
 }
 
 /**
- * 添加图像到图层命令
- * 如果指定图层ID则添加到指定图层，否则创建新图层
+ * 剪切图层命令
  */
-export class AddImageToLayerCommand extends Command {
+export class CutLayerCommand extends Command {
   constructor(options) {
     super({
-      name: "添加图像到图层",
+      name: "剪切图层",
       saveState: true,
     });
     this.canvas = options.canvas;
     this.layers = options.layers;
+    this.layerId = options.layerId;
     this.activeLayerId = options.activeLayerId;
-    this.imageFile = options.imageFile;
-    this.targetLayerId = options.targetLayerId; // 可选：指定目标图层ID
     this.layerManager = options.layerManager;
-    this.toolManager = options.toolManager;
 
-    // 执行结果
-    this.createdImageObject = null;
-    this.usedLayerId = null;
-    this.wasLayerCreated = false;
-    this.subCommands = [];
-    this.executedSubCommands = [];
+    this.layerIndex = -1;
+    this.cutLayer = null;
+    this.clipboardData = null;
+    this.wasActiveLayer = false;
   }
 
   async execute() {
-    if (!this.canvas || !this.layers || !this.imageFile) {
-      throw new Error("添加图像到图层命令缺少必要参数");
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    const sourceLayer = layer;
+    const parentLayer = parent;
+
+    if (!sourceLayer) {
+      console.error(`源图层 ${this.layerId} 不存在`);
+      return null;
     }
 
-    try {
-      // 创建图像对象
-      this.createdImageObject = await this._createImageFromFile(this.imageFile);
-
-      // 确定目标图层
-      const targetLayer = await this._determineTargetLayer();
-      this.usedLayerId = targetLayer.id;
-
-      // 添加图像到图层
-      await this._addImageToLayer(targetLayer);
-
-      // 切换到选择工具
-      await this._switchToSelectTool();
-
-      console.log(`✅ 成功添加图像到图层 "${targetLayer.name}"`);
-      return {
-        layerId: this.usedLayerId,
-        imageId: this.createdImageObject.id,
-        wasLayerCreated: this.wasLayerCreated,
-      };
-    } catch (error) {
-      console.error("添加图像到图层失败:", error);
-      // 回滚已执行的子命令
-      await this._rollbackSubCommands();
-      throw error;
+    // 不允许复制背景图层
+    if (sourceLayer.isBackground) {
+      console.warn("不能复制背景图层");
+      return null;
     }
-  }
 
-  /**
-   * 从文件创建图像对象
-   * @param {File} file 图像文件
-   * @returns {Promise<fabric.Image>} 图像对象
-   * @private
-   */
-  async _createImageFromFile(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        fabric.Image.fromURL(
-          e.target.result,
-          (img) => {
-            if (!img) {
-              reject(new Error("无法创建图像对象"));
-              return;
-            }
-
-            // 设置图像基本属性
-            const imageId = `image_${Date.now()}_${Math.floor(
-              Math.random() * 1000
-            )}`;
-
-            // 获取画布中心点
-            const canvasCenter = this.canvas.getCenter();
-
-            img.set({
-              id: imageId,
-              left: canvasCenter.left,
-              top: canvasCenter.top,
-              originX: "center",
-              originY: "center",
-              selectable: true,
-              evented: true,
-            });
-
-            resolve(img);
-          },
-          {
-            crossOrigin: "anonymous",
-          }
-        );
-      };
-      reader.onerror = () => reject(new Error("文件读取失败"));
-      reader.readAsDataURL(file);
-    });
-  }
-
-  /**
-   * 确定目标图层
-   * @returns {Promise<Object>} 目标图层对象
-   * @private
-   */
-  async _determineTargetLayer() {
-    // 如果指定了目标图层ID，查找该图层
-    if (this.targetLayerId) {
-      const existingLayer = this.layers.value.find(
-        (layer) => layer.id === this.targetLayerId
-      );
-
-      if (existingLayer) {
-        // 验证图层是否可以添加对象
-        if (existingLayer.isBackground) {
-          throw new Error("不能向背景图层添加对象");
-        }
-        if (existingLayer.locked) {
-          throw new Error("不能向锁定图层添加对象");
-        }
-
-        console.log(`使用指定图层: ${existingLayer.name}`);
-        return existingLayer;
-      } else {
-        console.warn(`指定的图层ID不存在: ${this.targetLayerId}，将创建新图层`);
-      }
-    }
+    // 生成新图层ID和名称
+    this.newLayerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    const newName = `${sourceLayer.name} copy`;
 
     // 创建新图层
-    return await this._createNewLayer();
-  }
-
-  /**
-   * 创建新图层
-   * @returns {Promise<Object>} 新创建的图层对象
-   * @private
-   */
-  async _createNewLayer() {
-    // 生成图层名称
-    const fileName = this.imageFile.name.replace(/\.[^/.]+$/, ""); // 移除文件扩展名
-    const layerName = fileName || `图片 ${new Date().toLocaleTimeString()}`;
-
-    // 创建图层对象
-    const newLayer = createLayer({
-      name: layerName,
-      type: LayerType.BITMAP,
-      visible: true,
-      locked: false,
-      opacity: 1.0,
+    this.newLayer = createLayer({
+      id: this.newLayerId,
+      name: newName,
+      type: sourceLayer.type,
+      visible: sourceLayer.visible,
+      locked: sourceLayer.locked,
+      opacity: sourceLayer.opacity,
+      blendMode: sourceLayer.blendMode,
       fabricObjects: [],
+      children: sourceLayer.children ? [...sourceLayer.children] : [],
+      layerProperties: sourceLayer.layerProperties
+        ? { ...sourceLayer.layerProperties }
+        : {},
+      metadata: sourceLayer.metadata ? { ...sourceLayer.metadata } : {},
+      parentId: parentLayer ? parentLayer.id : undefined, // 保持父图层关系
     });
 
-    // 执行添加图层命令
-    const addLayerCmd = new AddLayerCommand({
-      canvas: this.canvas,
-      layers: this.layers,
-      newLayer: newLayer,
-      activeLayerId: this.activeLayerId,
-      insertIndex: this.layerManager?._getInsertIndexAboveActiveLayer?.(),
-    });
+    // 计算插入位置 - 区分主图层和子图层
+    let insertIndex;
 
-    const layerId = await addLayerCmd.execute();
-    this.subCommands.push(addLayerCmd);
-    this.executedSubCommands.push(addLayerCmd);
-    this.wasLayerCreated = true;
+    if (parentLayer) {
+      // 处理子图层：在父图层的children数组中插入
+      const sourceChildIndex = parentLayer.children.findIndex(
+        (child) => child.id === this.layerId
+      );
+      insertIndex =
+        this.insertIndex !== null ? this.insertIndex : sourceChildIndex + 1;
 
-    console.log(`创建新图层: ${layerName}, ID: ${layerId}`);
-    return newLayer;
-  }
+      // 插入到父图层的children数组中
+      parentLayer.children.splice(insertIndex, 0, this.newLayer);
+      this.isChildLayer = true;
+      this.parentLayer = parentLayer;
+      this.childInsertIndex = insertIndex;
+    } else {
+      // 处理主图层：在主图层数组中插入
+      const sourceIndex = this.layers.value.findIndex(
+        (l) => l.id === this.layerId
+      );
+      insertIndex =
+        this.insertIndex !== null ? this.insertIndex : sourceIndex + 1;
 
-  /**
-   * 添加图像到图层
-   * @param {Object} targetLayer 目标图层
-   * @private
-   */
-  async _addImageToLayer(targetLayer) {
-    // 设置图像与图层的关联
-    this.createdImageObject.set({
-      layerId: targetLayer.id,
-      layerName: targetLayer.name,
-    });
-
-    // 执行添加对象到图层命令
-    const addObjectCmd = new AddObjectToLayerCommand({
-      canvas: this.canvas,
-      layers: this.layers,
-      layerId: targetLayer.id,
-      fabricObject: this.createdImageObject,
-    });
-
-    await addObjectCmd.execute();
-    this.subCommands.push(addObjectCmd);
-    this.executedSubCommands.push(addObjectCmd);
-
-    console.log(`图像已添加到图层: ${targetLayer.name}`);
-  }
-
-  /**
-   * 切换到选择工具
-   * @private
-   */
-  async _switchToSelectTool() {
-    if (!this.toolManager) return;
-
-    const toolCmd = new ToolCommand({
-      toolManager: this.toolManager,
-      tool: OperationType.SELECT,
-      previousTool: this.toolManager.getCurrentTool(),
-    });
-
-    await toolCmd.execute();
-    this.subCommands.push(toolCmd);
-    this.executedSubCommands.push(toolCmd);
-
-    console.log("已切换到选择工具");
-  }
-
-  /**
-   * 回滚已执行的子命令
-   * @private
-   */
-  async _rollbackSubCommands() {
-    console.log(`🔄 开始回滚 ${this.executedSubCommands.length} 个子命令`);
-
-    const commands = [...this.executedSubCommands].reverse();
-
-    for (const command of commands) {
-      if (typeof command.undo === "function") {
-        try {
-          console.log(`🔄 回滚子命令: ${command.constructor.name}`);
-          const result = command.undo();
-          if (this._isPromise(result)) {
-            await result;
-          }
-          console.log(`✅ 子命令回滚成功: ${command.constructor.name}`);
-        } catch (error) {
-          console.error(
-            `❌ 子命令回滚失败: ${command.constructor.name}`,
-            error
-          );
-        }
-      }
+      // 插入到主图层数组中
+      this.layers.value.splice(insertIndex, 0, this.newLayer);
+      this.isChildLayer = false;
+      this.mainInsertIndex = insertIndex;
     }
 
-    this.executedSubCommands = [];
-    console.log(`✅ 回滚完成`);
+    // 复制源图层中的对象
+    if (sourceLayer.fabricObjects && sourceLayer.fabricObjects.length > 0) {
+      await this._duplicateObjects(sourceLayer.fabricObjects);
+    }
+
+    // 设置为活动图层
+    this.activeLayerId.value = this.newLayerId;
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
+
+    console.log(
+      `已复制图层：${newName} ${this.isChildLayer ? "(子图层)" : "(主图层)"}`
+    );
+    return this.newLayerId;
   }
 
   async undo() {
-    if (this.executedCommands.length === 0) {
-      console.warn("没有已执行的命令需要撤销");
-      return true;
-    }
+    if (!this.newLayer) return;
 
-    console.log(
-      `↩️ 开始撤销创建图片图层操作，共 ${this.executedCommands.length} 个子命令`
-    );
-
-    try {
-      // 逆序撤销已执行的命令
-      const commands = [...this.executedCommands].reverse();
-
-      for (const command of commands) {
-        if (typeof command.undo === "function") {
-          try {
-            console.log(`↩️ 撤销子命令: ${command.constructor.name}`);
-            const result = command.undo();
-            if (this._isPromise(result)) {
-              await result;
-            }
-            console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
-          } catch (error) {
-            console.error(
-              `❌ 子命令撤销失败: ${command.constructor.name}`,
-              error
-            );
-          }
-        }
+    if (this.isChildLayer && this.parentLayer) {
+      // 撤销子图层：从父图层的children数组中删除
+      const childIndex = this.parentLayer.children.findIndex(
+        (child) => child.id === this.newLayerId
+      );
+      if (childIndex !== -1) {
+        this.parentLayer.children.splice(childIndex, 1);
+      }
+    } else {
+      // 撤销主图层：从主图层数组中删除
+      const index = this.layers.value.findIndex(
+        (l) => l.id === this.newLayerId
+      );
+      if (index !== -1) {
+        this.layers.value.splice(index, 1);
       }
-
-      this.executedCommands = [];
-      console.log(`✅ 创建图片图层撤销完成`);
-      return true;
-    } catch (error) {
-      console.error("❌ 撤销创建图片图层过程中发生错误:", error);
-      throw error;
     }
-  }
 
-  /**
-   * 检查返回值是否为Promise
-   * @private
-   */
-  _isPromise(value) {
-    return (
-      value &&
-      typeof value === "object" &&
-      typeof value.then === "function" &&
-      typeof value.catch === "function"
-    );
+    // 从画布中移除所有创建的对象
+    this.createdObjects.forEach((obj) => {
+      this.canvas.remove(obj);
+    });
+
+    // 恢复原活动图层
+    this.activeLayerId.value = this.layerId;
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
   }
 
   getInfo() {
     return {
       name: this.name,
-      layerName: this.layerName,
-      layerId: this.newLayerId,
-      commandCount: this.commands.length,
-      executedCount: this.executedCommands.length,
+      sourceLayerId: this.layerId,
+      newLayerId: this.newLayerId,
+      newLayerName: this.newLayer?.name,
+      objectCount: this.createdObjects.length,
+      isChildLayer: this.isChildLayer,
+      parentLayerId: this.parentLayer?.id,
+    };
+  }
+}
+
+/**
+ * 复制图层到指定位置命令
+ */
+export class DuplicateLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "复制图层",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.activeLayerId = options.activeLayerId;
+    this.insertIndex = options.insertIndex || null;
+    this.layerManager = options.layerManager;
+
+    this.newLayer = null;
+    this.newLayerId = null;
+    this.createdObjects = [];
+  }
+
+  async execute() {
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    const sourceLayer = layer;
+    if (!sourceLayer) {
+      console.error(`源图层 ${this.layerId} 不存在`);
+      return null;
+    }
+
+    // 不允许复制背景图层
+    if (sourceLayer.isBackground) {
+      console.warn("不能复制背景图层");
+      return null;
+    }
+
+    // 生成新图层ID和名称
+    this.newLayerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    const newName = `${sourceLayer.name} copy`;
+
+    // 创建新图层
+    this.newLayer = createLayer({
+      id: this.newLayerId,
+      name: newName,
+      type: sourceLayer.type,
+      visible: sourceLayer.visible,
+      locked: sourceLayer.locked,
+      opacity: sourceLayer.opacity,
+      blendMode: sourceLayer.blendMode,
+      fabricObjects: [],
+      children: sourceLayer.children ? [...sourceLayer.children] : [],
+      layerProperties: sourceLayer.layerProperties
+        ? { ...sourceLayer.layerProperties }
+        : {},
+      metadata: sourceLayer.metadata ? { ...sourceLayer.metadata } : {},
+    });
+
+    // 计算插入位置
+    const sourceIndex = this.layers.value.findIndex(
+      (l) => l.id === this.layerId
+    );
+    const insertIndex =
+      this.insertIndex !== null ? this.insertIndex : sourceIndex + 1;
+
+    // 插入新图层
+    this.layers.value.splice(insertIndex, 0, this.newLayer);
+
+    // 复制源图层中的对象
+    if (sourceLayer.fabricObjects && sourceLayer.fabricObjects.length > 0) {
+      await this._duplicateObjects(sourceLayer.fabricObjects);
+    }
+
+    // 设置为活动图层
+    this.activeLayerId.value = this.newLayerId;
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
+
+    console.log(`已复制图层：${newName}`);
+    return this.newLayerId;
+  }
+
+  async _duplicateObjects(sourceObjects) {
+    const serializedObjects = sourceObjects.map((obj) => {
+      // 序列化对象时保留必要的属性
+      const { object } = findObjectById(this.canvas, obj.id);
+      if (object) return object.toObject(["id", "layerId", "layerName"]);
+      return obj;
+    });
+
+    return new Promise((resolve) => {
+      fabric.util.enlivenObjects(serializedObjects, (objects) => {
+        objects.forEach((obj) => {
+          // 生成新的对象ID
+          const newObjId = `obj_${Date.now()}_${Math.floor(
+            Math.random() * 1000
+          )}`;
+          obj.id = newObjId;
+          obj.layerId = this.newLayerId;
+          obj.layerName = this.newLayer.name;
+
+          // 添加偏移量
+          const offset = 10;
+          if (obj.left !== undefined) obj.left += offset;
+          if (obj.top !== undefined) obj.top += offset;
+
+          // 添加到画布
+          this.canvas.add(obj);
+
+          // 添加到新图层
+          this.newLayer.fabricObjects.push(obj);
+
+          // 记录创建的对象
+          this.createdObjects.push(obj);
+        });
+
+        resolve();
+      });
+    });
+  }
+
+  async undo() {
+    if (!this.newLayer) return;
+
+    // 从图层列表中删除新图层
+    const index = this.layers.value.findIndex((l) => l.id === this.newLayerId);
+    if (index !== -1) {
+      this.layers.value.splice(index, 1);
+    }
+
+    // 从画布中移除所有创建的对象
+    this.createdObjects.forEach((obj) => {
+      this.canvas.remove(obj);
+    });
+
+    // 恢复原活动图层
+    this.activeLayerId.value = this.layerId;
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity(false);
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      sourceLayerId: this.layerId,
+      newLayerId: this.newLayerId,
+      newLayerName: this.newLayer?.name,
+      objectCount: this.createdObjects.length,
+    };
+  }
+}
+
+/**
+ * 创建调整图层命令
+ */
+export class CreateAdjustmentLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "创建调整图层",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.activeLayerId = options.activeLayerId;
+    this.adjustmentType = options.adjustmentType || "brightness";
+    this.adjustmentValue = options.adjustmentValue || 0;
+    this.insertIndex = options.insertIndex || null;
+
+    this.newLayer = null;
+    this.newLayerId = null;
+  }
+
+  execute() {
+    // 生成新图层ID
+    this.newLayerId = `adj_layer_${Date.now()}_${Math.floor(
+      Math.random() * 1000
+    )}`;
+
+    // 创建调整图层
+    this.newLayer = createLayer({
+      id: this.newLayerId,
+      name: `${this.adjustmentType} 调整`,
+      type: LayerType.ADJUSTMENT,
+      visible: true,
+      locked: false,
+      opacity: 1.0,
+      fabricObjects: [],
+      layerProperties: {
+        adjustmentType: this.adjustmentType,
+        value: this.adjustmentValue,
+        affectedLayerIds: [], // 可以指定受影响的图层
+      },
+    });
+
+    // 计算插入位置
+    const insertIndex =
+      this.insertIndex !== null
+        ? this.insertIndex
+        : this._getInsertIndexAboveActiveLayer();
+
+    // 插入新图层
+    this.layers.value.splice(insertIndex, 0, this.newLayer);
+
+    // 设置为活动图层
+    this.activeLayerId.value = this.newLayerId;
+
+    console.log(`已创建调整图层：${this.newLayer.name}`);
+    return this.newLayerId;
+  }
+
+  _getInsertIndexAboveActiveLayer() {
+    const activeIndex = this.layers.value.findIndex(
+      (layer) => layer.id === this.activeLayerId.value
+    );
+    return activeIndex !== -1 ? activeIndex : 0;
+  }
+
+  undo() {
+    if (!this.newLayer) return;
+
+    // 从图层列表中删除调整图层
+    const index = this.layers.value.findIndex((l) => l.id === this.newLayerId);
+    if (index !== -1) {
+      this.layers.value.splice(index, 1);
+    }
+
+    // 恢复原活动图层
+    // 这里需要记录原来的活动图层ID
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      adjustmentType: this.adjustmentType,
+      adjustmentValue: this.adjustmentValue,
+      newLayerId: this.newLayerId,
+      newLayerName: this.newLayer?.name,
+    };
+  }
+}
+
+/**
+ * 应用图层样式命令
+ */
+export class ApplyLayerStyleCommand extends Command {
+  constructor(options) {
+    super({
+      name: "应用图层样式",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.styleType = options.styleType; // 'shadow', 'glow', 'stroke' etc.
+    this.styleOptions = options.styleOptions || {};
+
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    if (!layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return;
+    }
+    this.layer = layer;
+    this.oldStyles = this.layer
+      ? { ...(this.layer.layerProperties?.styles || {}) }
+      : {};
+  }
+
+  execute() {
+    if (!this.layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return false;
+    }
+
+    // 初始化样式属性
+    if (!this.layer.layerProperties) {
+      this.layer.layerProperties = {};
+    }
+    if (!this.layer.layerProperties.styles) {
+      this.layer.layerProperties.styles = {};
+    }
+
+    // 应用新样式
+    this.layer.layerProperties.styles[this.styleType] = this.styleOptions;
+
+    // 更新画布上的对象样式
+    this._applyStyleToObjects();
+
+    // 重新渲染画布
+    this.canvas.renderAll();
+
+    console.log(`已应用${this.styleType}样式到图层：${this.layer.name}`);
+    return true;
+  }
+
+  _applyStyleToObjects() {
+    if (!this.layer.fabricObjects) return;
+
+    this.layer.fabricObjects.forEach((obj) => {
+      if (!obj) return;
+
+      switch (this.styleType) {
+        case "shadow":
+          if (this.styleOptions.enabled) {
+            obj.shadow = new fabric.Shadow({
+              color: this.styleOptions.color || "rgba(0,0,0,0.5)",
+              blur: this.styleOptions.blur || 5,
+              offsetX: this.styleOptions.offsetX || 5,
+              offsetY: this.styleOptions.offsetY || 5,
+            });
+          } else {
+            obj.shadow = null;
+          }
+          break;
+        case "stroke":
+          if (this.styleOptions.enabled) {
+            obj.stroke = this.styleOptions.color || "#000000";
+            obj.strokeWidth = this.styleOptions.width || 1;
+          } else {
+            obj.stroke = null;
+            obj.strokeWidth = 0;
+          }
+          break;
+        // 可以添加更多样式类型
+      }
+    });
+  }
+
+  undo() {
+    if (!this.layer) return;
+
+    // 恢复原样式
+    if (this.layer.layerProperties && this.layer.layerProperties.styles) {
+      this.layer.layerProperties.styles = { ...this.oldStyles };
+    }
+
+    // 重新应用所有样式
+    this._reapplyAllStyles();
+
+    // 重新渲染画布
+    this.canvas.renderAll();
+  }
+
+  _reapplyAllStyles() {
+    if (!this.layer.fabricObjects) return;
+
+    this.layer.fabricObjects.forEach((obj) => {
+      if (!obj) return;
+
+      // 重置样式
+      obj.shadow = null;
+      obj.stroke = null;
+      obj.strokeWidth = 0;
+
+      // 重新应用所有保存的样式
+      const styles = this.layer.layerProperties?.styles || {};
+      Object.keys(styles).forEach((styleType) => {
+        const styleOptions = styles[styleType];
+        // 这里可以复用 _applyStyleToObjects 中的逻辑
+      });
+    });
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      styleType: this.styleType,
+      styleOptions: this.styleOptions,
+    };
+  }
+}
+
+/**
+ * 图层剪贴蒙版命令
+ */
+export class LayerClippingMaskCommand extends Command {
+  constructor(options) {
+    super({
+      name: "创建/移除剪贴蒙版",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.maskLayerId = options.maskLayerId || null; // null表示移除蒙版
+
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    if (!layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return;
+    }
+    this.layer = layer;
+    this.oldClippingMask = this.layer ? this.layer.clippingMask : null;
+  }
+
+  execute() {
+    if (!this.layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return false;
+    }
+
+    if (this.maskLayerId) {
+      // 创建剪贴蒙版
+      const maskLayer = this.layers.value.find(
+        (l) => l.id === this.maskLayerId
+      );
+      if (!maskLayer) {
+        console.error(`蒙版图层 ${this.maskLayerId} 不存在`);
+        return false;
+      }
+
+      this.layer.clippingMask = maskLayer.fabricObjects?.[0] || null;
+      console.log(`已为图层 ${this.layer.name} 创建剪贴蒙版`);
+    } else {
+      // 移除剪贴蒙版
+      this.layer.clippingMask = null;
+      console.log(`已移除图层 ${this.layer.name} 的剪贴蒙版`);
+    }
+
+    // 更新画布上的对象
+    this._updateObjectClipping();
+
+    // 重新渲染画布
+    this.canvas.renderAll();
+
+    return true;
+  }
+
+  _updateObjectClipping() {
+    if (!this.layer.fabricObjects) return;
+
+    this.layer.fabricObjects.forEach((obj) => {
+      if (this.layer.clippingMask) {
+        // 应用剪贴蒙版
+        obj.clipPath = this.layer.clippingMask;
+      } else {
+        // 移除剪贴蒙版
+        obj.clipPath = null;
+      }
+    });
+  }
+
+  undo() {
+    if (!this.layer) return;
+
+    // 恢复原剪贴蒙版
+    this.layer.clippingMask = this.oldClippingMask;
+
+    // 更新画布上的对象
+    this._updateObjectClipping();
+
+    // 重新渲染画布
+    this.canvas.renderAll();
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      maskLayerId: this.maskLayerId,
+      hasClippingMask: !!this.layer?.clippingMask,
+    };
+  }
+}
+
+/**
+ * 更换固定图层图像命令
+ * 专门用于更换固定图层（如背景图层）的图像
+ */
+export class ChangeFixedImageCommand extends Command {
+  constructor(options = {}) {
+    super({
+      name: "更换固定图层图像",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager;
+    this.imageUrl = options.imageUrl;
+    this.targetLayerType = options.targetLayerType || "fixed"; // 'background', 'fixed', etc.
+    this.position = options.position || { x: 0, y: 0 };
+    this.scale = options.scale || { x: 1, y: 1 };
+    this.preserveTransform = options.preserveTransform ?? false; // 默认不保留变换
+
+    // 用于回滚的状态
+    this.previousImage = null;
+    this.previousTransform = null;
+    this.previousObjectId = null; // 保存之前对象的ID
+    this.targetLayer = null;
+    this.newObjectId = null; // 保存新对象的ID
+    this.isExecuted = false;
+
+    // 错误处理
+    this.maxRetries = options.maxRetries || 3;
+    this.retryCount = 0;
+    this.timeoutMs = options.timeoutMs || 10000;
+  }
+
+  async execute() {
+    try {
+      // 查找目标图层
+      this.targetLayer = this.findTargetLayer();
+      if (!this.targetLayer) {
+        throw new Error(`找不到目标图层类型: ${this.targetLayerType}`);
+      }
+
+      // 保存当前状态
+      await this.saveCurrentState();
+
+      // 加载新图像
+      const newImage = await this.loadImageWithRetry();
+
+      // 应用图像到图层
+      await this.applyImageToLayer(newImage);
+
+      this.isExecuted = true;
+
+      return {
+        success: true,
+        layerId: this.targetLayer.id,
+        imageUrl: this.imageUrl,
+      };
+    } catch (error) {
+      console.error("ChangeFixedImageCommand执行失败:", error);
+
+      // 如果已经执行了部分操作，尝试回滚
+      if (this.isExecuted) {
+        try {
+          await this.undo();
+        } catch (rollbackError) {
+          console.error("回滚失败:", rollbackError);
+        }
+      }
+
+      throw error;
+    }
+  }
+
+  async undo() {
+    if (!this.isExecuted || !this.targetLayer) {
+      throw new Error("命令未执行或目标图层不存在");
+    }
+
+    try {
+      await optimizeCanvasRendering(this.canvas, async () => {
+        if (this.previousImage && this.previousObjectId) {
+          // 恢复之前的图像
+          await this.restorePreviousImage();
+        } else {
+          // 如果没有之前的图像，移除当前图像
+          await this.removeCurrentImage();
+        }
+      });
+
+      this.isExecuted = false;
+
+      return {
+        success: true,
+        action: "reverted",
+        layerId: this.targetLayer.id,
+      };
+    } catch (error) {
+      console.error("ChangeFixedImageCommand撤销失败:", error);
+      throw error;
+    }
+  }
+
+  findTargetLayer() {
+    const layers = this.layerManager.layers?.value || [];
+
+    switch (this.targetLayerType) {
+      case "background":
+        return layers.find((layer) => layer.isBackground);
+      case "fixed":
+        return layers.find((layer) => layer.isFixed);
+      default:
+        return layers.find((layer) => layer.type === this.targetLayerType);
+    }
+  }
+
+  async saveCurrentState() {
+    // 通过画布查找当前图层的对象，而不是直接使用图层引用
+    const currentObjects = this.canvas
+      .getObjects()
+      .filter((obj) => obj.layerId === this.targetLayer.id);
+
+    if (currentObjects.length > 0) {
+      const currentObj = currentObjects[0]; // 固定图层通常只有一个对象
+
+      // 验证对象确实在画布中
+      const canvasCheck = objectIsInCanvas(this.canvas, currentObj);
+      if (!canvasCheck.flag) {
+        console.warn("图层对象不在画布中，跳过状态保存");
+        return;
+      }
+
+      this.previousObjectId = currentObj.id;
+
+      // 使用帮助函数获取z-index位置
+      this.previousZIndex = getObjectZIndex(this.canvas, currentObj);
+
+      // 保存当前图像URL（如果存在）
+      this.previousImage = {
+        url: currentObj.getSrc ? currentObj.getSrc() : null,
+        element: currentObj._element ? currentObj._element.cloneNode() : null,
+        objectData: currentObj.toObject(["id", "layerId", "layerName"]), // 保存完整对象数据
+        zIndex: this.previousZIndex, // 保存z-index
+      };
+
+      // 保存变换状态
+      this.previousTransform = {
+        left: currentObj.left,
+        top: currentObj.top,
+        scaleX: currentObj.scaleX,
+        scaleY: currentObj.scaleY,
+        angle: currentObj.angle,
+        flipX: currentObj.flipX,
+        flipY: currentObj.flipY,
+        opacity: currentObj.opacity,
+      };
+
+      console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
+    }
+  }
+
+  async loadImageWithRetry() {
+    for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
+      try {
+        return await this.loadImage();
+      } catch (error) {
+        this.retryCount = attempt;
+
+        if (attempt === this.maxRetries) {
+          throw new Error(
+            `图像加载失败，已重试${this.maxRetries}次: ${error.message}`
+          );
+        }
+
+        // 指数退避重试
+        const delay = Math.pow(2, attempt) * 1000;
+        await new Promise((resolve) => setTimeout(resolve, delay));
+
+        console.warn(
+          `图像加载重试 ${attempt + 1}/${this.maxRetries}:`,
+          error.message
+        );
+      }
+    }
+  }
+
+  loadImage() {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(
+          new Error(`图像加载超时 (${this.timeoutMs}ms): ${this.imageUrl}`)
+        );
+      }, this.timeoutMs);
+
+      fabric.Image.fromURL(
+        this.imageUrl,
+        (img) => {
+          clearTimeout(timeout);
+
+          if (!img || !img.getElement()) {
+            reject(new Error("图像加载失败或无效"));
+            return;
+          }
+
+          resolve(img);
+        },
+        {
+          crossOrigin: "anonymous",
+        }
+      );
+    });
+  }
+
+  async applyImageToLayer(newImage) {
+    await optimizeCanvasRendering(this.canvas, async () => {
+      // 生成新对象ID
+      this.newObjectId = generateId();
+
+      // 设置基本属性
+      newImage.set({
+        id: this.newObjectId,
+        layerId: this.targetLayer.id,
+        layerName: this.targetLayer.name,
+        isBackground: this.targetLayer.isBackground,
+        isFixed: this.targetLayer.isFixed,
+      });
+
+      // 移除旧对象（如果存在）
+      if (this.previousObjectId) {
+        const { object: oldObject } = findObjectById(
+          this.canvas,
+          this.previousObjectId
+        );
+        if (oldObject) {
+          const removeSuccess = removeCanvasObjectByObject(
+            this.canvas,
+            oldObject
+          );
+          if (!removeSuccess) {
+            console.warn("移除旧对象失败，但继续执行");
+          }
+        }
+      }
+
+      // 应用位置和变换
+      if (this.preserveTransform && this.previousTransform) {
+        newImage.set(this.previousTransform);
+      } else {
+        newImage.set({
+          left: this.position.x || this.canvas.width / 2,
+          top: this.position.y || this.canvas.height / 2,
+          scaleX: this.scale.x || 1,
+          scaleY: this.scale.y || 1,
+          originX: "center",
+          originY: "center",
+        });
+      }
+
+      // 使用帮助函数在指定z-index位置插入新图像
+      if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {
+        const insertSuccess = insertObjectAtZIndex(
+          this.canvas,
+          newImage,
+          this.previousZIndex,
+          false
+        );
+        if (insertSuccess) {
+          console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
+        } else {
+          // 如果插入失败，回退到普通添加
+          this.canvas.add(newImage);
+          console.log("z-index插入失败，新图像添加到顶层");
+        }
+      } else {
+        // 否则直接添加到顶层
+        this.canvas.add(newImage);
+        console.log("新图像添加到顶层");
+      }
+
+      newImage.setCoords();
+
+      // 更新图层引用
+
+      // 更新图层管理器
+      this.layerManager.updateLayerObject(this.targetLayer.id, newImage);
+    });
+  }
+
+  async restorePreviousImage() {
+    if (!this.previousImage?.objectData) {
+      throw new Error("没有可恢复的图像数据");
+    }
+
+    return new Promise((resolve, reject) => {
+      fabric.util.enlivenObjects(
+        [this.previousImage.objectData],
+        async (objects) => {
+          try {
+            const restoredImage = objects[0];
+
+            await optimizeCanvasRendering(this.canvas, async () => {
+              // 移除当前对象
+              if (this.newObjectId) {
+                const { object: currentObject } = findObjectById(
+                  this.canvas,
+                  this.newObjectId
+                );
+                if (currentObject) {
+                  removeCanvasObjectByObject(this.canvas, currentObject);
+                }
+              }
+
+              // 恢复之前的变换
+              if (this.previousTransform) {
+                restoredImage.set(this.previousTransform);
+              }
+
+              // 设置图层属性
+              restoredImage.set({
+                id: this.previousObjectId,
+                layerId: this.targetLayer.id,
+                layerName: this.targetLayer.name,
+                isBackground: this.targetLayer.isBackground,
+                isFixed: this.targetLayer.isFixed,
+              });
+
+              // 使用帮助函数在正确的z-index位置恢复对象
+              if (
+                this.previousZIndex !== undefined &&
+                this.previousZIndex >= 0
+              ) {
+                const insertSuccess = insertObjectAtZIndex(
+                  this.canvas,
+                  restoredImage,
+                  this.previousZIndex,
+                  false
+                );
+                if (insertSuccess) {
+                  console.log(`恢复图像到z-index位置: ${this.previousZIndex}`);
+                } else {
+                  // 如果插入失败，回退到普通添加
+                  this.canvas.add(restoredImage);
+                  console.log("z-index恢复失败，恢复图像添加到顶层");
+                }
+              } else {
+                // 如果没有保存的z-index，添加到顶层
+                this.canvas.add(restoredImage);
+                console.log("恢复图像添加到顶层");
+              }
+
+              restoredImage.setCoords();
+
+              // 更新引用
+              this.targetLayer.fabricObject = restoredImage;
+              this.layerManager.updateLayerObject(
+                this.targetLayer.id,
+                restoredImage
+              );
+            });
+
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        }
+      );
+    });
+  }
+
+  async removeCurrentImage() {
+    await optimizeCanvasRendering(this.canvas, async () => {
+      if (this.newObjectId) {
+        const { object: currentObject } = findObjectById(
+          this.canvas,
+          this.newObjectId
+        );
+        if (currentObject) {
+          const removeSuccess = removeCanvasObjectByObject(
+            this.canvas,
+            currentObject
+          );
+          if (removeSuccess) {
+            this.targetLayer.fabricObject = null;
+            this.layerManager.updateLayerObject(this.targetLayer.id, null);
+          }
+        }
+      }
+    });
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      targetLayerType: this.targetLayerType,
+      imageUrl: this.imageUrl,
+      isExecuted: this.isExecuted,
+      retryCount: this.retryCount,
+      targetLayerId: this.targetLayer?.id,
+      preserveTransform: this.preserveTransform,
+    };
+  }
+}
+
+/**
+ * 向图层添加图像命令
+ * 用于向指定图层添加新的图像对象
+ */
+export class AddImageToLayerCommand extends Command {
+  constructor(options = {}) {
+    super({
+      name: "向图层添加图像",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager;
+    this.imageUrl = options.imageUrl;
+    this.layerId = options.layerId;
+    this.position = options.position || { x: 100, y: 100 };
+    this.scale = options.scale || { x: 1, y: 1 };
+    this.zIndex = options.zIndex || null; // 可选的层级控制
+
+    // 用于回滚的状态
+    this.addedObject = null;
+    this.targetLayer = null;
+    this.isExecuted = false;
+
+    // 错误处理
+    this.maxRetries = options.maxRetries || 3;
+    this.retryCount = 0;
+    this.timeoutMs = options.timeoutMs || 10000;
+  }
+
+  async execute() {
+    try {
+      this.validateInputs();
+
+      // 查找目标图层
+      const { layer } = findLayerRecursively(
+        this.layerManager?.layers?.value || [],
+        this.layerId
+      );
+
+      this.targetLayer = layer;
+
+      if (!this.targetLayer) {
+        throw new Error(`找不到目标图层: ${this.layerId}`);
+      }
+
+      // 检查图层是否可编辑
+      this.validateLayerEditability();
+
+      // 加载新图像
+      const newImage = await this.loadImageWithRetry();
+
+      // 添加图像到图层
+      await this.addImageToLayer(newImage);
+
+      this.isExecuted = true;
+
+      // 触发成功事件
+      this.emitEvent("image:added", {
+        layerId: this.layerId,
+        objectId: this.addedObject.id,
+        imageUrl: this.imageUrl,
+        command: this,
+      });
+
+      return {
+        success: true,
+        layerId: this.layerId,
+        objectId: this.addedObject.id,
+        imageUrl: this.imageUrl,
+      };
+    } catch (error) {
+      console.error("AddImageToLayerCommand执行失败:", error);
+
+      // 如果已经添加了对象，尝试移除
+      if (this.addedObject) {
+        try {
+          await this.undo();
+        } catch (rollbackError) {
+          console.error("回滚失败:", rollbackError);
+        }
+      }
+
+      throw error;
+    }
+  }
+
+  async undo() {
+    if (!this.isExecuted || !this.addedObject) {
+      throw new Error("命令未执行或没有添加的对象");
+    }
+
+    try {
+      // 移除添加的对象
+      this.canvas.remove(this.addedObject);
+
+      // 从图层管理器中移除
+      this.layerManager.removeObjectFromLayer(
+        this.addedObject.id,
+        this.layerId
+      );
+
+      this.isExecuted = false;
+
+      // 触发撤销事件
+      this.emitEvent("image:removed", {
+        layerId: this.layerId,
+        objectId: this.addedObject.id,
+        command: this,
+      });
+
+      // 重新渲染
+      this.canvas.renderAll();
+
+      return {
+        success: true,
+        action: "removed",
+        layerId: this.layerId,
+        objectId: this.addedObject.id,
+      };
+    } catch (error) {
+      console.error("AddImageToLayerCommand撤销失败:", error);
+      throw error;
+    }
+  }
+
+  validateInputs() {
+    if (!this.canvas) throw new Error("Canvas实例是必需的");
+    if (!this.layerManager) throw new Error("LayerManager实例是必需的");
+    if (!this.imageUrl) throw new Error("图像URL是必需的");
+    if (!this.layerId) throw new Error("图层ID是必需的");
+
+    // 验证URL格式
+    try {
+      new URL(this.imageUrl);
+    } catch {
+      throw new Error("无效的图像URL格式");
+    }
+  }
+
+  findTargetLayer() {
+    const layers = this.layerManager.layers?.value || [];
+    return layers.find((layer) => layer.id === this.layerId);
+  }
+
+  validateLayerEditability() {
+    if (this.targetLayer.locked) {
+      throw new Error("目标图层已锁定，无法添加对象");
+    }
+
+    if (!this.targetLayer.visible) {
+      console.warn("目标图层不可见，添加的对象可能不会显示");
+    }
+  }
+
+  async loadImageWithRetry() {
+    for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
+      try {
+        return await this.loadImage();
+      } catch (error) {
+        this.retryCount = attempt;
+
+        if (attempt === this.maxRetries) {
+          throw new Error(
+            `图像加载失败，已重试${this.maxRetries}次: ${error.message}`
+          );
+        }
+
+        // 指数退避重试
+        const delay = Math.pow(2, attempt) * 1000;
+        await new Promise((resolve) => setTimeout(resolve, delay));
+
+        console.warn(
+          `图像加载重试 ${attempt + 1}/${this.maxRetries}:`,
+          error.message
+        );
+      }
+    }
+  }
+
+  loadImage() {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(
+          new Error(`图像加载超时 (${this.timeoutMs}ms): ${this.imageUrl}`)
+        );
+      }, this.timeoutMs);
+
+      fabric.Image.fromURL(
+        this.imageUrl,
+        (img) => {
+          clearTimeout(timeout);
+
+          if (!img || !img.getElement()) {
+            reject(new Error("图像加载失败或无效"));
+            return;
+          }
+
+          resolve(img);
+        },
+        {
+          crossOrigin: "anonymous",
+        }
+      );
+    });
+  }
+
+  async addImageToLayer(newImage) {
+    // 生成唯一ID
+    const objectId = generateId();
+
+    // 设置图像属性
+    newImage.set({
+      id: objectId,
+      layerId: this.layerId,
+      layerName: this.targetLayer.name,
+      left: this.position.x,
+      top: this.position.y,
+      scaleX: this.scale.x,
+      scaleY: this.scale.y,
+      selectable: true,
+      evented: true,
+    });
+
+    // 添加到画布
+    this.canvas.add(newImage);
+
+    // 设置层级
+    if (this.zIndex !== null) {
+      this.setObjectZIndex(newImage, this.zIndex);
+    }
+
+    newImage.setCoords();
+
+    // 保存引用用于回滚
+    this.addedObject = newImage;
+
+    // 添加到图层管理器
+    this.layerManager.addObjectToLayer(newImage, this.layerId);
+
+    // 重新渲染画布
+    this.canvas.renderAll();
+  }
+
+  setObjectZIndex(object, zIndex) {
+    if (zIndex === "top") {
+      object.bringToFront();
+    } else if (zIndex === "bottom") {
+      object.sendToBack();
+    } else if (typeof zIndex === "number") {
+      object.moveTo(zIndex);
+    }
+  }
+
+  emitEvent(eventName, data) {
+    if (this.canvas && this.canvas.fire) {
+      this.canvas.fire(eventName, data);
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      imageUrl: this.imageUrl,
+      position: this.position,
+      scale: this.scale,
+      isExecuted: this.isExecuted,
+      retryCount: this.retryCount,
+      addedObjectId: this.addedObject?.id,
+    };
+  }
+}
+
+/**
+ * 删除子图层命令
+ */
+export class RemoveChildLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "删除子图层",
+      saveState: true,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.parentId = options.parentId;
+    this.activeLayerId = options.activeLayerId;
+    this.layerManager = options.layerManager;
+
+    // 查找父图层和子图层
+    const { parent } = findLayerRecursively(this.layers.value, this.layerId);
+    this.parentLayer = parent;
+
+    this.childIndex =
+      this.parentLayer?.children?.findIndex(
+        (child) => child.id === this.layerId
+      ) ?? -1;
+    this.removedChild = this.parentLayer?.children?.[this.childIndex];
+    this.isActiveLayer = this.layerId === this.activeLayerId.value;
+  }
+
+  async execute() {
+    if (!this.parentLayer || this.childIndex === -1 || !this.removedChild) {
+      throw new Error("找不到要删除的子图层");
+    }
+
+    // 从画布中移除子图层中的所有对象
+    if (
+      this.removedChild.fabricObjects &&
+      this.removedChild.fabricObjects.length > 0
+    ) {
+      this.removedChild.fabricObjects.forEach((obj) => {
+        if (this.canvas.getObjects().includes(obj)) {
+          this.canvas.remove(obj);
+        }
+      });
+    }
+
+    // 从父图层的children中删除
+    this.parentLayer.children.splice(this.childIndex, 1);
+
+    // 如果删除的是当前活动图层，需要更新活动图层
+    if (this.isActiveLayer) {
+      // 设置父图层为活动图层，或者选择另一个子图层
+      if (this.parentLayer.children.length > 0) {
+        this.activeLayerId.value = this.parentLayer.children[0].id;
+      } else {
+        this.activeLayerId.value =
+          this.layers.value.find(
+            (layer) => !layer.isBackground || !layer.isFixed
+          )?.[0]?.id || null;
+      }
+    }
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity();
+
+    return true;
+  }
+
+  async undo() {
+    if (!this.parentLayer || this.childIndex === -1 || !this.removedChild)
+      return;
+
+    // 恢复子图层到原位置
+    this.parentLayer.children.splice(this.childIndex, 0, this.removedChild);
+
+    // 恢复子图层中的所有对象到画布
+    if (
+      this.removedChild.fabricObjects &&
+      this.removedChild.fabricObjects.length > 0
+    ) {
+      this.removedChild.fabricObjects.forEach((obj) => {
+        this.canvas.add(obj);
+      });
+    }
+
+    // 如果是原活动图层，恢复活动图层
+    if (this.isActiveLayer) {
+      this.activeLayerId.value = this.layerId;
+    }
+
+    // 重新渲染画布
+    await this.layerManager?.updateLayersObjectsInteractivity();
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerName: this.removedChild?.name || "未知子图层",
+      layerId: this.layerId,
+      parentId: this.parentId,
+    };
+  }
+}
+
+/**
+ * 重命名子图层命令
+ */
+export class RenameChildLayerCommand extends Command {
+  constructor(options) {
+    super({
+      name: "重命名子图层",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.parentId = options.parentId;
+    this.newName = options.newName;
+
+    // 查找父图层和子图层
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+    this.childLayer = layer;
+
+    this.oldName = this.childLayer ? this.childLayer.name : null;
+  }
+
+  async execute() {
+    if (!this.childLayer) {
+      throw new Error("找不到要重命名的子图层");
+    }
+
+    // 更新子图层名称
+    this.childLayer.name = this.newName;
+
+    // 更新画布上对象的图层名称
+    if (this.canvas && this.childLayer.fabricObjects) {
+      this.childLayer.fabricObjects.forEach((obj) => {
+        if (obj.layerName !== undefined) {
+          obj.layerName = this.newName;
+        }
+      });
+    }
+
+    return true;
+  }
+
+  async undo() {
+    if (this.childLayer && this.oldName) {
+      this.childLayer.name = this.oldName;
+
+      // 恢复画布上对象的图层名称
+      if (this.canvas && this.childLayer.fabricObjects) {
+        this.childLayer.fabricObjects.forEach((obj) => {
+          if (obj.layerName !== undefined) {
+            obj.layerName = this.oldName;
+          }
+        });
+      }
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      parentId: this.parentId,
+      oldName: this.oldName,
+      newName: this.newName,
+    };
+  }
+}
+
+/**
+ * 子图层锁定/解锁命令
+ */
+export class ChildLayerLockCommand extends Command {
+  constructor(options) {
+    super({
+      name: "子图层锁定/解锁",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.parentId = options.parentId;
+
+    // 查找父图层和子图层
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    this.parentLayer = parent;
+    this.childLayer = layer;
+    this.oldLocked = this.childLayer ? this.childLayer.locked : null;
+  }
+
+  async execute() {
+    if (!this.childLayer) {
+      throw new Error("找不到要锁定/解锁的子图层");
+    }
+
+    // 切换锁定状态
+    this.childLayer.locked = !this.oldLocked;
+
+    // 更新画布上对象的可选择状态
+    await this.layerManager?.updateLayersObjectsInteractivity();
+
+    return true;
+  }
+
+  async undo() {
+    if (this.childLayer) {
+      // 恢复锁定状态
+      this.childLayer.locked = this.oldLocked;
+
+      // 更新画布上对象的可选择状态
+      await this.layerManager?.updateLayersObjectsInteractivity();
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerName: this.childLayer?.name || "未知子图层",
+      layerId: this.layerId,
+      parentId: this.parentId,
+      newLocked: this.childLayer?.locked,
+      oldLocked: this.oldLocked,
+    };
+  }
+}
+
+/**
+ * 切换子图层可见性命令
+ */
+export class ToggleChildLayerVisibilityCommand extends Command {
+  constructor(options) {
+    super({
+      name: "切换子图层可见性",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.parentId = options.parentId;
+
+    // 查找父图层和子图层
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    this.parentLayer = parent;
+    this.childLayer = layer;
+
+    this.oldVisibility = this.childLayer ? this.childLayer.visible : null;
+  }
+
+  async execute() {
+    if (!this.childLayer) {
+      throw new Error("找不到要切换可见性的子图层");
+    }
+
+    // 切换可见性
+    this.childLayer.visible = !this.oldVisibility;
+
+    // 更新画布上对象的可选择状态
+    await this.layerManager?.updateLayersObjectsInteractivity();
+    return true;
+  }
+
+  async undo() {
+    if (this.childLayer) {
+      this.childLayer.visible = this.oldVisibility;
+
+      // 更新画布上对象的可选择状态
+      await this.layerManager?.updateLayersObjectsInteractivity();
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerName: this.childLayer?.name || "未知子图层",
+      layerId: this.layerId,
+      parentId: this.parentId,
+      newVisibility: this.childLayer?.visible,
     };
   }
 }
diff --git a/src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js b/src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js
index 5c97d784..1dca9e68 100644
--- a/src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js
@@ -1,4 +1,5 @@
 import { Command, FunctionCommand } from "./Command";
+import { getLiquifyReferenceManager } from "../managers/LiquifyReferenceManager";
 
 /**
  * 液化命令基类
@@ -192,81 +193,6 @@ export class LiquifyCommand extends Command {
   }
 }
 
-/**
- * 图层栅格化命令
- * 用于将复杂图层栅格化为单一图像，以便进行液化操作
- */
-export class RasterizeForLiquifyCommand extends Command {
-  /**
-   * 创建栅格化命令
-   * @param {Object} options 配置选项
-   * @param {Object} options.canvas Fabric.js画布实例
-   * @param {Object} options.layerManager 图层管理器实例
-   * @param {String} options.layerId 需要栅格化的图层ID
-   */
-  constructor(options) {
-    super({
-      name: options.name || "栅格化图层",
-      description: options.description || "将图层栅格化为单一图像以便液化操作",
-    });
-
-    this.canvas = options.canvas;
-    this.layerManager = options.layerManager;
-    this.layerId = options.layerId;
-    this.originalLayer = null;
-    this.rasterizedImageObj = null;
-  }
-
-  /**
-   * 执行栅格化操作
-   * @returns {Promise<Object>} 栅格化后的图像对象
-   */
-  async execute() {
-    if (!this.canvas || !this.layerManager || !this.layerId) {
-      throw new Error("栅格化命令缺少必要参数");
-    }
-
-    // 保存原始图层信息
-    this.originalLayer = this.layerManager.getLayerById(this.layerId);
-    if (!this.originalLayer) {
-      throw new Error(`图层ID不存在: ${this.layerId}`);
-    }
-
-    // 栅格化图层
-    const rasterizedImage = await this.layerManager.rasterizeLayer(
-      this.layerId
-    );
-    if (!rasterizedImage) {
-      throw new Error("栅格化图层失败");
-    }
-
-    this.rasterizedImageObj = rasterizedImage;
-    return rasterizedImage;
-  }
-
-  /**
-   * 撤销栅格化操作
-   * 注意：完整撤销栅格化是复杂的，这里提供近似还原
-   * @returns {Promise<boolean>} 撤销结果
-   */
-  async undo() {
-    if (!this.canvas || !this.layerManager || !this.originalLayer) {
-      throw new Error("无法撤销：缺少必要的状态信息");
-    }
-
-    // 恢复图层为原始状态是复杂的，这里可能需要与LayerManager协作
-    // 这个实现可能需要根据实际的LayerManager功能来调整
-    const restored = await this.layerManager.restoreLayerFromBackup(
-      this.layerId
-    );
-    if (!restored) {
-      console.warn("无法完全还原栅格化前的图层状态");
-    }
-
-    return true;
-  }
-}
-
 /**
  * 液化工具初始化命令
  * 用于初始化液化工具的状态，不执行实际操作
@@ -550,6 +476,405 @@ export class LiquifyResetCommand extends LiquifyCommand {
   }
 }
 
+/**
+ * 液化状态命令 - 最优化版本
+ * 使用引用管理器避免对象引用丢失，支持高性能的状态管理
+ */
+export class LiquifyStateCommand extends Command {
+  /**
+   * 创建液化状态命令
+   * @param {Object} options 配置选项
+   * @param {Object} options.canvas Fabric.js画布实例
+   * @param {Object} options.layerManager 图层管理器实例
+   * @param {Object} options.targetObject 目标对象（保持引用）
+   * @param {String} options.targetLayerId 目标图层ID
+   * @param {ImageData} options.initialImageData 初始图像数据
+   * @param {ImageData} options.finalImageData 最终图像数据
+   */
+  constructor(options) {
+    super({
+      name: options.name || "液化操作",
+      description: options.description || "液化变形操作的状态记录",
+    });
+
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager;
+    this.targetObject = options.targetObject;
+    this.targetLayerId = options.targetLayerId;
+    this.targetObjectId = options.targetObjectId;
+
+    // 获取引用管理器实例
+    this.refManager = getLiquifyReferenceManager();
+
+    // 注册对象到引用管理器
+    this.objectRefId = this.refManager.registerObject(
+      this.targetObject,
+      this.targetObjectId || `liquify_${Date.now()}`
+    );
+
+    // 保存状态快照ID
+    this.initialSnapshotId = null;
+    this.finalSnapshotId = null;
+
+    // 设置图像数据
+    this.initialImageData = options.initialImageData;
+    this.finalImageData = options.finalImageData;
+
+    this.currentState = "initial";
+
+    // 创建初始快照
+    if (this.initialImageData) {
+      this._createInitialSnapshot();
+    }
+  }
+
+  /**
+   * 执行命令 - 应用最终状态
+   */
+  async execute() {
+    if (!this.finalImageData) {
+      throw new Error("缺少最终状态数据");
+    }
+
+    // 确保有最终状态快照
+    if (!this.finalSnapshotId) {
+      await this._createFinalSnapshot();
+    }
+
+    // 通过引用管理器更新图像数据
+    await this.refManager.updateObjectImageData(
+      this.objectRefId,
+      this.finalImageData
+    );
+
+    this.currentState = "final";
+    this.canvas.renderAll();
+
+    console.log("✅ 液化命令执行完成，应用最终状态");
+    return true;
+  }
+
+  /**
+   * 撤销命令 - 恢复初始状态
+   */
+  async undo() {
+    if (!this.initialImageData || !this.initialSnapshotId) {
+      throw new Error("缺少初始状态数据或快照");
+    }
+
+    // 通过引用管理器恢复到初始快照
+    await this.refManager.restoreFromSnapshot(
+      this.objectRefId,
+      this.initialSnapshotId
+    );
+
+    this.currentState = "initial";
+    this.canvas.renderAll();
+
+    console.log("🔄 液化命令撤销完成，恢复初始状态");
+    return true;
+  }
+
+  /**
+   * 重做命令 - 重新应用最终状态
+   */
+  async redo() {
+    return this.execute();
+  }
+
+  /**
+   * 设置最终状态的图像数据
+   * @param {ImageData} finalImageData 最终状态的图像数据
+   */
+  setFinalImageData(finalImageData) {
+    this.finalImageData = finalImageData;
+    this.finalSnapshotId = null; // 重置快照ID，下次执行时重新创建
+  }
+
+  /**
+   * 获取当前状态标记
+   * @returns {String} 'initial' 或 'final'
+   */
+  getCurrentState() {
+    return this.currentState;
+  }
+
+  /**
+   * 检查命令是否有效
+   * @returns {Boolean} 是否有效
+   */
+  isValid() {
+    const targetObject = this.refManager.getObjectRef(this.objectRefId);
+    return !!(targetObject && this.initialImageData && this.finalImageData);
+  }
+
+  /**
+   * 获取目标对象的当前引用
+   * @returns {Object|null} Fabric对象
+   */
+  getTargetObject() {
+    return this.refManager.getObjectRef(this.objectRefId);
+  }
+
+  /**
+   * 清理资源
+   */
+  dispose() {
+    if (this.objectRefId) {
+      // 清理快照
+      if (this.initialSnapshotId) {
+        this.refManager.stateSnapshots.delete(this.initialSnapshotId);
+      }
+      if (this.finalSnapshotId) {
+        this.refManager.stateSnapshots.delete(this.finalSnapshotId);
+      }
+
+      // 注意：不要清理对象引用，因为可能有其他命令在使用
+      console.log(`🗑️ 液化状态命令资源已清理: ${this.objectRefId}`);
+    }
+  }
+
+  /**
+   * 获取内存使用统计
+   * @returns {Object} 统计信息
+   */
+  getMemoryStats() {
+    const refManagerStats = this.refManager.getMemoryStats();
+    const commandMemory = this._calculateCommandMemory();
+
+    return {
+      ...refManagerStats,
+      commandMemory,
+      totalCommandMemory: commandMemory,
+    };
+  }
+
+  // 私有方法
+
+  /**
+   * 创建初始状态快照
+   * @private
+   */
+  async _createInitialSnapshot() {
+    if (!this.initialImageData) return;
+
+    this.initialSnapshotId = `${this.objectRefId}_initial_${Date.now()}`;
+
+    // 手动创建初始快照，包含图像数据
+    const fabricObject = this.refManager.getObjectRef(this.objectRefId);
+    if (fabricObject) {
+      const snapshot = {
+        timestamp: Date.now(),
+        properties: this.refManager._captureObjectState(fabricObject),
+        imageData: this.initialImageData,
+        eventListeners:
+          this.refManager.eventListeners.get(this.objectRefId) || {},
+      };
+
+      this.refManager.stateSnapshots.set(this.initialSnapshotId, snapshot);
+      console.log(`📸 初始状态快照已创建: ${this.initialSnapshotId}`);
+    }
+  }
+
+  /**
+   * 创建最终状态快照
+   * @private
+   */
+  async _createFinalSnapshot() {
+    if (!this.finalImageData) return;
+
+    this.finalSnapshotId = `${this.objectRefId}_final_${Date.now()}`;
+
+    // 手动创建最终快照，包含图像数据
+    const fabricObject = this.refManager.getObjectRef(this.objectRefId);
+    if (fabricObject) {
+      const snapshot = {
+        timestamp: Date.now(),
+        properties: this.refManager._captureObjectState(fabricObject),
+        imageData: this.finalImageData,
+        eventListeners:
+          this.refManager.eventListeners.get(this.objectRefId) || {},
+      };
+
+      this.refManager.stateSnapshots.set(this.finalSnapshotId, snapshot);
+      console.log(`📸 最终状态快照已创建: ${this.finalSnapshotId}`);
+    }
+  }
+
+  /**
+   * 计算命令本身的内存使用量
+   * @returns {Number} 内存使用量（字节）
+   * @private
+   */
+  _calculateCommandMemory() {
+    let bytes = 0;
+
+    // 计算ImageData内存使用
+    if (this.initialImageData) {
+      bytes += this.initialImageData.width * this.initialImageData.height * 4;
+    }
+    if (this.finalImageData) {
+      bytes += this.finalImageData.width * this.finalImageData.height * 4;
+    }
+
+    return bytes;
+  }
+}
+
+/**
+ * 批量液化状态命令 - 用于处理多个对象的液化操作
+ */
+export class BatchLiquifyStateCommand extends Command {
+  /**
+   * 创建批量液化状态命令
+   * @param {Object} options 配置选项
+   * @param {Array} options.commands 液化状态命令列表
+   * @param {Object} options.canvas Fabric.js画布实例
+   */
+  constructor(options) {
+    super({
+      name: options.name || "批量液化操作",
+      description:
+        options.description || `批量液化${options.commands?.length || 0}个对象`,
+    });
+
+    this.commands = options.commands || [];
+    this.canvas = options.canvas;
+    this.refManager = getLiquifyReferenceManager();
+  }
+
+  /**
+   * 添加液化状态命令
+   * @param {LiquifyStateCommand} command 液化状态命令
+   */
+  addCommand(command) {
+    this.commands.push(command);
+  }
+
+  /**
+   * 执行批量操作
+   */
+  async execute() {
+    const results = [];
+    const updates = [];
+
+    // 准备批量更新数据
+    for (const command of this.commands) {
+      if (command.finalImageData && command.objectRefId) {
+        updates.push({
+          refId: command.objectRefId,
+          imageData: command.finalImageData,
+        });
+      }
+    }
+
+    // 执行批量更新
+    if (updates.length > 0) {
+      const updateResults = await this.refManager.batchUpdate(updates);
+      results.push(...updateResults);
+    }
+
+    // 更新命令状态
+    this.commands.forEach((command) => {
+      command.currentState = "final";
+    });
+
+    this.canvas.renderAll();
+    return results;
+  }
+
+  /**
+   * 撤销批量操作
+   */
+  async undo() {
+    // 逆序撤销
+    for (let i = this.commands.length - 1; i >= 0; i--) {
+      await this.commands[i].undo();
+    }
+
+    this.canvas.renderAll();
+    return true;
+  }
+
+  /**
+   * 重做批量操作
+   */
+  async redo() {
+    return this.execute();
+  }
+
+  /**
+   * 检查批量命令是否有效
+   * @returns {Boolean} 是否有效
+   */
+  isValid() {
+    return (
+      this.commands.length > 0 && this.commands.every((cmd) => cmd.isValid())
+    );
+  }
+
+  /**
+   * 清理所有子命令的资源
+   */
+  dispose() {
+    this.commands.forEach((command) => {
+      if (command.dispose) {
+        command.dispose();
+      }
+    });
+  }
+}
+
+/**
+ * 序列化fabric对象为JSON
+ * @param {Object} fabricObject fabric对象
+ * @returns {Object} 序列化后的对象状态
+ */
+export function serializeFabricObject(fabricObject) {
+  if (!fabricObject) {
+    throw new Error("无法序列化：对象为空");
+  }
+
+  try {
+    // 使用fabric.js的toObject方法序列化
+    const serializedObject = fabricObject.toObject([
+      "id",
+      "objectId",
+      "uid",
+      "layerId",
+      "name",
+      "type",
+    ]);
+
+    // 记录额外的元数据
+    const metadata = {
+      timestamp: Date.now(),
+      objectType: fabricObject.type,
+      objectId: fabricObject.id || fabricObject.objectId || fabricObject.uid,
+      layerId: fabricObject.layerId,
+      bounds: fabricObject.getBoundingRect(),
+    };
+
+    return {
+      serializedObject,
+      metadata,
+      version: "1.0",
+    };
+  } catch (error) {
+    console.error("序列化fabric对象失败:", error);
+    throw error;
+  }
+}
+
+/**
+ * 辅助函数：创建液化状态命令
+ * @param {Object} options 配置选项
+ * @returns {LiquifyStateCommand} 状态命令实例
+ */
+export function createLiquifyStateCommand(options) {
+  return new LiquifyStateCommand(options);
+}
+
 /**
  * 辅助函数：创建液化重置命令
  * @param {Object} options 配置选项
diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
index 916825f4..0859013e 100644
--- a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
@@ -1,6 +1,15 @@
-import { OperationType } from "../utils/layerHelper";
+import { findLayerRecursively, OperationType } from "../utils/layerHelper";
 import { Command } from "./Command";
-import { generateId } from "../utils/helper";
+import {
+  generateId,
+  optimizeCanvasRendering,
+  findObjectById,
+  objectIsInCanvas,
+  removeCanvasObjectByObject,
+  getObjectZIndex,
+  insertObjectAtZIndex,
+} from "../utils/helper";
+import { fabric } from "fabric-with-all";
 
 /**
  * 设置活动图层命令
@@ -15,6 +24,7 @@ export class SetActiveLayerCommand extends Command {
     this.canvas = options.canvas;
     this.activeLayerId = options.activeLayerId;
     this.layerId = options.layerId;
+    this.parentId = options.parentId;
     this.oldActiveLayerId = this.activeLayerId.value;
     this.layerManager = options.layerManager;
     this.oldActiveObjects = [];
@@ -23,9 +33,12 @@ export class SetActiveLayerCommand extends Command {
   }
 
   execute() {
-    this.newLayer = this.layers.value.find(
-      (layer) => layer.id === this.layerId
+    const { layer } = findLayerRecursively(
+      this.layers.value,
+      this.layerId,
+      this.parentId
     );
+    this.newLayer = layer;
 
     if (!this.newLayer) {
       console.error(`图层 ${this.layerId} 不存在`);
@@ -136,21 +149,46 @@ export class AddObjectToLayerCommand extends Command {
     this.layers = options.layers;
     this.layerId = options.layerId;
     this.fabricObject = options.fabricObject;
+    this.layerManager = options.layerManager;
 
     // 保存对象原始状态和ID
     this.objectId =
       this.fabricObject.id ||
       `obj_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    this.fabricObject.set({
+      id: this.objectId,
+      layerId: options.layerId,
+      layerName: options.layerName || "",
+    });
+
+    // 保存完整的对象状态，包括位置和变换信息
     this.originalObjectState = this.fabricObject.toObject([
       "id",
       "layerId",
       "layerName",
     ]);
+
+    // // 新增：保存详细的位置和变换信息，用于重做时恢复
+    // this.originalPosition = {
+    //   left: this.originalObjectState.left || 0,
+    //   top: this.originalObjectState.top || 0,
+    //   scaleX: this.fabricObject.scaleX || 1,
+    //   scaleY: this.fabricObject.scaleY || 1,
+    //   angle: this.fabricObject.angle || 0,
+    //   flipX: this.fabricObject.flipX || false,
+    //   flipY: this.fabricObject.flipY || false,
+    //   opacity: this.fabricObject.opacity || 1,
+    //   originX: this.fabricObject.originX || "left",
+    //   originY: this.fabricObject.originY || "top",
+    // };
+
+    // 记录执行状态，用于区分首次执行和重做
+    this.isFirstExecution = true;
   }
 
-  execute() {
+  async execute() {
     // 查找目标图层
-    const layer = this.layers.value.find((l) => l.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
 
     if (!layer) {
       console.error(`图层 ${this.layerId} 不存在`);
@@ -163,54 +201,124 @@ export class AddObjectToLayerCommand extends Command {
       return null;
     }
 
-    // 为对象生成唯一ID
-    this.fabricObject.id = this.objectId;
+    console.log(this.originalObjectState);
 
-    // 设置对象与图层的关联
-    this.fabricObject.layerId = this.layerId;
-    this.fabricObject.layerName = layer.name;
+    // 优化渲染  -  统一批处理  支持异步回调
+    await optimizeCanvasRendering(this.canvas, async () => {
+      // const positionToUse = this.isFirstExecution
+      //   ? {
+      //       left: this.fabricObject.left || 0,
+      //       top: this.fabricObject.top || 0,
+      //       scaleX: this.fabricObject.scaleX || 1,
+      //       scaleY: this.fabricObject.scaleY || 1,
+      //       angle: this.fabricObject.angle || 0,
+      //       flipX: this.fabricObject.flipX || false,
+      //       flipY: this.fabricObject.flipY || false,
+      //       opacity: this.fabricObject.opacity || 1,
+      //       originX: this.fabricObject.originX || "left",
+      //       originY: this.fabricObject.originY || "top",
+      //     }
+      //   : this.originalPosition;
 
-    // 设置对象可操作可选择
-    this.fabricObject.selectable = true;
-    this.fabricObject.evented = true;
+      // if (!this.isFirstExecution) {
+      //   fabric.util.enlivenObjects([this.originalObjectState], (objects) => {
+      //     this.fabricObject = objects[0];
+      //     // 将对象添加到画布
+      //     this.fabricObject.set({
+      //       id: this.objectId, // 确保对象有唯一ID
+      //       layerId: this.layerId, // 设置图层ID
+      //       layerName: layer.name, // 设置图层名称
+      //       isBackground: layer.isBackground || false, // 是否为背景层
+      //       isFixed: layer.isFixed || false, // 是否为固定层
+      //       isLocked: layer.locked || false, // 是否锁定
+      //       isVisible: layer.visible !== false, // 是否可见
+      //       eraser: layer.eraser || false, // 是否为橡皮擦
+      //       type: this.fabricObject.type || "object", // 对象类型
+      //       selectable: true, // 设置对象可选择
+      //       evented: true, // 设置对象可事件
+      //     });
+      //   });
+      // } else {
+      //   // 将对象添加到画布
+      //   this.fabricObject.set({
+      //     ...positionToUse,
+      //     id: this.objectId, // 确保对象有唯一ID
+      //     layerId: this.layerId, // 设置图层ID
+      //     layerName: layer.name, // 设置图层名称
+      //     isBackground: layer.isBackground || false, // 是否为背景层
+      //     isFixed: layer.isFixed || false, // 是否为固定层
+      //     isLocked: layer.locked || false, // 是否锁定
+      //     isVisible: layer.visible !== false, // 是否可见
+      //     eraser: layer.eraser || false, // 是否为橡皮擦
+      //     type: this.fabricObject.type || "object", // 对象类型
+      //     selectable: true, // 设置对象可选择
+      //     evented: true, // 设置对象可事件
+      //   });
+      // }
 
-    // 将对象添加到画布
-    this.canvas.add(this.fabricObject);
-
-    // 将对象添加到图层的fabricObjects数组
-    layer.fabricObjects = layer.fabricObjects || [];
-    layer.fabricObjects.push(this.fabricObject);
-
-    this.canvas.discardActiveObject();
-
-    // 确保对象确实存在于画布上才激活
-    const canvasObjects = this.canvas.getObjects();
-    const validObjects = layer.fabricObjects.filter(
-      (obj) => obj && canvasObjects.includes(obj)
-    );
-
-    if (validObjects.length > 0) {
-      if (validObjects.length === 1) {
-        // 只有一个对象时直接设置
-        this.canvas.setActiveObject(validObjects[0]);
-      } else {
-        // 多个对象时创建活动选择组
-        const activeSelection = new fabric.ActiveSelection(validObjects, {
-          canvas: this.canvas,
+      fabric.util.enlivenObjects([this.originalObjectState], (objects) => {
+        this.fabricObject = objects[0];
+        // 将对象添加到画布
+        this.fabricObject.set({
+          id: this.objectId, // 确保对象有唯一ID
+          layerId: this.layerId, // 设置图层ID
+          layerName: layer.name, // 设置图层名称
+          isBackground: layer.isBackground || false, // 是否为背景层
+          isFixed: layer.isFixed || false, // 是否为固定层
+          isLocked: layer.locked || false, // 是否锁定
+          isVisible: layer.visible !== false, // 是否可见
+          eraser: layer.eraser || false, // 是否为橡皮擦
+          type: this.fabricObject.type || "object", // 对象类型
+          selectable: true, // 设置对象可选择
+          evented: true, // 设置对象可事件
         });
-        this.canvas.setActiveObject(activeSelection);
-      }
-    }
+      });
 
-    // 更新画布
-    this.canvas.renderAll();
+      this.canvas.add(this.fabricObject);
+      // 将对象添加到图层的fabricObjects数组
+      layer.fabricObjects = layer.fabricObjects || [];
+      layer.fabricObjects.push(
+        this.fabricObject?.toObject?.(["id", "layerId", "layerName"]) ||
+          this.fabricObject
+      );
+
+      await this.layerManager?.updateLayersObjectsInteractivity?.(false);
+      // 标记为非首次执行
+      this.isFirstExecution = false;
+      console.log(
+        `✅ 对象已添加到图层 "${layer.name}"，位置: (${this.fabricObject.left}, ${this.fabricObject.top})`
+      );
+    });
+
+    // 如果是重做，使用保存的原始位置
+
+    // this.canvas.discardActiveObject();
+
+    // // 确保对象确实存在于画布上才激活
+    // const canvasObjects = this.canvas.getObjects();
+    // const validObjects = layer.fabricObjects.filter(
+    //   (obj) => obj && canvasObjects.includes(obj)
+    // );
+
+    // if (validObjects.length > 0) {
+    //   if (validObjects.length === 1) {
+    //     // 只有一个对象时直接设置
+    //     this.canvas.setActiveObject(validObjects[0]);
+    //   } else {
+    //     // 多个对象时创建活动选择组
+    //     const activeSelection = new fabric.ActiveSelection(validObjects, {
+    //       canvas: this.canvas,
+    //     });
+    //     this.canvas.setActiveObject(activeSelection);
+    //   }
+    // }
 
     return this.fabricObject;
   }
 
-  undo() {
+  async undo() {
     // 查找图层
-    const layer = this.layers.value.find((l) => l.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
 
     if (!layer) {
       return false;
@@ -222,17 +330,22 @@ export class AddObjectToLayerCommand extends Command {
         (obj) => obj.id !== this.objectId
       );
     }
-    // 从画布移除对象
-    const object = this.canvas
-      .getObjects()
-      .find((obj) => obj.id === this.objectId);
-    if (object) {
-      // 先丢弃活动对象，避免控制点渲染错误
-      this.canvas.discardActiveObject();
-      this.canvas.remove(object);
-      // 更新画布
-      this.canvas.renderAll();
-    }
+    // 优化渲染  -  统一批处理  支持异步回调
+    optimizeCanvasRendering(this.canvas, async () => {
+      // 从画布移除对象
+      const object = this.canvas
+        .getObjects()
+        .find((obj) => obj.id === this.objectId);
+      if (object) {
+        // 先丢弃活动对象，避免控制点渲染错误
+        this.canvas.discardActiveObject();
+        this.canvas.remove(object);
+      }
+
+      this.layerManager?.updateLayersObjectsInteractivity?.(false);
+      // 重置为首次执行状态，以便重做时能正确恢复位置
+      this.isFirstExecution = false; // 保持为false，因为已经执行过一次了
+    });
 
     return true;
   }
@@ -242,6 +355,8 @@ export class AddObjectToLayerCommand extends Command {
       name: this.name,
       layerId: this.layerId,
       objectId: this.objectId,
+      isFirstExecution: this.isFirstExecution,
+      originalPosition: this.originalPosition,
     };
   }
 }
@@ -283,7 +398,7 @@ export class RemoveObjectFromLayerCommand extends Command {
     }
 
     // 查找图层
-    const layer = this.layers.value.find((l) => l.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
     if (!layer) {
       console.error(`图层 ${this.layerId} 不存在`);
       return false;
@@ -311,7 +426,7 @@ export class RemoveObjectFromLayerCommand extends Command {
     }
 
     // 查找图层
-    const layer = this.layers.value.find((l) => l.id === this.layerId);
+    const { layer } = findLayerRecursively(this.layers.value, this.layerId);
     if (!layer) {
       return false;
     }
@@ -353,15 +468,17 @@ export class ChangeFixedImageCommand extends Command {
     this.canvas = options.canvas;
     this.layerManager = options.layerManager;
     this.imageUrl = options.imageUrl;
-    this.targetLayerType = options.targetLayerType || "background"; // 'background', 'fixed', etc.
+    this.targetLayerType = options.targetLayerType || "fixed"; // 'background', 'fixed', etc.
     this.position = options.position || { x: 0, y: 0 };
     this.scale = options.scale || { x: 1, y: 1 };
-    this.preserveTransform = options.preserveTransform !== false; // 默认保留变换
+    this.preserveTransform = options.preserveTransform ?? false; // 默认不保留变换
 
     // 用于回滚的状态
     this.previousImage = null;
     this.previousTransform = null;
+    this.previousObjectId = null; // 保存之前对象的ID
     this.targetLayer = null;
+    this.newObjectId = null; // 保存新对象的ID
     this.isExecuted = false;
 
     // 错误处理
@@ -372,15 +489,13 @@ export class ChangeFixedImageCommand extends Command {
 
   async execute() {
     try {
-      this.validateInputs();
-
       // 查找目标图层
       this.targetLayer = this.findTargetLayer();
       if (!this.targetLayer) {
         throw new Error(`找不到目标图层类型: ${this.targetLayerType}`);
       }
 
-      // 保存当前状态用于回滚
+      // 保存当前状态
       await this.saveCurrentState();
 
       // 加载新图像
@@ -391,13 +506,6 @@ export class ChangeFixedImageCommand extends Command {
 
       this.isExecuted = true;
 
-      // 触发成功事件
-      this.emitEvent("image:changed", {
-        layerId: this.targetLayer.id,
-        newImageUrl: this.imageUrl,
-        command: this,
-      });
-
       return {
         success: true,
         layerId: this.targetLayer.id,
@@ -425,22 +533,18 @@ export class ChangeFixedImageCommand extends Command {
     }
 
     try {
-      if (this.previousImage) {
-        // 恢复之前的图像
-        await this.restorePreviousImage();
-      } else {
-        // 如果没有之前的图像，移除当前图像
-        await this.removeCurrentImage();
-      }
+      await optimizeCanvasRendering(this.canvas, async () => {
+        if (this.previousImage && this.previousObjectId) {
+          // 恢复之前的图像
+          await this.restorePreviousImage();
+        } else {
+          // 如果没有之前的图像，移除当前图像
+          await this.removeCurrentImage();
+        }
+      });
 
       this.isExecuted = false;
 
-      // 触发撤销事件
-      this.emitEvent("image:reverted", {
-        layerId: this.targetLayer.id,
-        command: this,
-      });
-
       return {
         success: true,
         action: "reverted",
@@ -452,19 +556,6 @@ export class ChangeFixedImageCommand extends Command {
     }
   }
 
-  validateInputs() {
-    if (!this.canvas) throw new Error("Canvas实例是必需的");
-    if (!this.layerManager) throw new Error("LayerManager实例是必需的");
-    if (!this.imageUrl) throw new Error("图像URL是必需的");
-
-    // 验证URL格式
-    try {
-      new URL(this.imageUrl);
-    } catch {
-      throw new Error("无效的图像URL格式");
-    }
-  }
-
   findTargetLayer() {
     const layers = this.layerManager.layers?.value || [];
 
@@ -479,27 +570,48 @@ export class ChangeFixedImageCommand extends Command {
   }
 
   async saveCurrentState() {
-    if (!this.targetLayer.fabricObject) return;
+    // 通过画布查找当前图层的对象，而不是直接使用图层引用
+    const currentObjects = this.canvas
+      .getObjects()
+      .filter((obj) => obj.layerId === this.targetLayer.id);
 
-    const currentObj = this.targetLayer.fabricObject;
+    if (currentObjects.length > 0) {
+      const currentObj = currentObjects[0]; // 固定图层通常只有一个对象
 
-    // 保存当前图像URL（如果存在）
-    this.previousImage = {
-      url: currentObj.getSrc ? currentObj.getSrc() : null,
-      element: currentObj._element ? currentObj._element.cloneNode() : null,
-    };
+      // 验证对象确实在画布中
+      const canvasCheck = objectIsInCanvas(this.canvas, currentObj);
+      if (!canvasCheck.flag) {
+        console.warn("图层对象不在画布中，跳过状态保存");
+        return;
+      }
 
-    // 保存变换状态
-    this.previousTransform = {
-      left: currentObj.left,
-      top: currentObj.top,
-      scaleX: currentObj.scaleX,
-      scaleY: currentObj.scaleY,
-      angle: currentObj.angle,
-      flipX: currentObj.flipX,
-      flipY: currentObj.flipY,
-      opacity: currentObj.opacity,
-    };
+      this.previousObjectId = currentObj.id;
+
+      // 使用帮助函数获取z-index位置
+      this.previousZIndex = getObjectZIndex(this.canvas, currentObj);
+
+      // 保存当前图像URL（如果存在）
+      this.previousImage = {
+        url: currentObj.getSrc ? currentObj.getSrc() : null,
+        element: currentObj._element ? currentObj._element.cloneNode() : null,
+        objectData: currentObj.toObject(["id", "layerId", "layerName"]), // 保存完整对象数据
+        zIndex: this.previousZIndex, // 保存z-index
+      };
+
+      // 保存变换状态
+      this.previousTransform = {
+        left: currentObj.left,
+        top: currentObj.top,
+        scaleX: currentObj.scaleX,
+        scaleY: currentObj.scaleY,
+        angle: currentObj.angle,
+        flipX: currentObj.flipX,
+        flipY: currentObj.flipY,
+        opacity: currentObj.opacity,
+      };
+
+      console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`);
+    }
   }
 
   async loadImageWithRetry() {
@@ -555,104 +667,180 @@ export class ChangeFixedImageCommand extends Command {
   }
 
   async applyImageToLayer(newImage) {
-    const currentObj = this.targetLayer.fabricObject;
+    await optimizeCanvasRendering(this.canvas, async () => {
+      // 生成新对象ID
+      this.newObjectId = generateId();
 
-    // 设置基本属性
-    newImage.set({
-      id: currentObj?.id || generateId(),
-      layerId: this.targetLayer.id,
-      layerName: this.targetLayer.name,
-      isBackground: this.targetLayer.isBackground,
-      isFixed: this.targetLayer.isFixed,
-    });
-
-    // 应用位置和变换
-    if (this.preserveTransform && this.previousTransform) {
-      newImage.set(this.previousTransform);
-    } else {
+      // 设置基本属性
       newImage.set({
-        left: this.position.x,
-        top: this.position.y,
-        scaleX: this.scale.x,
-        scaleY: this.scale.y,
+        id: this.newObjectId,
+        layerId: this.targetLayer.id,
+        layerName: this.targetLayer.name,
+        isBackground: this.targetLayer.isBackground,
+        isFixed: this.targetLayer.isFixed,
       });
-    }
 
-    // 移除旧对象（如果存在）
-    if (currentObj) {
-      this.canvas.remove(currentObj);
-    }
+      // 移除旧对象（如果存在）
+      if (this.previousObjectId) {
+        const { object: oldObject } = findObjectById(
+          this.canvas,
+          this.previousObjectId
+        );
+        if (oldObject) {
+          const removeSuccess = removeCanvasObjectByObject(
+            this.canvas,
+            oldObject
+          );
+          if (!removeSuccess) {
+            console.warn("移除旧对象失败，但继续执行");
+          }
+        }
+      }
 
-    // 添加新图像
-    this.canvas.add(newImage);
-    newImage.setCoords();
+      // 应用位置和变换
+      if (this.preserveTransform && this.previousTransform) {
+        newImage.set(this.previousTransform);
+      } else {
+        newImage.set({
+          left: this.position.x || this.canvas.width / 2,
+          top: this.position.y || this.canvas.height / 2,
+          scaleX: this.scale.x || 1,
+          scaleY: this.scale.y || 1,
+          originX: "center",
+          originY: "cehnter",
+        });
+      }
 
-    // 更新图层引用
-    this.targetLayer.fabricObject = newImage;
+      // 使用帮助函数在指定z-index位置插入新图像
+      if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {
+        const insertSuccess = insertObjectAtZIndex(
+          this.canvas,
+          newImage,
+          this.previousZIndex,
+          false
+        );
+        if (insertSuccess) {
+          console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
+        } else {
+          // 如果插入失败，回退到普通添加
+          this.canvas.add(newImage);
+          console.log("z-index插入失败，新图像添加到顶层");
+        }
+      } else {
+        // 否则直接添加到顶层
+        this.canvas.add(newImage);
+        console.log("新图像添加到顶层");
+      }
 
-    // 更新图层管理器
-    this.layerManager.updateLayerObject(this.targetLayer.id, newImage);
+      newImage.setCoords();
 
-    // 重新渲染画布
-    this.canvas.renderAll();
+      // 更新图层引用
+      this.targetLayer.fabricObject = newImage;
+
+      // 更新图层管理器
+      this.layerManager.updateLayerObject(this.targetLayer.id, newImage);
+    });
   }
 
   async restorePreviousImage() {
-    if (!this.previousImage.url) return;
-
-    const restoredImage = await this.loadImageFromUrl(this.previousImage.url);
-
-    // 恢复之前的变换
-    if (this.previousTransform) {
-      restoredImage.set(this.previousTransform);
+    if (!this.previousImage?.objectData) {
+      throw new Error("没有可恢复的图像数据");
     }
 
-    // 设置图层属性
-    restoredImage.set({
-      id: this.targetLayer.fabricObject?.id || generateId(),
-      layerId: this.targetLayer.id,
-      layerName: this.targetLayer.name,
-      isBackground: this.targetLayer.isBackground,
-      isFixed: this.targetLayer.isFixed,
+    return new Promise((resolve, reject) => {
+      fabric.util.enlivenObjects(
+        [this.previousImage.objectData],
+        async (objects) => {
+          try {
+            const restoredImage = objects[0];
+
+            await optimizeCanvasRendering(this.canvas, async () => {
+              // 移除当前对象
+              if (this.newObjectId) {
+                const { object: currentObject } = findObjectById(
+                  this.canvas,
+                  this.newObjectId
+                );
+                if (currentObject) {
+                  removeCanvasObjectByObject(this.canvas, currentObject);
+                }
+              }
+
+              // 恢复之前的变换
+              if (this.previousTransform) {
+                restoredImage.set(this.previousTransform);
+              }
+
+              // 设置图层属性
+              restoredImage.set({
+                id: this.previousObjectId,
+                layerId: this.targetLayer.id,
+                layerName: this.targetLayer.name,
+                isBackground: this.targetLayer.isBackground,
+                isFixed: this.targetLayer.isFixed,
+              });
+
+              // 使用帮助函数在正确的z-index位置恢复对象
+              if (
+                this.previousZIndex !== undefined &&
+                this.previousZIndex >= 0
+              ) {
+                const insertSuccess = insertObjectAtZIndex(
+                  this.canvas,
+                  restoredImage,
+                  this.previousZIndex,
+                  false
+                );
+                if (insertSuccess) {
+                  console.log(`恢复图像到z-index位置: ${this.previousZIndex}`);
+                } else {
+                  // 如果插入失败，回退到普通添加
+                  this.canvas.add(restoredImage);
+                  console.log("z-index恢复失败，恢复图像添加到顶层");
+                }
+              } else {
+                // 如果没有保存的z-index，添加到顶层
+                this.canvas.add(restoredImage);
+                console.log("恢复图像添加到顶层");
+              }
+
+              restoredImage.setCoords();
+
+              // 更新引用
+              this.targetLayer.fabricObject = restoredImage;
+              this.layerManager.updateLayerObject(
+                this.targetLayer.id,
+                restoredImage
+              );
+            });
+
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        }
+      );
     });
-
-    // 替换当前对象
-    if (this.targetLayer.fabricObject) {
-      this.canvas.remove(this.targetLayer.fabricObject);
-    }
-
-    this.canvas.add(restoredImage);
-    restoredImage.setCoords();
-
-    // 更新引用
-    this.targetLayer.fabricObject = restoredImage;
-    this.layerManager.updateLayerObject(this.targetLayer.id, restoredImage);
-
-    this.canvas.renderAll();
   }
 
   async removeCurrentImage() {
-    if (this.targetLayer.fabricObject) {
-      this.canvas.remove(this.targetLayer.fabricObject);
-      this.targetLayer.fabricObject = null;
-      this.layerManager.updateLayerObject(this.targetLayer.id, null);
-      this.canvas.renderAll();
-    }
-  }
-
-  loadImageFromUrl(url) {
-    return new Promise((resolve, reject) => {
-      fabric.Image.fromURL(
-        url,
-        (img) => {
-          if (!img || !img.getElement()) {
-            reject(new Error("恢复图像加载失败"));
-            return;
+    await optimizeCanvasRendering(this.canvas, async () => {
+      if (this.newObjectId) {
+        const { object: currentObject } = findObjectById(
+          this.canvas,
+          this.newObjectId
+        );
+        if (currentObject) {
+          const removeSuccess = removeCanvasObjectByObject(
+            this.canvas,
+            currentObject
+          );
+          if (removeSuccess) {
+            this.targetLayer.fabricObject = null;
+            this.layerManager.updateLayerObject(this.targetLayer.id, null);
           }
-          resolve(img);
-        },
-        { crossOrigin: "anonymous" }
-      );
+        }
+      }
     });
   }
 
@@ -713,7 +901,7 @@ export class AddImageToLayerCommand extends Command {
       }
 
       // 检查图层是否可编辑
-      this.validateLayerEditability();
+      // this.validateLayerEditability();
 
       // 加载新图像
       const newImage = await this.loadImageWithRetry();
@@ -940,3 +1128,412 @@ export class AddImageToLayerCommand extends Command {
     };
   }
 }
+
+export class SelectAllLayersCommand extends Command {
+  constructor(options) {
+    super({
+      name: "设置全选图层",
+      saveState: false,
+    });
+    this.layers = options.layers;
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager || null;
+    this.activeLayerId = options.activeLayerId;
+    this.oldActiveLayerId = this.activeLayerId.value;
+    this.editorMode = options.editorMode || OperationType.SELECT;
+  }
+
+  execute() {
+    this.oldActiveObjects = this.canvas.getActiveObjects();
+
+    // 如果在选择模式下，取消所有选择
+    if (this.editorMode === OperationType.SELECT && this.canvas) {
+      this.canvas.discardActiveObject();
+
+      // 设置为新的图层下的对象为激活，但需要确保对象存在于画布上
+      const canvasObjects =
+        this.canvas.getObjects()?.filter((fItem) => {
+          const layerId = fItem.layerId;
+          if (!layerId) return false; // 忽略没有图层ID的对象
+          // 确保当前图层存在且可见
+          const currLayer = this.layers.value.find((l) => l.id === layerId);
+          return (
+            !currLayer.isBackground &&
+            !currLayer.isFixed &&
+            !currLayer.isLocked &&
+            !currLayer.isVisible
+          );
+        }) || [];
+
+      // 多个对象时创建活动选择组
+      const activeSelection = new fabric.ActiveSelection(canvasObjects, {
+        canvas: this.canvas,
+      });
+      // 设置活动选择组
+      this.canvas.setActiveObject(activeSelection);
+    }
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    // 恢复原活动图层ID
+    this.activeLayerId.value = this.oldActiveLayerId;
+
+    // 如果在选择模式下，恢复取消的所有选择
+    if (this.canvas) {
+      this.canvas?.discardActiveObject();
+
+      // 修复：确保对象存在于画布上才激活
+      if (this.oldActiveObjects && this.oldActiveObjects.length > 0) {
+        const canvasObjects = this.canvas.getObjects();
+        const validObjects = this.oldActiveObjects.filter(
+          (obj) => obj && canvasObjects.includes(obj)
+        );
+
+        if (validObjects.length > 0) {
+          if (validObjects.length > 1) {
+            // 如果有多个对象，需要创建一个活动选择组
+            const activeSelection = new fabric.ActiveSelection(validObjects, {
+              canvas: this.canvas,
+            });
+            this.canvas.setActiveObject(activeSelection);
+          } else {
+            // 只有一个对象时直接设置
+            this.canvas.setActiveObject(validObjects[0]);
+          }
+        }
+      }
+      this.canvas.renderAll();
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      oldActiveLayerId: this.oldActiveLayerId,
+    };
+  }
+}
+
+export class ClearSelectionCommand extends Command {
+  constructor(options) {
+    super({
+      name: "设置取消所有图层",
+      saveState: false,
+    });
+    this.layers = options.layers;
+    this.canvas = options.canvas;
+    this.layerManager = options.layerManager || null;
+    this.activeLayerId = options.activeLayerId;
+    this.oldActiveLayerId = this.activeLayerId.value;
+    this.editorMode = options.editorMode || OperationType.SELECT;
+  }
+
+  execute() {
+    this.oldActiveObjects = this.canvas.getActiveObjects();
+    // 如果在选择模式下，取消所有选择
+    if (this.editorMode === OperationType.SELECT && this.canvas) {
+      this.canvas.discardActiveObject();
+    }
+    this.canvas.renderAll();
+    return true;
+  }
+
+  undo() {
+    // 恢复原活动图层ID
+    this.activeLayerId.value = this.oldActiveLayerId;
+    // 如果在选择模式下，恢复取消的所有选择
+    if (this.canvas) {
+      this.canvas?.discardActiveObject();
+      // 修复：确保对象存在于画布上才激活
+      if (this.oldActiveObjects && this.oldActiveObjects.length > 0) {
+        const canvasObjects = this.canvas.getObjects();
+        const validObjects = this.oldActiveObjects.filter(
+          (obj) => obj && canvasObjects.includes(obj)
+        );
+
+        if (validObjects.length > 0) {
+          if (validObjects.length > 1) {
+            // 如果有多个对象，需要创建一个活动选择组
+            const activeSelection = new fabric.ActiveSelection(validObjects, {
+              canvas: this.canvas,
+            });
+            this.canvas.setActiveObject(activeSelection);
+          } else {
+            // 只有一个对象时直接设置
+            this.canvas.setActiveObject(validObjects[0]);
+          }
+        }
+      }
+      this.canvas.renderAll();
+    }
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      oldActiveLayerId: this.oldActiveLayerId,
+    };
+  }
+}
+
+/**
+ * 移动图层到顶部命令
+ */
+export class MoveLayerToTopCommand extends Command {
+  constructor(options) {
+    super({
+      name: "置顶图层",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.layerSort = options.layerSort;
+
+    this.parentLayer = null; // 父图层
+
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+
+    // 如果parent 有值   或者 layer 上有parentId  则视为子图层的置顶
+    if (parent?.id) {
+      // 查找子图层索引
+      this.layerIndex = parent?.children?.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+      this.parentLayer = parent;
+    } else {
+      // 查找图层索引
+      this.layerIndex = this.layers.value.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+    }
+
+    this.layer = layer;
+    this.originalIndex = this.layerIndex;
+    // 目标位置
+    this.targetIndex = 0;
+  }
+
+  async execute() {
+    if (this.layerIndex === -1 || !this.layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return false;
+    }
+
+    // 检查是否是背景层或固定层（不允许移动）
+    if (this.layer.isBackground || this.layer.isFixed) {
+      console.warn("背景层和固定层不能移动");
+      return false;
+    }
+
+    // 如果已经在顶部，无需移动
+    if (this.layerIndex === this.targetIndex) {
+      console.log("图层已在顶部位置");
+      return true;
+    }
+
+    // 执行移动
+    if (this.parentLayer) {
+      this.parentLayer?.children?.splice(this.layerIndex, 1);
+      this.parentLayer?.children?.splice(this.targetIndex, 0, this.layer);
+    } else {
+      this.layers.value.splice(this.layerIndex, 1);
+      this.layers.value.splice(this.targetIndex, 0, this.layer);
+    }
+
+    // 使用LayerSort工具重新排列画布对象（如果可用）
+    await this.layerSort?.rearrangeObjects();
+    console.log(`✅ 图层 ${this.layer.name} 已置顶`);
+    return true;
+  }
+
+  async undo() {
+    const tempOldIndex = this.layerIndex;
+    this.targetIndex = tempOldIndex;
+    this.layerIndex = this.targetIndex;
+    await this.execute();
+
+    // 执行完成恢复索引
+    this.layerIndex = tempOldIndex;
+    this.targetIndex = this.layerIndex;
+
+    console.log(`↩️ 图层 ${this.layer.name} 已恢复到原位置`);
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      layerName: this.layer?.name,
+      originalIndex: this.originalIndex,
+      targetIndex: this.targetIndex,
+    };
+  }
+}
+
+/**
+ * 移动图层到底部命令
+ */
+export class MoveLayerToBottomCommand extends Command {
+  constructor(options) {
+    super({
+      name: "置底图层",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+    this.layers = options.layers;
+    this.layerId = options.layerId;
+    this.layerSort = options.layerSort;
+
+    this.parentLayer = null; // 父图层
+
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+
+    // 如果parent 有值   或者 layer 上有parentId  则视为子图层的置顶
+    if (parent?.id) {
+      // 查找子图层索引
+      this.layerIndex = parent?.children?.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+      this.parentLayer = parent;
+    } else {
+      // 查找图层索引
+      this.layerIndex = this.layers.value.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+    }
+
+    this.layer = layer;
+    this.originalIndex = this.layerIndex;
+    // 计算目标位置（最后一个非背景、非固定图层的位置）
+    this.targetIndex = this._calculateBottomPosition();
+  }
+
+  async execute() {
+    if (this.layerIndex === -1 || !this.layer) {
+      console.error(`图层 ${this.layerId} 不存在`);
+      return false;
+    }
+
+    // 检查是否是背景层或固定层（不允许移动）
+    if (this.layer.isBackground || this.layer.isFixed) {
+      console.warn("背景层和固定层不能移动");
+      return false;
+    }
+
+    // 如果已经在底部，无需移动
+    if (this.layerIndex === this.targetIndex) {
+      console.log("图层已在底部位置");
+      return true;
+    }
+
+    // 执行移动
+    this.layers.value.splice(this.layerIndex, 1);
+    this.layers.value.splice(this.targetIndex, 0, this.layer);
+
+    // 更新画布渲染顺序
+    this.layerSort?.rearrangeObjects?.();
+
+    console.log(`✅ 图层 ${this.layer.name} 已置底`);
+    return true;
+  }
+
+  async undo() {
+    if (this.originalIndex !== -1 && this.layer) {
+      // 获取当前位置
+      const currentIndex = this.layers.value.findIndex(
+        (layer) => layer.id === this.layerId
+      );
+
+      if (currentIndex !== -1) {
+        // 移除当前位置
+        this.layers.value.splice(currentIndex, 1);
+        // 插入到原位置
+        this.layers.value.splice(this.originalIndex, 0, this.layer);
+
+        // 更新画布渲染顺序
+        this._rearrangeCanvasObjects();
+
+        console.log(`↩️ 图层 ${this.layer.name} 已恢复到原位置`);
+      }
+    }
+  }
+
+  /**
+   * 计算置底的目标位置
+   * @returns {number} 目标索引
+   * @private
+   */
+  _calculateBottomPosition() {
+    // 找到最后一个非背景、非固定图层的位置
+    for (let i = this.layers.value.length - 1; i >= 0; i--) {
+      const layer = this.layers.value[i];
+      if (!layer.isBackground && !layer.isFixed) {
+        return i;
+      }
+    }
+    return this.layers.value.length - 1;
+  }
+
+  /**
+   * 重新排列画布对象
+   * @private
+   */
+  _rearrangeCanvasObjects() {
+    if (!this.canvas) return;
+
+    // 获取画布上的所有对象
+    const canvasObjects = [...this.canvas.getObjects()];
+
+    // 清空画布
+    this.canvas.clear();
+
+    // 按图层顺序(从底到顶)重新添加对象
+    for (let i = this.layers.value.length - 1; i >= 0; i--) {
+      const layer = this.layers.value[i];
+
+      if (layer.isBackground && layer.fabricObject) {
+        // 背景图层
+        const originalObj = canvasObjects.find(
+          (o) => o.id === layer.fabricObject.id
+        );
+        if (originalObj) {
+          this.canvas.add(originalObj);
+        }
+      } else if (
+        Array.isArray(layer.fabricObjects) &&
+        layer.fabricObjects.length > 0
+      ) {
+        // 普通图层和固定图层
+        layer.fabricObjects.forEach((obj) => {
+          const originalObj = canvasObjects.find((o) => o.id === obj.id);
+          if (originalObj) {
+            this.canvas.add(originalObj);
+          }
+        });
+      }
+    }
+
+    this.canvas.renderAll();
+  }
+
+  getInfo() {
+    return {
+      name: this.name,
+      layerId: this.layerId,
+      layerName: this.layer?.name,
+      originalIndex: this.originalIndex,
+      targetIndex: this.targetIndex,
+    };
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js
index 27fc9ef2..b7e6cbdd 100644
--- a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js
@@ -1,6 +1,11 @@
-import { OperationType } from "../utils/layerHelper.js";
+import {
+  findObjectById,
+  generateId,
+  optimizeCanvasRendering,
+} from "../utils/helper.js";
+import { LayerType, OperationType } from "../utils/layerHelper.js";
 import { Command, CompositeCommand } from "./Command.js";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 
 /**
  * 批量初始化红绿图模式命令
@@ -29,100 +34,134 @@ export class BatchInitializeRedGreenModeCommand extends Command {
     this.originalNormalObjects = null;
     this.originalNormalOpacities = new Map();
     this.originalToolState = null;
+    this.originalActiveLayerId = null;
 
     // 存储加载的图片对象
     this.clothingImage = null;
     this.redGreenImage = null;
+
+    // 存储新创建的图层ID
+    this.newEmptyLayerId = null;
   }
 
   async execute() {
     try {
-      // 禁用画布渲染以避免闪烁
-      this.canvas.renderOnAddRemove = false;
+      await optimizeCanvasRendering(this.canvas, async () => {
+        // 1. 设置画布背景为白色
+        this.originalCanvasBackground = this.canvas.backgroundColor;
+        this.canvas.setBackgroundColor("#ffffff", () => {});
 
-      // 1. 设置画布背景为白色
-      this.originalCanvasBackground = this.canvas.backgroundColor;
-      this.canvas.setBackgroundColor('#ffffff', () => {});
+        // 2. 查找图层结构
+        const layers = this.layerManager.layers?.value || [];
+        const backgroundLayer = layers.find((layer) => layer.isBackground);
+        const fixedLayer = layers.find((layer) => layer.isFixed);
+        const normalLayers = layers.filter(
+          (layer) => !layer.isBackground && !layer.isFixed
+        );
 
-      // 2. 查找图层结构
-      const layers = this.layerManager.layers?.value || [];
-      const backgroundLayer = layers.find((layer) => layer.isBackground);
-      const fixedLayer = layers.find((layer) => layer.isFixed);
-      const normalLayers = layers.filter(
-        (layer) => !layer.isBackground && !layer.isFixed
-      );
-
-      if (!backgroundLayer || !fixedLayer || normalLayers.length === 0) {
-        throw new Error("缺少必要的图层结构");
-      }
-
-      const normalLayer = normalLayers[0]; // 使用第一个普通图层
-
-      // 3. 保存原始状态
-      this.originalBackgroundObject = backgroundLayer.fabricObject ? {
-        ...backgroundLayer.fabricObject.toObject(),
-        ref: backgroundLayer.fabricObject
-      } : null;
-
-      this.originalFixedObjects = fixedLayer.fabricObject
-        ? [fixedLayer.fabricObject]
-        : [];
-
-      this.originalNormalObjects = normalLayer.fabricObjects
-        ? [...normalLayer.fabricObjects]
-        : [];
-
-      // 保存普通图层透明度
-      normalLayers.forEach((layer) => {
-        this.originalNormalOpacities.set(layer.id, layer.opacity || 1);
-        if (layer.fabricObjects) {
-          layer.fabricObjects.forEach((obj) => {
-            this.originalNormalOpacities.set(
-              `${layer.id}_${obj.id || "unknown"}`,
-              obj.opacity || 1
-            );
-          });
+        if (!backgroundLayer || !fixedLayer || normalLayers.length === 0) {
+          throw new Error("缺少必要的图层结构");
         }
-      });
 
-      // 保存工具状态
-      if (this.toolManager) {
-        this.originalToolState = {
-          currentTool: this.toolManager.getCurrentTool(),
-          isRedGreenMode: this.toolManager.isRedGreenMode,
-        };
-      }
+        const normalLayer = normalLayers[0]; // 使用第一个普通图层
 
-      // 4. 确保背景图层大小正确
-      await this._setupBackgroundLayer(backgroundLayer);
+        // 3. 保存原始状态
+        this.originalBackgroundObject = backgroundLayer.fabricObject
+          ? {
+              ...backgroundLayer.fabricObject.toObject(),
+              ref: backgroundLayer.fabricObject,
+            }
+          : null;
 
-      // 5. 并行加载两个图片
-      const [clothingImg, redGreenImg] = await Promise.all([
-        this._loadImage(this.clothingImageUrl),
-        this._loadImage(this.redGreenImageUrl)
-      ]);
+        this.originalFixedObjects = fixedLayer.fabricObject
+          ? [fixedLayer.fabricObject]
+          : [];
 
-      // 6. 设置衣服底图到固定图层
-      await this._setupClothingImage(clothingImg, fixedLayer);
+        this.originalNormalObjects = normalLayer.fabricObjects
+          ? [...normalLayer.fabricObjects]
+          : [];
 
-      // 7. 设置红绿图到普通图层，位置和大小与衣服底图一致
-      await this._setupRedGreenImage(redGreenImg, normalLayer, this.clothingImage);
+        // 保存当前活动图层ID
+        this.originalActiveLayerId = this.layerManager.getActiveLayerId();
 
-      // 8. 设置普通图层透明度
-      this._setupNormalLayerOpacity(normalLayers);
+        // 保存普通图层透明度
+        normalLayers.forEach((layer) => {
+          this.originalNormalOpacities.set(layer.id, layer.opacity || 1);
+          if (layer.fabricObjects) {
+            layer.fabricObjects.forEach((obj) => {
+              this.originalNormalOpacities.set(
+                `${layer.id}_${obj.id || "unknown"}`,
+                obj.opacity || 1
+              );
+            });
+          }
+        });
 
-      // 9. 配置工具管理器
-      this._setupToolManager();
+        // 保存工具状态
+        if (this.toolManager) {
+          this.originalToolState = {
+            currentTool: this.toolManager.getCurrentTool(),
+            isRedGreenMode: this.toolManager.isRedGreenMode,
+          };
+        }
 
-      // 10. 重新启用渲染并执行一次性渲染
-      this.canvas.renderOnAddRemove = true;
-      this.canvas.renderAll();
+        // 5. 并行加载两个图片
+        const [clothingImg, redGreenImg] = await Promise.all([
+          this._loadImage(this.clothingImageUrl),
+          this._loadImage(this.redGreenImageUrl),
+        ]);
 
-      console.log("批量红绿图模式初始化完成", {
-        衣服底图: this.clothingImageUrl,
-        红绿图: this.redGreenImageUrl,
-        普通图层透明度: `${Math.round(this.normalLayerOpacity * 100)}%`,
-        画布背景: "白色",
+        // 6. 设置衣服底图到固定图层
+        await this._setupClothingImage(clothingImg, fixedLayer);
+
+        // 7. 设置红绿图到普通图层，位置和大小与衣服底图一致
+        await this._setupRedGreenImage(
+          redGreenImg,
+          normalLayer,
+          this.clothingImage
+        );
+
+        // 4. 确保背景图层大小和衣服地图大小一致
+        await this._setupBackgroundLayer(backgroundLayer, this.clothingImage);
+
+        // 8. 设置普通图层透明度
+        this._setupNormalLayerOpacity(normalLayers); // 这里不需要在这里设置透明度 由图层统一处理
+
+        // 9. 创建新的空白图层并设置为活动图层
+        this.newEmptyLayerId = await this._createAndActivateEmptyLayer();
+
+        // 设置普通图层的裁剪对象为衣服底图
+        if (this.redGreenImage) {
+          // const clipPathImg = this.redGreenImage;
+          // clipPathImg.set({
+          //   absolutePositioned: true,
+          // });
+          this.redGreenImage.set({
+            absolutePositioned: true,
+          });
+
+          const activeLayer = this.layerManager.getActiveLayer();
+          activeLayer.clippingMask = this.redGreenImage.toObject(["id"]);
+          activeLayer.opacity = this.normalLayerOpacity;
+          // activeLayer?.fabricObjects.forEach((obj) => {
+          //   obj.set({
+          //     clipPath: clipPathImg,
+          //   });
+          // });
+        }
+
+        // 10. 配置工具管理器
+        this._setupToolManager();
+
+        console.log("批量红绿图模式初始化完成", {
+          衣服底图: this.clothingImageUrl,
+          红绿图: this.redGreenImageUrl,
+          普通图层透明度: `${Math.round(this.normalLayerOpacity * 100)}%`,
+          画布背景: "白色",
+          新建空图层ID: this.newEmptyLayerId,
+        });
+
+        await this.layerManager.updateLayersObjectsInteractivity(false);
       });
 
       return true;
@@ -134,86 +173,125 @@ export class BatchInitializeRedGreenModeCommand extends Command {
     }
   }
 
+  /**
+   * 创建新的空白图层并设置为活动图层
+   * @returns {Promise<string>} 新创建的图层ID
+   * @private
+   */
+  async _createAndActivateEmptyLayer() {
+    // 创建新的空白图层
+    const newLayerName = "绘制图层";
+    const newLayerId = this.layerManager.createLayer(
+      newLayerName,
+      LayerType.GROUP,
+      {
+        undoable: false,
+      }
+    );
+
+    // 设置为活动图层
+    if (newLayerId) {
+      this.layerManager.setActiveLayer(newLayerId);
+    }
+
+    return newLayerId;
+  }
+
   async undo() {
     try {
-      // 禁用渲染
-      this.canvas.renderOnAddRemove = false;
-
-      // 1. 恢复画布背景
-      if (this.originalCanvasBackground !== null) {
-        this.canvas.setBackgroundColor(this.originalCanvasBackground, () => {});
-      }
-
-      // 2. 恢复图层对象
-      const layers = this.layerManager.layers?.value || [];
-      const backgroundLayer = layers.find((layer) => layer.isBackground);
-      const fixedLayer = layers.find((layer) => layer.isFixed);
-      const normalLayers = layers.filter(
-        (layer) => !layer.isBackground && !layer.isFixed
-      );
-
-      // 移除当前添加的对象
-      if (this.clothingImage) {
-        this.canvas.remove(this.clothingImage);
-      }
-      if (this.redGreenImage) {
-        this.canvas.remove(this.redGreenImage);
-      }
-
-      // 恢复背景图层
-      if (backgroundLayer && this.originalBackgroundObject) {
-        if (this.originalBackgroundObject.ref) {
-          backgroundLayer.fabricObject = this.originalBackgroundObject.ref;
-        }
-      }
-
-      // 恢复固定图层
-      if (fixedLayer) {
-        fixedLayer.fabricObject = this.originalFixedObjects.length > 0 
-          ? this.originalFixedObjects[0] 
-          : null;
-        
-        if (fixedLayer.fabricObject) {
-          this.canvas.add(fixedLayer.fabricObject);
-        }
-      }
-
-      // 恢复普通图层
-      if (normalLayers.length > 0) {
-        const normalLayer = normalLayers[0];
-        normalLayer.fabricObjects = [...this.originalNormalObjects];
-        this.originalNormalObjects.forEach((obj) => {
-          this.canvas.add(obj);
-        });
-      }
-
-      // 3. 恢复透明度
-      normalLayers.forEach((layer) => {
-        if (this.originalNormalOpacities.has(layer.id)) {
-          layer.opacity = this.originalNormalOpacities.get(layer.id);
+      await optimizeCanvasRendering(this.canvas, async () => {
+        // 1. 恢复画布背景
+        if (this.originalCanvasBackground !== null) {
+          this.canvas.setBackgroundColor(
+            this.originalCanvasBackground,
+            () => {}
+          );
         }
 
-        if (layer.fabricObjects) {
-          layer.fabricObjects.forEach((obj) => {
-            const key = `${layer.id}_${obj.id || "unknown"}`;
-            if (this.originalNormalOpacities.has(key)) {
-              obj.opacity = this.originalNormalOpacities.get(key);
-            }
+        // 2. 恢复图层对象
+        const layers = this.layerManager.layers?.value || [];
+        const backgroundLayer = layers.find((layer) => layer.isBackground);
+        const fixedLayer = layers.find((layer) => layer.isFixed);
+        const normalLayers = layers.filter(
+          (layer) => !layer.isBackground && !layer.isFixed
+        );
+
+        // 移除当前添加的对象
+        if (this.clothingImage) {
+          this.canvas.remove(this.clothingImage);
+        }
+        if (this.redGreenImage) {
+          this.canvas.remove(this.redGreenImage);
+        }
+
+        // 移除新创建的空白图层
+        if (this.newEmptyLayerId) {
+          const emptyLayerIndex = layers.findIndex(
+            (layer) => layer.id === this.newEmptyLayerId
+          );
+          if (emptyLayerIndex !== -1) {
+            layers.splice(emptyLayerIndex, 1);
+          }
+        }
+
+        // 恢复背景图层
+        if (backgroundLayer && this.originalBackgroundObject) {
+          if (this.originalBackgroundObject.ref) {
+            backgroundLayer.fabricObject = this.originalBackgroundObject.ref;
+          }
+        }
+
+        // 恢复固定图层
+        if (fixedLayer) {
+          fixedLayer.fabricObject =
+            this.originalFixedObjects.length > 0
+              ? this.originalFixedObjects[0]
+              : null;
+
+          if (fixedLayer.fabricObject) {
+            this.canvas.add(fixedLayer.fabricObject);
+          }
+        }
+
+        // 恢复普通图层
+        if (normalLayers.length > 0) {
+          const normalLayer = normalLayers[0];
+          normalLayer.fabricObjects = [...this.originalNormalObjects];
+          this.originalNormalObjects.forEach((obj) => {
+            this.canvas.add(obj);
           });
         }
-      });
 
-      // 4. 恢复工具状态
-      if (this.toolManager && this.originalToolState) {
-        this.toolManager.isRedGreenMode = this.originalToolState.isRedGreenMode;
-        if (this.originalToolState.currentTool) {
-          this.toolManager.setTool(this.originalToolState.currentTool);
+        // 3. 恢复透明度
+        normalLayers.forEach((layer) => {
+          if (this.originalNormalOpacities.has(layer.id)) {
+            layer.opacity = this.originalNormalOpacities.get(layer.id);
+          }
+
+          if (layer.fabricObjects) {
+            layer.fabricObjects.forEach((obj) => {
+              const key = `${layer.id}_${obj.id || "unknown"}`;
+              if (this.originalNormalOpacities.has(key)) {
+                obj.opacity = this.originalNormalOpacities.get(key);
+              }
+            });
+          }
+        });
+
+        // 恢复活动图层
+        if (this.originalActiveLayerId) {
+          this.layerManager.setActiveLayer(this.originalActiveLayerId);
         }
-      }
 
-      // 5. 重新启用渲染
-      this.canvas.renderOnAddRemove = true;
-      this.canvas.renderAll();
+        // 4. 恢复工具状态
+        if (this.toolManager && this.originalToolState) {
+          this.toolManager.isRedGreenMode =
+            this.originalToolState.isRedGreenMode;
+          if (this.originalToolState.currentTool) {
+            this.toolManager.setTool(this.originalToolState.currentTool);
+          }
+        }
+      });
 
       return true;
     } catch (error) {
@@ -226,35 +304,42 @@ export class BatchInitializeRedGreenModeCommand extends Command {
   /**
    * 设置背景图层
    */
-  async _setupBackgroundLayer(backgroundLayer) {
+  async _setupBackgroundLayer(backgroundLayer, clothingImage) {
     let backgroundObject = backgroundLayer.fabricObject;
+    const { object } = findObjectById(this.canvas, backgroundObject.id);
 
-    if (!backgroundObject) {
+    if (!object) {
       // 创建白色背景矩形
-      backgroundObject = new fabric.Rect({
-        left: 0,
-        top: 0,
-        width: this.canvas.width,
-        height: this.canvas.height,
-        fill: "#ffffff",
+      object = new fabric.Rect({
+        left: this.canvas.width / 2,
+        top: this.canvas.height / 2,
+        width: clothingImage.width,
+        height: clothingImage.height,
+        scaleX: clothingImage.scaleX,
+        scaleY: clothingImage.scaleY,
+        fill: "transparent", // 确保背景是透明的
         selectable: false,
         evented: false,
         isBackground: true,
         layerId: backgroundLayer.id,
         layerName: backgroundLayer.name,
+        originX: "center",
+        originY: "center",
       });
 
-      this.canvas.add(backgroundObject);
-      this.canvas.sendToBack(backgroundObject);
-      backgroundLayer.fabricObject = backgroundObject;
+      this.canvas.add(object);
+      this.canvas.sendToBack(object);
+      backgroundLayer.fabricObject = object;
     } else {
       // 更新现有背景对象大小
-      backgroundObject.set({
-        width: this.canvas.width,
-        height: this.canvas.height,
-        left: 0,
-        top: 0,
-        fill: "#ffffff", // 确保背景是白色
+      object.set({
+        width: clothingImage.width,
+        height: clothingImage.height,
+        scaleX: clothingImage.scaleX,
+        scaleY: clothingImage.scaleY,
+        left: this.canvas.width / 2,
+        top: this.canvas.height / 2,
+        fill: "transparent", // 确保背景是透明的
       });
     }
   }
@@ -299,6 +384,7 @@ export class BatchInitializeRedGreenModeCommand extends Command {
       evented: false,
       layerId: fixedLayer.id,
       layerName: fixedLayer.name,
+      id: generateId("clothingImage"),
     });
 
     // 清除固定图层原有内容
@@ -332,6 +418,7 @@ export class BatchInitializeRedGreenModeCommand extends Command {
       evented: false,
       layerId: normalLayer.id,
       layerName: normalLayer.name,
+      id: generateId("redGreenImage"),
     });
 
     // 清除普通图层原有内容
@@ -341,6 +428,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
       });
     }
 
+    // 给img设置裁剪，裁剪图为衣服底图
+
     // 添加到画布和普通图层
     this.canvas.add(img);
     normalLayer.fabricObjects = [img];
@@ -354,13 +443,6 @@ export class BatchInitializeRedGreenModeCommand extends Command {
     normalLayers.forEach((layer) => {
       // 设置图层透明度
       layer.opacity = this.normalLayerOpacity;
-
-      // 更新图层中所有对象的透明度
-      if (layer.fabricObjects) {
-        layer.fabricObjects.forEach((obj) => {
-          obj.opacity = this.normalLayerOpacity;
-        });
-      }
     });
   }
 
diff --git a/src/component/Canvas/CanvasEditor/commands/SelectionCommands.js b/src/component/Canvas/CanvasEditor/commands/SelectionCommands.js
index de1c3f58..3acd53d3 100644
--- a/src/component/Canvas/CanvasEditor/commands/SelectionCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/SelectionCommands.js
@@ -1,5 +1,5 @@
 import { Command, CompositeCommand } from "./Command.js";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { createLayer, LayerType } from "../utils/layerHelper.js";
 
 /**
diff --git a/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue b/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue
index 0a7c8282..3517a46d 100644
--- a/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="fade">
+  <transition name="brush-control-canel-fade">
     <div v-if="isVisible" class="brush-control-panel">
       <!-- 笔刷大小控制 -->
       <VerticalSlider
@@ -55,80 +55,89 @@
         </template>
       </VerticalSlider>
 
-      <!-- 颜色选择器 - 仅在特定工具下显示 -->
-      <div v-if="showColorPicker" class="color-picker-container">
-        <label for="color-picker" class="current-color-label">
-          <div
-            class="current-color"
-            :style="{ backgroundColor: brushColor }"
-          ></div>
-        </label>
-        <input
-          type="color"
-          id="color-picker"
-          class="system-color-picker"
-          v-model="customColor"
-          @input="setBrushColor(customColor)"
-        />
-      </div>
-
-      <!-- 透明度控制 - 仅在特定工具下显示 -->
-      <VerticalSlider
-        v-if="showOpacitySlider"
-        v-model="brushOpacity"
-        :min="0"
-        :max="1"
-        :presets="opacityPresets"
-        :memorized-values="memorizedOpacities"
-        :is-percentage="true"
-        custom-class="opacity-slider"
-        :active-threshold="0.01"
-        :step="0.01"
-        v-model:showTooltip="showOpacityTooltip"
-        @slide-start="handleOpacitySlideStart"
-        @slide-end="handleOpacitySlideEnd"
-        @click="showOpacityTooltip = true"
-      >
-        <template #tooltip-content>
-          <div class="tooltip-header">
-            <div class="tooltip-title">Opacity</div>
-            <div class="tooltip-close-btn" @click.stop="closeOpacityTooltip">
-              <SvgIcon name="CClose" size="20" />
-            </div>
-          </div>
-          <div class="opacity-preview">
-            <div class="opacity-checker"></div>
+      <!-- 1.这里加上过渡动画 颜色选择器 - 仅在特定工具下显示 -->
+      <transition name="color-picker-fade" mode="out-in">
+        <div
+          v-if="showColorPicker"
+          class="color-picker-container"
+          key="color-picker"
+        >
+          <label for="color-picker" class="current-color-label">
             <div
-              class="opacity-color"
-              :style="{
-                backgroundColor: brushColor,
-                opacity: brushOpacity,
-              }"
+              class="current-color"
+              :style="{ backgroundColor: brushColor }"
             ></div>
-          </div>
-          <div class="tooltip-content">
-            <div class="tooltip-text">
-              {{ Math.round(brushOpacity * 100) }}%
+          </label>
+          <input
+            type="color"
+            id="color-picker"
+            class="system-color-picker"
+            v-model="customColor"
+            @input="setBrushColor(customColor)"
+          />
+        </div>
+      </transition>
+
+      <!-- 2.这里加上过渡动画 透明度控制 - 仅在特定工具下显示 -->
+      <transition name="opacity-slider-fade" mode="out-in">
+        <VerticalSlider
+          v-if="showOpacitySlider"
+          key="opacity-slider"
+          v-model="brushOpacity"
+          :min="0"
+          :max="1"
+          :presets="opacityPresets"
+          :memorized-values="memorizedOpacities"
+          :is-percentage="true"
+          custom-class="opacity-slider"
+          :active-threshold="0.01"
+          :step="0.01"
+          v-model:showTooltip="showOpacityTooltip"
+          @slide-start="handleOpacitySlideStart"
+          @slide-end="handleOpacitySlideEnd"
+          @click="showOpacityTooltip = true"
+        >
+          <template #tooltip-content>
+            <div class="tooltip-header">
+              <div class="tooltip-title">Opacity</div>
+              <div class="tooltip-close-btn" @click.stop="closeOpacityTooltip">
+                <SvgIcon name="CClose" size="20" />
+              </div>
             </div>
-            <div class="tooltip-controls">
-              <button
-                class="control-btn add"
-                v-if="!memorizedOpacities.includes(brushOpacity)"
-                @click="memorizeOpacity"
-              >
-                +
-              </button>
-              <button
-                class="control-btn remove"
-                @click="removeMemorizedOpacity"
-                v-if="canRemoveOpacity"
-              >
-                -
-              </button>
+            <div class="opacity-preview">
+              <div class="opacity-checker"></div>
+              <div
+                class="opacity-color"
+                :style="{
+                  backgroundColor: brushColor,
+                  opacity: brushOpacity,
+                }"
+              ></div>
             </div>
-          </div>
-        </template>
-      </VerticalSlider>
+            <div class="tooltip-content">
+              <div class="tooltip-text">
+                {{ Math.round(brushOpacity * 100) }}%
+              </div>
+              <div class="tooltip-controls">
+                <button
+                  class="control-btn add"
+                  v-if="!memorizedOpacities.includes(brushOpacity)"
+                  @click="memorizeOpacity"
+                >
+                  +
+                </button>
+                <button
+                  class="control-btn remove"
+                  @click="removeMemorizedOpacity"
+                  v-if="canRemoveOpacity"
+                >
+                  -
+                </button>
+              </div>
+            </div>
+          </template>
+        </VerticalSlider>
+      </transition>
     </div>
   </transition>
 </template>
@@ -139,7 +148,6 @@ import { BrushStore } from "../store/BrushStore";
 import { OperationType } from "../utils/layerHelper";
 import { inject } from "vue";
 import VerticalSlider from "./VerticalSlider.vue";
-import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
 
 const props = defineProps({
   activeTool: {
@@ -462,6 +470,13 @@ watch(
   color: #333;
   user-select: none;
   -webkit-user-select: none;
+
+  // 添加高度过渡动画
+  transition: height 0.3s ease-out, min-height 0.3s ease-out;
+  // overflow: hidden;
+
+  transform: translate3d(0, -50%, 0); // 确保使用3D变换以提高性能
+  opacity: 1;
 }
 
 // 笔刷大小预览相关样式
@@ -660,27 +675,49 @@ watch(
 }
 
 // 淡入淡出动画
-.fade-enter-active,
-.fade-leave-active {
+.brush-control-canel-fade-enter-active,
+.brush-control-canel-fade-leave-active {
   transition: opacity 0.3s, transform 0.3s;
 }
-.fade-enter-from,
-.fade-leave-to {
+.brush-control-canel-fade-enter-from,
+.brush-control-canel-fade-leave-to {
   opacity: 0;
   transform: translateX(-10px) translateY(-50%);
 }
 
+// 颜色选择器过渡动画
+.color-picker-fade-enter-active,
+.color-picker-fade-leave-active {
+  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+.color-picker-fade-enter-from,
+.color-picker-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+// 透明度滑块过渡动画
+.opacity-slider-fade-enter-active,
+.opacity-slider-fade-leave-active {
+  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+.opacity-slider-fade-enter-from,
+.opacity-slider-fade-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+}
+
 // 响应式调整
 @media (max-height: 600px) {
   .brush-control-panel {
-    transform: translateY(-50%);
+    gap: 10px;
   }
 }
 
 @media (max-width: 768px) {
   .brush-control-panel {
     left: 10px;
-    // padding: 12px;
+    padding: 12px 3px;
   }
 }
 </style>
diff --git a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
index 5cbbe5b2..7a9055c7 100644
--- a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
@@ -1,338 +1,350 @@
 <template>
-  <div class="brush-panel">
-    <div class="brush-panel-content">
-      <!-- 笔刷类型选择 -->
-      <div class="brush-section">
-        <div class="section-header">
-          <span>笔刷类型</span>
-        </div>
-        <div class="brush-type-grid">
-          <div
-            v-for="brush in brushStore.state.availableBrushes"
-            :key="brush.id"
-            @click="setBrushTypeWithCommand(brush.id)"
-            :class="[
-              'brush-type-item',
-              { active: brushStore.state.type === brush.id },
-            ]"
-          >
-            <div
-              class="brush-preview"
-              :style="getBrushPreviewStyle(brush)"
-            ></div>
-            <span class="brush-name">{{ brush.name }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 动态渲染笔刷可配置属性 -->
-      <template
-        v-for="(properties, category) in propertiesByCategory"
-        :key="category"
-      >
+  <div class="brush-panel" @click.stop="">
+    <div class="brush-panel-wrapper">
+      <div class="brush-panel-content">
+        <!-- 笔刷类型选择 -->
         <div class="brush-section">
           <div class="section-header">
-            <span>{{ category }}</span>
-            <div class="section-actions" v-if="category === '材质'">
-              <button class="action-btn" @click="showLibrary = !showLibrary">
-                <i class="icon-library">📚</i> 材质库
-              </button>
+            <span>笔刷类型</span>
+          </div>
+          <div class="brush-type-grid">
+            <div
+              v-for="brush in brushStore.state.availableBrushes"
+              :key="brush.id"
+              @click="setBrushTypeWithCommand(brush.id)"
+              :class="[
+                'brush-type-item',
+                { active: brushStore.state.type === brush.id },
+              ]"
+            >
+              <div
+                class="brush-preview"
+                :style="getBrushPreviewStyle(brush)"
+              ></div>
+              <span class="brush-name">{{ brush.name }}</span>
             </div>
           </div>
+        </div>
 
-          <!-- 针对每个属性，根据其类型渲染合适的控件 -->
-          <div class="property-list">
-            <div
-              v-for="prop in properties"
-              :key="prop.id"
-              class="property-item"
-            >
-              <!-- 滑块控件 -->
-              <template v-if="prop.type === 'slider'">
-                <div class="slider-property">
-                  <div class="slider-header">
-                    <span>{{ prop.name }}</span>
-                    <span class="slider-value">
-                      {{ formatPropertyValue(prop) }}
-                    </span>
+        <!-- 动态渲染笔刷可配置属性 -->
+        <template
+          v-for="(properties, category) in propertiesByCategory"
+          :key="category"
+        >
+          <div class="brush-section">
+            <div class="section-header">
+              <span>{{ category }}</span>
+              <div class="section-actions" v-if="category === '材质'">
+                <button class="action-btn" @click="showLibrary = !showLibrary">
+                  <i class="icon-library">📚</i> 材质库
+                </button>
+              </div>
+            </div>
+
+            <!-- 针对每个属性，根据其类型渲染合适的控件 -->
+            <div class="property-list">
+              <div
+                v-for="prop in properties"
+                :key="prop.id"
+                class="property-item"
+              >
+                <!-- 滑块控件 -->
+                <template v-if="prop.type === 'slider'">
+                  <div class="slider-property">
+                    <div class="slider-header">
+                      <span>{{ prop.name }}</span>
+                      <span class="slider-value">
+                        {{ formatPropertyValue(prop) }}
+                      </span>
+                    </div>
+                    <div class="slider-container">
+                      <input
+                        type="range"
+                        :value="prop.value"
+                        @input="
+                          (e) =>
+                            handlePropertyChange(
+                              prop.id,
+                              parseFloat(e.target.value)
+                            )
+                        "
+                        :min="prop.min || 0"
+                        :max="prop.max || 100"
+                        :step="prop.step || 1"
+                        class="property-slider"
+                      />
+                    </div>
+                    <!-- 预设值按钮，如果定义了预设 -->
+                    <div v-if="prop.presets" class="property-presets">
+                      <button
+                        v-for="preset in prop.presets"
+                        :key="preset"
+                        @click="handlePropertyChange(prop.id, preset)"
+                        :class="{ active: Math.abs(prop.value - preset) < 0.1 }"
+                      >
+                        {{ preset }}
+                      </button>
+                    </div>
                   </div>
-                  <div class="slider-container">
-                    <input
-                      type="range"
+                </template>
+
+                <!-- 颜色选择器 -->
+                <template v-else-if="prop.type === 'color'">
+                  <div class="color-property">
+                    <div class="color-header">
+                      <span>{{ prop.name }}</span>
+                      <div
+                        class="color-preview"
+                        :style="{ backgroundColor: prop.value }"
+                      ></div>
+                    </div>
+                    <div class="color-row">
+                      <input
+                        type="color"
+                        :value="prop.value"
+                        @input="
+                          (e) => handlePropertyChange(prop.id, e.target.value)
+                        "
+                        class="color-picker"
+                      />
+                      <!-- 如果是主颜色，显示最近使用的颜色 -->
+                      <div v-if="prop.id === 'color'" class="recent-colors">
+                        <div
+                          v-for="(color, index) in brushStore.state
+                            .recentColors"
+                          :key="index"
+                          class="color-item"
+                          :style="{ backgroundColor: color }"
+                          @click="handlePropertyChange(prop.id, color)"
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <!-- 复选框 -->
+                <template v-else-if="prop.type === 'checkbox'">
+                  <div class="checkbox-property">
+                    <span>{{ prop.name }}</span>
+                    <div class="toggle-switch">
+                      <input
+                        type="checkbox"
+                        :checked="prop.value"
+                        @change="
+                          (e) => handlePropertyChange(prop.id, e.target.checked)
+                        "
+                        :id="`toggle-${prop.id}`"
+                      />
+                      <label :for="`toggle-${prop.id}`"></label>
+                    </div>
+                  </div>
+                </template>
+
+                <!-- 选择器 -->
+                <template v-else-if="prop.type === 'select'">
+                  <div class="select-property">
+                    <span>{{ prop.name }}</span>
+                    <select
                       :value="prop.value"
-                      @input="
-                        (e) =>
-                          handlePropertyChange(
-                            prop.id,
-                            parseFloat(e.target.value)
-                          )
+                      @change="
+                        (e) => handlePropertyChange(prop.id, e.target.value)
                       "
-                      :min="prop.min || 0"
-                      :max="prop.max || 100"
-                      :step="prop.step || 1"
-                      class="property-slider"
-                    />
-                  </div>
-                  <!-- 预设值按钮，如果定义了预设 -->
-                  <div v-if="prop.presets" class="property-presets">
-                    <button
-                      v-for="preset in prop.presets"
-                      :key="preset"
-                      @click="handlePropertyChange(prop.id, preset)"
-                      :class="{ active: Math.abs(prop.value - preset) < 0.1 }"
+                      class="property-select"
                     >
-                      {{ preset }}
-                    </button>
+                      <option
+                        v-for="option in prop.options"
+                        :key="option.value"
+                        :value="option.value"
+                      >
+                        {{ option.label }}
+                      </option>
+                    </select>
                   </div>
-                </div>
-              </template>
+                </template>
 
-              <!-- 颜色选择器 -->
-              <template v-else-if="prop.type === 'color'">
-                <div class="color-property">
-                  <div class="color-header">
-                    <span>{{ prop.name }}</span>
+                <!-- 文件选择器（用于材质） -->
+                <template v-else-if="prop.type === 'file'">
+                  <div class="file-property">
+                    <div class="file-header">
+                      <span>{{ prop.name }}</span>
+                    </div>
                     <div
-                      class="color-preview"
-                      :style="{ backgroundColor: prop.value }"
-                    ></div>
+                      class="file-preview"
+                      @click="handleFileSelect(prop.id)"
+                    >
+                      <img v-if="prop.value" :src="prop.value" alt="材质预览" />
+                      <div v-else class="no-file">点击上传材质图片</div>
+                    </div>
+                    <div class="file-actions">
+                      <button
+                        class="select-file-btn"
+                        @click="handleFileSelect(prop.id)"
+                      >
+                        上传图片
+                      </button>
+                      <button
+                        class="clear-file-btn"
+                        @click="handlePropertyChange(prop.id, '')"
+                        v-if="prop.value"
+                      >
+                        清除
+                      </button>
+                    </div>
                   </div>
-                  <div class="color-row">
+                </template>
+
+                <!-- 材质网格选择器 -->
+                <template v-else-if="prop.type === 'texture-grid'">
+                  <div class="texture-grid-property">
+                    <div class="texture-grid-header">
+                      <span>{{ prop.name }}</span>
+                    </div>
+                    <div class="texture-grid">
+                      <div
+                        v-for="texture in prop.options"
+                        :key="texture.value"
+                        class="texture-item"
+                        :class="{ active: prop.value === texture.value }"
+                        @click="handleTextureSelect(texture.value)"
+                      >
+                        <img
+                          :src="texture.preview || texture.value"
+                          :alt="texture.label"
+                          class="texture-thumbnail"
+                        />
+                        <span class="texture-label">{{ texture.label }}</span>
+                      </div>
+                      <!-- 自定义纹理上传按钮 -->
+                      <div
+                        class="texture-item upload-item"
+                        @click="triggerTextureUpload"
+                      >
+                        <div class="upload-icon">
+                          <span>+</span>
+                        </div>
+                        <span class="texture-label">上传纹理</span>
+                      </div>
+                      <!-- 隐藏的文件输入 -->
+                      <input
+                        ref="textureFileInput"
+                        type="file"
+                        accept="image/*"
+                        @change="handleTextureUpload"
+                        style="display: none"
+                      />
+                    </div>
+                  </div>
+                </template>
+
+                <!-- 其他类型的属性 -->
+                <template v-else>
+                  <div class="generic-property">
+                    <span>{{ prop.name }}</span>
                     <input
-                      type="color"
+                      type="text"
                       :value="prop.value"
                       @input="
                         (e) => handlePropertyChange(prop.id, e.target.value)
                       "
-                      class="color-picker"
-                    />
-                    <!-- 如果是主颜色，显示最近使用的颜色 -->
-                    <div v-if="prop.id === 'color'" class="recent-colors">
-                      <div
-                        v-for="(color, index) in brushStore.state.recentColors"
-                        :key="index"
-                        class="color-item"
-                        :style="{ backgroundColor: color }"
-                        @click="handlePropertyChange(prop.id, color)"
-                      ></div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
-              <!-- 复选框 -->
-              <template v-else-if="prop.type === 'checkbox'">
-                <div class="checkbox-property">
-                  <span>{{ prop.name }}</span>
-                  <div class="toggle-switch">
-                    <input
-                      type="checkbox"
-                      :checked="prop.value"
-                      @change="
-                        (e) => handlePropertyChange(prop.id, e.target.checked)
-                      "
-                      :id="`toggle-${prop.id}`"
-                    />
-                    <label :for="`toggle-${prop.id}`"></label>
-                  </div>
-                </div>
-              </template>
-
-              <!-- 选择器 -->
-              <template v-else-if="prop.type === 'select'">
-                <div class="select-property">
-                  <span>{{ prop.name }}</span>
-                  <select
-                    :value="prop.value"
-                    @change="
-                      (e) => handlePropertyChange(prop.id, e.target.value)
-                    "
-                    class="property-select"
-                  >
-                    <option
-                      v-for="option in prop.options"
-                      :key="option.value"
-                      :value="option.value"
-                    >
-                      {{ option.label }}
-                    </option>
-                  </select>
-                </div>
-              </template>
-
-              <!-- 文件选择器（用于材质） -->
-              <template v-else-if="prop.type === 'file'">
-                <div class="file-property">
-                  <div class="file-header">
-                    <span>{{ prop.name }}</span>
-                  </div>
-                  <div class="file-preview" @click="handleFileSelect(prop.id)">
-                    <img v-if="prop.value" :src="prop.value" alt="材质预览" />
-                    <div v-else class="no-file">点击上传材质图片</div>
-                  </div>
-                  <div class="file-actions">
-                    <button
-                      class="select-file-btn"
-                      @click="handleFileSelect(prop.id)"
-                    >
-                      上传图片
-                    </button>
-                    <button
-                      class="clear-file-btn"
-                      @click="handlePropertyChange(prop.id, '')"
-                      v-if="prop.value"
-                    >
-                      清除
-                    </button>
-                  </div>
-                </div>
-              </template>
-
-              <!-- 材质网格选择器 -->
-              <template v-else-if="prop.type === 'texture-grid'">
-                <div class="texture-grid-property">
-                  <div class="texture-grid-header">
-                    <span>{{ prop.name }}</span>
-                  </div>
-                  <div class="texture-grid">
-                    <div
-                      v-for="texture in prop.options"
-                      :key="texture.value"
-                      class="texture-item"
-                      :class="{ active: prop.value === texture.value }"
-                      @click="handleTextureSelect(texture.value)"
-                    >
-                      <img
-                        :src="texture.preview || texture.value"
-                        :alt="texture.label"
-                        class="texture-thumbnail"
-                      />
-                      <span class="texture-label">{{ texture.label }}</span>
-                    </div>
-                    <!-- 自定义纹理上传按钮 -->
-                    <div class="texture-item upload-item" @click="triggerTextureUpload">
-                      <div class="upload-icon">
-                        <span>+</span>
-                      </div>
-                      <span class="texture-label">上传纹理</span>
-                    </div>
-                    <!-- 隐藏的文件输入 -->
-                    <input
-                      ref="textureFileInput"
-                      type="file"
-                      accept="image/*"
-                      @change="handleTextureUpload"
-                      style="display: none;"
+                      class="property-input"
                     />
                   </div>
-                </div>
-              </template>
+                </template>
 
-              <!-- 其他类型的属性 -->
-              <template v-else>
-                <div class="generic-property">
-                  <span>{{ prop.name }}</span>
-                  <input
-                    type="text"
-                    :value="prop.value"
-                    @input="
-                      (e) => handlePropertyChange(prop.id, e.target.value)
-                    "
-                    class="property-input"
-                  />
+                <!-- 属性描述提示 -->
+                <div v-if="prop.description" class="property-description">
+                  {{ prop.description }}
                 </div>
-              </template>
-
-              <!-- 属性描述提示 -->
-              <div v-if="prop.description" class="property-description">
-                {{ prop.description }}
               </div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
 
-      <!-- 材质库弹窗 -->
-      <div
-        v-if="showLibrary"
-        class="texture-library-overlay"
-        @click.self="showLibrary = false"
-      >
-        <div class="texture-library-modal">
-          <div class="modal-header">
-            <h3>材质库</h3>
-            <button class="close-btn" @click="showLibrary = false">
-              &times;
-            </button>
-          </div>
-          <div class="modal-content">
-            <div class="texture-categories">
-              <button
-                v-for="(category, index) in textureCategories"
-                :key="index"
-                :class="[
-                  'category-btn',
-                  { active: selectedCategory === category },
-                ]"
-                @click="selectedCategory = category"
-              >
-                {{ category }}
+        <!-- 材质库弹窗 -->
+        <div
+          v-if="showLibrary"
+          class="texture-library-overlay"
+          @click.self="showLibrary = false"
+        >
+          <div class="texture-library-modal">
+            <div class="modal-header">
+              <h3>材质库</h3>
+              <button class="close-btn" @click="showLibrary = false">
+                &times;
               </button>
             </div>
-            <div class="texture-list">
-              <div
-                v-for="(texture, index) in filteredTextures"
-                :key="index"
-                class="library-texture-item"
-                @click="selectLibraryTexture(texture.path)"
-              >
-                <img
-                  :src="texture.thumbnail"
-                  :alt="texture.name"
-                  class="texture-thumbnail"
-                />
-                <span class="texture-name">{{ texture.name }}</span>
+            <div class="modal-content">
+              <div class="texture-categories">
+                <button
+                  v-for="(category, index) in textureCategories"
+                  :key="index"
+                  :class="[
+                    'category-btn',
+                    { active: selectedCategory === category },
+                  ]"
+                  @click="selectedCategory = category"
+                >
+                  {{ category }}
+                </button>
+              </div>
+              <div class="texture-list">
+                <div
+                  v-for="(texture, index) in filteredTextures"
+                  :key="index"
+                  class="library-texture-item"
+                  @click="selectLibraryTexture(texture.path)"
+                >
+                  <img
+                    :src="texture.thumbnail"
+                    :alt="texture.name"
+                    class="texture-thumbnail"
+                  />
+                  <span class="texture-name">{{ texture.name }}</span>
+                </div>
               </div>
             </div>
+            <div class="modal-footer">
+              <button
+                class="upload-btn"
+                @click="handleFileSelect('texturePath')"
+              >
+                上传新材质
+              </button>
+            </div>
           </div>
-          <div class="modal-footer">
-            <button class="upload-btn" @click="handleFileSelect('texturePath')">
-              上传新材质
+        </div>
+
+        <!-- 笔刷预设 -->
+        <div class="brush-section">
+          <div class="section-header">
+            <span>笔刷预设</span>
+            <button
+              class="save-preset-btn"
+              @click="saveCurrentAsPreset"
+              title="保存当前设置为预设"
+            >
+              <i class="save-icon">+</i>
             </button>
           </div>
-        </div>
-      </div>
 
-      <!-- 笔刷预设 -->
-      <div class="brush-section">
-        <div class="section-header">
-          <span>笔刷预设</span>
-          <button
-            class="save-preset-btn"
-            @click="saveCurrentAsPreset"
-            title="保存当前设置为预设"
-          >
-            <i class="save-icon">+</i>
-          </button>
-        </div>
-
-        <div class="presets-container">
-          <div
-            v-for="(preset, index) in brushStore.state.presets"
-            :key="index"
-            class="preset-item"
-            @click="applyPresetWithCommand(index)"
-          >
+          <div class="presets-container">
             <div
-              class="preset-color"
-              :style="{
-                backgroundColor: preset.color,
-                width: preset.size + 'px',
-                height: preset.size + 'px',
-                opacity: preset.opacity,
-              }"
-            ></div>
-            <span class="preset-name">{{ preset.name }}</span>
+              v-for="(preset, index) in brushStore.state.presets"
+              :key="index"
+              class="preset-item"
+              @click="applyPresetWithCommand(index)"
+            >
+              <div
+                class="preset-color"
+                :style="{
+                  backgroundColor: preset.color,
+                  width: preset.size + 'px',
+                  height: preset.size + 'px',
+                  opacity: preset.opacity,
+                }"
+              ></div>
+              <span class="preset-name">{{ preset.name }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -448,10 +460,7 @@ function handleTextureSelect(textureId) {
 
 // 触发纹理上传文件选择
 function triggerTextureUpload() {
-  const fileInput = textureFileInput.value;
-  if (fileInput) {
-    fileInput.click();
-  }
+  handleFileSelect("texturePath");
 }
 
 // 处理纹理文件上传
@@ -461,15 +470,15 @@ async function handleTextureUpload(event) {
 
   try {
     // 验证文件类型
-    if (!file.type.startsWith('image/')) {
-      alert('请选择图片文件');
+    if (!file.type.startsWith("image/")) {
+      alert("请选择图片文件");
       return;
     }
 
     // 验证文件大小 (限制为 5MB)
     const maxSize = 5 * 1024 * 1024;
     if (file.size > maxSize) {
-      alert('文件大小不能超过 5MB');
+      alert("文件大小不能超过 5MB");
       return;
     }
 
@@ -478,8 +487,8 @@ async function handleTextureUpload(event) {
     const brushManager = toolManager?.brushManager;
 
     if (!texturePresetManager || !brushManager) {
-      console.error('缺少必要的管理器实例');
-      alert('系统错误：无法上传纹理');
+      console.error("缺少必要的管理器实例");
+      alert("系统错误：无法上传纹理");
       return;
     }
 
@@ -493,12 +502,11 @@ async function handleTextureUpload(event) {
     });
 
     await commandManager.execute(command);
-    
+
     // 清空文件输入，允许重复上传同一文件
-    event.target.value = '';
-    
+    event.target.value = "";
   } catch (error) {
-    console.error('纹理上传失败:', error);
+    console.error("纹理上传失败:", error);
     alert(`上传失败: ${error.message}`);
   }
 }
@@ -673,29 +681,44 @@ onMounted(() => {
 const brushStore = BrushStore;
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .brush-panel {
+  position: absolute;
+  right: 20px;
+  top: 62px;
   padding: 0;
-  background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
-  width: 100%;
-  overflow-y: auto;
-  max-height: 85vh;
+  width: 30%;
+  /* overflow-y: auto; */
   min-width: 280px;
   border-left: 1px solid rgba(0, 0, 0, 0.05); /* 更柔和的边框 */
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  position: relative;
   animation: panelFadeIn 0.3s ease;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
   backdrop-filter: blur(2px); /* 添加模糊效果 */
   -webkit-backdrop-filter: blur(2px);
+  background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
+  z-index: 1000; /* 确保面板在最上层 */
+
+  .brush-panel-wrapper {
+    overflow-y: auto;
+    height: 100%;
+    max-height: 85vh; /* 限制最大高度 */
+    /*优化ios上的滚动效果*/
+    -webkit-overflow-scrolling: touch;
+    .brush-panel-content {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+    }
+  }
 }
 
 /* 添加指向整个面板的倒三角 */
 .brush-panel::before {
   content: "";
   position: absolute;
-  top: -10px;
-  left: 20px;
+  top: -9px;
+  right: 58px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
@@ -716,12 +739,6 @@ const brushStore = BrushStore;
   }
 }
 
-.brush-panel-content {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-}
-
 .brush-section {
   padding: 0;
   background-color: transparent;
@@ -746,9 +763,10 @@ const brushStore = BrushStore;
   user-select: none;
   position: relative;
   transition: background-color 0.2s ease;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 更柔和的边框 */
 }
 
-.section-header::after {
+/* .section-header::after {
   content: "";
   position: absolute;
   right: 16px;
@@ -757,18 +775,18 @@ const brushStore = BrushStore;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid #999; /* 更柔和的颜色 */
+  border-top: 6px solid #999;
   transform: translateY(-50%);
   transition: transform 0.25s ease;
-}
+} */
 
-.section-header:hover {
+/* .section-header:hover {
   background-color: rgba(248, 249, 250, 1);
 }
 
 .section-header:hover::after {
   border-top-color: #666;
-}
+} */
 
 .section-actions {
   display: flex;
@@ -1114,6 +1132,12 @@ const brushStore = BrushStore;
   height: 34px;
 }
 
+@media screen and (max-width: 1024px) {
+  .property-select {
+    width: 120px;
+  }
+}
+
 .property-select:focus {
   border-color: #4285f4;
   outline: none;
diff --git a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
index de9b697b..acfc3855 100644
--- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
+++ b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
@@ -17,6 +17,7 @@ provide("brushStore", BrushStore);
 
 const toolManager = inject("toolManager");
 const layerManager = inject("layerManager");
+const isShowLayerPanel = inject("isShowLayerPanel", ref(false));
 
 const props = defineProps({
   activeTool: String,
@@ -24,6 +25,7 @@ const props = defineProps({
   canvasHeight: Number,
   canvasColor: String,
   brushSize: Number,
+  enabledRedGreenMode: Boolean,
 });
 
 const emit = defineEmits([
@@ -40,9 +42,9 @@ const showBrushPanel = ref(false);
 const brushPanelRef = ref(null);
 
 // 计算属性
-const shouldShowBrushSettings = computed(() => {
-  return props.activeTool === OperationType.DRAW;
-});
+// const shouldShowBrushSettings = computed(() => {
+//   return props.activeTool === OperationType.DRAW;
+// });
 
 function updateCanvasSize() {
   if (!layerManager) {
@@ -86,6 +88,11 @@ function updateCanvasColor() {
 
 // 切换笔刷面板显示状态
 function toggleBrushPanel() {
+  // 如果笔刷没有激活  则激活笔刷工具
+  if (toolManager?.activeTool !== OperationType.DRAW) {
+    toolManager.setToolWithCommand(OperationType.DRAW);
+  }
+
   showBrushPanel.value = !showBrushPanel.value;
 }
 
@@ -176,16 +183,37 @@ function syncBrushStoreToManager() {
 
 // 点击外部时关闭笔刷面板
 function handleClickOutside(event) {
-  if (
-    showBrushPanel.value &&
-    brushPanelRef.value &&
-    !brushPanelRef.value.contains(event.target) &&
-    !event.target.closest(".brush-selector")
-  ) {
-    showBrushPanel.value = false;
+  // if (isShowLayerPanel.value) {
+  //   // 如果点击的是图层面板或其内部元素，则不关闭
+  //   if (event.target.closest(".layers-panel")) {
+  //     return;
+  //   }
+  //   // 关闭图层面板
+  //   isShowLayerPanel.value = false;
+  // }
+
+  if (showBrushPanel.value) {
+    // 检查是否点击了笔刷选择器按钮
+    if (event.target.closest(".brush-selector")) {
+      return;
+    }
+
+    // 检查是否点击了笔刷面板或其内部元素
+    if (event.target.closest(".brush-panel")) {
+      return;
+    }
+
+    // 如果都不是，则关闭面板
+    if (showBrushPanel.value) {
+      showBrushPanel.value = false;
+    }
   }
 }
 
+function showLayerPanel() {
+  isShowLayerPanel.value = !isShowLayerPanel.value;
+}
+
 onMounted(() => {
   // 获取工具管理器和笔刷管理器
   const brushManager = toolManager?.brushManager;
@@ -229,94 +257,51 @@ onMounted(() => {
 
 <template>
   <div class="canvas-header">
-    <span class="canvas-title">Canvas</span>
-
-    <!-- 默认设置 -->
-    <div
-      v-if="
+    <div class="canvas-header-wrapper">
+      <span class="canvas-title">Canvas</span>
+      <!-- 默认设置 -->
+      <!-- v-if="
         !activeTool ||
         activeTool === OperationType.SELECT ||
         activeTool === OperationType.PAN
-      "
-      class="canvas-settings"
-    >
-      <div class="setting-group">
-        <span class="setting-label">Width</span>
-        <input
-          type="text"
-          :value="canvasWidth"
-          class="setting-input"
-          @input="$emit('update:canvasWidth', Number($event.target.value))"
-          @change="updateCanvasSize"
-        />
-      </div>
-      <div class="setting-group">
-        <span class="setting-label">Height</span>
-        <input
-          type="text"
-          :value="canvasHeight"
-          class="setting-input"
-          @input="$emit('update:canvasHeight', Number($event.target.value))"
-          @change="updateCanvasSize"
-        />
-      </div>
-      <div class="setting-group">
-        <span class="setting-label">Color</span>
-        <div class="color-picker-wrapper">
+      " -->
+      <div class="canvas-settings" v-if="!props.enabledRedGreenMode">
+        <div class="setting-group">
+          <span class="setting-label">Width</span>
           <input
-            type="color"
-            :value="canvasColor"
-            class="color-picker"
-            @input="$emit('update:canvasColor', $event.target.value)"
-            @change="updateCanvasColor"
+            type="text"
+            :value="canvasWidth"
+            class="setting-input"
+            @input="$emit('update:canvasWidth', Number($event.target.value))"
+            @change="updateCanvasSize"
           />
-          <span class="color-dropdown">▼</span>
+        </div>
+        <div class="setting-group">
+          <span class="setting-label">Height</span>
+          <input
+            type="text"
+            :value="canvasHeight"
+            class="setting-input"
+            @input="$emit('update:canvasHeight', Number($event.target.value))"
+            @change="updateCanvasSize"
+          />
+        </div>
+        <div class="setting-group">
+          <span class="setting-label">Color</span>
+          <div class="color-picker-wrapper">
+            <input
+              type="color"
+              :value="canvasColor"
+              class="color-picker"
+              @input="$emit('update:canvasColor', $event.target.value)"
+              @change="updateCanvasColor"
+            />
+            <span class="color-dropdown">▼</span>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 绘图工具设置 -->
-    <div v-if="shouldShowBrushSettings" class="canvas-settings">
-      <!-- 简化的笔刷控制UI -->
       <!-- <div class="setting-group">
-        <span class="setting-label">大小:</span>
-        <input
-          type="range"
-          :value="BrushStore.state.size"
-          min="0.5"
-          max="100"
-          step="0.5"
-          class="size-slider"
-          @input="handleBrushSizeChange"
-        />
-        <span class="size-value">{{ BrushStore.state.size }}px</span>
-      </div> -->
-
-      <div class="setting-group">
-        <span class="setting-label">笔刷:</span>
-        <div class="brush-selector" @click="toggleBrushPanel">
-          <div
-            class="brush-preview"
-            :style="{
-              backgroundColor: BrushStore.state.color,
-              height: BrushStore.state.type === 'marker' ? '4px' : '2px',
-              opacity: BrushStore.state.opacity,
-            }"
-          ></div>
-          <span class="brush-dropdown">▼</span>
-        </div>
-
-        <!-- 笔刷面板 -->
-        <div
-          v-if="showBrushPanel"
-          class="brush-panel-container"
-          ref="brushPanelRef"
-        >
-          <BrushPanel />
-        </div>
-      </div>
-
-      <div class="setting-group">
         <span class="setting-label">颜色:</span>
         <div class="color-picker-wrapper">
           <input
@@ -327,64 +312,71 @@ onMounted(() => {
           />
           <span class="color-dropdown">▼</span>
         </div>
-      </div>
-    </div>
-
-    <!-- 文本工具设置 -->
-    <div v-if="activeTool === OperationType.TEXT" class="canvas-settings">
-      <div class="setting-group">
-        <span class="setting-label">Font:</span>
-        <select class="font-select">
-          <option value="Arial">Arial</option>
-          <option value="Times New Roman">Times New Roman</option>
-          <option value="Courier New">Courier New</option>
-        </select>
-      </div>
-      <div class="setting-group">
-        <span class="setting-label">Size:</span>
-        <input
-          type="number"
-          class="setting-input"
-          value="16"
-          min="8"
-          max="72"
-        />
-      </div>
-      <div class="setting-group">
-        <span class="setting-label">Color:</span>
-        <div class="color-picker-wrapper">
-          <input type="color" class="color-picker" value="#000000" />
-          <span class="color-dropdown">▼</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- 上传工具设置 -->
-    <div v-if="activeTool === OperationType.UPLOAD" class="canvas-settings">
-      <div class="setting-group">
-        <span class="setting-label">Upload Type:</span>
-        <select class="setting-select">
-          <option value="image">Image</option>
-          <option value="vector">Vector Graphics</option>
-        </select>
-      </div>
+      </div> -->
     </div>
 
     <!-- 导出设置 -->
-    <div class="setting-group export-group">
+    <!-- <div class="setting-group export-group">
       <span class="export-model-select">exportModel.select:</span>
       <span class="export-model-dropdown">▼</span>
+    </div> -->
+
+    <!-- 绘图工具设置 -->
+    <div class="canvas-settings gap-20" v-if="!props.enabledRedGreenMode">
+      <div
+        class="btn"
+        :class="{ active: showBrushPanel }"
+        @click="toggleBrushPanel"
+      >
+        <!-- <span class="setting-label">笔刷:</span>/ -->
+        <div class="brush-selector">
+          <SvgIcon name="CBrushTop" size="22"></SvgIcon>
+          <!-- <div
+            class="brush-preview"
+            :style="{
+              backgroundColor: BrushStore.state.color,
+              height: BrushStore.state.type === 'marker' ? '4px' : '2px',
+              opacity: BrushStore.state.opacity,
+            }"
+          ></div> -->
+          <!-- <span class="brush-dropdown">▼</span> -->
+        </div>
+        <!-- 笔刷面板 -->
+        <div
+          v-if="showBrushPanel"
+          class="brush-panel-container"
+          ref="brushPanelRef"
+        >
+          <Teleport to="body">
+            <BrushPanel />
+          </Teleport>
+        </div>
+      </div>
+      <div
+        class="btn"
+        :class="{ active: isShowLayerPanel }"
+        @click="showLayerPanel"
+      >
+        <SvgIcon name="CLayout" size="26"></SvgIcon>
+      </div>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .canvas-header {
   display: flex;
   align-items: center;
-  padding: 10px 20px;
   border-bottom: 1px solid #e0e0e0;
   user-select: none;
+  height: 52px;
+  overflow: hidden;
+  width: 100%;
+  .canvas-header-wrapper {
+    display: flex;
+    align-items: center;
+    flex: auto;
+  }
 }
 
 .canvas-title {
@@ -393,19 +385,44 @@ onMounted(() => {
   margin-right: 30px;
   display: flex;
   align-items: center;
-}
-
-.canvas-title::before {
-  content: "⟳";
-  margin-right: 5px;
-  font-size: 14px;
+  color: #333;
+  // &:before {
+  // //   /* content: "⟳";
+  // // margin-right: 5px;
+  // // font-size: 14px; */
+  // }
 }
 
 .canvas-settings {
   display: flex;
   align-items: center;
-  gap: 15px;
-  flex: 1;
+  gap: 8px;
+  color: #213547;
+  .btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    background-color: #f0f0f0;
+
+    &.active,
+    &:active {
+      background-color: #e6f7ff;
+      color: #1890ff;
+    }
+    &:hover {
+      background-color: #e6f7ff;
+      // color: #1890ff;
+    }
+  }
+}
+
+.gap-20 {
+  gap: 20px;
 }
 
 .setting-group {
@@ -476,15 +493,15 @@ onMounted(() => {
 }
 
 .brush-selector {
-  display: flex;
-  align-items: center;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 5px;
-  cursor: pointer;
-  background-color: white;
-  width: 80px;
-  justify-content: space-between;
+  // display: flex;
+  // align-items: center;
+  // border: 1px solid #ddd;
+  // border-radius: 4px;
+  // padding: 5px;
+  // cursor: pointer;
+  // background-color: white;
+  // width: 80px;
+  // justify-content: space-between;
 }
 
 .brush-preview {
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel.vue
deleted file mode 100644
index 98e6a8fb..00000000
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel.vue
+++ /dev/null
@@ -1,1062 +0,0 @@
-<script setup>
-import { computed, ref, nextTick, inject } from "vue";
-import { VueDraggable } from "vue-draggable-plus";
-import { isGroupLayer } from "../utils/layerHelper";
-import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
-// import SvgIcon from "../../../components/SvgIcon/index.vue";
-// 导入命令类
-import {
-  ReorderLayersCommand,
-  ReorderChildLayersCommand,
-} from "../commands/LayerCommands";
-
-const props = defineProps({
-  layers: Array,
-  activeLayerId: String,
-  activeElementId: String,
-  thumbnailManager: Object, // 添加缩略图管理器属性
-});
-
-const emit = defineEmits([
-  "add-layer",
-  "add-group-layer",
-  "set-active-layer",
-  "toggle-layer-visibility",
-  "move-layer-up",
-  "move-layer-down",
-  "remove-layer",
-  "reorder-layers", // 新增：图层重新排序事件
-  "reorder-child-layers", // 新增：子图层重新排序事件
-]);
-
-const layers = inject("layers", []);
-
-const layerManager = inject("layerManager", {});
-
-// 注入命令管理器
-const commandManager = inject("commandManager", null);
-
-// 编辑状态管理
-const editingLayerId = ref(null);
-const editingLayerName = ref("");
-
-// 计算属性：可排序的根级图层（排除背景层和固定层）
-const sortableRootLayers = computed(() => {
-  if (!layers) return [];
-  return layers.value.filter(
-    (layer) => !layer.parentId && !layer.isFixed && !layer.isBackground
-  );
-});
-
-// 计算属性：不可排序的固定图层（背景层和固定层）
-const fixedLayers = computed(() => {
-  if (!layers) return [];
-  return layers.value.filter(
-    // (layer) => !layer.parentId && (layer.isFixed || layer.isBackground)
-    (layer) => !layer.parentId && layer.isBackground // 只显示背景层，不显示固定层 - 固定层用来做红绿图模式  和  放模特
-  );
-});
-
-function addLayer() {
-  emit("add-layer");
-}
-
-function addGroupLayer() {
-  emit("add-group-layer");
-}
-
-function setActiveLayer(layerId) {
-  emit("set-active-layer", layerId);
-}
-
-function toggleLayerVisibility(layerId) {
-  emit("toggle-layer-visibility", layerId);
-}
-
-function moveLayerUp(layerId) {
-  emit("move-layer-up", layerId);
-}
-
-function moveLayerDown(layerId) {
-  emit("move-layer-down", layerId);
-}
-
-function removeLayer(layerId) {
-  emit("remove-layer", layerId);
-}
-
-function renameLayer(layerId, newName) {
-  // emit("rename-layer", layerId, newName);
-  layerManager.renameLayer(layerId, newName);
-}
-
-// 双击重命名相关方法
-function handleLayerDoubleClick(layer) {
-  // 不允许重命名背景层和固定层
-  if (layer.isBackground || layer.isFixed) {
-    return;
-  }
-
-  startEditing(layer);
-}
-
-function startEditing(layer) {
-  editingLayerId.value = layer.id;
-  editingLayerName.value = layer.name;
-
-  // 下一帧聚焦输入框并选中文本
-  nextTick(() => {
-    const inputElement = document.querySelector(
-      `input[data-layer-id="${layer.id}"]`
-    );
-    if (inputElement) {
-      inputElement.focus();
-      inputElement.select();
-    }
-  });
-}
-
-function confirmEdit() {
-  if (editingLayerId.value && editingLayerName.value.trim()) {
-    const trimmedName = editingLayerName.value.trim();
-    renameLayer(editingLayerId.value, trimmedName);
-  }
-
-  cancelEdit();
-}
-
-function cancelEdit() {
-  editingLayerId.value = null;
-  editingLayerName.value = "";
-}
-
-function handleEditKeydown(event) {
-  if (event.key === "Enter") {
-    event.preventDefault();
-    confirmEdit();
-  } else if (event.key === "Escape") {
-    event.preventDefault();
-    cancelEdit();
-  }
-}
-
-// 获取图层缩略图URL
-function getLayerThumbnail(layerId) {
-  if (props.thumbnailManager) {
-    return props.thumbnailManager.getLayerThumbnail(layerId);
-  }
-  return null;
-}
-
-// 获取图层类型图标
-function getLayerTypeIcon(layer) {
-  if (!layer) return "🖼️";
-
-  if (isGroupLayer(layer)) {
-    return "📁";
-  }
-
-  if (layer.fabricObject) {
-    switch (layer.fabricObject.type) {
-      case "image":
-        return "🖼️";
-      case "text":
-        return "📝";
-      case "rect":
-        return "▢";
-      case "circle":
-        return "⬤";
-      case "path":
-        return "✎";
-      default:
-        return "⬤";
-    }
-  }
-
-  return "🖼️";
-}
-
-// 获取图层的子图层
-function getChildLayers(parentId) {
-  if (!layers || !parentId) return [];
-  return layers.value.filter((layer) => layer.parentId === parentId);
-}
-
-// 检查图层是否为分组
-function isGroupLayerType(layer) {
-  return isGroupLayer(layer);
-}
-
-// 渲染单个图层项（递归组件）
-function renderLayerItem(layer, index) {
-  if (!layer) return null;
-
-  const isGroup = isGroupLayerType(layer);
-  const children = isGroup ? getChildLayers(layer.id) : [];
-
-  return {
-    id: layer.id,
-    name: layer.name,
-    isGroup: isGroup,
-    children: children,
-    fabricObject: layer.fabricObject,
-    visible: layer.visible,
-  };
-}
-
-// 处理根级图层拖拽排序
-async function handleRootLayersSort(event) {
-  if (!commandManager) {
-    console.warn("命令管理器未注入，使用回退方案");
-    const { newIndex, oldIndex } = event;
-    // 修复：直接使用VueDraggable提供的索引，不添加固定层偏移
-    emit("reorder-layers", {
-      oldIndex: oldIndex,
-      newIndex: newIndex,
-      layerId: sortableRootLayers.value[oldIndex]?.id,
-    });
-    return;
-  }
-
-  const { newIndex, oldIndex } = event;
-
-  // 修复：直接使用VueDraggable提供的索引，这些索引已经是相对于sortableRootLayers数组的正确索引
-  // 不需要添加固定层偏移，因为sortableRootLayers已经过滤掉了固定层和背景层
-
-  const layerToMove = sortableRootLayers.value[oldIndex];
-  if (!layerToMove) {
-    console.error("找不到要移动的图层");
-    return;
-  }
-
-  // 需要找到这个图层在完整图层列表中的真实索引
-  const realOldIndex = layers.value.findIndex(
-    (layer) => layer.id === layerToMove.id
-  );
-  const targetLayer = sortableRootLayers.value[newIndex];
-  let realNewIndex;
-
-  if (targetLayer) {
-    // 找到目标位置图层在完整列表中的索引
-    realNewIndex = layers.value.findIndex(
-      (layer) => layer.id === targetLayer.id
-    );
-  } else {
-    // 如果目标位置超出范围，放到可排序图层的最后
-    const lastSortableLayer =
-      sortableRootLayers.value[sortableRootLayers.value.length - 1];
-    realNewIndex = layers.value.findIndex(
-      (layer) => layer.id === lastSortableLayer.id
-    );
-  }
-
-  try {
-    const command = new ReorderLayersCommand({
-      layers,
-      oldIndex: realOldIndex,
-      newIndex: realNewIndex,
-      layerId: layerToMove.id,
-    });
-
-    await commandManager.execute(command);
-    console.log(
-      `✅ 图层排序命令执行成功: ${layerToMove.name} (${realOldIndex} -> ${realNewIndex})`
-    );
-  } catch (error) {
-    console.error("❌ 图层排序命令执行失败:", error);
-    // 发生错误时，可以选择回退到事件发射模式
-    emit("reorder-layers", {
-      oldIndex: realOldIndex,
-      newIndex: realNewIndex,
-      layerId: layerToMove.id,
-    });
-  }
-}
-
-// 处理子图层拖拽排序
-async function handleChildLayersSort(event, parentId) {
-  if (!commandManager) {
-    console.warn("命令管理器未注入，使用回退方案");
-    const { newIndex, oldIndex } = event;
-    emit("reorder-child-layers", {
-      parentId,
-      oldIndex,
-      newIndex,
-      layerId: getChildLayers(parentId)[oldIndex]?.id,
-    });
-    return;
-  }
-
-  const { newIndex, oldIndex } = event;
-  const childLayers = getChildLayers(parentId);
-  const layerToMove = childLayers[oldIndex];
-
-  if (!layerToMove) {
-    console.error("找不到要移动的子图层");
-    return;
-  }
-
-  try {
-    const command = new ReorderChildLayersCommand({
-      layers,
-      parentId,
-      oldIndex,
-      newIndex,
-      layerId: layerToMove.id,
-    });
-
-    await commandManager.execute(command);
-    console.log(`✅ 子图层排序命令执行成功: ${layerToMove.name}`);
-  } catch (error) {
-    console.error("❌ 子图层排序命令执行失败:", error);
-    // 发生错误时，可以选择回退到事件发射模式
-    emit("reorder-child-layers", {
-      parentId,
-      oldIndex,
-      newIndex,
-      layerId: layerToMove.id,
-    });
-  }
-}
-
-// 子图层拖拽相关
-const childLayerDragInfo = ref({
-  parentId: null,
-  oldIndex: null,
-  newIndex: null,
-});
-
-// 子图层拖拽开始
-function onChildDragStart(event) {
-  const { index, element } = event;
-
-  childLayerDragInfo.value = {
-    parentId: element.parentId,
-    oldIndex: index,
-    newIndex: index,
-  };
-}
-
-// 子图层拖拽结束
-function onChildDragEnd(event) {
-  const { index, element } = event;
-
-  // 更新新索引
-  childLayerDragInfo.value.newIndex = index;
-
-  // 触发排序事件
-  emit("reorder-child-layers", {
-    parentId: childLayerDragInfo.value.parentId,
-    oldIndex: childLayerDragInfo.value.oldIndex,
-    newIndex: childLayerDragInfo.value.newIndex,
-    layerId: element.id,
-  });
-}
-
-// 子图层排序变化
-function onChildLayersChange(event) {
-  const { moved, added, removed } = event;
-
-  // 处理子图层排序变化
-  if (moved) {
-    const { oldIndex, newIndex } = moved;
-
-    emit("reorder-child-layers", {
-      parentId: added.parentId,
-      oldIndex,
-      newIndex,
-      layerId: added.id,
-    });
-  }
-}
-
-// 选择子图层
-function selectChildLayer(childLayerId) {
-  setActiveLayer(childLayerId);
-}
-
-// 显示右键菜单
-function showContextMenu(event, layer) {
-  event.preventDefault();
-
-  // TODO: 实现右键菜单逻辑
-}
-
-// 子图层操作方法
-function toggleChildLayerVisibility(childLayerId) {
-  emit("toggle-layer-visibility", childLayerId);
-}
-
-function toggleChildLayerLock(childLayerId) {
-  if (layerManager.toggleLayerLock) {
-    layerManager.toggleLayerLock(childLayerId);
-  }
-}
-
-function startChildLayerEdit(childLayer) {
-  childLayer.editing = true;
-  childLayer.tempName = childLayer.name;
-
-  nextTick(() => {
-    const inputElement = document.querySelector(
-      `input[data-child-layer-id="${childLayer.id}"]`
-    );
-    if (inputElement) {
-      inputElement.focus();
-      inputElement.select();
-    }
-  });
-}
-
-function finishChildLayerEdit(childLayer) {
-  if (childLayer.tempName && childLayer.tempName.trim()) {
-    const trimmedName = childLayer.tempName.trim();
-    renameLayer(childLayer.id, trimmedName);
-    childLayer.name = trimmedName;
-  }
-
-  childLayer.editing = false;
-  childLayer.tempName = "";
-}
-
-function cancelChildLayerEdit(childLayer) {
-  childLayer.editing = false;
-  childLayer.tempName = "";
-}
-
-// 更新子图层排序
-function updateChildLayers(parentId, newChildren) {
-  // 这个方法在使用 model-value 方式时需要实现
-  // 但由于我们使用的是事件处理方式，这里可以为空
-  console.log("updateChildLayers called", parentId, newChildren);
-}
-
-function getLayerTypeText(layerType) {
-  const typeMap = {
-    EMPTY: "空图层",
-    TEXT: "文本",
-    IMAGE: "图片",
-    SHAPE: "形状",
-    GROUP: "组合",
-    BACKGROUND: "背景",
-    FIXED: "固定",
-  };
-
-  return typeMap[layerType] || "未知";
-}
-</script>
-
-<template>
-  <div class="layers-panel">
-    <div class="layers-header">
-      <h3>{{ $t("图层") }}</h3>
-      <div class="layer-actions-group">
-        <div class="add-layer-btn" @click="addLayer" :title="$t('添加图层')">
-          <SvgIcon name="CLayout" size="16"></SvgIcon>
-        </div>
-      </div>
-    </div>
-
-    <div class="layers-list">
-      <!-- 可排序的根级图层 -->
-      <VueDraggable
-        v-model="sortableRootLayers"
-        @end="handleRootLayersSort"
-        class="sortable-layers"
-        :animation="200"
-        :disabled="false"
-        handle=".layer-header"
-        ghost-class="ghost"
-        chosen-class="chosen"
-        drag-class="drag"
-      >
-        <!-- 遍历可排序的根级图层 -->
-        <template v-for="(layer, index) in sortableRootLayers" :key="layer.id">
-          <div
-            class="layer-item"
-            :class="{
-              active: layer.id === activeLayerId,
-              'group-layer': isGroupLayerType(layer),
-              editing: editingLayerId === layer.id,
-            }"
-            @click="setActiveLayer(layer.id)"
-          >
-            <!-- 图层头部 -->
-            <div class="layer-header">
-              <!-- 可见性切换 -->
-              <div
-                class="visibility-btn"
-                @click.stop="toggleLayerVisibility(layer.id)"
-                :title="$t('显示/隐藏图层')"
-              >
-                <SvgIcon v-if="layer.visible" name="CEye"></SvgIcon>
-                <SvgIcon v-else name="CUnEye"></SvgIcon>
-              </div>
-
-              <!-- 图层预览图标 -->
-              <div class="layer-review">
-                <img
-                  v-if="getLayerThumbnail(layer.id)"
-                  :src="getLayerThumbnail(layer.id)"
-                  class="layer-thumbnail"
-                  :alt="$t('图层预览')"
-                />
-                <span v-else>{{ getLayerTypeIcon(layer) }}</span>
-              </div>
-
-              <!-- 图层名称 -->
-              <div
-                class="layer-name-container"
-                @dblclick="handleLayerDoubleClick(layer)"
-              >
-                <span
-                  v-if="editingLayerId !== layer.id"
-                  class="layer-name text-ellipsis"
-                >
-                  {{ layer.name }}
-                </span>
-                <input
-                  v-else
-                  v-model="editingLayerName"
-                  :data-layer-id="layer.id"
-                  class="layer-name-input"
-                  @blur="confirmEdit"
-                  @keydown="handleEditKeydown"
-                  @click.stop
-                  @dblclick.stop
-                />
-              </div>
-
-              <!-- 图层操作按钮 -->
-              <div class="layer-actions">
-                <!-- 删除按钮，直接点击删除，不需要二次确认 -->
-                <div
-                  class="delete-btn"
-                  :title="$t('删除图层')"
-                  @click.stop="removeLayer(layer.id)"
-                  v-if="layers.length > 1"
-                >
-                  <SvgIcon name="CDelete" size="16"></SvgIcon>
-                </div>
-              </div>
-            </div>
-
-            <!-- 子图层列表 (递归渲染) -->
-            <div
-              v-if="
-                isGroupLayerType(layer) && getChildLayers(layer.id).length > 0
-              "
-              class="child-layers"
-            >
-              <VueDraggable
-                :model-value="getChildLayers(layer.id)"
-                @update:model-value="
-                  (newChildren) => updateChildLayers(layer.id, newChildren)
-                "
-                @end="(event) => handleChildLayersSort(event, layer.id)"
-                group="child-layers"
-                item-key="id"
-                :animation="150"
-                ghost-class="ghost"
-                chosen-class="chosen"
-                drag-class="drag"
-                :disabled="false"
-              >
-                <template #item="{ element: childLayer, index: childIndex }">
-                  <div
-                    :key="childLayer.id"
-                    :class="[
-                      'layer-item child-layer',
-                      {
-                        active: activeLayerId === childLayer.id,
-                        'child-layer': true,
-                        invisible: !childLayer.visible,
-                        locked: childLayer.locked,
-                      },
-                    ]"
-                    @click="selectChildLayer(childLayer.id)"
-                    @contextmenu.prevent="showContextMenu($event, childLayer)"
-                  >
-                    <!-- 子图层缩进 -->
-                    <div class="layer-indent"></div>
-
-                    <!-- 子图层可见性按钮 -->
-                    <button
-                      :class="[
-                        'visibility-btn',
-                        { hidden: !childLayer.visible },
-                      ]"
-                      @click.stop="toggleChildLayerVisibility(childLayer.id)"
-                      :title="childLayer.visible ? '隐藏图层' : '显示图层'"
-                    >
-                      <SvgIcon :name="childLayer.visible ? 'CEye' : 'CUnEye'" />
-                    </button>
-
-                    <!-- 子图层缩略图 -->
-                    <div class="layer-thumbnail">
-                      <img
-                        v-if="childLayer.thumbnail"
-                        :src="childLayer.thumbnail"
-                        :alt="childLayer.name"
-                        class="thumbnail-image"
-                      />
-                      <div v-else class="empty-thumbnail"></div>
-                    </div>
-
-                    <!-- 子图层信息 -->
-                    <div class="layer-info">
-                      <div
-                        v-if="!childLayer.editing"
-                        class="layer-name"
-                        @dblclick="startChildLayerEdit(childLayer)"
-                      >
-                        {{ childLayer.name }}
-                      </div>
-                      <input
-                        v-else
-                        v-model="childLayer.tempName"
-                        class="layer-name-input"
-                        @blur="finishChildLayerEdit(childLayer)"
-                        @keyup.enter="finishChildLayerEdit(childLayer)"
-                        @keyup.esc="cancelChildLayerEdit(childLayer)"
-                        ref="childLayerInput"
-                      />
-                      <div class="layer-status">
-                        <span
-                          v-if="childLayer.locked"
-                          class="status-icon locked"
-                        >
-                          <SvgIcon name="CLock" />
-                        </span>
-                        <span class="layer-type">{{
-                          getLayerTypeText(childLayer.type)
-                        }}</span>
-                      </div>
-                    </div>
-
-                    <!-- 子图层操作按钮 -->
-                    <div class="layer-actions">
-                      <button
-                        :class="['lock-btn', { locked: childLayer.locked }]"
-                        @click.stop="toggleChildLayerLock(childLayer.id)"
-                        :title="childLayer.locked ? '解锁图层' : '锁定图层'"
-                      >
-                        <SvgIcon
-                          :name="childLayer.locked ? 'CLock' : 'CUnLock'"
-                        />
-                      </button>
-
-                      <button
-                        class="more-btn"
-                        @click.stop="showContextMenu($event, childLayer)"
-                        title="更多操作"
-                      >
-                        <SvgIcon name="CLayout" />
-                      </button>
-                    </div>
-                  </div>
-                </template>
-              </VueDraggable>
-            </div>
-          </div>
-        </template>
-      </VueDraggable>
-
-      <!-- 固定层（背景层和固定层） -->
-      <div v-if="fixedLayers.length > 0" class="fixed-layers">
-        <!-- 遍历固定层 -->
-        <div
-          v-for="(layer, index) in fixedLayers"
-          :key="layer.id"
-          class="layer-item"
-          :class="{
-            active: layer.id === activeLayerId,
-            'group-layer': isGroupLayerType(layer),
-            editing: editingLayerId === layer.id,
-          }"
-        >
-          <!-- 图层头部 -->
-          <div class="layer-header">
-            <!-- 可见性切换 -->
-            <div
-              class="visibility-btn"
-              @click.stop="toggleLayerVisibility(layer.id)"
-              :title="$t('显示/隐藏图层')"
-            >
-              <SvgIcon v-if="layer.visible" name="CEye"></SvgIcon>
-              <SvgIcon v-else name="CUnEye"></SvgIcon>
-            </div>
-
-            <!-- 图层预览图标 -->
-            <div class="layer-review">
-              <img
-                v-if="getLayerThumbnail(layer.id)"
-                :src="getLayerThumbnail(layer.id)"
-                class="layer-thumbnail"
-                :alt="$t('图层预览')"
-              />
-              <span v-else>{{ getLayerTypeIcon(layer) }}</span>
-            </div>
-
-            <!-- 图层名称 -->
-            <div
-              class="layer-name-container"
-              @dblclick="handleLayerDoubleClick(layer)"
-            >
-              <span class="layer-name text-ellipsis">
-                {{ layer.name }}
-              </span>
-            </div>
-
-            <!-- 图层操作按钮 -->
-            <div class="layer-actions">
-              <!-- 如果是背景层，显示一个标识图标 -->
-              <div
-                class="background-indicator"
-                v-if="layer.isBackground"
-                :title="$t('背景层')"
-              >
-                <span class="background-icon"><SvgIcon name="CLock" /></span>
-              </div>
-              <!-- 如果是固定层，显示一个标识图标 -->
-              <div
-                class="fixed-indicator"
-                v-if="layer.isFixed"
-                :title="$t('固定层')"
-              >
-                <span class="fixed-icon">📌</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.text-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.layers-panel {
-  width: 250px;
-  border-left: 1px solid #e0e0e0;
-  background-color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-  z-index: 6;
-}
-
-.layers-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.layers-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-}
-
-.layer-actions-group {
-  display: flex;
-  gap: 8px;
-}
-
-.add-layer-btn,
-.add-group-btn {
-  width: 30px;
-  height: 30px;
-  background: none;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.add-layer-btn:hover,
-.add-group-btn:hover {
-  background-color: #f0f0f0;
-}
-
-.group-icon {
-  font-size: 14px;
-}
-
-.layers-list {
-  position: relative;
-  flex: 1;
-  overflow-y: auto;
-  /* padding: 10px; */
-}
-
-.layer-item {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  /* border-radius: 4px; */
-  cursor: pointer;
-  transition: all 0.2s ease;
-  /* margin-bottom: 5px; */
-  border: 1px solid transparent;
-  border-left: 0;
-  border-right: 0;
-  border: none;
-  border-bottom: 1px solid #f5f2f2;
-}
-
-.layer-item.group-layer {
-  background-color: rgba(240, 248, 255, 0.3);
-  border-color: #e6f7ff;
-}
-
-.layer-item:hover {
-  background-color: #f0f0f0;
-  border-color: #e0e0e0;
-}
-
-.layer-item.active {
-  background-color: #e6f7ff;
-  border-color: #91d5ff;
-}
-
-.layer-item.editing {
-  background-color: #fff7e6;
-  border-color: #ffd666;
-}
-
-.layer-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.layer-review {
-  /* background-color: rgba(0, 0, 0, 0.05); */
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 6px;
-  overflow: hidden;
-  flex: none;
-  background: repeating-conic-gradient(#f5f5f5 0% 25%, #ffffff 0% 50%) 50% /
-    10px 10px;
-  border: 1px solid #e0e0e0;
-}
-
-/* 添加缩略图样式 */
-.layer-thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.visibility-btn {
-  width: 22px;
-  height: 22px;
-  cursor: pointer;
-  flex: none;
-}
-
-.layer-name-container {
-  flex: 1;
-  margin: 0 10px;
-  max-width: 92px;
-}
-
-.layer-name {
-  color: #333;
-  font-size: 14px;
-  text-align: left;
-  display: block;
-  width: 100%;
-}
-
-.layer-name-input {
-  width: 100%;
-  padding: 2px 4px;
-  border: 1px solid #1890ff;
-  border-radius: 3px;
-  font-size: 14px;
-  color: #333;
-  background-color: #fff;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.layer-name-input:focus {
-  border-color: #40a9ff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.layer-actions {
-  position: absolute;
-  right: 10px;
-  display: flex;
-}
-
-.layer-action-btn {
-  background: none;
-  border: none;
-  padding: 2px;
-  font-size: 12px;
-  color: #666;
-  opacity: 0.7;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.layer-action-btn:hover {
-  opacity: 1;
-  background: none;
-}
-
-.delete-btn {
-  font-size: 16px;
-  color: #999;
-  cursor: pointer;
-  width: 22px;
-  height: 22px;
-}
-
-.delete-btn:hover {
-  color: #ff4d4f;
-}
-
-/* 图层元素相关样式 */
-.layer-elements {
-  margin-top: 8px;
-  margin-left: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-/* 子图层样式 */
-.child-layers {
-  margin-left: 20px;
-  margin-top: 5px;
-}
-
-.child-layer {
-  padding: 8px;
-  background-color: rgba(240, 240, 240, 0.3);
-  border-left: 2px solid #e0e0e0;
-}
-
-.child-layer:hover {
-  background-color: rgba(224, 224, 224, 0.5);
-}
-
-.child-layer.active {
-  background-color: rgba(230, 247, 255, 0.5);
-  border-left: 2px solid #1890ff;
-}
-
-.child-layer.editing {
-  background-color: rgba(255, 247, 230, 0.5);
-  border-left: 2px solid #ffd666;
-}
-
-.background-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 4px;
-}
-
-.background-icon {
-  font-size: 22px;
-  color: #999;
-}
-
-/* 固定图层样式 */
-.fixed-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 4px;
-}
-
-.fixed-icon {
-  font-size: 14px;
-  color: #1890ff;
-}
-
-/* 拖拽排序样式 */
-.sortable-layers {
-  width: 100%;
-}
-
-/* 拖拽时的样式 */
-.ghost {
-  opacity: 0.5;
-  background-color: #f0f0f0;
-  border: 2px dashed #1890ff;
-}
-
-.chosen {
-  background-color: #e6f7ff;
-  border: 1px solid #1890ff;
-}
-
-.drag {
-  opacity: 0.8;
-  transform: rotate(5deg);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* 子图层拖拽样式 */
-.child-layers .ghost {
-  opacity: 0.4;
-  background-color: #fff7e6;
-  border: 2px dashed #faad14;
-}
-
-.child-layers .chosen {
-  background-color: #fff7e6;
-  border: 1px solid #faad14;
-}
-
-.child-layers .drag {
-  opacity: 0.7;
-  transform: rotate(3deg);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-/* 拖拽占位符样式 */
-.sortable-fallback {
-  display: none;
-}
-
-.sortable-ghost {
-  opacity: 0.4;
-  background-color: #f0f8ff;
-  border: 2px dashed #1890ff;
-}
-
-/* 拖拽禁用状态 */
-.layer-item.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.layer-item.disabled:hover {
-  background-color: transparent;
-}
-</style>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/ContextMenu.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/ContextMenu.vue
new file mode 100644
index 00000000..5542ee01
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/ContextMenu.vue
@@ -0,0 +1,369 @@
+<script setup>
+import { ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+import SvgIcon from "../../../SvgIcon/index.vue";
+
+const props = defineProps({
+  visible: Boolean,
+  position: {
+    type: Object,
+    default: () => ({ x: 0, y: 0 }),
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["close", "select"]);
+
+const menuRef = ref(null);
+const adjustedPosition = ref({ x: 0, y: 0 });
+const hoveredItem = ref(null);
+const submenuPositions = ref(new Map());
+const hideTimer = ref(null); // 添加隐藏定时器
+
+// 计算菜单位置，处理边界问题
+const calculatePosition = () => {
+  if (!menuRef.value || !props.visible) return;
+
+  const menu = menuRef.value;
+  const menuRect = menu.getBoundingClientRect();
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  let x = props.position.x;
+  let y = props.position.y;
+
+  // 右边界检测
+  if (x + menuRect.width > windowWidth - 10) {
+    x = x - menuRect.width;
+  }
+
+  // 底边界检测
+  if (y + menuRect.height > windowHeight - 10) {
+    y = windowHeight - menuRect.height - 10;
+  }
+
+  // 左边界检测
+  if (x < 10) {
+    x = 10;
+  }
+
+  // 顶边界检测
+  if (y < 10) {
+    y = 10;
+  }
+
+  adjustedPosition.value = { x, y };
+};
+
+// 计算子菜单位置
+const calculateSubmenuPosition = (itemElement, itemIndex) => {
+  if (!itemElement || !menuRef.value) return { x: 0, y: 0, direction: "right" };
+
+  const itemRect = itemElement.getBoundingClientRect();
+  const menuRect = menuRef.value.getBoundingClientRect();
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  // 预估子菜单宽度（可以根据实际情况调整）
+  const submenuWidth = 200;
+  const submenuHeight = 300; // 预估高度
+
+  let x = itemRect.right + 4;
+  // 直接使用菜单项相对于主菜单容器的偏移量
+  let y = itemElement.offsetTop;
+  let direction = "right";
+
+  // 右边界检测，如果右侧空间不足，显示在左侧
+  if (x + submenuWidth > windowWidth - 10) {
+    x = itemRect.left - submenuWidth - 4;
+    direction = "left";
+  }
+
+  // 底边界检测 - 基于子菜单的绝对位置检查
+  const absoluteSubmenuBottom = itemRect.top + submenuHeight;
+  if (absoluteSubmenuBottom > windowHeight - 10) {
+    // 计算可用的最大Y位置（相对于主菜单）
+    const maxAbsoluteY = windowHeight - submenuHeight - 10;
+    const maxRelativeY = maxAbsoluteY - menuRect.top;
+    y = Math.max(0, maxRelativeY);
+  }
+
+  // 左边界检测
+  if (x < 10) {
+    x = 10;
+    direction = "right";
+  }
+
+  // 确保 y 不为负数
+  if (y < 0) {
+    y = 0;
+  }
+
+  y = 0;
+
+  const position = { x, y, direction };
+  submenuPositions.value.set(itemIndex, position);
+  return position;
+};
+
+// 清除隐藏定时器
+const clearHideTimer = () => {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+    hideTimer.value = null;
+  }
+};
+
+// 显示子菜单
+const showSubmenu = (item, index, element) => {
+  if (item.children && item.children.length > 0) {
+    clearHideTimer();
+    hoveredItem.value = index;
+    nextTick(() => {
+      calculateSubmenuPosition(element, index);
+    });
+  }
+};
+
+// 隐藏子菜单（延迟）
+const hideSubmenu = (index) => {
+  clearHideTimer();
+  hideTimer.value = setTimeout(() => {
+    if (hoveredItem.value === index) {
+      hoveredItem.value = null;
+    }
+  }, 150);
+};
+
+// 处理鼠标进入菜单项
+const handleItemMouseEnter = (item, index, event) => {
+  const element = event.target.closest(".context-menu-item");
+  showSubmenu(item, index, element);
+};
+
+// 处理鼠标在菜单项内移动
+const handleItemMouseMove = (item, index, event) => {
+  // 如果当前菜单项有子菜单但子菜单未显示，则显示子菜单
+  if (
+    item.children &&
+    item.children.length > 0 &&
+    hoveredItem.value !== index
+  ) {
+    const element = event.target.closest(".context-menu-item");
+    showSubmenu(item, index, element);
+  }
+};
+
+// 处理鼠标离开菜单项
+const handleItemMouseLeave = (item, index) => {
+  // 只有当有子菜单时才延迟隐藏
+  if (item.children && item.children.length > 0) {
+    hideSubmenu(index);
+  } else {
+    hoveredItem.value = null;
+  }
+};
+
+// 处理鼠标进入子菜单
+const handleSubmenuMouseEnter = (index) => {
+  clearHideTimer();
+  hoveredItem.value = index;
+};
+
+// 处理鼠标离开子菜单
+const handleSubmenuMouseLeave = (index) => {
+  hideSubmenu(index);
+};
+
+// 监听可见性和位置变化
+watch([() => props.visible, () => props.position], () => {
+  if (props.visible) {
+    nextTick(() => {
+      calculatePosition();
+    });
+  } else {
+    hoveredItem.value = null;
+    submenuPositions.value.clear();
+  }
+});
+
+// 处理菜单项点击
+const handleItemClick = (item, index) => {
+  if (item.disabled || item.type === "divider") return;
+
+  // 如果有子菜单，不关闭菜单
+  if (item.children && item.children.length > 0) {
+    return;
+  }
+
+  emit("select", item, index);
+
+  if (item.action) {
+    item.action();
+  }
+
+  emit("close");
+};
+
+// 处理子菜单项点击
+const handleSubItemClick = (subItem, parentIndex, subIndex) => {
+  if (subItem.disabled || subItem.type === "divider") return;
+
+  emit("select", subItem, `${parentIndex}-${subIndex}`);
+
+  if (subItem.action) {
+    subItem.action();
+  }
+
+  emit("close");
+};
+
+// 处理外部点击关闭
+const handleOutsideClick = (event) => {
+  if (menuRef.value && !menuRef.value.contains(event.target)) {
+    emit("close");
+  }
+};
+
+// 处理 ESC 键关闭
+const handleEscKey = (event) => {
+  if (event.key === "Escape") {
+    emit("close");
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("click", handleOutsideClick, true);
+  document.addEventListener("contextmenu", handleOutsideClick, true);
+  document.addEventListener("keydown", handleEscKey);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleOutsideClick, true);
+  document.removeEventListener("contextmenu", handleOutsideClick, true);
+  document.removeEventListener("keydown", handleEscKey);
+});
+</script>
+
+<template>
+  <teleport to="body">
+    <transition name="context-menu">
+      <div
+        v-if="visible"
+        ref="menuRef"
+        class="context-menu"
+        :style="{
+          top: `${adjustedPosition.y}px`,
+          left: `${adjustedPosition.x}px`,
+        }"
+        @contextmenu.prevent
+      >
+        <template v-for="(item, index) in items" :key="index">
+          <!-- 分隔线 -->
+          <div
+            v-if="item.type === 'divider'"
+            class="context-menu-divider"
+          ></div>
+
+          <!-- 菜单项 -->
+          <div
+            v-else
+            class="context-menu-item"
+            :class="{
+              disabled: item.disabled,
+              danger: item.danger,
+              'has-children': item.children && item.children.length > 0,
+              hovered: hoveredItem === index,
+            }"
+            @click="handleItemClick(item, index)"
+            @mouseenter="handleItemMouseEnter(item, index, $event)"
+            @mousemove="handleItemMouseMove(item, index, $event)"
+            @mouseleave="handleItemMouseLeave(item, index)"
+          >
+            <span class="context-menu-icon" v-if="item.icon">
+              <SvgIcon
+                :name="item.icon"
+                size="14"
+                :style="{
+                  transform: item.inverIcon ? `rotate(90deg)` : 'none',
+                }"
+              />
+            </span>
+            <span class="context-menu-label">{{ item.label }}</span>
+            <span class="context-menu-shortcut" v-if="item.shortcut">
+              {{ item.shortcut }}
+            </span>
+            <span
+              class="context-menu-arrow"
+              v-if="item.children && item.children.length > 0"
+            >
+              <SvgIcon name="CRight" size="12" />
+            </span>
+
+            <!-- 子菜单 -->
+            <transition name="context-submenu">
+              <div
+                v-if="
+                  item.children &&
+                  item.children.length > 0 &&
+                  hoveredItem === index
+                "
+                class="context-submenu"
+                :class="{
+                  'submenu-left':
+                    submenuPositions.get(index)?.direction === 'left',
+                }"
+                @mouseenter="handleSubmenuMouseEnter(index)"
+                @mouseleave="handleSubmenuMouseLeave"
+              >
+                <template
+                  v-for="(subItem, subIndex) in item.children"
+                  :key="subIndex"
+                >
+                  <!-- 子菜单分隔线 -->
+                  <div
+                    v-if="subItem.type === 'divider'"
+                    class="context-menu-divider"
+                  ></div>
+
+                  <!-- 子菜单项 -->
+                  <div
+                    v-else
+                    class="context-menu-item"
+                    :class="{
+                      disabled: subItem.disabled,
+                      danger: subItem.danger,
+                    }"
+                    @click="handleSubItemClick(subItem, index, subIndex)"
+                  >
+                    <span class="context-menu-icon" v-if="subItem.icon">
+                      <SvgIcon
+                        :name="subItem.icon"
+                        size="14"
+                        :style="{
+                          transform: subItem.inverIcon
+                            ? `rotate(90deg)`
+                            : 'none',
+                        }"
+                      />
+                    </span>
+                    <span class="context-menu-label">{{ subItem.label }}</span>
+                    <span class="context-menu-shortcut" v-if="subItem.shortcut">
+                      {{ subItem.shortcut }}
+                    </span>
+                  </div>
+                </template>
+              </div>
+            </transition>
+          </div>
+        </template>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<style scoped lang="less">
+@import "./contextMenu.less";
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
new file mode 100644
index 00000000..c2da15e7
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
@@ -0,0 +1,514 @@
+<script setup>
+import { ref, nextTick, computed, inject } from "vue";
+import { Checkbox } from "ant-design-vue";
+import { VueDraggable } from "vue-draggable-plus";
+import SvgIcon from "../../../SvgIcon/index.vue";
+import { isGroupLayer } from "../../utils/layerHelper";
+
+// 设置组件名称，用于递归渲染
+defineOptions({
+  name: "LayerItem",
+});
+
+const props = defineProps({
+  layer: {
+    type: Object,
+    required: true,
+  },
+  isChild: {
+    type: Boolean,
+    default: false,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  isMultiSelectMode: {
+    type: Boolean,
+    default: false,
+  },
+  isEditing: {
+    type: Boolean,
+    default: false,
+  },
+  editingName: {
+    type: String,
+    default: "",
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  thumbnailUrl: {
+    type: String,
+    default: null,
+  },
+  isHidenDragHandle: {
+    type: Boolean,
+    default: false,
+  },
+  expandedGroupIds: {
+    type: Set,
+    default: () => new Set(),
+  },
+});
+
+const emit = defineEmits([
+  "click",
+  "double-click",
+  "context-menu",
+  "checkbox-change",
+  "toggle-visibility",
+  "toggle-lock",
+  "delete",
+  "edit-confirm",
+  "edit-cancel",
+  "edit-keydown",
+  "touch-start",
+  "touch-move",
+  "touch-end",
+  "child-layers-sort",
+  "update-child-layers",
+  "toggle-group-expanded",
+  // 新增子图层专用事件
+  "toggle-child-visibility",
+  "toggle-child-lock",
+  "delete-child",
+  "rename-child",
+  // v-model相关事件
+  "update:editingName",
+]);
+
+const layerManager = inject("layerManager", null);
+
+// 计算属性
+const isGroupLayerType = computed(() => {
+  return isGroupLayer(props.layer);
+});
+
+// 计算属性：检查组图层是否展开
+const isGroupExpanded = computed(() => {
+  return props.expandedGroupIds.has(props.layer.id);
+});
+
+// 获取子图层
+const childLayers = computed(() => {
+  if (!isGroupLayerType.value) return [];
+
+  // 优先使用 layer.children 属性
+  if (props.layer.children && Array.isArray(props.layer.children)) {
+    return props.layer.children;
+  }
+
+  return [];
+});
+
+// 切换组图层展开/收起状态
+const toggleGroupExpanded = () => {
+  emit("toggle-group-expanded", props.layer.id);
+};
+
+// 获取图层类型图标
+function getLayerTypeIcon(layer) {
+  if (!layer) return "🖼️";
+
+  if (isGroupLayer(layer)) {
+    return "📁";
+  }
+
+  if (layer.fabricObject) {
+    switch (layer.fabricObject.type) {
+      case "image":
+        return "🖼️";
+      case "text":
+        return "📝";
+      case "rect":
+        return "▢";
+      case "circle":
+        return "⬤";
+      case "path":
+        return "✎";
+      default:
+        return "⬤";
+    }
+  }
+
+  return "🖼️";
+}
+
+function getLayerTypeText(layerType) {
+  const typeMap = {
+    EMPTY: "空图层",
+    TEXT: "文本",
+    IMAGE: "图片",
+    SHAPE: "形状",
+    GROUP: "组合",
+    BACKGROUND: "背景",
+    FIXED: "固定",
+  };
+
+  return typeMap[layerType] || "未知";
+}
+
+// 事件处理
+function handleClick(event) {
+  emit("click", props.layer, event);
+}
+
+function handleDoubleClick(event) {
+  emit("double-click", props.layer, event);
+}
+
+function handleContextMenu(event) {
+  emit("context-menu", event, props.layer);
+}
+
+function handleCheckboxChange(event) {
+  emit("checkbox-change", props.layer.id, event);
+}
+
+function handleToggleVisibility() {
+  if (props.isChild) {
+    // 子图层需要传递父图层ID - 从父级组件获取
+    const parentId = props.layer.parentId || findParentLayerId();
+    emit("toggle-child-visibility", props.layer.id, parentId);
+  } else {
+    // 一级图层
+    emit("toggle-visibility", props.layer.id);
+  }
+}
+
+function handleToggleLock() {
+  if (props.isChild) {
+    // 子图层需要传递父图层ID - 从父级组件获取
+    const parentId = props.layer.parentId || findParentLayerId();
+    emit("toggle-child-lock", props.layer.id, parentId);
+  } else {
+    // 一级图层
+    emit("toggle-lock", props.layer);
+  }
+}
+
+function handleDelete() {
+  if (!props.canDelete) {
+    console.warn("当前图层无法删除:", props.layer.id);
+    return;
+  }
+  if (props.isChild) {
+    // 子图层删除：需要传递父图层ID
+    const parentId = props.layer.parentId || findParentLayerId();
+    if (parentId) {
+      emit("delete-child", props.layer.id, parentId);
+    } else {
+      console.warn("无法找到子图层的父图层ID:", props.layer.id);
+    }
+  } else {
+    // 一级图层删除
+    emit("delete", props.layer.id);
+  }
+}
+
+function handleEditConfirm() {
+  if (props.isChild) {
+    // 子图层重命名：需要传递父图层ID
+    const parentId = props.layer.parentId || findParentLayerId();
+    if (props.editingName && props.editingName.trim() && parentId) {
+      emit("rename-child", props.layer.id, parentId, props.editingName.trim());
+    } else if (!parentId) {
+      console.warn("无法找到子图层的父图层ID:", props.layer.id);
+    }
+    // 发送编辑取消事件，清理编辑状态
+    emit("edit-cancel");
+  } else {
+    // 一级图层重命名
+    emit("edit-confirm");
+  }
+}
+
+function handleEditCancel() {
+  emit("edit-cancel");
+}
+
+function handleEditKeydown(event) {
+  emit("edit-keydown", event); // 修复事件名称，从 "edit-keyboard" 改为 "edit-keydown"
+}
+
+function handleTouchStart(event) {
+  emit("touch-start", event, props.layer);
+}
+
+function handleTouchMove(event) {
+  emit("touch-move", event);
+}
+
+function handleTouchEnd(event) {
+  emit("touch-end", event);
+}
+
+function handleUpdateChildLayers(newChildren) {
+  // 更新当前组图层的children数组
+  console.log(
+    "更新子图层顺序:",
+    "父图层ID:",
+    props.layer.id,
+    "新顺序:",
+    newChildren
+  );
+  emit("update-child-layers", props.layer.id, newChildren);
+}
+
+// 子图层递归事件处理
+function handleChildClick(childLayer, event) {
+  emit("click", childLayer, event);
+}
+
+function handleChildDoubleClick(childLayer, event) {
+  emit("double-click", childLayer, event);
+}
+
+function handleChildContextMenu(event, childLayer) {
+  emit("context-menu", event, childLayer);
+}
+
+function handleChildToggleVisibility(childLayerId) {
+  emit("toggle-visibility", childLayerId);
+}
+
+function handleChildToggleLock(childLayer) {
+  emit("toggle-lock", childLayer);
+}
+
+// 动画钩子函数
+function onEnter(el) {
+  // 设置初始状态
+  el.style.height = "0";
+  el.style.opacity = "0";
+  el.style.paddingTop = "0";
+  el.style.paddingBottom = "0";
+  el.style.marginTop = "0";
+  el.style.marginBottom = "0";
+  el.style.overflow = "hidden";
+
+  // 强制重排
+  el.offsetHeight;
+
+  // 获取最终高度
+  el.style.height = "auto";
+  const finalHeight = el.scrollHeight;
+  el.style.height = "0";
+
+  // 执行动画
+  requestAnimationFrame(() => {
+    el.style.transition = "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+    el.style.height = finalHeight + "px";
+    el.style.opacity = "1";
+    el.style.paddingTop = "";
+    el.style.paddingBottom = "";
+    el.style.marginTop = "";
+    el.style.marginBottom = "";
+  });
+}
+
+function onLeave(el) {
+  // 设置当前高度
+  el.style.height = el.scrollHeight + "px";
+  el.style.overflow = "hidden";
+
+  // 强制重排
+  el.offsetHeight;
+
+  // 执行收起动画
+  el.style.transition = "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+  el.style.height = "0";
+  el.style.opacity = "0";
+  el.style.paddingTop = "0";
+  el.style.paddingBottom = "0";
+  el.style.marginTop = "0";
+  el.style.marginBottom = "0";
+}
+
+// 查找父图层ID的辅助方法 - 增强版本
+function findParentLayerId() {
+  // 首先检查 layer 对象是否已经有 parentId 属性
+  if (props.layer.parentId) {
+    return props.layer.parentId;
+  }
+
+  // 如果没有，尝试从 layerManager 中查找
+  if (layerManager && layerManager.layers) {
+    for (const layer of layerManager.layers.value) {
+      if (
+        layer.children &&
+        Array.isArray(layer.children) &&
+        layer.children.some((child) => child.id === props.layer.id)
+      ) {
+        return layer.id;
+      }
+    }
+  }
+
+  console.warn("无法找到图层的父图层:", props.layer.id);
+  return null;
+}
+</script>
+
+<template>
+  <div>
+    <!-- 主图层项 -->
+    <div
+      :class="[
+        'layer-item',
+        {
+          'child-layer': isChild,
+          active: isActive,
+          selected: isSelected,
+          'group-layer': isGroupLayerType,
+          editing: isEditing,
+          'multi-select-mode': isMultiSelectMode,
+          invisible: !layer.visible,
+          locked: layer.locked,
+          'fixed-layer': layer.isBackground || layer.isFixed,
+        },
+      ]"
+      @click="handleClick"
+      @dblclick="handleDoubleClick"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @contextmenu.prevent="handleContextMenu"
+    >
+      <!-- 拖拽手柄 -->
+      <div class="layer-drag-handle" :title="$t('拖拽排序')">
+        <SvgIcon
+          v-if="!isHidenDragHandle"
+          :name="isChild ? 'CSort' : 'CSort'"
+          :size="16"
+        ></SvgIcon>
+      </div>
+
+      <!-- 图层头部 -->
+      <div class="layer-header">
+        <!-- 多选复选框 -->
+        <div
+          v-if="isMultiSelectMode && !isChild"
+          class="layer-checkbox"
+          @click.stop
+        >
+          <Checkbox :checked="isSelected" @change="handleCheckboxChange" />
+        </div>
+
+        <!-- 图层预览图标 -->
+        <div class="layer-review">
+          <img
+            v-if="thumbnailUrl"
+            :src="thumbnailUrl"
+            class="layer-thumbnail"
+            :alt="$t('图层预览')"
+          />
+          <span v-else class="layer-type-icon">{{
+            getLayerTypeIcon(layer)
+          }}</span>
+        </div>
+
+        <!-- 图层名称 -->
+        <div class="layer-name-container" :title="layer.name">
+          <div class="layer-name-wrapper">
+            <span v-if="!isEditing" class="layer-name text-ellipsis">
+              {{ layer.name }}
+            </span>
+            <input
+              v-else
+              :value="editingName"
+              :data-layer-id="layer.id"
+              :data-child-layer-id="isChild ? layer.id : undefined"
+              class="layer-name-input"
+              @blur="handleEditConfirm"
+              @keydown="handleEditKeydown"
+              @click.stop
+              @input="$emit('update:editingName', $event.target.value)"
+            />
+          </div>
+        </div>
+
+        <!-- 图层操作按钮 -->
+        <div class="layer-actions" v-if="!(isGroupLayerType && !isChild)">
+          <!-- 可见性切换 -->
+          <div
+            class="visibility-btn"
+            @click.stop="handleToggleVisibility"
+            :title="$t('显示/隐藏图层')"
+          >
+            <SvgIcon v-if="layer.visible" name="CEye" :size="16"></SvgIcon>
+            <SvgIcon v-else name="CUnEye" :size="16"></SvgIcon>
+          </div>
+
+          <!-- 锁定状态 -->
+          <span
+            v-if="layer.locked"
+            class="status-icon locked"
+            :class="{ disabled: layer.isBackground || layer.isFixed }"
+            :title="$t('锁定')"
+            @click.stop="handleToggleLock"
+          >
+            <SvgIcon name="CLock" :size="18"></SvgIcon>
+          </span>
+          <span
+            v-else
+            class="status-icon"
+            :title="$t('未锁定')"
+            @click.stop="handleToggleLock"
+          >
+            <SvgIcon name="CUnLock" :size="18"></SvgIcon>
+          </span>
+
+          <!-- 删除按钮 -->
+          <div
+            class="delete-btn"
+            :class="{ disabled: !canDelete }"
+            :title="$t('删除图层')"
+            @click.stop="handleDelete"
+          >
+            <SvgIcon name="CDelete" size="14"></SvgIcon>
+          </div>
+        </div>
+
+        <!-- 组图层展开/收起图标 -->
+        <div
+          v-if="isGroupLayerType && !isChild"
+          class="group-expand-icon"
+          @click.stop="toggleGroupExpanded"
+          @dblclick.stop=""
+          :title="isGroupExpanded ? $t('收起组') : $t('展开组')"
+        >
+          <SvgIcon
+            name="CRight"
+            :size="12"
+            :style="{
+              transform: isGroupExpanded ? 'rotate(45deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s',
+            }"
+          />
+        </div>
+
+        <!-- 图层状态指示器 -->
+        <!-- <div v-if="!isChild" class="layer-status">
+          <span
+            v-if="isGroupLayerType"
+            class="status-icon group"
+            :title="$t('组图层')"
+          >
+            📁
+          </span>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./layersPanel.less";
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
new file mode 100644
index 00000000..126a7094
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
@@ -0,0 +1,328 @@
+<script setup>
+import { computed, inject } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
+import LayerItem from "./LayerItem.vue";
+
+defineOptions({
+  name: "LayersList",
+});
+
+const props = defineProps({
+  layers: Array,
+  activeLayerId: String,
+  sortableRootLayers: Array,
+  selectedLayerIds: Array,
+  isMultiSelectMode: Boolean,
+  editingLayerId: String,
+  editingLayerName: String,
+  thumbnailManager: Object,
+  groupName: String,
+  expandedGroupIds: Set, // 新增：展开状态集合
+  isChild: Boolean,
+  parentLayerId: String, // 新增：父图层ID
+});
+
+const emit = defineEmits([
+  "layer-click",
+  "layer-double-click",
+  "context-menu",
+  "checkbox-change",
+  "toggle-visibility",
+  "toggle-lock",
+  "delete",
+  "edit-confirm",
+  "edit-cancel",
+  "edit-keydown",
+  "touch-start",
+  "touch-move",
+  "touch-end",
+  "update:editing-name",
+  "root-layers-sort",
+  "child-layers-sort",
+  "select-child-layer",
+  "start-child-layer-edit",
+  "child-context-menu",
+  "finish-child-layer-edit",
+  "cancel-child-layer-edit",
+  "child-layer-edit-keydown",
+  "toggle-group-expanded",
+  // 新增子图层专用事件
+  "toggle-child-visibility",
+  "toggle-child-lock",
+  "delete-child",
+  "rename-child",
+]);
+
+// 检查图层是否被选中
+const isLayerSelected = (layerId) => {
+  return props.selectedLayerIds.includes(layerId);
+};
+
+// 获取图层缩略图URL
+function getLayerThumbnail(layerId) {
+  if (props.thumbnailManager) {
+    return props.thumbnailManager.getLayerThumbnail(layerId);
+  }
+  return null;
+}
+
+// 事件转发方法
+const forwardEvent = (eventName, ...args) => {
+  emit(eventName, ...args);
+};
+
+// 处理根级图层拖拽排序
+const handleRootLayersSort = (event) => {
+  if (props.isChild) {
+    // 子图层事件处理
+    // 确保排序只影响当前组图层的children，而不是全局layers
+    emit(
+      "child-layers-sort",
+      event,
+      props.sortableRootLayers,
+      props.parentLayerId
+    );
+  } else {
+    emit("root-layers-sort", event);
+  }
+};
+
+const canDeleteComputed = computed(() => {
+  // 如果是子图层，检查父图层是否可以删除
+  if (props.isChild) {
+    const parentLayer = props.layers.find(
+      (layer) => layer.id === props.parentLayerId
+    );
+    return parentLayer?.children?.length > 1;
+  }
+  // 否则直接返回根图层的可删除状态
+  return props.layers.length > 3;
+});
+</script>
+
+<template>
+  <div class="layers-list">
+    <!-- 可排序的根级图层 -->
+    <VueDraggable
+      :model-value="sortableRootLayers"
+      @end="handleRootLayersSort"
+      class="sortable-layers"
+      :animation="200"
+      :disabled="false"
+      handle=".layer-drag-handle"
+      ghost-class="ghost"
+      chosen-class="chosen"
+      drag-class="drag"
+      :group="groupName"
+    >
+      <!-- 遍历可排序的根级图层 -->
+      <template v-for="(layer, index) in sortableRootLayers" :key="layer.id">
+        <div class="layer-group">
+          <!-- 使用 LayerItem 子组件 -->
+          <LayerItem
+            :layer="layer"
+            :is-child="isChild"
+            :is-active="layer.id === activeLayerId"
+            :is-selected="isLayerSelected(layer.id)"
+            :is-multi-select-mode="isMultiSelectMode"
+            :is-editing="editingLayerId === layer.id"
+            :editing-name="editingLayerName"
+            :can-delete="
+              canDeleteComputed &&
+              !layer.isBackground &&
+              !layer.isFixed &&
+              !layer.locked
+            "
+            :thumbnail-url="getLayerThumbnail(layer.id)"
+            :expanded-group-ids="expandedGroupIds"
+            @click="(...args) => forwardEvent('layer-click', ...args)"
+            @double-click="
+              (...args) => forwardEvent('layer-double-click', ...args)
+            "
+            @context-menu="(...args) => forwardEvent('context-menu', ...args)"
+            @checkbox-change="
+              (...args) => forwardEvent('checkbox-change', ...args)
+            "
+            @toggle-visibility="
+              (...args) => forwardEvent('toggle-visibility', ...args)
+            "
+            @toggle-lock="(...args) => forwardEvent('toggle-lock', ...args)"
+            @delete="(...args) => forwardEvent('delete', ...args)"
+            @edit-confirm="(...args) => forwardEvent('edit-confirm', ...args)"
+            @edit-cancel="(...args) => forwardEvent('edit-cancel', ...args)"
+            @edit-keydown="(...args) => forwardEvent('edit-keydown', ...args)"
+            @touch-start="(...args) => forwardEvent('touch-start', ...args)"
+            @touch-move="(...args) => forwardEvent('touch-move', ...args)"
+            @touch-end="(...args) => forwardEvent('touch-end', ...args)"
+            @update:editing-name="
+              (...args) => forwardEvent('update:editing-name', ...args)
+            "
+            @toggle-group-expanded="
+              (...args) => forwardEvent('toggle-group-expanded', ...args)
+            "
+            @toggle-child-visibility="
+              (...args) => forwardEvent('toggle-child-visibility', ...args)
+            "
+            @toggle-child-lock="
+              (...args) => forwardEvent('toggle-child-lock', ...args)
+            "
+            @delete-child="(...args) => forwardEvent('delete-child', ...args)"
+            @rename-child="(...args) => forwardEvent('rename-child', ...args)"
+          />
+
+          <!-- 子图层列表 (递归渲染) -->
+          <div
+            v-if="
+              layer?.children?.length > 0 &&
+              !layer.isBackground &&
+              !layer.isFixed &&
+              expandedGroupIds?.has(layer.id)
+            "
+            class="child-layers"
+          >
+            <LayersList
+              :layers="layers"
+              :sortableRootLayers="layer.children"
+              :active-layer-id="activeLayerId"
+              :selected-layer-ids="selectedLayerIds"
+              :is-multi-select-mode="isMultiSelectMode"
+              :editing-layer-id="editingLayerId"
+              :editing-layer-name="editingLayerName"
+              :thumbnail-manager="thumbnailManager"
+              :expanded-group-ids="expandedGroupIds"
+              :isChild="true"
+              :parentLayerId="layer.id"
+              group-name="layers-child"
+              @layer-click="(...args) => forwardEvent('layer-click', ...args)"
+              @layer-double-click="
+                (...args) => forwardEvent('layer-double-click', ...args)
+              "
+              @context-menu="(...args) => forwardEvent('context-menu', ...args)"
+              @checkbox-change="
+                (...args) => forwardEvent('checkbox-change', ...args)
+              "
+              @toggle-visibility="
+                (...args) => forwardEvent('toggle-visibility', ...args)
+              "
+              @toggle-lock="(...args) => forwardEvent('toggle-lock', ...args)"
+              @delete="(...args) => forwardEvent('delete', ...args)"
+              @edit-confirm="(...args) => forwardEvent('edit-confirm', ...args)"
+              @edit-cancel="(...args) => forwardEvent('edit-cancel', ...args)"
+              @edit-keydown="(...args) => forwardEvent('edit-keydown', ...args)"
+              @touch-start="(...args) => forwardEvent('touch-start', ...args)"
+              @touch-move="(...args) => forwardEvent('touch-move', ...args)"
+              @touch-end="(...args) => forwardEvent('touch-end', ...args)"
+              @update:editing-name="
+                (...args) => forwardEvent('update:editing-name', ...args)
+              "
+              @root-layers-sort="
+                (...args) => forwardEvent('root-layers-sort', ...args)
+              "
+              @child-layers-sort="
+                (...args) => forwardEvent('child-layers-sort', ...args)
+              "
+              @select-child-layer="
+                (...args) => forwardEvent('select-child-layer', ...args)
+              "
+              @start-child-layer-edit="
+                (...args) => forwardEvent('start-child-layer-edit', ...args)
+              "
+              @child-context-menu="
+                (...args) => forwardEvent('child-context-menu', ...args)
+              "
+              @toggle-child-visibility="
+                (...args) => forwardEvent('toggle-child-visibility', ...args)
+              "
+              @toggle-child-lock="
+                (...args) => forwardEvent('toggle-child-lock', ...args)
+              "
+              @finish-child-layer-edit="
+                (...args) => forwardEvent('finish-child-layer-edit', ...args)
+              "
+              @cancel-child-layer-edit="
+                (...args) => forwardEvent('cancel-child-layer-edit', ...args)
+              "
+              @child-layer-edit-keydown="
+                (...args) => forwardEvent('child-layer-edit-keydown', ...args)
+              "
+              @toggle-group-expanded="
+                (...args) => forwardEvent('toggle-group-expanded', ...args)
+              "
+              @delete-child="(...args) => forwardEvent('delete-child', ...args)"
+              @rename-child="(...args) => forwardEvent('rename-child', ...args)"
+            />
+          </div>
+        </div>
+      </template>
+    </VueDraggable>
+  </div>
+</template>
+
+<style scoped lang="less">
+// 从父组件的样式文件中继承相关样式
+.layers-list {
+  flex: 1;
+  overflow-y: auto;
+
+  .sortable-layers {
+    min-height: 20px;
+  }
+
+  //   .layer-group {
+  //     // margin-bottom: 1px;
+  //   }
+
+  .child-layers {
+    position: relative;
+    padding-left: 20px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 20px;
+      background-color: #e0e0e0;
+      z-index: 9;
+    }
+
+    .layer-item {
+      margin-left: 8px;
+    }
+  }
+
+  .fixed-layers {
+    border-top: 1px solid #e0e0e0;
+  }
+
+  // 拖拽状态样式
+  .ghost {
+    opacity: 0.5;
+    background: #f0f0f0;
+  }
+
+  .chosen {
+    opacity: 0.8;
+  }
+
+  .drag {
+    opacity: 0.6;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .layers-list {
+    .child-layers {
+      padding-left: 25px;
+      &::after {
+        width: 25px;
+      }
+
+      .layer-item {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
new file mode 100644
index 00000000..916135d9
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -0,0 +1,1321 @@
+<script setup>
+import { computed, ref, nextTick, inject } from "vue";
+import { isGroupLayer } from "../../utils/layerHelper";
+import SvgIcon from "../../../SvgIcon/index.vue";
+import ContextMenu from "./ContextMenu.vue";
+import LayerItem from "./LayerItem.vue";
+import LayersList from "./LayersList.vue"; // 引入 LayersList 组件
+// // 导入命令类
+// import {
+//   ReorderLayersCommand,
+//   // ReorderChildLayersCommand,
+//   GroupLayersCommand,
+//   UngroupLayersCommand,
+// } from "../../commands/LayerCommands";
+import { generateId } from "../../utils/helper";
+
+const props = defineProps({
+  // layers: Array,
+  activeLayerId: String,
+  activeElementId: String,
+  thumbnailManager: Object, // 添加缩略图管理器属性
+});
+
+const emit = defineEmits([
+  "add-layer",
+  "add-group-layer",
+  "set-active-layer",
+  "toggle-layer-visibility",
+  "move-layer-up",
+  "move-layer-down",
+  "remove-layer",
+  "reorder-layers", // 新增：图层重新排序事件
+  "reorder-child-layers", // 新增：子图层重新排序事件
+]);
+
+const layers = inject("layers", []);
+
+const layerManager = inject("layerManager", {});
+
+// 注入命令管理器
+const commandManager = inject("commandManager", null);
+
+// 编辑状态管理
+const editingLayerId = ref(null);
+const editingLayerName = ref("");
+
+// 多选状态管理
+const selectedLayerIds = ref([]);
+const isMultiSelectMode = ref(false);
+const lastSelectedIndex = ref(-1);
+
+// 组图层展开/收起状态管理
+const expandedGroupIds = ref(new Set());
+
+// 长按检测（移动端）
+const touchTimer = ref(null);
+const touchStartPos = ref({ x: 0, y: 0 });
+const LONG_PRESS_DELAY = 500; // 长按触发时间（毫秒）
+const TOUCH_MOVE_THRESHOLD = 10; // 触摸移动阈值（像素）
+
+// 右键菜单状态管理
+const contextMenuVisible = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+const contextMenuLayer = ref(null);
+const contextMenuItems = ref([]);
+
+// 计算属性：可排序的根级图层（排除背景层和固定层）
+const sortableRootLayers = computed(() => {
+  if (!layers) return [];
+  return layers.value.filter(
+    (layer) => !layer.parentId && !layer.isFixed && !layer.isBackground
+  );
+});
+
+// 计算属性：不可排序的固定图层（背景层和固定层）
+const fixedLayers = computed(() => {
+  if (!layers) return [];
+  return layers.value.filter(
+    // (layer) => !layer.parentId && (layer.isFixed || layer.isBackground)
+    (layer) => !layer.parentId && layer.isBackground // 只显示背景层，不显示固定层 - 固定层用来做红绿图模式  和  放模特
+  );
+});
+
+// 计算属性：获取当前选中的图层
+const selectedLayers = computed(() => {
+  return sortableRootLayers.value.filter((layer) =>
+    selectedLayerIds.value.includes(layer.id)
+  );
+});
+
+// 计算属性：检查是否有选中的图层可以分组
+const canGroupLayers = computed(() => {
+  // 直接基于 selectedLayerIds 和 sortableRootLayers 计算，确保响应式
+  if (selectedLayerIds.value.length < 2) return false;
+
+  const selectedLayers = sortableRootLayers.value.filter((layer) =>
+    selectedLayerIds.value.includes(layer.id)
+  );
+
+  return selectedLayers.every(
+    (layer) => !layer.isBackground && !layer.isFixed && !isGroupLayerType(layer)
+  );
+});
+
+// 计算属性：检查是否有选中的组图层可以解组
+const canUngroupLayers = computed(() => {
+  if (selectedLayerIds.value.length !== 1) return false;
+
+  const selectedLayers = sortableRootLayers.value.filter((layer) =>
+    selectedLayerIds.value.includes(layer.id)
+  );
+
+  return selectedLayers.length === 1 && isGroupLayerType(selectedLayers[0]);
+});
+
+// 计算属性：可以复制的图层
+const canCopyLayers = computed(() => {
+  if (selectedLayerIds.value.length === 0) return false;
+
+  const selectedLayers = sortableRootLayers.value.filter((layer) =>
+    selectedLayerIds.value.includes(layer.id)
+  );
+
+  return selectedLayers.every((layer) => !layer.isBackground && !layer.isFixed);
+});
+
+// 计算属性：可以锁定/解锁的图层
+const canToggleLock = computed(() => {
+  if (selectedLayerIds.value.length === 0) return false;
+
+  const selectedLayers = sortableRootLayers.value.filter((layer) =>
+    selectedLayerIds.value.includes(layer.id)
+  );
+
+  return selectedLayers.every((layer) => !layer.isBackground && !layer.isFixed);
+});
+
+function addLayer() {
+  emit("add-layer");
+}
+
+function addGroupLayer() {
+  emit("add-group-layer");
+}
+
+function setActiveLayer(layerId) {
+  emit("set-active-layer", layerId);
+}
+
+function toggleLayerVisibility(layerId) {
+  emit("toggle-layer-visibility", layerId);
+}
+
+function moveLayerUp(layerId) {
+  emit("move-layer-up", layerId);
+}
+
+function moveLayerDown(layerId) {
+  emit("move-layer-down", layerId);
+}
+
+function removeLayer(layerId, isDisabled = false) {
+  if (isDisabled) return;
+  emit("remove-layer", layerId);
+}
+
+function renameLayer(layerId, newName) {
+  // emit("rename-layer", layerId, newName);
+  layerManager.renameLayer(layerId, newName);
+}
+
+// 修复复选框点击逻辑，支持单击取消或选中，不退出多选模式
+const handleCheckboxClick = (layerId, event) => {
+  // 阻止事件冒泡，避免触发父元素的点击事件
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  const index = selectedLayerIds.value.indexOf(layerId);
+  if (index > -1) {
+    selectedLayerIds.value.splice(index, 1); // 取消选中
+  } else {
+    selectedLayerIds.value.push(layerId); // 选中
+  }
+
+  // 更新多选模式状态
+  isMultiSelectMode.value = selectedLayerIds.value.length > 0;
+
+  // 如果有选中的图层，设置最后一个为活动图层
+  // if (selectedLayerIds.value.length > 0) {
+  //   setActiveLayer(selectedLayerIds.value[selectedLayerIds.value.length - 1]);
+  // }
+};
+
+// 检查图层是否被选中
+const isLayerSelected = (layerId) => {
+  return selectedLayerIds.value.includes(layerId);
+};
+
+// 多选相关方法
+function toggleLayerSelection(layer, event) {
+  console.log("layer, event", layer, event);
+
+  // 防止在编辑模式下触发选择
+  if (editingLayerId.value === layer.id) {
+    return;
+  }
+
+  const isShift = event.shiftKey;
+  const layerIndex = sortableRootLayers.value.findIndex(
+    (l) => l.id === layer.id
+  );
+  console.log("isShift", isShift);
+
+  if (isShift && lastSelectedIndex.value !== -1) {
+    // Shift + 点击：范围选择
+    selectLayerRange(lastSelectedIndex.value, layerIndex);
+  } else {
+    isMultiSelectMode.value = true;
+    // 普通点击或Ctrl/Cmd + 点击：切换单个图层选择状态
+    const index = selectedLayerIds.value.indexOf(layer.id);
+    if (index > -1) {
+      selectedLayerIds.value.splice(index, 1);
+    } else {
+      selectedLayerIds.value.push(layer.id);
+    }
+    lastSelectedIndex.value = layerIndex;
+
+    // 设置活动图层为最后选中的图层
+    // if (selectedLayerIds.value.includes(layer.id)) {
+    //   setActiveLayer(layer.id);
+    // } else if (selectedLayerIds.value.length > 0) {
+    //   // 如果取消选中当前活动图层，设置最后一个选中的图层为活动图层
+    //   setActiveLayer(selectedLayerIds.value[selectedLayerIds.value.length - 1]);
+    // }
+  }
+
+  // 始终保持多选模式状态
+  // isMultiSelectMode.value = selectedLayerIds.value.length > 0;
+}
+
+function selectLayerRange(startIndex, endIndex) {
+  const start = Math.min(startIndex, endIndex);
+  const end = Math.max(startIndex, endIndex);
+
+  selectedLayerIds.value = [];
+  for (let i = start; i <= end; i++) {
+    if (sortableRootLayers.value[i]) {
+      selectedLayerIds.value.push(sortableRootLayers.value[i].id);
+    }
+  }
+  isMultiSelectMode.value = selectedLayerIds.value.length > 1;
+}
+
+function selectAllLayers() {
+  selectedLayerIds.value = [];
+  sortableRootLayers.value.forEach((layer) => {
+    if (!layer.isBackground && !layer.isFixed) {
+      selectedLayerIds.value.push(layer.id);
+    }
+  });
+  isMultiSelectMode.value = selectedLayerIds.value.length > 1;
+}
+
+function clearSelection() {
+  selectedLayerIds.value = [];
+  isMultiSelectMode.value = false;
+  lastSelectedIndex.value = -1;
+}
+
+// 保留原函数作为向后兼容，但现在直接返回计算属性的值
+function getSelectedLayers() {
+  return selectedLayers.value;
+}
+
+// 移动端长按多选支持
+function handleTouchStart(event, layer) {
+  if (editingLayerId.value === layer.id) return;
+
+  const touch = event.touches[0];
+  touchStartPos.value = { x: touch.clientX, y: touch.clientY };
+
+  touchTimer.value = setTimeout(() => {
+    // 长按触发多选
+    handleLongPress(layer);
+  }, LONG_PRESS_DELAY);
+}
+
+function handleTouchMove(event) {
+  if (touchTimer.value) {
+    const touch = event.touches[0];
+    const deltaX = Math.abs(touch.clientX - touchStartPos.value.x);
+    const deltaY = Math.abs(touch.clientY - touchStartPos.value.y);
+
+    // 如果移动距离超过阈值，取消长按
+    if (deltaX > TOUCH_MOVE_THRESHOLD || deltaY > TOUCH_MOVE_THRESHOLD) {
+      clearTimeout(touchTimer.value);
+      touchTimer.value = null;
+    }
+  }
+}
+
+function handleTouchEnd() {
+  if (touchTimer.value) {
+    clearTimeout(touchTimer.value);
+    touchTimer.value = null;
+  }
+}
+
+function handleLongPress(layer) {
+  // 长按进入多选模式
+  if (!selectedLayerIds.value.includes(layer.id)) {
+    selectedLayerIds.value.push(layer.id);
+  }
+  isMultiSelectMode.value = true;
+
+  // 提供触觉反馈（如果支持）
+  if (navigator.vibrate) {
+    navigator.vibrate(50);
+  }
+}
+
+// 分组操作
+async function groupSelectedLayers() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length < 2) {
+    console.warn("至少需要选择两个图层才能分组");
+    return;
+  }
+
+  // 检查是否包含不能分组的图层
+  const invalidLayers = selectedLayers.filter(
+    (layer) => layer.isBackground || layer.isFixed || isGroupLayerType(layer)
+  );
+
+  if (invalidLayers.length > 0) {
+    console.warn("选择的图层中包含背景层、固定层或组图层，无法分组");
+    return;
+  }
+
+  try {
+    const layerIds = selectedLayers.map((layer) => layer.id);
+    const groupName = generateId("GroupLayer_");
+
+    await layerManager?.groupLayers(layerIds, groupName);
+
+    console.log(`✅ 成功创建图层组: ${groupName}`);
+
+    // 清除选择状态
+    clearSelection();
+  } catch (error) {
+    console.error("❌ 创建图层组失败:", error);
+  }
+}
+
+// 解组操作
+async function ungroupSelectedLayer() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length !== 1) {
+    console.warn("只能选择一个组图层进行解组");
+    return;
+  }
+
+  const groupLayer = selectedLayers[0];
+  if (!isGroupLayerType(groupLayer)) {
+    console.warn("选择的图层不是组图层");
+    return;
+  }
+
+  try {
+    const childLayerIds = await layerManager?.ungroupLayers(groupLayer.id);
+    console.log(
+      `✅ 成功解组图层组: ${groupLayer.name}, 子图层: ${childLayerIds}`
+    );
+
+    // 清除选择状态
+    clearSelection();
+  } catch (error) {
+    console.error("❌ 解组图层失败:", error);
+  }
+}
+
+// 删除选中的图层
+function deleteSelectedLayers() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length === 0) {
+    console.warn("没有选择要删除的图层");
+    return;
+  }
+
+  // 检查是否包含不能删除的图层
+  const undeletableLayers = selectedLayers.filter(
+    (layer) => layer.isBackground || layer.isFixed
+  );
+
+  if (undeletableLayers.length > 0) {
+    console.warn("选择的图层中包含背景层或固定层，无法删除");
+    return;
+  }
+
+  // 检查删除后是否还有足够的普通图层
+  const remainingNormalLayers = layers.value.filter(
+    (layer) =>
+      !layer.isBackground &&
+      !layer.isFixed &&
+      !selectedLayerIds.value.includes(layer.id)
+  ).length;
+
+  if (remainingNormalLayers < 1) {
+    console.warn("不能删除所有普通图层");
+    return;
+  }
+
+  // 确认删除
+  if (selectedLayers.length > 1) {
+    if (!confirm(`确定要删除选中的 ${selectedLayers.length} 个图层吗？`)) {
+      return;
+    }
+  }
+
+  // 删除图层
+  selectedLayers.forEach((layer) => {
+    removeLayer(layer.id);
+  });
+
+  // 清除选择状态
+  clearSelection();
+}
+
+// 双击重命名相关方法
+function handleLayerDoubleClick(layer) {
+  // 不允许重命名背景层和固定层
+  if (layer.isBackground || layer.isFixed) {
+    return;
+  }
+
+  startEditing(layer);
+}
+
+function startEditing(layer) {
+  editingLayerId.value = layer.id;
+  editingLayerName.value = layer.name;
+
+  // 下一帧聚焦输入框并选中文本
+  nextTick(() => {
+    const inputElement = document.querySelector(
+      `input[data-layer-id="${layer.id}"]`
+    );
+    if (inputElement) {
+      inputElement.focus();
+      inputElement.select();
+    }
+  });
+}
+
+function confirmEdit() {
+  if (editingLayerId.value && editingLayerName.value.trim()) {
+    const trimmedName = editingLayerName.value.trim();
+    renameLayer(editingLayerId.value, trimmedName);
+  }
+
+  cancelEdit();
+}
+
+function cancelEdit() {
+  editingLayerId.value = null;
+  editingLayerName.value = "";
+}
+
+function handleEditKeydown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    confirmEdit();
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    cancelEdit();
+  }
+}
+
+// 获取图层缩略图URL
+function getLayerThumbnail(layerId) {
+  if (props.thumbnailManager) {
+    return props.thumbnailManager.getLayerThumbnail(layerId);
+  }
+  return null;
+}
+
+// 获取图层类型图标
+function getLayerTypeIcon(layer) {
+  if (!layer) return "🖼️";
+
+  if (isGroupLayer(layer)) {
+    return "📁";
+  }
+
+  if (layer.fabricObject) {
+    switch (layer.fabricObject.type) {
+      case "image":
+        return "🖼️";
+      case "text":
+        return "📝";
+      case "rect":
+        return "▢";
+      case "circle":
+        return "⬤";
+      case "path":
+        return "✎";
+      default:
+        return "⬤";
+    }
+  }
+
+  return "🖼️";
+}
+
+// 获取图层的子图层
+function getChildLayers(parentId) {
+  if (!layers || !parentId) return [];
+  return layers.value.filter((layer) => layer.parentId === parentId);
+}
+
+// 检查图层是否为分组
+function isGroupLayerType(layer) {
+  return isGroupLayer(layer);
+}
+
+// 计算属性：检查组图层是否展开
+const isGroupExpanded = (groupId) => {
+  return expandedGroupIds.value.has(groupId);
+};
+
+// 切换组图层展开/收起状态
+const toggleGroupExpanded = (groupId) => {
+  if (expandedGroupIds.value.has(groupId)) {
+    expandedGroupIds.value.delete(groupId);
+  } else {
+    expandedGroupIds.value.add(groupId);
+  }
+  // 触发响应式更新
+  expandedGroupIds.value = new Set(expandedGroupIds.value);
+};
+
+// 渲染单个图层项（递归组件）
+function renderLayerItem(layer, index) {
+  if (!layer) return null;
+
+  const isGroup = isGroupLayerType(layer);
+  const children = isGroup ? getChildLayers(layer.id) : [];
+
+  return {
+    id: layer.id,
+    name: layer.name,
+    isGroup: isGroup,
+    children: children,
+    fabricObject: layer.fabricObject,
+    visible: layer.visible,
+  };
+}
+
+// 处理图层点击事件
+function handleLayerClick(layer, event) {
+  // 阻止事件冒泡
+  event.stopPropagation();
+
+  // 如果按住修饰键，执行多选逻辑
+  if (
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    isMultiSelectMode.value
+  ) {
+    toggleLayerSelection(layer, event);
+  } else {
+    // 普通点击：进入单选模式
+    // selectedLayerIds.value = [layer.id];
+    // isMultiSelectMode.value = false;
+    if (!isMultiSelectMode.value) {
+      // 如果不是多选模式，才可激活图层
+      // 1.如果是组，则设置组下的第一个子图层为活动图层
+      // 2.否则直接设置活动图层
+      if (
+        isGroupLayerType(layer) &&
+        layer.children &&
+        layer.children.length > 0
+      ) {
+        // 如果是组图层，设置第一个子图层为活动图层
+        setActiveLayer(layer.children[0].id, { parentId: layer.id });
+      } else {
+        // 否则直接设置当前图层为活动图层
+        setActiveLayer(layer.id);
+      }
+    }
+    lastSelectedIndex.value = sortableRootLayers.value.findIndex(
+      (l) => l.id === layer.id
+    );
+  }
+}
+
+// 右键菜单相关方法
+function showContextMenu(event, layer) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  // 如果右键的图层不在选中列表中，先选中它
+  if (!selectedLayerIds.value.includes(layer.id)) {
+    selectedLayerIds.value = [layer.id];
+    isMultiSelectMode.value = false;
+    setActiveLayer(layer.id);
+  }
+
+  contextMenuLayer.value = layer;
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+
+  // 构建菜单项
+  buildContextMenuItems(layer);
+
+  contextMenuVisible.value = true;
+}
+
+function hideContextMenu() {
+  contextMenuVisible.value = false;
+  contextMenuLayer.value = null;
+  contextMenuItems.value = [];
+}
+
+function buildContextMenuItems(layer) {
+  const selectedLayers = getSelectedLayers();
+  const isMultiple = selectedLayers.length > 1;
+  const isGroupLayer = isGroupLayerType(layer);
+
+  contextMenuItems.value = [
+    // 重命名
+    {
+      label: "重命名",
+      icon: "CFont",
+      disabled: isMultiple || layer.isBackground || layer.isFixed,
+      action: () => startEditing(layer),
+    },
+    { type: "divider" },
+    // 复制
+    {
+      label: isMultiple ? `复制 ${selectedLayers.length} 个图层` : "复制图层",
+      icon: "CPaste",
+      disabled: !canCopyLayers.value,
+      action: () => copySelectedLayers(),
+    },
+    // 删除
+    {
+      label: isMultiple ? `删除 ${selectedLayers.length} 个图层` : "删除图层",
+      icon: "CDelete",
+      disabled: layer.isBackground || layer.isFixed || !canDeleteLayers(),
+      danger: true,
+      action: () => deleteSelectedLayers(),
+    },
+    // 栅格化图层
+    {
+      label: "栅格化图层",
+      icon: "CPicture",
+      disabled:
+        layer.isBackground ||
+        layer.isFixed ||
+        !layerManager?.canRasterizeLayer?.(layer.id),
+      action: () => {
+        rasterizeLayer(layer.id);
+        hideContextMenu();
+      },
+    },
+
+    { type: "divider" },
+    // 分组操作 - 带子菜单
+    {
+      label: "分组操作",
+      icon: "CGroup",
+      children: [
+        {
+          label: "创建组",
+          icon: "CCreateGroup",
+          disabled: !canGroupLayers.value,
+          action: () => {
+            groupSelectedLayers();
+            hideContextMenu();
+          },
+        },
+        {
+          label: "解组",
+          icon: "CCancelGroup",
+          disabled: !canUngroupLayers.value,
+          action: () => {
+            ungroupSelectedLayer();
+            hideContextMenu();
+          },
+        },
+        {
+          label: "合并组",
+          icon: "CMergeGroup",
+          disabled: !isGroupLayer || isMultiple,
+          action: () => {
+            mergeGroupLayer(layer.id);
+            hideContextMenu();
+          },
+        },
+      ],
+    },
+    // 图层操作 - 带子菜单
+    {
+      label: "图层操作",
+      icon: "CLayout",
+      children: [
+        // // 锁定/解锁
+        // {
+        //   label: layer.locked ? "解锁图层" : "锁定图层",
+        //   icon: layer.locked ? "CUnLock" : "CLock",
+        //   disabled: !canToggleLock.value,
+        //   action: () => toggleSelectedLayersLock(),
+        // },
+        // // 显示/隐藏
+        // {
+        //   label: layer.visible ? "隐藏图层" : "显示图层",
+        //   icon: layer.visible ? "CUnEye" : "CEye",
+        //   action: () => toggleSelectedLayersVisibility(),
+        // },
+        // { type: "divider" },
+        {
+          label: "置顶",
+          icon: "CBottom",
+          inverIcon: true, // 倒置图标
+          disabled:
+            layer.isBackground ||
+            layer.isFixed ||
+            !layerManager?.canMoveToTop?.(layer.id),
+          action: () => {
+            moveLayerToTop(layer.id);
+            hideContextMenu();
+          },
+        },
+        {
+          label: "向上移动",
+          icon: "CUp",
+          disabled:
+            layer.isBackground ||
+            layer.isFixed ||
+            !layerManager?.canMoveToTop?.(layer.id),
+          action: () => {
+            moveLayerUp(layer.id);
+            hideContextMenu();
+          },
+        },
+        {
+          label: "向下移动",
+          icon: "CDown",
+          disabled:
+            layer.isBackground ||
+            layer.isFixed ||
+            !layerManager?.canMoveToBottom?.(layer.id),
+          action: () => {
+            moveLayerDown(layer.id);
+            hideContextMenu();
+          },
+        },
+        {
+          label: "置底",
+          icon: "CBottom",
+          disabled:
+            layer.isBackground ||
+            layer.isFixed ||
+            !layerManager?.canMoveToBottom?.(layer.id),
+          action: () => {
+            moveLayerToBottom(layer.id);
+            hideContextMenu();
+          },
+        },
+      ],
+    },
+  ].filter((item) => item !== null);
+}
+
+// 右键菜单操作方法
+function copySelectedLayers() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length === 0) return;
+
+  if (selectedLayers.length === 1) {
+    layerManager.copyLayer(selectedLayers[0].id);
+    console.log(`✅ 已复制图层: ${selectedLayers[0].name}`);
+  } else {
+    // 多个图层复制逻辑（如果需要支持）
+    console.log(`✅ 已复制 ${selectedLayers.length} 个图层`);
+  }
+
+  hideContextMenu();
+}
+
+function toggleSelectedLayersLock() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length === 0) return;
+
+  selectedLayers.forEach((layer) => {
+    if (!layer.isBackground && !layer.isFixed) {
+      layerManager.toggleLayerLock(layer.id);
+    }
+  });
+
+  hideContextMenu();
+}
+
+function toggleSelectedLayersLockByLayer(layer) {
+  if (!layer.isBackground && !layer.isFixed) {
+    layerManager.toggleLayerLock(layer.id);
+  }
+}
+
+function toggleSelectedLayersVisibility() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length === 0) return;
+
+  selectedLayers.forEach((layer) => {
+    layerManager.toggleLayerVisibility(layer.id);
+  });
+
+  hideContextMenu();
+}
+
+function canDeleteLayers() {
+  const selectedLayers = getSelectedLayers();
+  if (selectedLayers.length === 0) return false;
+
+  // 检查是否包含不能删除的图层
+  const undeletableLayers = selectedLayers.filter(
+    (layer) => layer.isBackground || layer.isFixed
+  );
+
+  if (undeletableLayers.length > 0) return false;
+
+  // 检查删除后是否还有足够的普通图层
+  const remainingNormalLayers = layers.value.filter(
+    (layer) =>
+      !layer.isBackground &&
+      !layer.isFixed &&
+      !selectedLayerIds.value.includes(layer.id)
+  ).length;
+
+  return remainingNormalLayers >= 1;
+}
+
+// 子图层操作方法
+function toggleChildLayerVisibility(childLayerId, parentId) {
+  if (layerManager.toggleChildLayerVisibility) {
+    layerManager.toggleChildLayerVisibility(childLayerId, parentId);
+  }
+}
+
+function toggleChildLayerLock(childLayerId, parentId) {
+  if (layerManager.toggleChildLayerLock) {
+    layerManager.toggleChildLayerLock(childLayerId, parentId);
+  }
+}
+
+function deleteChildLayer(childLayerId, parentId) {
+  if (layerManager.removeChildLayer) {
+    layerManager.removeChildLayer(childLayerId, parentId);
+  }
+}
+
+function renameChildLayer(childLayerId, parentId, newName) {
+  if (layerManager.renameChildLayer) {
+    layerManager.renameChildLayer(childLayerId, parentId, newName);
+  }
+}
+
+// 子图层编辑相关方法
+function startChildLayerEdit(childLayer) {
+  childLayer.editing = true;
+  childLayer.tempName = childLayer.name;
+
+  nextTick(() => {
+    const inputElement = document.querySelector(
+      `input[data-child-layer-id="${childLayer.id}"]`
+    );
+    if (inputElement) {
+      inputElement.focus();
+      inputElement.select();
+    }
+  });
+}
+
+function finishChildLayerEdit(childLayer) {
+  if (childLayer.tempName && childLayer.tempName.trim()) {
+    const trimmedName = childLayer.tempName.trim();
+    renameLayer(childLayer.id, trimmedName);
+    childLayer.name = trimmedName;
+  }
+
+  childLayer.editing = false;
+  childLayer.tempName = "";
+}
+
+function cancelChildLayerEdit(childLayer) {
+  childLayer.editing = false;
+  childLayer.tempName = "";
+}
+
+// 子图层编辑按键处理
+function handleChildLayerEditKeydown(event, childLayer) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    finishChildLayerEdit(childLayer);
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    cancelChildLayerEdit(childLayer);
+  }
+}
+
+// 选中子图层
+function selectChildLayer(layerId, parentId) {
+  if (!isMultiSelectMode.value)
+    layerManager?.setActiveLayer(layerId, { parentId });
+}
+
+// 子图层右键菜单处理
+function showChildLayerContextMenu(event, childLayer) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  // 先选中子图层
+  selectChildLayer(childLayer.id, childLayer.parentId);
+
+  // 构建子图层菜单项
+  contextMenuLayer.value = childLayer;
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+
+  buildChildLayerContextMenuItems(childLayer);
+
+  contextMenuVisible.value = true;
+
+  // 点击其他地方关闭菜单
+  nextTick(() => {
+    document.addEventListener("click", hideContextMenu, { once: true });
+    document.addEventListener("contextmenu", hideContextMenu, { once: true });
+  });
+}
+
+function buildChildLayerContextMenuItems(childLayer) {
+  contextMenuItems.value = [
+    // 重命名
+    {
+      label: "重命名",
+      icon: "CFont",
+      disabled: childLayer.isBackground || childLayer.isFixed,
+      action: () => startChildLayerEdit(childLayer),
+    },
+    { type: "divider" },
+    // 锁定/解锁
+    {
+      label: childLayer.locked ? "解锁图层" : "锁定图层",
+      icon: childLayer.locked ? "CUnLock" : "CLock",
+      disabled: childLayer.isBackground || childLayer.isFixed,
+      action: () => toggleChildLayerLock(childLayer.id),
+    },
+    // 显示/隐藏
+    {
+      label: childLayer.visible ? "隐藏图层" : "显示图层",
+      icon: childLayer.visible ? "CUnEye" : "CEye",
+      action: () =>
+        toggleChildLayerVisibility(childLayer.id, childLayer.parentId),
+    },
+    { type: "divider" },
+    // 移出组
+    {
+      label: "移出组",
+      icon: "CPlus",
+      disabled: false,
+      action: () => moveChildLayerOutOfGroup(childLayer.id),
+    },
+  ].filter((item) => item !== null);
+}
+
+// 将子图层移出组
+function moveChildLayerOutOfGroup(childLayerId) {
+  console.log(`移出组操作: ${childLayerId}`);
+  // TODO: 实现将子图层移出组的逻辑
+  hideContextMenu();
+}
+
+// 点击空白区域清除选择
+function handlePanelClick(event) {
+  // 如果点击的是面板空白区域，清除多选状态
+  if (event.target === event.currentTarget) {
+    if (isMultiSelectMode.value) {
+      clearSelection();
+    }
+  }
+}
+
+// 处理根级图层拖拽排序
+async function handleRootLayersSort(event) {
+  console.log("🔄 图层拖拽排序开始:", { event });
+  const { newIndex, oldIndex } = event;
+  const layerId = sortableRootLayers.value[oldIndex]?.id;
+  if (!commandManager) {
+    console.warn("命令管理器未注入，使用回退方案");
+    emit("reorder-layers", {
+      oldIndex: oldIndex,
+      newIndex: newIndex,
+      layerId,
+    });
+    return;
+  }
+
+  const layerToMove = sortableRootLayers.value[oldIndex];
+  if (!layerToMove) {
+    console.error("找不到要移动的图层");
+    return;
+  }
+
+  try {
+    layerManager?.reorderLayers(oldIndex, newIndex, layerId);
+    console.log(
+      `✅ 图层排序命令执行成功: ${layerToMove.name} (${oldIndex} -> ${newIndex})`
+    );
+  } catch (error) {
+    console.error("❌ 图层排序命令执行失败:", error);
+    emit("reorder-layers", {
+      oldIndex: oldIndex,
+      newIndex: newIndex,
+      layerId: layerToMove.id,
+    });
+  }
+}
+
+// 处理子图层拖拽排序
+async function handleChildLayersSort(event, childrenLayers, parentId) {
+  console.log("🔄 子图层拖拽排序开始:", { event, parentId });
+  const { newIndex, oldIndex } = event;
+  const layerId = childrenLayers?.[oldIndex]?.id;
+  if (!commandManager) {
+    console.warn("命令管理器未注入，使用回退方案");
+    emit("reorder-child-layers", {
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId,
+    });
+    return;
+  }
+
+  // 获取父图层
+  const parentLayer = layers.value.find((layer) => layer.id === parentId);
+  if (!parentLayer) {
+    console.error("❌ 找不到父图层:", parentId);
+    return;
+  }
+
+  // 获取父图层的子图层列表
+  const layerToMove = childrenLayers[oldIndex];
+
+  if (!layerToMove) {
+    console.error(
+      "❌ 找不到要移动的子图层，oldIndex:",
+      oldIndex,
+      "childLayers:",
+      childrenLayers
+    );
+    return;
+  }
+
+  console.log("📝 子图层排序详情:", {
+    parentId,
+    parentLayerName: parentLayer.name,
+    layerToMove: layerToMove.name,
+    oldIndex,
+    newIndex,
+    totalChildLayers: childrenLayers.length,
+  });
+
+  try {
+    layerManager?.moveLayerToIndex({ parentId, oldIndex, newIndex, layerId });
+    console.log(
+      `✅ 子图层排序命令执行成功: ${layerToMove.name} (${oldIndex} -> ${newIndex})`
+    );
+  } catch (error) {
+    console.error("❌ 子图层排序命令执行失败:", error);
+    emit("reorder-child-layers", {
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId: layerToMove.id,
+    });
+  }
+}
+
+// 栅格化图层
+async function rasterizeLayer(layerId) {
+  if (!layerManager?.rasterizeLayer) {
+    console.warn("栅格化功能不可用");
+    return;
+  }
+
+  try {
+    const success = await layerManager.rasterizeLayer(layerId);
+    if (success) {
+      const layer = layers.value.find((l) => l.id === layerId);
+      console.log(`✅ 成功栅格化图层: ${layer?.name || layerId}`);
+    } else {
+      console.warn("栅格化图层失败");
+    }
+  } catch (error) {
+    console.error("栅格化图层时发生错误:", error);
+  }
+}
+
+// 合并组图层
+async function mergeGroupLayer(groupId) {
+  if (!layerManager?.mergeGroupLayers) {
+    console.warn("合并组功能不可用");
+    return;
+  }
+
+  try {
+    const childLayerId = await layerManager.mergeGroupLayers(groupId);
+    if (childLayerId) {
+      const groupLayer = layers.value.find((l) => l.id === groupId);
+      console.log(
+        `✅ 成功合并组图层: ${
+          groupLayer?.name || groupId
+        }, 生成 ${childLayerId} 图层`
+      );
+    } else {
+      console.warn("合并组图层失败");
+    }
+  } catch (error) {
+    console.error("合并组图层时发生错误:", error);
+  }
+}
+
+// 置顶图层
+function moveLayerToTop(layerId) {
+  if (!layerManager?.moveLayer) {
+    console.warn("移动图层功能不可用");
+    return;
+  }
+
+  const success = layerManager.moveLayer(layerId, "toTop");
+  if (success) {
+    const layer = layers.value.find((l) => l.id === layerId);
+    console.log(`✅ 成功置顶图层: ${layer?.name || layerId}`);
+  } else {
+    console.warn("置顶图层失败");
+  }
+}
+
+// 置底图层
+function moveLayerToBottom(layerId) {
+  if (!layerManager?.moveLayer) {
+    console.warn("移动图层功能不可用");
+    return;
+  }
+
+  const success = layerManager.moveLayer(layerId, "toBottom");
+  if (success) {
+    const layer = layers.value.find((l) => l.id === layerId);
+    console.log(`✅ 成功置底图层: ${layer?.name || layerId}`);
+  } else {
+    console.warn("置底图层失败");
+  }
+}
+</script>
+
+<template>
+  <div class="layers-panel-inner" @click="handlePanelClick">
+    <div class="layers-header">
+      <h3>
+        {{ $t("图层") }}
+        {{ selectedLayerIds.length > 0 ? `(${selectedLayerIds.length})` : "" }}
+      </h3>
+      <div class="layer-actions-group">
+        <!-- 多选操作按钮组 -->
+        <div v-if="isMultiSelectMode" class="multi-select-actions">
+          <div
+            class="group-btn action-btn"
+            :class="{ disabled: !canGroupLayers }"
+            @click="groupSelectedLayers"
+            :title="$t('创建组')"
+          >
+            <SvgIcon name="CCreateGroup" size="20"></SvgIcon>
+          </div>
+
+          <div
+            class="ungroup-btn action-btn"
+            :class="{ disabled: !canUngroupLayers }"
+            @click="ungroupSelectedLayer"
+            :title="$t('解组')"
+          >
+            <SvgIcon name="CCancelGroup" size="20"></SvgIcon>
+          </div>
+
+          <div
+            class="delete-selected-btn action-btn"
+            @click="deleteSelectedLayers"
+            :title="$t('删除选中图层')"
+          >
+            <SvgIcon name="CDelete" size="16"></SvgIcon>
+          </div>
+
+          <div
+            class="clear-selection-btn action-btn"
+            @click="clearSelection"
+            :title="$t('清除选择')"
+          >
+            <SvgIcon name="CCloseNo" size="14"></SvgIcon>
+          </div>
+        </div>
+
+        <!-- 常规操作按钮 -->
+        <div v-else class="normal-actions">
+          <div
+            class="add-layer-btn action-btn"
+            @click="addLayer"
+            :title="$t('添加图层')"
+          >
+            <SvgIcon name="CPlus" size="16"></SvgIcon>
+          </div>
+
+          <div
+            class="select-all-btn action-btn"
+            @click="selectAllLayers"
+            :title="$t('全选图层')"
+          >
+            <SvgIcon name="CCheckbox" size="16"></SvgIcon>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 多选提示条 -->
+    <div v-if="isMultiSelectMode" class="multi-select-info">
+      <span>已选择 {{ selectedLayerIds.length }} 个图层</span>
+      <small>提示：按住 Ctrl/Cmd 多选，Shift 范围选择，长按进入多选模式</small>
+    </div>
+
+    <!-- 图层列表组件 -->
+    <LayersList
+      :layers="layers"
+      :active-layer-id="activeLayerId"
+      :sortable-root-layers="sortableRootLayers"
+      :fixed-layers="fixedLayers"
+      :selected-layer-ids="selectedLayerIds"
+      :is-multi-select-mode="isMultiSelectMode"
+      :editing-layer-id="editingLayerId"
+      :editing-layer-name="editingLayerName"
+      :thumbnail-manager="thumbnailManager"
+      :expanded-group-ids="expandedGroupIds"
+      :isChild="false"
+      group-name="layers-root"
+      @layer-click="handleLayerClick"
+      @layer-double-click="handleLayerDoubleClick"
+      @context-menu="showContextMenu"
+      @checkbox-change="handleCheckboxClick"
+      @toggle-visibility="toggleLayerVisibility"
+      @toggle-lock="toggleSelectedLayersLockByLayer"
+      @delete="removeLayer"
+      @edit-confirm="confirmEdit"
+      @edit-cancel="cancelEdit"
+      @edit-keydown="handleEditKeydown"
+      @touch-start="handleTouchStart"
+      @touch-move="handleTouchMove"
+      @touch-end="handleTouchEnd"
+      @update:editing-name="editingLayerName = $event"
+      @root-layers-sort="handleRootLayersSort"
+      @child-layers-sort="handleChildLayersSort"
+      @select-child-layer="selectChildLayer"
+      @start-child-layer-edit="startChildLayerEdit"
+      @child-context-menu="showChildLayerContextMenu"
+      @toggle-group-expanded="toggleGroupExpanded"
+      @toggle-child-visibility="toggleChildLayerVisibility"
+      @toggle-child-lock="toggleChildLayerLock"
+      @delete-child="deleteChildLayer"
+      @rename-child="renameChildLayer"
+    />
+
+    <!-- 固定层（背景层和固定层） -->
+    <div v-if="fixedLayers.length > 0" class="fixed-layers">
+      <!-- 遍历固定层 -->
+      <LayerItem
+        v-for="layer in fixedLayers"
+        :key="layer.id"
+        :layer="layer"
+        :is-child="false"
+        :is-active="layer.id === activeLayerId"
+        :is-selected="false"
+        :is-multi-select-mode="false"
+        :is-editing="editingLayerId === layer.id"
+        :editing-name="editingLayerName"
+        :can-delete="false"
+        :thumbnail-url="getLayerThumbnail(layer.id)"
+        :isHidenDragHandle="true"
+        @toggle-visibility="
+          (...args) => forwardEvent('toggle-visibility', ...args)
+        "
+        @edit-confirm="(...args) => forwardEvent('edit-confirm', ...args)"
+        @edit-cancel="(...args) => forwardEvent('edit-cancel', ...args)"
+        @edit-keydown="(...args) => forwardEvent('edit-keydown', ...args)"
+        @update:editing-name="
+          (...args) => forwardEvent('update:editing-name', ...args)
+        "
+      />
+    </div>
+
+    <!-- 右键菜单 -->
+    <ContextMenu
+      :visible="contextMenuVisible"
+      :position="contextMenuPosition"
+      :items="contextMenuItems"
+      @close="hideContextMenu"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./layersPanel.less";
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/contextMenu.less b/src/component/Canvas/CanvasEditor/components/LayersPanel/contextMenu.less
new file mode 100644
index 00000000..305571dd
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/contextMenu.less
@@ -0,0 +1,232 @@
+// 右键菜单样式
+.context-menu {
+  position: fixed;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  z-index: 1000;
+  max-width: 280px;
+  padding: 4px 0;
+  font-size: 14px;
+  // overflow: hidden;
+  top: 60px; // 默认位置，可根据实际需要调整
+  // 动画相关
+  &.context-menu-enter-active,
+  &.context-menu-leave-active {
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  &.context-menu-enter-from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  
+  &.context-menu-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: rgba(0, 0, 0, 0.85);
+  white-space: nowrap;
+  min-height: 32px;
+  position: relative;
+  
+  &:hover:not(.disabled) {
+    background-color: #f5f5f5;
+  }
+  
+  &:active:not(.disabled) {
+    background-color: #e6e6e6;
+  }
+  
+  &.disabled {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+    
+    .context-menu-icon {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+  
+  &.danger {
+    color: #ff4d4f;
+    
+    &:hover:not(.disabled) {
+      background-color: #fff2f0;
+      color: #ff7875;
+    }
+    
+    .context-menu-icon {
+      color: #ff4d4f;
+    }
+  }
+  
+  &.has-children {
+    position: relative;
+  }
+
+  &.hovered {
+    background-color: #f5f5f5;
+  }
+}
+
+.context-menu-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  flex-shrink: 0;
+}
+
+.context-menu-label {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.context-menu-shortcut {
+  margin-left: 16px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.context-menu-arrow {
+  margin-left: 8px;
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.2s;
+}
+
+.context-menu-divider {
+  height: 1px;
+  margin: 4px 0;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+// 子菜单样式
+.context-submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  z-index: 1001;
+  min-width: 160px;
+  max-width: 280px;
+  padding: 4px 0;
+  font-size: 14px;
+  // overflow: hidden;
+
+  &.submenu-left {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// 子菜单动画
+.context-submenu-enter-active,
+.context-submenu-leave-active {
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.context-submenu-enter-from {
+  opacity: 0;
+  transform: scale(0.9) translateY(-8px);
+}
+
+.context-submenu-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-4px);
+}
+
+// 响应式优化
+@media (max-width: 768px) {
+  .context-menu {
+    min-width: 140px;
+    font-size: 13px;
+  }
+  
+  .context-menu-item {
+    min-height: 36px;
+    padding: 6px 10px;
+  }
+  
+  .context-menu-shortcut {
+    display: none;
+  }
+
+  .context-submenu {
+    min-width: 140px;
+    font-size: 13px;
+  }
+}
+
+// 暗色主题支持
+@media (prefers-color-scheme: dark) {
+  .context-menu {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48),
+      0 3px 6px -4px rgba(0, 0, 0, 0.32),
+      0 9px 28px 8px rgba(0, 0, 0, 0.35);
+  }
+  
+  .context-menu-item {
+    color: rgba(255, 255, 255, 0.85);
+    
+    &:hover:not(.disabled) {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+    
+    &:active:not(.disabled) {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+    
+    &.disabled {
+      color: rgba(255, 255, 255, 0.3);
+    }
+
+    &.hovered {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+  }
+  
+  .context-menu-icon {
+    color: rgba(255, 255, 255, 0.65);
+  }
+  
+  .context-menu-shortcut {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .context-menu-arrow {
+    color: rgba(255, 255, 255, 0.45);
+  }
+  
+  .context-menu-divider {
+    background-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .context-submenu {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48),
+      0 3px 6px -4px rgba(0, 0, 0, 0.32),
+      0 9px 28px 8px rgba(0, 0, 0, 0.35);
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less b/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
new file mode 100644
index 00000000..9212fb4e
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
@@ -0,0 +1,844 @@
+// 文本省略样式
+.text-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// 主容器样式
+.layers-panel-inner {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  z-index: 6;
+  overflow-y: auto;
+  height: 100%;
+  max-height: 85vh;
+  -webkit-overflow-scrolling: touch;
+}
+
+// 头部样式
+.layers-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #e0e0e0;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.layer-actions-group {
+  display: flex;
+  gap: 8px;
+  .normal-actions,
+  .multi-select-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// 操作按钮样式
+.action-btn {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f0f0f0;
+    border-color: #40a9ff;
+    color: #40a9ff;
+  }
+
+  &:active {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: #f5f5f5;
+    color: #bfbfbf;
+    border-color: #e6e6e6;
+
+    &:hover {
+      background-color: #f5f5f5;
+      color: #bfbfbf;
+      border-color: #e6e6e6;
+    }
+  }
+}
+
+// 特殊按钮样式
+.group-btn {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  color: #1890ff;
+
+  &:hover {
+    background-color: #bae7ff;
+    border-color: #69c0ff;
+  }
+
+  &.disabled{
+    background-color: #f0f5ff;
+    border-color: #d9ecff;
+    color: #bfbfbf;
+  }
+}
+
+.ungroup-btn {
+  background-color: #fff2e8;
+  border-color: #ffbb96;
+  color: #fa8c16;
+
+  &:hover {
+    background-color: #ffd8bf;
+    border-color: #ff9c6e;
+    color: #fa8c16;
+  }
+
+  &.disabled{
+    background-color: #f0f5ff;
+    border-color: #d9ecff;
+    color: #bfbfbf;
+  }
+}
+
+.delete-selected-btn {
+  background-color: #fff2f0;
+  border-color: #ffccc7;
+  color: #ff4d4f;
+
+  &:hover {
+    background-color: #ffebe6;
+    border-color: #ff7875;
+    color: #ff4d4f;
+  }
+}
+
+.clear-selection-btn {
+  background-color: #f6f6f6;
+  border-color: #d9d9d9;
+  color: #595959;
+
+  &:hover {
+    background-color: #e6e6e6;
+    border-color: #bfbfbf;
+    color: #595959;
+  }
+}
+
+// 多选信息提示
+.multi-select-info {
+  padding: 10px 6px;
+  // background-color: #e6f7ff;
+  background-color: rgba(238, 238, 238,0.4);
+  border-bottom: 1px solid #91d5ff;
+  color: #333;
+  font-size: 13px;
+  line-height: 1.4;
+
+  small {
+    display: block;
+    margin-top: 4px;
+    color: #666;
+    font-size: 11px;
+  }
+}
+
+// 图层列表
+.layers-list {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+}
+
+// 图层项样式
+.layer-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  border: none;
+  border-bottom: 1px solid #f5f2f2;
+  padding-left: 30px;
+  padding-right: 10px;  
+
+  &.group-layer {
+    background-color: rgba(240, 248, 255, 0.3);
+    border-color: #e6f7ff;
+  }
+
+  &:hover {
+    background-color: #f0f0f0;
+    border-color: #e0e0e0;
+  }
+
+  &.active {
+    background-color: #e6f7ff;
+    border-color: #91d5ff;
+  }
+
+  &.selected {
+    background-color: #bae7ff;
+    border-color: #91d5ff;
+    // box-shadow: 0 0 0 1px #1890ff;
+  }
+
+  &.editing {
+    background-color: #fff7e6;
+    border-color: #ffd666;
+  }
+
+  // &.multi-select-mode {
+  //   // padding-left: 30px;
+  // }
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+// 图层头部
+.layer-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 6px;
+}
+
+// 图层预览
+.layer-review {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex: none;
+  background: repeating-conic-gradient(#f5f5f5 0% 25%, #ffffff 0% 50%) 50% /
+    10px 10px;
+  border: 1px solid #e0e0e0;
+}
+
+.layer-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.layer-type-icon {
+  font-size: 14px;
+}
+
+// 可见性按钮
+.visibility-btn {
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  flex: none;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.hidden {
+    color: #999;
+  }
+}
+
+// 图层名称
+.layer-name-container {
+  flex: 1;
+  margin: 0 6px;
+  overflow: hidden;
+  // max-width: 204px;
+  .layer-name-wrapper{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.layer-name {
+  color: #333;
+  font-size: 14px;
+  text-align: left;
+  display: block;
+  width: 100%;
+}
+
+.layer-name-input {
+  width: 100%;
+  padding: 2px 4px;
+  border: 1px solid #1890ff;
+  border-radius: 3px;
+  font-size: 14px;
+  color: #333;
+  background-color: #fff;
+  outline: none;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}
+
+// 图层状态
+.layer-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+ 
+}
+
+.status-icon {
+  font-size: 12px;
+
+  &.locked {
+    color: #1890ff;
+  }
+
+  &.group {
+    color: #fa8c16;
+  }
+
+  &.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+// 图层操作
+.layer-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.delete-btn {
+  font-size: 16px;
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: #ff4d4f;
+  }
+  
+  &.disabled{
+    color: #ccc;
+    cursor: not-allowed;
+    // pointer-events: none;
+  }
+}
+
+// 拖拽手柄
+.layer-drag-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 100%;
+  cursor: move;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  margin-right: 4px;
+  background: #eee;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  &:hover {
+    color: #333;
+  }
+}
+
+// 复选框
+.layer-checkbox {
+  width: 18px;
+  height: 18px;
+  margin-right: 0;
+  cursor: pointer;
+  flex: none;
+  display: flex;
+  align-items: center;
+
+  // input[type="checkbox"] {
+  //   width: 16px;
+  //   height: 16px;
+  //   cursor: pointer;
+  //   accent-color: #1890ff;
+  // }
+}
+
+// 子图层样式
+.child-layers {
+}
+
+.child-layer {
+  padding: 8px 20px 8px 32px;
+  background-color: rgba(240, 240, 240, 0.3);
+  border-left: 2px solid #e0e0e0;
+
+  &:hover {
+    background-color: rgba(224, 224, 224, 0.5);
+  }
+
+  &.active {
+    background-color: rgba(230, 247, 255, 0.5);
+    border-left: 2px solid #1890ff;
+  }
+
+  &.editing {
+    background-color: rgba(255, 247, 230, 0.5);
+    border-left: 2px solid #ffd666;
+  }
+
+  .layer-actions {
+    position: static;
+    display: flex;
+    gap: 4px;
+
+    button {
+      width: 20px;
+      height: 20px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999;
+      border-radius: 2px;
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: #f0f0f0;
+        color: #333;
+      }
+    }
+  }
+}
+
+.layer-indent {
+  width: 20px;
+  flex: none;
+}
+
+.layer-info {
+  flex: 1;
+  margin: 0 8px;
+
+  .layer-name {
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 2px;
+  }
+
+  .layer-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .layer-type {
+    font-size: 11px;
+    color: #999;
+  }
+}
+
+.child-drag-handle {
+  width: 16px;
+  height: 16px;
+  cursor: move;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  margin-right: 4px;
+
+  &:hover {
+    color: #333;
+  }
+}
+
+// 固定图层样式
+.fixed-layers {
+  border-top: 1px solid #e0e0e0;
+  // background-color: #fafafa;
+  
+  background-color: rgba(238, 238, 238,0.4);
+  .layer-drag-handle{
+    cursor: default;
+  }
+}
+
+.fixed-layer {
+  background-color: #fafafa;
+  // border-left: 3px solid #1890ff;
+
+  // &:hover {
+  //   background-color: #e6f7ff;
+  // }
+}
+
+.fixed-layer-indicator {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1890ff;
+  margin-right: 4px;
+}
+
+.background-indicator,
+.fixed-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+}
+
+.background-icon,
+.fixed-icon {
+  font-size: 14px;
+  color: #999;
+}
+
+// 拖拽样式
+.sortable-layers {
+  width: 100%;
+}
+
+.ghost {
+  opacity: 0.5;
+  background-color: #f0f0f0;
+  border: 2px dashed #1890ff;
+}
+
+.chosen {
+  background-color: #e6f7ff;
+  border: 1px solid #1890ff;
+}
+
+.drag {
+  opacity: 0.8;
+  transform: rotate(5deg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+// 子图层拖拽样式
+.child-layers {
+  .ghost {
+    opacity: 0.4;
+    background-color: #fff7e6;
+    border: 2px dashed #faad14;
+  }
+
+  .chosen {
+    background-color: #fff7e6;
+    border: 1px solid #faad14;
+  }
+
+  .drag {
+    opacity: 0.7;
+    transform: rotate(3deg);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .layers-panel-inner {
+    max-height: 70vh;
+  }
+
+  .layer-item {
+    padding: 12px;
+    padding-left: 35px;
+  }
+
+  .layer-header {
+    min-height: 40px;
+  }
+
+  .layer-drag-handle,
+  .visibility-btn {
+    width: 24px;
+  }
+
+  .layer-review {
+    width: 36px;
+    height: 36px;
+  }
+
+  .action-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .multi-select-info {
+    // padding: 12px;
+
+    small {
+      font-size: 11px;
+    }
+  }
+//   .layer-name-container {
+//     // max-width: 182px;
+//   }
+}
+
+// iPad 优化
+@media (min-width: 768px) and (max-width: 1024px) {
+  .layer-item {
+    padding: 10px;
+    padding-left: 30px;
+  }
+
+  .layer-drag-handle:hover,
+  .visibility-btn:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+  }
+}
+
+// 触摸设备优化
+@media (hover: none) and (pointer: coarse) {
+  .layer-item {
+    padding-left: 30px;
+    &:hover {
+      background-color: transparent;
+    }
+
+    &:active {
+      background-color: #f0f0f0;
+    }
+  }
+
+  .action-btn {
+    &:hover {
+      background-color: transparent;
+      border-color: #d9d9d9;
+      color: #666;
+    }
+
+    &:active {
+      background-color: #e6f7ff;
+      border-color: #1890ff;
+      color: #1890ff;
+    }
+  }
+}
+
+// 组图层展开/收起图标样式
+.group-expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+  margin-right: 4px;
+
+  // &:hover {
+  //   background-color: rgba(0, 0, 0, 0.1);
+  // }
+
+  // 展开/收起图标的过渡动画
+  .svg-icon {
+    transition: transform 0.2s ease;
+  }
+}
+
+// 组图层样式
+.group-layer {
+  .layer-type-icon {
+    font-size: 14px;
+  }
+}
+
+// 子图层缩进和连接线
+.child-layers {
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #e0e0e0;
+  }
+}
+
+.layer-indent {
+  width: 16px;
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    width: 8px;
+    height: 1px;
+    background-color: #e0e0e0;
+  }
+}
+
+// 子图层展开/收起动画样式
+.child-layers-expand-enter-active,
+.child-layers-expand-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.child-layers-expand-enter-from {
+  height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.child-layers-expand-leave-to {
+  height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// 展开图标旋转动画优化
+.group-expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+  margin-right: 4px;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  // 展开/收起图标的过渡动画
+  .svg-icon {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+// 子图层展开时的额外样式
+.child-layers {
+  position: relative;
+  background: linear-gradient(135deg, rgba(240, 248, 255, 0.1) 0%, rgba(240, 248, 255, 0.05) 100%);
+  // border-radius: 4px;
+  // margin-top: 2px;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: linear-gradient(to bottom, #e0e0e0 0%, rgba(224, 224, 224, 0.3) 100%);
+  }
+
+  // 子图层项动画
+  .layer-item {
+    animation: slideInRight 0.2s ease-out;
+    animation-fill-mode: both;
+    
+    &:nth-child(1) { animation-delay: 0.05s; }
+    &:nth-child(2) { animation-delay: 0.1s; }
+    &:nth-child(3) { animation-delay: 0.15s; }
+    &:nth-child(4) { animation-delay: 0.2s; }
+    &:nth-child(5) { animation-delay: 0.25s; }
+  }
+}
+
+// 子图层项进入动画
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// 移动端动画优化
+@media (hover: none) and (pointer: coarse) {
+  .child-layers-expand-enter-active,
+  .child-layers-expand-leave-active {
+    transition: all 0.25s ease;
+  }
+  
+  .group-expand-icon {
+    &:hover {
+      transform: none;
+      background-color: transparent;
+    }
+    
+    &:active {
+      transform: scale(0.9);
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+  
+  .child-layers .layer-item {
+    animation-duration: 0.15s;
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue b/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
index 057ad9bf..e143aeff 100644
--- a/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
@@ -108,6 +108,15 @@
           <div class="debug-item">
             平均耗时: <span>{{ avgOperationTime.toFixed(2) }}ms</span>
           </div>
+          <div class="debug-item">
+            推拉算法: <span>{{ liquifyAlgorithmType }}</span>
+          </div>
+          <div class="debug-item">
+            拖拽状态: <span>{{ isDragging ? "拖拽中" : "未拖拽" }}</span>
+          </div>
+          <div class="debug-item">
+            拖拽距离: <span>{{ dragDistance.toFixed(1) }}px</span>
+          </div>
           <div class="debug-item">
             当前液化图: <span><img :src="currImage" class="currImage" /> </span>
           </div>
@@ -123,8 +132,12 @@ import {
   CompositeLiquifyCommand,
   createLiquifyResetCommand,
   createLiquifyDeformCommand,
+  createLiquifyStateCommand,
+  serializeFabricObject,
 } from "../commands/LiquifyCommands";
 import { OperationType } from "../utils/layerHelper";
+import { LiquifyRealTimeUpdater } from "../managers/liquify/LiquifyRealTimeUpdater";
+import { LiquifyStateManager } from "../managers/liquify/LiquifyStateManager";
 
 // Props定义
 const props = defineProps({
@@ -161,6 +174,7 @@ const isEditing = ref(false);
 const isDrawing = ref(false); // 是否正在绘制
 const targetObject = ref(null);
 const targetLayerId = ref(null);
+const targetObjectId = ref(null); // 新增：目标对象的唯一ID
 const originalImageData = ref(null);
 
 // 渲染模式信息
@@ -169,15 +183,29 @@ const webglAvailable = ref(false);
 const operationCount = ref(0);
 const avgOperationTime = ref(0);
 
+// 新推拉算法相关状态
+const liquifyAlgorithmType = ref("增强版推拉算法");
+const isDragging = ref(false);
+const dragDistance = ref(0);
+
 // 鼠标位置追踪
 const lastX = ref(0);
 const lastY = ref(0);
 
+// 持续按压相关状态
+const isPressing = ref(false); // 是否正在按压
+const pressStartTime = ref(0); // 按压开始时间
+const pressDuration = ref(0); // 按压持续时间
+const pressTimer = ref(null); // 持续按压定时器
+const pressInterval = ref(50); // 持续执行间隔（毫秒）
+const pressX = ref(0); // 按压点X坐标
+const pressY = ref(0); // 按压点Y坐标
+
 // 当前模式
 const currentMode = ref("push"); // 默认为推动模式
 
 // 参数设置
-const size = ref(50); // 工具大小 (5-200)
+const size = ref(100); // 工具大小 (5-200)
 const pressure = ref(50); // 压力大小 (0-100)
 const distortion = ref(0); // 失真程度 (0-100)
 const power = ref(50); // 动力/强度 (0-100)
@@ -185,6 +213,17 @@ const power = ref(50); // 动力/强度 (0-100)
 // 批量操作缓存
 const compositeCommand = ref(null);
 
+// 液化操作的初始状态记录
+const initialObjectState = ref(null);
+const initialImageData = ref(null); // 新增：初始图像数据
+const currentLiquifyCommand = ref(null);
+
+// 实时更新器
+const realtimeUpdater = ref(null);
+
+// 状态管理器
+const stateManager = ref(null);
+
 // 可用液化模式
 const availableModes = ref([
   { id: "push", name: "推", iconText: "↔" },
@@ -192,7 +231,7 @@ const availableModes = ref([
   { id: "counterclockwise", name: "逆时针转动", iconText: "↺" },
   { id: "pinch", name: "捏合", iconText: "⤢" },
   { id: "expand", name: "展开", iconText: "⤡" },
-  // { id: "crystal", name: "水晶", iconText: "✧" },
+  { id: "crystal", name: "水晶", iconText: "✧" },
   { id: "edge", name: "边缘", iconText: "◈" },
   { id: "reconstruct", name: "重建", iconText: "↩" },
 ]);
@@ -265,6 +304,11 @@ async function prepareForLiquify(targetObj) {
 
   targetObject.value = targetObj;
 
+  // 设置实时更新器的目标对象
+  if (realtimeUpdater.value) {
+    realtimeUpdater.value.setTargetObject(targetObj);
+  }
+
   // 获取图层信息
   const layerId = targetObj.layerId || props.canvas.activeLayerId?.value;
   targetLayerId.value = layerId;
@@ -318,6 +362,23 @@ onMounted(() => {
   // 监听显示事件
   document.addEventListener("showLiquifyPanel", showPanel);
 
+  // 创建实时更新器
+  if (props.canvas) {
+    realtimeUpdater.value = new LiquifyRealTimeUpdater(props.canvas, {
+      throttleTime: 16, // 60fps
+      useDirectUpdate: true,
+      imageQuality: 1.0, // 最高质量
+      skipRenderDuringDrag: false, // 初始不跳过渲染
+      currImage,
+    });
+
+    // 创建状态管理器
+    stateManager.value = new LiquifyStateManager(
+      props.canvas,
+      realtimeUpdater.value
+    );
+  }
+
   // 监听画布事件
   setupCanvasListeners();
 });
@@ -326,6 +387,18 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener("showLiquifyPanel", showPanel);
   removeCanvasListeners();
+
+  // 清理状态管理器
+  if (stateManager.value) {
+    stateManager.value.dispose();
+    stateManager.value = null;
+  }
+
+  // 清理实时更新器
+  if (realtimeUpdater.value) {
+    realtimeUpdater.value.dispose();
+    realtimeUpdater.value = null;
+  }
 });
 
 // 方法定义
@@ -386,7 +459,8 @@ function showPanel(event) {
     resetParams();
   }
 
-  targetObject.value = targetObj;
+  // 使用新的设置目标对象方法
+  setTargetObject(targetObj);
   targetLayerId.value = targetLayerIdValue;
 
   // 处理originalImageData
@@ -405,7 +479,7 @@ function showPanel(event) {
   if (!compositeCommand.value || !isEditing.value) {
     compositeCommand.value = new CompositeLiquifyCommand({
       canvas: props.canvas,
-      targetObject: targetObject.value,
+      targetObject: getCurrentTargetObject(),
       targetLayerId: targetLayerId.value,
       originalData: originalImageData.value,
       layerManager: props.layerManager,
@@ -416,60 +490,60 @@ function showPanel(event) {
   isEditing.value = true;
 
   // 初始化液化管理器并准备液化环境
-  if (props.liquifyManager && targetObject.value) {
-    // 确保液化管理器正确初始化
-    props.liquifyManager.initialize({
-      canvas: props.canvas,
-      layerManager: props.layerManager,
-    });
+  if (props.liquifyManager) {
+    const currentTarget = getCurrentTargetObject();
+    if (currentTarget) {
+      // 确保液化管理器正确初始化
+      props.liquifyManager.initialize({
+        canvas: props.canvas,
+        layerManager: props.layerManager,
+      });
 
-    // 如果没有原始图像数据，则需要先准备液化环境
-    if (!originalImageData.value) {
-      // 准备液化环境并获取原始图像数据
-      props.liquifyManager
-        .prepareForLiquify(targetObject.value)
-        .then((result) => {
-          if (result && result.originalImageData) {
-            originalImageData.value = result.originalImageData;
-            console.log(
-              "准备液化环境，获取原始图像数据成功:",
-              originalImageData.value.width,
-              "x",
-              originalImageData.value.height
-            );
+      // 如果没有原始图像数据，则需要先准备液化环境
+      if (!originalImageData.value) {
+        // 准备液化环境并获取原始图像数据
+        props.liquifyManager
+          .prepareForLiquify(currentTarget)
+          .then((result) => {
+            if (result && result.originalImageData) {
+              originalImageData.value = result.originalImageData;
+              console.log(
+                "准备液化环境，获取原始图像数据成功:",
+                originalImageData.value.width,
+                "x",
+                originalImageData.value.height
+              );
 
-            // 获取渲染模式信息
-            renderMode.value = result.renderMode || "未知";
-            const status = props.liquifyManager.getStatus
-              ? props.liquifyManager.getStatus()
-              : props.liquifyManager.enhancedManager
-              ? props.liquifyManager.enhancedManager.getStatus()
-              : {};
+              // 获取渲染模式信息
+              renderMode.value = result.renderMode || "未知";
+              const status = props.liquifyManager.getStatus
+                ? props.liquifyManager.getStatus()
+                : props.liquifyManager.enhancedManager
+                ? props.liquifyManager.enhancedManager.getStatus()
+                : {};
 
-            webglAvailable.value = status.isWebGLAvailable || false;
+              webglAvailable.value = status.isWebGLAvailable || false;
 
-            // 更新合成命令的原始数据
-            if (compositeCommand.value) {
-              compositeCommand.value.originalData = originalImageData.value;
+              // 更新合成命令的原始数据
+              if (compositeCommand.value) {
+                compositeCommand.value.originalData = originalImageData.value;
+              }
+
+              // 立即设置当前模式
+              if (currentMode.value && props.liquifyManager.setMode) {
+                props.liquifyManager.setMode(currentMode.value);
+              }
+
+              // 设置当前参数
+              updateAllParams();
             }
-
-            // 立即设置当前模式
-            if (currentMode.value && props.liquifyManager.setMode) {
-              props.liquifyManager.setMode(currentMode.value);
-            }
-
-            // 设置当前参数
-            updateAllParams();
-          }
-        })
-        .catch((err) => {
-          console.error("准备液化环境失败:", err);
-        });
-    } else {
-      // 已有原始图像数据，直接准备环境
-      props.liquifyManager
-        .prepareForLiquify(targetObject.value)
-        .then((result) => {
+          })
+          .catch((err) => {
+            console.error("准备液化环境失败:", err);
+          });
+      } else {
+        // 已有原始图像数据，直接准备环境
+        props.liquifyManager.prepareForLiquify(currentTarget).then((result) => {
           if (result) {
             // 获取渲染模式信息
             renderMode.value = result.renderMode || "未知";
@@ -491,18 +565,136 @@ function showPanel(event) {
             updateAllParams();
           }
         });
+      }
     }
   }
 }
 
+/**
+ * 根据ID从画布中获取最新的目标对象
+ * @returns {Object|null} 目标对象或null
+ */
+function getCurrentTargetObject() {
+  if (!targetObjectId.value || !props.canvas) {
+    return null;
+  }
+
+  // 从画布中查找具有指定ID的对象
+  const objects = props.canvas.getObjects();
+  const foundObject = objects.find(
+    (obj) =>
+      obj.id === targetObjectId.value ||
+      obj.objectId === targetObjectId.value ||
+      obj.uid === targetObjectId.value
+  );
+
+  if (foundObject) {
+    // 更新缓存的引用
+    targetObject.value = foundObject;
+    return foundObject;
+  }
+
+  console.warn("未找到目标对象，ID:", targetObjectId.value);
+  return null;
+}
+
+/**
+ * 设置目标对象并记录其ID
+ * @param {Object} obj 目标对象
+ */
+function setTargetObject(obj) {
+  if (!obj) {
+    targetObject.value = null;
+    targetObjectId.value = null;
+    return;
+  }
+
+  // 确保对象有唯一ID
+  if (!obj.id && !obj.objectId && !obj.uid) {
+    obj.id =
+      "liquify_target_" +
+      Date.now() +
+      "_" +
+      Math.random().toString(36).substr(2, 9);
+  }
+
+  targetObject.value = obj;
+  targetObjectId.value = obj.id || obj.objectId || obj.uid;
+
+  console.log("设置目标对象，ID:", targetObjectId.value);
+}
+
 // 更新所有参数到液化管理器
 function updateAllParams() {
-  if (!props.liquifyManager) return;
+  if (!props.liquifyManager) {
+    console.warn("❌ 液化管理器未初始化，无法更新参数");
+    return;
+  }
 
-  updateParam("size", size.value);
-  updateParam("pressure", pressure.value / 100);
-  updateParam("distortion", distortion.value / 100);
-  updateParam("power", power.value / 100);
+  console.log("🔧 更新所有液化参数");
+
+  // 批量设置所有参数
+  const params = {
+    size: size.value,
+    pressure: pressure.value / 100,
+    distortion: distortion.value / 100,
+    power: power.value / 100,
+  };
+
+  console.log("📋 当前参数值:", params);
+
+  // 使用批量设置方法
+  if (typeof props.liquifyManager.setParams === "function") {
+    props.liquifyManager.setParams(params);
+  } else {
+    // 逐个设置参数（兼容性处理）
+    Object.entries(params).forEach(([key, value]) => {
+      updateParam(key, value);
+    });
+  }
+}
+
+/**
+ * 更新单个参数
+ */
+function updateParam(paramName, value) {
+  if (!props.liquifyManager) {
+    console.warn("❌ 液化管理器未初始化，无法更新参数:", paramName);
+    return;
+  }
+
+  console.log(`🔧 更新液化参数 ${paramName}:`, value);
+
+  // 使用批量设置方法（如果可用）
+  if (typeof props.liquifyManager.setParams === "function") {
+    const params = {
+      size: size.value,
+      pressure: pressure.value / 100,
+      distortion: distortion.value / 100,
+      power: power.value / 100,
+    };
+    props.liquifyManager.setParams(params);
+  } else {
+    // 兼容性：单个参数设置
+    if (typeof props.liquifyManager.setParam === "function") {
+      props.liquifyManager.setParam(paramName, value);
+    } else if (
+      typeof props.liquifyManager[
+        `set${paramName.charAt(0).toUpperCase() + paramName.slice(1)}`
+      ] === "function"
+    ) {
+      props.liquifyManager[
+        `set${paramName.charAt(0).toUpperCase() + paramName.slice(1)}`
+      ](value);
+    } else {
+      console.warn(`❌ 液化管理器不支持设置参数: ${paramName}`);
+    }
+  }
+
+  // 如果正在编辑且有目标对象，立即应用参数变化
+  if (isEditing.value && getCurrentTargetObject()) {
+    console.log(`✅ 参数 ${paramName} 已更新并应用到液化管理器`);
+  }
 }
 
 /**
@@ -515,9 +707,15 @@ function setupCanvasListeners() {
   _handleMouseMove = handleMouseMove;
   _handleMouseUp = handleMouseUp;
 
+  // 鼠标事件
   props.canvas.on("mouse:down", _handleMouseDown);
   props.canvas.on("mouse:move", _handleMouseMove);
   props.canvas.on("mouse:up", _handleMouseUp);
+
+  // 触摸事件支持（iPad兼容性）
+  props.canvas.on("touch:start", _handleMouseDown);
+  props.canvas.on("touch:move", _handleMouseMove);
+  props.canvas.on("touch:end", _handleMouseUp);
 }
 
 /**
@@ -526,10 +724,16 @@ function setupCanvasListeners() {
 function removeCanvasListeners() {
   if (!props.canvas) return;
 
+  // 移除鼠标事件
   props.canvas.off("mouse:down", _handleMouseDown);
   props.canvas.off("mouse:move", _handleMouseMove);
   props.canvas.off("mouse:up", _handleMouseUp);
 
+  // 移除触摸事件
+  props.canvas.off("touch:start", _handleMouseDown);
+  props.canvas.off("touch:move", _handleMouseMove);
+  props.canvas.off("touch:end", _handleMouseUp);
+
   _handleMouseDown = null;
   _handleMouseMove = null;
   _handleMouseUp = null;
@@ -542,6 +746,13 @@ function handleMouseDown(event) {
   if (!isEditing.value || !visible.value || !props.liquifyManager) return;
 
   isDrawing.value = true;
+  isDragging.value = true; // 更新拖拽状态
+
+  // 使用状态管理器开始操作
+  if (stateManager.value) {
+    stateManager.value.startOperation();
+    stateManager.value.startDrag();
+  }
 
   const pointer = props.canvas.getPointer(event.e);
 
@@ -549,8 +760,57 @@ function handleMouseDown(event) {
   lastX.value = pointer.x;
   lastY.value = pointer.y;
 
+  // === 修复：记录初始图像数据 ===
+  try {
+    const currentTarget = getCurrentTargetObject();
+    if (currentTarget && originalImageData.value) {
+      console.log("🎯 记录液化操作初始状态，对象ID:", targetObjectId.value);
+
+      // 记录初始图像数据（深拷贝）
+      const originalData = originalImageData.value;
+      initialImageData.value = new ImageData(
+        new Uint8ClampedArray(originalData.data),
+        originalData.width,
+        originalData.height
+      );
+
+      // 备用：也保存序列化状态
+      initialObjectState.value = serializeFabricObject(currentTarget);
+
+      console.log(
+        "✅ 初始图像数据已记录，尺寸:",
+        initialImageData.value.width,
+        "x",
+        initialImageData.value.height
+      );
+    }
+  } catch (error) {
+    console.error("❌ 记录初始状态失败:", error);
+    initialObjectState.value = null;
+    initialImageData.value = null;
+  }
+
+  // 开始液化操作 - 使用新的推拉算法
+  if (props.liquifyManager.startLiquifyOperation) {
+    // 将Fabric画布坐标转换为图像内部坐标
+    const imageCoords = _convertFabricCoordsToImageCoords(pointer.x, pointer.y);
+    if (imageCoords) {
+      props.liquifyManager.startLiquifyOperation(imageCoords.x, imageCoords.y);
+      console.log(
+        `开始液化操作，图像坐标: (${imageCoords.x}, ${imageCoords.y})`
+      );
+    }
+  }
+
   // 应用液化效果
   applyLiquifyAtPoint(pointer.x, pointer.y);
+
+  // 开始持续按压
+  isPressing.value = true;
+  pressStartTime.value = Date.now();
+  pressX.value = pointer.x;
+  pressY.value = pointer.y;
+  startPressTimer();
 }
 
 /**
@@ -561,24 +821,187 @@ async function handleMouseMove(event) {
 
   const pointer = props.canvas.getPointer(event.e);
 
+  // 更新拖拽距离
+  if (isDragging.value) {
+    const dx = pointer.x - lastX.value;
+    const dy = pointer.y - lastY.value;
+    dragDistance.value = Math.sqrt(dx * dx + dy * dy);
+  }
+
   // 应用液化效果
   applyLiquifyAtPoint(pointer.x, pointer.y);
 
   // 更新坐标
   lastX.value = pointer.x;
   lastY.value = pointer.y;
+
+  // 更新按压点
+  if (isPressing.value) {
+    pressX.value = pointer.x;
+    pressY.value = pointer.y;
+  }
 }
 
 /**
  * 鼠标抬起事件处理
  */
-function handleMouseUp() {
+async function handleMouseUp() {
   if (!isEditing.value || !visible.value) return;
 
-  // 设置绘制状态为false，但不触发其他事件
+  // 设置绘制状态为false
+  const wasDrawing = isDrawing.value;
   isDrawing.value = false;
+  isDragging.value = false; // 重置拖拽状态
+  dragDistance.value = 0; // 重置拖拽距离
+
+  // 结束液化操作 - 使用新的推拉算法
+  if (wasDrawing && props.liquifyManager.endLiquifyOperation) {
+    props.liquifyManager.endLiquifyOperation();
+    console.log("结束液化操作");
+  }
+
+  // 使用状态管理器结束操作
+  if (stateManager.value) {
+    try {
+      await stateManager.value.endDrag();
+      stateManager.value.endOperation();
+    } catch (error) {
+      console.error("结束拖拽操作时出错:", error);
+    }
+  }
+
+  // 如果刚才在绘制，同步目标对象引用
+  if (wasDrawing && realtimeUpdater.value) {
+    console.log("拖拽结束，高质量渲染已恢复");
+
+    // 同步目标对象引用
+    const updatedObject = realtimeUpdater.value.getTargetObject();
+    if (updatedObject && updatedObject !== targetObject.value) {
+      targetObject.value = updatedObject;
+    }
+  }
+
+  // === 修复：创建和执行液化状态命令 ===
+  if (wasDrawing && initialImageData.value) {
+    try {
+      const currentTarget = getCurrentTargetObject();
+      if (currentTarget) {
+        console.log("🎯 创建液化状态命令，记录最终状态");
+
+        // 获取最终的图像数据
+        let finalImageData = null;
+
+        // 尝试从实时更新器获取当前图像数据
+        if (realtimeUpdater.value) {
+          try {
+            const currentImageElement =
+              realtimeUpdater.value.getTargetObject()?._element;
+            if (currentImageElement) {
+              // 从当前图像元素创建ImageData
+              const tempCanvas = document.createElement("canvas");
+              tempCanvas.width = initialImageData.value.width;
+              tempCanvas.height = initialImageData.value.height;
+              const tempCtx = tempCanvas.getContext("2d");
+              tempCtx.drawImage(
+                currentImageElement,
+                0,
+                0,
+                tempCanvas.width,
+                tempCanvas.height
+              );
+              finalImageData = tempCtx.getImageData(
+                0,
+                0,
+                tempCanvas.width,
+                tempCanvas.height
+              );
+
+              console.log(
+                "✅ 从实时更新器获取最终图像数据成功，尺寸:",
+                finalImageData.width,
+                "x",
+                finalImageData.height
+              );
+            }
+          } catch (error) {
+            console.warn("从实时更新器获取图像数据失败:", error);
+          }
+        }
+
+        // 如果无法从实时更新器获取，则从当前目标对象获取
+        if (!finalImageData && currentTarget._element) {
+          try {
+            const tempCanvas = document.createElement("canvas");
+            tempCanvas.width = initialImageData.value.width;
+            tempCanvas.height = initialImageData.value.height;
+            const tempCtx = tempCanvas.getContext("2d");
+            tempCtx.drawImage(
+              currentTarget._element,
+              0,
+              0,
+              tempCanvas.width,
+              tempCanvas.height
+            );
+            finalImageData = tempCtx.getImageData(
+              0,
+              0,
+              tempCanvas.width,
+              tempCanvas.height
+            );
+
+            console.log(
+              "✅ 从目标对象获取最终图像数据成功，尺寸:",
+              finalImageData.width,
+              "x",
+              finalImageData.height
+            );
+          } catch (error) {
+            console.warn("从目标对象获取图像数据失败:", error);
+          }
+        }
+
+        // 如果成功获取到最终图像数据，创建液化状态命令
+        if (finalImageData) {
+          currentLiquifyCommand.value = createLiquifyStateCommand({
+            canvas: props.canvas,
+            layerManager: props.layerManager,
+            targetObject: currentTarget,
+            targetLayerId: targetLayerId.value,
+            targetObjectId: targetObjectId.value,
+            initialImageData: initialImageData.value,
+            finalImageData: finalImageData,
+            name: `液化操作 - ${currentMode.value}`,
+            description: `应用${currentMode.value}模式的液化变形操作`,
+          });
+
+          // 执行命令（将其添加到命令历史中）
+          if (props.commandManager && currentLiquifyCommand.value) {
+            await props.commandManager.execute(currentLiquifyCommand.value);
+            console.log("✅ 液化状态命令已执行并添加到命令历史");
+          }
+        } else {
+          console.warn("⚠️ 无法获取最终图像数据，跳过创建状态命令");
+        }
+
+        // 清理初始状态记录
+        initialImageData.value = null;
+        initialObjectState.value = null;
+      } else {
+        console.warn("⚠️ 未找到当前目标对象，无法创建状态命令");
+      }
+    } catch (error) {
+      console.error("❌ 创建液化状态命令失败:", error);
+      // 清理状态
+      initialImageData.value = null;
+      initialObjectState.value = null;
+      currentLiquifyCommand.value = null;
+    }
+  }
+
+  // 停止按压
+  isPressing.value = false;
+  stopPressTimer();
 
-  // 在这里不要触发其他可能导致重复初始化的事件
   console.log("鼠标抬起，结束液化变形操作");
 }
 
@@ -586,7 +1009,9 @@ function handleMouseUp() {
  * 在特定点应用液化效果
  */
 async function applyLiquifyAtPoint(x, y) {
-  if (!props.liquifyManager || !targetObject.value) {
+  // 使用getCurrentTargetObject获取最新的目标对象
+  const currentTarget = getCurrentTargetObject();
+  if (!props.liquifyManager || !currentTarget) {
     console.error("无法应用液化效果: 缺少liquifyManager或targetObject");
     return;
   }
@@ -622,14 +1047,14 @@ async function applyLiquifyAtPoint(x, y) {
       power: power.value / 100,
     };
 
-    // 创建液化变形命令
+    // 创建液化变形命令 - 使用最新的目标对象
     const deformCommand = createLiquifyDeformCommand({
       canvas: props.canvas,
       layerManager: props.layerManager,
       liquifyManager: props.liquifyManager,
       mode: currentMode.value,
       params: params,
-      targetObject: targetObject.value,
+      targetObject: currentTarget,
       targetLayerId: targetLayerId.value,
       x: imageCoords.x, // 使用转换后的图像坐标
       y: imageCoords.y,
@@ -652,17 +1077,35 @@ async function applyLiquifyAtPoint(x, y) {
       imageCoords.y
     );
 
-    // 应用液化效果（实际执行变形）
+    // 应用液化效果（实际执行变形）- 使用最新的目标对象
     const resultData = await props.liquifyManager.applyLiquify(
-      targetObject.value,
+      currentTarget,
       currentMode.value,
       params,
       imageCoords.x, // 使用转换后的图像坐标
       imageCoords.y
     );
-    // 关键修复：将变形结果应用到画布上的对象
-    if (resultData) {
-      await _updateCanvasObject(resultData);
+    // 关键修复：使用实时更新器处理变形结果
+    if (resultData && realtimeUpdater.value) {
+      // 设置目标对象（如果还未设置）- 使用最新的目标对象
+      if (realtimeUpdater.value.getTargetObject() !== currentTarget) {
+        realtimeUpdater.value.setTargetObject(currentTarget);
+      }
+
+      // 使用实时更新器更新图像
+      await realtimeUpdater.value.updateImage(resultData, isDrawing.value);
+      currImage.value = realtimeUpdater.value.getImageData(resultData);
+      // 如果实时更新器更新了对象，需要同步targetObject引用
+      const updatedObject = realtimeUpdater.value.getTargetObject();
+      if (updatedObject && updatedObject !== currentTarget) {
+        // 更新缓存的引用
+        targetObject.value = updatedObject;
+        // 如果对象有新的ID，也要更新ID
+        if (updatedObject.id || updatedObject.objectId || updatedObject.uid) {
+          targetObjectId.value =
+            updatedObject.id || updatedObject.objectId || updatedObject.uid;
+        }
+      }
     }
 
     // 计算操作耗时
@@ -678,6 +1121,22 @@ async function applyLiquifyAtPoint(x, y) {
         0.7 * avgOperationTime.value + 0.3 * operationTime;
     }
 
+    // 将性能指标传递给状态管理器
+    if (stateManager.value) {
+      stateManager.value.recordOperationMetrics({
+        operationTime,
+        operationType: "liquify",
+        mode: currentMode.value,
+        coordinates: { x: imageCoords.x, y: imageCoords.y },
+        imageSize: {
+          width: originalImageData.value?.width || 0,
+          height: originalImageData.value?.height || 0,
+        },
+        renderMode: renderMode.value,
+        isRealTime: isDrawing.value,
+      });
+    }
+
     // 检查渲染模式
     if (props.liquifyManager.getStatus) {
       const status = props.liquifyManager.getStatus();
@@ -697,41 +1156,87 @@ async function applyLiquifyAtPoint(x, y) {
 }
 
 /**
- * 将变形后的ImageData更新到Canvas对象上
- * @param {ImageData} imageData 变形后的图像数据
+ * 高效地更新画布上的图像
+ * 避免频繁创建新的fabric对象，而是直接更新现有对象的图像数据
  * @private
  */
-async function _updateCanvasObject(imageData) {
-  if (!imageData || !targetObject.value || !props.canvas) return;
+async function _updateImageOnCanvas(imageData) {
+  if (!imageData) {
+    return;
+  }
 
-  // 创建临时Canvas来渲染结果数据
-  const tempCanvas = document.createElement("canvas");
-  tempCanvas.width = imageData.width;
-  tempCanvas.height = imageData.height;
-  const tempCtx = tempCanvas.getContext("2d");
-  tempCtx.putImageData(imageData, 0, 0);
+  // 获取最新的目标对象
+  const currentTarget = getCurrentTargetObject();
+  if (!currentTarget) {
+    console.warn("无法更新画布图像：未找到目标对象");
+    return;
+  }
 
-  // 将Canvas转换为DataURL
-  const dataURL = tempCanvas.toDataURL("png", 1);
-  currImage.value = dataURL;
+  try {
+    // 创建临时canvas来渲染图像数据
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = imageData.width;
+    tempCanvas.height = imageData.height;
+    const tempCtx = tempCanvas.getContext("2d");
+    tempCtx.putImageData(imageData, 0, 0);
+
+    // 获取数据URL
+    const dataURL = tempCanvas.toDataURL("image/png");
+
+    // 更新当前显示的图像
+    currImage.value = dataURL;
+
+    // 为了性能考虑，只在拖拽过程中简单更新元素的src
+    // 而不创建新的fabric对象
+    if (isDrawing.value) {
+      // 拖拽过程中使用快速更新
+      if (currentTarget._element) {
+        currentTarget._element.src = dataURL;
+        // 标记对象需要重新渲染
+        currentTarget.dirty = true;
+        props.canvas.renderAll();
+      }
+    } else {
+      // 拖拽结束后进行完整的对象替换
+      await _replaceTargetObjectWithNewImage(dataURL);
+    }
+  } catch (error) {
+    console.error("更新画布图像时出错:", error);
+  }
+}
+
+/**
+ * 完整替换目标对象为新的图像对象
+ * 在拖拽结束后调用，确保对象状态的完整性
+ * @private
+ */
+async function _replaceTargetWithNewImage(dataURL) {
+  // 获取最新的目标对象
+  const currentTarget = getCurrentTargetObject();
+  if (!currentTarget) {
+    console.warn("无法替换对象：未找到目标对象");
+    return;
+  }
 
-  // 创建新的fabric图像对象
   return new Promise((resolve) => {
     fabric.Image.fromURL(dataURL, (img) => {
-      // 保留原对象的变换属性
+      // 保留原对象的ID信息
+      const originalId = targetObjectId.value;
+
+      // 保留原对象的所有变换属性和状态
       img.set({
-        left: targetObject.value.left,
-        top: targetObject.value.top,
-        scaleX: targetObject.value.scaleX,
-        scaleY: targetObject.value.scaleY,
-        angle: targetObject.value.angle,
-        flipX: targetObject.value.flipX,
-        flipY: targetObject.value.flipY,
-        opacity: targetObject.value.opacity,
-        originX: targetObject.value.originX,
-        originY: targetObject.value.originY,
-        id: targetObject.value.id,
-        name: targetObject.value.name,
+        left: currentTarget.left,
+        top: currentTarget.top,
+        scaleX: currentTarget.scaleX,
+        scaleY: currentTarget.scaleY,
+        angle: currentTarget.angle,
+        flipX: currentTarget.flipX,
+        flipY: currentTarget.flipY,
+        opacity: currentTarget.opacity,
+        originX: currentTarget.originX,
+        originY: currentTarget.originY,
+        id: originalId, // 使用记录的ID
+        name: currentTarget.name,
         layerId: targetLayerId.value,
         selected: false,
         evented: false,
@@ -739,11 +1244,12 @@ async function _updateCanvasObject(imageData) {
 
       // 替换Canvas上的对象
       const allObjects = props.canvas?.getObjects?.();
-
-      const index = allObjects.indexOf(targetObject.value);
+      const index = allObjects.indexOf(currentTarget);
       if (index !== -1) {
-        props.canvas.remove(targetObject.value);
+        props.canvas.remove(currentTarget);
         props.canvas.insertAt(img, index);
+
+        // 更新缓存的引用 - 关键修复
         targetObject.value = img;
 
         // 更新图层引用
@@ -760,14 +1266,10 @@ async function _updateCanvasObject(imageData) {
             }
           }
         }
-      } else {
-        const fabricObject = allObjects.find(
-          (fItem) => fItem.layerId === props.layerManager.getActiveLayerId()
-        );
-        targetObject.value = img;
-        props.canvas.remove(fabricObject);
-        props.canvas.add(img);
+
+        console.log("成功替换目标对象，新对象ID:", img.id);
       }
+
       props.canvas.renderAll();
       resolve(img);
     });
@@ -804,31 +1306,33 @@ function _convertFabricCoordsToImageCoords(fabricX, fabricY) {
   const imageWidth = originalImageData.value.width;
   const imageHeight = originalImageData.value.height;
 
-  // 获取对象的原始尺寸
+  // 获取对象的原始尺寸（注意：这里需要考虑对象可能被缩放过）
   const objWidth = obj.width;
   const objHeight = obj.height;
 
-  // 计算从对象坐标到图像像素坐标的缩放比例
-  const scaleX = imageWidth / objWidth;
-  const scaleY = imageHeight / objHeight;
-
-  // 转换为图像像素坐标
-  // 注意：Fabric对象坐标原点在中心，需要调整到左上角
-  // 修复：检查对象是否有翻转，如果有flipX，则需要翻转X坐标
-  let imageX = (localPoint.x + objWidth / 2) * scaleX;
-  const imageY = (localPoint.y + objHeight / 2) * scaleY;
+  // 修复关键问题：直接使用对象坐标系到图像坐标系的映射
+  // fabric对象的坐标原点在中心，需要转换到左上角原点
+  // 同时考虑对象本身可能有内在的缩放
+  let imageX = (localPoint.x + objWidth / 2) * (imageWidth / objWidth);
+  let imageY = (localPoint.y + objHeight / 2) * (imageHeight / objHeight);
 
   // 处理图像翻转的情况
   if (obj.flipX) {
     imageX = imageWidth - imageX;
   }
+  if (obj.flipY) {
+    imageY = imageHeight - imageY;
+  }
 
   console.log(
-    `坐标转换: Fabric(${fabricX}, ${fabricY}) -> 本地(${localPoint.x.toFixed(
-      2
-    )}, ${localPoint.y.toFixed(2)}) -> 图像(${imageX.toFixed(
-      2
-    )}, ${imageY.toFixed(2)}), flipX=${obj.flipX}`
+    `坐标转换详细信息:
+    Fabric坐标: (${fabricX}, ${fabricY})
+    本地坐标: (${localPoint.x.toFixed(2)}, ${localPoint.y.toFixed(2)})
+    对象尺寸: ${objWidth}x${objHeight}
+    图像尺寸: ${imageWidth}x${imageHeight}
+    对象缩放: (${obj.scaleX.toFixed(3)}, ${obj.scaleY.toFixed(3)})
+    最终图像坐标: (${imageX.toFixed(2)}, ${imageY.toFixed(2)})
+    翻转状态: flipX=${obj.flipX}, flipY=${obj.flipY}`
   );
 
   // 检查坐标是否在图像范围内
@@ -838,6 +1342,9 @@ function _convertFabricCoordsToImageCoords(fabricX, fabricY) {
     imageY < 0 ||
     imageY >= imageHeight
   ) {
+    console.warn(
+      `坐标超出图像范围: (${imageX}, ${imageY}), 图像尺寸: ${imageWidth}x${imageHeight}`
+    );
     return null;
   }
 
@@ -876,18 +1383,33 @@ function selectMode(modeId) {
   }
 }
 
+/**
+ * 重置参数到默认值
+ */
+function resetParams() {
+  size.value = 100;
+  pressure.value = 50;
+  distortion.value = 0;
+  power.value = 50;
+  console.log("重置液化参数到默认值");
+}
+
 /**
  * 重置为原始状态
  */
 function resetToOriginal() {
-  if (!props.liquifyManager || !originalImageData.value || !targetObject.value)
+  // 获取最新的目标对象
+  const currentTarget = getCurrentTargetObject();
+  if (!props.liquifyManager || !originalImageData.value || !currentTarget) {
+    console.warn("无法重置：缺少必要的组件或数据");
     return;
+  }
 
-  // 创建重置命令
+  // 创建重置命令 - 使用最新的目标对象
   const resetCommand = createLiquifyResetCommand({
     canvas: props.canvas,
     layerManager: props.layerManager,
-    targetObject: targetObject.value,
+    targetObject: currentTarget,
     targetLayerId: targetLayerId.value,
     originalImageData: originalImageData.value,
   });
@@ -895,42 +1417,19 @@ function resetToOriginal() {
   // 执行重置
   props.commandManager.execute(resetCommand);
 
-  // 重新初始化液化环境
-  props.liquifyManager.prepareForLiquify(targetObject.value);
+  // 重新初始化液化环境 - 使用最新的目标对象
+  props.liquifyManager.prepareForLiquify(currentTarget);
 
-  // 创建新的合成命令
+  // 创建新的合成命令 - 使用最新的目标对象
   compositeCommand.value = new CompositeLiquifyCommand({
     canvas: props.canvas,
-    targetObject: targetObject.value,
+    targetObject: currentTarget,
     targetLayerId: targetLayerId.value,
     originalData: originalImageData.value,
     layerManager: props.layerManager,
   });
 }
 
-/**
- * 更新参数
- */
-function updateParam(name, value) {
-  if (props.liquifyManager) {
-    props.liquifyManager.setParam(name, value);
-  }
-}
-
-/**
- * 重置参数为默认值
- */
-function resetParams() {
-  size.value = 50;
-  pressure.value = 50;
-  distortion.value = 0;
-  power.value = 50;
-
-  if (props.liquifyManager) {
-    props.liquifyManager.resetParams();
-  }
-}
-
 /**
  * 取消液化操作
  */
@@ -969,13 +1468,19 @@ async function confirm() {
  * 关闭面板
  */
 function close() {
-  debugger;
   visible.value = false;
   isEditing.value = false;
   targetObject.value = null;
   targetLayerId.value = null;
+  targetObjectId.value = null; // 清空对象ID
+  originalImageData.value = null; // 清空原始图像数据
   compositeCommand.value = null;
 
+  // 清理液化状态相关数据
+  initialImageData.value = null; // 清空初始图像数据
+  initialObjectState.value = null; // 清空初始对象状态
+  currentLiquifyCommand.value = null; // 清空当前命令
+
   // 重置性能统计
   operationCount.value = 0;
   avgOperationTime.value = 0;
@@ -984,6 +1489,33 @@ function close() {
   if (props.liquifyManager) {
     props.liquifyManager.dispose();
   }
+
+  console.log("液化面板已关闭，所有引用已清理");
+}
+
+/**
+ * 开始持续按压定时器
+ */
+function startPressTimer() {
+  if (pressTimer.value) return;
+
+  pressTimer.value = setInterval(() => {
+    // 计算按压持续时间
+    pressDuration.value = Date.now() - pressStartTime.value;
+
+    // 每隔一段时间执行一次液化操作
+    applyLiquifyAtPoint(pressX.value, pressY.value);
+  }, pressInterval.value);
+}
+
+/**
+ * 停止持续按压定时器
+ */
+function stopPressTimer() {
+  if (pressTimer.value) {
+    clearInterval(pressTimer.value);
+    pressTimer.value = null;
+  }
 }
 </script>
 
@@ -1017,9 +1549,9 @@ function close() {
 
 .currImage {
   position: fixed;
-  right: -319px;
+  right: 12px;
   bottom: 0;
-  width: 244px;
+  width: 32px;
   height: auto;
   min-height: 32px;
   object-fit: cover;
diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
index 57e3a944..a18e806c 100644
--- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
+++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, inject, computed, onMounted, onUnmounted } from "vue";
 import { OperationType } from "../utils/layerHelper";
-import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
 
 const props = defineProps({
   activeTool: String,
@@ -156,7 +155,7 @@ const redGreenToolsList = ref([
   {
     id: OperationType.RED_BRUSH,
     title: "Red Brush (R)",
-    action: () => selectTool(OperationType.RED_BRUSH),
+    action: () => selectTool(OperationType.RED_BRUSH, true),
     icon: { name: "CBrush", size: "24" },
     class: "red-brush-btn",
     style: { color: "#FF0000" },
@@ -164,7 +163,7 @@ const redGreenToolsList = ref([
   {
     id: OperationType.GREEN_BRUSH,
     title: "Green Brush (G)",
-    action: () => selectTool(OperationType.GREEN_BRUSH),
+    action: () => selectTool(OperationType.GREEN_BRUSH, true),
     icon: { name: "CBrush", size: "24" },
     class: "green-brush-btn",
     style: { color: "#00AA00" },
@@ -172,7 +171,7 @@ const redGreenToolsList = ref([
   {
     id: OperationType.ERASER,
     title: "Eraser (E)",
-    action: () => selectTool(OperationType.ERASER),
+    action: () => selectTool(OperationType.ERASER, true),
     icon: { name: "CEraser", size: "22" },
     class: "eraser-btn",
   },
@@ -197,8 +196,8 @@ const toolsList = computed(() => {
   return props.isRedGreenMode ? redGreenToolsList.value : normalToolsList.value;
 });
 
-function selectTool(tool) {
-  emit("tool-selected", tool);
+function selectTool(tool, isRedGreenMode = false) {
+  emit("tool-selected", tool, isRedGreenMode);
 }
 
 function triggerImageUpload() {
@@ -261,15 +260,15 @@ function handleKeyDown(event) {
 
     switch (key) {
       case "R":
-        selectTool(OperationType.RED_BRUSH);
+        selectTool(OperationType.RED_BRUSH, true);
         event.preventDefault();
         break;
       case "G":
-        selectTool(OperationType.GREEN_BRUSH);
+        selectTool(OperationType.GREEN_BRUSH, true);
         event.preventDefault();
         break;
       case "E":
-        selectTool(OperationType.ERASER);
+        selectTool(OperationType.ERASER, true);
         event.preventDefault();
         break;
     }
@@ -323,6 +322,8 @@ onUnmounted(() => {
   border-right: 1px solid #e0e0e0;
   background-color: #ffffff;
   user-select: none;
+  min-width: 58px;
+  height: 100%;
 }
 
 .tool-btn {
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 0189acab..fd406226 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -6,6 +6,7 @@ import {
   defineAsyncComponent,
   shallowRef,
   provide,
+  defineExpose,
 } from "vue";
 import { CanvasManager } from "./managers/CanvasManager";
 import { LayerManager } from "./managers/LayerManager";
@@ -21,14 +22,14 @@ import { RedGreenModeManager } from "./managers/RedGreenModeManager";
 // 导入封装的组件
 import ToolsSidebar from "./components/ToolsSidebar.vue";
 import HeaderMenu from "./components/HeaderMenu.vue";
-import LayersPanel from "./components/LayersPanel.vue";
+import LayersPanel from "./components/LayersPanel/LayersPanel.vue";
 import BrushControlPanel from "./components/BrushControlPanel.vue";
 import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本编辑面板
 import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板
 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
 import { OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/ToolManager.js";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { uploadImageAndCreateLayer } from "./utils/imageHelper.js";
 // import MinimapPanel from "./components/MinimapPanel.vue";
 const KeyboardShortcutHelp = defineAsyncComponent(() =>
@@ -70,13 +71,17 @@ const currentZoom = ref(100);
 const canvasWidth = ref(CanvasConfig.width);
 const canvasHeight = ref(CanvasConfig.height);
 const canvasColor = ref(CanvasConfig.backgroundColor);
-const layerWidth = ref(CanvasConfig.layerWidth); // 假设侧边栏宽度为 250px
+const layerWidth = ref(CanvasConfig.layerWidth);
 const brushSize = ref(CanvasConfig.brushSize); // 画笔大小
 const canvasManagerLoaded = ref(false); //  画布是否加载完成
 
 // 红绿图模式状态
 const isRedGreenMode = ref(false);
 
+const isShowLayerPanel = ref(true); // 是否显示图层面板
+
+provide("isShowLayerPanel", isShowLayerPanel); // 提供红绿图模式状态给子组件
+
 // 小地图设置
 // const minimapEnabled = ref(true);
 // const minimapManager = ref(null);
@@ -110,7 +115,9 @@ function toggleShortcutHelp() {
 function handleToolSelect(tool) {
   activeTool.value = tool;
   // toolManager.setActiveTool(tool); // 更新工具管理器中的当前工具  普通模式，不可撤回操作
-  toolManager.setToolWithCommand(tool); // 命令模式 可撤回操作
+  toolManager.setToolWithCommand(tool, {
+    undoable: props.enabledRedGreenMode ? false : true, // 普通模式下工具选择不可撤销
+  }); // 命令模式 可撤回操作
 }
 
 function toggleMinimap(enabled) {
@@ -127,9 +134,10 @@ onMounted(async () => {
     canvasHeight.value = canvasContainerRef.value.clientWidth;
     canvasWidth.value = canvasContainerRef.value.clientHeight;
   }
+
   // 创建管理器实例
   canvasManager = new CanvasManager(canvasRef.value, {
-    width: canvasContainerRef.value.clientWidth - layerWidth.value, // 初始化的时候需要减去侧边栏宽度
+    width: canvasContainerRef.value.clientWidth,
     height: canvasContainerRef.value.clientHeight,
     // backgroundColor: canvasColor.value,
     currentZoom,
@@ -139,7 +147,6 @@ onMounted(async () => {
     canvasColor,
     enabledRedGreenMode: props.enabledRedGreenMode,
   });
-  console.log(canvasManager,canvasManager.thumbnailManager)
   canvasManager.canvas.activeLayerId = activeLayerId;
   canvasManager.canvas.activeElementId = activeElementId;
 
@@ -155,6 +162,7 @@ onMounted(async () => {
     canvasWidth: canvasWidth.value,
     canvasHeight: canvasHeight.value,
     backgroundColor: canvasColor.value,
+    isRedGreenMode: props.enabledRedGreenMode,
     layers,
     activeLayerId,
     canvasManager, // 添加对 canvasManager 的引用
@@ -202,6 +210,7 @@ onMounted(async () => {
   layerManager.setToolManager(toolManager); // 将工具管理器传递给图层管理器
   canvasManager.setToolManager(toolManager); // 将工具管理器传递给画布管理器
   canvasManager.setLayerManager(layerManager);
+  canvasManager.setCommandManager(commandManager); // 将命令管理器传递给画布管理器
 
   // 初始化快捷键管理器
   keyboardManager = new KeyboardManager({
@@ -369,13 +378,18 @@ function updateCanvasSize() {
     const containerWidth = canvasContainerRef.value.clientWidth;
     const containerHeight = canvasContainerRef.value.clientHeight;
 
-    // 如果启用了红绿图模式，使用 layerManager 的缩放方法
-    if (props.enabledRedGreenMode && layerManager) {
-      layerManager.resizeCanvasWithScale(containerWidth, containerHeight);
-    } else {
-      // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
-      canvasManager.setCanvasSize(containerWidth, containerHeight);
-    }
+    // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
+    canvasManager.setCanvasSize(containerWidth, containerHeight);
+
+    // // 如果启用了红绿图模式，使用 layerManager 的缩放方法
+    // if (props.enabledRedGreenMode && layerManager) {
+    //   layerManager.resizeCanvasWithScale(containerWidth, containerHeight, {
+    //     undoable: false, // 可撤销操作
+    //   });
+    // } else {
+    //   // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
+    //   canvasManager.setCanvasSize(containerWidth, containerHeight);
+    // }
   }
 }
 
@@ -388,15 +402,17 @@ function addLayer() {
 }
 
 function setActiveLayer(layerId) {
-  if (activeElementId.value && canvasManager && canvasManager.canvas) {
+  if (layerId !== activeLayerId.value) {
+    layerManager.setActiveLayer(layerId, {
+      undoable: true, // 可撤销
+    });
+
     const activeObject = canvasManager.canvas.getActiveObject();
     if (activeObject) {
       canvasManager.canvas.discardActiveObject();
       canvasManager.canvas.renderAll();
     }
-    activeElementId.value = null;
   }
-  layerManager.setActiveLayer(layerId);
 }
 
 function toggleLayerVisibility(layerId) {
@@ -570,9 +586,9 @@ defineExpose({
   getCanvasManager: () => canvasManager, // 获取画布管理器实例
   canvasManagerLoaded,
   // 加载新数据到画布
-  loadJSON: (json) => {
+  loadJSON: (json, calllBack) => {
     try {
-      if (json) canvasManager?.loadJSON?.(json);
+      if (json) canvasManager?.loadJSON?.(json, calllBack);
       return true;
     } catch (error) {
       console.error("加载画布JSON失败:", error);
@@ -611,42 +627,133 @@ defineExpose({
       expPicType,
     });
   },
+  /**
+   * 移动图层位置
+   * @param {string} layerId 图层ID
+   * @param {string} direction 移动方向，'up'或'down'
+   * @returns {boolean} 是否移动成功
+   */
+  moveLayer(layerId, direction) {
+    if (!layerManager) return false;
+    const result = layerManager.moveLayer(layerId, direction);
+
+    // 使用高级排序重建画布顺序
+    if (result) {
+      layerManager.forceRebuildCanvasOrder();
+    }
+
+    return result;
+  },
+
+  /**
+   * 拖拽排序图层
+   * @param {number} oldIndex 原索引
+   * @param {number} newIndex 新索引
+   * @param {string} layerId 图层ID
+   * @returns {boolean} 是否排序成功
+   */
+  reorderLayers(oldIndex, newIndex, layerId) {
+    if (!layerManager) return false;
+
+    // 优先使用高级排序功能
+    if (layerManager.layerSort) {
+      return layerManager.advancedReorderLayers(oldIndex, newIndex, layerId);
+    } else {
+      // 降级到基础排序
+      return layerManager.reorderLayers(oldIndex, newIndex, layerId);
+    }
+  },
+
+  /**
+   * 智能排序图层
+   * 根据对象类型和位置自动调整图层顺序
+   * @param {Array<string>} targetLayerIds 要排序的图层ID数组，null表示排序所有普通图层
+   * @returns {boolean} 是否排序成功
+   */
+  smartSortLayers(targetLayerIds = null) {
+    if (!layerManager) return false;
+    return layerManager.smartSortLayers(targetLayerIds);
+  },
+
+  /**
+   * 优化图层结构
+   * 清理空图层、重新排序等
+   * @returns {Object} 优化结果统计
+   */
+  optimizeLayerStructure() {
+    if (!layerManager)
+      return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 };
+    return layerManager.optimizeLayerStructure();
+  },
+
+  /**
+   * 强制重建画布对象顺序
+   * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
+   */
+  forceRebuildCanvasOrder() {
+    if (!layerManager) return;
+    layerManager.forceRebuildCanvasOrder();
+  },
+
+  /**
+   * 验证画布对象顺序是否正确
+   * @returns {boolean} 顺序是否正确
+   */
+  validateObjectOrder() {
+    if (!layerManager) return true;
+    return layerManager.validateObjectOrder();
+  },
+
+  /**
+   * 批量重新排序多个图层
+   * @param {Array} reorderOperations 排序操作数组 [{layerId, oldIndex, newIndex}]
+   * @returns {boolean} 是否全部操作成功
+   */
+  batchReorderLayers(reorderOperations) {
+    if (!layerManager) return false;
+    return layerManager.batchReorderLayers(reorderOperations);
+  },
 });
 </script>
 
 <template>
   <div class="app-container">
     <!-- 头部菜单组件 -->
-    <HeaderMenu
-      v-if="canvasManagerLoaded"
-      :activeTool="activeTool"
-      :canvasWidth="canvasWidth"
-      :canvasHeight="canvasHeight"
-      :canvasColor="canvasColor"
-      :brushSize="brushSize"
-      @update:canvasWidth="canvasWidth = $event"
-      @update:canvasHeight="canvasHeight = $event"
-      @update:canvasColor="canvasColor = $event"
-      @update:brushSize="brushSize = $event"
-      @canvas-size-change="updateCanvasSize"
-      @canvas-color-change="updateCanvasColor"
-    />
+    <div class="header-menu">
+      <HeaderMenu
+        v-if="canvasManagerLoaded"
+        :activeTool="activeTool"
+        :canvasWidth="canvasWidth"
+        :canvasHeight="canvasHeight"
+        :canvasColor="canvasColor"
+        :brushSize="brushSize"
+        :enabledRedGreenMode="enabledRedGreenMode"
+        @update:canvasWidth="canvasWidth = $event"
+        @update:canvasHeight="canvasHeight = $event"
+        @update:canvasColor="canvasColor = $event"
+        @update:brushSize="brushSize = $event"
+        @canvas-size-change="updateCanvasSize"
+        @canvas-color-change="updateCanvasColor"
+      />
+    </div>
 
     <div class="main-content">
       <!-- :minimapEnabled="minimapEnabled" -->
       <!-- 工具栏组件 -->
-      <ToolsSidebar
-        v-if="canvasManagerLoaded"
-        :activeTool="activeTool"
-        :isRedGreenMode="isRedGreenMode"
-        @tool-selected="handleToolSelect"
-        @red-green-tool-selected="handleRedGreenToolSelect"
-        @toggle-red-green-mode="toggleRedGreenMode"
-        @trigger-image-upload="triggerImageUpload"
-        @add-text="handleAddText"
-        @zoom-in="zoomIn"
-        @zoom-out="zoomOut"
-      />
+      <div style="min-width: 58px">
+        <ToolsSidebar
+          v-if="canvasManagerLoaded"
+          :activeTool="activeTool"
+          :isRedGreenMode="isRedGreenMode"
+          @tool-selected="handleToolSelect"
+          @red-green-tool-selected="handleRedGreenToolSelect"
+          @toggle-red-green-mode="toggleRedGreenMode"
+          @trigger-image-upload="triggerImageUpload"
+          @add-text="handleAddText"
+          @zoom-in="zoomIn"
+          @zoom-out="zoomOut"
+        />
+      </div>
 
       <div
         class="canvas-container"
@@ -665,14 +772,14 @@ defineExpose({
 
         <!-- 文本编辑面板 -->
         <TextEditorPanel
-          v-if="canvasManagerLoaded"
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
           :canvas="canvasManager?.canvas"
           :commandManager="commandManager"
         />
 
         <!-- 液化编辑面板 -->
         <LiquifyPanel
-          v-if="canvasManagerLoaded"
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
           :canvas="canvasManager?.canvas"
           :commandManager="commandManager"
           :liquifyManager="liquifyManager"
@@ -682,7 +789,7 @@ defineExpose({
 
         <!-- 选区面板 -->
         <SelectionPanel
-          v-if="canvasManagerLoaded"
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
           :canvas="canvasManager?.canvas"
           :commandManager="commandManager"
           :selectionManager="selectionManager"
@@ -705,22 +812,29 @@ defineExpose({
       </div>
 
       <!-- 图层面板组件 -->
-      <LayersPanel
-        class="layers-panel"
-        :style="{ width: layerWidth + 'px' }"
-        v-if="canvasManagerLoaded && !enabledRedGreenMode"
-        :activeLayerId="activeLayerId"
-        :activeElementId="activeElementId"
-        :thumbnailManager="canvasManager?.thumbnailManager"
-        @add-layer="addLayer"
-        @set-active-layer="setActiveLayer"
-        @toggle-layer-visibility="toggleLayerVisibility"
-        @move-layer-up="moveLayerUp"
-        @move-layer-down="moveLayerDown"
-        @remove-layer="removeLayer"
-        @layers-reorder="handleLayersReorder"
-        @child-layers-reorder="handleChildLayersReorder"
-      />
+      <!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->
+
+      <transition name="fade">
+        <div
+          class="layers-panel"
+          v-if="isShowLayerPanel && !enabledRedGreenMode"
+        >
+          <LayersPanel
+            v-if="canvasManagerLoaded"
+            :activeLayerId="activeLayerId"
+            :activeElementId="activeElementId"
+            :thumbnailManager="canvasManager.thumbnailManager"
+            @add-layer="addLayer"
+            @set-active-layer="setActiveLayer"
+            @toggle-layer-visibility="toggleLayerVisibility"
+            @move-layer-up="moveLayerUp"
+            @move-layer-down="moveLayerDown"
+            @remove-layer="removeLayer"
+            @layers-reorder="handleLayersReorder"
+            @child-layers-reorder="handleChildLayersReorder"
+          />
+        </div>
+      </transition>
     </div>
 
     <div class="footer-actions">
@@ -769,6 +883,15 @@ defineExpose({
   top: 0;
   bottom: 0;
   z-index: 77;
+  & > .header-menu {
+    height: 52px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #ffffff;
+  }
 }
 
 .main-content {
@@ -972,10 +1095,33 @@ button:hover {
 }
 
 .layers-panel {
+  position: absolute;
+  right: 20px;
+  top: 10px;
   transition: width 0.3s ease;
   background: #fff;
-  width: 250px;
-  flex: none;
+  width: 350px;
+  max-height: 85vh;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  backdrop-filter: blur(2px); /* 添加模糊效果 */
+  -webkit-backdrop-filter: blur(2px);
+  background-color: rgba(255, 255, 255, 0.95); /* 改为白色背景 */
+  z-index: 1000; /* 确保面板在最上层 */
+  border: 1px solid #e0e0e0;
+  /* 添加指向整个面板的倒三角 */
+  &::before {
+    content: "";
+    position: absolute;
+    top: -9px;
+    right: 6px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid rgba(255, 255, 255, 0.95); /* 与面板背景色一致 */
+    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
+    z-index: 1;
+  }
 }
 /* 添加触控设备的样式调整 */
 @media (pointer: coarse) {
@@ -1016,4 +1162,15 @@ button:hover {
     font-size: 24px;
   }
 }
+
+// 淡入淡出动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
 </style>
diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
index 3e8237a7..2dfc655f 100644
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import initAligningGuidelines, {
   initCenteringGuidelines,
 } from "../utils/helperLine";
@@ -14,10 +14,15 @@ import { createCanvas } from "../utils/canvasFactory";
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import CanvasConfig from "../config/canvasConfig";
 import { RedGreenModeManager } from "./RedGreenModeManager";
+import { EraserStateManager } from "./EraserStateManager";
+import { deepClone, optimizeCanvasRendering } from "../utils/helper";
+import { ChangeFixedImageCommand } from "../commands/ObjectLayerCommands";
+import { isFunction } from "lodash-es";
 import {
-  ChangeFixedImageCommand,
-  AddImageToLayerCommand,
-} from "../commands/ObjectLayerCommands";
+  restoreObjectLayerAssociations,
+  simplifyLayers,
+  validateLayerAssociations,
+} from "../utils/layerUtils";
 
 export class CanvasManager {
   constructor(canvasElement, options) {
@@ -34,6 +39,7 @@ export class CanvasManager {
     this.canvasHeight = options.canvasHeight || this.height; // 画布高度
     this.canvasColor = options.canvasColor || "#ffffff"; // 画布背景颜色
     this.enabledRedGreenMode = options.enabledRedGreenMode || false; // 是否启用红绿图模式
+    this.eraserStateManager = null; // 橡皮擦状态管理器引用
     // 初始化画布
     this.initializeCanvas();
   }
@@ -65,14 +71,6 @@ export class CanvasManager {
       layers: this.layers,
     });
 
-    // 初始化红绿图模式管理器
-    this.redGreenModeManager = new RedGreenModeManager({
-      canvas: this.canvas,
-      layerManager: null, // 稍后设置
-      toolManager: null, // 稍后设置
-      commandManager: null, // 稍后设置
-    });
-
     // 设置画布辅助线
     initAligningGuidelines(this.canvas);
 
@@ -90,7 +88,7 @@ export class CanvasManager {
    */
   _initCanvasEvents() {
     // 添加笔刷图像转换处理回调
-    this.canvas.onBrushImageConverted = (fabricImage) => {
+    this.canvas.onBrushImageConverted = async (fabricImage) => {
       // 如果图层管理器存在，将图像合并到当前活动图层
       if (this.layerManager) {
         // 获取当前活动图层
@@ -107,21 +105,49 @@ export class CanvasManager {
           });
 
           // 执行高保真合并操作
-          this.eventManager?.mergeLayerObjectsForPerformance?.({
+          await this.eventManager?.mergeLayerObjectsForPerformance?.({
             fabricImage,
             activeLayer,
           });
 
-          // 返回false表示不要自动添加到画布，因为我们已经通过图层管理器处理了
-          return false;
+          // 返回true表示不要自动添加到画布，因为我们已经通过图层管理器处理了
+          return true;
         } else {
           console.warn("没有活动图层，使用默认行为添加图像");
         }
       }
 
-      // 返回true表示使用默认行为（直接添加到画布）
-      return true;
+      // 返回false表示使用默认行为（直接添加到画布）
+      return false;
     };
+
+    this.eraserStateManager = new EraserStateManager(
+      this.canvas,
+      this.layerManager
+    );
+
+    // 监听擦除开始事件
+    this.canvas.on("erasing:start", () => {
+      console.log("开始擦除");
+      this.eraserStateManager.startErasing();
+    });
+
+    // 监听擦除结束事件
+    this.canvas.on("erasing:end", async (e) => {
+      console.log("擦除完成", e.targets);
+      // 可以在这里保存状态到命令管理器
+      const affectedObjects = e.targets || [];
+      const command = this.eraserStateManager.endErasing(affectedObjects);
+      if (command && this.commandManager) {
+        await this.commandManager?.executeCommand?.(command);
+      } else {
+        await command?.execute?.(); // 如果没有命令管理器，直接执行命令
+      }
+
+      // 更新交互性
+      command &&
+        (await this.layerManager?.updateLayersObjectsInteractivity?.());
+    });
   }
 
   /**
@@ -168,6 +194,10 @@ export class CanvasManager {
     if (this.redGreenModeManager) {
       this.redGreenModeManager.layerManager = this.layerManager;
     }
+
+    if (this.eraserStateManager) {
+      this.eraserStateManager.setLayerManager(this.layerManager);
+    }
   }
 
   /**
@@ -320,7 +350,8 @@ export class CanvasManager {
 
   /**
    * 居中所有画布元素
-   * 计算所有对象的边界框，然后将它们整体居中显示
+   * 以背景层为参照，计算背景层的偏移量并应用到所有对象上
+   * 这样可以保持对象间的相对位置关系不变
    */
   centerAllObjects() {
     if (!this.canvas) return;
@@ -333,45 +364,56 @@ export class CanvasManager {
       (obj) => obj.visible !== false && !obj.excludeFromExport
     );
 
-    // 如果只有背景层或没有可见对象，只居中背景层
-    if (
-      visibleObjects.length === 0 ||
-      (visibleObjects.length === 1 && visibleObjects[0].isBackground)
-    ) {
-      // 尝试居中背景层
-      this.centerBackgroundLayer(this.width, this.height);
-      return;
-    }
+    // 如果没有可见对象，直接返回
+    if (visibleObjects.length === 0) return;
 
-    // 单独处理背景层
+    // 获取背景对象
     const backgroundObject = visibleObjects.find((obj) => obj.isBackground);
-    const contentObjects = backgroundObject
-      ? visibleObjects.filter((obj) => obj !== backgroundObject)
-      : visibleObjects;
 
-    // 如果只有背景层，居中背景层
-    if (contentObjects.length === 0 && backgroundObject) {
-      this.centerBackgroundLayer(this.width, this.height);
+    // 如果只有背景层或没有背景层，使用原有逻辑
+    if (!backgroundObject) {
+      console.warn("未找到背景层，使用默认居中逻辑");
+      // 如果只有一个对象且可能是背景，直接居中
+      if (visibleObjects.length === 1) {
+        const obj = visibleObjects[0];
+        obj.set({
+          left: this.width / 2,
+          top: this.height / 2,
+          originX: "center",
+          originY: "center",
+        });
+        obj.setCoords();
+        this.canvas.renderAll();
+      }
       return;
     }
 
-    // 计算内容对象的边界
-    const bounds = this._calculateObjectsBounds(contentObjects);
-
-    // 计算所有对象的中心点
-    const objectsCenterX = bounds.left + bounds.width / 2;
-    const objectsCenterY = bounds.top + bounds.height / 2;
+    // 记录背景层居中前的位置
+    const backgroundOldLeft = backgroundObject.left;
+    const backgroundOldTop = backgroundObject.top;
 
     // 计算画布中心点
     const canvasCenterX = this.width / 2;
     const canvasCenterY = this.height / 2;
 
-    // 计算需要移动的距离
-    const deltaX = canvasCenterX - objectsCenterX;
-    const deltaY = canvasCenterY - objectsCenterY;
+    // 设置背景层居中
+    backgroundObject.set({
+      left: canvasCenterX,
+      top: canvasCenterY,
+      originX: "center",
+      originY: "center",
+    });
 
-    // 移动所有对象，包括背景层
-    visibleObjects.forEach((obj) => {
+    // 计算背景层的偏移量
+    const deltaX = backgroundObject.left - backgroundOldLeft;
+    const deltaY = backgroundObject.top - backgroundOldTop;
+
+    // 将相同的偏移量应用到所有其他对象上
+    const otherObjects = visibleObjects.filter(
+      (obj) => obj !== backgroundObject
+    );
+
+    otherObjects.forEach((obj) => {
       obj.set({
         left: obj.left + deltaX,
         top: obj.top + deltaY,
@@ -456,6 +498,7 @@ export class CanvasManager {
     // 如果需要裁剪背景层以外的内容，则更新蒙层位置
     // 创建或更新蒙层
     CanvasConfig.isCropBackground &&
+      !this.enabledRedGreenMode &&
       this.createOrUpdateMask(backgroundLayerObject);
     return true;
   }
@@ -480,12 +523,13 @@ export class CanvasManager {
 
     // 创建蒙层 - 使用透明矩形作为裁剪区域
     this.maskLayer = new fabric.Rect({
+      id: "canvasMaskLayer",
       width: bgWidth,
       height: bgHeight,
       left: left,
       top: top,
       fill: "transparent",
-      stroke: "#cccccc",
+      stroke: "transparent",
       strokeWidth: 1,
       strokeDashArray: [5, 5],
       selectable: false,
@@ -504,20 +548,12 @@ export class CanvasManager {
     this.canvas.clipPath = new fabric.Rect({
       width: bgWidth,
       height: bgHeight,
-      left: 0,
-      top: 0,
+      left: left,
+      top: top,
       originX: backgroundLayerObject.originX || "left",
       originY: backgroundLayerObject.originY || "top",
       absolutePositioned: true,
     });
-
-    // 设置蒙层位置
-    this.canvas.clipPath.set({
-      left: left,
-      top: top,
-    });
-
-    this.canvas.renderAll();
   }
   getBackgroundLayer() {
     if (!this.canvas) return null;
@@ -655,6 +691,39 @@ export class CanvasManager {
     });
   }
 
+  /**
+   *
+   * 更改固定图层的图片
+   * @param {String} imageUrl 新的图片URL
+   * @param {Object} options 选项
+   * @param {String} options.targetLayerType 目标图层类型（background/fixed）
+   * @param {Boolean} options.undoable 是否可撤销，默认不可撤销
+   * @return {Object} 执行结果
+   * */
+  async changeFixedImage(imageUrl, options = {}) {
+    if (!this.layerManager) {
+      console.error("图层管理器未设置，无法更改固定图层图片");
+      return;
+    }
+    const command = new ChangeFixedImageCommand({
+      canvas: this.canvas,
+      layerManager: this.layerManager,
+      imageUrl: imageUrl,
+      targetLayerType: options.targetLayerType || "fixed", // background/fixed
+    });
+
+    command.undoable =
+      options.undoable !== undefined ? options.undoable : false; // 默认不可撤销   undoable = true 为可撤销
+
+    return (
+      (await command?.execute?.()) || {
+        success: false,
+        layerId: null,
+        imageUrl: null,
+      }
+    );
+  }
+
   /**
    * 导出图片
    * @param {Object} options 导出选项
@@ -663,6 +732,7 @@ export class CanvasManager {
    * @param {String} options.layerId 导出具体图层ID
    * @param {Array} options.layerIdArray 导出多个图层ID数组
    * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
+   * @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
    * @returns {String} 导出的图片数据URL
    */
   exportImage(options = {}) {
@@ -672,7 +742,39 @@ export class CanvasManager {
     }
 
     try {
-      return this.exportManager.exportImage(options);
+      // 自动设置红绿图模式相关参数
+      const enhancedOptions = {
+        ...options,
+        // 如果没有明确指定，则根据当前模式自动设置
+        restoreOpacityInRedGreen:
+          options.restoreOpacityInRedGreen !== undefined
+            ? options.restoreOpacityInRedGreen
+            : true, // 默认在红绿图模式下恢复透明度
+      };
+
+      // 如果在红绿图模式下且没有指定具体的图层，自动包含所有普通图层
+      if (
+        this.enabledRedGreenMode &&
+        !options.layerId &&
+        (!options.layerIdArray || options.layerIdArray.length === 0)
+      ) {
+        console.log("检测到红绿图模式，自动包含所有普通图层进行导出");
+
+        // 获取所有非背景、非固定的普通图层ID
+        const normalLayerIds =
+          this.layers?.value
+            ?.filter(
+              (layer) => !layer.isBackground && !layer.isFixed && layer.visible
+            )
+            ?.map((layer) => layer.id) || [];
+
+        if (normalLayerIds.length > 0) {
+          enhancedOptions.layerIdArray = normalLayerIds;
+          console.log("红绿图模式导出图层:", normalLayerIds);
+        }
+      }
+
+      return this.exportManager.exportImage(enhancedOptions);
     } catch (error) {
       console.error("CanvasManager导出图片失败:", error);
       throw error;
@@ -709,129 +811,129 @@ export class CanvasManager {
   }
 
   getJSON() {
-    // 简化图层数据，在loadJSON时要根据id恢复引用
-    let tempLayers = this.layers ? this.layers.value : [];
+    // // 简化图层数据，在loadJSON时要根据id恢复引用
+    // let tempLayers = this.layers ? this.layers.value : [];
+    // // 创建对象ID映射表，用于快速查找
+    // tempLayers = tempLayers.map((layer) => {
+    //   const newLayer = { ...layer };
 
-    // 为所有fabric对象生成ID（如果没有的话）
-    const canvasObjects = this.canvas.getObjects();
-    canvasObjects.forEach((obj) => {
-      if (!obj.id) {
-        obj.id = `obj_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
-      }
-    });
+    //   // 处理fabricObjects数组
+    //   if (Array.isArray(layer.fabricObjects)) {
+    //     newLayer.fabricObjects = layer.fabricObjects
+    //       .map((item) => {
+    //         if (!item) return null;
 
-    // 创建对象ID映射表，用于快速查找
-    const objectIdMap = new Map();
-    canvasObjects.forEach((obj) => {
-      if (obj.id) {
-        objectIdMap.set(obj, obj.id);
-      }
-    });
+    //         // 确保对象有ID
+    //         if (!item.id) {
+    //           item.id = `obj_${Date.now()}_${Math.floor(
+    //             Math.random() * 10000
+    //           )}`;
+    //         }
 
-    tempLayers = tempLayers.map((layer) => {
-      const newLayer = { ...layer };
+    //         return {
+    //           id: item.id,
+    //           type: item.type || "object", // 保存类型信息用于调试
+    //         };
+    //       })
+    //       .filter((item) => item !== null);
+    //   } else {
+    //     newLayer.fabricObjects = [];
+    //   }
 
-      // 处理fabricObjects数组
-      if (Array.isArray(layer.fabricObjects)) {
-        newLayer.fabricObjects = layer.fabricObjects
-          .map((item) => {
-            if (!item) return null;
+    //   if (layer.clippingMask) {
+    //     layer.clippingMask = {
+    //       id: layer.clippingMask.id,
+    //     };
+    //   }
 
-            // 确保对象有ID
-            if (!item.id) {
-              item.id = `obj_${Date.now()}_${Math.floor(
-                Math.random() * 10000
-              )}`;
-            }
+    //   // 处理单个fabricObject
+    //   if (layer.fabricObject) {
+    //     if (!layer.fabricObject.id) {
+    //       layer.fabricObject.id = `obj_${Date.now()}_${Math.floor(
+    //         Math.random() * 10000
+    //       )}`;
+    //     }
+    //     newLayer.fabricObject = {
+    //       id: layer.fabricObject.id,
+    //       type: layer.fabricObject.type || "object",
+    //     };
+    //   } else {
+    //     newLayer.fabricObject = null;
+    //   }
 
-            return {
-              id: item.id,
-              type: item.type || "object", // 保存类型信息用于调试
-            };
-          })
-          .filter((item) => item !== null);
-      } else {
-        newLayer.fabricObjects = [];
-      }
+    //   // 处理子图层
+    //   if (Array.isArray(layer.children)) {
+    //     newLayer.children = layer.children.map((cItem) => {
+    //       const newChild = { ...cItem };
 
-      // 处理单个fabricObject
-      if (layer.fabricObject) {
-        if (!layer.fabricObject.id) {
-          layer.fabricObject.id = `obj_${Date.now()}_${Math.floor(
-            Math.random() * 10000
-          )}`;
-        }
-        newLayer.fabricObject = {
-          id: layer.fabricObject.id,
-          type: layer.fabricObject.type || "object",
-        };
-      } else {
-        newLayer.fabricObject = null;
-      }
+    //       // 处理子图层的fabricObjects
+    //       if (Array.isArray(cItem.fabricObjects)) {
+    //         newChild.fabricObjects = cItem.fabricObjects
+    //           .map((item) => {
+    //             if (!item) return null;
 
-      // 处理子图层
-      if (Array.isArray(layer.children)) {
-        newLayer.children = layer.children.map((cItem) => {
-          const newChild = { ...cItem };
+    //             if (!item.id) {
+    //               item.id = `obj_${Date.now()}_${Math.floor(
+    //                 Math.random() * 10000
+    //               )}`;
+    //             }
 
-          // 处理子图层的fabricObjects
-          if (Array.isArray(cItem.fabricObjects)) {
-            newChild.fabricObjects = cItem.fabricObjects
-              .map((item) => {
-                if (!item) return null;
+    //             return {
+    //               id: item.id,
+    //               type: item.type || "object",
+    //             };
+    //           })
+    //           .filter((item) => item !== null);
+    //       } else {
+    //         newChild.fabricObjects = [];
+    //       }
 
-                if (!item.id) {
-                  item.id = `obj_${Date.now()}_${Math.floor(
-                    Math.random() * 10000
-                  )}`;
-                }
+    //       // 处理子图层的fabricObject
+    //       if (cItem.fabricObject) {
+    //         if (!cItem.fabricObject.id) {
+    //           cItem.fabricObject.id = `obj_${Date.now()}_${Math.floor(
+    //             Math.random() * 10000
+    //           )}`;
+    //         }
+    //         newChild.fabricObject = {
+    //           id: cItem.fabricObject.id,
+    //           type: cItem.fabricObject.type || "object",
+    //         };
+    //       } else {
+    //         newChild.fabricObject = null;
+    //       }
 
-                return {
-                  id: item.id,
-                  type: item.type || "object",
-                };
-              })
-              .filter((item) => item !== null);
-          } else {
-            newChild.fabricObjects = [];
-          }
-
-          // 处理子图层的fabricObject
-          if (cItem.fabricObject) {
-            if (!cItem.fabricObject.id) {
-              cItem.fabricObject.id = `obj_${Date.now()}_${Math.floor(
-                Math.random() * 10000
-              )}`;
-            }
-            newChild.fabricObject = {
-              id: cItem.fabricObject.id,
-              type: cItem.fabricObject.type || "object",
-            };
-          } else {
-            newChild.fabricObject = null;
-          }
-
-          return newChild;
-        });
-      } else {
-        newLayer.children = [];
-      }
-
-      return newLayer;
-    });
+    //       return newChild;
+    //     });
+    //   } else {
+    //     newLayer.children = [];
+    //   }
 
+    //   return newLayer;
+    // });
     try {
+      console.log(
+        "获取画布JSON数据...",
+        simplifyLayers(JSON.parse(JSON.stringify(this.layers.value)))
+      );
       return JSON.stringify({
         canvas: this.canvas.toJSON([
           "id",
+          "type",
           "layerId",
           "layerName",
           "isBackground",
+          "isLocked",
+          "isVisible",
           "isFixed",
           "parentId",
-          "excludeFromExport",
+          "eraser",
+          "eraserable",
+          "erasable",
         ]),
-        layers: tempLayers,
+        layers: JSON.stringify(
+          simplifyLayers(JSON.parse(JSON.stringify(this.layers.value)))
+        ), // 简化图层数据
         version: "1.0", // 添加版本信息
         timestamp: new Date().toISOString(), // 添加时间戳
         canvasWidth: this.canvasWidth.value,
@@ -845,7 +947,7 @@ export class CanvasManager {
     }
   }
 
-  loadJSON(json) {
+  loadJSON(json, calllBack) {
     console.log("加载画布JSON数据:", json);
 
     // 确保传入的json是字符串格式
@@ -859,7 +961,7 @@ export class CanvasManager {
       const parsedJson = JSON.parse(json);
 
       return new Promise((resolve, reject) => {
-        const tempLayers = parsedJson?.layers || [];
+        const tempLayers = JSON.parse(parsedJson?.layers) || [];
         const canvasData = parsedJson?.canvas;
 
         if (!tempLayers) {
@@ -872,9 +974,11 @@ export class CanvasManager {
           return;
         }
 
-        this.canvasWidth.value = parsedJson.canvasWidth || this.width;
-        this.canvasHeight.value = parsedJson.canvasHeight || this.height;
-        this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
+        this.layers.value = tempLayers;
+
+        // this.canvasWidth.value = parsedJson.canvasWidth || this.width;
+        // this.canvasHeight.value = parsedJson.canvasHeight || this.height;
+        // this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
 
         console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode);
 
@@ -885,107 +989,57 @@ export class CanvasManager {
         this.canvas.clear();
 
         // 加载画布数据
-        this.canvas.loadFromJSON(canvasData, () => {
-          this.backgroundColor = parsedJson.backgroundColor || "#ffffff";
-          try {
-            // 重置画布数据
-            this.setCanvasSize(this.canvas.width, this.canvas.height);
+        this.canvas.loadFromJSON(canvasData, async () => {
+          await optimizeCanvasRendering(this.canvas, async () => {
+            this.backgroundColor = parsedJson.backgroundColor || "#ffffff";
+            try {
+              // 重置画布数据
+              this.setCanvasSize(this.canvas.width, this.canvas.height);
 
-            // 创建对象ID映射表，用于快速查找
-            const objectIdMap = new Map();
-            const canvasObjects = this.canvas.getObjects();
+              // 重新构建对象关系
+              restoreObjectLayerAssociations(
+                this.layers.value,
+                this.canvas.getObjects()
+              );
 
-            canvasObjects.forEach((obj) => {
-              if (obj.id) {
-                objectIdMap.set(obj.id, obj);
-              }
-            });
+              // 验证图层关联关系  -  稳定后可以注释
+              const isValidate = validateLayerAssociations(
+                this.layers.value,
+                this.canvas.getObjects()
+              );
 
-            // 辅助函数：根据ID查找对象
-            const findObjectById = (id) => {
-              if (!id) return null;
-              return objectIdMap.get(id) || null;
-            };
+              console.log("图层关联验证结果:", isValidate);
 
-            // 恢复图层数据
-            this.layers.value = tempLayers.map((layer) => {
-              const restoredLayer = { ...layer };
+              this.canvas.activeLayerId.value =
+                parsedJson?.activeLayerId || this.layers.value[0]?.id || null;
 
-              // 恢复fabricObjects数组
-              if (Array.isArray(layer.fabricObjects)) {
-                restoredLayer.fabricObjects = layer.fabricObjects
-                  .map((item) => {
-                    if (!item || !item.id) return null;
-                    return findObjectById(item.id);
-                  })
-                  .filter((obj) => obj !== null);
-              } else {
-                restoredLayer.fabricObjects = [];
-              }
+              // // 如果检测到红绿图模式内容，进行缩放调整
+              // if (this.enabledRedGreenMode) {
+              //   this._rescaleRedGreenModeContent();
+              // }
 
-              // 恢复单个fabricObject
-              if (layer.fabricObject && layer.fabricObject.id) {
-                restoredLayer.fabricObject = findObjectById(
-                  layer.fabricObject.id
-                );
-              } else {
-                restoredLayer.fabricObject = null;
-              }
+              // 重载代码后支持回调中操作一些内容
+              await calllBack?.();
 
-              // 恢复子图层
-              if (Array.isArray(layer.children)) {
-                restoredLayer.children = layer.children.map((cItem) => {
-                  const restoredChild = { ...cItem };
+              // 确保所有对象的交互性正确设置
+              await this.layerManager?.updateLayersObjectsInteractivity?.(
+                false
+              );
+              console.log(this.layerManager.layers.value);
+              debugger;
 
-                  // 恢复子图层的fabricObjects
-                  if (Array.isArray(cItem.fabricObjects)) {
-                    restoredChild.fabricObjects = cItem.fabricObjects
-                      .map((item) => {
-                        if (!item || !item.id) return null;
-                        return findObjectById(item.id);
-                      })
-                      .filter((obj) => obj !== null);
-                  } else {
-                    restoredChild.fabricObjects = [];
-                  }
+              // 更新所有缩略图
+              setTimeout(() => {
+                this.updateAllThumbnails();
+              }, 100);
 
-                  // 恢复子图层的fabricObject
-                  if (cItem.fabricObject && cItem.fabricObject.id) {
-                    restoredChild.fabricObject = findObjectById(
-                      cItem.fabricObject.id
-                    );
-                  } else {
-                    restoredChild.fabricObject = null;
-                  }
-
-                  return restoredChild;
-                });
-              } else {
-                restoredLayer.children = [];
-              }
-
-              return restoredLayer;
-            });
-
-            this.canvas.activeLayerId.value =
-              parsedJson?.activeLayerId || this.layers.value[0]?.id || null;
-
-            // 如果检测到红绿图模式内容，进行缩放调整
-            if (this.enabledRedGreenMode) {
-              this._rescaleRedGreenModeContent();
+              console.log("画布JSON数据加载完成");
+              resolve();
+            } catch (error) {
+              console.error("恢复图层数据失败:", error);
+              reject(new Error("恢复图层数据失败: " + error.message));
             }
-
-            // 更新所有缩略图
-            setTimeout(() => {
-              this.updateAllThumbnails();
-            }, 100);
-
-            console.log("画布JSON数据加载完成");
-            resolve();
-          } catch (error) {
-            console.error("恢复图层数据失败:", error);
-            reject(new Error("恢复图层数据失败: " + error.message));
-          }
+          });
         });
       });
     } catch (error) {
diff --git a/src/component/Canvas/CanvasEditor/managers/EraserStateManager.js b/src/component/Canvas/CanvasEditor/managers/EraserStateManager.js
new file mode 100644
index 00000000..973eac2b
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/EraserStateManager.js
@@ -0,0 +1,98 @@
+import { EraserCommand } from "../commands/EraserCommand";
+
+/**
+ * 橡皮擦状态管理器
+ * 用于管理橡皮擦操作的状态快照
+ */
+export class EraserStateManager {
+  constructor(canvas, layerManager) {
+    this.canvas = canvas;
+    this.layerManager = layerManager;
+    this.currentSnapshot = null;
+    this.pendingCommand = null;
+  }
+
+  setLayerManager(layerManager) {
+    this.layerManager = layerManager;
+  }
+
+  /**
+   * 开始橡皮擦操作 - 捕获初始状态
+   */
+  startErasing() {
+    console.log("橡皮擦操作开始 - 捕获状态快照");
+    this.currentSnapshot = this._captureCanvasSnapshot();
+  }
+
+  /**
+   * 结束橡皮擦操作 - 创建命令
+   * @param {Array} affectedObjects 受影响的对象
+   * @returns {EraserCommand|null} 创建的橡皮擦命令
+   */
+  endErasing(affectedObjects = []) {
+    if (!this.currentSnapshot) {
+      console.warn("没有初始状态快照，无法创建橡皮擦命令");
+      return null;
+    }
+
+    if (!affectedObjects || affectedObjects.length === 0) {
+      console.log("没有对象被擦除，不创建命令");
+      this.currentSnapshot = null;
+      return null;
+    }
+
+    console.log(`橡皮擦操作结束 - 影响了 ${affectedObjects.length} 个对象`);
+
+    // 捕获擦除后的状态
+    const afterSnapshot = this._captureCanvasSnapshot();
+
+    // 创建橡皮擦命令
+    const command = new EraserCommand({
+      canvas: this.canvas,
+      layerManager: this.layerManager,
+      affectedObjects: affectedObjects,
+      beforeSnapshot: this.currentSnapshot,
+      afterSnapshot: afterSnapshot,
+    });
+
+    // 重置状态
+    this.currentSnapshot = null;
+
+    return command;
+  }
+
+  /**
+   * 捕获画布状态快照
+   * @returns {Object} 画布状态快照
+   * @private
+   */
+  _captureCanvasSnapshot() {
+    try {
+      return this.canvas.toJSON([
+        "id",
+        "type",
+        "layerId",
+        "layerName",
+        "isBackground",
+        "isLocked",
+        "isVisible",
+        "isFixed",
+        "parentId",
+        "eraser",
+        "eraserable",
+        "erasable",
+      ]);
+    } catch (error) {
+      console.error("捕获画布状态快照失败:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 取消当前擦除操作
+   */
+  cancelErasing() {
+    this.currentSnapshot = null;
+    this.pendingCommand = null;
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/ExportManager.js b/src/component/Canvas/CanvasEditor/managers/ExportManager.js
index 15866232..cfeacec3 100644
--- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js
@@ -1,3 +1,6 @@
+import { fabric } from "fabric-with-all";
+import { findObjectById } from "../utils/helper";
+
 /**
  * 图片导出管理器
  * 负责处理画布的图片导出功能，支持多种导出选项和图层过滤
@@ -17,6 +20,7 @@ export class ExportManager {
    * @param {String} options.layerId 导出具体图层ID
    * @param {Array} options.layerIdArray 导出多个图层ID数组
    * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
+   * @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
    * @returns {String} 导出的图片数据URL
    */
   exportImage(options = {}) {
@@ -25,23 +29,44 @@ export class ExportManager {
       isContainFixed = false,
       layerId = "",
       layerIdArray = [],
-      expPicType = "png"
+      expPicType = "png",
+      restoreOpacityInRedGreen = true,
     } = options;
 
     try {
+      // 检查是否为红绿图模式
+      const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;
+
       // 如果指定了具体图层ID，导出指定图层
       if (layerId) {
-        return this._exportSpecificLayer(layerId, expPicType);
+        return this._exportSpecificLayer(
+          layerId,
+          expPicType,
+          isRedGreenMode,
+          restoreOpacityInRedGreen
+        );
       }
 
       // 如果指定了多个图层ID，导出多个图层
       if (layerIdArray && layerIdArray.length > 0) {
-        return this._exportMultipleLayers(layerIdArray, expPicType, isContainBg, isContainFixed);
+        return this._exportMultipleLayers(
+          layerIdArray,
+          expPicType,
+          isContainBg,
+          isContainFixed,
+          isRedGreenMode,
+          restoreOpacityInRedGreen
+        );
       }
 
       // 默认导出所有可见图层
-      return this._exportAllLayers(expPicType, isContainBg, isContainFixed);
-
+      return this._exportAllLayers(
+        expPicType,
+        isContainBg,
+        isContainFixed,
+        isRedGreenMode,
+        restoreOpacityInRedGreen
+      );
     } catch (error) {
       console.error("导出图片失败:", error);
       throw new Error(`图片导出失败: ${error.message}`);
@@ -52,10 +77,17 @@ export class ExportManager {
    * 导出指定单个图层
    * @param {String} layerId 图层ID
    * @param {String} expPicType 导出类型
+   * @param {Boolean} isRedGreenMode 是否为红绿图模式
+   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
    * @returns {String} 图片数据URL
    * @private
    */
-  _exportSpecificLayer(layerId, expPicType) {
+  _exportSpecificLayer(
+    layerId,
+    expPicType,
+    isRedGreenMode,
+    restoreOpacityInRedGreen
+  ) {
     if (!this.layerManager) {
       throw new Error("图层管理器未初始化");
     }
@@ -69,21 +101,29 @@ export class ExportManager {
       console.warn(`图层 ${layer.name} 不可见，将导出空白图片`);
     }
 
-    // 创建临时画布
-    const tempCanvas = this._createExportCanvas();
-    const tempFabricCanvas = this._createTempFabricCanvas(tempCanvas);
+    // 收集所有需要导出的对象
+    const objectsToExport = this._collectObjectsFromLayer(layer);
 
-    try {
-      // 只添加指定图层的对象
-      this._addLayerObjectsToCanvas(tempFabricCanvas, layer);
-
-      // 渲染并导出
-      tempFabricCanvas.renderAll();
-      return this._generateDataURL(tempCanvas, expPicType);
-
-    } finally {
-      this._cleanupTempCanvas(tempFabricCanvas);
+    if (objectsToExport.length === 0) {
+      console.warn(`图层 ${layer.name} 没有可导出的对象`);
+      return this._generateEmptyImage(expPicType);
     }
+
+    // 红绿图模式下使用固定尺寸和裁剪
+    if (isRedGreenMode) {
+      return this._exportWithRedGreenMode(
+        objectsToExport,
+        expPicType,
+        restoreOpacityInRedGreen
+      );
+    }
+
+    // 普通模式使用画布尺寸
+    return this._exportWithCanvasSize(
+      objectsToExport,
+      expPicType,
+      restoreOpacityInRedGreen
+    );
   }
 
   /**
@@ -92,40 +132,50 @@ export class ExportManager {
    * @param {String} expPicType 导出类型
    * @param {Boolean} isContainBg 是否包含背景图层
    * @param {Boolean} isContainFixed 是否包含固定图层
+   * @param {Boolean} isRedGreenMode 是否为红绿图模式
+   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
    * @returns {String} 图片数据URL
    * @private
    */
-  _exportMultipleLayers(layerIdArray, expPicType, isContainBg, isContainFixed) {
+  _exportMultipleLayers(
+    layerIdArray,
+    expPicType,
+    isContainBg,
+    isContainFixed,
+    isRedGreenMode,
+    restoreOpacityInRedGreen
+  ) {
     if (!this.layerManager) {
       throw new Error("图层管理器未初始化");
     }
 
-    // 创建临时画布
-    const tempCanvas = this._createExportCanvas();
-    const tempFabricCanvas = this._createTempFabricCanvas(tempCanvas);
+    // 按图层顺序收集对象（从底到顶）
+    const objectsToExport = this._collectObjectsByLayerOrder(
+      layerIdArray,
+      isContainBg,
+      isContainFixed
+    );
 
-    try {
-      // 按照图层顺序添加指定的图层
-      const allLayers = this._getAllLayers();
-      
-      allLayers.forEach(layer => {
-        if (!layerIdArray.includes(layer.id)) return;
-
-        // 检查图层类型过滤条件
-        if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed)) return;
-
-        if (layer.visible) {
-          this._addLayerObjectsToCanvas(tempFabricCanvas, layer);
-        }
-      });
-
-      // 渲染并导出
-      tempFabricCanvas.renderAll();
-      return this._generateDataURL(tempCanvas, expPicType);
-
-    } finally {
-      this._cleanupTempCanvas(tempFabricCanvas);
+    if (objectsToExport.length === 0) {
+      console.warn("没有可导出的对象");
+      return this._generateEmptyImage(expPicType);
     }
+
+    // 红绿图模式下使用固定尺寸和裁剪
+    if (isRedGreenMode) {
+      return this._exportWithRedGreenMode(
+        objectsToExport,
+        expPicType,
+        restoreOpacityInRedGreen
+      );
+    }
+
+    // 普通模式使用画布尺寸
+    return this._exportWithCanvasSize(
+      objectsToExport,
+      expPicType,
+      restoreOpacityInRedGreen
+    );
   }
 
   /**
@@ -133,183 +183,347 @@ export class ExportManager {
    * @param {String} expPicType 导出类型
    * @param {Boolean} isContainBg 是否包含背景图层
    * @param {Boolean} isContainFixed 是否包含固定图层
+   * @param {Boolean} isRedGreenMode 是否为红绿图模式
+   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
    * @returns {String} 图片数据URL
    * @private
    */
-  _exportAllLayers(expPicType, isContainBg, isContainFixed) {
-    // 创建临时画布
-    const tempCanvas = this._createExportCanvas();
-    const tempFabricCanvas = this._createTempFabricCanvas(tempCanvas);
+  _exportAllLayers(
+    expPicType,
+    isContainBg,
+    isContainFixed,
+    isRedGreenMode,
+    restoreOpacityInRedGreen
+  ) {
+    // 按图层顺序收集对象（从底到顶）
+    const objectsToExport = this._collectObjectsByLayerOrder(
+      null, // 导出所有图层
+      isContainBg,
+      isContainFixed
+    );
+
+    if (objectsToExport.length === 0) {
+      console.warn("没有可导出的对象");
+      return this._generateEmptyImage(expPicType);
+    }
+
+    // 红绿图模式下使用固定尺寸和裁剪
+    if (isRedGreenMode) {
+      return this._exportWithRedGreenMode(
+        objectsToExport,
+        expPicType,
+        restoreOpacityInRedGreen
+      );
+    }
+
+    // 普通模式使用画布尺寸
+    return this._exportWithCanvasSize(
+      objectsToExport,
+      expPicType,
+      restoreOpacityInRedGreen
+    );
+  }
+
+  /**
+   * 按图层顺序收集对象（从底到顶）
+   * @param {Array|null} layerIdArray 图层ID数组，null表示所有图层
+   * @param {Boolean} isContainBg 是否包含背景图层
+   * @param {Boolean} isContainFixed 是否包含固定图层
+   * @returns {Array} 按正确顺序排列的对象数组
+   * @private
+   */
+  _collectObjectsByLayerOrder(layerIdArray, isContainBg, isContainFixed) {
+    const objectsToExport = [];
+    const allLayers = this._getAllLayers();
+
+    // 图层数组是从顶到底的顺序，需要反向遍历以获得从底到顶的渲染顺序
+    for (let i = allLayers.length - 1; i >= 0; i--) {
+      const layer = allLayers[i];
+
+      // 如果指定了图层ID数组，只处理指定的图层
+      if (layerIdArray && !layerIdArray.includes(layer.id)) continue;
+
+      // 检查图层类型过滤条件
+      if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed))
+        continue;
+
+      if (layer.visible) {
+        const layerObjects = this._collectObjectsFromLayer(layer);
+        objectsToExport.push(...layerObjects);
+      }
+    }
+
+    return objectsToExport;
+  }
+
+  /**
+   * 红绿图模式导出（使用固定图层底图作为画布尺寸和裁剪区域）
+   * @param {Array} objectsToExport 要导出的对象数组
+   * @param {String} expPicType 导出类型
+   * @param {Boolean} restoreOpacityInRedGreen 是否恢复透明度为1
+   * @returns {String} 图片数据URL
+   * @private
+   */
+  async _exportWithRedGreenMode(
+    objectsToExport,
+    expPicType,
+    restoreOpacityInRedGreen
+  ) {
+    // 获取固定图层对象（衣服底图）作为参考
+    const fixedLayerObject = this._getFixedLayerObject();
+    if (!fixedLayerObject) {
+      console.warn("红绿图模式下未找到固定图层对象，使用画布尺寸");
+      return this._exportWithCanvasSize(
+        objectsToExport,
+        expPicType,
+        restoreOpacityInRedGreen
+      );
+    }
+
+    // 获取固定图层对象的边界矩形（包含位置、尺寸、缩放等信息）
+    const fixedBounds = fixedLayerObject.getBoundingRect();
+
+    // 使用固定图层的实际显示尺寸作为导出画布尺寸
+    const canvasWidth = Math.round(fixedBounds.width);
+    const canvasHeight = Math.round(fixedBounds.height);
+
+    console.log(`红绿图模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
+    console.log("固定图层边界:", fixedBounds);
+
+    // 创建固定尺寸的临时画布
+    const scaleFactor = 2; // 高清导出
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = canvasWidth * scaleFactor;
+    tempCanvas.height = canvasHeight * scaleFactor;
+    tempCanvas.style.width = canvasWidth + "px";
+    tempCanvas.style.height = canvasHeight + "px";
+
+    const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
+      width: canvasWidth,
+      height: canvasHeight,
+      backgroundColor: null,
+      enableRetinaScaling: true,
+      imageSmoothingEnabled: true,
+    });
+    tempFabricCanvas.setZoom(1);
 
     try {
-      // 获取所有图层并按顺序添加
-      const allLayers = this._getAllLayers();
-      
-      allLayers.forEach(layer => {
-        // 检查图层类型过滤条件
-        if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed)) return;
+      // 获取图层下标为1的对象作为裁剪路径
+      const clipPathObject = await this._getLayerClipPathObject(1, fixedBounds);
 
-        if (layer.visible) {
-          this._addLayerObjectsToCanvas(tempFabricCanvas, layer);
+      // 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
+      for (let i = 0; i < objectsToExport.length; i++) {
+        const obj = objectsToExport[i];
+        const cloned = await this._cloneObjectForExport(
+          obj,
+          restoreOpacityInRedGreen && true
+        );
+        if (cloned) {
+          // 调整对象位置：将原画布坐标转换为以固定图层为原点的相对坐标
+          cloned.set({
+            left: cloned.left - fixedBounds.left,
+            top: cloned.top - fixedBounds.top,
+          });
+
+          // 更新对象坐标
+          cloned.setCoords();
+
+          // 设置裁剪路径到对象
+          if (clipPathObject) {
+            cloned.clipPath = clipPathObject;
+          }
+
+          tempFabricCanvas.add(cloned);
         }
-      });
+      }
 
-      // 渲染并导出
+      // 渲染画布
       tempFabricCanvas.renderAll();
-      return this._generateDataURL(tempCanvas, expPicType);
 
+      // 生成图片
+      return this._generateHighQualityDataURL(tempCanvas, expPicType);
     } finally {
       this._cleanupTempCanvas(tempFabricCanvas);
     }
   }
 
   /**
-   * 判断是否应该包含该图层
-   * @param {Object} layer 图层对象
-   * @param {Boolean} isContainBg 是否包含背景图层
-   * @param {Boolean} isContainFixed 是否包含固定图层
-   * @returns {Boolean} 是否包含
+   * 普通模式导出（使用画布尺寸）
+   * @param {Array} objectsToExport 要导出的对象数组
+   * @param {String} expPicType 导出类型
+   * @param {Boolean} restoreOpacityInRedGreen 是否恢复透明度为1
+   * @returns {String} 图片数据URL
    * @private
    */
-  _shouldIncludeLayer(layer, isContainBg, isContainFixed) {
-    // 背景图层处理
-    if (layer.type === 'background' || layer.isBackground) {
-      return isContainBg;
-    }
+  async _exportWithCanvasSize(
+    objectsToExport,
+    expPicType,
+    restoreOpacityInRedGreen
+  ) {
+    // 使用当前画布尺寸
+    const canvasWidth = this.canvas.width;
+    const canvasHeight = this.canvas.height;
 
-    // 固定图层处理
-    if (layer.type === 'fixed' || layer.isFixed || layer.locked) {
-      return isContainFixed;
-    }
+    console.log(`普通模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
 
-    // 其他图层默认包含
-    return true;
-  }
-
-  /**
-   * 创建导出用的临时画布
-   * @returns {HTMLCanvasElement} 临时画布
-   * @private
-   */
-  _createExportCanvas() {
+    // 创建与画布相同尺寸的临时画布
+    const scaleFactor = 2; // 高清导出
     const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = this.canvas.width || 800;
-    tempCanvas.height = this.canvas.height || 600;
-    return tempCanvas;
-  }
+    tempCanvas.width = canvasWidth * scaleFactor;
+    tempCanvas.height = canvasHeight * scaleFactor;
+    tempCanvas.style.width = canvasWidth + "px";
+    tempCanvas.style.height = canvasHeight + "px";
 
-  /**
-   * 创建临时Fabric画布
-   * @param {HTMLCanvasElement} tempCanvas 临时画布元素
-   * @returns {fabric.StaticCanvas} 临时Fabric画布
-   * @private
-   */
-  _createTempFabricCanvas(tempCanvas) {
-    const { fabric } = window;
-    
     const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
-      width: this.canvas.width || 800,
-      height: this.canvas.height || 600,
-      backgroundColor: this.canvas.backgroundColor || 'transparent'
+      width: canvasWidth,
+      height: canvasHeight,
+      backgroundColor: null,
     });
 
-    // 设置高质量渲染选项
     tempFabricCanvas.enableRetinaScaling = true;
     tempFabricCanvas.imageSmoothingEnabled = true;
-
-    return tempFabricCanvas;
-  }
-
-  /**
-   * 将图层对象添加到临时画布
-   * @param {fabric.StaticCanvas} tempCanvas 临时画布
-   * @param {Object} layer 图层对象
-   * @private
-   */
-  _addLayerObjectsToCanvas(tempCanvas, layer) {
-    if (!layer) return;
-
-    // 处理背景图层
-    if (layer.type === 'background' && layer.fabricObject) {
-      this._cloneAndAddObject(tempCanvas, layer.fabricObject);
-      return;
-    }
-
-    // 处理普通图层的对象
-    if (layer.fabricObjects && Array.isArray(layer.fabricObjects)) {
-      layer.fabricObjects.forEach(obj => {
-        if (obj && obj.visible !== false) {
-          this._cloneAndAddObject(tempCanvas, obj);
-        }
-      });
-    }
-
-    // 处理单个fabricObject的情况
-    if (layer.fabricObject && !layer.fabricObjects) {
-      this._cloneAndAddObject(tempCanvas, layer.fabricObject);
-    }
-
-    // 处理分组图层的子图层
-    if (layer.children && Array.isArray(layer.children)) {
-      layer.children.forEach(childLayerId => {
-        const childLayer = this._getLayerById(childLayerId);
-        if (childLayer && childLayer.visible) {
-          this._addLayerObjectsToCanvas(tempCanvas, childLayer);
-        }
-      });
-    }
-  }
-
-  /**
-   * 克隆并添加对象到临时画布
-   * @param {fabric.StaticCanvas} tempCanvas 临时画布
-   * @param {fabric.Object} obj Fabric对象
-   * @private
-   */
-  _cloneAndAddObject(tempCanvas, obj) {
-    if (!obj) return;
+    tempFabricCanvas.setZoom(scaleFactor);
 
     try {
-      obj.clone((cloned) => {
+      // 克隆并添加所有对象到临时画布
+      for (const obj of objectsToExport) {
+        const cloned = await this._cloneObjectForExport(
+          obj,
+          restoreOpacityInRedGreen && false // 普通模式不强制恢复透明度
+        );
         if (cloned) {
-          // 确保克隆对象的属性正确
-          cloned.set({
-            selectable: false,
-            evented: false,
-            visible: true
-          });
-          tempCanvas.add(cloned);
+          tempFabricCanvas.add(cloned);
         }
-      }, ['id', 'layerId', 'name']); // 保留自定义属性
-    } catch (error) {
-      console.warn("克隆对象失败:", error);
+      }
+
+      // 渲染画布
+      tempFabricCanvas.renderAll();
+
+      // 生成图片
+      return this._generateHighQualityDataURL(tempCanvas, expPicType);
+    } finally {
+      this._cleanupTempCanvas(tempFabricCanvas);
     }
   }
 
   /**
-   * 生成数据URL
+   * 获取固定图层对象
+   * @returns {Object|null} 固定图层对象
+   * @private
+   */
+  _getFixedLayerObject() {
+    const allLayers = this._getAllLayers();
+    const fixedLayer = allLayers.find((layer) => layer.isFixed);
+
+    if (!fixedLayer || !fixedLayer.fabricObject) {
+      return null;
+    }
+
+    // 如果有ID，通过ID查找画布中的实际对象
+    if (fixedLayer.fabricObject.id) {
+      const result = findObjectById(this.canvas, fixedLayer.fabricObject.id);
+      return result.object || fixedLayer.fabricObject;
+    }
+
+    return fixedLayer.fabricObject;
+  }
+
+  /**
+   * 克隆对象用于导出
+   * @param {Object} obj fabric对象
+   * @param {Boolean} forceRestoreOpacity 是否强制恢复透明度为1
+   * @param {Boolean} removeClipPath 是否移除裁剪路径
+   * @returns {Promise<Object>} 克隆的对象
+   * @private
+   */
+  async _cloneObjectForExport(
+    obj,
+    forceRestoreOpacity = false,
+    removeClipPath = true
+  ) {
+    if (!obj) return null;
+
+    return new Promise((resolve, reject) => {
+      try {
+        obj.clone(
+          (cloned) => {
+            if (cloned) {
+              // 保持原始位置和属性
+              cloned.set({
+                selectable: false,
+                evented: false,
+                visible: true,
+              });
+
+              // 如果需要恢复透明度
+              if (forceRestoreOpacity) {
+                cloned.set({ opacity: 1 });
+              }
+
+              // 移除裁剪路径以避免绝对路径问题
+              if (removeClipPath && cloned.clipPath) {
+                console.log(`移除对象 ${cloned.id || "未知"} 的裁剪路径`);
+                cloned.clipPath = null;
+              }
+
+              resolve(cloned);
+            } else {
+              resolve(null);
+            }
+          },
+          ["id", "layerId", "layerName", "name"]
+        );
+      } catch (error) {
+        console.warn("克隆对象失败:", error);
+        resolve(null);
+      }
+    });
+  }
+
+  /**
+   * 生成高质量数据URL
    * @param {HTMLCanvasElement} canvas 画布元素
    * @param {String} expPicType 导出类型
    * @returns {String} 数据URL
    * @private
    */
-  _generateDataURL(canvas, expPicType) {
+  _generateHighQualityDataURL(canvas, expPicType) {
     const format = expPicType.toLowerCase();
-    
+
     switch (format) {
-      case 'jpg':
-      case 'jpeg':
-        return canvas.toDataURL('image/jpeg', 0.9);
-      case 'svg':
-        // SVG导出需要特殊处理，这里先返回PNG
-        console.warn("SVG导出暂未实现，返回PNG格式");
-        return canvas.toDataURL('image/png', 1.0);
-      case 'png':
+      case "jpg":
+      case "jpeg":
+        // 对于JPEG，使用较高质量，但JPEG不支持透明背景
+        return canvas.toDataURL("image/jpeg", 0.95);
+      case "svg":
+        // SVG导出需要特殊处理，这里先返回高质量PNG
+        console.warn("SVG导出暂未实现，返回高质量PNG格式");
+        return canvas.toDataURL("image/png", 1.0);
+      case "png":
       default:
-        return canvas.toDataURL('image/png', 1.0);
+        // PNG使用最高质量，支持透明背景
+        return canvas.toDataURL("image/png", 1.0);
     }
   }
 
+  /**
+   * 生成空白图片
+   * @param {String} expPicType 导出类型
+   * @returns {String} 空白图片数据URL
+   * @private
+   */
+  _generateEmptyImage(expPicType) {
+    const emptyCanvas = document.createElement("canvas");
+    emptyCanvas.width = 1;
+    emptyCanvas.height = 1;
+
+    // 确保透明背景
+    const ctx = emptyCanvas.getContext("2d");
+    ctx.clearRect(0, 0, 1, 1);
+
+    return this._generateHighQualityDataURL(emptyCanvas, expPicType);
+  }
+
   /**
    * 清理临时画布资源
    * @param {fabric.StaticCanvas} tempFabricCanvas 临时Fabric画布
@@ -347,9 +561,322 @@ export class ExportManager {
     if (this.layerManager && this.layerManager.getLayerById) {
       return this.layerManager.getLayerById(layerId);
     }
-    
+
     // 备用方法：直接从图层数组中查找
     const allLayers = this._getAllLayers();
-    return allLayers.find(layer => layer.id === layerId) || null;
+    return allLayers.find((layer) => layer.id === layerId) || null;
   }
-}
\ No newline at end of file
+
+  /**
+   * 从图层收集对象
+   * @param {Object} layer 图层对象
+   * @returns {Array} 对象数组
+   * @private
+   */
+  _collectObjectsFromLayer(layer) {
+    if (!layer || !layer.fabricObjects) {
+      return [];
+    }
+
+    return layer.fabricObjects.filter((obj) => obj && obj.visible !== false);
+  }
+
+  /**
+   * 检查是否应该包含该图层
+   * @param {Object} layer 图层对象
+   * @param {Boolean} isContainBg 是否包含背景图层
+   * @param {Boolean} isContainFixed 是否包含固定图层
+   * @returns {Boolean} 是否包含
+   * @private
+   */
+  _shouldIncludeLayer(layer, isContainBg, isContainFixed) {
+    // 背景图层
+    if (layer.isBackground) {
+      return isContainBg;
+    }
+
+    // 固定图层
+    if (layer.isFixed) {
+      return isContainFixed;
+    }
+
+    // 普通图层始终包含
+    return true;
+  }
+
+  /**
+   * 计算对象组的边界
+   * @param {Array} objects 对象数组
+   * @returns {Object} 边界信息 {left, top, width, height}
+   * @private
+   */
+  _calculateGroupBounds(objects) {
+    if (!objects || objects.length === 0) {
+      return { left: 0, top: 0, width: 100, height: 100 };
+    }
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    objects.forEach((obj) => {
+      if (!obj) return;
+
+      try {
+        const bounds = obj.getBoundingRect();
+        minX = Math.min(minX, bounds.left);
+        minY = Math.min(minY, bounds.top);
+        maxX = Math.max(maxX, bounds.left + bounds.width);
+        maxY = Math.max(maxY, bounds.top + bounds.height);
+      } catch (error) {
+        console.warn("计算对象边界失败:", error);
+      }
+    });
+
+    // 如果没有有效边界，使用默认值
+    if (minX === Infinity || minY === Infinity) {
+      return { left: 0, top: 0, width: 100, height: 100 };
+    }
+
+    return {
+      left: minX,
+      top: minY,
+      width: maxX - minX,
+      height: maxY - minY,
+    };
+  }
+
+  /**
+   * 创建高质量导出画布
+   * @param {Object} bounds 边界信息
+   * @param {Number} scaleFactor 缩放因子
+   * @returns {HTMLCanvasElement} 画布元素
+   * @private
+   */
+  _createHighQualityExportCanvas(bounds, scaleFactor) {
+    const canvas = document.createElement("canvas");
+
+    // 设置画布的实际像素尺寸（用于高清导出）
+    canvas.width = bounds.width * scaleFactor;
+    canvas.height = bounds.height * scaleFactor;
+
+    // 设置画布的显示尺寸（CSS尺寸）
+    canvas.style.width = bounds.width + "px";
+    canvas.style.height = bounds.height + "px";
+
+    // 启用高质量渲染
+    const ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+
+    return canvas;
+  }
+
+  /**
+   * 创建高质量临时Fabric画布
+   * @param {HTMLCanvasElement} canvas 画布元素
+   * @param {Object} bounds 边界信息
+   * @param {Number} scaleFactor 缩放因子
+   * @returns {fabric.StaticCanvas} Fabric画布
+   * @private
+   */
+  _createHighQualityTempFabricCanvas(canvas, bounds, scaleFactor) {
+    const tempFabricCanvas = new fabric.StaticCanvas(canvas, {
+      width: bounds.width,
+      height: bounds.height,
+      backgroundColor: null, // 透明背景
+    });
+
+    // 启用高清缩放和图像平滑
+    tempFabricCanvas.enableRetinaScaling = true;
+    tempFabricCanvas.imageSmoothingEnabled = true;
+    tempFabricCanvas.setZoom(scaleFactor);
+
+    return tempFabricCanvas;
+  }
+
+  /**
+   * 克隆对象并添加到临时画布（带偏移处理）
+   * @param {fabric.StaticCanvas} tempCanvas 临时画布
+   * @param {Object} obj 原始对象
+   * @param {Object} bounds 边界信息
+   * @param {Boolean} isRedGreenMode 是否为红绿图模式
+   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
+   * @returns {Promise<Object>} 克隆的对象
+   * @private
+   */
+  async _cloneAndAddObjectWithOffset(
+    tempCanvas,
+    obj,
+    bounds,
+    isRedGreenMode,
+    restoreOpacityInRedGreen
+  ) {
+    if (!obj) return null;
+
+    try {
+      const cloned = await this._cloneObjectForExport(
+        obj,
+        isRedGreenMode && restoreOpacityInRedGreen
+      );
+
+      if (cloned) {
+        // 调整对象位置，减去边界偏移量，使对象在新画布中正确定位
+        cloned.set({
+          left: cloned.left - bounds.left,
+          top: cloned.top - bounds.top,
+        });
+
+        // 更新对象坐标
+        cloned.setCoords();
+
+        // 添加到临时画布
+        tempCanvas.add(cloned);
+
+        return cloned;
+      }
+    } catch (error) {
+      console.warn("克隆并添加对象失败:", error);
+    }
+
+    return null;
+  }
+
+  /**
+   * 将对象作为组导出（高质量版本）
+   * @param {Array} objectsToExport 要导出的对象数组
+   * @param {String} expPicType 导出类型
+   * @param {Number} scaleFactor 缩放因子，用于高清导出
+   * @param {Boolean} isRedGreenMode 是否为红绿图模式
+   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
+   * @returns {Promise<String>} 图片数据URL
+   * @private
+   */
+  async _exportObjectsAsGroup(
+    objectsToExport,
+    expPicType,
+    scaleFactor = 2,
+    isRedGreenMode = false,
+    restoreOpacityInRedGreen = true
+  ) {
+    if (!objectsToExport || objectsToExport.length === 0) {
+      throw new Error("没有可导出的对象");
+    }
+
+    // 计算所有对象的边界
+    const bounds = this._calculateGroupBounds(objectsToExport);
+    console.log("导出边界:", bounds);
+
+    // 创建高质量临时画布
+    const tempCanvas = this._createHighQualityExportCanvas(bounds, scaleFactor);
+    const tempFabricCanvas = this._createHighQualityTempFabricCanvas(
+      tempCanvas,
+      bounds,
+      scaleFactor
+    );
+
+    try {
+      // 克隆所有对象并添加到临时画布
+      const clonedObjects = [];
+      for (const obj of objectsToExport) {
+        const cloned = await this._cloneAndAddObjectWithOffset(
+          tempFabricCanvas,
+          obj,
+          bounds,
+          isRedGreenMode,
+          restoreOpacityInRedGreen
+        );
+        if (cloned) {
+          clonedObjects.push(cloned);
+        }
+      }
+
+      console.log(`成功克隆 ${clonedObjects.length} 个对象进行导出`);
+
+      // 渲染画布
+      tempFabricCanvas.renderAll();
+
+      // 生成高质量数据URL
+      return this._generateHighQualityDataURL(tempCanvas, expPicType);
+    } finally {
+      this._cleanupTempCanvas(tempFabricCanvas);
+    }
+  }
+
+  /**
+   * 获取图层下标为1的对象作为裁剪路径
+   * @param {Number} layerIndex 图层下标
+   * @param {Object} fixedBounds 固定图层边界
+   * @returns {Promise<Object|null>} 裁剪路径对象
+   * @private
+   */
+  async _getLayerClipPathObject(layerIndex, fixedBounds) {
+    try {
+      const allLayers = this._getAllLayers();
+
+      // 获取指定下标的图层（从底到顶，下标0是最底层）
+      const targetLayerIndex = layerIndex;
+
+      if (targetLayerIndex < 0 || targetLayerIndex >= allLayers.length) {
+        console.warn(
+          `图层下标 ${layerIndex} 超出范围，总图层数: ${allLayers.length}`
+        );
+        return null;
+      }
+
+      const targetLayer = allLayers[targetLayerIndex];
+
+      if (
+        !targetLayer ||
+        !targetLayer.visible ||
+        !targetLayer.fabricObjects ||
+        targetLayer.fabricObjects.length === 0
+      ) {
+        console.warn(`图层下标 ${layerIndex} 不可见或没有对象`);
+        return null;
+      }
+
+      // 获取图层中的第一个对象作为裁剪路径
+      const clipObject = targetLayer.fabricObjects[0];
+
+      if (!clipObject) {
+        console.warn(`图层下标 ${layerIndex} 中没有可用的裁剪对象`);
+        return null;
+      }
+
+      // 克隆对象作为裁剪路径
+      const clonedClipPath = await this._cloneObjectForExport(
+        clipObject,
+        false,
+        false
+      );
+
+      if (!clonedClipPath) {
+        console.warn(`无法克隆图层下标 ${layerIndex} 的裁剪对象`);
+        return null;
+      }
+
+      // 调整裁剪路径的位置相对于固定图层
+      clonedClipPath.set({
+        left: clonedClipPath.left - fixedBounds.left,
+        top: clonedClipPath.top - fixedBounds.top,
+        absolutePositioned: true, // 使用绝对定位
+      });
+
+      // 更新坐标
+      clonedClipPath.setCoords();
+
+      console.log(`成功创建图层下标 ${layerIndex} 的裁剪路径:`, {
+        objectType: clonedClipPath.type,
+        position: { left: clonedClipPath.left, top: clonedClipPath.top },
+        size: { width: clonedClipPath.width, height: clonedClipPath.height },
+      });
+
+      return clonedClipPath;
+    } catch (error) {
+      console.error(`获取图层下标 ${layerIndex} 裁剪路径失败:`, error);
+      return null;
+    }
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
index 55592129..e2a8ce66 100644
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -14,12 +14,19 @@ import {
   MergeLayerObjectsCommand,
   LayerObjectsToGroupCommand,
   ReorderLayersCommand,
-  ReorderChildLayersCommand,
+  ToggleChildLayerVisibilityCommand,
+  RenameChildLayerCommand,
+  RemoveChildLayerCommand,
+  ChildLayerLockCommand,
 } from "../commands/LayerCommands";
 import {
   SetActiveLayerCommand,
   AddObjectToLayerCommand,
   RemoveObjectFromLayerCommand,
+  SelectAllLayersCommand,
+  ClearSelectionCommand,
+  MoveLayerToTopCommand,
+  MoveLayerToBottomCommand,
 } from "../commands/ObjectLayerCommands";
 import {
   LayerType,
@@ -29,6 +36,7 @@ import {
   createFixedLayer,
   OperationType,
   OperationTypes,
+  findLayerRecursively,
 } from "../utils/layerHelper";
 import {
   CreateBackgroundLayerCommand,
@@ -36,13 +44,29 @@ import {
   BackgroundSizeCommand,
   BackgroundSizeWithScaleCommand,
 } from "../commands/BackgroundCommands";
+import {
+  RasterizeLayerCommand,
+  MergeGroupLayerCommand,
+} from "../commands/GroupCommands";
+
+// 导入图层排序相关类和混入
+import {
+  LayerSort,
+  createLayerSort,
+  LayerSortMixin,
+  LayerSortUtils,
+} from "../utils/LayerSort";
 
 import CanvasConfig from "../config/canvasConfig";
+import { isBoolean, template } from "lodash-es";
+import { findObjectById, optimizeCanvasRendering } from "../utils/helper";
+import { message } from "ant-design-vue";
 
 /**
  * 图层管理器 - 负责管理画布上的所有图层
  * 包含图层的创建、删除、修改、排序等操作
  * 现在统一使用命令管理器进行状态管理
+ * 集成LayerSort高级排序功能
  */
 export class LayerManager {
   /**
@@ -84,9 +108,13 @@ export class LayerManager {
     this.operationInProgress = false;
 
     // 红绿图模式相关
-    this.isRedGreenMode = false;
+    this.isRedGreenMode = options.isRedGreenMode || false;
     this.redGreenModeManager = null;
 
+    // 初始化图层排序工具
+    this.layerSort = null;
+    this.initLayerSort();
+
     // 初始化相关命令
     this.initCommandManager();
   }
@@ -100,6 +128,19 @@ export class LayerManager {
     console.log("CommandManager 已初始化，使用直接命令调用模式");
   }
 
+  /**
+   * 初始化图层排序工具
+   * 创建LayerSort实例并绑定到LayerManager
+   */
+  initLayerSort() {
+    if (this.canvas && this.layers) {
+      this.layerSort = createLayerSort(this.canvas, this.layers, {
+        commandManager: this.commandManager,
+      });
+      console.log("图层排序工具已初始化");
+    }
+  }
+
   /**
    * 设置编辑器模式
    * @param {string} mode 'draw'、'select'或'pan'
@@ -127,28 +168,121 @@ export class LayerManager {
    * 根据当前编辑模式和图层状态设置对象的交互属性
    * @private
    */
-  updateLayersObjectsInteractivity() {
+  updateLayersObjectsInteractivity(isUseOptimize = true) {
     if (!this.canvas) return;
-
-    // 性能优化：使用requestAnimationFrame
-    requestAnimationFrame(() => {
-      // 暂停渲染以提高性能
-      this.canvas.skipTargetFind = true;
-      // this.canvas.discardActiveObject();
-
-      // 暂停实时渲染和对象查找
-      const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
-      this.canvas.renderOnAddRemove = false;
-
-      // 应用图层交互规则
+    if (isUseOptimize) {
+      // 优化渲染  -  统一批处理  支持异步回调
+      optimizeCanvasRendering(this.canvas, () => {
+        // 应用图层交互规则
+        this._applyInteractionRules();
+      });
+    } else {
+      // 直接应用图层交互规则
       this._applyInteractionRules();
+    }
 
-      // 恢复渲染设置
-      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
-      this.canvas.skipTargetFind = false;
-      // this.canvas.renderAll();
-      this.canvas.renderAll(); // 确保画布重新渲染 - 同步渲染
-    });
+    // // 性能优化：使用requestAnimationFrame
+    // requestAnimationFrame(() => {
+    //   // 暂停渲染以提高性能
+    //   this.canvas.skipTargetFind = true;
+    //   // this.canvas.discardActiveObject();
+
+    //   // 暂停实时渲染和对象查找
+    //   const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
+    //   this.canvas.renderOnAddRemove = false;
+
+    //   // 应用图层交互规则
+    //   this._applyInteractionRules();
+
+    //   // 恢复渲染设置
+    //   this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
+    //   this.canvas.skipTargetFind = false;
+    //   // this.canvas.renderAll();
+    //   this.canvas.renderAll(); // 确保画布重新渲染 - 同步渲染
+    // });
+  }
+  _setObjectInteractivity(obj, layer, editorMode) {
+    // 设置可见性
+    obj.visible = layer.visible;
+
+    // 判断对象是否在当前活动图层上
+    const isInActiveLayer = obj.layerId === this.activeLayerId.value;
+
+    // 基于 fabric-with-erasing 库的 erasable 属性设置擦除权限
+    // 只有活动图层、可见、非锁定、非背景、非固定图层的对象才可擦除
+    obj.erasable =
+      isInActiveLayer &&
+      layer.visible &&
+      !layer.locked &&
+      !layer.isBackground &&
+      !layer.isFixed;
+
+    // 图层状态决定交互性
+    if (layer.isBackground || obj.isBackground || layer.isFixed) {
+      // 背景层永远不可选择和擦除
+      obj.selectable = false;
+      obj.evented = false;
+      obj.erasable = false;
+    } else if (layer.locked) {
+      // 锁定图层不可交互和擦除
+      obj.selectable = false;
+      obj.evented = false;
+      obj.erasable = false;
+    } else {
+      // 根据编辑模式设置交互性
+      switch (editorMode) {
+        case OperationType.SELECT:
+          obj.selectable = true;
+          obj.evented = true;
+          break;
+        case OperationType.ERASER:
+          // 橡皮擦模式：利用 fabric-with-erasing 的内置机制
+          // 只需要设置 erasable 属性，库会自动处理擦除逻辑
+          obj.selectable = false;
+          obj.evented = true; // 需要设置为 true 以接收鼠标事件
+          // erasable 已在上面根据图层状态设置
+          break;
+        case OperationType.DRAW:
+        case OperationType.EYEDROPPER:
+        case OperationType.PAN:
+        case OperationType.WAVE:
+        case OperationType.LIQUIFY:
+        case OperationType.LASSO:
+        case OperationType.LASSO_RECTANGLE:
+        case OperationType.AREA_CUSTOM:
+        case OperationType.AREA_RECTANGLE:
+          obj.selectable = false;
+          obj.evented = false;
+          break;
+        default:
+          obj.selectable = false;
+          obj.evented = false;
+      }
+
+      if (this.isRedGreenMode) {
+        // 红绿图模式下 所有普通图层都可擦除
+        obj.erasable =
+          layer.visible &&
+          !layer.locked &&
+          !layer.isBackground &&
+          !layer.isFixed;
+      }
+
+      // 平移模式下，禁用多选和擦除
+      if (editorMode === OperationType.PAN) {
+        obj.selectable = false;
+        obj.evented = false;
+        obj.erasable = false;
+      }
+    }
+
+    // 应用图层视觉属性
+    if (layer.opacity !== undefined) obj.opacity = layer.opacity;
+    if (layer.blendMode) obj.globalCompositeOperation = layer.blendMode;
+    if (layer.clippingMask) {
+      const { object } = findObjectById(this.canvas, layer.clippingMask?.id);
+      obj.clipPath = object || null;
+    }
   }
 
   // 私有方法：应用交互规则
@@ -162,13 +296,15 @@ export class LayerManager {
     const layerMap = {};
     layers.forEach((layer) => {
       layerMap[layer.id] = layer;
+      layers?.children?.forEach((childLayer) => {
+        layerMap[childLayer.id] = childLayer;
+      });
     });
 
-    // 获取当前活动图层ID
-    const currentActiveLayerId = this.activeLayerId?.value;
-
     // 批量更新对象
     objects.forEach((obj) => {
+      const layer = layerMap[obj.layerId];
+
       if (!obj.layerId) {
         // 没有关联图层的对象使用默认设置
         obj.selectable = false;
@@ -177,77 +313,20 @@ export class LayerManager {
         return;
       }
 
-      const layer = layerMap[obj.layerId];
       if (!layer) return;
 
-      // 设置可见性
-      obj.visible = layer.visible;
+      // 设置一级图层对象的交互性
+      this._setObjectInteractivity(obj, layer, editorMode);
 
-      // 判断对象是否在当前活动图层上
-      const isInActiveLayer = obj.layerId === currentActiveLayerId;
-
-      // 基于 fabric-with-erasing 库的 erasable 属性设置擦除权限
-      // 只有活动图层、可见、非锁定、非背景、非固定图层的对象才可擦除
-      obj.erasable =
-        isInActiveLayer &&
-        layer.visible &&
-        !layer.locked &&
-        !layer.isBackground &&
-        !layer.isFixed;
-
-      // 图层状态决定交互性
-      if (layer.isBackground || obj.isBackground || layer.isFixed) {
-        // 背景层永远不可选择和擦除
-        obj.selectable = false;
-        obj.evented = false;
-        obj.erasable = false;
-      } else if (layer.locked) {
-        // 锁定图层不可交互和擦除
-        obj.selectable = false;
-        obj.evented = false;
-        obj.erasable = false;
-      } else {
-        // 根据编辑模式设置交互性
-        switch (editorMode) {
-          case OperationType.SELECT:
-            obj.selectable = true;
-            obj.evented = true;
-            break;
-          case OperationType.ERASER:
-            // 橡皮擦模式：利用 fabric-with-erasing 的内置机制
-            // 只需要设置 erasable 属性，库会自动处理擦除逻辑
-            obj.selectable = false;
-            obj.evented = true; // 需要设置为 true 以接收鼠标事件
-            // erasable 已在上面根据图层状态设置
-            break;
-          case OperationType.DRAW:
-          case OperationType.EYEDROPPER:
-          case OperationType.PAN:
-          case OperationType.WAVE:
-          case OperationType.LIQUIFY:
-          case OperationType.LASSO:
-          case OperationType.LASSO_RECTANGLE:
-          case OperationType.AREA_CUSTOM:
-          case OperationType.AREA_RECTANGLE:
-            obj.selectable = false;
-            obj.evented = false;
-            break;
-          default:
-            obj.selectable = false;
-            obj.evented = false;
+      // 设置子图层对象的交互性
+      layer?.childLayer?.forEach((childLayer) => {
+        const childObj = this.canvas
+          .getObjects()
+          .find((o) => o.layerId === childLayer.id);
+        if (childObj) {
+          this._setObjectInteractivity(childObj, childLayer, editorMode);
         }
-
-        // 平移模式下，禁用多选和擦除
-        if (editorMode === OperationType.PAN) {
-          obj.selectable = false;
-          obj.evented = false;
-          obj.erasable = false;
-        }
-      }
-
-      // 应用图层视觉属性
-      if (layer.opacity !== undefined) obj.opacity = layer.opacity;
-      if (layer.blendMode) obj.globalCompositeOperation = layer.blendMode;
+      });
     });
   }
   /**
@@ -297,8 +376,11 @@ export class LayerManager {
       (layer) => !layer.isBackground && !layer.isFixed
     ).length;
 
+    // 如果有额外选项，设置命令的undoable属性
+    command.undoable = options.undoable;
+
     // 如果是第一个图层，或者普通图层数量小于等于3，设置为不可撤销
-    if (this.layers.value.length === 1 || normalLayersCount <= 3) {
+    if (this.layers.value.length === 3 || normalLayersCount <= 1) {
       command.undoable = false;
     }
 
@@ -420,110 +502,6 @@ export class LayerManager {
     return this.layers.value.length; // 如果没有背景图层，则添加到最后
   }
 
-  /**
-   * 创建普通图层
-   * @param {String} name 图层名称 (默认: null，将生成自动名称)
-   * @param {String} type 图层类型 (默认: LayerType.EMPTY)
-   * @param {Object} options 附加选项
-   * @returns {String} 新创建的图层ID
-   */
-  createLayer(name = null, type = LayerType.EMPTY, options = {}) {
-    // 生成唯一ID
-    const layerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
-    const layerIndex = this.layers.value.length;
-
-    // 计算插入位置，如果没有指定insertIndex，则根据当前选中图层决定插入位置
-    // 添加到图层列表
-    let insertIndex = this._getInsertIndexAboveActiveLayer();
-    if (options.insertIndex !== undefined) {
-      insertIndex = options.insertIndex;
-    }
-
-    // 创建新图层
-    const newLayer = createLayer({
-      id: layerId,
-      name: name || `图层 ${layerIndex + 1}`,
-      type: type,
-      visible: true,
-      locked: false,
-      opacity: 1.0,
-      blendMode: BlendMode.NORMAL,
-      fabricObjects: [],
-      children: [],
-      ...options,
-    });
-
-    // 直接创建和执行命令
-    const command = new AddLayerCommand({
-      canvas: this.canvas,
-      layers: this.layers,
-      newLayer: newLayer,
-      activeLayerId: this.activeLayerId,
-      insertIndex: insertIndex,
-    });
-
-    // 如果是第一个图层，设置为不可撤销
-    if (this.layers.value.length === 1) {
-      command.undoable = false;
-    }
-
-    // 执行命令
-    if (this.commandManager) {
-      this.commandManager.execute(command);
-    } else {
-      command.execute();
-    }
-
-    return layerId;
-  }
-
-  /**
-   * 创建背景图层
-   * @param {string} name 图层名称
-   * @returns {string} 创建的背景层ID
-   */
-  createBackgroundLayer(name = "背景") {
-    // 检查是否已有背景图层
-    const hasBackgroundLayer = this.layers.value.some(
-      (layer) => layer.isBackground
-    );
-
-    if (hasBackgroundLayer) {
-      console.warn("已存在背景层，不再创建新的背景层");
-      return null;
-    }
-
-    // 创建背景图层
-    const bgLayer = createBackgroundLayer({
-      name: name,
-      canvasWidth: this.canvasWidth,
-      canvasHeight: this.canvasHeight,
-      backgroundColor: this.backgroundColor,
-    });
-
-    // 直接创建和执行命令
-    const command = new CreateBackgroundLayerCommand({
-      canvas: this.canvas,
-      layers: this.layers,
-      activeLayerId: this.activeLayerId,
-      canvasManager: this.canvasManager,
-      backgroundLayer: bgLayer,
-    });
-
-    // 背景图层设置为不可撤销
-    command.undoable = false;
-
-    // 执行命令
-    if (this.commandManager) {
-      this.commandManager.execute(command);
-    } else {
-      command.execute();
-    }
-
-    // 返回创建的背景层ID
-    return bgLayer.id;
-  }
-
   /**
    * 初始化图层，确保有背景层、固定图层和一个空白图层
    */
@@ -588,7 +566,10 @@ export class LayerManager {
     }
 
     // 验证目标图层是否存在
-    const targetLayer = this.getLayerById(targetLayerId);
+    const { layer: targetLayer } = findLayerRecursively(
+      this.layers.value,
+      targetLayerId
+    );
     if (!targetLayer) {
       console.error(`目标图层 ${targetLayerId} 不存在`);
       return null;
@@ -600,6 +581,7 @@ export class LayerManager {
       layers: this.layers,
       layerId: targetLayerId,
       fabricObject: fabricObject,
+      layerManager: this,
     });
 
     // 执行命令
@@ -667,6 +649,10 @@ export class LayerManager {
    * @param {string} layerId 图层ID
    */
   setActiveLayer(layerId, options = {}) {
+    if (layerId === this.activeLayerId.value) {
+      console.warn("当前图层已是活动图层，无需重复设置");
+      return;
+    }
     // 直接创建和执行命令
     const command = new SetActiveLayerCommand({
       layers: this.layers,
@@ -674,10 +660,12 @@ export class LayerManager {
       layerManager: this,
       activeLayerId: this.activeLayerId,
       layerId: layerId,
+      parentId: options?.parentId,
       editorMode: this.editorMode,
       ...options,
     });
-
+    // 如果有额外选项，设置命令的undoable属性
+    command.undoable = !!options.undoable;
     // 执行命令
     if (this.commandManager) {
       this.commandManager.execute(command);
@@ -691,11 +679,10 @@ export class LayerManager {
    * @return {Object} layer 图层对象
    */
   getActiveLayer() {
-    // 查找当前活动图层
-    const activeLayer = this.layers.value.find(
-      (layer) => layer.id === this.activeLayerId.value
+    const { layer: activeLayer } = findLayerRecursively(
+      this.layers.value,
+      this.activeLayerId.value
     );
-
     if (activeLayer) {
       return activeLayer;
     } else {
@@ -715,8 +702,8 @@ export class LayerManager {
    * @returns {Object|null} 图层对象或null
    */
   getLayerById(layerId) {
-    if (!layerId || !this.layers.value) return null;
-    return this.layers.value.find((layer) => layer.id === layerId) || null;
+    const { layer } = findLayerRecursively(this.layers.value, layerId);
+    return layer;
   }
 
   /**
@@ -747,17 +734,18 @@ export class LayerManager {
    */
   removeLayer(layerId) {
     // 查找要删除的图层
-    const layer = this.layers.value.find((layer) => layer.id === layerId);
-
+    const { layer } = findLayerRecursively(this.layers.value, layerId);
     // 如果是背景层或固定层，不允许删除
     if (layer && (layer.isBackground || layer.isFixed)) {
       console.warn(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
+      message.warning(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
       return false;
     }
 
     // 如果图层有子图层，提示确认
     if (layer && layer.children && layer.children.length > 0) {
       console.warn("该图层包含子图层，删除将同时删除所有子图层");
+      message.warning("该图层包含子图层，删除将同时删除所有子图层");
     }
 
     // 直接创建和执行命令
@@ -778,41 +766,101 @@ export class LayerManager {
     return true;
   }
 
+  updateLayerObject(layerId, fabricObject) {
+    // 查找图层
+    const { layer } = findLayerRecursively(this.layers.value, layerId);
+    if (!layer) {
+      console.error(`图层 ${layerId} 不存在`);
+      return;
+    }
+
+    const tempFabricObject =
+      fabricObject?.toObject?.([
+        "id",
+        "layerId",
+        "layerName",
+        "isBackgroud",
+        "isFixed",
+      ]) || fabricObject;
+    if (layer.isFixed || layer.isBackground) {
+      layer.fabricObject = tempFabricObject;
+    } else {
+      layer.fabricObjects =
+        layer.fabricObjects.map((item) => {
+          if (item.id === tempFabricObject.id) {
+            // 更新对象属性
+            return tempFabricObject;
+          }
+          return item;
+        }) || [];
+    }
+  }
   /**
    * 移动图层位置
    * @param {string} layerId 图层ID
-   * @param {string} direction 移动方向，'up'或'down'
+   * @param {string} direction 移动方向，'up'、'down'、'toTop'或'toBottom'
    * @returns {boolean} 是否移动成功
    */
   moveLayer(layerId, direction) {
     // 查找要移动的图层
-    const layer = this.layers.value.find((layer) => layer.id === layerId);
+    const { layer } = findLayerRecursively(this.layers.value, layerId);
 
     // 如果是背景层或固定层，不允许移动
     if (layer && (layer.isBackground || layer.isFixed)) {
-      console.warn(layer.isBackground ? "背景层不可移动" : "固定层不可移动");
+      console.warn(
+        layer.isBackground ? $t("背景层不可移动") : $t("固定层不可移动")
+      );
       return false;
     }
 
-    // 直接创建和执行命令
-    const command = new MoveLayerCommand({
-      canvas: this.canvas,
-      layers: this.layers,
-      layerId: layerId,
-      direction: direction,
-    });
+    let command;
+
+    // 根据方向选择相应的命令
+    switch (direction) {
+      case "toTop":
+        command = new MoveLayerToTopCommand({
+          canvas: this.canvas,
+          layers: this.layers,
+          layerId: layerId,
+          layerSort: this.layerSort,
+        });
+        break;
+      case "toBottom":
+        command = new MoveLayerToBottomCommand({
+          canvas: this.canvas,
+          layers: this.layers,
+          layerId: layerId,
+          layerSort: this.layerSort,
+        });
+        break;
+      case "up":
+      case "down":
+      default:
+        command = new MoveLayerCommand({
+          canvas: this.canvas,
+          layers: this.layers,
+          layerId: layerId,
+          layerSort: this.layerSort,
+          direction: direction,
+        });
+        break;
+    }
 
     // 执行命令
     if (this.commandManager) {
-      this.commandManager.execute(command);
+      const result = this.commandManager.execute(command);
+      if (result) {
+        console.log(`✅ 图层移动成功: ${direction}`);
+      }
+      return result;
     } else {
-      command.execute();
+      const result = command.execute();
+      if (result) {
+        // 更新画布渲染顺序
+        console.log(`✅ 图层移动成功: ${direction}`);
+      }
+      return result;
     }
-
-    // 更新画布渲染顺序
-    this._rearrangeObjects();
-
-    return true;
   }
 
   /**
@@ -854,6 +902,7 @@ export class LayerManager {
       canvas: this.canvas,
       layers: this.layers,
       layerId: layerId,
+      layerManager: this,
     });
 
     // 执行命令
@@ -1000,7 +1049,7 @@ export class LayerManager {
    * @param {string} groupName 组名称，可选
    * @returns {string} 新组图层ID
    */
-  groupLayers(layerIds, groupName = null) {
+  async groupLayers(layerIds, groupName = null) {
     // 检查参数
     if (!layerIds || !Array.isArray(layerIds) || layerIds.length < 2) {
       console.error("组合图层至少需要两个图层ID");
@@ -1011,18 +1060,17 @@ export class LayerManager {
     const command = new GroupLayersCommand({
       canvas: this.canvas,
       layers: this.layers,
+      activeLayerId: this.activeLayerId,
       layerIds: layerIds,
       groupName: groupName,
     });
 
     // 执行命令
     if (this.commandManager) {
-      this.commandManager.execute(command);
+      return await this.commandManager.execute(command);
     } else {
-      command.execute();
+      return await command.execute();
     }
-
-    return command.groupId;
   }
 
   /**
@@ -1030,7 +1078,7 @@ export class LayerManager {
    * @param {string} groupId 要解组的组图层ID
    * @returns {Array<string>} 解组后的图层ID数组
    */
-  ungroupLayers(groupId) {
+  async ungroupLayers(groupId) {
     // 查找组图层
     const groupLayer = this.layers.value.find((l) => l.id === groupId);
     if (
@@ -1047,16 +1095,15 @@ export class LayerManager {
       canvas: this.canvas,
       layers: this.layers,
       groupId: groupId,
+      activeLayerId: this.activeLayerId,
     });
 
     // 执行命令
     if (this.commandManager) {
-      this.commandManager.execute(command);
+      return await this.commandManager.execute(command);
     } else {
-      command.execute();
+      return await command.execute();
     }
-
-    return command.childLayerIds;
   }
 
   /**
@@ -1075,7 +1122,7 @@ export class LayerManager {
       isRedGreenMode: this.isInRedGreenMode(), // 传递红绿图模式状态
     });
 
-    command.undoable = !!options.undoable; // 设置为可撤销
+    command.undoable = options.undoable; // 设置为可撤销
     // 执行命令
     if (this.commandManager) {
       this.commandManager.execute(command);
@@ -1110,7 +1157,7 @@ export class LayerManager {
         isRedGreenMode: this.isInRedGreenMode(), // 传递红绿图模式状态
       });
 
-      command.undoable = !!options.undoable; // 设置为可撤销
+      command.undoable = false; // 设置为可撤销
       // 执行命令
       if (this.commandManager) {
         this.commandManager.execute(command);
@@ -1156,10 +1203,19 @@ export class LayerManager {
    * @private
    */
   _rearrangeObjects() {
+    if (this.layerSort) {
+      // 使用LayerSort的高级排序
+      this.layerSort.rearrangeObjects();
+      return;
+    }
+
+    // 传统排序逻辑（保持原有逻辑作为备用）
     if (!this.canvas) return;
 
     // 获取画布上的所有对象
-    const canvasObjects = [...this.canvas.getObjects()];
+    const canvasObjects = [
+      ...this.canvas.getObjects(["id", "layerId", "layerName"]),
+    ];
 
     // 清空画布
     this.canvas.clear();
@@ -1172,18 +1228,30 @@ export class LayerManager {
       // 跳过不可见图层
       if (!layer.visible) continue;
 
-      if (layer.isBackground) {
-        // 背景图层特殊处理
-        if (layer.fabricObject) {
-          const bgObject = canvasObjects.find(
-            (obj) => obj.id === layer.fabricObject.id
-          );
-          if (bgObject) {
-            this.canvas.add(bgObject);
-          } else if (layer.fabricObject) {
-            this.canvas.add(layer.fabricObject);
-          }
+      if (layer.isBackground && layer.fabricObject) {
+        // 背景图层
+        const originalObj = canvasObjects.find(
+          (o) => o.id === layer.fabricObject.id
+        );
+        if (originalObj) {
+          this.canvas.add(originalObj);
+        } else {
+          this.canvas.add(layer.fabricObject);
         }
+      } else if (
+        layer.isFixed &&
+        layer.fabricObjects &&
+        layer.fabricObjects.length > 0
+      ) {
+        // 固定图层
+        layer.fabricObjects.forEach((obj) => {
+          const originalObj = canvasObjects.find((o) => o.id === obj.id);
+          if (originalObj) {
+            this.canvas.add(originalObj);
+          } else {
+            this.canvas.add(obj);
+          }
+        });
       } else if (
         Array.isArray(layer.fabricObjects) &&
         layer.fabricObjects.length > 0
@@ -1199,12 +1267,6 @@ export class LayerManager {
         });
       }
     }
-
-    // 更新对象交互性
-    this.updateLayersObjectsInteractivity();
-
-    // 渲染画布
-    this.canvas.renderAll();
   }
 
   /**
@@ -1577,28 +1639,51 @@ export class LayerManager {
       return null;
     }
 
-    // 使用命令管理器执行粘贴命令
-    if (this.commandManager) {
-      return this.commandManager.executeByName("PasteLayer", {
-        canvas: this.canvas,
-        layers: this.layers,
-        activeLayerId: this.activeLayerId,
-        clipboardData: this.clipboardData,
-        layerManager: this, // 传递LayerManager实例
-      });
-    } else {
-      // 创建粘贴图层命令
-      const command = new PasteLayerCommand({
-        canvas: this.canvas,
-        layers: this.layers,
-        activeLayerId: this.activeLayerId,
-        clipboardData: this.clipboardData,
-        layerManager: this, // 传递LayerManager实例
-      });
+    // 创建粘贴图层命令
+    const command = new PasteLayerCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      activeLayerId: this.activeLayerId,
+      clipboardData: this.clipboardData,
+      layerManager: this, // 传递LayerManager实例
+    });
 
-      // 执行命令
-      return command.execute();
-    }
+    // 执行命令
+    return command.execute();
+  }
+
+  /**
+   * 选择所有图层
+   */
+  selectAll() {
+    // 直接创建和执行命令
+    const command = new SelectAllLayersCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerManager: this,
+      activeLayerId: this.activeLayerId,
+      editorMode: this.editorMode,
+    });
+    command.undoable = false; // 设置为不可撤销
+    // 执行命令
+    command?.execute?.();
+  }
+
+  /**
+   * 清除当前选择
+   */
+  clearSelection() {
+    // 直接创建和执行命令
+    const command = new ClearSelectionCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerManager: this,
+      activeLayerId: this.activeLayerId,
+      editorMode: this.editorMode,
+    });
+    command.undoable = false; // 设置为不可撤销
+    // 执行命令
+    command?.execute?.();
   }
 
   /**
@@ -1733,6 +1818,7 @@ export class LayerManager {
     const command = new LayerObjectsToGroupCommand({
       canvas: this.canvas,
       layers: this.layers,
+      layerManager: this,
       fabricImage,
       activeLayer,
     });
@@ -2041,7 +2127,7 @@ export class LayerManager {
    * @param {string} layerId 图层ID
    * @returns {boolean} 是否排序成功
    */
-  reorderLayers(oldIndex, newIndex, layerId) {
+  async reorderLayers(oldIndex, newIndex, layerId) {
     // 检查索引有效性
     if (
       oldIndex < 0 ||
@@ -2085,13 +2171,14 @@ export class LayerManager {
       newIndex: newIndex,
       layerId: layerId,
       canvas: this.canvas,
+      layerSort: this.layerSort,
     });
 
     // 执行命令
     if (this.commandManager) {
-      return this.commandManager.execute(command);
+      return await this.commandManager.execute(command);
     } else {
-      return command.execute();
+      return await command.execute();
     }
   }
 
@@ -2104,49 +2191,42 @@ export class LayerManager {
    * @returns {boolean} 是否排序成功
    */
   reorderChildLayers(parentId, oldIndex, newIndex, layerId) {
-    // 检查父图层是否存在
-    const parentLayer = this.getLayerById(parentId);
-    if (!parentLayer) {
-      console.warn(`父图层 ${parentId} 不存在`);
-      return false;
-    }
-
-    // 获取所有子图层
-    const childLayers = this.layers.value.filter(
-      (layer) => layer.parentId === parentId
+    return this.layerSort?.reorderChildLayers(
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId
     );
+  }
 
-    // 检查索引有效性
-    if (
-      oldIndex < 0 ||
-      newIndex < 0 ||
-      oldIndex >= childLayers.length ||
-      newIndex >= childLayers.length
-    ) {
-      console.warn("子图层排序索引无效");
-      return false;
-    }
+  /**
+   * 根据图层ID和父图层ID查找子图层
+   * @param {string} layerId 子图层ID
+   * @param {string} parentId 父图层ID
+   * @returns {Object|null} 子图层对象或null
+   */
+  findChildLayer(layerId, parentId) {
+    const parentLayer = this.getLayerById(parentId);
+    if (!parentLayer || !parentLayer.children) return null;
 
-    // 检查是否是同一位置
-    if (oldIndex === newIndex) {
-      return true;
-    }
+    return parentLayer.children.find((child) => child.id === layerId) || null;
+  }
 
-    // 验证图层ID
-    const layer = childLayers[oldIndex];
-    if (!layer || layer.id !== layerId) {
-      console.warn("子图层ID与索引不匹配");
-      return false;
-    }
-
-    // 创建并执行子图层拖拽排序命令
-    const command = new ReorderChildLayersCommand({
-      layers: this.layers,
-      parentId: parentId,
-      oldIndex: oldIndex,
-      newIndex: newIndex,
-      layerId: layerId,
+  /**
+   * 删除子图层
+   * @param {string} layerId 子图层ID
+   * @param {string} parentId 父图层ID
+   * @returns {boolean} 是否删除成功
+   */
+  removeChildLayer(layerId, parentId) {
+    // 直接创建和执行命令
+    const command = new RemoveChildLayerCommand({
       canvas: this.canvas,
+      layers: this.layers,
+      layerId: layerId,
+      parentId: parentId,
+      activeLayerId: this.activeLayerId,
+      layerManager: this,
     });
 
     // 执行命令
@@ -2157,6 +2237,93 @@ export class LayerManager {
     }
   }
 
+  /**
+   * 重命名子图层
+   * @param {string} layerId 子图层ID
+   * @param {string} parentId 父图层ID
+   * @param {string} newName 新名称
+   */
+  renameChildLayer(layerId, parentId, newName) {
+    // 直接创建和执行命令
+    const command = new RenameChildLayerCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: layerId,
+      parentId: parentId,
+      newName: newName,
+    });
+
+    // 执行命令
+    if (this.commandManager) {
+      this.commandManager.execute(command);
+    } else {
+      command.execute();
+    }
+  }
+
+  /**
+   * 切换子图层锁定状态
+   * @param {string} layerId 子图层ID
+   * @param {string} parentId 父图层ID
+   * @returns {boolean} 更新后的锁定状态
+   */
+  toggleChildLayerLock(layerId, parentId) {
+    // 直接创建和执行命令
+    const command = new ChildLayerLockCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: layerId,
+      parentId: parentId,
+      layerManager: this,
+    });
+
+    // 执行命令
+    if (this.commandManager) {
+      this.commandManager.execute(command);
+    } else {
+      command.execute();
+    }
+
+    // 更新对象交互性
+    this.updateLayersObjectsInteractivity();
+
+    // 获取当前锁定状态
+    const childLayer = this.findChildLayer(layerId, parentId);
+    return childLayer ? childLayer.locked : false;
+  }
+
+  /**
+   * 切换子图层可见性
+   * @param {string} layerId 子图层ID
+   * @param {string} parentId 父图层ID
+   * @returns {boolean} 更新后的可见性状态
+   */
+  toggleChildLayerVisibility(layerId, parentId) {
+    // 直接创建和执行命令
+    const command = new ToggleChildLayerVisibilityCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: layerId,
+      parentId: parentId,
+    });
+
+    // 执行命令
+    if (this.commandManager) {
+      this.commandManager.execute(command);
+    } else {
+      command.execute();
+    }
+
+    // 更新对象交互性
+    this.updateLayersObjectsInteractivity();
+
+    // 获取当前可见性
+    const childLayer = this.findChildLayer(layerId, parentId);
+    return childLayer ? childLayer.visible : false;
+  }
+
+  // ==================== 红绿图模式相关操作 ====================
+
   // 设置红绿图模式管理器
   setRedGreenModeManager(redGreenModeManager) {
     this.redGreenModeManager = redGreenModeManager;
@@ -2195,4 +2362,503 @@ export class LayerManager {
     console.warn("红绿图模式下不支持删除图层");
     return false;
   }
+
+  // ==================== 高级图层排序功能 ====================
+
+  /**
+   * 使用LayerSort工具重新排列画布对象
+   * 这是页面操作排序图层后重建画布顺序的核心方法
+   * @param {boolean} async 是否使用异步处理，默认根据对象数量自动决定
+   * @returns {Promise<void>|void} 如果使用异步则返回Promise
+   */
+  rearrangeCanvasObjects(async = null) {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化，使用传统排序方法");
+      this._rearrangeObjects();
+      return;
+    }
+
+    // 检查是否需要异步处理
+    const objectsCount = this.canvas?.getObjects()?.length || 0;
+    const layersCount = this.layers?.value?.length || 0;
+
+    const shouldUseAsync =
+      async !== null
+        ? async
+        : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
+
+    if (shouldUseAsync) {
+      console.log(
+        `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
+      );
+      return this.layerSort.rearrangeObjectsAsync();
+    } else {
+      console.log(
+        `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
+      );
+      this.layerSort.rearrangeObjects();
+    }
+  }
+
+  /**
+   * 智能排序图层
+   * 根据对象类型和位置自动调整图层顺序
+   * @param {Array<string>} targetLayerIds 要排序的图层ID数组，null表示排序所有普通图层
+   * @returns {boolean} 是否排序成功
+   */
+  smartSortLayers(targetLayerIds = null) {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化");
+      return false;
+    }
+
+    const result = this.layerSort.smartSort(targetLayerIds);
+
+    if (result) {
+      console.log("智能排序完成");
+      // 更新对象交互性
+      this.updateLayersObjectsInteractivity();
+    }
+
+    return result;
+  }
+
+  /**
+   * 优化图层结构
+   * 清理空图层、合并相邻相似图层等
+   * @returns {Object} 优化结果统计
+   */
+  optimizeLayerStructure() {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化，使用基础清理方法");
+      return {
+        removedEmptyLayers: this.cleanupEmptyLayers().length,
+        mergedLayers: 0,
+        reorderedLayers: 0,
+      };
+    }
+
+    const stats = this.layerSort.optimizeLayerStructure();
+
+    if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) {
+      console.log(
+        `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层`
+      );
+      // 更新对象交互性
+      this.updateLayersObjectsInteractivity();
+    }
+
+    return stats;
+  }
+
+  /**
+   * 验证画布对象顺序是否正确
+   * @returns {boolean} 顺序是否正确
+   */
+  validateObjectOrder() {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化");
+      return true; // 无法验证，假设正确
+    }
+
+    const isValid = this.layerSort.validateObjectOrder();
+
+    if (!isValid) {
+      console.warn("画布对象顺序不正确，建议重新排列");
+    }
+
+    return isValid;
+  }
+  canMoveToTop(layerId) {
+    // 检查图层所在索引是否为0
+    const layerIndex = this.getLayerIndex(layerId);
+    if (layerIndex === -1) {
+      console.warn(`图层 ${layerId} 不存在`);
+      return false;
+    }
+    return layerIndex > 0; // 如果索引大于0，则可以移动到顶部
+  }
+
+  canMoveToBottom(layerId) {
+    // 检查图层所在索引是否为0
+    const layerIndex = this.getLayerIndex(layerId);
+    if (layerIndex === -1) {
+      console.warn(`图层 ${layerId} 不存在`);
+      return false;
+    }
+
+    const { parent } = findLayerRecursively(this.layers.value, layerId);
+    if (parent?.children.length) {
+      // 如果是子图层，检查是否有兄弟图层
+      return layerIndex < parent.children.length - 1; // 如果不是最后一个子图层，则可以移动到底部
+    }
+    return layerIndex < this.layers?.value?.length - 3; // 如果索引小于长度 - 3，则可以移动到底部
+  }
+  /**
+   * 移动图层到指定位置
+   * 使用LayerSort的高级移动功能
+   * @param {string} layerId 要移动的图层ID
+   * @param {number} newIndex 新位置索引
+   * @returns {boolean} 是否移动成功
+   */
+  moveLayerToIndex({ parentId, oldIndex, newIndex, layerId }) {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化，使用基础移动方法");
+      return this.moveLayer(
+        layerId,
+        newIndex > this.getLayerIndex(layerId) ? "down" : "up"
+      );
+    }
+
+    const result = this.layerSort.moveLayerToIndex({
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId,
+    });
+
+    if (result) {
+      console.log(
+        `图层 ${layerId}   - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
+      );
+      // 更新对象交互性
+      // this.updateLayersObjectsInteractivity();
+    }
+
+    return result;
+  }
+
+  /**
+   * 获取图层的有效移动范围
+   * @param {string} layerId 图层ID
+   * @returns {Object} 包含最小和最大索引的对象
+   */
+  getLayerMoveRange(layerId) {
+    if (!this.layerSort) {
+      // 基础实现：只能在普通图层范围内移动
+      const normalLayers = this.layers.value
+        .map((layer, index) => ({ layer, index }))
+        .filter((item) => !item.layer.isBackground && !item.layer.isFixed);
+
+      if (normalLayers.length === 0) {
+        return { minIndex: -1, maxIndex: -1 };
+      }
+
+      return {
+        minIndex: normalLayers[0].index,
+        maxIndex: normalLayers[normalLayers.length - 1].index,
+      };
+    }
+
+    return this.layerSort.getLayerMoveRange(layerId);
+  }
+
+  /**
+   * 获取图层在数组中的索引
+   * @param {string} layerId 图层ID
+   * @returns {number} 图层索引，-1表示未找到
+   */
+  getLayerIndex(layerId) {
+    if (!layerId) {
+      console.warn("未提供图层ID");
+      return -1;
+    }
+
+    let layerIndex = this.layers.value.findIndex(
+      (layer) => layer.id === layerId
+    );
+    if (layerIndex >= 0) return layerIndex;
+    // 如果未找到，尝试在子图层中查找
+    const { parent } = findLayerRecursively(this.layers.value, layerId);
+    parent?.children?.findIndex((child) => {
+      if (child.id === layerId) {
+        layerIndex = parent.children.indexOf(child);
+        return true; // 找到后停止查找
+      }
+      return false;
+    });
+    return layerIndex;
+  }
+
+  /**
+   * 高级拖拽排序图层
+   * 使用LayerSort的专业排序功能
+   * @param {number} oldIndex 原索引
+   * @param {number} newIndex 新索引
+   * @param {string} layerId 图层ID
+   * @returns {boolean} 是否排序成功
+   */
+  advancedReorderLayers(oldIndex, newIndex, layerId) {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化，使用基础排序方法");
+      return this.reorderLayers(oldIndex, newIndex, layerId);
+    }
+
+    const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId);
+
+    if (result) {
+      console.log(
+        `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
+      );
+      // 更新对象交互性
+      this.updateLayersObjectsInteractivity();
+    }
+
+    return result;
+  }
+
+  /**
+   * 高级拖拽排序子图层
+   * @param {string} parentId 父图层ID
+   * @param {number} oldIndex 原索引
+   * @param {number} newIndex 新索引
+   * @param {string} layerId 子图层ID
+   * @returns {boolean} 是否排序成功
+   */
+  advancedReorderChildLayers(parentId, oldIndex, newIndex, layerId) {
+    const result = this.reorderChildLayers(
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId
+    );
+
+    if (result) {
+      console.log(
+        `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}`
+      );
+      // 重新排列画布对象
+      this.rearrangeCanvasObjects();
+    }
+
+    return result;
+  }
+
+  /**
+   * 使用LayerSort工具进行图层排序
+   * 这会同时更新图层数组和画布对象顺序
+   */
+  sortLayersWithTool() {
+    if (!this.layerSort) {
+      console.warn("图层排序工具未初始化，使用基础排序方法");
+      this.sortLayers();
+      return;
+    }
+
+    // 使用LayerSort工具排序
+    this.layers.value = this.layerSort.sortLayers();
+
+    // 重新排列画布对象
+    this.rearrangeCanvasObjects();
+
+    console.log("使用LayerSort工具完成图层排序");
+  }
+
+  /**
+   * 强制重建画布对象顺序
+   * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
+   */
+  forceRebuildCanvasOrder() {
+    console.log("强制重建画布对象顺序");
+
+    if (this.layerSort) {
+      // 使用LayerSort的高级排序
+      this.rearrangeCanvasObjects();
+    } else {
+      // 使用传统方法
+      this._rearrangeObjects();
+    }
+
+    // 验证排序结果
+    const isValid = this.validateObjectOrder();
+    if (!isValid) {
+      console.warn("画布对象顺序验证失败，可能需要手动调整");
+    }
+
+    // 更新对象交互性
+    this.updateLayersObjectsInteractivity();
+  }
+
+  /**
+   * 批量重新排序多个图层
+   * @param {Array} reorderOperations 排序操作数组 [{layerId, oldIndex, newIndex}]
+   * @returns {boolean} 是否全部操作成功
+   */
+  batchReorderLayers(reorderOperations) {
+    if (!reorderOperations || !Array.isArray(reorderOperations)) {
+      console.error("无效的批量排序操作");
+      return false;
+    }
+
+    console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`);
+
+    let allSuccessful = true;
+
+    // 暂停渲染以提高性能
+    const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
+    this.canvas.renderOnAddRemove = false;
+
+    try {
+      // 按照操作顺序执行
+      for (const operation of reorderOperations) {
+        const { layerId, oldIndex, newIndex } = operation;
+
+        const success = this.layerSort
+          ? this.layerSort.reorderLayers(oldIndex, newIndex, layerId)
+          : this.reorderLayers(oldIndex, newIndex, layerId);
+
+        if (!success) {
+          console.warn(`图层 ${layerId} 排序失败`);
+          allSuccessful = false;
+        }
+      }
+
+      // 重新排列画布对象
+      this.rearrangeCanvasObjects();
+    } finally {
+      // 恢复渲染
+      this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
+      this.canvas.renderAll();
+    }
+
+    if (allSuccessful) {
+      console.log("批量图层排序完成");
+    } else {
+      console.warn("批量图层排序部分失败");
+    }
+
+    return allSuccessful;
+  }
+
+  /**
+   * 合并组图层
+   * @param {string} groupId 组图层ID
+   * @returns {Array<string>} 所有子图层成组的图层ID
+   */
+  async mergeGroupLayers(groupId) {
+    // 查找组图层
+    const groupLayer = this.layers.value.find((l) => l.id === groupId);
+    if (
+      !groupLayer ||
+      !groupLayer.children ||
+      groupLayer.children.length === 0
+    ) {
+      console.warn($t("找不到有效的组图层或组图层为空"));
+      return [];
+    }
+
+    // 直接创建和执行解组命令
+    const command = new MergeGroupLayerCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: groupId,
+      activeLayerId: this.activeLayerId,
+      layerManager: this,
+    });
+
+    // 执行命令
+    if (this.commandManager) {
+      const result = await this.commandManager.execute(command);
+      result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
+      return result;
+    } else {
+      const result = await command.execute();
+      result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
+      return result || [];
+    }
+  }
+
+  /**
+   * 栅格化图层
+   * @param {string} layerId 图层ID，默认使用当前活动图层
+   * @returns {Promise<boolean>} 是否栅格化成功
+   */
+  async rasterizeLayer(layerId = null) {
+    const targetLayerId = layerId || this.activeLayerId.value;
+
+    if (!targetLayerId) {
+      console.warn($t("没有指定要栅格化的图层"));
+      return false;
+    }
+
+    // 查找目标图层
+    const targetLayer = this.getLayerById(targetLayerId);
+    if (!targetLayer) {
+      console.error($t("图层不存在", { layerId: targetLayerId }));
+      return false;
+    }
+
+    // 不允许栅格化背景图层和固定图层
+    if (targetLayer.isBackground || targetLayer.isFixed) {
+      console.warn($t("背景图层和固定图层不能栅格化"));
+      return false;
+    }
+
+    // 直接创建和执行栅格化命令
+    const command = new RasterizeLayerCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: targetLayerId,
+      activeLayerId: this.activeLayerId,
+      layerManager: this,
+    });
+
+    // 执行命令
+    if (this.commandManager) {
+      const result = await this.commandManager.execute(command);
+      if (result) {
+        console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
+      }
+      return result;
+    } else {
+      const result = await command.execute();
+      if (result) {
+        console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
+      }
+      return result;
+    }
+  }
+
+  /**
+   * 检查图层是否可以栅格化
+   * @param {string} layerId 图层ID
+   * @returns {boolean} 是否可以栅格化
+   */
+  canRasterizeLayer(layerId) {
+    const layer = this.getLayerById(layerId);
+    if (!layer) return false;
+
+    // 不允许栅格化背景图层和固定图层
+    if (layer.isBackground || layer.isFixed) {
+      return false;
+    }
+
+    // 检查图层是否有内容可以栅格化
+    if (layer.type === "group") {
+      // 组图层：检查是否有子图层且子图层有内容
+      return (
+        layer.children &&
+        layer.children.length > 0 &&
+        layer.children.some(
+          (child) => child.fabricObjects && child.fabricObjects.length > 0
+        )
+      );
+    } else {
+      // 普通图层：检查是否有对象
+      return layer.fabricObjects && layer.fabricObjects.length > 0;
+    }
+  }
+
+  /**
+   * 更新图层缩略图
+   * @param {string} layerId 图层ID
+   * @private
+   */
+  _updateLayerThumbnail(layerId) {
+    if (this.canvas && this.canvas.thumbnailManager) {
+      setTimeout(() => {
+        this.canvas.thumbnailManager.generateLayerThumbnail(layerId);
+      }, 100);
+    }
+  }
 }
diff --git a/src/component/Canvas/CanvasEditor/managers/LiquifyReferenceManager.js b/src/component/Canvas/CanvasEditor/managers/LiquifyReferenceManager.js
new file mode 100644
index 00000000..da2077fb
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/LiquifyReferenceManager.js
@@ -0,0 +1,441 @@
+/**
+ * 液化对象引用管理器
+ * 专门处理液化操作中的对象引用管理，避免引用丢失问题
+ */
+export class LiquifyReferenceManager {
+  constructor() {
+    // 对象引用池
+    this.objectRefs = new Map();
+    // 状态快照池
+    this.stateSnapshots = new Map();
+    // ImageData缓存池
+    this.imageDataCache = new Map();
+    // 事件监听器备份
+    this.eventListeners = new Map();
+  }
+
+  /**
+   * 注册对象到引用管理器
+   * @param {Object} fabricObject Fabric对象
+   * @param {String} objectId 对象唯一ID
+   * @returns {String} 引用ID
+   */
+  registerObject(fabricObject, objectId) {
+    const refId = objectId || this._generateRefId();
+
+    // 保存对象引用
+    this.objectRefs.set(refId, fabricObject);
+
+    // 备份事件监听器
+    this._backupEventListeners(refId, fabricObject);
+
+    // 创建初始状态快照
+    this._createStateSnapshot(refId, fabricObject);
+
+    console.log(`📝 对象已注册到引用管理器: ${refId}`);
+    return refId;
+  }
+
+  /**
+   * 获取对象引用
+   * @param {String} refId 引用ID
+   * @returns {Object|null} Fabric对象
+   */
+  getObjectRef(refId) {
+    return this.objectRefs.get(refId) || null;
+  }
+
+  /**
+   * 更新对象的图像数据，保持引用不变
+   * @param {String} refId 引用ID
+   * @param {ImageData} newImageData 新的图像数据
+   * @returns {Promise<Boolean>} 更新结果
+   */
+  async updateObjectImageData(refId, newImageData) {
+    const fabricObject = this.objectRefs.get(refId);
+    if (!fabricObject || !newImageData) {
+      throw new Error(`无法更新对象图像数据: 对象不存在或数据无效 (${refId})`);
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        // 创建临时canvas
+        const tempCanvas = document.createElement("canvas");
+        tempCanvas.width = newImageData.width;
+        tempCanvas.height = newImageData.height;
+        const tempCtx = tempCanvas.getContext("2d");
+        tempCtx.putImageData(newImageData, 0, 0);
+
+        // 创建新的图像元素
+        const img = new Image();
+        img.onload = () => {
+          try {
+            // 保存当前状态
+            const currentState = this._captureObjectState(fabricObject);
+
+            // 更新图像源
+            if (fabricObject.setElement) {
+              fabricObject.setElement(img);
+            } else if (fabricObject._element) {
+              fabricObject._element = img;
+              fabricObject._originalElement = img;
+            }
+
+            // 恢复非图像属性
+            this._restoreObjectState(fabricObject, currentState);
+
+            // 标记需要重新渲染
+            fabricObject.dirty = true;
+            fabricObject.setCoords();
+
+            // 更新缓存
+            this._updateImageDataCache(refId, newImageData);
+
+            console.log(`✅ 对象图像数据更新成功: ${refId}`);
+            resolve(true);
+          } catch (error) {
+            console.error("更新对象状态失败:", error);
+            reject(error);
+          }
+        };
+
+        img.onerror = () => {
+          reject(new Error("加载图像数据失败"));
+        };
+
+        img.src = tempCanvas.toDataURL();
+      } catch (error) {
+        console.error("创建临时canvas失败:", error);
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * 创建对象状态快照
+   * @param {String} refId 引用ID
+   * @param {String} snapshotId 快照ID
+   * @returns {String} 快照ID
+   */
+  createSnapshot(refId, snapshotId = null) {
+    const fabricObject = this.objectRefs.get(refId);
+    if (!fabricObject) {
+      throw new Error(`无法创建快照: 对象不存在 (${refId})`);
+    }
+
+    const snapId = snapshotId || `${refId}_${Date.now()}`;
+    const snapshot = this._createStateSnapshot(snapId, fabricObject);
+
+    console.log(`📸 已创建对象快照: ${snapId}`);
+    return snapId;
+  }
+
+  /**
+   * 恢复对象到指定快照状态
+   * @param {String} refId 引用ID
+   * @param {String} snapshotId 快照ID
+   * @returns {Promise<Boolean>} 恢复结果
+   */
+  async restoreFromSnapshot(refId, snapshotId) {
+    const fabricObject = this.objectRefs.get(refId);
+    const snapshot = this.stateSnapshots.get(snapshotId);
+
+    if (!fabricObject || !snapshot) {
+      throw new Error(
+        `无法恢复快照: 对象或快照不存在 (${refId}, ${snapshotId})`
+      );
+    }
+
+    // 恢复图像数据
+    if (snapshot.imageData) {
+      await this.updateObjectImageData(refId, snapshot.imageData);
+    }
+
+    // 恢复对象属性
+    if (snapshot.properties) {
+      this._restoreObjectState(fabricObject, snapshot.properties);
+    }
+
+    // 恢复事件监听器
+    if (snapshot.eventListeners) {
+      this._restoreEventListeners(refId, fabricObject, snapshot.eventListeners);
+    }
+
+    console.log(`🔄 对象快照恢复成功: ${refId} -> ${snapshotId}`);
+    return true;
+  }
+
+  /**
+   * 批量更新多个对象
+   * @param {Array} updates 更新列表 [{refId, imageData}, ...]
+   * @returns {Promise<Array>} 更新结果
+   */
+  async batchUpdate(updates) {
+    const results = [];
+
+    for (const update of updates) {
+      try {
+        const result = await this.updateObjectImageData(
+          update.refId,
+          update.imageData
+        );
+        results.push({ refId: update.refId, success: true, result });
+      } catch (error) {
+        console.error(`批量更新失败 ${update.refId}:`, error);
+        results.push({
+          refId: update.refId,
+          success: false,
+          error: error.message,
+        });
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * 清理不再使用的引用
+   * @param {String} refId 引用ID
+   */
+  cleanup(refId) {
+    this.objectRefs.delete(refId);
+    this.stateSnapshots.delete(refId);
+    this.imageDataCache.delete(refId);
+    this.eventListeners.delete(refId);
+
+    console.log(`🗑️ 已清理对象引用: ${refId}`);
+  }
+
+  /**
+   * 清理所有引用
+   */
+  cleanupAll() {
+    this.objectRefs.clear();
+    this.stateSnapshots.clear();
+    this.imageDataCache.clear();
+    this.eventListeners.clear();
+
+    console.log("🗑️ 已清理所有对象引用");
+  }
+
+  /**
+   * 获取内存使用统计
+   * @returns {Object} 统计信息
+   */
+  getMemoryStats() {
+    return {
+      objectRefs: this.objectRefs.size,
+      stateSnapshots: this.stateSnapshots.size,
+      imageDataCache: this.imageDataCache.size,
+      eventListeners: this.eventListeners.size,
+      totalMemoryUsage: this._calculateMemoryUsage(),
+    };
+  }
+
+  // 私有方法
+
+  /**
+   * 生成引用ID
+   * @returns {String} 引用ID
+   * @private
+   */
+  _generateRefId() {
+    return `ref_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  /**
+   * 备份事件监听器
+   * @param {String} refId 引用ID
+   * @param {Object} fabricObject Fabric对象
+   * @private
+   */
+  _backupEventListeners(refId, fabricObject) {
+    const listeners = {};
+
+    // 备份常见的事件监听器
+    const eventTypes = [
+      "mousedown",
+      "mouseup",
+      "mousemove",
+      "mouseout",
+      "mouseover",
+    ];
+
+    eventTypes.forEach((eventType) => {
+      if (
+        fabricObject.__eventListeners &&
+        fabricObject.__eventListeners[eventType]
+      ) {
+        listeners[eventType] = [...fabricObject.__eventListeners[eventType]];
+      }
+    });
+
+    this.eventListeners.set(refId, listeners);
+  }
+
+  /**
+   * 恢复事件监听器
+   * @param {String} refId 引用ID
+   * @param {Object} fabricObject Fabric对象
+   * @param {Object} listeners 监听器备份
+   * @private
+   */
+  _restoreEventListeners(refId, fabricObject, listeners) {
+    Object.keys(listeners).forEach((eventType) => {
+      if (listeners[eventType] && listeners[eventType].length > 0) {
+        listeners[eventType].forEach((listener) => {
+          fabricObject.on(eventType, listener);
+        });
+      }
+    });
+  }
+
+  /**
+   * 创建状态快照
+   * @param {String} snapId 快照ID
+   * @param {Object} fabricObject Fabric对象
+   * @returns {Object} 快照数据
+   * @private
+   */
+  _createStateSnapshot(snapId, fabricObject) {
+    const snapshot = {
+      timestamp: Date.now(),
+      properties: this._captureObjectState(fabricObject),
+      imageData: this._captureImageData(fabricObject),
+      eventListeners: this.eventListeners.get(snapId.split("_")[0]) || {},
+    };
+
+    this.stateSnapshots.set(snapId, snapshot);
+    return snapshot;
+  }
+
+  /**
+   * 捕获对象状态
+   * @param {Object} fabricObject Fabric对象
+   * @returns {Object} 对象状态
+   * @private
+   */
+  _captureObjectState(fabricObject) {
+    return {
+      left: fabricObject.left,
+      top: fabricObject.top,
+      scaleX: fabricObject.scaleX,
+      scaleY: fabricObject.scaleY,
+      angle: fabricObject.angle,
+      flipX: fabricObject.flipX,
+      flipY: fabricObject.flipY,
+      opacity: fabricObject.opacity,
+      visible: fabricObject.visible,
+      selectable: fabricObject.selectable,
+      evented: fabricObject.evented,
+      id: fabricObject.id,
+      layerId: fabricObject.layerId,
+      customData: fabricObject.customData ? { ...fabricObject.customData } : {},
+      filters: fabricObject.filters ? [...fabricObject.filters] : [],
+    };
+  }
+
+  /**
+   * 恢复对象状态
+   * @param {Object} fabricObject Fabric对象
+   * @param {Object} state 状态数据
+   * @private
+   */
+  _restoreObjectState(fabricObject, state) {
+    if (!state) return;
+
+    fabricObject.set({
+      left: state.left,
+      top: state.top,
+      scaleX: state.scaleX,
+      scaleY: state.scaleY,
+      angle: state.angle,
+      flipX: state.flipX,
+      flipY: state.flipY,
+      opacity: state.opacity,
+      visible: state.visible,
+      selectable: state.selectable,
+      evented: state.evented,
+    });
+
+    // 恢复自定义属性
+    if (state.customData) {
+      fabricObject.customData = { ...state.customData };
+    }
+
+    // 恢复滤镜
+    if (state.filters && state.filters.length > 0) {
+      fabricObject.filters = [...state.filters];
+      fabricObject.applyFilters();
+    }
+  }
+
+  /**
+   * 捕获图像数据
+   * @param {Object} fabricObject Fabric对象
+   * @returns {ImageData|null} 图像数据
+   * @private
+   */
+  _captureImageData(fabricObject) {
+    try {
+      if (
+        fabricObject._element &&
+        fabricObject._element.width &&
+        fabricObject._element.height
+      ) {
+        const canvas = document.createElement("canvas");
+        canvas.width = fabricObject._element.width;
+        canvas.height = fabricObject._element.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(fabricObject._element, 0, 0);
+        return ctx.getImageData(0, 0, canvas.width, canvas.height);
+      }
+    } catch (error) {
+      console.warn("无法捕获图像数据:", error);
+    }
+    return null;
+  }
+
+  /**
+   * 更新图像数据缓存
+   * @param {String} refId 引用ID
+   * @param {ImageData} imageData 图像数据
+   * @private
+   */
+  _updateImageDataCache(refId, imageData) {
+    this.imageDataCache.set(refId, {
+      data: imageData,
+      timestamp: Date.now(),
+      width: imageData.width,
+      height: imageData.height,
+    });
+  }
+
+  /**
+   * 计算内存使用量（近似值）
+   * @returns {Number} 内存使用量（字节）
+   * @private
+   */
+  _calculateMemoryUsage() {
+    let totalBytes = 0;
+
+    // 计算ImageData缓存大小
+    this.imageDataCache.forEach((cache) => {
+      totalBytes += cache.width * cache.height * 4; // RGBA = 4 bytes per pixel
+    });
+
+    return totalBytes;
+  }
+}
+
+/**
+ * 创建单例引用管理器
+ */
+let liquifyReferenceManagerInstance = null;
+
+export function getLiquifyReferenceManager() {
+  if (!liquifyReferenceManagerInstance) {
+    liquifyReferenceManagerInstance = new LiquifyReferenceManager();
+  }
+  return liquifyReferenceManagerInstance;
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/RedGreenModeManager.js b/src/component/Canvas/CanvasEditor/managers/RedGreenModeManager.js
index eaa215b8..155362d5 100644
--- a/src/component/Canvas/CanvasEditor/managers/RedGreenModeManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/RedGreenModeManager.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { createLayer, LayerType, OperationType } from "../utils/layerHelper.js";
 import { BatchInitializeRedGreenModeCommand } from "../commands/RedGreenCommands.js";
 
@@ -35,7 +35,6 @@ export class RedGreenModeManager {
    * @param {String} options.redGreenImageUrl 红绿图URL
    * @param {Number} options.normalLayerOpacity 普通图层透明度 (0-1)
    * @param {Function} options.onImageGenerated 图片生成回调
-   * @param {Boolean} options.useBatchMode 是否使用批量模式 (默认true，减少闪烁)
    * @returns {Promise<boolean>} 是否初始化成功
    */
   async initialize(options = {}) {
@@ -70,13 +69,8 @@ export class RedGreenModeManager {
         throw new Error("缺少必需的图片URL参数");
       }
 
-      // 使用批量模式或传统模式
-      const useBatchMode = options.useBatchMode !== false; // 默认为true
-
-      let initCommand;
-
       // 使用新的批量初始化命令，减少页面闪烁
-      initCommand = new BatchInitializeRedGreenModeCommand({
+      const initCommand = new BatchInitializeRedGreenModeCommand({
         canvas: this.canvas,
         layerManager: this.layerManager,
         toolManager: this.toolManager,
@@ -94,10 +88,11 @@ export class RedGreenModeManager {
         await initCommand.execute();
       }
 
-      this.registerRedGreenMouseUpEvent();
       // 标记为已初始化
       this.isInitialized = true;
 
+      this.registerRedGreenMouseUpEvent();
+
       // 启用图层管理器的红绿图模式
       if (
         this.layerManager &&
@@ -106,6 +101,9 @@ export class RedGreenModeManager {
         this.layerManager.enableRedGreenMode();
       }
 
+      // 更新交互性
+      await this.layerManager?.updateLayersObjectsInteractivity?.();
+
       // 重置工具管理器状态
       // 默认红色笔刷
       if (this.toolManager) {
@@ -116,7 +114,6 @@ export class RedGreenModeManager {
         衣服底图: this.clothingImageUrl,
         红绿图: this.redGreenImageUrl,
         普通图层透明度: `${Math.round(this.normalLayerOpacity * 100)}%`,
-        批量模式: useBatchMode ? "已启用" : "已禁用",
         画布背景: "白色",
       });
 
@@ -131,17 +128,17 @@ export class RedGreenModeManager {
   // 注册鼠标抬起事件
   registerRedGreenMouseUpEvent() {
     this.canvas.on("mouse:up", (event) => {
-      if (!this.isInitialized) {
-        console.warn("红绿图模式未初始化，无法处理鼠标事件");
-        return;
-      }
-
       // 可以在这里添加更多逻辑，比如生成图片或更新状态
-      if (this.onImageGenerated) {
-        const imageData = this.canvasManager.exportImage();
-        console.log("生成红绿图图片数据:", imageData);
-        this.onImageGenerated(imageData);
-      }
+      requestAnimationFrame(async () => {
+        if (!this.isInitialized) {
+          console.warn("红绿图模式未初始化，无法处理鼠标事件");
+          return;
+        }
+        if (this.onImageGenerated) {
+          const imageData = await this.canvasManager.exportImage();
+          this.onImageGenerated(imageData);
+        }
+      });
     });
   }
 
diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
index 5e0f79df..c9fd739b 100644
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -3,11 +3,11 @@ import { BrushManager } from "./brushes/brushManager";
 import { ToolCommand } from "../commands/ToolCommands";
 import { OperationType } from "../utils/layerHelper";
 import CanvasConfig from "../config/canvasConfig";
-//import { fabric } from "fabric-with-all";
-import {
-  InitLiquifyToolCommand,
-  RasterizeForLiquifyCommand,
-} from "../commands/LiquifyCommands";
+import { fabric } from "fabric-with-all";
+import { InitLiquifyToolCommand } from "../commands/LiquifyCommands";
+import { RasterizeLayerCommand } from "../commands/GroupCommands";
+import { message, Modal } from "ant-design-vue";
+import { h } from "vue";
 
 /**
  * 工具管理器
@@ -378,6 +378,8 @@ export class ToolManager {
       previousTool: this.activeTool.value,
     });
 
+    command.undoable = options.undoable !== undefined ? options.undoable : true;
+
     // 执行命令
     this.commandManager.execute(command, { ...options });
   }
@@ -690,18 +692,9 @@ export class ToolManager {
             }
           } else if (checkResult.needsRasterization) {
             // 需要栅格化 (多个对象或组)
-            // 询问用户是否要栅格化
-            if (
-              confirm(
-                checkResult.isGroup
-                  ? "组对象需要先栅格化才能进行液化操作，是否立即栅格化？"
-                  : "当前图层含有多个对象，需要先栅格化才能进行液化操作，是否立即栅格化？"
-              )
-            ) {
-              // 用户确认栅格化，执行栅格化操作
-              this._rasterizeLayerForLiquify(activeLayerId);
-              return; // 栅格化后会重新调用液化功能，这里直接返回
-            }
+            // 使用Modal询问用户是否要栅格化
+            this._showRasterizeConfirmModal(checkResult.isGroup, activeLayerId);
+            return; // 等待用户确认，不继续执行
           }
         }
       }
@@ -716,51 +709,42 @@ export class ToolManager {
   }
 
   /**
-   * 检查并准备液化操作
+   * 显示栅格化确认Modal对话框
+   * @param {Boolean} isGroup 是否为组对象
    * @param {String} layerId 图层ID
    * @private
    */
-  _checkAndPrepareForLiquify(layerId) {
-    // 确保存在液化管理器
-    const liquifyManager = this.canvasManager?.liquifyManager;
-    if (!liquifyManager) {
-      console.error("液化管理器未初始化");
-      return;
-    }
+  _showRasterizeConfirmModal(isGroup, layerId) {
+    const title = "栅格化图层";
+    const content = "需要先栅格化才能进行液化操作，是否立即栅格化？";
 
-    // 检查图层是否适合液化
-    const checkResult = liquifyManager.checkLayerForLiquify(layerId);
-
-    if (checkResult.isEmpty) {
-      // 空图层
-      alert("当前图层为空，无法进行液化操作");
-      return;
-    }
-
-    if (checkResult.isGroup) {
-      // 询问是否栅格化组
-      if (confirm("组对象需要栅格化才能进行液化操作，是否立即栅格化？")) {
+    Modal.confirm({
+      title,
+      content,
+      okText: "确定栅格化",
+      cancelText: "取消",
+      centered: true,
+      icon: h("span", { style: "color: #faad14;" }, "⚠️"),
+      onOk: () => {
+        // 用户确认栅格化，执行栅格化操作
         this._rasterizeLayerForLiquify(layerId);
-      }
-      return;
-    }
-
-    if (checkResult.needsRasterization) {
-      // 询问是否栅格化图层
-      if (
-        confirm(
-          "当前图层含有多个对象，需要先栅格化才能进行液化操作，是否立即栅格化？"
-        )
-      ) {
-        this._rasterizeLayerForLiquify(layerId);
-      }
-      return;
-    }
-
-    // 如果图层可以直接液化(单个图像对象)
-    if (checkResult.valid) {
-      this._startLiquify(layerId);
-    }
+      },
+      onCancel: () => {
+        console.log("用户取消了栅格化操作");
+        // 用户取消，触发液化面板显示事件但不能液化
+        document.dispatchEvent(
+          new CustomEvent("showLiquifyPanel", {
+            detail: {
+              activeLayerId: layerId,
+              layerStatus: { needsRasterization: true, isGroup },
+              canLiquify: false,
+              targetObject: null,
+              originalImageData: null,
+            },
+          })
+        );
+      },
+    });
   }
 
   /**
@@ -772,25 +756,52 @@ export class ToolManager {
     if (!this.commandManager || !this.layerManager) return;
 
     try {
-      // 导入液化相关命令
+      // 显示加载Modal
+      const loadingModal = Modal.info({
+        title: "正在栅格化",
+        content: "正在栅格化图层，请稍候...",
+        okButtonProps: { style: { display: "none" } },
+        centered: true,
+        closable: false,
+        maskClosable: false,
+      });
 
       // 创建栅格化命令
-      const rasterizeCommand = new RasterizeForLiquifyCommand({
+      const rasterizeCommand = new RasterizeLayerCommand({
         canvas: this.canvas,
         layerManager: this.layerManager,
         layerId: layerId,
+        layers: this.layerManager.layers,
+        activeLayerId: this.layerManager.activeLayerId,
       });
 
       // 执行命令
       const result = await this.commandManager.execute(rasterizeCommand);
 
+      // 关闭加载Modal
+      loadingModal.destroy();
+
       if (result) {
         // 栅格化成功，启动液化
+        message.success("图层已成功栅格化，可以进行液化操作");
         this._startLiquify(layerId);
+      } else {
+        // 栅格化失败
+        Modal.error({
+          title: "栅格化失败",
+          content: "栅格化失败，无法进行液化操作",
+          okText: "确定",
+          centered: true,
+        });
       }
     } catch (error) {
       console.error("栅格化图层失败:", error);
-      alert("栅格化失败，无法进行液化操作");
+      Modal.error({
+        title: "栅格化错误",
+        content: `栅格化失败：${error.message}`,
+        okText: "确定",
+        centered: true,
+      });
     }
   }
 
@@ -803,7 +814,12 @@ export class ToolManager {
     // 获取图层信息
     const layer = this.layerManager.getLayerById(layerId);
     if (!layer) {
-      console.error("图层不存在");
+      Modal.error({
+        title: "图层错误",
+        content: "图层不存在",
+        okText: "确定",
+        centered: true,
+      });
       return;
     }
 
@@ -812,14 +828,24 @@ export class ToolManager {
     if (layer.isBackground) {
       // 背景图层使用 fabricObject (单数)
       if (!layer.fabricObject) {
-        console.error("背景图层为空");
+        Modal.warning({
+          title: "背景图层为空",
+          content: "背景图层为空，无法进行液化操作",
+          okText: "确定",
+          centered: true,
+        });
         return;
       }
       targetObject = layer.fabricObject;
     } else {
       // 普通图层使用 fabricObjects (复数)
       if (!layer.fabricObjects || layer.fabricObjects.length === 0) {
-        console.error("图层为空");
+        Modal.warning({
+          title: "图层为空",
+          content: "图层为空，无法进行液化操作",
+          okText: "确定",
+          centered: true,
+        });
         return;
       }
       targetObject = layer.fabricObjects[0];
@@ -828,11 +854,26 @@ export class ToolManager {
     // 确保liquifyManager可用
     const liquifyManager = this.canvasManager?.liquifyManager;
     if (!liquifyManager) {
-      console.error("液化管理器未初始化");
+      Modal.error({
+        title: "液化管理器错误",
+        content: "液化管理器未初始化",
+        okText: "确定",
+        centered: true,
+      });
       return;
     }
 
     try {
+      // 显示准备中的Modal
+      const preparingModal = Modal.info({
+        title: "准备液化环境",
+        content: "正在准备液化环境，请稍候...",
+        okButtonProps: { style: { display: "none" } },
+        centered: true,
+        closable: false,
+        maskClosable: false,
+      });
+
       // 准备液化环境
       liquifyManager.initialize({
         canvas: this.canvas,
@@ -855,6 +896,9 @@ export class ToolManager {
       // 执行初始化命令
       await this.commandManager.execute(initCommand);
 
+      // 关闭准备Modal
+      preparingModal.destroy();
+
       // 触发液化面板显示事件
       document.dispatchEvent(
         new CustomEvent("showLiquifyPanel", {
@@ -867,7 +911,12 @@ export class ToolManager {
       );
     } catch (error) {
       console.error("启动液化工具失败:", error);
-      alert("启动液化工具失败：" + error.message);
+      Modal.error({
+        title: "液化工具启动失败",
+        content: `启动液化工具失败：${error.message}`,
+        okText: "确定",
+        centered: true,
+      });
     }
   }
 
diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/TexturePresetManager.js b/src/component/Canvas/CanvasEditor/managers/brushes/TexturePresetManager.js
index afaaca21..b36f67b7 100644
--- a/src/component/Canvas/CanvasEditor/managers/brushes/TexturePresetManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/TexturePresetManager.js
@@ -577,6 +577,49 @@ export class TexturePresetManager {
       cacheSize: this.textureCache.size,
     };
   }
+
+  /**
+   * 验证纹理文件
+   * @param {File} file 要验证的文件
+   * @returns {Boolean} 是否为有效的纹理文件
+   */
+  validateTextureFile(file) {
+    if (!file) {
+      console.warn("文件不存在");
+      return false;
+    }
+
+    // 检查文件类型
+    if (!file.type.startsWith("image/")) {
+      console.warn("文件类型无效，必须是图片文件");
+      return false;
+    }
+
+    // 检查文件大小（限制为 10MB）
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    if (file.size > maxSize) {
+      console.warn("文件大小超过限制（10MB）");
+      return false;
+    }
+
+    // 检查支持的图片格式
+    const supportedTypes = [
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/webp",
+      "image/svg+xml",
+      "image/bmp",
+      "image/gif",
+    ];
+
+    if (!supportedTypes.includes(file.type)) {
+      console.warn("不支持的图片格式");
+      return false;
+    }
+
+    return true;
+  }
 }
 
 // 创建单例实例
diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js b/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
index c369089f..56cc8720 100644
--- a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
@@ -1,4 +1,5 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
+import "./fabric.brushes.js";
 import { BrushStore } from "../../store/BrushStore";
 import { brushRegistry } from "./BrushRegistry";
 
@@ -16,7 +17,7 @@ import { MarkerBrush } from "./types/MarkerBrush";
 import { CustomPenBrush } from "./types/CustomPenBrush";
 import { RibbonBrush } from "./types/RibbonBrush";
 import { ShadedBrush } from "./types/ShadedBrush";
-import { SketchyBrush } from "./types/SketchyBrush";
+// import { SketchyBrush } from "./types/SketchyBrush";
 import { SpraypaintBrush } from "./types/SpraypaintBrush";
 
 /**
@@ -42,6 +43,11 @@ export class BrushManager {
 
     // 初始化笔刷注册
     this._registerDefaultBrushes();
+
+    // 初始化橡皮擦状态管理器
+    this.eraserStateManager = null;
+    this.isErasingActive = false;
+    this.currentErasedObjects = []; // 当前擦除会话中被影响的对象
   }
 
   /**
@@ -51,64 +57,112 @@ export class BrushManager {
   _registerDefaultBrushes() {
     // 注册铅笔笔刷
     brushRegistry.register("pencil", PencilBrush, {
-      name: "铅笔",
+      name: "Pencil",
       description: "基础铅笔工具，适合精细线条绘制",
       category: "基础笔刷",
     });
 
     // 注册材质笔刷
-    brushRegistry.register("texture", TextureBrush);
+    brushRegistry.register("texture", TextureBrush, {
+      name: "Texture",
+      description: "使用纹理图片作为笔刷，支持缩放和透明度",
+      category: "基础笔刷",
+    });
 
     // 注册集成的笔刷类型
-    brushRegistry.register("crayon", CrayonBrush);
-    brushRegistry.register("fur", FurBrush);
-    brushRegistry.register("ink", InkBrush);
-    brushRegistry.register("longfur", LongfurBrush);
-    brushRegistry.register("writing", WritingBrush);
-    brushRegistry.register("marker", MarkerBrush);
-    brushRegistry.register("pen", CustomPenBrush);
-    brushRegistry.register("ribbon", RibbonBrush);
-    brushRegistry.register("shaded", ShadedBrush);
-    brushRegistry.register("sketchy", SketchyBrush);
-    brushRegistry.register("spraypaint", SpraypaintBrush);
+    brushRegistry.register("crayon", CrayonBrush, {
+      name: "Crayon",
+      description: "使用纹理图片作为笔刷，支持缩放和透明度",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("fur", FurBrush, {
+      name: "Texture",
+      description: "使用纹理图片作为笔刷，支持缩放和透明度",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("ink", InkBrush, {
+      name: "Ink",
+      description: "墨水笔刷，适合书写和绘图",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("", LongfurBrush, {
+      name: "Longfur",
+      description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("writing", WritingBrush, {
+      name: "Writing",
+      description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("marker", MarkerBrush, {
+      name: "Marker",
+      description: "马克笔笔刷，适合粗线条和填充",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("pen", CustomPenBrush, {
+      name: "Pen",
+      description: "自定义钢笔笔刷，适合书写和绘图",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("ribbon", RibbonBrush, {
+      name: "Ribbon",
+      description: "丝带笔刷，适合创建流动的丝带效果",
+      category: "基础笔刷",
+    });
+    brushRegistry.register("shaded", ShadedBrush, {
+      name: "Shaded",
+      description: "阴影笔刷，适合创建渐变和阴影效果",
+      category: "基础笔刷",
+    });
+    // brushRegistry.register("sketchy", SketchyBrush);
+    brushRegistry.register("spraypaint", SpraypaintBrush, {
+      name: "Spraypaint",
+      description: "喷漆笔刷，模拟喷漆效果",
+      category: "基础笔刷",
+    });
 
-    // 注册喷枪笔刷
-    brushRegistry.register(
-      "spray",
-      class SprayBrush extends PencilBrush {
-        constructor(canvas, options = {}) {
-          super(canvas, {
-            id: "spray",
-            name: "喷枪",
-            description: "模拟喷枪效果，创建散点效果",
-            category: "基础笔刷",
-            ...options,
-          });
-        }
+    // // 注册喷枪笔刷
+    // brushRegistry.register(
+    //   "spray",
+    //   class SprayBrush extends PencilBrush {
+    //     constructor(canvas, options = {}) {
+    //       super(canvas, {
+    //         id: "spray",
+    //         name: "喷枪",
+    //         description: "模拟喷枪效果，创建散点效果",
+    //         category: "基础笔刷",
+    //         ...options,
+    //       });
+    //     }
 
-        create() {
-          this.brush = new fabric.SprayBrush(this.canvas);
-          this.configure(this.brush, this.options);
-          return this.brush;
-        }
+    //     create() {
+    //       this.brush = new fabric.SprayBrush(this.canvas);
+    //       this.configure(this.brush, this.options);
+    //       return this.brush;
+    //     }
 
-        configure(brush, options = {}) {
-          super.configure(brush, options);
+    //     configure(brush, options = {}) {
+    //       super.configure(brush, options);
 
-          if (options.density !== undefined) {
-            brush.density = options.density;
-          }
+    //       if (options.density !== undefined) {
+    //         brush.density = options.density;
+    //       }
 
-          if (options.randomOpacity !== undefined) {
-            brush.randomOpacity = options.randomOpacity;
-          }
+    //       if (options.randomOpacity !== undefined) {
+    //         brush.randomOpacity = options.randomOpacity;
+    //       }
 
-          if (options.dotWidth !== undefined) {
-            brush.dotWidth = options.dotWidth;
-          }
-        }
-      }
-    );
+    //       if (options.dotWidth !== undefined) {
+    //         brush.dotWidth = options.dotWidth;
+    //       }
+    //     }
+    //   },
+    //   {
+    //     name: "喷枪",
+    //     description: "模拟喷枪效果，创建散点效果",
+    //   }
+    // );
     // 注册橡皮擦笔刷
     brushRegistry.register(
       "eraser",
@@ -187,87 +241,87 @@ export class BrushManager {
       }
     );
 
-    // 注册水彩笔刷
-    brushRegistry.register(
-      "watercolor",
-      class WatercolorBrush extends PencilBrush {
-        constructor(canvas, options = {}) {
-          super(canvas, {
-            id: "watercolor",
-            name: "水彩",
-            description: "模拟水彩效果，带有流动感和透明感",
-            category: "特效笔刷",
-            ...options,
-          });
-        }
+    // // 注册水彩笔刷
+    // brushRegistry.register(
+    //   "watercolor",
+    //   class WatercolorBrush extends PencilBrush {
+    //     constructor(canvas, options = {}) {
+    //       super(canvas, {
+    //         id: "watercolor",
+    //         name: "水彩",
+    //         description: "模拟水彩效果，带有流动感和透明感",
+    //         category: "特效笔刷",
+    //         ...options,
+    //       });
+    //     }
 
-        create() {
-          // 创建一个自定义的PencilBrush来模拟水彩效果
-          this.brush = new fabric.PencilBrush(this.canvas);
-          this.configure(this.brush, this.options);
+    //     create() {
+    //       // 创建一个自定义的PencilBrush来模拟水彩效果
+    //       this.brush = new fabric.PencilBrush(this.canvas);
+    //       this.configure(this.brush, this.options);
 
-          // 水彩效果特有的属性
-          this.brush.globalCompositeOperation = "multiply";
-          this.brush.shadow = new fabric.Shadow({
-            color: this.options.color || "#000",
-            blur: 5,
-            offsetX: 0,
-            offsetY: 0,
-          });
+    //       // 水彩效果特有的属性
+    //       this.brush.globalCompositeOperation = "multiply";
+    //       this.brush.shadow = new fabric.Shadow({
+    //         color: this.options.color || "#000",
+    //         blur: 5,
+    //         offsetX: 0,
+    //         offsetY: 0,
+    //       });
 
-          return this.brush;
-        }
+    //       return this.brush;
+    //     }
 
-        configure(brush, options = {}) {
-          super.configure(brush, options);
+    //     configure(brush, options = {}) {
+    //       super.configure(brush, options);
 
-          // 水彩笔刷特有的配置
-          brush.opacity = Math.min(0.5, options.opacity || 0.3); // 默认透明度30%
-        }
-      }
-    );
+    //       // 水彩笔刷特有的配置
+    //       brush.opacity = Math.min(0.5, options.opacity || 0.3); // 默认透明度30%
+    //     }
+    //   }
+    // );
 
-    // 注册粉笔笔刷
-    brushRegistry.register(
-      "chalk",
-      class ChalkBrush extends PencilBrush {
-        constructor(canvas, options = {}) {
-          super(canvas, {
-            id: "chalk",
-            name: "粉笔",
-            description: "模拟粉笔效果，有颗粒感和不连续性",
-            category: "特效笔刷",
-            ...options,
-          });
-        }
+    // // 注册粉笔笔刷
+    // brushRegistry.register(
+    //   "chalk",
+    //   class ChalkBrush extends PencilBrush {
+    //     constructor(canvas, options = {}) {
+    //       super(canvas, {
+    //         id: "chalk",
+    //         name: "粉笔",
+    //         description: "模拟粉笔效果，有颗粒感和不连续性",
+    //         category: "特效笔刷",
+    //         ...options,
+    //       });
+    //     }
 
-        create() {
-          this.brush = new fabric.PencilBrush(this.canvas);
-          this.configure(this.brush, this.options);
+    //     create() {
+    //       this.brush = new fabric.PencilBrush(this.canvas);
+    //       this.configure(this.brush, this.options);
 
-          // 自定义绘画方法来模拟粉笔效果
-          const originalOnMouseMove = this.brush.onMouseMove;
-          this.brush.onMouseMove = function (pointer, options) {
-            // 随机调整坐标位置，增加粉笔质感
-            const jitter = 2;
-            pointer.x += (Math.random() - 0.5) * jitter;
-            pointer.y += (Math.random() - 0.5) * jitter;
+    //       // 自定义绘画方法来模拟粉笔效果
+    //       const originalOnMouseMove = this.brush.onMouseMove;
+    //       this.brush.onMouseMove = function (pointer, options) {
+    //         // 随机调整坐标位置，增加粉笔质感
+    //         const jitter = 2;
+    //         pointer.x += (Math.random() - 0.5) * jitter;
+    //         pointer.y += (Math.random() - 0.5) * jitter;
 
-            // 调用原始方法
-            originalOnMouseMove.call(this, pointer, options);
-          };
+    //         // 调用原始方法
+    //         originalOnMouseMove.call(this, pointer, options);
+    //       };
 
-          return this.brush;
-        }
+    //       return this.brush;
+    //     }
 
-        configure(brush, options = {}) {
-          super.configure(brush, options);
+    //     configure(brush, options = {}) {
+    //       super.configure(brush, options);
 
-          // 粉笔特有的设置
-          brush.strokeDashArray = [5, 5]; // 虚线效果
-        }
-      }
-    );
+    //       // 粉笔特有的设置
+    //       brush.strokeDashArray = [5, 5]; // 虚线效果
+    //     }
+    //   }
+    // );
   }
 
   /**
@@ -571,6 +625,148 @@ export class BrushManager {
     return success;
   }
 
+  /**
+   * 设置依赖管理器
+   */
+  setManagers({ layerManager, commandManager }) {
+    this.layerManager = layerManager;
+    this.commandManager = commandManager;
+
+    // 初始化橡皮擦状态管理器
+    if (this.canvas && this.layerManager) {
+      this.eraserStateManager = new EraserStateManager(
+        this.canvas,
+        this.layerManager
+      );
+    }
+  }
+
+  /**
+   * 创建橡皮擦
+   * @param {Object} options 橡皮擦选项
+   */
+  createEraser(options = {}) {
+    if (!this.canvas) {
+      console.error("画布未初始化");
+      return null;
+    }
+
+    try {
+      // 直接使用 fabric-with-erasing 库提供的 EraserBrush
+      this.brush = new fabric.EraserBrush(this.canvas);
+
+      // 应用配置
+      this.configure(this.brush, {
+        width: this.brushSize.value,
+        color: this.brushColor.value,
+        opacity: this.brushOpacity.value,
+        inverted: options.inverted || false,
+        ...options,
+      });
+
+      // 设置画布为绘图模式
+      this.canvas.isDrawingMode = true;
+      this.canvas.freeDrawingBrush = this.brush;
+
+      // 绑定橡皮擦事件处理器
+      // this._bindEraserEvents();
+
+      console.log("橡皮擦创建成功");
+      return this.brush;
+    } catch (error) {
+      console.error("创建橡皮擦失败:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 绑定橡皮擦事件处理器
+   * @private
+   */
+  _bindEraserEvents() {
+    if (!this.canvas || !this.eraserStateManager) return;
+
+    // 监听擦除开始事件
+    this.canvas.on("erasing:start", this._handleErasingStart.bind(this));
+
+    // 监听擦除结束事件
+    this.canvas.on("erasing:end", this._handleErasingEnd.bind(this));
+  }
+
+  /**
+   * 解绑橡皮擦事件处理器
+   * @private
+   */
+  _unbindEraserEvents() {
+    if (!this.canvas) return;
+
+    this.canvas.off("erasing:start", this._handleErasingStart.bind(this));
+    this.canvas.off("erasing:end", this._handleErasingEnd.bind(this));
+  }
+
+  /**
+   * 处理擦除开始事件
+   * @param {Object} e 事件对象
+   * @private
+   */
+  _handleErasingStart(e) {
+    console.log("橡皮擦开始擦除");
+
+    if (!this.eraserStateManager) return;
+
+    // 标记擦除状态
+    this.isErasingActive = true;
+    this.currentErasedObjects = [];
+
+    // 捕获擦除前的状态
+    this.eraserStateManager.startErasing();
+  }
+
+  /**
+   * 处理擦除结束事件
+   * @param {Object} e 事件对象
+   * @private
+   */
+  _handleErasingEnd(e) {
+    console.log("橡皮擦擦除结束", e);
+
+    if (!this.eraserStateManager || !this.isErasingActive) return;
+
+    // 获取被擦除的对象
+    const affectedObjects = e.targets || [];
+
+    // 创建橡皮擦命令
+    const eraserCommand = this.eraserStateManager.endErasing(affectedObjects);
+
+    // 如果有有效的命令且有命令管理器，执行命令
+    if (eraserCommand && this.commandManager) {
+      // 注意：不需要调用 execute()，因为擦除操作已经完成
+      // 只需要将命令添加到历史记录中以支持撤销
+      this.commandManager.addToHistory(eraserCommand);
+      console.log("橡皮擦操作已添加到命令历史");
+    }
+
+    // 重置状态
+    this.isErasingActive = false;
+    this.currentErasedObjects = [];
+  }
+
+  /**
+   * 取消当前擦除操作
+   */
+  cancelErasing() {
+    if (!this.isErasingActive) return;
+
+    if (this.eraserStateManager) {
+      this.eraserStateManager.cancelErasing();
+    }
+
+    this.isErasingActive = false;
+    this.currentErasedObjects = [];
+
+    console.log("当前擦除操作已取消");
+  }
+
   /**
    * 获取当前笔刷类型
    * @returns {String} 当前笔刷类型ID
@@ -646,7 +842,6 @@ export class BrushManager {
 
     return this.canvas.freeDrawingBrush;
   }
-
   /**
    * 创建橡皮擦
    * @returns {Object} 橡皮擦笔刷
@@ -703,9 +898,20 @@ export class BrushManager {
   }
 
   /**
-   * 销毁资源
+   * 销毁笔刷管理器
    */
   dispose() {
+    // 解绑事件
+    // this._unbindEraserEvents();
+
+    // 取消进行中的擦除操作
+    this.cancelErasing();
+
+    // 清理状态管理器
+    if (this.eraserStateManager) {
+      this.eraserStateManager = null;
+    }
+
     // 销毁当前笔刷
     if (this.activeBrush) {
       this.activeBrush.destroy();
diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/fabric.brushes.js b/src/component/Canvas/CanvasEditor/managers/brushes/fabric.brushes.js
new file mode 100644
index 00000000..bdaebe42
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/fabric.brushes.js
@@ -0,0 +1,1748 @@
+/**
+ * fabric.brushes - A collection of brushes for fabric.js (version 4 and up).
+ *
+ * Made by Arjan Haverkamp, https://www.webgear.nl
+ * Copyright 2021 Arjan Haverkamp
+ * MIT Licensed
+ * @version 1.0 - 2021-06-02
+ * @url https://github.com/av01d/fabric-brushes
+ *
+ * Inspiration sources:
+ * - https://github.com/tennisonchan/fabric-brush
+ * - https://mrdoob.com/projects/harmony/
+ * - http://perfectionkills.com/exploring-canvas-drawing-techniques/
+ */
+import { fabric } from "fabric-with-all";
+import { sprayBrushDataUrl } from "./data/sprayBrushData.js";
+
+(function (fabric) {
+  /**
+   * Trim a canvas. Returns the lezft-top coordinate where trimming began.
+   * @param {canvas} canvas A canvas element to trim. This element will be trimmed (reference).
+   * @returns {Object} Left-top coordinate of trimmed area. Example: {x:65, y:104}
+   * @see: https://stackoverflow.com/a/22267731/3360038
+   */
+  fabric.util.trimCanvas = function (canvas) {
+    var ctx = canvas.getContext("2d"),
+      w = canvas.width,
+      h = canvas.height,
+      pix = { x: [], y: [] },
+      n,
+      imageData = ctx.getImageData(0, 0, w, h),
+      fn = function (a, b) {
+        return a - b;
+      };
+    for (var y = 0; y < h; y++) {
+      for (var x = 0; x < w; x++) {
+        if (imageData.data[(y * w + x) * 4 + 3] > 0) {
+          pix.x.push(x);
+          pix.y.push(y);
+        }
+      }
+    }
+    pix.x.sort(fn);
+    pix.y.sort(fn);
+    n = pix.x.length - 1;
+    //if (n == -1) {
+    //	// Nothing to trim... empty canvas?
+    //}
+
+    w = pix.x[n] - pix.x[0];
+    h = pix.y[n] - pix.y[0];
+    if (!w) {
+      return;
+    }
+    var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
+
+    canvas.width = w;
+    canvas.height = h;
+    ctx.putImageData(cut, 0, 0);
+
+    return { x: pix.x[0], y: pix.y[0] };
+  };
+
+  /**
+   * Extract r,g,b,a components from any valid color.
+   * Returns {undefined} when color cannot be parsed.
+   *
+   * @param {number} color Any color string (named, hex, rgb, rgba)
+   * @returns {(Array|undefined)} Example: [0,128,255,1]
+   * @see https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49
+   */
+  fabric.util.colorValues = function (color) {
+    if (!color) {
+      return;
+    }
+    if (color.toLowerCase() === "transparent") {
+      return [0, 0, 0, 0];
+    }
+    if (color[0] === "#") {
+      if (color.length < 7) {
+        // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
+        color =
+          "#" +
+          color[1] +
+          color[1] +
+          color[2] +
+          color[2] +
+          color[3] +
+          color[3] +
+          (color.length > 4 ? color[4] + color[4] : "");
+      }
+      return [
+        parseInt(color.substr(1, 2), 16),
+        parseInt(color.substr(3, 2), 16),
+        parseInt(color.substr(5, 2), 16),
+        color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1,
+      ];
+    }
+    if (color.indexOf("rgb") === -1) {
+      // convert named colors
+      var tempElem = document.body.appendChild(
+        document.createElement("fictum")
+      ); // intentionally use unknown tag to lower chances of css rule override with !important
+      var flag = "rgb(1, 2, 3)"; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
+      tempElem.style.color = flag;
+      if (tempElem.style.color !== flag) {
+        return; // color set failed - some monstrous css rule is probably taking over the color of our object
+      }
+      tempElem.style.color = color;
+      if (tempElem.style.color === flag || tempElem.style.color === "") {
+        return; // color parse failed
+      }
+      color = getComputedStyle(tempElem).color;
+      document.body.removeChild(tempElem);
+    }
+    if (color.indexOf("rgb") === 0) {
+      if (color.indexOf("rgba") === -1) {
+        color += ",1"; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
+      }
+      return color.match(/[\.\d]+/g).map(function (a) {
+        return +a;
+      });
+    }
+  };
+
+  fabric.Point.prototype.angleBetween = function (that) {
+    return Math.atan2(this.x - that.x, this.y - that.y);
+  };
+
+  fabric.Point.prototype.normalize = function (thickness) {
+    if (null === thickness || undefined === thickness) {
+      thickness = 1;
+    }
+
+    var length = this.distanceFrom({ x: 0, y: 0 });
+
+    if (length > 0) {
+      this.x = (this.x / length) * thickness;
+      this.y = (this.y / length) * thickness;
+    }
+
+    return this;
+  };
+
+  /**
+   * Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
+   * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
+   */
+  fabric.BaseBrush.prototype.convertToPath = function () {
+    var pixelRatio = this.canvas.getRetinaScaling(),
+      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
+      xy = fabric.util.trimCanvas(c),
+      path = this._points
+        .map((arr) => {
+          arr[1] = arr[1] / this.canvas.getZoom();
+          arr[2] = arr[2] / this.canvas.getZoom();
+          return arr.join(" ");
+        })
+        .join(" "),
+      pathElemetn = new fabric.Path(path);
+    if (!xy) {
+      return;
+    }
+    let pointerX = this.canvas.viewportTransform[4];
+    let pointerY = this.canvas.viewportTransform[5];
+    pathElemetn
+      .set({
+        strokeDashArray: [this._width * 3, this._width * 3],
+        strokeWidth: this._width,
+        stroke: "black",
+        fill: "transparent",
+        custom: {
+          dashed: true,
+        },
+      })
+      .setCoords();
+    let group = new fabric.Group([pathElemetn], {
+      left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
+      top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
+      custom: {
+        dashed: true,
+      },
+    });
+
+    this.canvas.add(group).clearContext(this.canvas.contextTop);
+    this.canvas.clearContext(this.canvas.contextTop);
+  };
+
+  fabric.BaseBrush.prototype.convertToImg = function () {
+    var pixelRatio = this.canvas.getRetinaScaling(),
+      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
+      xy = fabric.util.trimCanvas(c),
+      img = new fabric.Image(c);
+    if (!xy) {
+      return;
+    }
+    let pointerX = this.canvas.viewportTransform[4];
+    let pointerY = this.canvas.viewportTransform[5];
+    img
+      .set({
+        left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
+        top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
+        scaleX: 1 / pixelRatio / this.canvas.getZoom(),
+        scaleY: 1 / pixelRatio / this.canvas.getZoom(),
+        custom: {
+          type: "pencil",
+        },
+      })
+      .setCoords();
+    // 检查是否有图像处理回调函数
+    const result = this.canvas?.onBrushImageConverted?.(img);
+    !result && this.canvas.add(img);
+    this.canvas.clearContext(this.canvas.contextTop);
+  };
+
+  fabric.util.getRandom = function (max, min) {
+    min = min ? min : 0;
+    return Math.random() * ((max ? max : 1) - min) + min;
+  };
+
+  fabric.util.clamp = function (n, max, min) {
+    if (typeof min !== "number") {
+      min = 0;
+    }
+    return n > max ? max : n < min ? min : n;
+  };
+
+  fabric.Stroke = fabric.util.createClass(fabric.Object, {
+    color: null,
+    inkAmount: null,
+    lineWidth: null,
+
+    _point: null,
+    _lastPoint: null,
+    _currentLineWidth: null,
+
+    initialize: function (ctx, pointer, range, color, lineWidth, inkAmount) {
+      var rx = fabric.util.getRandom(range),
+        c = fabric.util.getRandom(Math.PI * 2),
+        c0 = fabric.util.getRandom(Math.PI * 2),
+        x0 = rx * Math.sin(c0),
+        y0 = (rx / 2) * Math.cos(c0),
+        cos = Math.cos(c),
+        sin = Math.sin(c);
+
+      this.ctx = ctx;
+      this.color = color;
+      this._point = new fabric.Point(
+        pointer.x + x0 * cos - y0 * sin,
+        pointer.y + x0 * sin + y0 * cos
+      );
+      this.lineWidth = lineWidth;
+      this.inkAmount = inkAmount;
+      this._currentLineWidth = lineWidth;
+
+      ctx.lineCap = "round";
+    },
+
+    update: function (pointer, subtractPoint, distance) {
+      this._lastPoint = fabric.util.object.clone(this._point);
+      this._point = this._point.addEquals({
+        x: subtractPoint.x,
+        y: subtractPoint.y,
+      });
+      var n = this.inkAmount / (distance + 1),
+        per = n > 0.3 ? 0.2 : n < 0 ? 0 : n;
+      this._currentLineWidth = this.lineWidth * per;
+    },
+
+    draw: function () {
+      var ctx = this.ctx;
+      ctx.save();
+      this.line(
+        ctx,
+        this._lastPoint,
+        this._point,
+        this.color,
+        this._currentLineWidth
+      );
+      ctx.restore();
+    },
+
+    line: function (ctx, point1, point2, color, lineWidth) {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.beginPath();
+      ctx.moveTo(point1.x, point1.y);
+      ctx.lineTo(point2.x, point2.y);
+      ctx.stroke();
+    },
+  });
+
+  /**
+   * CrayonBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 0.6,
+    width: 30,
+
+    _baseWidth: 15,
+    _inkAmount: 10,
+    _latestStrokeLength: 0,
+    _point: null,
+    _sep: 3,
+    _size: 0,
+    _latest: null,
+    _drawn: false,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width / 2;
+      this._point = new fabric.Point(0, 0);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._size = this.width / 2 + this._baseWidth;
+      this._drawn = false;
+      this.set(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this.update(pointer);
+      this.draw(this.canvas.contextTop);
+    },
+
+    onMouseUp: function () {
+      if (this._drawn) {
+        this.convertToImg();
+      }
+      this._latest = null;
+      this._latestStrokeLength = 0;
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    set: function (p) {
+      if (this._latest) {
+        this._latest.setFromPoint(this._point);
+      } else {
+        this._latest = new fabric.Point(p.x, p.y);
+      }
+      fabric.Point.prototype.setFromPoint.call(this._point, p);
+    },
+
+    update: function (p) {
+      this.set(p);
+      this._latestStrokeLength = this._point
+        .subtract(this._latest)
+        .distanceFrom({ x: 0, y: 0 });
+    },
+
+    draw: function (ctx) {
+      var i, j, p, r, c, x, y, w, h, v, s, stepNum, dotSize, dotNum, range;
+
+      v = this._point.subtract(this._latest);
+      s = Math.ceil(this._size / 2);
+      stepNum = Math.floor(v.distanceFrom({ x: 0, y: 0 }) / s) + 1;
+      v.normalize(s);
+
+      dotSize =
+        this._sep *
+        fabric.util.clamp(
+          (this._inkAmount / this._latestStrokeLength) * 3,
+          1,
+          0.5
+        );
+      dotNum = Math.ceil(this._size * this._sep);
+
+      range = this._size / 2;
+
+      ctx.save();
+      ctx.fillStyle = this.color;
+      ctx.beginPath();
+      for (i = 0; i < dotNum; i++) {
+        for (j = 0; j < stepNum; j++) {
+          p = this._latest.add(v.multiply(j));
+          r = fabric.util.getRandom(range);
+          c = fabric.util.getRandom(Math.PI * 2);
+          w = fabric.util.getRandom(dotSize, dotSize / 2);
+          h = fabric.util.getRandom(dotSize, dotSize / 2);
+          x = p.x + r * Math.sin(c) - w / 2;
+          y = p.y + r * Math.cos(c) - h / 2;
+          ctx.rect(x, y, w, h);
+        }
+      }
+      ctx.fill();
+      ctx.restore();
+      this._drawn = true;
+    },
+
+    _render: function () {},
+  }); // End CrayonBrush
+
+  /**
+   * FurBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.FurBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      this._points = [pointer];
+      this._count = 0;
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        0.1 * this.opacity +
+        ")";
+      ctx.lineWidth = this.width;
+
+      this._points.push(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      this._points.push(pointer);
+
+      var i,
+        dx,
+        dy,
+        d,
+        ctx = this.canvas.contextTop,
+        points = this._points,
+        lastPoint = points[points.length - 2];
+
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      for (i = 0; i < this._points.length; i++) {
+        dx = this._points[i].x - this._points[this._count].x;
+        dy = this._points[i].y - this._points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 2000 && Math.random() > d / 2000) {
+          ctx.beginPath();
+          ctx.moveTo(pointer.x + dx * 0.5, pointer.y + dy * 0.5);
+          ctx.lineTo(pointer.x - dx * 0.5, pointer.y - dy * 0.5);
+          ctx.stroke();
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End FurBrush
+
+  /**
+   * InkBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _inkAmount: 7,
+    _lastPoint: null,
+    _point: null,
+    _range: 10,
+    _strokes: null,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this._point = new fabric.Point();
+    },
+
+    _render: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var len,
+        i,
+        point = this.setPointer(pointer),
+        subtractPoint = point.subtract(this._lastPoint),
+        distance = point.distanceFrom(this._lastPoint),
+        stroke;
+      for (i = 0, len = this._strokes.length; i < len; i++) {
+        stroke = this._strokes[i];
+        stroke.update(point, subtractPoint, distance);
+        stroke.draw();
+      }
+
+      if (distance > 30) {
+        this.drawSplash(point, this._inkAmount);
+      }
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._resetTip(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.convertToImg();
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+    hexToRgba: function (hex, alpha) {},
+    drawSplash: function (pointer, maxSize) {
+      var c,
+        r,
+        i,
+        point,
+        ctx = this.canvas.contextTop,
+        num = fabric.util.getRandom(12),
+        range = maxSize * 10,
+        color = this.color;
+
+      ctx.save();
+      for (i = 0; i < num; i++) {
+        r = fabric.util.getRandom(range, 1);
+        c = fabric.util.getRandom(Math.PI * 2);
+        point = new fabric.Point(
+          pointer.x + r * Math.sin(c),
+          pointer.y + r * Math.cos(c)
+        );
+
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(
+          point.x,
+          point.y,
+          fabric.util.getRandom(maxSize) / 2,
+          0,
+          Math.PI * 2,
+          false
+        );
+        ctx.fill();
+      }
+      ctx.restore();
+    },
+
+    setPointer: function (pointer) {
+      var point = new fabric.Point(pointer.x, pointer.y);
+
+      this._lastPoint = fabric.util.object.clone(this._point);
+      this._point = point;
+
+      return point;
+    },
+
+    _resetTip: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var len,
+        i,
+        point = this.setPointer(pointer);
+
+      this._strokes = [];
+      this.size = this.width;
+      this._range = this.size / 2;
+      for (i = 0, len = this.size; i < len; i++) {
+        this._strokes[i] = new fabric.Stroke(
+          this.canvas.contextTop,
+          point,
+          this._range,
+          this.color,
+          this.width + 10,
+          this._inkAmount
+        );
+      }
+    },
+  }); // End InkBrush
+
+  /**
+   * LongfurBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+      this._count = 0;
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      //ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        0.05 * this.opacity +
+        ")";
+      ctx.lineWidth = this.width;
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var i,
+        dx,
+        dy,
+        d,
+        size,
+        ctx = this.canvas.contextTop,
+        points = this._points;
+
+      for (i = 0; i < this._points.length; i++) {
+        size = -Math.random();
+
+        dx = this._points[i].x - this._points[this._count].x;
+        dy = this._points[i].y - this._points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 1000 && Math.random() > d / 1000) {
+          ctx.beginPath();
+          ctx.moveTo(
+            this._points[this._count].x + dx * size,
+            this._points[this._count].y + dy * size
+          );
+          ctx.lineTo(
+            this._points[i].x - dx * size + Math.random() * 2,
+            this._points[i].y - dy * size + Math.random() * 2
+          );
+          ctx.stroke();
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End LongfurBrush
+  /**
+   * WritingBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+      ctx.beginPath();
+      // let num = this._size / this._lineWidth / 2 / 1.2
+      let num = this.width / 1.25 / 2;
+
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(
+          this._lastPoint.x - lineWidthDiff + num,
+          this._lastPoint.y + lineWidthDiff - num
+        );
+        ctx.lineTo(
+          pointer.x - lineWidthDiff + num,
+          pointer.y + lineWidthDiff - num
+        );
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x =
+          pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y =
+          pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End WritingBrush
+  /**
+   * MarkerBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+
+      ctx.beginPath();
+      let num = this.width / 1.25 / 2;
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(
+          this._lastPoint.x + lineWidthDiff - num,
+          this._lastPoint.y + lineWidthDiff - num
+        );
+        ctx.lineTo(
+          pointer.x + lineWidthDiff - num,
+          pointer.y + lineWidthDiff - num
+        );
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth / 2;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x =
+          pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y =
+          pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End MarkerBrush
+  /**
+   * test
+   * Based on code by Tennison Chan.
+   */
+  fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+
+    _points: [],
+
+    _width: 2,
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this._width = opt._width || this._width;
+      this.color = opt.color || this.color;
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+
+      this._points.push(["L", pointer.x, pointer.y]);
+
+      // if(this._points.length % 10 < 5){
+      let points = this._points;
+      ctx.beginPath();
+      ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
+      ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
+      ctx.stroke();
+      // }
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [];
+      this._points.push(["M", pointer.x, pointer.y]);
+
+      var ctx = this.canvas.contextTop;
+      ctx.strokeStyle = "rgba(" + 0 + "," + 0 + "," + 0 + "," + 1 + ")";
+      ctx.lineWidth = this._width * this.canvas.getZoom();
+      ctx.lineJoin = ctx.lineCap = "round";
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x =
+          pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y =
+          pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this._points.push(["Z"]);
+      this.convertToPath();
+    },
+  }); // End test
+
+  /**
+   * MarkerBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+    content: 0,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.content = opt.content || canvas.width / 2;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+
+      ctx = this.canvas.contextTop;
+
+      ctx.beginPath();
+
+      for (i = 0, len = this._size / this._lineWidth / 2; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+        let half = this.canvas.width / 2;
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(this._lastPoint.x, this._lastPoint.y);
+        let x =
+          content > this._lastPoint.x
+            ? content - this._lastPoint.x + content
+            : content * 2 - this._lastPoint.x;
+        ctx.lineTo(x, this._lastPoint.y);
+        // ctx.lineTo(pointer.y + lineWidthDiff,pointer.x + lineWidthDiff);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x =
+          pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y =
+          pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End MarkerBrush
+  /**
+   * PenBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+      ctx.beginPath();
+      // let num = this._size / this._lineWidth / 2 / 1.2
+      let num = this.width / 1.25 / 2;
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
+        var randomNum = Math.random() * (0.6 - 0.2) + 0.2;
+        var color = this.color.replace(/1(?=\))/, randomNum);
+        this.canvas.contextTop.strokeStyle = color;
+
+        lineWidthDiff = (this._lineWidth - 1) * i;
+
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(this._lastPoint.x, this._lastPoint.y + lineWidthDiff - num);
+        ctx.lineTo(pointer.x, pointer.y + lineWidthDiff - num);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x =
+          pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y =
+          pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End PenBrush
+  /**
+   * RibbonBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _nrPainters: 50,
+    _painters: [],
+    _lastPoint: null,
+    _interval: null,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this._nrPainters = opt._nrPainters || this._nrPainters;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      for (var i = 0; i < this._nrPainters; i++) {
+        this._painters.push({
+          dx: this.canvas.width / 2,
+          dy: this.canvas.height / 2,
+          ax: 0,
+          ay: 0,
+          div: 0.1,
+          ease: Math.random() * 0.2 + 0.6,
+        });
+      }
+    },
+
+    update: function () {
+      var ctx = this.canvas.contextTop,
+        painters = this._painters;
+      for (var i = 0; i < painters.length; i++) {
+        ctx.beginPath();
+        ctx.moveTo(painters[i].dx, painters[i].dy);
+        painters[i].dx -= painters[i].ax =
+          (painters[i].ax +
+            (painters[i].dx - this._lastPoint.x) * painters[i].div) *
+          painters[i].ease;
+        painters[i].dy -= painters[i].ay =
+          (painters[i].ay +
+            (painters[i].dy - this._lastPoint.y) * painters[i].div) *
+          painters[i].ease;
+        ctx.lineTo(painters[i].dx, painters[i].dy);
+        ctx.stroke();
+      }
+    },
+
+    onMouseDown: function (pointer) {
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      this._painters = [];
+      for (var i = 0; i < this._nrPainters; i++) {
+        this._painters.push({
+          dx: this.canvas.width / 2,
+          dy: this.canvas.height / 2,
+          ax: 0,
+          ay: 0,
+          div: 0.1,
+          ease: Math.random() * 0.2 + 0.6,
+        });
+      }
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+
+      //ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        0.05 * this.opacity +
+        ")";
+      ctx.lineWidth = this.width;
+
+      for (var i = 0; i < this._nrPainters; i++) {
+        this._painters[i].dx = pointer.x;
+        this._painters[i].dy = pointer.y;
+      }
+
+      var self = this;
+      this._interval = setInterval(function () {
+        self.update();
+      }, 1000 / 60);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+    },
+
+    onMouseUp: function (pointer) {
+      clearInterval(this._interval);
+      this.convertToImg();
+    },
+
+    _render: function () {},
+  }); // End RibbonBrush
+
+  /**
+   * ShadedBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 0.3,
+    width: 1,
+    shadeDistance: 1000,
+
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this.shadeDistance = opt.shadeDistance || 1000;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        this.opacity +
+        ")";
+      ctx.lineWidth = this.width;
+      ctx.lineJoin = ctx.lineCap = "round";
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var ctx = this.canvas.contextTop,
+        points = this._points,
+        dx,
+        dy,
+        d; // 在此处声明变量
+
+      ctx.beginPath();
+      ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
+      ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
+      ctx.stroke();
+
+      for (var i = 0, len = points.length; i < len; i++) {
+        dx = points[i].x - points[points.length - 1].x;
+        dy = points[i].y - points[points.length - 1].y;
+        d = dx * dx + dy * dy;
+
+        if (d < this.shadeDistance) {
+          ctx.beginPath();
+          ctx.moveTo(
+            points[points.length - 1].x + dx * 0.2,
+            points[points.length - 1].y + dy * 0.2
+          );
+          ctx.lineTo(points[i].x - dx * 0.2, points[i].y - dy * 0.2);
+          ctx.stroke();
+        }
+      }
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._points.length > 1) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End ShadedBrush
+
+  /**
+   * SketchyBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+
+      // 坐标转换
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points = [pointer];
+      this._count = 0;
+      this._drawn = false;
+
+      // 设置绘图样式
+      var ctx = this.canvas.contextTop;
+      var color = fabric.util.colorValues(this.color);
+
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        0.3 * this.opacity +
+        ")";
+    },
+
+    onMouseMove: function (pointer) {
+      // 坐标转换
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points.push(pointer);
+
+      var i, dx, dy, d;
+      var factor = 0.3 * this.width;
+      var ctx = this.canvas.contextTop;
+      var points = this._points;
+      var lastPoint = points.length > 1 ? points[points.length - 2] : points[0]; // 修复第一次无上一个点的问题
+
+      // 绘制主线条
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      // 增加透明度设置
+      var color = fabric.util.colorValues(this.color);
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        0.2 * this.opacity +
+        ")";
+
+      // 修改循环逻辑，确保在有点时能画出效果
+      if (this._count > 0) {
+        // 确保有历史点可用
+        for (i = 0; i < points.length; i++) {
+          dx = points[i].x - points[this._count].x;
+          dy = points[i].y - points[this._count].y;
+          d = dx * dx + dy * dy;
+
+          if (d < 4000 && Math.random() > d / 2000) {
+            ctx.beginPath();
+            ctx.moveTo(
+              points[this._count].x + dx * factor,
+              points[this._count].y + dy * factor
+            );
+            ctx.lineTo(points[i].x - dx * factor, points[i].y - dy * factor);
+            ctx.stroke();
+            this._drawn = true;
+          }
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0 || this._drawn) {
+        this.convertToImg();
+      }
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    _render: function () {},
+  }); // End SketchyBrush
+
+  /**
+   * SpraypaintBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 40,
+    _inkAmount: 0,
+    _interval: 20,
+    _lastPoint: null,
+    _point: null,
+    brush: null,
+    sprayBrushDataUrl: sprayBrushDataUrl,
+
+    initialize: function (canvas, opt) {
+      var self = this;
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.opacity = opt.opacity || this.opacity;
+      this.color = opt.color || this.color;
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+
+      this._reset();
+
+      fabric.Image.fromURL(
+        this.sprayBrushDataUrl,
+        function (brush) {
+          self.brush = brush;
+          self.brush.filters = [];
+          self._setColor(self.color || this.color);
+        },
+        { crossOrigin: "anonymous" }
+      );
+    },
+
+    _setColor: function (color) {
+      this.color = color;
+      this.brush.filters[0] = new fabric.Image.filters.BlendColor({
+        color: color,
+        alpha: 1,
+        mode: "tint",
+      });
+      this.brush.applyFilters();
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._point = new fabric.Point(pointer.x, pointer.y);
+      this._lastPoint = this._point;
+
+      // this.size = this.width + this._baseWidth;
+      this.size = this.width + this.width / 2;
+      this._inkAmount = 0;
+
+      this._setColor(this.color);
+      this._render();
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = this._point;
+      this._point = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseUp: function () {
+      var self = this;
+      setTimeout(function () {
+        self.convertToImg();
+        self._reset();
+      }, this._interval);
+    },
+
+    _render: function () {
+      var self = this;
+
+      function draw() {
+        var point, distance, angle, amount, x, y;
+
+        point = new fabric.Point(self._point.x || 0, self._point.y || 0);
+        distance = point.distanceFrom(self._lastPoint);
+        angle = point.angleBetween(self._lastPoint);
+        amount = 100 / self.size / (Math.pow(distance, 2) + 1);
+
+        self._inkAmount += amount;
+        self._inkAmount = Math.max(self._inkAmount - distance / 10, 0);
+
+        x = self._lastPoint.x + Math.sin(angle) - self.size / 2;
+        y = self._lastPoint.y + Math.cos(angle) - self.size / 2;
+        self.canvas.contextTop.drawImage(
+          self.brush._element,
+          x,
+          y,
+          self.size,
+          self.size
+        );
+
+        if (self.canvas._isCurrentlyDrawing) {
+          setTimeout(draw, self._interval);
+        } else {
+          self._reset();
+        }
+      }
+
+      draw();
+    },
+
+    _reset: function () {
+      this._point = null;
+      this._lastPoint = null;
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+  }); // End SpraypaintBrush
+
+  /**
+   * SquaresBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    bgColor: "#fff",
+    opacity: 1,
+    width: 1,
+
+    _lastPoint: null,
+    _drawn: false,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.bgColor = opt.bgColor || "#fff";
+      this.opacity = opt.opacity || this.opacity;
+    },
+
+    onMouseDown: function (pointer) {
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color),
+        bgColor = fabric.util.colorValues(this.bgColor);
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this._drawn = false;
+
+      //ctx.globalCompositeOperation = 'source-over';
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      ctx.fillStyle =
+        "rgba(" +
+        bgColor[0] +
+        "," +
+        bgColor[1] +
+        "," +
+        bgColor[2] +
+        "," +
+        bgColor[3] +
+        ")";
+      ctx.strokeStyle =
+        "rgba(" +
+        color[0] +
+        "," +
+        color[1] +
+        "," +
+        color[2] +
+        "," +
+        color[3] +
+        ")";
+      ctx.lineWidth = this.width;
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var ctx = this.canvas.contextTop,
+        dx = pointer.x - this._lastPoint.x,
+        dy = pointer.y - this._lastPoint.y,
+        angle = 1.57079633,
+        px = Math.cos(angle) * dx - Math.sin(angle) * dy,
+        py = Math.sin(angle) * dx + Math.cos(angle) * dy;
+
+      ctx.beginPath();
+      ctx.moveTo(this._lastPoint.x - px, this._lastPoint.y - py);
+      ctx.lineTo(this._lastPoint.x + px, this._lastPoint.y + py);
+      ctx.lineTo(pointer.x + px, pointer.y + py);
+      ctx.lineTo(pointer.x - px, pointer.y - py);
+      ctx.lineTo(this._lastPoint.x - px, this._lastPoint.y - py);
+      ctx.fill();
+      ctx.stroke();
+
+      this._lastPoint = pointer;
+      this._drawn = true;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._drawn) {
+        this.convertToImg();
+      }
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    _render: function () {},
+  }); // End SquaresBrush
+
+  /**
+   * WebBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+      this._count = 0;
+      this._colorValues = fabric.util.colorValues(this.color);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x =
+        pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y =
+        pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var ctx = this.canvas.contextTop,
+        points = this._points,
+        lastPoint = points[points.length - 2],
+        colorValues = this._colorValues,
+        i,
+        dx,
+        dy,
+        d;
+
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle =
+        "rgba(" +
+        colorValues[0] +
+        "," +
+        colorValues[1] +
+        "," +
+        colorValues[2] +
+        "," +
+        0.5 * this.opacity +
+        ")";
+
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      ctx.strokeStyle =
+        "rgba(" +
+        colorValues[0] +
+        "," +
+        colorValues[1] +
+        "," +
+        colorValues[2] +
+        "," +
+        0.1 * this.opacity +
+        ")";
+
+      for (i = 0; i < points.length; i++) {
+        dx = points[i].x - points[this._count].x;
+        dy = points[i].y - points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 2500 && Math.random() > 0.9) {
+          ctx.beginPath();
+          ctx.moveTo(points[this._count].x, points[this._count].y);
+          ctx.lineTo(points[i].x, points[i].y);
+          ctx.stroke();
+        }
+      }
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End WebBrush
+})(fabric);
+// })(typeof fabric !== "undefined" ? fabric : require("fabric").fabric);
diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js b/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js
index 0efa9627..16523d74 100644
--- a/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js
@@ -1,5 +1,5 @@
 import { BaseBrush } from "../BaseBrush";
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import texturePresetManager from "../TexturePresetManager";
 
 /**
@@ -71,7 +71,72 @@ export class TextureBrush extends BaseBrush {
     // 创建fabric原生纹理笔刷
     this.brush = new fabric.PatternBrush(this.canvas);
 
-    // 配置笔刷
+    // 重写 _finalizeAndAddPath 方法，使其调用 convertToImg 而不是创建 Path 对象
+    const originalFinalizeAndAddPath = this.brush._finalizeAndAddPath.bind(
+      this.brush
+    );
+    const self = this; // 保存外部this引用
+
+    this.brush._finalizeAndAddPath = function () {
+      console.log("TextureBrush: _finalizeAndAddPath called");
+      const ctx = this.canvas.contextTop;
+      ctx.closePath();
+
+      // 应用点简化（如果PatternBrush支持）
+      if (this.decimate && this._points) {
+        this._points = this.decimatePoints(this._points, this.decimate);
+      }
+
+      console.log(
+        "TextureBrush: points count =",
+        this._points ? this._points.length : 0
+      );
+
+      // 检查是否有有效的路径数据
+      if (!this._points || this._points.length < 2) {
+        // 如果点数不足，直接请求重新渲染
+        console.log("TextureBrush: Not enough points, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      const pathData = this.convertPointsToSVGPath(this._points);
+
+      const isEmpty = self._isEmptySVGPath(pathData);
+      console.log("TextureBrush: isEmpty =", isEmpty);
+
+      if (isEmpty) {
+        // 如果路径为空，直接请求重新渲染
+        console.log("TextureBrush: Path is empty, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      // 先触发事件，模拟原生行为
+      const path = this.createPath(pathData);
+      this.canvas.fire("before:path:created", { path: path });
+
+      console.log("TextureBrush: Calling convertToImg");
+
+      // 调用 convertToImg 方法将绘制内容转换为图片
+      if (typeof this.convertToImg === "function") {
+        this.convertToImg();
+        console.log("TextureBrush: convertToImg called successfully");
+      } else {
+        console.warn(
+          "convertToImg method not found, falling back to original behavior"
+        );
+        // 如果没有convertToImg方法，回退到原始行为
+        this.canvas.add(path);
+        this.canvas.fire("path:created", { path: path });
+        this.canvas.clearContext(this.canvas.contextTop);
+      }
+
+      // 重置阴影
+      this._resetShadow();
+    };
+
+    // 配置笔刷基本属性
     this.configure(this.brush, this.options);
 
     // 如果有选中的材质，则设置纹理
@@ -221,6 +286,11 @@ export class TextureBrush extends BaseBrush {
     canvasTexture.width = width;
     canvasTexture.height = height;
 
+    // 应用透明度设置
+    if (this.textureOpacity < 1) {
+      ctx.globalAlpha = this.textureOpacity;
+    }
+
     // 绘制前应用旋转
     if (this.textureAngle !== 0) {
       ctx.save();
@@ -233,26 +303,16 @@ export class TextureBrush extends BaseBrush {
       ctx.drawImage(img, 0, 0, width, height);
     }
 
-    // 应用透明度
-    if (this.textureOpacity < 1) {
-      ctx.globalAlpha = this.textureOpacity;
-      ctx.fillStyle = "#fff";
-      ctx.fillRect(0, 0, width, height);
-    }
+    // 缓存处理后的纹理图像
+    this._processedTextureCanvas = canvasTexture;
 
-    // 创建Pattern对象
-    const pattern = new fabric.Pattern({
-      source: canvasTexture,
-      repeat: this.textureRepeat,
-    });
+    // 使用fabric.js 5.x正确的API方式设置PatternBrush
+    // 直接设置source属性，这是PatternBrush的标准用法
+    this.brush.source = canvasTexture;
 
-    // 设置笔刷源纹理
-    if (typeof this.brush.setSource === "function") {
-      this.brush.setSource(pattern);
-    } else if (typeof this.brush.source === "object") {
-      this.brush.source = pattern;
-    } else if (typeof this.brush.pattern === "object") {
-      this.brush.pattern = pattern;
+    // 通知画布重绘
+    if (this.canvas && this.canvas.requestRenderAll) {
+      this.canvas.requestRenderAll();
     }
   }
 
@@ -852,4 +912,37 @@ export class TextureBrush extends BaseBrush {
   getTextureStats() {
     return texturePresetManager.getStats();
   }
+
+  /**
+   * 检查 SVG 路径是否为空
+   * @private
+   * @param {Array} pathData SVG 路径数据
+   * @returns {Boolean} 是否为空路径
+   */
+  _isEmptySVGPath(pathData) {
+    if (!pathData || pathData.length === 0) {
+      return true;
+    }
+
+    // 检查路径是否只包含移动命令或者是一个点
+    let hasDrawing = false;
+    let moveCount = 0;
+
+    for (let i = 0; i < pathData.length; i++) {
+      const command = pathData[i];
+      if (command[0] === "M") {
+        moveCount++;
+      } else if (
+        command[0] === "L" ||
+        command[0] === "Q" ||
+        command[0] === "C"
+      ) {
+        hasDrawing = true;
+        break;
+      }
+    }
+
+    // 如果只有移动命令且超过1个，或者没有绘制命令，则认为是空路径
+    return !hasDrawing || (moveCount > 0 && pathData.length <= moveCount);
+  }
 }
diff --git a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
index 4fae1167..7edc80bb 100644
--- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
@@ -576,7 +576,7 @@ export class CanvasEventManager {
   }
 
   /**
-   * 合并图层中的对象为图像以提高性能
+   * 合并图层中的对象为组以提高性能
    * @param {Object} options 合并选项
    * @param {fabric.Image} options.fabricImage 新的图像对象
    * @param {Object} options.activeLayer 当前活动图层
@@ -594,7 +594,6 @@ export class CanvasEventManager {
       console.warn("合并对象失败：没有活动图层");
       return;
     }
-
     // 验证是否需要合并
     const hasExistingObjects =
       Array.isArray(activeLayer.fabricObjects) &&
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
index 7b34967f..66e71ca8 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
@@ -4,6 +4,7 @@
  */
 import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
 import { LiquifyCPUManager } from "./LiquifyCPUManager";
+import { LayerType } from "../../utils/layerHelper";
 
 export class EnhancedLiquifyManager {
   /**
@@ -313,16 +314,40 @@ export class EnhancedLiquifyManager {
     if (param in this.params) {
       this.params[param] = value;
 
-      // 同步更新当前渲染器
-      if (this.activeRenderer) {
+      // 同步更新当前渲染器 - 关键修复：确保参数正确传递
+      if (
+        this.activeRenderer &&
+        typeof this.activeRenderer.setParam === "function"
+      ) {
+        console.log(`EnhancedLiquifyManager 设置参数: ${param}=${value}`);
         this.activeRenderer.setParam(param, value);
+      } else {
+        console.warn(
+          `EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`
+        );
       }
 
       return true;
     }
+
+    console.warn(`EnhancedLiquifyManager: 无效参数 ${param}`);
     return false;
   }
 
+  /**
+   * 批量设置参数
+   * @param {Object} params 参数对象
+   */
+  setParams(params) {
+    console.log("EnhancedLiquifyManager 批量设置参数:", params);
+
+    if (params && typeof params === "object") {
+      Object.entries(params).forEach(([key, value]) => {
+        this.setParam(key, value);
+      });
+    }
+  }
+
   /**
    * 获取当前参数
    * @returns {Object} 当前参数对象
@@ -348,6 +373,36 @@ export class EnhancedLiquifyManager {
     }
   }
 
+  /**
+   * 开始液化操作（记录初始点）
+   * @param {Number} x 初始X坐标
+   * @param {Number} y 初始Y坐标
+   */
+  startLiquifyOperation(x, y) {
+    if (
+      this.activeRenderer &&
+      typeof this.activeRenderer.startDeformation === "function"
+    ) {
+      this.activeRenderer.startDeformation(x, y);
+    }
+    console.log(
+      `开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`
+    );
+  }
+
+  /**
+   * 结束液化操作
+   */
+  endLiquifyOperation() {
+    if (
+      this.activeRenderer &&
+      typeof this.activeRenderer.endDeformation === "function"
+    ) {
+      this.activeRenderer.endDeformation();
+    }
+    console.log(`结束液化操作，渲染模式=${this.renderMode}`);
+  }
+
   /**
    * 应用液化变形
    * @param {Object} target 目标对象
@@ -468,7 +523,9 @@ export class EnhancedLiquifyManager {
       // 注意：这里不自动切换，因为可能会导致中途渲染结果不一致
     }
   }
-
+  setRealtimeUpdater(realtimeUpdater) {
+    this.realtimeUpdater = realtimeUpdater;
+  }
   /**
    * 重置液化操作
    * @returns {ImageData} 重置后的图像数据
@@ -519,7 +576,7 @@ export class EnhancedLiquifyManager {
 
     // 检查图层是否为空
     let objectsToCheck = [];
-    if (layer.isBackground || layer.type === "background") {
+    if (layer.isBackground || layer.type === "background" || layer.isFixed) {
       // 背景图层使用 fabricObject (单数)
       if (layer.fabricObject) {
         objectsToCheck = [layer.fabricObject];
@@ -548,7 +605,10 @@ export class EnhancedLiquifyManager {
         objectsToCheck[0].type === "rasterized-layer");
 
     // 检查是否为组
-    const isGroup = objectsToCheck.some((obj) => obj.type === "group");
+    const isGroup =
+      objectsToCheck.some((obj) => obj.type === "group") ||
+      layer.type === LayerType.GROUP ||
+      layer.children?.length > 0;
 
     // 如果不是单一图像，需要栅格化
     const needsRasterization = !isImage || isGroup;
@@ -572,26 +632,34 @@ export class EnhancedLiquifyManager {
   async _getImageData(fabricObject) {
     return new Promise((resolve, reject) => {
       try {
-        // 创建临时canvas
+        // 创建临时canvas - 关键修复：使用原始图像尺寸，不考虑fabric对象的缩放
         const tempCanvas = document.createElement("canvas");
-        tempCanvas.width = fabricObject.width * fabricObject.scaleX;
-        tempCanvas.height = fabricObject.height * fabricObject.scaleY;
+        // 使用图像的原始尺寸，而不是缩放后的尺寸
+        tempCanvas.width = fabricObject.width;
+        tempCanvas.height = fabricObject.height;
         const tempCtx = tempCanvas.getContext("2d");
 
         // 如果对象有图像元素
         if (fabricObject._element) {
+          // 绘制原始尺寸的图像
           tempCtx.drawImage(
             fabricObject._element,
             0,
             0,
-            tempCanvas.width,
-            tempCanvas.height
+            fabricObject.width,
+            fabricObject.height
           );
         } else if (fabricObject.getSrc) {
           // 通过URL创建图像
           const img = new Image();
           img.onload = () => {
-            tempCtx.drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);
+            tempCtx.drawImage(
+              img,
+              0,
+              0,
+              fabricObject.width,
+              fabricObject.height
+            );
             const imageData = tempCtx.getImageData(
               0,
               0,
@@ -615,6 +683,13 @@ export class EnhancedLiquifyManager {
           tempCanvas.width,
           tempCanvas.height
         );
+
+        console.log(
+          `获取图像数据: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +
+            `对象缩放=(${fabricObject.scaleX}, ${fabricObject.scaleY}), ` +
+            `图像数据尺寸=${imageData.width}x${imageData.height}`
+        );
+
         resolve(imageData);
       } catch (error) {
         reject(error);
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/HybridLiquifyManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/HybridLiquifyManager.js
new file mode 100644
index 00000000..bbd34a1c
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/HybridLiquifyManager.js
@@ -0,0 +1,451 @@
+/**
+ * 混合液化管理器 - 根据模式智能选择算法
+ */
+export class HybridLiquifyManager {
+  constructor(options = {}) {
+    this.config = {
+      gridSize: options.gridSize || 16,
+      maxStrength: options.maxStrength || 200,
+      smoothingIterations: options.smoothingIterations || 1,
+      relaxFactor: options.relaxFactor || 0.1,
+    };
+
+    this.params = {
+      size: 80,
+      pressure: 0.8,
+      distortion: 0,
+      power: 0.8,
+    };
+
+    this.modes = {
+      PUSH: "push",
+      CLOCKWISE: "clockwise",
+      COUNTERCLOCKWISE: "counterclockwise",
+      PINCH: "pinch",
+      EXPAND: "expand",
+      CRYSTAL: "crystal",
+      EDGE: "edge",
+      RECONSTRUCT: "reconstruct",
+    };
+
+    // 定义哪些模式使用像素算法
+    this.pixelModes = new Set([
+      this.modes.CLOCKWISE,
+      this.modes.COUNTERCLOCKWISE,
+      this.modes.CRYSTAL,
+      this.modes.EDGE,
+    ]);
+
+    // 定义哪些模式使用网格算法
+    this.meshModes = new Set([
+      this.modes.PUSH,
+      this.modes.PINCH,
+      this.modes.EXPAND,
+      this.modes.RECONSTRUCT,
+    ]);
+
+    this.currentMode = this.modes.PUSH;
+    this.originalImageData = null;
+    this.currentImageData = null;
+    this.mesh = null;
+    this.initialized = false;
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d");
+
+    // 持续按压相关状态
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.isHolding = false;
+    this.continuousTimer = null;
+
+    // 鼠标状态
+    this.initialMouseX = 0;
+    this.initialMouseY = 0;
+    this.currentMouseX = 0;
+    this.currentMouseY = 0;
+    this.isDragging = false;
+    this.dragDistance = 0;
+  }
+
+  // ...existing initialization methods...
+
+  /**
+   * 应用液化变形 - 智能选择算法
+   */
+  applyDeformation(x, y) {
+    if (!this.initialized || !this.originalImageData) {
+      return this.currentImageData;
+    }
+
+    // 更新鼠标位置
+    this.currentMouseX = x;
+    this.currentMouseY = y;
+
+    const { size, pressure, power } = this.params;
+    const radius = size;
+    const strength = pressure * power;
+
+    // 根据模式选择算法
+    if (this.pixelModes.has(this.currentMode)) {
+      return this._applyPixelDeformation(x, y, radius, strength);
+    } else if (this.meshModes.has(this.currentMode)) {
+      return this._applyMeshDeformation(x, y, radius, strength);
+    }
+
+    return this.currentImageData;
+  }
+
+  /**
+   * 像素级液化算法 - 适用于旋转、水晶、边缘模式
+   */
+  _applyPixelDeformation(centerX, centerY, radius, strength) {
+    const data = this.currentImageData.data;
+    const width = this.currentImageData.width;
+    const height = this.currentImageData.height;
+    const tempData = new Uint8ClampedArray(data);
+
+    const processRadius = Math.min(radius, Math.min(width, height) / 2);
+
+    // 计算影响区域边界
+    const minX = Math.max(0, Math.floor(centerX - processRadius));
+    const maxX = Math.min(width, Math.ceil(centerX + processRadius));
+    const minY = Math.max(0, Math.floor(centerY - processRadius));
+    const maxY = Math.min(height, Math.ceil(centerY + processRadius));
+
+    switch (this.currentMode) {
+      case this.modes.CLOCKWISE:
+      case this.modes.COUNTERCLOCKWISE:
+        this._applyPixelRotation(
+          tempData,
+          data,
+          width,
+          height,
+          centerX,
+          centerY,
+          processRadius,
+          strength,
+          this.currentMode === this.modes.CLOCKWISE
+        );
+        break;
+
+      case this.modes.CRYSTAL:
+        this._applyPixelCrystal(
+          tempData,
+          data,
+          width,
+          height,
+          centerX,
+          centerY,
+          processRadius,
+          strength
+        );
+        break;
+
+      case this.modes.EDGE:
+        this._applyPixelEdge(
+          tempData,
+          data,
+          width,
+          height,
+          centerX,
+          centerY,
+          processRadius,
+          strength
+        );
+        break;
+    }
+
+    return this.currentImageData;
+  }
+
+  /**
+   * 像素级旋转算法
+   */
+  _applyPixelRotation(
+    srcData,
+    dstData,
+    width,
+    height,
+    centerX,
+    centerY,
+    radius,
+    strength,
+    clockwise
+  ) {
+    // 计算旋转角度
+    const timeFactor = Math.min(this.pressDuration / 1000, 5.0);
+    const baseRotationSpeed = 0.015;
+    const rotationAngle =
+      (clockwise ? 1 : -1) *
+      baseRotationSpeed *
+      strength *
+      (1.0 + timeFactor * 0.3);
+
+    this.accumulatedRotation += rotationAngle;
+
+    const minX = Math.max(0, Math.floor(centerX - radius));
+    const maxX = Math.min(width, Math.ceil(centerX + radius));
+    const minY = Math.max(0, Math.floor(centerY - radius));
+    const maxY = Math.min(height, Math.ceil(centerY + radius));
+
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < radius && distance > 0.1) {
+          // 距离衰减：内圈快，外圈慢
+          const normalizedDistance = distance / radius;
+          const falloff = Math.pow(1 - normalizedDistance, 2); // 二次衰减
+
+          // 计算旋转后的源位置
+          const angle = Math.atan2(dy, dx);
+          const newAngle = angle + this.accumulatedRotation * falloff;
+
+          const sourceX = centerX + Math.cos(newAngle) * distance;
+          const sourceY = centerY + Math.sin(newAngle) * distance;
+
+          // 双线性插值采样
+          const color = this._bilinearSample(
+            srcData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            dstData[targetIdx] = color[0];
+            dstData[targetIdx + 1] = color[1];
+            dstData[targetIdx + 2] = color[2];
+            dstData[targetIdx + 3] = color[3];
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 像素级水晶效果
+   */
+  _applyPixelCrystal(
+    srcData,
+    dstData,
+    width,
+    height,
+    centerX,
+    centerY,
+    radius,
+    strength
+  ) {
+    const timeFactor = Math.min(this.pressDuration / 1000, 3.0);
+    const distortionStrength = strength * (1.0 + timeFactor * 0.5);
+
+    const minX = Math.max(0, Math.floor(centerX - radius));
+    const maxX = Math.min(width, Math.ceil(centerX + radius));
+    const minY = Math.max(0, Math.floor(centerY - radius));
+    const maxY = Math.min(height, Math.ceil(centerY + radius));
+
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < radius && distance > 0.1) {
+          const normalizedDistance = distance / radius;
+          const falloff = 1 - normalizedDistance * normalizedDistance;
+
+          const angle = Math.atan2(dy, dx);
+          const crystalRadius = normalizedDistance;
+
+          // 多层波浪扭曲
+          const wave1 = Math.sin(angle * 8 + this.pressDuration * 0.005) * 0.6;
+          const wave2 = Math.cos(angle * 12 + this.pressDuration * 0.003) * 0.4;
+          const waveAngle =
+            angle + (wave1 + wave2) * distortionStrength * falloff;
+
+          const radialMod =
+            1 +
+            Math.sin(crystalRadius * Math.PI * 2 + this.pressDuration * 0.002) *
+              0.3;
+          const modDistance = distance * radialMod;
+
+          const sourceX = centerX + Math.cos(waveAngle) * modDistance;
+          const sourceY = centerY + Math.sin(waveAngle) * modDistance;
+
+          const color = this._bilinearSample(
+            srcData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            const factor = falloff * distortionStrength * 0.7;
+
+            // 混合原始颜色和扭曲颜色
+            const originalIdx = (y * width + x) * 4;
+            dstData[targetIdx] = Math.round(
+              srcData[originalIdx] * (1 - factor) + color[0] * factor
+            );
+            dstData[targetIdx + 1] = Math.round(
+              srcData[originalIdx + 1] * (1 - factor) + color[1] * factor
+            );
+            dstData[targetIdx + 2] = Math.round(
+              srcData[originalIdx + 2] * (1 - factor) + color[2] * factor
+            );
+            dstData[targetIdx + 3] = srcData[originalIdx + 3];
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 像素级边缘效果
+   */
+  _applyPixelEdge(
+    srcData,
+    dstData,
+    width,
+    height,
+    centerX,
+    centerY,
+    radius,
+    strength
+  ) {
+    const timeFactor = Math.min(this.pressDuration / 1000, 2.5);
+    const edgeStrength = strength * (1.0 + timeFactor * 0.4);
+
+    const minX = Math.max(0, Math.floor(centerX - radius));
+    const maxX = Math.min(width, Math.ceil(centerX + radius));
+    const minY = Math.max(0, Math.floor(centerY - radius));
+    const maxY = Math.min(height, Math.ceil(centerY + radius));
+
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < radius && distance > 0.1) {
+          const normalizedDistance = distance / radius;
+          const falloff = 1 - normalizedDistance * normalizedDistance;
+
+          const angle = Math.atan2(dy, dx);
+          const edgeRadius = normalizedDistance;
+
+          const edgeWave =
+            Math.sin(edgeRadius * Math.PI * 4 + this.pressDuration * 0.004) *
+            Math.cos(angle * 6 + this.pressDuration * 0.002);
+          const perpAngle = angle + Math.PI / 2;
+
+          const edgeFactor = edgeWave * falloff * edgeStrength * 0.5;
+          const offsetX = Math.cos(perpAngle) * edgeFactor;
+          const offsetY = Math.sin(perpAngle) * edgeFactor;
+
+          const sourceX = x + offsetX;
+          const sourceY = y + offsetY;
+
+          const color = this._bilinearSample(
+            srcData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            dstData[targetIdx] = color[0];
+            dstData[targetIdx + 1] = color[1];
+            dstData[targetIdx + 2] = color[2];
+            dstData[targetIdx + 3] = color[3];
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 双线性插值采样
+   */
+  _bilinearSample(data, width, height, x, y) {
+    if (x < 0 || x >= width - 1 || y < 0 || y >= height - 1) {
+      return null;
+    }
+
+    const x1 = Math.floor(x);
+    const y1 = Math.floor(y);
+    const x2 = x1 + 1;
+    const y2 = y1 + 1;
+
+    const fx = x - x1;
+    const fy = y - y1;
+
+    const getPixel = (px, py) => {
+      const idx = (py * width + px) * 4;
+      return [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]];
+    };
+
+    const p1 = getPixel(x1, y1);
+    const p2 = getPixel(x2, y1);
+    const p3 = getPixel(x1, y2);
+    const p4 = getPixel(x2, y2);
+
+    return [
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[0] +
+          fx * (1 - fy) * p2[0] +
+          (1 - fx) * fy * p3[0] +
+          fx * fy * p4[0]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[1] +
+          fx * (1 - fy) * p2[1] +
+          (1 - fx) * fy * p3[1] +
+          fx * fy * p4[1]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[2] +
+          fx * (1 - fy) * p2[2] +
+          (1 - fx) * fy * p3[2] +
+          fx * fy * p4[2]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[3] +
+          fx * (1 - fy) * p2[3] +
+          (1 - fx) * fy * p3[3] +
+          fx * fy * p4[3]
+      ),
+    ];
+  }
+
+  /**
+   * 网格液化算法 - 适用于推拉、捏合、展开模式
+   */
+  _applyMeshDeformation(x, y, radius, strength) {
+    if (!this.mesh) return this.currentImageData;
+
+    // 使用现有的网格算法处理推拉、捏合、展开
+    const mode = this.currentMode;
+    const { distortion } = this.params;
+
+    this._applyDeformation(x, y, radius, strength, mode, distortion);
+
+    if (this.config.smoothingIterations > 0) {
+      this._smoothMesh();
+    }
+
+    return this._applyMeshToImage();
+  }
+
+  // ...existing mesh methods...
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
index 45a18071..bfbd93d8 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
@@ -1,6 +1,6 @@
 /**
  * CPU版本的液化管理器
- * 修复版本 - 解决三角形网格失真问题
+ * 修复版本 - 解决三角形网格失真问题，优化持续按压效果
  */
 export class LiquifyCPUManager {
   constructor(options = {}) {
@@ -44,11 +44,27 @@ export class LiquifyCPUManager {
     this.isProcessing = false;
 
     // 鼠标位置跟踪（用于推拉模式）
+    this.initialMouseX = 0; // 初始点击位置X
+    this.initialMouseY = 0; // 初始点击位置Y
+    this.currentMouseX = 0; // 当前鼠标位置X
+    this.currentMouseY = 0; // 当前鼠标位置Y
     this.lastMouseX = 0;
     this.lastMouseY = 0;
     this.mouseMovementX = 0;
     this.mouseMovementY = 0;
     this.isFirstApply = true; // 标记是否是首次应用
+    this.isDragging = false; // 标记是否正在拖拽
+    this.dragDistance = 0; // 拖拽距离
+    this.dragAngle = 0; // 拖拽角度
+
+    // 新增：持续按压相关状态
+    this.pressStartTime = 0; // 按压开始时间
+    this.pressDuration = 0; // 按压持续时间
+    this.accumulatedRotation = 0; // 累积旋转角度（用于顺时针/逆时针）
+    this.accumulatedScale = 0; // 累积缩放量（用于捏合/展开）
+    this.lastApplyTime = 0; // 上次应用时间
+    this.continuousApplyInterval = 50; // 持续应用间隔（毫秒）
+    this.isHolding = false; // 是否正在持续按压
   }
 
   initialize(imageSource) {
@@ -144,172 +160,664 @@ export class LiquifyCPUManager {
     };
   }
 
-  applyDeformation(x, y) {
-    // 计算鼠标移动方向
-    if (!this.isFirstApply) {
-      this.mouseMovementX = x - this.lastMouseX;
-      this.mouseMovementY = y - this.lastMouseY;
-    } else {
-      // 首次应用时不计算移动，避免初始变形
-      this.mouseMovementX = 0;
-      this.mouseMovementY = 0;
-      this.isFirstApply = false;
-    }
-
+  /**
+   * 开始液化操作（记录初始点）
+   * @param {Number} x 初始X坐标
+   * @param {Number} y 初始Y坐标
+   */
+  startDeformation(x, y) {
+    this.initialMouseX = x;
+    this.initialMouseY = y;
+    this.currentMouseX = x;
+    this.currentMouseY = y;
     this.lastMouseX = x;
     this.lastMouseY = y;
+    this.isDragging = true;
+    this.isFirstApply = true;
+    this.dragDistance = 0;
+    this.dragAngle = 0;
 
-    // 性能优化：限制更新频率
-    const now = Date.now();
-    if (now - this.lastUpdateTime < this.updateThrottle || this.isProcessing) {
-      return this.currentImageData;
-    }
+    // 新增：初始化持续按压状态
+    this.pressStartTime = Date.now();
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.lastApplyTime = this.pressStartTime;
+    this.isHolding = true;
 
-    this.isProcessing = true;
-    this.lastUpdateTime = now;
+    // 启动持续效果定时器（对于所有模式都支持持续按压）
+    this.startContinuousEffect();
 
-    if (!this.initialized || !this.mesh) {
-      this.isProcessing = false;
-      return this.currentImageData;
-    }
-
-    const { size, pressure, distortion, power } = this.params;
-    const mode = this.currentMode;
-    const radius = size * 1.2; // 稍微增大影响半径
-    const strength = (pressure * power * this.config.maxStrength) / 20; // 调整基础强度
-
-    this._applyDeformation(x, y, radius, strength, mode, distortion);
-
-    if (this.config.smoothingIterations > 0) {
-      this._smoothMesh();
-    }
-
-    const result = this._applyMeshToImage();
-    this.isProcessing = false;
-    return result;
+    console.log(`开始液化操作，初始点: (${x}, ${y})`);
   }
 
+  /**
+   * 结束液化操作
+   */
+  endDeformation() {
+    this.isDragging = false;
+    this.isFirstApply = true;
+    this.dragDistance = 0;
+    this.dragAngle = 0;
+
+    // 新增：重置持续按压状态
+    this.isHolding = false;
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.lastApplyTime = 0;
+
+    // 停止持续效果定时器
+    this.stopContinuousEffect();
+
+    console.log("结束液化操作");
+  }
+
+  // 新增：启动持续效果
+  startContinuousEffect() {
+    this.stopContinuousEffect(); // 先停止已有的定时器
+
+    this.continuousTimer = setInterval(() => {
+      if (this.isHolding && this.initialized) {
+        // 更新持续时间
+        this.pressDuration = Date.now() - this.pressStartTime;
+
+        // 所有模式都支持持续效果
+        this.applyContinuousDeformation();
+      }
+    }, this.continuousApplyInterval);
+  }
+
+  // 新增：停止持续效果
+  stopContinuousEffect() {
+    if (this.continuousTimer) {
+      clearInterval(this.continuousTimer);
+      this.continuousTimer = null;
+    }
+  }
+
+  /**
+   * 稳定的旋转衰减函数 - 确保内圈快外圈慢，保持纹理连续性
+   * @param {number} t 归一化距离 (0-1)
+   * @returns {number} 衰减因子 (0-1)
+   */
+  _stableRotationFalloff(t) {
+    if (t >= 1.0) return 0;
+    if (t <= 0) return 1;
+
+    // 使用反向二次函数：内圈(t=0)时值为1，外圈(t=1)时值为0
+    // 这确保了内圈旋转最快，外圈旋转最慢
+    const inverseFalloff = 1 - t;
+
+    // 使用平滑的二次衰减，确保内圈效果强，外圈效果弱
+    const quadraticFalloff = inverseFalloff * inverseFalloff;
+
+    // 添加轻微的线性分量，确保过渡平滑
+    const linearFalloff = inverseFalloff;
+
+    // 混合二次和线性衰减，70%二次衰减 + 30%线性衰减
+    return quadraticFalloff * 0.7 + linearFalloff * 0.3;
+  }
+
+  /**
+   * 基于test-liquify-enhanced.html的旋转算法 - 像素级实现
+   * @param {number} centerX 旋转中心X坐标
+   * @param {number} centerY 旋转中心Y坐标
+   * @param {number} radius 影响半径
+   * @param {number} strength 强度
+   * @param {boolean} isClockwise 是否顺时针旋转
+   */
+  _applyEnhancedRotationDeformation(
+    centerX,
+    centerY,
+    radius,
+    strength,
+    isClockwise
+  ) {
+    if (!this.currentImageData) return;
+
+    const data = this.currentImageData.data;
+    const width = this.currentImageData.width;
+    const height = this.currentImageData.height;
+    const tempData = new Uint8ClampedArray(data);
+
+    // 计算旋转角度 - 基于test-liquify-enhanced.html的算法
+    const { pressure, power } = this.params;
+    const timeFactor = Math.min(this.pressDuration / 1000, 5.0);
+    const baseRotationSpeed = 0.02; // 使用与测试文件相同的速度
+    const rotationAngle =
+      (isClockwise ? 1 : -1) *
+      baseRotationSpeed *
+      pressure *
+      power *
+      (1.0 + timeFactor * 0.5);
+
+    // 累积旋转角度 - 关键：这确保了持续旋转效果
+    this.accumulatedRotation += rotationAngle;
+
+    const processRadius = Math.min(radius, Math.min(width, height) / 2);
+    const minX = Math.max(0, Math.floor(centerX - processRadius));
+    const maxX = Math.min(width, Math.ceil(centerX + processRadius));
+    const minY = Math.max(0, Math.floor(centerY - processRadius));
+    const maxY = Math.min(height, Math.ceil(centerY + processRadius));
+
+    // 遍历影响区域内的每个像素
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < processRadius && distance > 0.1) {
+          // 距离衰减：内圈快，外圈慢 - 与测试文件算法一致
+          const normalizedDistance = distance / processRadius;
+          const falloff = Math.pow(1 - normalizedDistance, 2); // 二次衰减
+
+          // 计算旋转后的源位置 - 关键算法
+          const angle = Math.atan2(dy, dx);
+          const newAngle = angle + this.accumulatedRotation * falloff;
+
+          const sourceX = centerX + Math.cos(newAngle) * distance;
+          const sourceY = centerY + Math.sin(newAngle) * distance;
+
+          // 双线性插值采样 - 确保像素连续性
+          const color = this._bilinearSample(
+            tempData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            data[targetIdx] = color[0];
+            data[targetIdx + 1] = color[1];
+            data[targetIdx + 2] = color[2];
+            data[targetIdx + 3] = color[3];
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 基于test-liquify-enhanced.html的捏合/展开算法
+   * @param {number} centerX 中心X坐标
+   * @param {number} centerY 中心Y坐标
+   * @param {number} radius 影响半径
+   * @param {number} strength 强度
+   * @param {boolean} isPinch 是否为捏合模式
+   */
+  _applyEnhancedPinchDeformation(centerX, centerY, radius, strength, isPinch) {
+    if (!this.currentImageData) return;
+
+    const data = this.currentImageData.data;
+    const width = this.currentImageData.width;
+    const height = this.currentImageData.height;
+    const tempData = new Uint8ClampedArray(data);
+
+    // 计算时间相关的缩放因子 - 基于test-liquify-enhanced.html
+    const timeFactor = Math.min(this.pressDuration / 1000, 3.0);
+    const baseScaleFactor = isPinch ? -0.01 : 0.01;
+    const scaleFactor = baseScaleFactor * (1.0 + timeFactor * 0.5);
+
+    this.accumulatedScale += scaleFactor;
+
+    const processRadius = Math.min(radius, Math.min(width, height) / 2);
+    const minX = Math.max(0, Math.floor(centerX - processRadius));
+    const maxX = Math.min(width, Math.ceil(centerX + processRadius));
+    const minY = Math.max(0, Math.floor(centerY - processRadius));
+    const maxY = Math.min(height, Math.ceil(centerY + processRadius));
+
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < processRadius && distance > 0.1) {
+          const normalizedDistance = distance / processRadius;
+          const falloff = 1 - normalizedDistance * normalizedDistance;
+
+          // 计算缩放后的位置
+          const scale = 1 + this.accumulatedScale * falloff;
+          const sourceX = centerX + dx * scale;
+          const sourceY = centerY + dy * scale;
+
+          // 双线性插值采样
+          const color = this._bilinearSample(
+            tempData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            data[targetIdx] = color[0];
+            data[targetIdx + 1] = color[1];
+            data[targetIdx + 2] = color[2];
+            data[targetIdx + 3] = color[3];
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 基于test-liquify-enhanced.html的推拉算法
+   * @param {number} centerX 中心X坐标
+   * @param {number} centerY 中心Y坐标
+   * @param {number} radius 影响半径
+   * @param {number} strength 强度
+   */
+  _applyEnhancedPushDeformation(centerX, centerY, radius, strength) {
+    if (!this.currentImageData) return;
+
+    const data = this.currentImageData.data;
+    const width = this.currentImageData.width;
+    const height = this.currentImageData.height;
+    const tempData = new Uint8ClampedArray(data);
+
+    // 计算推拉方向
+    const deltaX = this.currentMouseX - this.initialMouseX;
+    const deltaY = this.currentMouseY - this.initialMouseY;
+    const dragLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+    const processRadius = Math.min(radius, Math.min(width, height) / 2);
+    const minX = Math.max(0, Math.floor(centerX - processRadius));
+    const maxX = Math.min(width, Math.ceil(centerX + processRadius));
+    const minY = Math.max(0, Math.floor(centerY - processRadius));
+    const maxY = Math.min(height, Math.ceil(centerY + processRadius));
+
+    if (dragLength === 0) {
+      // 如果没有拖拽，在持续按压时执行基础的外推效果
+      if (this.isHolding) {
+        const timeFactor = Math.min(this.pressDuration / 1000, 2.0);
+        const pushStrength = strength * timeFactor * 0.3;
+
+        for (let y = minY; y < maxY; y++) {
+          for (let x = minX; x < maxX; x++) {
+            const dx = x - centerX;
+            const dy = y - centerY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance < processRadius && distance > 0.1) {
+              const normalizedDistance = distance / processRadius;
+              const falloff = 1 - normalizedDistance * normalizedDistance;
+              const factor = falloff * pushStrength;
+
+              // 径向外推效果
+              const pushX = (dx / distance) * factor;
+              const pushY = (dy / distance) * factor;
+
+              const sourceX = x - pushX;
+              const sourceY = y - pushY;
+
+              const color = this._bilinearSample(
+                tempData,
+                width,
+                height,
+                sourceX,
+                sourceY
+              );
+
+              if (color) {
+                const targetIdx = (y * width + x) * 4;
+                data[targetIdx] = color[0];
+                data[targetIdx + 1] = color[1];
+                data[targetIdx + 2] = color[2];
+                data[targetIdx + 3] = color[3];
+              }
+            }
+          }
+        }
+      }
+      return true;
+    }
+
+    // 有拖拽时的推拉效果
+    const dirX = deltaX / dragLength;
+    const dirY = deltaY / dragLength;
+
+    for (let y = minY; y < maxY; y++) {
+      for (let x = minX; x < maxX; x++) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < processRadius && distance > 0.1) {
+          const normalizedDistance = distance / processRadius;
+          const falloff = 1 - normalizedDistance * normalizedDistance;
+          const factor = falloff * strength;
+
+          const offsetX = dirX * factor * Math.min(dragLength * 0.3, 15);
+          const offsetY = dirY * factor * Math.min(dragLength * 0.3, 15);
+
+          const sourceX = x - offsetX;
+          const sourceY = y - offsetY;
+
+          const color = this._bilinearSample(
+            tempData,
+            width,
+            height,
+            sourceX,
+            sourceY
+          );
+
+          if (color) {
+            const targetIdx = (y * width + x) * 4;
+            data[targetIdx] = color[0];
+            data[targetIdx + 1] = color[1];
+            data[targetIdx + 2] = color[2];
+            data[targetIdx + 3] = color[3];
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 优化的持续变形效果处理 - 使用增强算法
+   */
+  applyContinuousDeformation() {
+    if (!this.isHolding || !this.initialized || !this.currentImageData) return;
+
+    const { size, pressure, power } = this.params;
+    const mode = this.currentMode;
+    const radius = size;
+    const x = this.initialMouseX;
+    const y = this.initialMouseY;
+    const strength = pressure * power;
+
+    // 根据模式使用相应的增强算法
+    switch (mode) {
+      case this.modes.CLOCKWISE:
+        this._applyEnhancedRotationDeformation(x, y, radius, strength, true);
+        break;
+
+      case this.modes.COUNTERCLOCKWISE:
+        this._applyEnhancedRotationDeformation(x, y, radius, strength, false);
+        break;
+
+      case this.modes.PINCH:
+        this._applyEnhancedPinchDeformation(x, y, radius, strength, true);
+        break;
+
+      case this.modes.EXPAND:
+        this._applyEnhancedPinchDeformation(x, y, radius, strength, false);
+        break;
+
+      case this.modes.PUSH:
+        this._applyEnhancedPushDeformation(x, y, radius, strength);
+        break;
+
+      default:
+        // 对于其他模式，使用原有的网格算法
+        if (!this.mesh) return;
+
+        const baseStrength = (pressure * power * this.config.maxStrength) / 100;
+        const timeFactor = Math.min(this.pressDuration / 1000, 4.0);
+        const finalStrength = baseStrength * (1.0 + timeFactor * 0.5);
+
+        this._applyDeformation(
+          x,
+          y,
+          radius,
+          finalStrength,
+          mode,
+          this.params.distortion
+        );
+
+        if (this.config.smoothingIterations > 0) {
+          this._lightSmoothing();
+        }
+
+        return this._applyMeshToImage();
+    }
+
+    // 对于像素算法，直接返回当前图像数据
+    return this.currentImageData;
+  }
+
+  /**
+   * 应用液化变形 - 主要入口，集成增强算法
+   */
+  applyDeformation(x, y) {
+    if (!this.initialized || !this.originalImageData) {
+      console.warn("液化管理器未初始化或缺少必要数据");
+      return this.currentImageData;
+    }
+
+    // 更新鼠标位置
+    this.currentMouseX = x;
+    this.currentMouseY = y;
+
+    // 计算拖拽参数
+    const deltaX = this.currentMouseX - this.initialMouseX;
+    const deltaY = this.currentMouseY - this.initialMouseY;
+    this.dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    this.dragAngle = Math.atan2(deltaY, deltaX);
+
+    // 获取当前参数
+    const { size, pressure, power } = this.params;
+    const mode = this.currentMode;
+    const radius = size;
+    const strength = pressure * power;
+
+    // 根据模式选择算法
+    const pixelModes = [
+      this.modes.CLOCKWISE,
+      this.modes.COUNTERCLOCKWISE,
+      this.modes.PINCH,
+      this.modes.EXPAND,
+      this.modes.PUSH,
+    ];
+
+    if (pixelModes.includes(mode)) {
+      // 使用增强的像素算法
+      switch (mode) {
+        case this.modes.CLOCKWISE:
+          this._applyEnhancedRotationDeformation(x, y, radius, strength, true);
+          break;
+        case this.modes.COUNTERCLOCKWISE:
+          this._applyEnhancedRotationDeformation(x, y, radius, strength, false);
+          break;
+        case this.modes.PINCH:
+          this._applyEnhancedPinchDeformation(x, y, radius, strength, true);
+          break;
+        case this.modes.EXPAND:
+          this._applyEnhancedPinchDeformation(x, y, radius, strength, false);
+          break;
+        case this.modes.PUSH:
+          this._applyEnhancedPushDeformation(x, y, radius, strength);
+          break;
+      }
+
+      // 更新最后应用时间
+      this.lastApplyTime = Date.now();
+      this.isFirstApply = false;
+
+      return this.currentImageData;
+    } else {
+      // 使用原有的网格算法处理其他模式
+      if (!this.mesh) {
+        console.warn("网格未初始化");
+        return this.currentImageData;
+      }
+
+      const finalStrength = (strength * this.config.maxStrength) / 100;
+
+      // 应用变形
+      this._applyDeformation(
+        x,
+        y,
+        radius,
+        finalStrength,
+        mode,
+        this.params.distortion
+      );
+
+      // 平滑处理
+      if (this.config.smoothingIterations > 0) {
+        this._smoothMesh();
+      }
+
+      // 更新图像数据
+      const result = this._applyMeshToImage();
+
+      // 更新最后应用时间
+      this.lastApplyTime = Date.now();
+      this.isFirstApply = false;
+
+      return result;
+    }
+  }
+
+  /**
+   * 双线性插值采样 - 用于像素级算法
+   * @param {Uint8ClampedArray} data 图像数据
+   * @param {number} width 图像宽度
+   * @param {number} height 图像高度
+   * @param {number} x X坐标
+   * @param {number} y Y坐标
+   * @returns {Array|null} RGBA颜色值数组或null
+   */
+  _bilinearSample(data, width, height, x, y) {
+    if (x < 0 || x >= width - 1 || y < 0 || y >= height - 1) {
+      return null;
+    }
+
+    const x1 = Math.floor(x);
+    const y1 = Math.floor(y);
+    const x2 = x1 + 1;
+    const y2 = y1 + 1;
+
+    const fx = x - x1;
+    const fy = y - y1;
+
+    const getPixel = (px, py) => {
+      const idx = (py * width + px) * 4;
+      return [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]];
+    };
+
+    const p1 = getPixel(x1, y1);
+    const p2 = getPixel(x2, y1);
+    const p3 = getPixel(x1, y2);
+    const p4 = getPixel(x2, y2);
+
+    return [
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[0] +
+          fx * (1 - fy) * p2[0] +
+          (1 - fx) * fy * p3[0] +
+          fx * fy * p4[0]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[1] +
+          fx * (1 - fy) * p2[1] +
+          (1 - fx) * fy * p3[1] +
+          fx * fy * p4[1]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[2] +
+          fx * (1 - fy) * p2[2] +
+          (1 - fx) * fy * p3[2] +
+          fx * fy * p4[2]
+      ),
+      Math.round(
+        (1 - fx) * (1 - fy) * p1[3] +
+          fx * (1 - fy) * p2[3] +
+          (1 - fx) * fy * p3[3] +
+          fx * fy * p4[3]
+      ),
+    ];
+  }
+
+  /**
+   * 应用变形到网格 - 原有的网格算法（用于其他模式）
+   */
   _applyDeformation(x, y, radius, strength, mode, distortion) {
     if (!this.mesh) return;
 
     const points = this.mesh.deformedPoints;
     const originalPoints = this.mesh.originalPoints;
 
-    for (let i = 0; i < points.length; i++) {
-      const point = points[i];
-      const originalPoint = originalPoints[i];
-      const dx = point.x - x;
-      const dy = point.y - y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
+    // 性能优化：只计算影响范围内的网格点
+    const affectedPoints = this._getAffectedPoints(x, y, radius);
 
-      if (distance < radius && distance > 0) {
-        // 使用平方衰减函数
-        const factor = Math.pow(1 - distance / radius, 2) * strength * 0.1; // 大幅降低基础系数
+    for (const pointInfo of affectedPoints) {
+      const { index: i, point, originalPoint, distance } = pointInfo;
+
+      if (distance > 0) {
+        // 使用优化的衰减函数
+        const normalizedDistance = distance / radius;
+        const factor = this._optimizedFalloff(normalizedDistance) * strength;
 
         switch (mode) {
-          case this.modes.PUSH: {
-            // 推拉模式 - 真正的拖拽效果
-            // 计算实际移动距离
-            const movementLength = Math.sqrt(
-              this.mouseMovementX * this.mouseMovementX +
-                this.mouseMovementY * this.mouseMovementY
-            );
-
-            // 只有在有足够移动距离时才应用效果
-            if (movementLength > 1.0) {
-              // 提高阈值，确保有明显移动
-              // 归一化移动方向
-              const moveX = this.mouseMovementX / movementLength;
-              const moveY = this.mouseMovementY / movementLength;
-
-              // 计算衰减（距离中心越近，效果越强）
-              const radiusRatio = distance / radius;
-              const falloff = Math.pow(1 - radiusRatio, 2.0); // 使用更强的衰减
-
-              // 基于实际移动距离计算强度
-              const { pressure, power } = this.params;
-              const moveStrength = pressure * power * movementLength * 0.3; // 降低移动强度系数
-
-              // 计算最终拖拽强度
-              const dragStrength = moveStrength * falloff * factor;
-
-              // 向鼠标移动方向拖拽
-              const dragX = moveX * dragStrength;
-              const dragY = moveY * dragStrength;
-
-              // 应用变形，但限制最大变形量
-              const maxDeform = 2.0; // 限制单次最大变形量
-              point.x += Math.max(-maxDeform, Math.min(maxDeform, dragX));
-              point.y += Math.max(-maxDeform, Math.min(maxDeform, dragY));
-            }
-            break;
-          }
-          case this.modes.CLOCKWISE:
-          case this.modes.COUNTERCLOCKWISE: {
-            // 旋转模式 - 保持原有效果
-            const angle = Math.atan2(dy, dx);
-            const direction = mode === this.modes.CLOCKWISE ? 1 : -1;
-            const rotationAngle = angle + direction * factor;
-            const newX = x + Math.cos(rotationAngle) * distance;
-            const newY = y + Math.sin(rotationAngle) * distance;
-
-            point.x += (newX - point.x) * 0.8;
-            point.y += (newY - point.y) * 0.8;
-            break;
-          }
-          case this.modes.PINCH: {
-            // 捏合模式 - 保持原有效果
-            const pinchStrength = factor * 1.2;
-            point.x -= dx * pinchStrength;
-            point.y -= dy * pinchStrength;
-            break;
-          }
-          case this.modes.EXPAND: {
-            // 展开模式 - 参考捏合的反向操作
-            const expandFactor = factor * 1.5;
-            point.x += dx * expandFactor;
-            point.y += dy * expandFactor;
-            break;
-          }
           case this.modes.CRYSTAL: {
-            // 水晶模式 - 参考旋转算法创建多重波形
+            // 水晶模式
+            const dx = point.x - x;
+            const dy = point.y - y;
             const crystalAngle = Math.atan2(dy, dx);
-            const crystalRadius = distance / radius;
+            const crystalRadius = normalizedDistance;
 
-            // 确保有基础效果
             const baseDistortion = Math.max(distortion, 0.3);
+            const timeFactor = Math.min(this.pressDuration / 1000, 2.0);
+            const timeEnhancedDistortion =
+              baseDistortion * (1.0 + timeFactor * 0.3);
 
-            // 多重波形 - 类似旋转的角度调制
-            const wave1 = Math.sin(crystalAngle * 8) * 0.6;
-            const wave2 = Math.cos(crystalAngle * 12) * 0.4;
-            const waveAngle = crystalAngle + (wave1 + wave2) * baseDistortion;
+            const wave1 =
+              Math.sin(crystalAngle * 8 + this.pressDuration * 0.005) * 0.6;
+            const wave2 =
+              Math.cos(crystalAngle * 12 + this.pressDuration * 0.003) * 0.4;
+            const waveAngle =
+              crystalAngle + (wave1 + wave2) * timeEnhancedDistortion;
 
-            // 径向调制 - 类似旋转的距离调制
-            const radialMod = 1 + Math.sin(crystalRadius * Math.PI * 2) * 0.3;
+            const radialMod =
+              1 +
+              Math.sin(
+                crystalRadius * Math.PI * 2 + this.pressDuration * 0.002
+              ) *
+                0.3;
             const modDistance = distance * radialMod;
 
             const crystalX = x + Math.cos(waveAngle) * modDistance;
             const crystalY = y + Math.sin(waveAngle) * modDistance;
 
-            const crystalFactor = factor * baseDistortion;
+            const crystalFactor = factor * timeEnhancedDistortion * 0.7;
             point.x += (crystalX - point.x) * crystalFactor;
             point.y += (crystalY - point.y) * crystalFactor;
             break;
           }
+
           case this.modes.EDGE: {
-            // 边缘模式 - 参考旋转算法创建垂直波纹
+            // 边缘模式
+            const dx = point.x - x;
+            const dy = point.y - y;
             const edgeAngle = Math.atan2(dy, dx);
-            const edgeRadius = distance / radius;
+            const edgeRadius = normalizedDistance;
 
-            // 确保有基础效果
             const baseEdgeDistortion = Math.max(distortion, 0.5);
+            const timeFactor = Math.min(this.pressDuration / 1000, 2.5);
+            const timeEnhancedDistortion =
+              baseEdgeDistortion * (1.0 + timeFactor * 0.4);
 
-            // 边缘波纹 - 垂直于径向的调制
             const edgeWave =
-              Math.sin(edgeRadius * Math.PI * 4) * Math.cos(edgeAngle * 6);
-            const perpAngle = edgeAngle + Math.PI / 2; // 垂直角度
+              Math.sin(edgeRadius * Math.PI * 4 + this.pressDuration * 0.004) *
+              Math.cos(edgeAngle * 6 + this.pressDuration * 0.002);
+            const perpAngle = edgeAngle + Math.PI / 2;
 
-            const edgeFactor = edgeWave * factor * baseEdgeDistortion;
+            const edgeFactor = edgeWave * factor * timeEnhancedDistortion * 0.5;
             const edgeOffsetX = Math.cos(perpAngle) * edgeFactor;
             const edgeOffsetY = Math.sin(perpAngle) * edgeFactor;
 
@@ -317,9 +825,10 @@ export class LiquifyCPUManager {
             point.y += edgeOffsetY;
             break;
           }
+
           case this.modes.RECONSTRUCT: {
-            // 重建模式 - 向原始位置恢复
-            const restoreFactor = factor * 0.15;
+            // 重建模式
+            const restoreFactor = factor * 0.2;
             point.x += (originalPoint.x - point.x) * restoreFactor;
             point.y += (originalPoint.y - point.y) * restoreFactor;
             break;
@@ -329,12 +838,48 @@ export class LiquifyCPUManager {
     }
   }
 
-  // 优化衰减函数，使过渡更平滑
-  _smoothFalloff(t) {
-    if (t >= 1) return 0;
-    // 使用更平滑的衰减曲线
-    const smoothT = 1 - t;
-    return smoothT * smoothT * smoothT * (3 - 2 * smoothT);
+  /**
+   * 获取受影响的网格点（范围优化）
+   */
+  _getAffectedPoints(centerX, centerY, radius) {
+    const { cols, rows, gridSize } = this.mesh;
+    const points = this.mesh.deformedPoints;
+    const originalPoints = this.mesh.originalPoints;
+    const affectedPoints = [];
+
+    // 计算影响范围的网格边界
+    const minGridX = Math.max(0, Math.floor((centerX - radius) / gridSize));
+    const maxGridX = Math.min(cols, Math.ceil((centerX + radius) / gridSize));
+    const minGridY = Math.max(0, Math.floor((centerY - radius) / gridSize));
+    const maxGridY = Math.min(rows, Math.ceil((centerY + radius) / gridSize));
+
+    // 只遍历影响范围内的网格点
+    for (let gridY = minGridY; gridY <= maxGridY; gridY++) {
+      for (let gridX = minGridX; gridX <= maxGridX; gridX++) {
+        const index = gridY * (cols + 1) + gridX;
+        if (index < points.length) {
+          const point = points[index];
+          const originalPoint = originalPoints[index];
+          const dx = point.x - centerX;
+          const dy = point.y - centerY;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          // 只包含在影响半径内的点
+          if (distance <= radius) {
+            affectedPoints.push({
+              index,
+              point,
+              originalPoint,
+              distance,
+              dx,
+              dy,
+            });
+          }
+        }
+      }
+    }
+
+    return affectedPoints;
   }
 
   _smoothMesh() {
@@ -371,6 +916,68 @@ export class LiquifyCPUManager {
     }
   }
 
+  /**
+   * 专门为旋转模式优化的网格平滑
+   */
+  _lightSmoothing() {
+    const { rows, cols } = this.mesh;
+    const points = this.mesh.deformedPoints;
+    const tempPoints = points.map((p) => ({ x: p.x, y: p.y }));
+
+    // 只进行一次轻微平滑
+    for (let y = 1; y < rows; y++) {
+      for (let x = 1; x < cols; x++) {
+        const idx = y * (cols + 1) + x;
+        const left = points[y * (cols + 1) + (x - 1)];
+        const right = points[y * (cols + 1) + (x + 1)];
+        const top = points[(y - 1) * (cols + 1) + x];
+        const bottom = points[(y + 1) * (cols + 1) + x];
+
+        const centerX = (left.x + right.x + top.x + bottom.x) / 4;
+        const centerY = (left.y + right.y + top.y + bottom.y) / 4;
+
+        // 使用更小的松弛因子
+        const lightRelaxFactor = this.config.relaxFactor * 0.3;
+        tempPoints[idx].x += (centerX - points[idx].x) * lightRelaxFactor;
+        tempPoints[idx].y += (centerY - points[idx].y) * lightRelaxFactor;
+      }
+    }
+
+    for (let i = 0; i < points.length; i++) {
+      points[i].x = tempPoints[i].x;
+      points[i].y = tempPoints[i].y;
+    }
+  }
+
+  /**
+   * 使用更优化的衰减函数
+   * @param {number} t 归一化距离 (0-1)
+   * @returns {number} 衰减因子 (0-1)
+   */
+  _optimizedFalloff(t) {
+    if (t >= 1.0) return 0;
+
+    // 对于旋转模式，使用专门的衰减函数
+    if (
+      this.currentMode === this.modes.CLOCKWISE ||
+      this.currentMode === this.modes.COUNTERCLOCKWISE
+    ) {
+      return this._stableRotationFalloff(t); // 修复函数名
+    }
+
+    // 其他模式使用原来的衰减函数
+    const smoothT = 1 - t;
+
+    // 多项式衰减 + 指数衰减的组合
+    const polynomial = smoothT * smoothT * (3 - 2 * smoothT); // 平滑阶梯函数
+    const exponential = Math.exp(-t * 2); // 指数衰减
+
+    // 组合两种衰减方式，在不同区域有不同特性
+    const weight = Math.cos(t * Math.PI * 0.5); // 权重函数
+
+    return polynomial * weight + exponential * (1 - weight);
+  }
+
   _applyMeshToImage() {
     if (!this.mesh || !this.originalImageData) {
       return this.currentImageData;
@@ -437,22 +1044,53 @@ export class LiquifyCPUManager {
       return this.currentImageData;
     }
 
-    const { size, pressure, distortion, power } = this.params;
-    const mode = this.currentMode;
-    const radius = size * 1.0;
-    const strength = (pressure * power * this.config.maxStrength) / 60;
+    // 对于批量处理，模拟连续的拖拽操作
+    if (positions.length > 0) {
+      // 使用第一个位置作为初始点
+      this.startDeformation(positions[0].x, positions[0].y);
 
-    // 批量应用所有变形
-    positions.forEach((pos) => {
-      this._applyDeformation(
-        pos.x,
-        pos.y,
-        radius * 0.5,
-        strength * 0.3,
-        mode,
-        distortion
-      );
-    });
+      // 逐个应用每个位置的变形
+      positions.forEach((pos, index) => {
+        if (index === 0) return; // 跳过第一个，因为已经作为初始点
+
+        // 更新当前位置并应用变形
+        this.currentMouseX = pos.x;
+        this.currentMouseY = pos.y;
+
+        // 重新计算拖拽参数
+        const deltaX = this.currentMouseX - this.initialMouseX;
+        const deltaY = this.currentMouseY - this.initialMouseY;
+        this.dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        this.dragAngle = Math.atan2(deltaY, deltaX);
+
+        const { size, pressure, distortion, power } = this.params;
+        const mode = this.currentMode;
+        const radius = size * 0.8;
+
+        // 根据推拉模式和拖拽距离动态调整强度
+        let strength;
+        if (mode === this.modes.PUSH) {
+          const baseStrength =
+            (pressure * power * this.config.maxStrength) / 100;
+          const distanceFactor = Math.min(this.dragDistance / radius, 2.0);
+          strength = baseStrength * distanceFactor * 0.3; // 批量处理时降低强度
+        } else {
+          strength = (pressure * power * this.config.maxStrength) / 100;
+        }
+
+        this._applyDeformation(
+          pos.x,
+          pos.y,
+          radius,
+          strength,
+          mode,
+          distortion
+        );
+      });
+
+      // 结束拖拽操作
+      this.endDeformation();
+    }
 
     if (this.config.smoothingIterations > 0) {
       this._smoothMesh();
@@ -461,6 +1099,9 @@ export class LiquifyCPUManager {
     return this._applyMeshToImage();
   }
 
+  /**
+   * 改进的网格映射算法 - 防止空白区域
+   */
   _mapPointBack(x, y) {
     const { cols, rows, gridSize } = this.mesh;
     const gridX = x / gridSize;
@@ -509,9 +1150,14 @@ export class LiquifyCPUManager {
     const offsetX = deformedX - originalX;
     const offsetY = deformedY - originalY;
 
+    // 限制偏移量，防止过度扭曲
+    const maxOffset = gridSize * 0.5;
+    const limitedOffsetX = Math.max(-maxOffset, Math.min(maxOffset, offsetX));
+    const limitedOffsetY = Math.max(-maxOffset, Math.min(maxOffset, offsetY));
+
     return {
-      x: x - offsetX,
-      y: y - offsetY,
+      x: Math.max(0, Math.min(this.mesh.width - 1, x - limitedOffsetX)),
+      y: Math.max(0, Math.min(this.mesh.height - 1, y - limitedOffsetY)),
     };
   }
 
@@ -576,10 +1222,140 @@ export class LiquifyCPUManager {
       this.originalImageData.height
     );
 
+    // 重置拖拽状态
+    this.initialMouseX = 0;
+    this.initialMouseY = 0;
+    this.currentMouseX = 0;
+    this.currentMouseY = 0;
+    this.lastMouseX = 0;
+    this.lastMouseY = 0;
+    this.mouseMovementX = 0;
+    this.mouseMovementY = 0;
+    this.isFirstApply = true;
+    this.isDragging = false;
+    this.dragDistance = 0;
+    this.dragAngle = 0;
+
+    // 新增：重置持续按压状态
+    this.isHolding = false;
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.lastApplyTime = 0;
+
     this.deformHistory = [];
     return true;
   }
 
+  // 新增：获取持续按压状态信息
+  getHoldingInfo() {
+    return {
+      isHolding: this.isHolding,
+      pressDuration: this.pressDuration,
+      accumulatedRotation: this.accumulatedRotation,
+      accumulatedScale: this.accumulatedScale,
+      pressStartTime: this.pressStartTime,
+    };
+  }
+
+  /**
+   * 应用液化变形 - 主要的公共接口方法
+   * @param {Number} x X坐标
+   * @param {Number} y Y坐标
+   * @returns {ImageData} 变形后的图像数据
+   */
+  applyDeformation(x, y) {
+    if (!this.initialized || !this.mesh || !this.originalImageData) {
+      console.warn("液化管理器未初始化或缺少必要数据");
+      return this.currentImageData;
+    }
+
+    // 更新鼠标位置
+    this.currentMouseX = x;
+    this.currentMouseY = y;
+
+    // 计算拖拽参数
+    const deltaX = this.currentMouseX - this.initialMouseX;
+    const deltaY = this.currentMouseY - this.initialMouseY;
+    this.dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    this.dragAngle = Math.atan2(deltaY, deltaX);
+
+    // 获取当前参数
+    const { size, pressure, power } = this.params;
+    const mode = this.currentMode;
+    const radius = size;
+    const strength = pressure * power;
+
+    // 根据模式选择算法
+    const pixelModes = [
+      this.modes.CLOCKWISE,
+      this.modes.COUNTERCLOCKWISE,
+      this.modes.PINCH,
+      this.modes.EXPAND,
+      this.modes.PUSH,
+    ];
+
+    if (pixelModes.includes(mode)) {
+      // 使用增强的像素算法
+      switch (mode) {
+        case this.modes.CLOCKWISE:
+          this._applyEnhancedRotationDeformation(x, y, radius, strength, true);
+          break;
+        case this.modes.COUNTERCLOCKWISE:
+          this._applyEnhancedRotationDeformation(x, y, radius, strength, false);
+          break;
+        case this.modes.PINCH:
+          this._applyEnhancedPinchDeformation(x, y, radius, strength, true);
+          break;
+        case this.modes.EXPAND:
+          this._applyEnhancedPinchDeformation(x, y, radius, strength, false);
+          break;
+        case this.modes.PUSH:
+          this._applyEnhancedPushDeformation(x, y, radius, strength);
+          break;
+      }
+
+      // 更新最后应用时间
+      this.lastApplyTime = Date.now();
+      this.isFirstApply = false;
+
+      return this.currentImageData;
+    } else {
+      // 使用原有的网格算法处理其他模式
+      if (!this.mesh) {
+        console.warn("网格未初始化");
+        return this.currentImageData;
+      }
+
+      const finalStrength = (strength * this.config.maxStrength) / 100;
+
+      // 应用变形
+      this._applyDeformation(
+        x,
+        y,
+        radius,
+        finalStrength,
+        mode,
+        this.params.distortion
+      );
+
+      // 平滑处理
+      if (this.config.smoothingIterations > 0) {
+        this._smoothMesh();
+      }
+
+      // 更新图像数据
+      const result = this._applyMeshToImage();
+
+      // 更新最后应用时间
+      this.lastApplyTime = Date.now();
+      this.isFirstApply = false;
+
+      return result;
+    }
+  }
+
   getCurrentImageData() {
     return this.currentImageData;
   }
@@ -590,5 +1366,27 @@ export class LiquifyCPUManager {
     this.mesh = null;
     this.deformHistory = [];
     this.initialized = false;
+
+    // 清理拖拽状态
+    this.initialMouseX = 0;
+    this.initialMouseY = 0;
+    this.currentMouseX = 0;
+    this.currentMouseY = 0;
+    this.lastMouseX = 0;
+    this.lastMouseY = 0;
+    this.mouseMovementX = 0;
+    this.mouseMovementY = 0;
+    this.isFirstApply = true;
+    this.isDragging = false;
+    this.dragDistance = 0;
+    this.dragAngle = 0;
+
+    // 新增：清理持续按压状态
+    this.isHolding = false;
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.lastApplyTime = 0;
   }
 }
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyManager.js
index bf33ec37..d006ba3f 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyManager.js
@@ -38,7 +38,7 @@ export class LiquifyManager {
       meshResolution: options.meshResolution || 64,
       // 根据环境选择合适的渲染模式
       forceCPU: true, // 默认不强制使用CPU
-      forceWebGL: false, // 优先使用WebGL模式
+      forceWebGL: true, // 优先使用WebGL模式
       webglSizeThreshold: options.webglSizeThreshold || 500 * 500, // 降低阈值以更倾向使用WebGL
       layerManager: options.layerManager || null,
       canvas: options.canvas || null,
@@ -87,9 +87,19 @@ export class LiquifyManager {
    * @param {Number} value 参数值
    */
   setParam(param, value) {
+    console.log(`LiquifyManager 设置参数: ${param}=${value}`);
     return this.enhancedManager.setParam(param, value);
   }
 
+  /**
+   * 批量设置参数
+   * @param {Object} params 参数对象
+   */
+  setParams(params) {
+    console.log("LiquifyManager 批量设置参数:", params);
+    return this.enhancedManager.setParams(params);
+  }
+
   /**
    * 获取当前参数
    * @returns {Object} 当前参数对象
@@ -120,21 +130,14 @@ export class LiquifyManager {
       return null;
     }
 
-    // 确保设置正确的模式和参数
-    if (mode) {
-      this.enhancedManager.setMode(mode);
-    }
+    console.log(
+      `LiquifyManager.applyLiquify: 模式=${mode}, 坐标=(${x}, ${y}), 参数=`,
+      params
+    );
 
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => {
-        this.enhancedManager.setParam(key, value);
-      });
-    }
-
-    // 应用液化变形
-    console.log(`应用液化变形, 模式=${mode}, 坐标=(${x}, ${y}), 参数=`, params);
     try {
       // 直接调用EnhancedLiquifyManager的applyLiquify方法
+      // 避免重复设置参数，让EnhancedLiquifyManager处理参数设置
       const resultData = await this.enhancedManager.applyLiquify(
         targetObject,
         mode,
@@ -146,6 +149,13 @@ export class LiquifyManager {
       // 确保返回结果数据
       if (!resultData) {
         console.warn("液化变形没有返回结果数据");
+      } else {
+        console.log(
+          "✅ 液化变形成功，返回图像数据尺寸:",
+          resultData.width,
+          "x",
+          resultData.height
+        );
       }
 
       return resultData;
@@ -180,6 +190,22 @@ export class LiquifyManager {
     return this.enhancedManager.getStatus();
   }
 
+  /**
+   * 开始液化操作（记录初始点）
+   * @param {Number} x 初始X坐标
+   * @param {Number} y 初始Y坐标
+   */
+  startLiquifyOperation(x, y) {
+    return this.enhancedManager.startLiquifyOperation(x, y);
+  }
+
+  /**
+   * 结束液化操作
+   */
+  endLiquifyOperation() {
+    return this.enhancedManager.endLiquifyOperation();
+  }
+
   /**
    * 释放资源
    */
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js
new file mode 100644
index 00000000..6547451a
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js
@@ -0,0 +1,443 @@
+/**
+ * 液化实时更新器
+ * 负责高效地更新液化效果到画布上，避免频繁创建fabric对象导致的性能问题
+ */
+export class LiquifyRealTimeUpdater {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    this.targetObject = null;
+    this.isUpdating = false;
+    this.updateQueue = [];
+    this.lastUpdateTime = 0;
+    this.currImage = options.currImage || { value: null };
+
+    // 配置选项
+    this.config = {
+      throttleTime: options.throttleTime || 16, // 60fps
+      maxQueueSize: options.maxQueueSize || 5,
+      useDirectUpdate: options.useDirectUpdate !== false, // 默认启用直接更新
+      imageQuality: options.imageQuality || 1.0, // 图像质量 (0.1-1.0)
+      skipRenderDuringDrag: options.skipRenderDuringDrag || false, // 拖拽时跳过渲染
+    };
+
+    // 临时canvas用于快速渲染
+    this.tempCanvas = document.createElement("canvas");
+    this.tempCtx = this.tempCanvas.getContext("2d");
+
+    // 高质量canvas用于最终输出
+    this.highQualityCanvas = document.createElement("canvas");
+    this.highQualityCtx = this.highQualityCanvas.getContext("2d");
+
+    // 当前缓存的图像数据
+    this.cachedDataURL = null;
+    this.pendingImageData = null;
+    this.renderingScheduled = false;
+
+    // 优化Canvas画布渲染设置
+    this.canvas.renderOnAddRemove = false; // 禁用自动渲染
+    this.canvas.skipOffscreen = true; // 跳过离屏元素渲染
+  }
+
+  /**
+   * 设置目标对象
+   * @param {Object} fabricObject fabric图像对象
+   */
+  setTargetObject(fabricObject) {
+    this.targetObject = fabricObject;
+    if (fabricObject && fabricObject._element) {
+      // 设置临时canvas尺寸
+      this.tempCanvas.width = fabricObject.width;
+      this.tempCanvas.height = fabricObject.height;
+
+      // 设置高质量canvas尺寸
+      this.highQualityCanvas.width = fabricObject.width;
+      this.highQualityCanvas.height = fabricObject.height;
+
+      // 配置高质量渲染上下文
+      this.highQualityCtx.imageSmoothingEnabled = true;
+      this.highQualityCtx.imageSmoothingQuality = "high";
+
+      // 配置临时canvas上下文（快速渲染）
+      this.tempCtx.imageSmoothingEnabled = false; // 快速模式关闭平滑
+    }
+  }
+
+  /**
+   * 实时更新图像数据到画布
+   * @param {ImageData} imageData 新的图像数据
+   * @param {Boolean} isDrawing 是否正在绘制（拖拽过程中）
+   * @returns {Promise} 更新完成的Promise
+   */
+  async updateImage(imageData, isDrawing = false) {
+    if (!this.targetObject || !imageData) {
+      return;
+    }
+
+    // 节流控制
+    const now = Date.now();
+    if (now - this.lastUpdateTime < this.config.throttleTime && isDrawing) {
+      // 在绘制过程中进行节流，缓存最新的图像数据
+      this.pendingImageData = imageData;
+      return;
+    }
+
+    this.lastUpdateTime = now;
+
+    if (isDrawing && this.config.useDirectUpdate) {
+      // 拖拽过程中使用快速更新（降低质量以提高性能）
+      this._fastUpdate(imageData);
+    } else {
+      // 拖拽结束后使用完整更新（最高质量）
+      await this._fullUpdate(imageData);
+    }
+  }
+
+  /**
+   * 智能图像质量更新
+   * 根据图像尺寸和设备性能动态调整质量
+   * @param {ImageData} imageData 图像数据
+   * @param {Boolean} isDrawing 是否正在绘制
+   * @private
+   */
+  _getOptimalQuality(imageData, isDrawing) {
+    const pixelCount = imageData.width * imageData.height;
+
+    if (isDrawing) {
+      // 拖拽时根据图像大小调整质量
+      if (pixelCount > 1000000) {
+        // 大于1M像素
+        return 0.7;
+      } else if (pixelCount > 500000) {
+        // 大于500K像素
+        return 0.8;
+      } else {
+        return 0.9;
+      }
+    } else {
+      // 拖拽结束时始终使用最高质量
+      return 1.0;
+    }
+  }
+
+  /**
+   * 快速更新 - 直接修改现有对象的图像源
+   * @param {ImageData} imageData 图像数据
+   * @private
+   */
+  _fastUpdate(imageData) {
+    if (!this.targetObject || !this.targetObject._element) {
+      return;
+    }
+
+    try {
+      // 将ImageData渲染到临时canvas（快速模式）
+      this.tempCtx.putImageData(imageData, 0, 0);
+
+      // 获取智能质量设置
+      const quality = this._getOptimalQuality(imageData, true);
+
+      // 直接更新fabric对象的图像源（使用PNG格式保持质量）
+      const targetElement = this.targetObject._element;
+
+      // 方案1: 直接设置src属性（最高性能）
+      const dataURL = this.tempCanvas.toDataURL("image/png", quality);
+
+      if (targetElement.src !== dataURL) {
+        targetElement.src = dataURL;
+
+        // 关键优化：直接设置fabric对象为脏状态，但不立即渲染
+        // this.targetObject.dirty = false; // 标记为不需要立即渲染
+        // this.canvas.renderOnAddRemove = true; // 恢复自动渲染
+        // this.renderingScheduled = false; // 重置渲染调度状态
+        this?.scheduleRender?.(); // 调度一次渲染
+        // 使用requestAnimationFrame进行批量渲染优化
+        // if (!this.renderingScheduled && !this.config.skipRenderDuringDrag) {
+        //   this.renderingScheduled = true;
+        //   requestIdleCallback(() => {
+        //     this.canvas.renderAll();
+        //     this.renderingScheduled = false;
+        //   });
+        // }
+      } else {
+        console.warn(
+          "=================快速更新液化效果时，图像数据未变化，跳过更新"
+        );
+      }
+    } catch (error) {
+      console.error("快速更新液化效果失败:", error);
+    }
+  }
+
+  getImageData(imageData) {
+    // 使用高质量canvas进行最终渲染
+    this.highQualityCtx.putImageData(imageData, 0, 0);
+
+    // 生成高质量DataURL（PNG格式，最大质量）
+    const dataURL = this.highQualityCanvas.toDataURL("image/png", 1.0);
+    return dataURL;
+  }
+
+  /**
+   * 完整更新 - 创建新的fabric对象
+   * @param {ImageData} imageData 图像数据
+   * @private
+   */
+  async _fullUpdate(imageData) {
+    return new Promise((resolve, reject) => {
+      try {
+        // 使用高质量canvas进行最终渲染
+        this.highQualityCtx.putImageData(imageData, 0, 0);
+
+        // 生成高质量DataURL（PNG格式，最大质量）
+        const dataURL = this.highQualityCanvas.toDataURL("image/png", 1.0);
+
+        // 如果DataURL没有变化，跳过更新
+        if (this.cachedDataURL === dataURL) {
+          resolve();
+          return;
+        }
+
+        this.cachedDataURL = dataURL;
+
+        // 创建新的fabric图像对象，保持最高质量
+        fabric.Image.fromURL(
+          dataURL,
+          (newImg) => {
+            try {
+              if (!this.targetObject) {
+                console.warn("目标对象为空，跳过更新");
+                resolve();
+                return;
+              }
+
+              // 保存原对象信息用于智能查找
+              const originalObjId = this.targetObject.id;
+              const originalObjLayerId = this.targetObject.layerId;
+
+              // 保留原对象的所有变换属性
+              const originalObj = this.targetObject;
+              newImg.set({
+                left: originalObj.left,
+                top: originalObj.top,
+                scaleX: originalObj.scaleX,
+                scaleY: originalObj.scaleY,
+                angle: originalObj.angle,
+                flipX: originalObj.flipX,
+                flipY: originalObj.flipY,
+                opacity: originalObj.opacity,
+                originX: originalObj.originX,
+                originY: originalObj.originY,
+                id: originalObj.id,
+                name: originalObj.name,
+                layerId: originalObj.layerId,
+                selected: false,
+                evented: originalObj.evented,
+              });
+
+              // 临时禁用画布自动渲染
+              const oldRenderOnAddRemove = this.canvas.renderOnAddRemove;
+              this.canvas.renderOnAddRemove = false;
+
+              // 智能查找和替换canvas上的对象
+              const allObjects = this.canvas.getObjects();
+              let targetIndex = allObjects.indexOf(originalObj);
+
+              // 如果直接查找失败，尝试通过ID查找
+              if (targetIndex === -1 && originalObjId) {
+                targetIndex = allObjects.findIndex(
+                  (obj) => obj.id === originalObjId
+                );
+                if (targetIndex !== -1) {
+                  console.log(`通过ID找到目标对象: ${originalObjId}`);
+                  // 更新目标对象引用
+                  this.targetObject = allObjects[targetIndex];
+                }
+              }
+
+              // 如果通过ID查找仍然失败，尝试通过图层ID查找
+              if (targetIndex === -1 && originalObjLayerId) {
+                targetIndex = allObjects.findIndex(
+                  (obj) => obj.layerId === originalObjLayerId
+                );
+                if (targetIndex !== -1) {
+                  console.log(`通过图层ID找到目标对象: ${originalObjLayerId}`);
+                  // 更新目标对象引用
+                  this.targetObject = allObjects[targetIndex];
+                }
+              }
+
+              if (targetIndex !== -1) {
+                // 找到目标对象，执行替换
+                this.canvas.remove(this.targetObject);
+                this.canvas.insertAt(newImg, targetIndex);
+
+                // 恢复自动渲染设置
+                this.canvas.renderOnAddRemove = oldRenderOnAddRemove;
+
+                // 更新目标对象引用
+                this.targetObject = newImg;
+
+                // 一次性重新渲染画布
+                this.canvas.renderAll();
+
+                console.log(`✅ 液化对象更新成功，位置: ${targetIndex}`);
+                resolve(newImg);
+              } else {
+                // 如果在画布中找不到对象，可能对象已被移除或引用已更新
+                console.warn(
+                  "在画布中找不到目标对象，可能已被其他操作移除或替换"
+                );
+
+                // 恢复自动渲染设置
+                this.canvas.renderOnAddRemove = oldRenderOnAddRemove;
+
+                // 尝试添加新对象到画布末尾
+                this.canvas.add(newImg);
+                this.targetObject = newImg;
+                this.canvas.renderAll();
+
+                console.log("🔄 已将新对象添加到画布末尾");
+                resolve(newImg);
+              }
+            } catch (error) {
+              // 恢复自动渲染设置
+              this.canvas.renderOnAddRemove = oldRenderOnAddRemove;
+              console.error("更新fabric对象时出错:", error);
+              reject(error);
+            }
+          },
+          { crossOrigin: "anonymous" }
+        ); // 确保跨域支持
+      } catch (error) {
+        console.error("完整更新过程出错:", error);
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * 处理待处理的图像数据
+   * 在拖拽结束后调用，处理可能积压的更新
+   */
+  async processPendingUpdates() {
+    if (this.pendingImageData && !this.isUpdating) {
+      this.isUpdating = true;
+      try {
+        await this._fullUpdate(this.pendingImageData);
+        this.pendingImageData = null;
+      } catch (error) {
+        console.error("处理待处理更新失败:", error);
+      } finally {
+        this.isUpdating = false;
+      }
+    }
+  }
+
+  /**
+   * 清理资源
+   */
+  dispose() {
+    this.targetObject = null;
+    this.cachedDataURL = null;
+    this.pendingImageData = null;
+    this.updateQueue.length = 0;
+
+    // 清理临时canvas
+    if (this.tempCanvas) {
+      this.tempCanvas.width = 0;
+      this.tempCanvas.height = 0;
+      this.tempCanvas = null;
+      this.tempCtx = null;
+    }
+  }
+
+  /**
+   * 获取当前目标对象
+   * @returns {Object} 当前的fabric对象
+   */
+  getTargetObject() {
+    return this.targetObject;
+  }
+
+  /**
+   * 强制进行完整更新
+   * @param {ImageData} imageData 图像数据
+   */
+  async forceFullUpdate(imageData) {
+    return this._fullUpdate(imageData);
+  }
+
+  /**
+   * 启用拖拽模式 - 暂停渲染以提高性能
+   */
+  enableDragMode() {
+    this.config.skipRenderDuringDrag = true;
+    this.canvas.renderOnAddRemove = false;
+    console.log("🚀 启用拖拽优化模式");
+  }
+
+  /**
+   * 禁用拖拽模式 - 恢复正常渲染
+   */
+  disableDragMode() {
+    this.config.skipRenderDuringDrag = false;
+    this.canvas.renderOnAddRemove = true;
+
+    // 执行一次完整渲染
+    this.canvas.renderAll();
+    console.log("✅ 恢复正常渲染模式");
+  }
+
+  /**
+   * 获取当前目标对象
+   */
+  getTargetObject() {
+    return this.targetObject;
+  }
+
+  /**
+   * 设置图像质量
+   * @param {Number} quality 质量值 (0.1-1.0)
+   */
+  setImageQuality(quality) {
+    this.config.imageQuality = Math.max(0.1, Math.min(1.0, quality));
+  }
+
+  /**
+   * 优化的批量渲染方法
+   */
+  scheduleRender() {
+    if (!this.renderingScheduled) {
+      this.renderingScheduled = true;
+      requestAnimationFrame(() => {
+        this.canvas.renderAll();
+        this.renderingScheduled = false;
+      });
+    }
+  }
+
+  /**
+   * 清理资源
+   */
+  dispose() {
+    // 恢复canvas设置
+    this.canvas.renderOnAddRemove = true;
+
+    // 清理缓存
+    this.cachedDataURL = null;
+    this.pendingImageData = null;
+
+    // 清理canvas
+    if (this.tempCanvas) {
+      this.tempCanvas.width = 0;
+      this.tempCanvas.height = 0;
+    }
+
+    if (this.highQualityCanvas) {
+      this.highQualityCanvas.width = 0;
+      this.highQualityCanvas.height = 0;
+    }
+
+    console.log("🧹 液化实时更新器资源已清理");
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js
new file mode 100644
index 00000000..8fb740c1
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js
@@ -0,0 +1,431 @@
+/**
+ * 液化面板状态管理器
+ * 负责管理液化操作的状态、性能优化和用户反馈
+ */
+export class LiquifyStateManager {
+  constructor(canvas, realtimeUpdater) {
+    this.canvas = canvas;
+    this.realtimeUpdater = realtimeUpdater;
+
+    // 状态管理
+    this.isOperating = false;
+    this.isDragging = false;
+    this.operationCount = 0;
+    this.startTime = null;
+
+    // 性能监控
+    this.performanceMetrics = {
+      totalOperations: 0,
+      totalTime: 0,
+      averageTime: 0,
+      maxTime: 0,
+      minTime: Infinity,
+      lastOperationTime: 0,
+    };
+
+    // 用户反馈
+    this.feedbackEnabled = true;
+    this.cursorCache = new Map();
+
+    // 设备性能检测
+    this.devicePerformance = this._detectDevicePerformance();
+
+    console.log(
+      "🎯 液化状态管理器已初始化，设备性能等级:",
+      this.devicePerformance
+    );
+  }
+
+  /**
+   * 开始液化操作
+   */
+  startOperation() {
+    if (this.isOperating) return;
+
+    this.isOperating = true;
+    this.startTime = performance.now();
+
+    // 根据设备性能调整设置
+    this._adjustPerformanceSettings();
+
+    // 显示操作反馈
+    this._showOperationFeedback();
+
+    console.log("🚀 开始液化操作");
+  }
+
+  /**
+   * 开始拖拽
+   */
+  startDrag() {
+    if (this.isDragging) return;
+
+    this.isDragging = true;
+
+    // 优化拖拽性能
+    this.realtimeUpdater?.enableDragMode();
+
+    // 更新鼠标样式
+    this._updateCursor("liquifying");
+
+    // 禁用不必要的画布功能
+    this._disableCanvasFeatures();
+
+    console.log("🖱️ 开始拖拽操作");
+  }
+
+  /**
+   * 结束拖拽
+   */
+  async endDrag() {
+    if (!this.isDragging) return;
+
+    // 恢复鼠标样式
+    this._updateCursor("default");
+
+    // 恢复画布功能
+    this._enableCanvasFeatures();
+
+    // 处理待处理的更新
+    if (this.realtimeUpdater) {
+      try {
+        await this.realtimeUpdater.processPendingUpdates();
+      } catch (error) {
+        console.error("处理待处理更新失败:", error);
+      } finally {
+        this.isDragging = false;
+        // 恢复正常模式
+        this.realtimeUpdater?.disableDragMode();
+
+        // 结束液化操作 添加结果到命令中  更新当前激活图层对象
+      }
+    }
+
+    console.log("✅ 结束拖拽操作");
+  }
+
+  /**
+   * 结束液化操作
+   */
+  endOperation() {
+    if (!this.isOperating) return;
+
+    const operationTime = performance.now() - this.startTime;
+    this._updatePerformanceMetrics(operationTime);
+
+    this.isOperating = false;
+    this.operationCount++;
+
+    // 隐藏操作反馈
+    this._hideOperationFeedback();
+
+    console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`);
+  }
+
+  /**
+   * 记录单次变形操作
+   */
+  recordDeformation(operationTime) {
+    this.performanceMetrics.totalOperations++;
+    this.performanceMetrics.totalTime += operationTime;
+    this.performanceMetrics.averageTime =
+      this.performanceMetrics.totalTime /
+      this.performanceMetrics.totalOperations;
+
+    this.performanceMetrics.maxTime = Math.max(
+      this.performanceMetrics.maxTime,
+      operationTime
+    );
+    this.performanceMetrics.minTime = Math.min(
+      this.performanceMetrics.minTime,
+      operationTime
+    );
+    this.performanceMetrics.lastOperationTime = operationTime;
+  }
+
+  /**
+   * 记录操作性能指标
+   * @param {Object} metrics 性能指标对象
+   */
+  recordOperationMetrics(metrics) {
+    const {
+      operationTime,
+      operationType,
+      mode,
+      coordinates,
+      imageSize,
+      renderMode,
+      isRealTime,
+    } = metrics;
+
+    // 记录基础性能数据
+    this.recordDeformation(operationTime);
+
+    // 记录详细操作信息
+    this.performanceMetrics.lastOperation = {
+      type: operationType,
+      mode,
+      coordinates,
+      imageSize,
+      renderMode,
+      isRealTime,
+      timestamp: Date.now(),
+    };
+
+    // 根据性能数据动态调整设置
+    this._adaptivePerformanceOptimization(operationTime);
+
+    console.log(
+      `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed(
+        2
+      )}ms, 渲染模式: ${renderMode}`
+    );
+  }
+
+  /**
+   * 自适应性能优化
+   * @param {Number} operationTime 操作耗时
+   * @private
+   */
+  _adaptivePerformanceOptimization(operationTime) {
+    if (!this.realtimeUpdater) return;
+
+    // 如果操作耗时过长，动态降低质量或增加节流时间
+    if (operationTime > 50 && this.devicePerformance !== "high") {
+      // 降低图像质量
+      const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0;
+      if (currentQuality > 0.7) {
+        this.realtimeUpdater.setImageQuality(
+          Math.max(0.7, currentQuality - 0.1)
+        );
+        console.log("⚡ 自动降低图像质量以提升性能");
+      }
+
+      // 增加节流时间
+      if (this.realtimeUpdater.config.throttleTime < 33) {
+        this.realtimeUpdater.config.throttleTime = Math.min(
+          33,
+          this.realtimeUpdater.config.throttleTime + 8
+        );
+        console.log("⏱️ 自动增加节流时间以提升性能");
+      }
+    }
+
+    // 如果性能很好，可以适当提高质量
+    if (operationTime < 20 && this.devicePerformance === "high") {
+      const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0;
+      if (currentQuality < 1.0) {
+        this.realtimeUpdater.setImageQuality(
+          Math.min(1.0, currentQuality + 0.05)
+        );
+      }
+    }
+  }
+
+  /**
+   * 获取性能报告
+   */
+  getPerformanceReport() {
+    return {
+      ...this.performanceMetrics,
+      devicePerformance: this.devicePerformance,
+      fps: this._calculateFPS(),
+      recommendations: this._generateRecommendations(),
+    };
+  }
+
+  /**
+   * 设置用户反馈
+   */
+  setFeedbackEnabled(enabled) {
+    this.feedbackEnabled = enabled;
+  }
+
+  /**
+   * 清理资源
+   */
+  dispose() {
+    this._enableCanvasFeatures();
+    this._updateCursor("default");
+    this.cursorCache.clear();
+
+    console.log("🧹 液化状态管理器已清理");
+  }
+
+  // === 私有方法 ===
+
+  /**
+   * 检测设备性能
+   */
+  _detectDevicePerformance() {
+    // 检测硬件并发数
+    const cores = navigator.hardwareConcurrency || 4;
+
+    // 检测内存
+    const memory = navigator.deviceMemory || 4;
+
+    // 检测连接类型
+    const connection = navigator.connection;
+    const effectiveType = connection?.effectiveType || "4g";
+
+    // 简单的性能评分算法
+    let score = 0;
+    score += cores * 10;
+    score += memory * 5;
+
+    if (effectiveType === "4g") score += 10;
+    else if (effectiveType === "3g") score += 5;
+
+    // 性能等级
+    if (score >= 70) return "high";
+    if (score >= 40) return "medium";
+    return "low";
+  }
+
+  /**
+   * 根据设备性能调整设置
+   */
+  _adjustPerformanceSettings() {
+    if (!this.realtimeUpdater) return;
+
+    switch (this.devicePerformance) {
+      case "high":
+        this.realtimeUpdater.setImageQuality(1.0);
+        this.realtimeUpdater.config.throttleTime = 8; // 120fps
+        break;
+      case "medium":
+        this.realtimeUpdater.setImageQuality(0.9);
+        this.realtimeUpdater.config.throttleTime = 16; // 60fps
+        break;
+      case "low":
+        this.realtimeUpdater.setImageQuality(0.8);
+        this.realtimeUpdater.config.throttleTime = 33; // 30fps
+        break;
+    }
+  }
+
+  /**
+   * 显示操作反馈
+   */
+  _showOperationFeedback() {
+    if (!this.feedbackEnabled) return;
+
+    // 添加视觉反馈（可以是加载动画、进度条等）
+    document.body.style.cursor = "wait";
+  }
+
+  /**
+   * 隐藏操作反馈
+   */
+  _hideOperationFeedback() {
+    if (!this.feedbackEnabled) return;
+
+    document.body.style.cursor = "default";
+  }
+
+  /**
+   * 更新鼠标样式
+   */
+  _updateCursor(type) {
+    if (!this.feedbackEnabled) return;
+
+    const cursors = {
+      default: "default",
+      liquifying: "crosshair",
+      wait: "wait",
+      "not-allowed": "not-allowed",
+    };
+
+    const cursor = cursors[type] || "default";
+
+    if (this.canvas && this.canvas.upperCanvasEl) {
+      this.canvas.upperCanvasEl.style.cursor = cursor;
+    }
+  }
+
+  /**
+   * 禁用画布功能以提高性能
+   */
+  _disableCanvasFeatures() {
+    if (!this.canvas) return;
+
+    // 保存原始设置
+    this._originalSettings = {
+      renderOnAddRemove: this.canvas.renderOnAddRemove,
+      skipOffscreen: this.canvas.skipOffscreen,
+      enableRetinaScaling: this.canvas.enableRetinaScaling,
+    };
+
+    // 应用性能优化设置
+    this.canvas.renderOnAddRemove = false;
+    this.canvas.skipOffscreen = true;
+
+    // 低性能设备关闭高分辨率支持
+    if (this.devicePerformance === "low") {
+      this.canvas.enableRetinaScaling = false;
+    }
+  }
+
+  /**
+   * 恢复画布功能
+   */
+  _enableCanvasFeatures() {
+    if (!this.canvas || !this._originalSettings) return;
+
+    // 恢复原始设置
+    this.canvas.renderOnAddRemove = this._originalSettings.renderOnAddRemove;
+    this.canvas.skipOffscreen = this._originalSettings.skipOffscreen;
+    this.canvas.enableRetinaScaling =
+      this._originalSettings.enableRetinaScaling;
+
+    this._originalSettings = null;
+  }
+
+  /**
+   * 更新性能指标
+   */
+  _updatePerformanceMetrics(operationTime) {
+    this.performanceMetrics.totalTime += operationTime;
+    this.performanceMetrics.averageTime =
+      this.performanceMetrics.totalTime / (this.operationCount + 1);
+
+    this.performanceMetrics.maxTime = Math.max(
+      this.performanceMetrics.maxTime,
+      operationTime
+    );
+    this.performanceMetrics.minTime = Math.min(
+      this.performanceMetrics.minTime,
+      operationTime
+    );
+  }
+
+  /**
+   * 计算FPS
+   */
+  _calculateFPS() {
+    if (this.performanceMetrics.averageTime === 0) return 0;
+    return Math.round(1000 / this.performanceMetrics.averageTime);
+  }
+
+  /**
+   * 生成性能建议
+   */
+  _generateRecommendations() {
+    const recommendations = [];
+
+    if (this.performanceMetrics.averageTime > 50) {
+      recommendations.push("操作响应较慢，建议降低图像尺寸或关闭高质量模式");
+    }
+
+    if (this.devicePerformance === "low") {
+      recommendations.push("检测到低性能设备，已自动启用性能优化模式");
+    }
+
+    const fps = this._calculateFPS();
+    if (fps < 30) {
+      recommendations.push("帧率较低，建议减少同时进行的操作或降低液化强度");
+    }
+
+    return recommendations;
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
index 67dcfafe..36435566 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
@@ -1,46 +1,22 @@
 /**
- * WebGL加速的液化管理器
- * 使用WebGL技术进行加速液化变形处理
+ * WebGL版本的液化管理器   -  暂时不兼容WebGL的版本  后续看情况支持
+ * 使用GPU加速进行高性能液化变形处理，支持持续按压效果
  */
 export class LiquifyWebGLManager {
-  /**
-   * 创建WebGL液化管理器
-   * @param {Object} options 配置选项
-   */
   constructor(options = {}) {
-    this.canvas = null;
-    this.gl = null;
-    this.program = null;
-    this.texture = null;
-    this.mesh = null;
-    this.initialized = false;
-    this.originalImageData = null;
-    this.currentImageData = null;
-
-    // 变形配置
     this.config = {
-      gridSize: options.gridSize || 20,
+      meshResolution: options.meshResolution || 64, // WebGL网格精度
       maxStrength: options.maxStrength || 100,
-      textureSize: 0,
-      meshResolution: options.meshResolution || 64,
+      useFloatTextures: options.useFloatTextures !== false, // 默认启用浮点纹理
     };
 
-    // 当前参数
     this.params = {
-      size: 80, // 增大默认尺寸
-      pressure: 0.8, // 增大默认压力
+      size: 50,
+      pressure: 0.5,
       distortion: 0,
-      power: 0.8, // 增大默认动力
+      power: 0.5,
     };
 
-    // 鼠标位置跟踪（用于推拉模式）
-    this.lastMouseX = 0;
-    this.lastMouseY = 0;
-    this.mouseMovementX = 0;
-    this.mouseMovementY = 0;
-    this.isFirstApply = true; // 标记是否是首次应用
-
-    // 液化工具模式
     this.modes = {
       PUSH: "push",
       CLOCKWISE: "clockwise",
@@ -51,727 +27,257 @@ export class LiquifyWebGLManager {
       EDGE: "edge",
       RECONSTRUCT: "reconstruct",
     };
+
     this.currentMode = this.modes.PUSH;
+    this.initialized = false;
 
-    // 变形点历史记录
-    this.deformHistory = [];
+    // WebGL相关
+    this.canvas = null;
+    this.gl = null;
+    this.program = null;
+    this.meshBuffer = null;
+    this.originalTexture = null;
+    this.currentTexture = null;
+    this.framebuffer = null;
 
-    // WebGL着色器程序
-    this.vertexShaderSource = `
-      attribute vec2 a_position;
-      attribute vec2 a_texCoord;
-      
-      uniform mat3 u_matrix;
-      
-      varying vec2 v_texCoord;
-      
-      void main() {
-        gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
-        v_texCoord = a_texCoord;
+    // 持续按压相关状态
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.isHolding = false;
+    this.continuousTimer = null;
+    this.continuousApplyInterval = 50; // 50ms间隔
+
+    // 初始点坐标
+    this.initialMouseX = 0;
+    this.initialMouseY = 0;
+    this.isDragging = false;
+  }
+
+  /**
+   * 检查WebGL支持
+   */
+  static isSupported() {
+    try {
+      const canvas = document.createElement("canvas");
+      const gl =
+        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+      return !!gl;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * 初始化WebGL液化管理器
+   */
+  initialize(imageSource) {
+    try {
+      // 创建WebGL画布
+      this.canvas = document.createElement("canvas");
+      this.gl =
+        this.canvas.getContext("webgl") ||
+        this.canvas.getContext("experimental-webgl");
+
+      if (!this.gl) {
+        throw new Error("WebGL不可用");
       }
-    `;
 
-    this.fragmentShaderSource = `
-      precision mediump float;
-      
-      uniform sampler2D u_image;
-      uniform vec2 u_textureSize;
-      
-      varying vec2 v_texCoord;
-      
-      void main() {
-        vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
-        vec4 color = texture2D(u_image, v_texCoord);
-        
-        // 简单的边缘检查，保证边缘渲染正确
-        if(v_texCoord.x < 0.0 || v_texCoord.x > 1.0 || 
-           v_texCoord.y < 0.0 || v_texCoord.y > 1.0) {
-          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-        } else {
-          gl_FragColor = color;
-        }
+      // 处理图像源
+      if (imageSource instanceof HTMLImageElement) {
+        this.canvas.width = imageSource.width;
+        this.canvas.height = imageSource.height;
+        this._initWebGL(imageSource);
+      } else {
+        throw new Error("WebGL版本目前只支持HTMLImageElement");
       }
-    `;
 
-    // 变形网格着色器程序
-    this.deformVertexShaderSource = `
-      attribute vec2 a_position;
-      attribute vec2 a_texCoord;
-      attribute vec2 a_deformation;
-      
-      varying vec2 v_texCoord;
-      
-      void main() {
-        vec2 position = a_position + a_deformation;
-        gl_Position = vec4(position * 2.0 - 1.0, 0, 1);
-        v_texCoord = a_texCoord;
-      }
-    `;
-
-    this.deformFragmentShaderSource = `
-      precision mediump float;
-      
-      uniform sampler2D u_image;
-      
-      varying vec2 v_texCoord;
-      
-      void main() {
-        vec4 color = texture2D(u_image, v_texCoord);
-        gl_FragColor = color;
-      }
-    `;
+      this.initialized = true;
+      return true;
+    } catch (error) {
+      console.error("WebGL液化管理器初始化失败:", error);
+      return false;
+    }
   }
 
   /**
    * 初始化WebGL环境
-   * @param {HTMLImageElement} image 图像元素
-   * @returns {Boolean} 是否初始化成功
    */
-  initialize(image) {
-    // 创建WebGL Canvas
-    this.canvas = document.createElement("canvas");
+  _initWebGL(image) {
+    const gl = this.gl;
 
-    // 设置canvas大小与图像相同
-    this.canvas.width = image.width;
-    this.canvas.height = image.height;
-
-    // 尝试获取WebGL上下文
-    try {
-      this.gl =
-        this.canvas.getContext("webgl") ||
-        this.canvas.getContext("experimental-webgl");
-    } catch (e) {
-      console.error("WebGL初始化失败:", e);
-      return false;
-    }
-
-    if (!this.gl) {
-      console.error("WebGL不可用");
-      return false;
-    }
-
-    // 设置视口
-    this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-
-    // 编译着色器程序
-    if (!this._createShaderProgram()) {
-      console.error("着色器程序创建失败");
-      return false;
-    }
+    // 创建着色器程序
+    this._createShaderProgram();
 
     // 创建纹理
-    this.texture = this._createTexture(image);
-    if (!this.texture) {
-      console.error("纹理创建失败");
-      return false;
-    }
+    this.originalTexture = this._createTexture(image);
+    this.currentTexture = this._createTexture(image);
 
-    // 记录原始图像数据
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = image.width;
-    tempCanvas.height = image.height;
-    const tempCtx = tempCanvas.getContext("2d");
-    tempCtx.drawImage(image, 0, 0);
-    this.originalImageData = tempCtx.getImageData(
-      0,
-      0,
-      image.width,
-      image.height
-    );
-    this.currentImageData = new ImageData(
-      new Uint8ClampedArray(this.originalImageData.data),
-      this.originalImageData.width,
-      this.originalImageData.height
-    );
+    // 创建帧缓冲
+    this.framebuffer = gl.createFramebuffer();
 
-    // 创建变形网格
-    this._createDeformMesh();
+    // 创建网格缓冲
+    this._createMeshBuffer();
 
-    this.config.textureSize = [image.width, image.height];
-    this.initialized = true;
-
-    return true;
+    console.log("WebGL液化环境初始化完成");
   }
 
   /**
    * 创建着色器程序
-   * @returns {Boolean} 是否创建成功
-   * @private
    */
   _createShaderProgram() {
-    // 创建标准渲染程序
-    const vertexShader = this._compileShader(
-      this.vertexShaderSource,
-      this.gl.VERTEX_SHADER
+    const gl = this.gl;
+
+    // 顶点着色器
+    const vertexShaderSource = `
+      attribute vec2 a_position;
+      attribute vec2 a_texCoord;
+      varying vec2 v_texCoord;
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+        v_texCoord = a_texCoord;
+      }
+    `;
+
+    // 片段着色器 - 支持多种液化模式
+    const fragmentShaderSource = `
+      precision mediump float;
+      uniform sampler2D u_texture;
+      uniform vec2 u_center;
+      uniform float u_radius;
+      uniform float u_strength;
+      uniform int u_mode;
+      uniform float u_time;
+      uniform float u_distortion;
+      uniform vec2 u_dragVector;
+      varying vec2 v_texCoord;
+
+      void main() {
+        vec2 coord = v_texCoord;
+        vec2 center = u_center;
+        float dist = distance(coord, center);
+        
+        if (dist < u_radius && dist > 0.0) {
+          float factor = 1.0 - (dist / u_radius);
+          factor = factor * factor * factor * u_strength;
+          
+          if (u_mode == 0) { // PUSH
+            vec2 direction = normalize(u_dragVector);
+            coord += direction * factor * 0.1;
+          }
+          else if (u_mode == 1 || u_mode == 2) { // CLOCKWISE/COUNTERCLOCKWISE
+            float angle = atan(coord.y - center.y, coord.x - center.x);
+            float rotationSpeed = u_mode == 1 ? 0.1 : -0.1;
+            angle += rotationSpeed * factor * (1.0 + u_time * 0.001);
+            coord = center + dist * vec2(cos(angle), sin(angle));
+          }
+          else if (u_mode == 3) { // PINCH
+            vec2 direction = center - coord;
+            coord += direction * factor * (0.5 + u_time * 0.0005);
+          }
+          else if (u_mode == 4) { // EXPAND
+            vec2 direction = coord - center;
+            coord += direction * factor * (0.5 + u_time * 0.0005);
+          }
+          else if (u_mode == 5) { // CRYSTAL
+            float crystalAngle = atan(coord.y - center.y, coord.x - center.x);
+            float wave1 = sin(crystalAngle * 8.0 + u_time * 0.005) * 0.6;
+            float wave2 = cos(crystalAngle * 12.0 + u_time * 0.003) * 0.4;
+            crystalAngle += (wave1 + wave2) * u_distortion * factor;
+            coord = center + dist * vec2(cos(crystalAngle), sin(crystalAngle));
+          }
+          else if (u_mode == 6) { // EDGE
+            float edgeAngle = atan(coord.y - center.y, coord.x - center.x);
+            float edgeWave = sin(dist * 3.14159 * 4.0 + u_time * 0.004) *
+                           cos(edgeAngle * 6.0 + u_time * 0.002);
+            float perpAngle = edgeAngle + 3.14159 * 0.5;
+            coord += vec2(cos(perpAngle), sin(perpAngle)) * edgeWave * factor * u_distortion * 0.5;
+          }
+        }
+        
+        gl_FragColor = texture2D(u_texture, coord);
+      }
+    `;
+
+    this.program = this._createProgram(
+      vertexShaderSource,
+      fragmentShaderSource
     );
-    const fragmentShader = this._compileShader(
-      this.fragmentShaderSource,
-      this.gl.FRAGMENT_SHADER
-    );
-
-    if (!vertexShader || !fragmentShader) return false;
-
-    // 创建程序
-    this.program = this.gl.createProgram();
-    this.gl.attachShader(this.program, vertexShader);
-    this.gl.attachShader(this.program, fragmentShader);
-    this.gl.linkProgram(this.program);
-
-    if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
-      console.error(
-        "着色器程序链接失败:",
-        this.gl.getProgramInfoLog(this.program)
-      );
-      return false;
-    }
-
-    // 创建变形渲染程序
-    const deformVertexShader = this._compileShader(
-      this.deformVertexShaderSource,
-      this.gl.VERTEX_SHADER
-    );
-    const deformFragmentShader = this._compileShader(
-      this.deformFragmentShaderSource,
-      this.gl.FRAGMENT_SHADER
-    );
-
-    if (!deformVertexShader || !deformFragmentShader) return false;
-
-    // 创建变形程序
-    this.deformProgram = this.gl.createProgram();
-    this.gl.attachShader(this.deformProgram, deformVertexShader);
-    this.gl.attachShader(this.deformProgram, deformFragmentShader);
-    this.gl.linkProgram(this.deformProgram);
-
-    if (!this.gl.getProgramParameter(this.deformProgram, this.gl.LINK_STATUS)) {
-      console.error(
-        "变形着色器程序链接失败:",
-        this.gl.getProgramInfoLog(this.deformProgram)
-      );
-      return false;
-    }
-
-    return true;
   }
 
   /**
-   * 编译着色器
-   * @param {String} source 着色器源码
-   * @param {Number} type 着色器类型
-   * @returns {WebGLShader} 编译后的着色器
-   * @private
+   * 创建着色器
    */
-  _compileShader(source, type) {
-    const shader = this.gl.createShader(type);
-    this.gl.shaderSource(shader, source);
-    this.gl.compileShader(shader);
+  _createShader(type, source) {
+    const gl = this.gl;
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
 
-    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-      console.error(
-        "着色器编译失败:",
-        this.gl.getShaderInfoLog(shader),
-        "shader type:",
-        type === this.gl.VERTEX_SHADER ? "VERTEX_SHADER" : "FRAGMENT_SHADER",
-        "source:",
-        source
-      );
-      this.gl.deleteShader(shader);
-      return null;
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error("着色器编译失败: " + gl.getShaderInfoLog(shader));
     }
 
     return shader;
   }
 
   /**
-   * 创建WebGL纹理
-   * @param {HTMLImageElement} image 图像元素
-   * @returns {WebGLTexture} WebGL纹理
-   * @private
+   * 创建着色器程序
+   */
+  _createProgram(vertexSource, fragmentSource) {
+    const gl = this.gl;
+    const vertexShader = this._createShader(gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = this._createShader(
+      gl.FRAGMENT_SHADER,
+      fragmentSource
+    );
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error("程序链接失败: " + gl.getProgramInfoLog(program));
+    }
+
+    return program;
+  }
+
+  /**
+   * 创建纹理
    */
   _createTexture(image) {
-    const texture = this.gl.createTexture();
-    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+    const gl = this.gl;
+    const texture = gl.createTexture();
 
-    // 设置参数，使我们可以渲染任何尺寸的图像
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_S,
-      this.gl.CLAMP_TO_EDGE
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_T,
-      this.gl.CLAMP_TO_EDGE
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MIN_FILTER,
-      this.gl.LINEAR
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MAG_FILTER,
-      this.gl.LINEAR
-    );
-
-    // 上传图像到纹理
-    try {
-      this.gl.texImage2D(
-        this.gl.TEXTURE_2D,
-        0,
-        this.gl.RGBA,
-        this.gl.RGBA,
-        this.gl.UNSIGNED_BYTE,
-        image
-      );
-    } catch (e) {
-      console.error("纹理上传失败:", e);
-      return null;
-    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 
     return texture;
   }
 
   /**
-   * 创建变形网格
-   * @private
+   * 创建网格缓冲
    */
-  _createDeformMesh() {
-    const { meshResolution } = this.config;
-
-    // 创建网格顶点
-    const vertices = [];
-    const texCoords = [];
-    const indices = [];
-    const deformations = [];
-
-    // 创建顶点和纹理坐标
-    for (let y = 0; y <= meshResolution; y++) {
-      for (let x = 0; x <= meshResolution; x++) {
-        const xPos = x / meshResolution;
-        const yPos = y / meshResolution;
-
-        // 顶点位置
-        vertices.push(xPos, yPos);
-
-        // 纹理坐标
-        texCoords.push(xPos, yPos);
-
-        // 初始无变形
-        deformations.push(0, 0);
-      }
-    }
-
-    // 创建索引（三角形）
-    for (let y = 0; y < meshResolution; y++) {
-      for (let x = 0; x < meshResolution; x++) {
-        const i0 = y * (meshResolution + 1) + x;
-        const i1 = i0 + 1;
-        const i2 = i0 + meshResolution + 1;
-        const i3 = i2 + 1;
-
-        // 三角形1
-        indices.push(i0, i2, i1);
-
-        // 三角形2
-        indices.push(i1, i2, i3);
-      }
-    }
-
-    this.mesh = {
-      vertices: new Float32Array(vertices),
-      texCoords: new Float32Array(texCoords),
-      indices: new Uint16Array(indices),
-      deformations: new Float32Array(deformations),
-      resolution: meshResolution,
-    };
-
-    // 创建顶点缓冲区
-    this.vertexBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      this.mesh.vertices,
-      this.gl.STATIC_DRAW
-    );
-
-    // 创建纹理坐标缓冲区
-    this.texCoordBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      this.mesh.texCoords,
-      this.gl.STATIC_DRAW
-    );
-
-    // 创建变形缓冲区
-    this.deformBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.deformBuffer);
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      this.mesh.deformations,
-      this.gl.DYNAMIC_DRAW
-    );
-
-    // 创建索引缓冲区
-    this.indexBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    this.gl.bufferData(
-      this.gl.ELEMENT_ARRAY_BUFFER,
-      this.mesh.indices,
-      this.gl.STATIC_DRAW
-    );
-  }
-
-  /**
-   * 应用液化变形
-   * @param {Number} x 变形中心X坐标 (图像像素坐标)
-   * @param {Number} y 变形中心Y坐标 (图像像素坐标)
-   */
-  applyDeformation(x, y) {
-    if (!this.initialized || !this.mesh) return;
-
-    // 计算鼠标移动方向
-    if (!this.isFirstApply) {
-      this.mouseMovementX = x - this.lastMouseX;
-      this.mouseMovementY = y - this.lastMouseY;
-    } else {
-      // 首次应用时不计算移动，避免初始变形
-      this.mouseMovementX = 0;
-      this.mouseMovementY = 0;
-      this.isFirstApply = false;
-    }
-
-    this.lastMouseX = x;
-    this.lastMouseY = y;
-
-    // 将图像像素坐标转换为纹理坐标 (0-1范围)
-    // 使用原始图像数据的尺寸进行归一化，而不是WebGL canvas的尺寸
-    const imageWidth = this.originalImageData
-      ? this.originalImageData.width
-      : this.canvas.width;
-    const imageHeight = this.originalImageData
-      ? this.originalImageData.height
-      : this.canvas.height;
-
-    const tx = x / imageWidth;
-    const ty = y / imageHeight;
-
-    console.log(
-      `WebGL变形: 像素坐标(${x}, ${y}) -> 纹理坐标(${tx.toFixed(
-        3
-      )}, ${ty.toFixed(3)}), 图像尺寸(${imageWidth}x${imageHeight})`
-    );
-
-    // 获取当前参数
-    const { size, pressure, distortion, power } = this.params;
-    const mode = this.currentMode;
-
-    // 计算影响半径 (纹理坐标空间)
-    const radius = (size / 100) * 0.2; // 调整半径计算，使效果更自然
-    const strength = (pressure * power * this.config.maxStrength) / 800; // 进一步降低基础强度
-
-    // 保存当前变形点，用于重建功能
-    this.deformHistory.push({
-      x: tx,
-      y: ty,
-      radius,
-      strength,
-      mode,
-      distortion,
-    });
-
-    // 对网格顶点应用变形
-    const { resolution } = this.mesh;
-    const deformations = this.mesh.deformations;
-
-    for (let i = 0; i <= resolution; i++) {
-      for (let j = 0; j <= resolution; j++) {
-        const idx = (i * (resolution + 1) + j) * 2;
-
-        // 顶点在纹理空间中的位置
-        const vx = j / resolution;
-        const vy = i / resolution;
-
-        // 计算到变形中心的距离
-        const dx = vx - tx;
-        const dy = vy - ty;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-
-        // 只影响半径内的点
-        if (distance < radius) {
-          // 计算影响因子
-          const factor = Math.pow(1 - distance / radius, 2) * strength;
-
-          // 根据不同模式应用变形
-          switch (mode) {
-            case this.modes.PUSH:
-              // 推拉模式 - 真正的拖拽效果
-              // 计算鼠标移动距离（转换为纹理坐标空间）
-              const movementX = this.mouseMovementX / imageWidth;
-              const movementY = this.mouseMovementY / imageHeight;
-              const movementLength = Math.sqrt(
-                movementX * movementX + movementY * movementY
-              );
-
-              // 只有在有足够移动距离时才应用效果
-              if (movementLength > 0.002) {
-                // 提高阈值，确保有明显移动
-                // 归一化移动方向
-                const moveX = movementX / movementLength;
-                const moveY = movementY / movementLength;
-
-                // 计算衰减（距离中心越近，效果越强）
-                const radiusRatio = distance / radius;
-                const falloff = Math.pow(1 - radiusRatio, 2.0); // 使用更强的衰减
-
-                // 基于实际移动距离计算强度
-                const moveStrength = pressure * power * movementLength * 0.5; // 降低移动强度系数
-
-                // 计算最终拖拽强度
-                const dragStrength = moveStrength * falloff * factor;
-
-                // 向鼠标移动方向拖拽
-                const dragX = moveX * dragStrength;
-                const dragY = moveY * dragStrength;
-
-                // 应用变形，但限制最大变形量
-                const maxDeform = 0.01; // 限制单次最大变形量（纹理坐标空间）
-                deformations[idx] += Math.max(
-                  -maxDeform,
-                  Math.min(maxDeform, dragX)
-                );
-                deformations[idx + 1] += Math.max(
-                  -maxDeform,
-                  Math.min(maxDeform, dragY)
-                );
-              }
-              break;
-
-            case this.modes.CLOCKWISE:
-              // 顺时针旋转
-              const angle = Math.atan2(dy, dx) + factor;
-              const len = distance;
-              deformations[idx] += Math.cos(angle) * len - dx;
-              deformations[idx + 1] += Math.sin(angle) * len - dy;
-              break;
-
-            case this.modes.COUNTERCLOCKWISE:
-              // 逆时针旋转
-              const angle2 = Math.atan2(dy, dx) - factor;
-              const len2 = distance;
-              deformations[idx] += Math.cos(angle2) * len2 - dx;
-              deformations[idx + 1] += Math.sin(angle2) * len2 - dy;
-              break;
-
-            case this.modes.PINCH:
-              // 捏合效果 - 向中心收缩
-              deformations[idx] -= dx * factor;
-              deformations[idx + 1] -= dy * factor;
-              break;
-
-            case this.modes.EXPAND:
-              // 展开效果 - 参考捏合算法的反向操作
-              const expandFactor = factor * 1.5;
-              deformations[idx] += dx * expandFactor;
-              deformations[idx + 1] += dy * expandFactor;
-              break;
-
-            case this.modes.CRYSTAL:
-              // 水晶效果 - 参考旋转算法创建多重角度变形
-              const crystalAngle = Math.atan2(dy, dx);
-              const crystalRadius = distance / radius;
-
-              // 确保有基础效果
-              const baseDistortion = Math.max(distortion, 0.3);
-
-              // 创建多重波形 - 类似旋转但加入波形调制
-              const wave1 = Math.sin(crystalAngle * 8) * 0.6;
-              const wave2 = Math.cos(crystalAngle * 12) * 0.4;
-              const waveAngle = crystalAngle + (wave1 + wave2) * baseDistortion;
-
-              // 径向扭曲 - 类似旋转的距离调制
-              const radialMod = 1 + Math.sin(crystalRadius * Math.PI * 2) * 0.3;
-              const modDistance = distance * radialMod;
-
-              const crystalX = Math.cos(waveAngle) * modDistance;
-              const crystalY = Math.sin(waveAngle) * modDistance;
-
-              deformations[idx] += (crystalX - (tx + dx)) * factor;
-              deformations[idx + 1] += (crystalY - (ty + dy)) * factor;
-              break;
-
-            case this.modes.EDGE:
-              // 边缘效果 - 参考旋转算法创建垂直于径向的波纹
-              const edgeAngle = Math.atan2(dy, dx);
-              const edgeRadius = distance / radius;
-
-              // 确保有基础效果
-              const baseEdgeDistortion = Math.max(distortion, 0.5);
-
-              // 创建边缘波纹 - 垂直于径向方向的调制
-              const edgeWave =
-                Math.sin(edgeRadius * Math.PI * 4) * Math.cos(edgeAngle * 6);
-              const perpAngle = edgeAngle + Math.PI / 2; // 垂直角度
-
-              const edgeFactor = edgeWave * factor * baseEdgeDistortion;
-              const edgeX = Math.cos(perpAngle) * edgeFactor;
-              const edgeY = Math.sin(perpAngle) * edgeFactor;
-
-              deformations[idx] += edgeX;
-              deformations[idx + 1] += edgeY;
-              break;
-
-            case this.modes.RECONSTRUCT:
-              // 重建 - 向原始位置恢复
-              deformations[idx] *= 0.9;
-              deformations[idx + 1] *= 0.9;
-              break;
-          }
-        }
-      }
-    }
-
-    // 更新变形缓冲区
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.deformBuffer);
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      deformations,
-      this.gl.DYNAMIC_DRAW
-    );
-
-    // 重新渲染
-    this._render();
-
-    // 更新当前图像数据
-    this.currentImageData = this._getImageData();
-
-    return this.currentImageData;
-  }
-
-  /**
-   * 渲染变形后的图像
-   * @private
-   */
-  _render() {
-    if (!this.initialized) return;
-
-    // 清除画布
-    this.gl.clearColor(0, 0, 0, 0);
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-    // 使用变形程序
-    this.gl.useProgram(this.deformProgram);
-
-    // 设置纹理
-    this.gl.activeTexture(this.gl.TEXTURE0);
-    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-    const u_image = this.gl.getUniformLocation(this.deformProgram, "u_image");
-    this.gl.uniform1i(u_image, 0);
-
-    // 设置顶点位置属性
-    const a_position = this.gl.getAttribLocation(
-      this.deformProgram,
-      "a_position"
-    );
-    this.gl.enableVertexAttribArray(a_position);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
-    this.gl.vertexAttribPointer(a_position, 2, this.gl.FLOAT, false, 0, 0);
-
-    // 设置纹理坐标属性
-    const a_texCoord = this.gl.getAttribLocation(
-      this.deformProgram,
-      "a_texCoord"
-    );
-    this.gl.enableVertexAttribArray(a_texCoord);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
-    this.gl.vertexAttribPointer(a_texCoord, 2, this.gl.FLOAT, false, 0, 0);
-
-    // 设置变形属性
-    const a_deformation = this.gl.getAttribLocation(
-      this.deformProgram,
-      "a_deformation"
-    );
-    this.gl.enableVertexAttribArray(a_deformation);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.deformBuffer);
-    this.gl.vertexAttribPointer(a_deformation, 2, this.gl.FLOAT, false, 0, 0);
-
-    // 绘制三角形
-    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    this.gl.drawElements(
-      this.gl.TRIANGLES,
-      this.mesh.indices.length,
-      this.gl.UNSIGNED_SHORT,
-      0
-    );
-  }
-
-  /**
-   * 获取当前图像数据
-   * @returns {ImageData} 当前图像数据
-   * @private
-   */
-  _getImageData() {
-    const width = this.canvas.width;
-    const height = this.canvas.height;
-
-    // 读取WebGL画布像素
-    const pixels = new Uint8Array(width * height * 4);
-    this.gl.readPixels(
-      0,
-      0,
-      width,
-      height,
-      this.gl.RGBA,
-      this.gl.UNSIGNED_BYTE,
-      pixels
-    );
-
-    // 直接创建ImageData，不进行翻转
-    // WebGL和Canvas2D的坐标系不同，但这里我们保持WebGL的原始输出
-    const imageData = new ImageData(
-      new Uint8ClampedArray(pixels),
-      width,
-      height
-    );
-
-    return imageData;
-  }
-
-  /**
-   * 重置所有变形
-   * @returns {ImageData} 重置后的图像数据
-   */
-  reset() {
-    if (!this.initialized) return null;
-
-    // 清除变形历史
-    this.deformHistory = [];
-
-    // 重置所有变形
-    const deformations = new Float32Array(this.mesh.deformations.length);
-    this.mesh.deformations = deformations;
-
-    // 更新变形缓冲区
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.deformBuffer);
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      deformations,
-      this.gl.DYNAMIC_DRAW
-    );
-
-    // 重新渲染
-    this._render();
-
-    // 更新当前图像数据
-    this.currentImageData = this._getImageData();
-
-    return this.currentImageData;
+  _createMeshBuffer() {
+    const gl = this.gl;
+    const vertices = new Float32Array([
+      -1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,
+    ]);
+
+    this.meshBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.meshBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   }
 
   /**
    * 设置液化模式
-   * @param {String} mode 液化模式
    */
   setMode(mode) {
     if (Object.values(this.modes).includes(mode)) {
@@ -782,9 +288,7 @@ export class LiquifyWebGLManager {
   }
 
   /**
-   * 设置液化参数
-   * @param {String} param 参数名
-   * @param {Number} value 参数值
+   * 设置参数
    */
   setParam(param, value) {
     if (param in this.params) {
@@ -795,13 +299,249 @@ export class LiquifyWebGLManager {
   }
 
   /**
-   * 获取当前参数
-   * @returns {Object} 当前参数
+   * 获取参数
    */
   getParams() {
     return { ...this.params };
   }
 
+  /**
+   * 开始液化操作
+   */
+  startDeformation(x, y) {
+    this.initialMouseX = x;
+    this.initialMouseY = y;
+    this.isDragging = true;
+
+    // 初始化持续按压状态
+    this.pressStartTime = Date.now();
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+    this.isHolding = true;
+
+    // 启动持续效果定时器
+    this.startContinuousEffect();
+
+    console.log(`WebGL液化开始，初始点: (${x}, ${y})`);
+  }
+
+  /**
+   * 结束液化操作
+   */
+  endDeformation() {
+    this.isDragging = false;
+    this.isHolding = false;
+    this.pressStartTime = 0;
+    this.pressDuration = 0;
+    this.accumulatedRotation = 0;
+    this.accumulatedScale = 0;
+
+    // 停止持续效果定时器
+    this.stopContinuousEffect();
+
+    console.log("WebGL液化结束");
+  }
+
+  /**
+   * 启动持续效果
+   */
+  startContinuousEffect() {
+    this.stopContinuousEffect();
+
+    this.continuousTimer = setInterval(() => {
+      if (this.isHolding && this.initialized) {
+        this.pressDuration = Date.now() - this.pressStartTime;
+        this.applyContinuousDeformation();
+      }
+    }, this.continuousApplyInterval);
+  }
+
+  /**
+   * 停止持续效果
+   */
+  stopContinuousEffect() {
+    if (this.continuousTimer) {
+      clearInterval(this.continuousTimer);
+      this.continuousTimer = null;
+    }
+  }
+
+  /**
+   * 应用持续变形效果
+   */
+  applyContinuousDeformation() {
+    if (!this.isHolding || !this.initialized) return;
+
+    return this.applyDeformation(this.initialMouseX, this.initialMouseY);
+  }
+
+  /**
+   * 应用液化变形
+   */
+  applyDeformation(x, y) {
+    if (!this.initialized || !this.gl) return null;
+
+    const gl = this.gl;
+    const { size, pressure, power, distortion } = this.params;
+
+    // 设置视口
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+
+    // 使用着色器程序
+    gl.useProgram(this.program);
+
+    // 绑定属性
+    const positionLoc = gl.getAttribLocation(this.program, "a_position");
+    const texCoordLoc = gl.getAttribLocation(this.program, "a_texCoord");
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.meshBuffer);
+    gl.enableVertexAttribArray(positionLoc);
+    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(texCoordLoc);
+    gl.vertexAttribPointer(texCoordLoc, 2, gl.FLOAT, false, 16, 8);
+
+    // 设置uniform变量
+    const centerLoc = gl.getUniformLocation(this.program, "u_center");
+    const radiusLoc = gl.getUniformLocation(this.program, "u_radius");
+    const strengthLoc = gl.getUniformLocation(this.program, "u_strength");
+    const modeLoc = gl.getUniformLocation(this.program, "u_mode");
+    const timeLoc = gl.getUniformLocation(this.program, "u_time");
+    const distortionLoc = gl.getUniformLocation(this.program, "u_distortion");
+    const dragVectorLoc = gl.getUniformLocation(this.program, "u_dragVector");
+
+    // 计算参数
+    const centerX = x / this.canvas.width;
+    const centerY = 1.0 - y / this.canvas.height; // WebGL坐标系Y轴翻转
+    const radius = (size / Math.max(this.canvas.width, this.canvas.height)) * 2;
+
+    // 计算强度，考虑持续按压效果
+    let strength = pressure * power;
+    if (this.isHolding) {
+      const timeFactor = Math.min(this.pressDuration / 1000, 3.0);
+      if (this.currentMode === this.modes.PUSH) {
+        strength *= 0.2 + timeFactor * 0.3;
+      } else {
+        strength *= 0.5 + timeFactor * 0.5;
+      }
+    }
+
+    // 计算拖拽向量（用于推拉模式）
+    const dragX = this.isDragging
+      ? (x - this.initialMouseX) / this.canvas.width
+      : 0;
+    const dragY = this.isDragging
+      ? -(y - this.initialMouseY) / this.canvas.height
+      : 0;
+
+    // 获取模式索引
+    const modeIndex = Object.values(this.modes).indexOf(this.currentMode);
+
+    // 设置uniform值
+    gl.uniform2f(centerLoc, centerX, centerY);
+    gl.uniform1f(radiusLoc, radius);
+    gl.uniform1f(strengthLoc, strength);
+    gl.uniform1i(modeLoc, modeIndex);
+    gl.uniform1f(timeLoc, this.pressDuration);
+    gl.uniform1f(distortionLoc, distortion);
+    gl.uniform2f(dragVectorLoc, dragX, dragY);
+
+    // 绑定纹理
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.currentTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_texture"), 0);
+
+    // 渲染到帧缓冲
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      this.currentTexture,
+      0
+    );
+
+    // 绘制
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    // 读取结果并转换为ImageData
+    const pixels = new Uint8Array(this.canvas.width * this.canvas.height * 4);
+    gl.readPixels(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      pixels
+    );
+
+    // 翻转Y轴以匹配ImageData格式
+    const flippedPixels = new Uint8ClampedArray(pixels.length);
+    for (let y = 0; y < this.canvas.height; y++) {
+      for (let x = 0; x < this.canvas.width; x++) {
+        const srcIndex =
+          ((this.canvas.height - 1 - y) * this.canvas.width + x) * 4;
+        const dstIndex = (y * this.canvas.width + x) * 4;
+        flippedPixels[dstIndex] = pixels[srcIndex];
+        flippedPixels[dstIndex + 1] = pixels[srcIndex + 1];
+        flippedPixels[dstIndex + 2] = pixels[srcIndex + 2];
+        flippedPixels[dstIndex + 3] = pixels[srcIndex + 3];
+      }
+    }
+
+    return new ImageData(flippedPixels, this.canvas.width, this.canvas.height);
+  }
+
+  /**
+   * 重置到原始状态
+   */
+  reset() {
+    if (!this.initialized) return null;
+
+    const gl = this.gl;
+
+    // 将原始纹理复制到当前纹理
+    gl.bindTexture(gl.TEXTURE_2D, this.currentTexture);
+    gl.copyTexImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height,
+      0
+    );
+
+    // 读取原始纹理数据
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      this.originalTexture,
+      0
+    );
+
+    const pixels = new Uint8Array(this.canvas.width * this.canvas.height * 4);
+    gl.readPixels(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      pixels
+    );
+
+    return new ImageData(
+      new Uint8ClampedArray(pixels),
+      this.canvas.width,
+      this.canvas.height
+    );
+  }
+
   /**
    * 重置参数为默认值
    */
@@ -814,65 +554,23 @@ export class LiquifyWebGLManager {
     };
   }
 
-  /**
-   * 获取原始图像数据
-   * @returns {ImageData} 原始图像数据
-   */
-  getOriginalImageData() {
-    return this.originalImageData;
-  }
-
-  /**
-   * 获取当前图像数据
-   * @returns {ImageData} 当前图像数据
-   */
-  getCurrentImageData() {
-    return this.currentImageData;
-  }
-
   /**
    * 释放资源
    */
   dispose() {
-    if (!this.gl) return;
+    if (this.gl) {
+      if (this.program) this.gl.deleteProgram(this.program);
+      if (this.meshBuffer) this.gl.deleteBuffer(this.meshBuffer);
+      if (this.originalTexture) this.gl.deleteTexture(this.originalTexture);
+      if (this.currentTexture) this.gl.deleteTexture(this.currentTexture);
+      if (this.framebuffer) this.gl.deleteFramebuffer(this.framebuffer);
+    }
 
-    // 删除缓冲区
-    if (this.vertexBuffer) this.gl.deleteBuffer(this.vertexBuffer);
-    if (this.texCoordBuffer) this.gl.deleteBuffer(this.texCoordBuffer);
-    if (this.deformBuffer) this.gl.deleteBuffer(this.deformBuffer);
-    if (this.indexBuffer) this.gl.deleteBuffer(this.indexBuffer);
-
-    // 删除纹理
-    if (this.texture) this.gl.deleteTexture(this.texture);
-
-    // 删除着色器程序
-    if (this.program) this.gl.deleteProgram(this.program);
-    if (this.deformProgram) this.gl.deleteProgram(this.deformProgram);
-
-    // 重置属性
+    this.stopContinuousEffect();
+    this.initialized = false;
     this.canvas = null;
     this.gl = null;
-    this.program = null;
-    this.deformProgram = null;
-    this.texture = null;
-    this.mesh = null;
-    this.initialized = false;
-    this.deformHistory = [];
-  }
 
-  /**
-   * 检查是否支持WebGL
-   * @returns {Boolean} 是否支持WebGL
-   */
-  static isSupported() {
-    try {
-      const canvas = document.createElement("canvas");
-      return !!(
-        window.WebGLRenderingContext &&
-        (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
-      );
-    } catch (e) {
-      return false;
-    }
+    console.log("WebGL液化管理器资源已释放");
   }
 }
diff --git a/src/component/Canvas/CanvasEditor/managers/minimap/MinimapManager.js b/src/component/Canvas/CanvasEditor/managers/minimap/MinimapManager.js
index 6377150f..910e9ce4 100644
--- a/src/component/Canvas/CanvasEditor/managers/minimap/MinimapManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/minimap/MinimapManager.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 
 /**
  * 小地图管理器类
diff --git a/src/component/Canvas/CanvasEditor/managers/selection/SelectionManager.js b/src/component/Canvas/CanvasEditor/managers/selection/SelectionManager.js
index 7fe2defb..d269be9a 100644
--- a/src/component/Canvas/CanvasEditor/managers/selection/SelectionManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/selection/SelectionManager.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { generateId } from "../../utils/helper";
 import { OperationType } from "../../utils/layerHelper";
 import {
diff --git a/src/component/Canvas/CanvasEditor/tests/liquifyIntegrationTests.js b/src/component/Canvas/CanvasEditor/tests/liquifyIntegrationTests.js
new file mode 100644
index 00000000..4ffebf3c
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/tests/liquifyIntegrationTests.js
@@ -0,0 +1,480 @@
+/**
+ * 液化功能集成测试
+ * 用于在浏览器环境中测试完整的液化工作流程
+ */
+
+import { LiquifyCPUManager } from "../managers/liquify/LiquifyCPUManager.js";
+import { LiquifyWebGLManager } from "../managers/liquify/LiquifyWebGLManager.js";
+import { LiquifyRealTimeUpdater } from "../managers/liquify/LiquifyRealTimeUpdater.js";
+import { EnhancedLiquifyManager } from "../managers/liquify/EnhancedLiquifyManager.js";
+
+// 集成测试结果
+let testResults = {
+  totalTests: 0,
+  passedTests: 0,
+  failedTests: 0,
+  errors: [],
+};
+
+/**
+ * 创建测试图像数据
+ */
+function createTestImageData(width = 100, height = 100) {
+  const imageData = new ImageData(width, height);
+  const data = imageData.data;
+
+  // 创建一个简单的渐变图案用于测试
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const index = (y * width + x) * 4;
+      data[index] = (x / width) * 255; // Red
+      data[index + 1] = (y / height) * 255; // Green
+      data[index + 2] = 128; // Blue
+      data[index + 3] = 255; // Alpha
+    }
+  }
+
+  return imageData;
+}
+
+/**
+ * 创建测试Canvas
+ */
+function createTestCanvas(width = 200, height = 200) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+/**
+ * 创建模拟Fabric对象
+ */
+function createMockFabricObject(imageData) {
+  return {
+    left: 50,
+    top: 50,
+    width: imageData.width,
+    height: imageData.height,
+    scaleX: 1,
+    scaleY: 1,
+    angle: 0,
+    flipX: false,
+    flipY: false,
+    _element: null,
+    calcTransformMatrix: function () {
+      return [this.scaleX, 0, 0, this.scaleY, this.left, this.top];
+    },
+    set: function (props) {
+      Object.assign(this, props);
+    },
+  };
+}
+
+/**
+ * 运行单个测试
+ */
+async function runTest(testName, testFunction) {
+  testResults.totalTests++;
+
+  try {
+    console.log(`🧪 运行测试: ${testName}`);
+    await testFunction();
+    testResults.passedTests++;
+    console.log(`✅ 测试通过: ${testName}`);
+  } catch (error) {
+    testResults.failedTests++;
+    testResults.errors.push({ testName, error: error.message });
+    console.error(`❌ 测试失败: ${testName}`, error);
+  }
+}
+
+/**
+ * 测试CPU管理器基本功能
+ */
+async function testCPUManagerBasics() {
+  const manager = new LiquifyCPUManager();
+  const testImageData = createTestImageData();
+
+  // 初始化
+  manager.initialize(testImageData);
+
+  // 设置参数
+  manager.setParams({
+    size: 50,
+    pressure: 0.5,
+    distortion: 0.3,
+    power: 0.8,
+  });
+
+  // 设置模式
+  manager.setMode("push");
+
+  // 应用变形
+  const result = manager.applyDeformation(50, 50);
+
+  if (
+    !result ||
+    result.width !== testImageData.width ||
+    result.height !== testImageData.height
+  ) {
+    throw new Error("CPU管理器变形结果无效");
+  }
+
+  // 测试不同模式
+  const modes = [
+    "push",
+    "clockwise",
+    "counterclockwise",
+    "pinch",
+    "expand",
+    "reconstruct",
+  ];
+  for (const mode of modes) {
+    manager.setMode(mode);
+    const modeResult = manager.applyDeformation(25, 25);
+    if (!modeResult) {
+      throw new Error(`模式 ${mode} 变形失败`);
+    }
+  }
+}
+
+/**
+ * 测试WebGL管理器基本功能
+ */
+async function testWebGLManagerBasics() {
+  const manager = new LiquifyWebGLManager();
+  const testImageData = createTestImageData();
+
+  try {
+    // 初始化
+    manager.initialize(testImageData);
+
+    // 检查WebGL是否可用
+    if (!manager.initialized) {
+      console.warn("WebGL不可用，跳过WebGL测试");
+      return;
+    }
+
+    // 设置参数
+    manager.setParams({
+      size: 50,
+      pressure: 0.5,
+      distortion: 0.3,
+      power: 0.8,
+    });
+
+    // 设置模式
+    manager.setMode("push");
+
+    // 应用变形
+    const result = manager.applyDeformation(50, 50);
+
+    if (
+      !result ||
+      result.width !== testImageData.width ||
+      result.height !== testImageData.height
+    ) {
+      throw new Error("WebGL管理器变形结果无效");
+    }
+  } catch (error) {
+    if (error.message.includes("WebGL")) {
+      console.warn("WebGL不支持，跳过WebGL测试");
+      return;
+    }
+    throw error;
+  }
+}
+
+/**
+ * 测试实时更新器功能
+ */
+async function testRealTimeUpdater() {
+  const canvas = createTestCanvas();
+  const testImageData = createTestImageData();
+  const mockFabricObject = createMockFabricObject(testImageData);
+
+  // 模拟fabric Canvas
+  const fabricCanvas = {
+    getObjects: () => [mockFabricObject],
+    remove: () => {},
+    insertAt: () => {},
+    renderAll: () => {},
+  };
+
+  const updater = new LiquifyRealTimeUpdater(fabricCanvas);
+
+  // 设置目标对象
+  updater.setTargetObject(mockFabricObject);
+
+  // 测试快速更新
+  await updater.updateImage(testImageData, true);
+
+  // 测试完整更新
+  await updater.updateImage(testImageData, false);
+
+  // 测试待处理更新
+  updater.pendingImageData = testImageData;
+  await updater.processPendingUpdates();
+
+  // 清理
+  updater.dispose();
+}
+
+/**
+ * 测试增强液化管理器
+ */
+async function testEnhancedLiquifyManager() {
+  const manager = new EnhancedLiquifyManager();
+  const testImageData = createTestImageData();
+  const mockFabricObject = createMockFabricObject(testImageData);
+
+  // 初始化
+  const result = await manager.prepareForLiquify(mockFabricObject);
+
+  if (!result || !result.originalImageData) {
+    throw new Error("增强液化管理器初始化失败");
+  }
+
+  // 设置参数
+  manager.setParams({
+    size: 50,
+    pressure: 0.5,
+    distortion: 0.3,
+    power: 0.8,
+  });
+
+  // 应用液化
+  const liquifyResult = await manager.applyLiquify(
+    mockFabricObject,
+    "push",
+    { size: 50, pressure: 0.5, distortion: 0.3, power: 0.8 },
+    50,
+    50
+  );
+
+  if (!liquifyResult) {
+    throw new Error("液化应用失败");
+  }
+}
+
+/**
+ * 测试坐标转换准确性
+ */
+async function testCoordinateConversion() {
+  const testImageData = createTestImageData(200, 200);
+  const mockFabricObject = createMockFabricObject(testImageData);
+
+  // 测试不同的缩放情况
+  const testCases = [
+    { scaleX: 1, scaleY: 1, flipX: false, flipY: false },
+    { scaleX: 2, scaleY: 2, flipX: false, flipY: false },
+    { scaleX: 0.5, scaleY: 0.5, flipX: false, flipY: false },
+    { scaleX: 1, scaleY: 1, flipX: true, flipY: false },
+    { scaleX: 1, scaleY: 1, flipX: false, flipY: true },
+  ];
+
+  for (const testCase of testCases) {
+    Object.assign(mockFabricObject, testCase);
+
+    // 模拟坐标转换函数（简化版）
+    const fabricX = 100,
+      fabricY = 100;
+
+    // 创建变换矩阵模拟
+    const transform = mockFabricObject.calcTransformMatrix();
+
+    // 基本的坐标边界检查
+    const localX = (fabricX - mockFabricObject.left) / mockFabricObject.scaleX;
+    const localY = (fabricY - mockFabricObject.top) / mockFabricObject.scaleY;
+
+    if (
+      localX < -mockFabricObject.width / 2 ||
+      localX > mockFabricObject.width / 2 ||
+      localY < -mockFabricObject.height / 2 ||
+      localY > mockFabricObject.height / 2
+    ) {
+      // 坐标在对象外部，这是正常情况
+      continue;
+    }
+
+    // 转换到图像坐标
+    let imageX =
+      (localX + mockFabricObject.width / 2) *
+      (testImageData.width / mockFabricObject.width);
+    let imageY =
+      (localY + mockFabricObject.height / 2) *
+      (testImageData.height / mockFabricObject.height);
+
+    // 处理翻转
+    if (mockFabricObject.flipX) {
+      imageX = testImageData.width - imageX;
+    }
+    if (mockFabricObject.flipY) {
+      imageY = testImageData.height - imageY;
+    }
+
+    // 验证结果在合理范围内
+    if (
+      imageX < 0 ||
+      imageX >= testImageData.width ||
+      imageY < 0 ||
+      imageY >= testImageData.height
+    ) {
+      throw new Error(`坐标转换结果超出图像范围: (${imageX}, ${imageY})`);
+    }
+  }
+}
+
+/**
+ * 测试性能表现
+ */
+async function testPerformance() {
+  const manager = new LiquifyCPUManager();
+  const testImageData = createTestImageData(400, 400); // 更大的图像
+
+  manager.initialize(testImageData);
+  manager.setParams({
+    size: 50,
+    pressure: 0.5,
+    distortion: 0.3,
+    power: 0.8,
+  });
+  manager.setMode("push");
+
+  // 测试多次操作的性能
+  const startTime = performance.now();
+  const operationCount = 100;
+
+  for (let i = 0; i < operationCount; i++) {
+    const x = Math.random() * testImageData.width;
+    const y = Math.random() * testImageData.height;
+    manager.applyDeformation(x, y);
+  }
+
+  const endTime = performance.now();
+  const totalTime = endTime - startTime;
+  const avgTime = totalTime / operationCount;
+
+  console.log(
+    `性能测试结果: ${operationCount} 次操作，总耗时 ${totalTime.toFixed(
+      2
+    )}ms，平均 ${avgTime.toFixed(2)}ms/次`
+  );
+
+  // 验证性能阈值（每次操作不应超过50ms）
+  if (avgTime > 50) {
+    throw new Error(
+      `性能不达标：平均操作时间 ${avgTime.toFixed(2)}ms 超过阈值 50ms`
+    );
+  }
+}
+
+/**
+ * 测试内存管理
+ */
+async function testMemoryManagement() {
+  const initialMemory = performance.memory
+    ? performance.memory.usedJSHeapSize
+    : 0;
+
+  // 创建多个管理器实例
+  const managers = [];
+  for (let i = 0; i < 10; i++) {
+    const manager = new LiquifyCPUManager();
+    const testImageData = createTestImageData(200, 200);
+    manager.initialize(testImageData);
+    managers.push(manager);
+  }
+
+  // 销毁所有管理器
+  for (const manager of managers) {
+    if (manager.destroy) {
+      manager.destroy();
+    }
+  }
+
+  // 强制垃圾回收（如果可用）
+  if (window.gc) {
+    window.gc();
+  }
+
+  const finalMemory = performance.memory
+    ? performance.memory.usedJSHeapSize
+    : 0;
+  const memoryIncrease = finalMemory - initialMemory;
+
+  console.log(
+    `内存测试: 初始 ${(initialMemory / 1024 / 1024).toFixed(2)}MB, 最终 ${(
+      finalMemory /
+      1024 /
+      1024
+    ).toFixed(2)}MB, 增长 ${(memoryIncrease / 1024 / 1024).toFixed(2)}MB`
+  );
+
+  // 验证内存增长不超过10MB（基本的内存泄漏检查）
+  if (memoryIncrease > 10 * 1024 * 1024) {
+    console.warn(
+      `潜在内存泄漏: 内存增长 ${(memoryIncrease / 1024 / 1024).toFixed(2)}MB`
+    );
+  }
+}
+
+/**
+ * 运行所有集成测试
+ */
+export async function runLiquifyIntegrationTests() {
+  console.log("🚀 开始液化功能集成测试...");
+
+  // 重置测试结果
+  testResults = {
+    totalTests: 0,
+    passedTests: 0,
+    failedTests: 0,
+    errors: [],
+  };
+
+  try {
+    // 基础功能测试
+    await runTest("CPU管理器基本功能", testCPUManagerBasics);
+    await runTest("WebGL管理器基本功能", testWebGLManagerBasics);
+    await runTest("实时更新器功能", testRealTimeUpdater);
+    await runTest("增强液化管理器", testEnhancedLiquifyManager);
+
+    // 高级功能测试
+    await runTest("坐标转换准确性", testCoordinateConversion);
+    await runTest("性能表现", testPerformance);
+    await runTest("内存管理", testMemoryManagement);
+  } catch (error) {
+    console.error("集成测试出现严重错误:", error);
+  }
+
+  // 输出测试结果
+  console.log("\n📊 液化功能集成测试结果:");
+  console.log(`总测试数: ${testResults.totalTests}`);
+  console.log(`通过: ${testResults.passedTests}`);
+  console.log(`失败: ${testResults.failedTests}`);
+  console.log(
+    `成功率: ${(
+      (testResults.passedTests / testResults.totalTests) *
+      100
+    ).toFixed(1)}%`
+  );
+
+  if (testResults.errors.length > 0) {
+    console.log("\n❌ 失败的测试:");
+    testResults.errors.forEach(({ testName, error }) => {
+      console.log(`  - ${testName}: ${error}`);
+    });
+  }
+
+  return testResults;
+}
+
+/**
+ * 在浏览器控制台中运行测试
+ */
+if (typeof window !== "undefined") {
+  window.runLiquifyIntegrationTests = runLiquifyIntegrationTests;
+  console.log("💡 使用 window.runLiquifyIntegrationTests() 运行液化集成测试");
+}
diff --git a/src/component/Canvas/CanvasEditor/tests/liquifyTests.js b/src/component/Canvas/CanvasEditor/tests/liquifyTests.js
new file mode 100644
index 00000000..7b185c7e
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/tests/liquifyTests.js
@@ -0,0 +1,222 @@
+/**
+ * 液化功能测试和验证
+ * 用于测试液化推拉算法和坐标转换修复
+ */
+
+// 测试坐标转换函数
+export function testCoordinateConversion() {
+  console.log("开始测试坐标转换...");
+
+  // 模拟fabric对象
+  const mockFabricObject = {
+    left: 100,
+    top: 100,
+    width: 200,
+    height: 200,
+    scaleX: 1.5,
+    scaleY: 1.5,
+    angle: 0,
+    flipX: false,
+    flipY: false,
+    calcTransformMatrix: function () {
+      // 简化的变换矩阵计算
+      return [this.scaleX, 0, 0, this.scaleY, this.left, this.top];
+    },
+  };
+
+  // 模拟图像数据
+  const mockImageData = {
+    width: 400,
+    height: 400,
+  };
+
+  // 测试不同的画布坐标
+  const testCoordinates = [
+    { x: 150, y: 150 }, // 左上角
+    { x: 200, y: 200 }, // 中心
+    { x: 250, y: 250 }, // 右下角
+  ];
+
+  testCoordinates.forEach((coord, index) => {
+    console.log(`测试坐标 ${index + 1}: (${coord.x}, ${coord.y})`);
+
+    // 这里应该调用实际的坐标转换函数
+    // const imageCoords = _convertFabricCoordsToImageCoords(coord.x, coord.y);
+
+    // 模拟转换结果
+    const expectedImageX =
+      ((coord.x - mockFabricObject.left) / mockFabricObject.scaleX +
+        mockFabricObject.width / 2) *
+      (mockImageData.width / mockFabricObject.width);
+    const expectedImageY =
+      ((coord.y - mockFabricObject.top) / mockFabricObject.scaleY +
+        mockFabricObject.height / 2) *
+      (mockImageData.height / mockFabricObject.height);
+
+    console.log(
+      `  预期图像坐标: (${expectedImageX.toFixed(2)}, ${expectedImageY.toFixed(
+        2
+      )})`
+    );
+  });
+
+  console.log("坐标转换测试完成");
+}
+
+// 测试推拉算法性能
+export function testPushAlgorithmPerformance() {
+  console.log("开始测试推拉算法性能...");
+
+  const startTime = performance.now();
+
+  // 模拟连续的推拉操作
+  const operations = 100;
+  const movements = [];
+
+  for (let i = 0; i < operations; i++) {
+    // 模拟鼠标移动
+    const x = 200 + Math.sin(i * 0.1) * 50;
+    const y = 200 + Math.cos(i * 0.1) * 50;
+
+    movements.push({ x, y, timestamp: Date.now() });
+
+    // 模拟液化计算
+    const movementLength =
+      i > 0
+        ? Math.sqrt(
+            Math.pow(x - movements[i - 1].x, 2) +
+              Math.pow(y - movements[i - 1].y, 2)
+          )
+        : 0;
+
+    if (movementLength > 0.5) {
+      // 模拟变形计算
+      const pressure = 0.8;
+      const power = 0.8;
+      const velocityFactor = Math.min(movementLength * 0.1, 1.0);
+      const pushStrength = pressure * power * velocityFactor * 0.5;
+
+      // 记录计算结果
+      movements[i].strength = pushStrength;
+    }
+  }
+
+  const endTime = performance.now();
+  const totalTime = endTime - startTime;
+  const avgTimePerOperation = totalTime / operations;
+
+  console.log(`推拉算法性能测试结果:`);
+  console.log(`  总操作数: ${operations}`);
+  console.log(`  总耗时: ${totalTime.toFixed(2)}ms`);
+  console.log(`  平均每次操作耗时: ${avgTimePerOperation.toFixed(2)}ms`);
+  console.log(`  预估FPS: ${(1000 / avgTimePerOperation).toFixed(1)}fps`);
+
+  return {
+    totalTime,
+    avgTimePerOperation,
+    estimatedFps: 1000 / avgTimePerOperation,
+  };
+}
+
+// 测试缩放一致性
+export function testScaleConsistency() {
+  console.log("开始测试缩放一致性...");
+
+  // 模拟不同缩放比例的对象
+  const scaleFactors = [0.5, 1.0, 1.5, 2.0, 2.5];
+
+  scaleFactors.forEach((scale) => {
+    console.log(`测试缩放比例: ${scale}`);
+
+    // 模拟fabric对象
+    const fabricObject = {
+      width: 200,
+      height: 200,
+      scaleX: scale,
+      scaleY: scale,
+      left: 300,
+      top: 300,
+    };
+
+    // 模拟图像数据（原始尺寸）
+    const imageData = {
+      width: 400,
+      height: 400,
+    };
+
+    // 测试坐标转换
+    const canvasCoord = { x: 350, y: 350 }; // 画布坐标
+
+    // 计算预期的图像坐标（修复后的逻辑）
+    const localX = (canvasCoord.x - fabricObject.left) / fabricObject.scaleX;
+    const localY = (canvasCoord.y - fabricObject.top) / fabricObject.scaleY;
+
+    const imageX =
+      (localX + fabricObject.width / 2) *
+      (imageData.width / fabricObject.width);
+    const imageY =
+      (localY + fabricObject.height / 2) *
+      (imageData.height / fabricObject.height);
+
+    console.log(`  画布坐标: (${canvasCoord.x}, ${canvasCoord.y})`);
+    console.log(`  本地坐标: (${localX.toFixed(2)}, ${localY.toFixed(2)})`);
+    console.log(`  图像坐标: (${imageX.toFixed(2)}, ${imageY.toFixed(2)})`);
+
+    // 验证图像坐标是否在合理范围内
+    const isValid =
+      imageX >= 0 &&
+      imageX < imageData.width &&
+      imageY >= 0 &&
+      imageY < imageData.height;
+    console.log(`  坐标有效性: ${isValid ? "✓" : "✗"}`);
+  });
+
+  console.log("缩放一致性测试完成");
+}
+
+// 运行所有测试
+export function runAllTests() {
+  console.log("=== 液化功能测试开始 ===");
+
+  try {
+    testCoordinateConversion();
+    console.log("");
+
+    const perfResult = testPushAlgorithmPerformance();
+    console.log("");
+
+    testScaleConsistency();
+    console.log("");
+
+    console.log("=== 液化功能测试完成 ===");
+    console.log(
+      `推荐配置: 节流时间 ${Math.max(
+        16,
+        perfResult.avgTimePerOperation * 2
+      ).toFixed(0)}ms`
+    );
+
+    return {
+      coordinateConversion: "通过",
+      performance: perfResult,
+      scaleConsistency: "通过",
+    };
+  } catch (error) {
+    console.error("测试过程中出现错误:", error);
+    return {
+      error: error.message,
+    };
+  }
+}
+
+// 在浏览器控制台中运行测试
+if (typeof window !== "undefined") {
+  window.liquifyTests = {
+    testCoordinateConversion,
+    testPushAlgorithmPerformance,
+    testScaleConsistency,
+    runAllTests,
+  };
+
+  console.log("液化测试工具已加载，可通过 window.liquifyTests 访问");
+}
diff --git a/src/component/Canvas/CanvasEditor/utils/LayerSort.js b/src/component/Canvas/CanvasEditor/utils/LayerSort.js
new file mode 100644
index 00000000..793e50ec
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/utils/LayerSort.js
@@ -0,0 +1,820 @@
+import { ReorderChildLayersCommand } from "../commands/LayerCommands";
+import { optimizeCanvasRendering } from "./helper";
+import { findLayerRecursively, LayerType } from "./layerHelper";
+
+/**
+ * 图层排序工具类
+ * 提供图层排序、重新排列画布对象等功能
+ * 基于fabric.js 5.3.1版本开发
+ */
+export class LayerSort {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric.js画布实例
+   * @param {Object} layers 图层数组响应式引用
+   */
+  constructor(canvas, layers, options = {}) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.commandManager = options.commandManager || null; // 命令管理器（可选）
+  }
+
+  /**
+   * 重新排列画布上的对象以匹配图层顺序
+   * 使用 fabric.js 的 moveTo 方法直接调整对象层级，无需清空画布
+   */
+  async rearrangeObjects() {
+    if (!this.canvas) return;
+
+    const canvasObjects = this.canvas.getObjects();
+    if (canvasObjects.length === 0) return;
+
+    // 使用画布渲染优化
+    await optimizeCanvasRendering(this.canvas, () => {
+      // 计算每个对象应该在的 z-index 位置
+      const objectZIndexMap = this.calculateObjectZIndexes();
+
+      // 按照新的 z-index 排序对象
+      const sortedObjects = canvasObjects
+        .map((obj) => ({
+          object: obj,
+          targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
+        }))
+        .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
+        .sort((a, b) => a.targetZIndex - b.targetZIndex);
+
+      // 使用 fabric.js 的 moveTo 方法重新排序
+      sortedObjects.forEach((item, index) => {
+        const currentIndex = this.canvas.getObjects().indexOf(item.object);
+        if (currentIndex !== index && currentIndex !== -1) {
+          // 将对象移动到正确的位置
+          this.canvas.moveTo(item.object, index);
+        }
+      });
+    });
+  }
+
+  /**
+   * 计算每个对象在画布中应该的 z-index
+   * 考虑图层类型、组结构和子图层
+   * @returns {Map} 对象ID到z-index的映射
+   */
+  calculateObjectZIndexes() {
+    const zIndexMap = new Map();
+    let currentZIndex = 0;
+
+    // 按照图层在数组中的顺序从后往前遍历（数组末尾 = 画布底层）
+    for (let i = this.layers.value.length - 1; i >= 0; i--) {
+      const layer = this.layers.value[i];
+
+      // 跳过不可见图层
+      if (!layer.visible) {
+        continue;
+      }
+
+      // 处理不同类型的图层
+      if (layer.isBackground && layer.fabricObject) {
+        // 背景图层对象放在最底层
+        zIndexMap.set(layer.fabricObject.id, currentZIndex++);
+      } else if (layer.isFixed && layer.fabricObjects) {
+        // 固定图层对象
+        layer.fabricObjects.forEach((obj) => {
+          if (obj?.id) {
+            zIndexMap.set(obj.id, currentZIndex++);
+          }
+        });
+      } else if (!layer.isBackground && !layer.isFixed) {
+        // 普通图层
+        currentZIndex = this.processLayerObjects(
+          layer,
+          currentZIndex,
+          zIndexMap
+        );
+      }
+    }
+
+    return zIndexMap;
+  }
+
+  /**
+   * 处理图层对象，包括组和子图层的情况
+   * @param {Object} layer 图层对象
+   * @param {number} currentZIndex 当前z-index
+   * @param {Map} zIndexMap z-index映射表
+   * @returns {number} 更新后的z-index
+   */
+  processLayerObjects(layer, currentZIndex, zIndexMap) {
+    // 检查是否有子图层（组图层）
+    if (layer.children?.length > 0) {
+      // 处理每个子图层
+      // 按照图层在数组中的顺序从后往前遍历（数组末尾 = 画布底层）
+      for (let i = layer.children.length - 1; i >= 0; i--) {
+        const childLayer = layer.children[i];
+
+        // 跳过不可见图层
+        if (!childLayer.visible) {
+          continue;
+        }
+
+        for (let j = childLayer.fabricObjects.length - 1; j >= 0; j--) {
+          const obj = childLayer.fabricObjects[j];
+          if (obj?.id) {
+            zIndexMap.set(obj.id, currentZIndex++);
+          }
+        }
+      }
+    }
+
+    // 处理图层本身的对象
+    if (Array.isArray(layer.fabricObjects)) {
+      for (let j = layer.fabricObjects.length - 1; j >= 0; j--) {
+        const obj = layer.fabricObjects[j];
+        if (obj?.id) {
+          zIndexMap.set(obj.id, currentZIndex++);
+        }
+      }
+    }
+
+    return currentZIndex;
+  }
+
+  /**
+   * 获取指定图层的子图层，按照正确顺序排列
+   * @param {string} parentLayerId 父图层ID
+   * @returns {Array} 子图层数组
+   */
+  getChildLayersInOrder(parentLayerId) {
+    // 获取所有子图层
+    const childLayers =
+      this.layers.value.filter((layer) => layer.id === parentLayerId)
+        ?.children || [];
+
+    return childLayers;
+  }
+
+  /**
+   * 根据ID获取图层
+   * @param {string} layerId 图层ID
+   * @returns {Object|null} 图层对象或null
+   */
+  getLayerById(layerId) {
+    if (!layerId || !this.layers.value) return null;
+    return this.layers.value.find((layer) => layer.id === layerId) ?? null;
+  }
+
+  /**
+   * 批量重新排列对象（异步版本，适用于大量对象）
+   * @returns {Promise<void>}
+   */
+  async rearrangeObjectsAsync() {
+    if (!this.canvas) return;
+
+    const canvasObjects = this.canvas.getObjects();
+    if (canvasObjects.length === 0) return;
+
+    return new Promise((resolve) => {
+      // 使用 requestAnimationFrame 进行异步处理
+      requestAnimationFrame(() => {
+        this.canvas.renderOnAddRemove = false;
+
+        try {
+          const objectZIndexMap = this.calculateObjectZIndexes();
+
+          const sortedObjects = canvasObjects
+            .map((obj) => ({
+              object: obj,
+              targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
+            }))
+            .filter((item) => item.targetZIndex >= 0)
+            .sort((a, b) => a.targetZIndex - b.targetZIndex);
+
+          // 分批处理，避免一次性处理太多对象
+          const batchSize = LayerSortConstants.BATCH_SIZE;
+          let currentBatch = 0;
+
+          const processBatch = () => {
+            const start = currentBatch * batchSize;
+            const end = Math.min(start + batchSize, sortedObjects.length);
+
+            for (let i = start; i < end; i++) {
+              const item = sortedObjects[i];
+              const currentIndex = this.canvas
+                .getObjects()
+                .indexOf(item.object);
+              if (currentIndex !== i && currentIndex !== -1) {
+                this.canvas.moveTo(item.object, i);
+              }
+            }
+
+            currentBatch++;
+
+            if (end < sortedObjects.length) {
+              // 继续处理下一批
+              requestAnimationFrame(processBatch);
+            } else {
+              // 所有批次处理完成
+              this.canvas.renderOnAddRemove = true;
+              this.canvas.renderAll();
+              resolve();
+            }
+          };
+
+          processBatch();
+        } catch (error) {
+          this.canvas.renderOnAddRemove = true;
+          this.canvas.renderAll();
+          console.error("重新排列对象时出错:", error);
+          resolve();
+        }
+      });
+    });
+  }
+
+  /**
+   * 验证对象顺序是否正确
+   * @returns {boolean} 顺序是否正确
+   */
+  validateObjectOrder() {
+    const canvasObjects = this.canvas.getObjects();
+    const objectZIndexMap = this.calculateObjectZIndexes();
+
+    for (let i = 0; i < canvasObjects.length - 1; i++) {
+      const currentObj = canvasObjects[i];
+      const nextObj = canvasObjects[i + 1];
+
+      const currentZIndex = objectZIndexMap.get(currentObj.id);
+      const nextZIndex = objectZIndexMap.get(nextObj.id);
+
+      if (currentZIndex !== undefined && nextZIndex !== undefined) {
+        if (currentZIndex > nextZIndex) {
+          return false; // 顺序不正确
+        }
+      }
+    }
+
+    return true; // 顺序正确
+  }
+
+  /**
+   * 图层排序规则：背景图层 > 固定图层 > 普通图层
+   * @param {Array} layers 图层数组
+   * @returns {Array} 排序后的图层数组
+   */
+  sortLayers(layers = null) {
+    const targetLayers = layers ?? this.layers.value;
+
+    return [...targetLayers].sort((a, b) => {
+      // 如果a是背景图层，它应该排在后面（最底层）
+      if (a.isBackground) return 1;
+      // 如果b是背景图层，它应该排在后面（最底层）
+      if (b.isBackground) return -1;
+
+      // 如果a是固定图层而b不是固定图层，a应该排在后面（固定图层在普通图层下方）
+      if (a.isFixed && !b.isFixed) return 1;
+      // 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
+      if (b.isFixed && !a.isFixed) return -1;
+
+      // 其他情况保持原有顺序
+      return 0;
+    });
+  }
+
+  /**
+   * 获取图层在排序后的正确插入位置
+   * @param {Object} newLayer 新图层
+   * @param {string} targetLayerId 目标图层ID（插入到该图层之前）
+   * @returns {number} 插入位置索引
+   */
+  getInsertIndex(newLayer, targetLayerId = null) {
+    if (!targetLayerId) {
+      // 如果没有指定目标图层，根据图层类型决定插入位置
+      if (newLayer.isBackground) {
+        return this.layers.value.length; // 背景图层插入到最后
+      } else if (newLayer.isFixed) {
+        // 固定图层插入到背景图层之前
+        const bgIndex = this.layers.value.findIndex(
+          (layer) => layer.isBackground
+        );
+        return bgIndex !== -1 ? bgIndex : this.layers.value.length;
+      } else {
+        // 普通图层插入到固定图层之前
+        const fixedIndex = this.layers.value.findIndex(
+          (layer) => layer.isFixed
+        );
+        return fixedIndex !== -1 ? fixedIndex : this.layers.value.length;
+      }
+    }
+
+    // 如果指定了目标图层，插入到目标图层之前
+    const targetIndex = this.layers.value.findIndex(
+      (layer) => layer.id === targetLayerId
+    );
+    return targetIndex !== -1 ? targetIndex : this.layers.value.length;
+  }
+
+  /**
+   * 移动图层到指定位置
+   * @param {string} layerId 要移动的图层ID
+   * @param {number} newIndex 新位置索引
+   * @returns {boolean} 是否移动成功
+   */
+  async moveLayerToIndex({ parentId, oldIndex, newIndex, layerId }) {
+    // 检查父图层是否存在
+    // const parentLayer = this.getLayerById(parentId);
+    const { layer: childLayer, parent: parentLayer } = findLayerRecursively(
+      this.layers.value,
+      layerId,
+      parentId
+    );
+
+    if (!parentLayer) {
+      console.warn(`父图层 ${parentId} 不存在`);
+      return false;
+    }
+
+    // 获取所有子图层
+    const childLayers = parentLayer?.children || [];
+
+    // 检查索引有效性
+    if (
+      oldIndex < 0 ||
+      newIndex < 0 ||
+      oldIndex >= childLayers.length ||
+      newIndex >= childLayers.length
+    ) {
+      console.warn("子图层排序索引无效");
+      return false;
+    }
+
+    // 检查是否是同一位置
+    if (oldIndex === newIndex) {
+      return true;
+    }
+
+    // 验证图层ID
+    const layer = childLayers[oldIndex];
+    if (!layer || layer.id !== layerId) {
+      console.warn("子图层ID与索引不匹配");
+      return false;
+    }
+
+    // 更新父图层的children数组  -  执行命令
+    const command = new ReorderChildLayersCommand({
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId,
+      layers: this.layers,
+      canvas: this.canvas,
+      layerSort: this, // 传入当前实例
+    });
+
+    if (this.commandManager) {
+      await this.commandManager?.execute(command);
+    } else {
+      await command?.execute?.();
+    }
+
+    return true;
+  }
+
+  /**
+   * 获取图层的有效移动范围
+   * @param {string} layerId 图层ID
+   * @returns {Object} 包含最小和最大索引的对象
+   */
+  getLayerMoveRange(layerId) {
+    const layer = this.getLayerById(layerId);
+    if (!layer || layer.isBackground || layer.isFixed) {
+      return { minIndex: -1, maxIndex: -1 };
+    }
+
+    // 普通图层只能在普通图层范围内移动
+    const normalLayers = this.layers.value
+      .map((layer, index) => ({ layer, index }))
+      .filter((item) => !item.layer.isBackground && !item.layer.isFixed);
+
+    if (normalLayers.length === 0) {
+      return { minIndex: -1, maxIndex: -1 };
+    }
+
+    return {
+      minIndex: normalLayers[0].index,
+      maxIndex: normalLayers[normalLayers.length - 1].index,
+    };
+  }
+
+  /**
+   * 拖拽排序图层
+   * @param {number} oldIndex 原索引
+   * @param {number} newIndex 新索引
+   * @param {string} layerId 图层ID
+   * @returns {boolean} 是否排序成功
+   */
+  async reorderLayers(oldIndex, newIndex, layerId) {
+    // 检查索引有效性
+    if (
+      oldIndex < 0 ||
+      newIndex < 0 ||
+      oldIndex >= this.layers.value.length ||
+      newIndex >= this.layers.value.length
+    ) {
+      console.warn("图层排序索引无效");
+      return false;
+    }
+
+    // 检查是否是同一位置
+    if (oldIndex === newIndex) {
+      return true;
+    }
+
+    // 获取要移动的图层
+    const layer = this.layers.value[oldIndex];
+    if (!layer || layer.id !== layerId) {
+      console.warn("图层ID与索引不匹配");
+      return false;
+    }
+
+    // 检查是否是背景层或固定层（不允许排序）
+    if (layer.isBackground || layer.isFixed) {
+      console.warn("背景层和固定层不能参与排序");
+      return false;
+    }
+
+    // 检查目标位置是否合法（不能移到背景层或固定层的位置）
+    const targetLayer = this.layers.value[newIndex];
+    if (targetLayer && (targetLayer.isBackground || targetLayer.isFixed)) {
+      console.warn("不能移动到背景层或固定层的位置");
+      return false;
+    }
+
+    // 执行排序
+    const layersArray = [...this.layers.value];
+    const [movedLayer] = layersArray.splice(oldIndex, 1);
+    layersArray.splice(newIndex, 0, movedLayer);
+
+    this.layers.value = layersArray;
+
+    // 重新排列画布对象
+    await this.rearrangeObjects();
+
+    return true;
+  }
+
+  /**
+   * 子图层排序
+   * @param {string} parentId 父图层ID
+   * @param {number} oldIndex 原索引
+   * @param {number} newIndex 新索引
+   * @param {string} layerId 子图层ID
+   * @returns {boolean} 是否排序成功
+   */
+  async reorderChildLayers(parentId, oldIndex, newIndex, layerId) {
+    // 检查父图层是否存在
+    // const parentLayer = this.getLayerById(parentId);
+    const { layer: childLayer, parent: parentLayer } = findLayerRecursively(
+      this.layers.value,
+      layerId,
+      parentId
+    );
+
+    if (!parentLayer) {
+      console.warn(`父图层 ${parentId} 不存在`);
+      return false;
+    }
+
+    // 获取所有子图层
+    const childLayers = parentLayer?.children || [];
+
+    // 检查索引有效性
+    if (
+      oldIndex < 0 ||
+      newIndex < 0 ||
+      oldIndex >= childLayers.length ||
+      newIndex >= childLayers.length
+    ) {
+      console.warn("子图层排序索引无效");
+      return false;
+    }
+
+    // 检查是否是同一位置
+    if (oldIndex === newIndex) {
+      return true;
+    }
+
+    // 验证图层ID
+    const layer = childLayers[oldIndex];
+    if (!layer || layer.id !== layerId) {
+      console.warn("子图层ID与索引不匹配");
+      return false;
+    }
+
+    // 更新父图层的children数组  -  执行命令
+    const command = ReorderChildLayersCommand({
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId,
+      layers: this.layers,
+      canvas: this.canvas,
+      layerSort: this, // 传入当前实例
+    });
+
+    if (this.commandManager) {
+      await this.commandManager?.execute(command);
+    } else {
+      await command?.execute?.();
+    }
+    return true;
+  }
+
+  /**
+   * 智能排序 - 根据对象类型和位置自动调整图层顺序
+   * @param {Array} targetLayerIds 要排序的图层ID数组
+   * @returns {boolean} 是否排序成功
+   */
+  async smartSort(targetLayerIds = null) {
+    const layersToSort = targetLayerIds
+      ? this.layers.value.filter((layer) => targetLayerIds.includes(layer.id))
+      : this.layers.value.filter(
+          (layer) => !layer.isBackground && !layer.isFixed
+        );
+
+    if (layersToSort.length <= 1) return true;
+
+    // 按照对象类型和位置进行智能排序
+    layersToSort.sort((a, b) => {
+      const aWeight = this.getLayerSortWeight(a);
+      const bWeight = this.getLayerSortWeight(b);
+
+      if (aWeight !== bWeight) {
+        return bWeight - aWeight; // 权重高的在上层
+      }
+
+      // 权重相同时，按照Y坐标排序（Y值小的在上层）
+      const aY = this.getLayerAverageY(a);
+      const bY = this.getLayerAverageY(b);
+
+      return aY - bY;
+    });
+
+    // 更新图层顺序
+    const sortedLayerIds = layersToSort.map((layer) => layer.id);
+    const otherLayers = this.layers.value.filter(
+      (layer) => !sortedLayerIds.includes(layer.id)
+    );
+
+    // 重新组织图层数组：保持背景层和固定层的位置
+    const newLayers = [];
+
+    // 添加普通图层（已排序）
+    newLayers.push(...layersToSort);
+
+    // 添加其他普通图层
+    otherLayers.forEach((layer) => {
+      if (!layer.isBackground && !layer.isFixed) {
+        newLayers.push(layer);
+      }
+    });
+
+    // 添加固定图层
+    otherLayers.forEach((layer) => {
+      if (layer.isFixed) {
+        newLayers.push(layer);
+      }
+    });
+
+    // 添加背景图层
+    otherLayers.forEach((layer) => {
+      if (layer.isBackground) {
+        newLayers.push(layer);
+      }
+    });
+
+    this.layers.value = newLayers;
+    await this.rearrangeObjects();
+
+    return true;
+  }
+
+  /**
+   * 获取图层的排序权重
+   * @param {Object} layer 图层对象
+   * @returns {number} 排序权重
+   */
+  getLayerSortWeight(layer) {
+    const weightMap = LayerSortConstants.LAYER_PRIORITY;
+
+    if (layer.isBackground) return weightMap[LayerType.BACKGROUND];
+    if (layer.isFixed) return weightMap[LayerType.FIXED];
+    if (layer.children?.length > 0) return weightMap[LayerType.GROUP];
+
+    // 根据对象类型调整权重
+    if (layer.fabricObjects && layer.fabricObjects.length > 0) {
+      const firstObj = layer.fabricObjects[0];
+      if (firstObj.type === "text") return weightMap[LayerType.NORMAL] + 10;
+      if (firstObj.type === "image") return weightMap[LayerType.NORMAL] + 5;
+    }
+
+    return weightMap[LayerType.NORMAL];
+  }
+
+  /**
+   * 获取图层对象的平均Y坐标
+   * @param {Object} layer 图层对象
+   * @returns {number} 平均Y坐标
+   */
+  getLayerAverageY(layer) {
+    let totalY = 0;
+    let count = 0;
+
+    if (layer.fabricObject) {
+      totalY += layer.fabricObject.top || 0;
+      count++;
+    }
+
+    if (layer.fabricObjects && layer.fabricObjects.length > 0) {
+      layer.fabricObjects.forEach((obj) => {
+        totalY += obj.top || 0;
+        count++;
+      });
+    }
+
+    return count > 0 ? totalY / count : 0;
+  }
+
+  /**
+   * 优化图层结构 - 清理空图层、合并相邻相似图层等
+   * @returns {Object} 优化结果统计
+   */
+  async optimizeLayerStructure() {
+    const stats = {
+      removedEmptyLayers: 0,
+      mergedLayers: 0,
+      reorderedLayers: 0,
+    };
+
+    // 清理空图层
+    const emptyLayers = this.layers.value.filter(
+      (layer) =>
+        !layer.isBackground &&
+        !layer.isFixed &&
+        (!layer.fabricObjects || layer.fabricObjects.length === 0) &&
+        (!layer.children || layer.children.length === 0)
+    );
+
+    emptyLayers.forEach((layer) => {
+      const index = this.layers.value.findIndex((l) => l.id === layer.id);
+      if (index !== -1) {
+        this.layers.value.splice(index, 1);
+        stats.removedEmptyLayers++;
+      }
+    });
+
+    // 重新排序以确保正确的层级关系
+    const wasReordered = this.sortLayers();
+    if (wasReordered) {
+      stats.reorderedLayers = this.layers.value.length;
+      await this.rearrangeObjects();
+    }
+
+    return stats;
+  }
+}
+
+/**
+ * 创建图层排序工具实例
+ * @param {Object} canvas fabric.js画布实例
+ * @param {Object} layers 图层数组响应式引用
+ * @returns {LayerSort} 图层排序工具实例
+ */
+export const createLayerSort = (canvas, layers, options = {}) => {
+  return new LayerSort(canvas, layers, options);
+};
+
+/**
+ * 图层排序相关的常量
+ */
+export const LayerSortConstants = {
+  // 图层类型优先级（数值越大优先级越高，在画布中越靠上）
+  LAYER_PRIORITY: {
+    [LayerType.BACKGROUND]: 0,
+    [LayerType.FIXED]: 1,
+    [LayerType.NORMAL]: 2,
+    [LayerType.GROUP]: 2,
+  },
+
+  // 批处理大小
+  BATCH_SIZE: 50,
+
+  // 性能阈值
+  PERFORMANCE_THRESHOLD: {
+    OBJECTS_COUNT: 100, // 超过此数量使用异步处理
+    LAYERS_COUNT: 20, // 超过此数量使用分批处理
+  },
+};
+
+/**
+ * 图层排序辅助函数
+ */
+export const LayerSortUtils = {
+  /**
+   * 检查是否需要异步处理
+   * @param {number} objectsCount 对象数量
+   * @param {number} layersCount 图层数量
+   * @returns {boolean} 是否需要异步处理
+   */
+  shouldUseAsyncProcessing(objectsCount, layersCount) {
+    return (
+      objectsCount > LayerSortConstants.PERFORMANCE_THRESHOLD.OBJECTS_COUNT ||
+      layersCount > LayerSortConstants.PERFORMANCE_THRESHOLD.LAYERS_COUNT
+    );
+  },
+
+  /**
+   * 获取图层的排序权重
+   * @param {Object} layer 图层对象
+   * @returns {number} 排序权重
+   */
+  getLayerSortWeight(layer) {
+    if (layer.isBackground)
+      return LayerSortConstants.LAYER_PRIORITY[LayerType.BACKGROUND];
+    if (layer.isFixed)
+      return LayerSortConstants.LAYER_PRIORITY[LayerType.FIXED];
+    if (layer.children?.length > 0)
+      return LayerSortConstants.LAYER_PRIORITY[LayerType.GROUP];
+    return LayerSortConstants.LAYER_PRIORITY[LayerType.NORMAL];
+  },
+
+  /**
+   * 比较两个图层的排序优先级
+   * @param {Object} layerA 图层A
+   * @param {Object} layerB 图层B
+   * @returns {number} 比较结果
+   */
+  compareLayerPriority(layerA, layerB) {
+    const weightA = this.getLayerSortWeight(layerA);
+    const weightB = this.getLayerSortWeight(layerB);
+    return weightB - weightA; // 权重高的排在前面（画布上层）
+  },
+};
+
+/**
+ * 图层排序混入方法 - 用于在 LayerManager 中使用
+ */
+export const LayerSortMixin = {
+  /**
+   * 初始化图层排序工具
+   */
+  initLayerSort() {
+    this.layerSort = new LayerSort(this.canvas, this.layers);
+  },
+
+  /**
+   * 重新排列画布对象
+   */
+  rearrangeCanvasObjects() {
+    if (this.layerSort) {
+      // 检查是否需要异步处理
+      const objectsCount = this.canvas?.getObjects()?.length || 0;
+      const layersCount = this.layers?.value?.length || 0;
+
+      if (LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount)) {
+        return this.layerSort.rearrangeObjectsAsync();
+      } else {
+        this.layerSort.rearrangeObjects();
+        return Promise.resolve();
+      }
+    }
+  },
+
+  /**
+   * 排序图层
+   */
+  sortLayersWithTool() {
+    if (this.layerSort) {
+      this.layers.value = this.layerSort.sortLayers();
+      return this.layerSort.rearrangeObjects();
+    }
+  },
+
+  /**
+   * 智能排序图层
+   */
+  smartSortLayers(targetLayerIds = null) {
+    if (this.layerSort) {
+      return this.layerSort.smartSort(targetLayerIds);
+    }
+    return false;
+  },
+
+  /**
+   * 优化图层结构
+   */
+  optimizeLayerStructure() {
+    if (this.layerSort) {
+      return this.layerSort.optimizeLayerStructure();
+    }
+    return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 };
+  },
+};
diff --git a/src/component/Canvas/CanvasEditor/utils/canvasFactory.js b/src/component/Canvas/CanvasEditor/utils/canvasFactory.js
index c0a22d30..292d3f9c 100644
--- a/src/component/Canvas/CanvasEditor/utils/canvasFactory.js
+++ b/src/component/Canvas/CanvasEditor/utils/canvasFactory.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { canvasConfig } from "../config/canvasConfig";
 
 /**
diff --git a/src/component/Canvas/CanvasEditor/utils/helper.js b/src/component/Canvas/CanvasEditor/utils/helper.js
index 22a60458..4149baef 100644
--- a/src/component/Canvas/CanvasEditor/utils/helper.js
+++ b/src/component/Canvas/CanvasEditor/utils/helper.js
@@ -434,25 +434,324 @@ export function createCancellablePromise(executor) {
   };
 }
 
-// 导出所有工具函数
-export default {
-  deepCompare,
-  deepClone,
-  applyDiff,
-  throttle,
-  debounce,
-  generateId,
-  formatFileSize,
-  formatDuration,
-  isValidCommand,
-  isPromise,
-  safeJSONParse,
-  safeJSONStringify,
-  getObjectDepth,
-  getObjectSize,
-  checkBrowserSupport,
-  delay,
-  retry,
-  batchProcess,
-  createCancellablePromise,
+/**
+ * 增强版检查对象是否在画布中（包括组内对象）
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} targetObj 目标对象
+ * @returns {Object} { flag: boolean, object: fabric.Object, parent: fabric.Group|null }
+ */
+export function objectIsInCanvas(canvas, targetObj) {
+  if (!canvas || !targetObj) {
+    return { flag: false, object: null, parent: null };
+  }
+
+  const targetId = targetObj.id;
+  if (!targetId) {
+    return { flag: false, object: null, parent: null };
+  }
+
+  // 首先检查顶层对象
+  const topLevelObjects = canvas.getObjects();
+
+  // 直接在顶层查找
+  const directMatch = topLevelObjects.find((obj) => obj.id === targetId);
+  if (directMatch) {
+    return { flag: true, object: directMatch, parent: null };
+  }
+
+  // 递归检查组内对象
+  for (const obj of topLevelObjects) {
+    if (obj.type === "group") {
+      const result = findObjectInGroup(obj, targetId);
+      if (result.found) {
+        return { flag: true, object: result.object, parent: obj };
+      }
+    }
+  }
+
+  return { flag: false, object: null, parent: null };
+}
+
+/**
+ * 在组中递归查找对象
+ * @param {fabric.Group} group 组对象
+ * @param {string} targetId 目标对象ID
+ * @returns {Object} { found: boolean, object: fabric.Object|null }
+ */
+function findObjectInGroup(group, targetId) {
+  if (!group || group.type !== "group" || !group.getObjects) {
+    return { found: false, object: null };
+  }
+
+  const groupObjects = group.getObjects();
+
+  for (const obj of groupObjects) {
+    if (obj.id === targetId) {
+      return { found: true, object: obj };
+    }
+
+    // 递归检查嵌套组
+    if (obj.type === "group") {
+      const nestedResult = findObjectInGroup(obj, targetId);
+      if (nestedResult.found) {
+        return nestedResult;
+      }
+    }
+  }
+
+  return { found: false, object: null };
+}
+
+/**
+ * 通过ID查找对象（增强版）
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {string} objectId 对象ID
+ * @returns {Object} { object: fabric.Object|null, parent: fabric.Group|null }
+ */
+export function findObjectById(canvas, objectId) {
+  if (!canvas || !objectId) {
+    return { object: null, parent: null };
+  }
+
+  const result = objectIsInCanvas(canvas, { id: objectId });
+  return { object: result.object, parent: result.parent };
+}
+
+/**
+ * 安全移除画布对象（包括组内对象）
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} targetObj 目标对象
+ * @returns {boolean} 是否成功移除
+ */
+export function removeCanvasObjectByObject(canvas, targetObj) {
+  if (!canvas || !targetObj) {
+    return false;
+  }
+
+  const result = objectIsInCanvas(canvas, targetObj);
+
+  if (!result.flag) {
+    return false;
+  }
+
+  try {
+    if (result.parent) {
+      // 对象在组中，从组中移除
+      result.parent.removeWithUpdate(result.object);
+    } else {
+      // 对象在顶层，直接从画布移除
+      canvas.remove(result.object);
+    }
+    return true;
+  } catch (error) {
+    console.error("移除对象时发生错误:", error);
+    return false;
+  }
+}
+
+/**
+ *  优化画布渲染   统一渲染完成后才执行
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {Function} callback 渲染执行函数
+ */
+export const optimizeCanvasRendering = async (canvas, callback) => {
+  return new Promise((resolve) => {
+    if (!canvas || typeof callback !== "function") {
+      resolve();
+      return;
+    }
+
+    // 暂停渲染以提高性能
+    canvas.skipTargetFind = true;
+    // 开始渲染
+    // 暂停实时渲染和对象查找
+    const wasRenderOnAddRemove = canvas.renderOnAddRemove;
+    canvas.renderOnAddRemove = false; // 禁用自动渲染
+
+    // 等待下一帧渲染完成
+    requestAnimationFrame(async () => {
+      // 恢复渲染设置
+      canvas.skipTargetFind = false;
+      canvas.renderOnAddRemove = wasRenderOnAddRemove;
+      if (isPromise(callback)) {
+        await callback?.();
+      } else {
+        callback?.();
+      }
+      canvas.renderAll(); // 确保画布重新渲染 - 同步渲染
+      resolve();
+    });
+  });
 };
+
+/**
+ * 获取对象在画布中的z-index位置
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} targetObj 目标对象
+ * @returns {number} z-index位置，-1表示未找到
+ */
+export function getObjectZIndex(canvas, targetObj) {
+  if (!canvas || !targetObj) {
+    return -1;
+  }
+
+  const result = objectIsInCanvas(canvas, targetObj);
+  if (!result.flag) {
+    return -1;
+  }
+
+  if (result.parent) {
+    // 对象在组中，返回组在画布中的位置
+    const allObjects = canvas.getObjects();
+    return allObjects.indexOf(result.parent);
+  } else {
+    // 对象在顶层，直接返回在画布中的位置
+    const allObjects = canvas.getObjects();
+    return allObjects.indexOf(result.object);
+  }
+}
+
+/**
+ * 在指定的z-index位置插入对象
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} object 要插入的对象
+ * @param {number} zIndex z-index位置
+ * @param {boolean} renderAll 是否立即渲染，默认true
+ * @returns {boolean} 是否成功插入
+ */
+export function insertObjectAtZIndex(canvas, object, zIndex, renderAll = true) {
+  if (!canvas || !object || zIndex < 0) {
+    return false;
+  }
+
+  try {
+    // 确保z-index不超过当前对象数量
+    const maxIndex = canvas.getObjects().length;
+    const safeZIndex = Math.min(zIndex, maxIndex);
+
+    canvas.insertAt(object, safeZIndex, false);
+
+    if (renderAll) {
+      canvas.renderAll();
+    }
+
+    return true;
+  } catch (error) {
+    console.error("插入对象到指定z-index位置失败:", error);
+    return false;
+  }
+}
+
+/**
+ * 移动对象到指定的z-index位置
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} object 要移动的对象
+ * @param {number} zIndex 目标z-index位置
+ * @param {boolean} renderAll 是否立即渲染，默认true
+ * @returns {boolean} 是否成功移动
+ */
+export function moveObjectToZIndex(canvas, object, zIndex, renderAll = true) {
+  if (!canvas || !object || zIndex < 0) {
+    return false;
+  }
+
+  const result = objectIsInCanvas(canvas, object);
+  if (!result.flag) {
+    console.warn("对象不在画布中，无法移动");
+    return false;
+  }
+
+  try {
+    // 确保z-index不超过当前对象数量-1（因为当前对象也在其中）
+    const maxIndex = canvas.getObjects().length - 1;
+    const safeZIndex = Math.min(zIndex, maxIndex);
+
+    result.object.moveTo(safeZIndex);
+
+    if (renderAll) {
+      canvas.renderAll();
+    }
+
+    return true;
+  } catch (error) {
+    console.error("移动对象到指定z-index位置失败:", error);
+    return false;
+  }
+}
+
+/**
+ * 交换两个对象的z-index位置
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {fabric.Object} obj1 第一个对象
+ * @param {fabric.Object} obj2 第二个对象
+ * @param {boolean} renderAll 是否立即渲染，默认true
+ * @returns {boolean} 是否成功交换
+ */
+export function swapObjectsZIndex(canvas, obj1, obj2, renderAll = true) {
+  if (!canvas || !obj1 || !obj2) {
+    return false;
+  }
+
+  const zIndex1 = getObjectZIndex(canvas, obj1);
+  const zIndex2 = getObjectZIndex(canvas, obj2);
+
+  if (zIndex1 === -1 || zIndex2 === -1) {
+    console.warn("其中一个或两个对象不在画布中");
+    return false;
+  }
+
+  try {
+    // 先移动z-index较大的对象，避免索引冲突
+    if (zIndex1 > zIndex2) {
+      moveObjectToZIndex(canvas, obj2, zIndex1, false);
+      moveObjectToZIndex(canvas, obj1, zIndex2, false);
+    } else {
+      moveObjectToZIndex(canvas, obj1, zIndex2, false);
+      moveObjectToZIndex(canvas, obj2, zIndex1, false);
+    }
+
+    if (renderAll) {
+      canvas.renderAll();
+    }
+
+    return true;
+  } catch (error) {
+    console.error("交换对象z-index位置失败:", error);
+    return false;
+  }
+}
+
+/**
+ * 获取画布中所有对象的z-index信息
+ * @param {fabric.Canvas} canvas 画布实例
+ * @returns {Array} 包含对象ID和z-index的数组
+ */
+export function getAllObjectsZIndex(canvas) {
+  if (!canvas) {
+    return [];
+  }
+
+  const objects = canvas.getObjects();
+  return objects.map((obj, index) => ({
+    id: obj.id || `unnamed_${index}`,
+    zIndex: index,
+    type: obj.type,
+    layerId: obj.layerId,
+    object: obj,
+  }));
+}
+
+/**
+ * 按图层ID获取对象的z-index信息
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {string} layerId 图层ID
+ * @returns {Array} 属于指定图层的对象z-index信息
+ */
+export function getLayerObjectsZIndex(canvas, layerId) {
+  if (!canvas || !layerId) {
+    return [];
+  }
+
+  const allInfo = getAllObjectsZIndex(canvas);
+  return allInfo.filter((info) => info.layerId === layerId);
+}
diff --git a/src/component/Canvas/CanvasEditor/utils/imageHelper.js b/src/component/Canvas/CanvasEditor/utils/imageHelper.js
index 509322fb..415e1ab6 100644
--- a/src/component/Canvas/CanvasEditor/utils/imageHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/imageHelper.js
@@ -1,4 +1,4 @@
-//import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import { LayerType, OperationType, createBitmapLayer } from "./layerHelper";
 // 导入新的复合命令
 import { CreateImageLayerCommand } from "../commands/LayerCommands";
@@ -7,6 +7,7 @@ import {
   ChangeFixedImageCommand,
   AddImageToLayerCommand,
 } from "../commands/LayerCommands";
+import { generateId } from "./helper";
 
 /**
  * 加载并处理图片
@@ -44,6 +45,7 @@ export function loadImage(imageSource, options = {}) {
         // 设置图片位置 - 默认居中
         if (options.centerOnCanvas !== false) {
           fabricImage.set({
+            id: generateId("fabricImage"),
             left: (options.canvasWidth || 800) / 2,
             top: (options.canvasHeight || 600) / 2,
             originX: "center",
diff --git a/src/component/Canvas/CanvasEditor/utils/layerHelper.js b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
index 9d622c72..535180e3 100644
--- a/src/component/Canvas/CanvasEditor/utils/layerHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
@@ -13,6 +13,7 @@ export const LayerType = {
   VIDEO: "video", // 视频图层 (预留)
   AUDIO: "audio", // 音频图层 (预留)
   FIXED: "fixed", // 固定图层 - 位于背景图层之上，普通图层之下
+  BACKGROUND: "background", // 背景图层 - 位于固定图层之、普通图层之下
 };
 
 /**
@@ -461,3 +462,161 @@ export function cloneLayer(layer) {
 
   return clonedLayer;
 }
+
+/**
+ * 递归查找图层（包括子图层）
+ * @param {Array} layers 图层数组
+ * @param {string} layerId 要查找的图层ID
+ * @param {Object} parent 父图层（可选，用于内部递归）
+ * @returns {Object|null} 包含layer和parent的对象，如果未找到返回null
+ */
+export function findLayerRecursively(layers, layerId, parent = null) {
+  if (!layers || !Array.isArray(layers) || !layerId) {
+    return null;
+  }
+
+  // 在当前图层列表中查找
+  for (const layer of layers) {
+    if (layer && layer.id === layerId) {
+      return { layer, parent };
+    }
+
+    // 如果是组图层，递归查找子图层
+    if (
+      layer &&
+      (layer.type === "group" ||
+        layer.type === LayerType.GROUP ||
+        (layer.children && Array.isArray(layer.children)))
+    ) {
+      const result = findInChildLayers(layer.children, layerId, layer);
+      if (result) {
+        return result;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 在子图层中递归查找
+ * @param {Array} children 子图层数组
+ * @param {string} layerId 要查找的图层ID
+ * @param {Object} parent 父图层
+ * @returns {Object|null} 包含layer和parent的对象，如果未找到返回null
+ */
+export function findInChildLayers(children, layerId, parent) {
+  if (!children || !Array.isArray(children) || !layerId) {
+    return null;
+  }
+
+  for (const child of children) {
+    if (child && child.id === layerId) {
+      return { layer: child, parent };
+    }
+
+    // 如果子图层也是组，继续递归查找
+    if (
+      child &&
+      (child.type === "group" || child.type === LayerType.GROUP) &&
+      child.children &&
+      Array.isArray(child.children)
+    ) {
+      const result = findInChildLayers(child.children, layerId, child);
+      if (result) {
+        return result;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 简单查找图层（仅在顶级图层中查找，不递归子图层）
+ * @param {Array} layers 图层数组
+ * @param {string} layerId 要查找的图层ID
+ * @returns {Object|null} 找到的图层对象，如果未找到返回null
+ */
+export function findLayer(layers, layerId) {
+  if (!layers || !Array.isArray(layers) || !layerId) {
+    return null;
+  }
+
+  return layers.find((layer) => layer && layer.id === layerId) || null;
+}
+
+/**
+ * 根据图层名称查找图层
+ * @param {Array} layers 图层数组
+ * @param {string} layerName 要查找的图层名称
+ * @param {boolean} recursive 是否递归查找子图层，默认false
+ * @returns {Object|null} 找到的图层对象，如果未找到返回null
+ */
+export function findLayerByName(layers, layerName, recursive = false) {
+  if (!layers || !Array.isArray(layers) || !layerName) {
+    return null;
+  }
+
+  for (const layer of layers) {
+    if (layer && layer.name === layerName) {
+      return layer;
+    }
+
+    // 如果需要递归查找且是组图层
+    if (
+      recursive &&
+      layer &&
+      (layer.type === "group" ||
+        layer.type === LayerType.GROUP ||
+        (layer.children && Array.isArray(layer.children)))
+    ) {
+      const found = findLayerByName(layer.children, layerName, true);
+      if (found) {
+        return found;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 获取图层的完整路径（包含父图层信息）
+ * @param {Array} layers 图层数组
+ * @param {string} layerId 要查找的图层ID
+ * @returns {Array} 图层路径数组，从根图层到目标图层
+ */
+export function getLayerPath(layers, layerId) {
+  if (!layers || !Array.isArray(layers) || !layerId) {
+    return [];
+  }
+
+  function findPath(currentLayers, targetId, currentPath = []) {
+    for (const layer of currentLayers) {
+      if (!layer) continue;
+
+      const newPath = [...currentPath, layer];
+
+      if (layer.id === targetId) {
+        return newPath;
+      }
+
+      // 如果是组图层，递归查找
+      if (
+        layer.type === "group" ||
+        layer.type === LayerType.GROUP ||
+        (layer.children && Array.isArray(layer.children))
+      ) {
+        const foundPath = findPath(layer.children, targetId, newPath);
+        if (foundPath.length > 0) {
+          return foundPath;
+        }
+      }
+    }
+
+    return [];
+  }
+
+  return findPath(layers, layerId);
+}
diff --git a/src/component/Canvas/CanvasEditor/utils/layerUtils.js b/src/component/Canvas/CanvasEditor/utils/layerUtils.js
new file mode 100644
index 00000000..c2c6e7f6
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/utils/layerUtils.js
@@ -0,0 +1,204 @@
+import { isArray } from "lodash-es";
+
+/**
+ * 图层关联工具类
+ * 提供图层与画布对象关联管理的通用方法
+ */
+
+/**
+ * 构建单个图层与画布对象的关联关系
+ * @param {Object} layer 图层对象
+ * @param {Array} canvasObjects 画布对象数组
+ */
+export function buildLayerAssociations(layer, canvasObjects) {
+  if (!layer || !canvasObjects || !isArray(canvasObjects)) return;
+  // 处理单个fabricObject关联
+  if (layer.fabricObject) {
+    // 如果图层已经有关联的fabricObject，确保它的layerId和layerName正确
+    layer.fabricObject =
+      canvasObjects.find((obj) => obj.id === layer.fabricObject.id) || null;
+  }
+
+  if (layer.clippingMask) {
+    // clippingMask 可能是一个fabricObject或组
+    layer.clippingMask =
+      canvasObjects.find((obj) => obj.id === layer.clippingMask.id) || null;
+  }
+
+  // 处理多个fabricObjects关联
+  if (layer.fabricObjects && isArray(layer.fabricObjects)) {
+    layer.fabricObjects = layer.fabricObjects
+      .map((fabricObject) => {
+        // 确保每个fabricObject的layerId和layerName正确
+        const obj = canvasObjects.find((obj) => obj.id === fabricObject.id);
+        if (obj) {
+          obj.layerId = layer.id; // 确保对象的layerId正确
+          obj.layerName = layer.name; // 确保对象的layerName正确
+          return obj;
+        }
+        return null; // 如果没有找到对象，返回null
+      })
+      .filter((obj) => obj !== null); // 过滤掉null值
+  }
+}
+
+/**
+ * 恢复对象与图层的关联关系
+ * @param {Object} layerManager 图层管理器实例
+ * @param {Array} canvasObjects 画布对象数组
+ */
+export function restoreObjectLayerAssociations(layers, canvasObjects) {
+  if (!layers || !canvasObjects || !isArray(canvasObjects)) return;
+  layers.forEach((layer) => {
+    buildLayerAssociations(layer, canvasObjects);
+    // 处理子图层
+    if (layer?.children?.length) {
+      restoreObjectLayerAssociations(layer.children, canvasObjects);
+    }
+  });
+}
+
+/**
+ * 为画布对象设置图层信息
+ * @param {Object} fabricObject 画布对象
+ * @param {Object} layer 图层对象
+ */
+export function setObjectLayerInfo(fabricObject, layer) {
+  if (!fabricObject || !layer) return;
+
+  fabricObject.layerId = layer.id;
+  fabricObject.layerName = layer.name;
+}
+
+/**
+ * 清除画布对象的图层信息
+ * @param {Object} fabricObject 画布对象
+ */
+export function clearObjectLayerInfo(fabricObject) {
+  if (!fabricObject) return;
+
+  delete fabricObject.layerId;
+  delete fabricObject.layerName;
+}
+
+/**
+ * 验证图层关联关系的完整性
+ * @param {Object} layerManager 图层管理器实例
+ * @param {fabric.Canvas} canvas 画布实例
+ * @returns {Object} 验证结果 { valid: boolean, issues: Array }
+ */
+export function validateLayerAssociations(layers, canvasObjects) {
+  const issues = [];
+
+  // 检查画布对象是否都有对应的图层
+  canvasObjects.forEach((obj) => {
+    if (obj.layerId) {
+      const layer = layers.find((l) => l.id === obj.layerId);
+      if (!layer) {
+        issues.push({
+          type: "orphaned_object",
+          objectId: obj.id,
+          layerId: obj.layerId,
+          message: `对象 ${obj.id} 关联的图层 ${obj.layerId} 不存在`,
+        });
+      }
+    } else {
+      issues.push({
+        type: "missing_layer_id",
+        objectId: obj.id,
+        message: `对象 ${obj.id} 缺少图层ID关联`,
+      });
+    }
+  });
+
+  // 检查图层是否都有对应的画布对象
+  layers.forEach((layer) => {
+    if (layer.fabricObject && layer.fabricObject.id) {
+      const obj = canvasObjects.find((o) => o.id === layer.fabricObject.id);
+      if (!obj) {
+        issues.push({
+          type: "missing_object",
+          layerId: layer.id,
+          objectId: layer.fabricObject.id,
+          message: `图层 ${layer.id} 关联的对象 ${layer.fabricObject.id} 不存在于画布中`,
+        });
+      }
+    }
+
+    if (layer.fabricObjects && isArray(layer.fabricObjects)) {
+      layer.fabricObjects.forEach((fabricObj) => {
+        if (fabricObj.id) {
+          const obj = canvasObjects.find((o) => o.id === fabricObj.id);
+          if (!obj) {
+            issues.push({
+              type: "missing_object",
+              layerId: layer.id,
+              objectId: fabricObj.id,
+              message: `图层 ${layer.id} 关联的对象 ${fabricObj.id} 不存在于画布中`,
+            });
+          }
+        }
+      });
+    }
+  });
+
+  return {
+    valid: issues.length === 0,
+    issues,
+  };
+}
+
+/**
+ * 简化layers对象属性，只保留必要的属性
+ * @param {Array} layers 图层数组          simplifyLayers(JSON.parse(JSON.stringify(this.layers.value)))
+
+ */
+
+export function simplifyLayers(layers) {
+  if (!layers || !isArray(layers)) {
+    console.warn("simplifyLayers 请传入有效的图层数组:", layers);
+    return [];
+  }
+
+  layers.forEach((layer) => {
+    // 处理图层遮罩
+    // 如果clippingMask是一个fabricObject或组，确保它的id正确 // 因为是fabric对象，所以没办法直接获取id，只能通过序列化获取
+    if (layer.clippingMask) {
+      layer.clippingMask = layer.clippingMask?.id || null;
+    }
+
+    // 处理单个fabricObject
+    if (layer.fabricObject) {
+      layer.fabricObject = layer.fabricObject?.id;
+    }
+    // 处理多个fabricObjects
+    if (layer.fabricObjects && isArray(layer.fabricObjects)) {
+      layer.fabricObjects = layer.fabricObjects
+        .map((fabricObject) => {
+          return fabricObject?.id || null; // 确保每个fabricObject都能转换为对象
+        })
+        .filter((obj) => obj !== null);
+    }
+    // 处理子图层
+    if (layer.children && isArray(layer.children)) {
+      layer.children = simplifyLayers(layer.children);
+    }
+
+    // 只保留必要的属性
+    layer = {
+      id: layer.id,
+      name: layer.name,
+      visible: layer.visible,
+      locked: layer.locked,
+      opacity: layer.opacity,
+      clippingMask: layer.clippingMask || null,
+      fabricObject: layer.fabricObject || null,
+      fabricObjects: layer.fabricObjects || [],
+      children: layer.children || [],
+      isBackground: layer.isBackground || false,
+      ifFixed: layer.ifFixed || false,
+    };
+  });
+
+  return layers;
+}
diff --git a/src/component/DetailCopy/detailLeft/module/libraryList.vue b/src/component/DetailCopy/detailLeft/module/libraryList.vue
index 94245b52..37ce21e0 100644
--- a/src/component/DetailCopy/detailLeft/module/libraryList.vue
+++ b/src/component/DetailCopy/detailLeft/module/libraryList.vue
@@ -109,7 +109,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted, watch} from 'vue'
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
@@ -165,8 +165,14 @@ export default defineComponent({
 			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
 			sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
 			ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			
 		})
+		watch(()=>detailData.selectObject,(newValue,oldValue)=>{
+			detailData.mannequinData.sex = newValue.sex?newValue.sex:'Female'
+			detailData.mannequinData.style = newValue.style?newValue.style:''
+			detailData.mannequinData.ageGroup = newValue.ageGroup?newValue.ageGroup:''
+		},{immediate:true})
 		const getDetailListData = reactive({
 			total:0,
 			pageSize:10,
diff --git a/src/component/DetailCopy/model/modelPosition.vue b/src/component/DetailCopy/model/modelPosition.vue
index f2546e85..75baaf9a 100644
--- a/src/component/DetailCopy/model/modelPosition.vue
+++ b/src/component/DetailCopy/model/modelPosition.vue
@@ -71,6 +71,7 @@ export default defineComponent({
 			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
 		},{immediate: true,})
 		watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
+			
 			let sacle = 0
 			const img = new Image();
 			img.onload = () => {
@@ -82,16 +83,22 @@ export default defineComponent({
 						let value = item.style[key]
 						if(typeof value !== 'number'){
 							value = value.replace('px','')
+							item.style[key] = value
+						}else{
+							item.style[key] = value*sacle+'px'
 						}
-						item.style[key] = value*sacle+'px'
+						// item.style[key] = value*sacle+'px'
 					}
 					for (const key in detailData.frontBack.back[index].style) {
 						if(key == 'zIndex')return
 						let value = detailData.frontBack.back[index].style[key]
 						if(typeof value !== 'number'){
 							value = value.replace('px','')
+							detailData.frontBack.back[index].style[key] = value
+						}else{
+							detailData.frontBack.back[index].style[key] = value*sacle+'px'
 						}
-						detailData.frontBack.back[index].style[key] = value*sacle+'px'
+						// detailData.frontBack.back[index].style[key] = value*sacle+'px'
 					}
 				});
 			};
@@ -415,7 +422,6 @@ export default defineComponent({
 						}
 						for (const key in data.instance.frontBack.back[index].style) {
 							if(key == 'zIndex')return
-							console.log(data.instance.frontBack.back[index].style[key].replace(/px/g,''))
 							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
 						}
 					});
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 468e961f..766a819b 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -39,16 +39,6 @@
 							</div>
 						</div>
 					</div>
-					<!-- <input
-						class="search_input"
-						@input="ifMaximumLength"
-						:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
-						:maxlength='inputShow?0:9999'
-						v-model="searchPictureName"
-						@keydown.enter="getgenerate()"
-						@click="inputFocus()"
-						@paste="onPaste"
-					/> -->
 					<textarea 
 						class="textarea"  
 						@input="ifMaximumLength" 
@@ -82,7 +72,7 @@
 					<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
 					<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
 				</div>
-				<div class="input_box_btnBox sketch" v-else>
+				<div class="input_box_btnBox sketch" v-else >
 					<div class="upload_item"  v-show="sketchboardList.length > 0">
 						<div
 							class="upload_file_item"
@@ -125,9 +115,9 @@
 						>
 						</a-upload>
 					</i>
-					<div :title="$t('Generate.style')">
+					<!-- <div :title="$t('Generate.style')">
 						<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
-					</div>
+					</div> -->
 				</div>
 				<textarea 
 					v-show="isTextarea"
@@ -141,18 +131,19 @@
 				<div class="generage_btn_box">
 					<div class="generage_btn started_btn"  v-show="!isGenerate">
 						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
-						<div class="icon iconfont icon-xiala" v-show="
-							type_.type2 == 'Moodboard' || 
-							(type_.type2 == 'Printboard' && scene?.value == 'Pattern') || 
-							(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
-						<div class="content" v-show="speedState">
-							<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+						<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
+						<div class="content" v-show="speedState && scene?.value != 'extract'">
+							<div v-for="item in speedList" v-show="(type_.type2 == 'Moodboard' && item?.value != 'flux') || (type_.type2 == 'Sketchboard' && item?.value != 'flux') || type_.type2 == 'Printboard'" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+
+						</div>
+						<div class="content"  v-show="speedState && scene?.value == 'extract'">
+							<div v-for="item in extractList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 						</div>
 					</div>
 					<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
 						<i class="fi fi-br-loading" ></i>
 					</div>
-					<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
+					<div class="generage_btn started_btn" v-show="remGenerate" @click.stop="removeGenerate">
 						{{$t('Generate.Close')}}
 					</div>
 					
@@ -182,19 +173,22 @@
                 @click="generageAdd(item)"
                 :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
             >
-				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-				<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
+				<img v-if="item?.imgUrl" v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
+				<div v-else class="loading">
+					<a-spin size="large" ></a-spin>
+				</div>
+				<sketchCategory v-show="item?.imgUrl" v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
 				<div
+					v-show="item?.imgUrl"
 					class="delete_like_file_block left1"
-					:class="[driver__.driver?'hideEvents':'',]"
 				>
-					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+					<i v-if="!item.like" class="fi fi-rr-heart" @click="likeFile(item,'like')"></i>
 					<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
-				<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
+				<div v-show="item?.imgUrl" class="delete_like_file_block left">
 					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
 				</div>
-				<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+				<div v-show="item?.imgUrl" class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
 					<span class="icon iconfont icon-shanchu operate_icon"></span>
 				</div>
             </div>
@@ -294,6 +288,21 @@ export default defineComponent({
 					title:'Generate using Wanxiang',
 					label:'WX',
 					value:'wx',
+				},{
+					title:'',
+					label:'FLUX',
+					value:'flux',
+				},
+			],
+			extractList:[
+				{
+					title:'This method may produce slight discrepancies between the extracted line art and the original image.',
+					label:'High',
+					value:'',
+				},{
+					title:'Note: The extracted line art might have minor variations from the original.',
+					label:'FLUX',
+					value:'flux',
 				},
 			],
 			speedState:false,
@@ -311,8 +320,16 @@ export default defineComponent({
 				document.removeEventListener('click',openSpeed)
 			}
 		}
+		watch(()=>props.scene,(newVal,oldVal)=>{
+			if(newVal.value == 'extract'){
+				speed.speedData = speed.extractList[0]
+			}else{
+				speed.speedData = speed.speedList[0]
+			}
+		})
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
+			speed.speedState = false
 		}
         return {
 			userDetail,
@@ -471,6 +488,7 @@ export default defineComponent({
     },
     methods: {
         generageAdd(data: any) {
+			if(!data?.imgUrl)return
             data.type_ = this.type_;
 			data.type_.type1 = data.designType?data.designType:this.type_.type1
 			data.resData = JSON.parse(JSON.stringify(data))
@@ -487,12 +505,6 @@ export default defineComponent({
 			data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
             this.store.commit("addGenerateMaterialFils", data);
 			// console.log(this.fileList);
-			let moodboard = this.store.state.UploadFilesModule.moodboardGenerateFiles
-			let sketch = this.store.state.UploadFilesModule.sketchGenerateFiles
-			let print = this.store.state.UploadFilesModule.printGenerateFiles
-			if((moodboard.length >= 2 || print.length >= 2 || sketch.length >= 2) && this.driver__.driver){
-				driverObj__.moveNext()
-			}
         },
         beforeUpload(file: any) {
             const isJpgOrPng =
@@ -543,94 +555,109 @@ export default defineComponent({
 			})
 		},
 		getgenerate(){
-			if(this.scene?.value == 'extract'){
-				this.imageToSketch()
-				return
-			}
+			// if(this.scene?.value == 'extract'){
+			// 	this.imageToSketch()
+			// 	return
+			// }
 			this.isTextarea = false
 			this.isInputFocus = false
 			if(this.isGenerate)return
 			clearInterval(this.remGenerateTime)
-			if(this.searchPictureName){
-				let arr = this.searchPictureName.split(/\s+/).length
-				if(arr > 250){
-					message.info(
-					this.t('Generate.jsContent4')
-					);
-					return
+			let httpsUrl = Https.httpUrls.generatePrepare
+			let data
+			if(this.scene?.value == 'extract'){
+				httpsUrl = Https.httpUrls.imageToSketch
+				if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+				data = {
+					"elementId": this.sketchboardList[0].id,
+					gender:this.workspace.sex,
+					"style": this.printModel.value,
+					"styleImageId": this.printModel?.id?this.printModel?.id:'',
+					modelName:this.speedData.value,//为1就是Print
 				}
 			}else{
-				if(this.sketchboardList?.[0]?.imgUrl){
-
+				if(this.searchPictureName){
+					let arr = this.searchPictureName.split(/\s+/).length
+					if(arr > 250){
+						message.info(
+						this.t('Generate.jsContent4')
+						);
+						return
+					}
 				}else{
-					message.info(
-						this.t('Generate.jsContent5')
-					);
-					return
+					if(this.sketchboardList?.[0]?.imgUrl){
+
+					}else{
+						message.info(
+							this.t('Generate.jsContent5')
+						);
+						return
+					}
 				}
-				
+				let level2Type = ''
+				let collectionElementId = ''
+				let base64 = ''
+				if(this.sketchboardList?.[0]){
+					collectionElementId = this.sketchboardList[0].id
+					if(this.sketchboardList[0].base64){
+						base64 = this.sketchboardList[0].imgUrl
+					}
+				}
+				let sloganText = ''
+				sloganText = this.searchPictureName
+				if(this.upload.level1Type == "Sketchboard"){
+					level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
+					if(this.workspace.styleName){
+						sloganText = `${this.workspace.styleName},${sloganText}`
+					}
+				}else if(this.upload.level1Type == "Printboard"){
+					level2Type = this.scene?.value
+					if(level2Type == 'Slogan' && this.searchPictureName == ''){
+						sloganText = this.isSloganHint
+					}else if(level2Type == 'Pattern'){
+						sloganText = `${this.printModel.value},${sloganText}`
+					}
+					if(!base64 && level2Type == 'Slogan'){
+						message.info(this.t('Generate.jsContent10'));
+						return
+					}
+				}
+				data = {
+					generateType:'text',
+					designType:'collection',
+					collectionElementId:collectionElementId,
+					level1Type:this.upload.level1Type,
+					level2Type:level2Type,
+					text:sloganText,
+					seed:this.searchPictureSeed,
+					userId:this?.userDetail?.userId,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					modelName:this.speedData.value,//为1就是Print
+					isTestUser:this.driver__.driver?false:this.isTest,
+					gender:this.workspace.sex,
+					sloganBase64:base64,
+					ageGroup:this.workspace.ageGroup
+				}
+				this.generateLevel2Type = data.level2Type
 			}
-			let level2Type = ''
-			let collectionElementId = ''
-			let base64 = ''
-			if(this.sketchboardList?.[0]){
-				collectionElementId = this.sketchboardList[0].id
-				if(this.sketchboardList[0].base64){
-					base64 = this.sketchboardList[0].imgUrl
-				}
-			}
-			let sloganText = ''
-			sloganText = this.searchPictureName
-			if(this.upload.level1Type == "Sketchboard"){
-				level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
-				if(this.workspace.styleName){
-					sloganText = `${this.workspace.styleName},${sloganText}`
-				}
-			}else if(this.upload.level1Type == "Printboard"){
-				level2Type = this.scene?.value
-				if(level2Type == 'Slogan' && this.searchPictureName == ''){
-					sloganText = this.isSloganHint
-				}else if(level2Type == 'Pattern'){
-					sloganText = `${this.printModel.value},${sloganText}`
-				}
-				if(!base64 && level2Type == 'Slogan'){
-					message.info(this.t('Generate.jsContent10'));
-					return
-				}
-			}
-			let data = {
-				generateType:'text',
-				designType:'collection',
-				collectionElementId:collectionElementId,
-				level1Type:this.upload.level1Type,
-				level2Type:level2Type,
-				text:sloganText,
-				seed:this.searchPictureSeed,
-				userId:this?.userDetail?.userId,
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				modelName:this.speedData.value,//为1就是Print
-				isTestUser:this.driver__.driver?false:this.isTest,
-				gender:this.workspace.sex,
-				sloganBase64:base64,
-			}
-			this.generateLevel2Type = data.level2Type
+			
+			
 			this.isGenerate = true
-			this.remGenerateTime = setTimeout(()=>{
-				this.remGenerate = true
-			},10000)
-			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
+			// this.remGenerateTime = setTimeout(()=>{
+			// },10000)
+			Https.axiosPost(httpsUrl, data).then(
                 (rv) => {
-					// if(data.isTestUser){
-					// 	if(rv.leftUsageCount >= 1){
-					// 		message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
-					// 	}else if(rv.leftUsageCount == 0){
-					// 		message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
-					// 		this.isGenerate = false
-					// 		return
-					// 	}
-					// }
+					if(this.scene?.value == 'extract'){
+						rv = {
+							uniqueId:[rv]
+						}
+					}
+					let rvData = rv.uniqueId.map((item:any)=>{
+						return{taskId:item,status:''}
+					})
+					this.remGenerate = true//出现取消按钮
+					this.fileList.unshift(...rvData)
 					this.setGenerate(rv.uniqueId)
-					
                 }
             ).catch(res=>{
 				this.generateLevel2Type = ''
@@ -676,7 +703,9 @@ export default defineComponent({
 								if(element.status == 'Success'){
 									element.imgUrl = element.url
 									element.id_ = GO.id++
-									this.fileList.unshift(element)
+									let index = this.fileList.findIndex((item:any)=>item.taskId == element.taskId)
+									this.fileList[index] = element
+									// this.fileList.unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
 									if(this.type_.type2 == 'Sketchboard'){
 										this.sketchCatecoryList.forEach((itemCategory:any) => {
@@ -689,6 +718,10 @@ export default defineComponent({
 										element.categoryValue = this.scene?.value
 										element.category = this.scene?.name
 									}
+								}else if(element.status == 'Fail' || element.status == 'Invalid'){
+									data = data.filter((item:any) => item !== element.taskId);
+									this.fileList = this.fileList.filter((item:any) => item.taskId !== element.taskId);
+									message.info(this.t('Generate.everyTimeEffectPoor'));
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -718,7 +751,7 @@ export default defineComponent({
 					this.remGenerate = false
 					this.generateLevel2Type = ''
 				});
-			},1000)
+			},5000)
 		},
 		removeGenerate(){
 			//取消操作
@@ -737,8 +770,12 @@ export default defineComponent({
 					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 					type: type
 				}
+				
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
+						this.generateProceedList.forEach((generateProceedListItem:any)=>{
+							this.fileList = this.fileList.filter((item:any) => generateProceedListItem.taskId!== item.taskId);
+						})
 						this.generateProceedList = []
 					}
 				).catch(res=>{
@@ -1044,6 +1081,13 @@ export default defineComponent({
 					pointer-events:none;
 				}
 			}
+			.loading{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
             img {
                 // width: calc(10rem*1.2);
                 // height: calc(10rem*1.2);
diff --git a/src/component/HomePage/productImg.vue b/src/component/HomePage/productImg.vue
index 6407e541..0c4ca4f6 100644
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -534,9 +534,9 @@ export default defineComponent({
 				imageStrength:(100 - imageStrength)/100,
 			}
 			productImgData.isProductimg = true
-			remPrductimgTime = setTimeout(()=>{
-				productImgData.remProductimg = true
-			},10000)
+			// remPrductimgTime = setTimeout(()=>{
+			// 	productImgData.remProductimg = true
+			// },10000)
 			let url = Https.httpUrls.toProduct
 			if(productimgMenu.value.value == 'Relight'){
 				url = Https.httpUrls.relight
@@ -544,6 +544,7 @@ export default defineComponent({
 			productImgData.isShowMark = true
 			Https.axiosPost(url, data).then(
                 (rv) => {
+					productImgData.remProductimg = true
 					productImgData.isShowMark = false
 					let arr:any = []
 					rv.forEach((item:any)=>{
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index 8af881fe..2e6e609e 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -31,7 +31,12 @@
 						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
 						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 					</div>
-					
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+						<span>Selection Function</span>
+					</div>
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
+						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+					</div>
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Similarity')}}</span>
 					</div>
@@ -45,10 +50,10 @@
 						</a-slider>
 						<input type="number" readonly v-model="productimgSimilarity">
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.RelightDirection')}}</span>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
 						<!-- <a-slider class="system_silder"
 							v-model:value="similarity"
 							@afterChange="setSimilarity"
@@ -58,10 +63,10 @@
 						</a-slider> -->
 						<a-select  style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Highlight')}}</span>
 					</div>
-					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
 						<a-slider class="system_silder"
 							v-model:value="productimgBrightenValue"
 							:tooltipVisible="false"
@@ -92,7 +97,22 @@
 							></textarea>
 						</div>
 					</div>
-					<div class="productImg_content_item_generate_btn input_border">
+					<div class="generage_btn_box" style="margin-left: auto;">
+						<div class="generage_btn started_btn"  v-show="!productimgIsProductimg">
+							<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
+							<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
+							<div class="content" v-show="speedState">
+								<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+							</div>
+						</div>
+						<div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
+							<i class="fi fi-br-loading" ></i>
+						</div>
+						<div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
+							{{$t('Generate.Close')}}
+						</div>
+					</div>
+					<!-- <div class="productImg_content_item_generate_btn input_border">
 						<div class="input_box">
 							<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
 								{{ $t('Generate.Generate') }}
@@ -104,7 +124,7 @@
 								{{$t('Generate.Close')}}
 							</div>
 						</div>
-					</div>
+					</div> -->
 				</div>
 			</div>
 			<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
@@ -189,6 +209,55 @@ export default defineComponent({
 			productimgRelightDirection:props.productData.RelightDirection,
 			productimgRelightDirectionList:props.productData.RelightDirectionList,
 		})
+		let speed = reactive({
+			speedList:[
+			] as any,
+			speedTypeList:{
+				poseTransfer:[
+					{
+						title:'Generate high-quality images',
+						label:'High',
+						value:'',
+					},{
+						title:'Generate using Wanxiang',
+						label:'WX',
+						value:'wx',
+					},
+				],
+				toPorductImg:[
+					{
+						title:'Generate with high quality',
+						label:'High',
+						relightLabel:'Relight',
+						value:'',
+					},{
+						title:'',
+						label:'FLUX',
+						relightLabel:'Edit',
+						value:'flux',
+					},
+				]
+			},
+			speedState:false,
+			speedData:{
+				title:'Generate high-quality images',
+				relightLabel:'Relight',
+				label:'High',
+				value:'',
+			},
+		})
+		const openSpeed = ()=>{
+			speed.speedState = !speed.speedState
+			if(speed.speedState){
+				document.addEventListener('click',openSpeed)
+			}else{
+				document.removeEventListener('click',openSpeed)
+			}
+		}
+		const setSpeed = (item:any)=>{
+			speed.speedData = item
+			speed.speedState = false
+		}
         let scaleImage: any = ref(false);
 		let isShowMark = ref(false)
 		let loadingShow = ref(false)
@@ -224,9 +293,9 @@ export default defineComponent({
 			}
 
 			productimg.productimgIsProductimg = true
-			remPrductimgTime = setTimeout(()=>{
-				productimg.productimgRemProductimg = true
-			},10000)
+			// remPrductimgTime = setTimeout(()=>{
+			// 	productimg.productimgRemProductimg = true
+			// },10000)
 			let url = Https.httpUrls.relight
 			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
 				url = Https.httpUrls.toProduct
@@ -234,6 +303,7 @@ export default defineComponent({
 			isShowMark.value = true
 			Https.axiosPost(url, data).then(
                 (rv) => {
+					productimg.productimgRemProductimg = true
 					isShowMark.value = false
 					scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
 					let arr:any = []
@@ -381,6 +451,9 @@ export default defineComponent({
         return {
 			t,
 			...toRefs(productimg),
+			...toRefs(speed),
+			openSpeed,
+			setSpeed,
             scaleImage,
 			isShowMark,
 			loadingShow,
@@ -427,6 +500,12 @@ export default defineComponent({
 			this.scaleImageIndex = index
 			if(dialogueIndex)this.robotAssits = dialogueIndex
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
+			if(this.scaleImageList[index].resultType == "PoseTransfer"){
+				this.speedList = this.speedTypeList.poseTransfer
+			}else{
+				this.speedList = this.speedTypeList.toPorductImg
+			}
+			this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
 			document.addEventListener('keydown',this.setKeydown)
 		},
 		cancelDsign(){
diff --git a/src/component/HomePage/scaleVideo.vue b/src/component/HomePage/scaleVideo.vue
index a2c4abb2..6370db03 100644
--- a/src/component/HomePage/scaleVideo.vue
+++ b/src/component/HomePage/scaleVideo.vue
@@ -81,11 +81,13 @@ export default defineComponent({
 		height: auto;
 		max-height: 80vh;
 		position: absolute;
+		width: max-content;
 		video{
 			width: 100%;
 			max-height: 80vh;
 			height: 100%;
 			object-fit: contain;
+			width: max-content;
 		}
 		.general_video_btn{
 			color: #fff;
diff --git a/src/component/home/batchGeneration/createCloud.vue b/src/component/home/batchGeneration/createCloud.vue
index 3793b9ce..c468b43c 100644
--- a/src/component/home/batchGeneration/createCloud.vue
+++ b/src/component/home/batchGeneration/createCloud.vue
@@ -24,7 +24,7 @@
 			</div>
 		</div>
 		<div class="modal_title_text">
-			<div>Create Cloud Generation Tasks</div>
+			<div>Create Batch Generation Tasks</div>
 		</div>
 		<div class="allUserPoeration_center admin_page">
 			<div class="admin_state_item">
@@ -52,12 +52,24 @@
 					placeholder="Please select"
 					:options="objectList"
 					@search="getHistoryProjectList"
+					@change="changeProject"
 				>
 				<template #option="{ value: val, label, icon,updateTime }">
 					<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
 				</template>
 				</a-select>
 			</div>
+			<div class="admin_state_item">
+				<span>Name <span>*</span></span>
+				<input
+					v-model="porjectName"
+					:placeholder="placeholder"
+					@focus="focus"
+					@blur="blur"
+					type="text"
+					style="width: 200px"
+				/>
+			</div>
 			<div class="admin_state_item" v-show="buildType">
 				<span>Quantity <span>*</span></span>
 				<input
@@ -72,14 +84,17 @@
 			 <div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item ">
 				<span>{{$t('ProductImg.Similarity')}}</span>
 				<div class="sliderAndImput" style="width: 200px">
-					<a-slider class="system_silder"
+					<!-- <a-slider class="system_silder"
 						v-model:value="similarity"
 						range
 						:step="5"
-						
 					>
-					</a-slider>
-					<!-- <input type="number" readonly v-model="similarity"> -->
+					</a-slider> -->
+					<div style="display: flex;">
+						<input type="number" readonly v-model="similarity[0]">
+						<div style="margin: 0 1rem;">-</div>
+						<input type="number" readonly v-model="similarity[1]">
+					</div>
 				</div>
 			</div>
 			 <div v-show="buildType == 'RELIGHT'" class="admin_state_item ">
@@ -117,12 +132,18 @@
 				</div>
 			</div> -->
 			<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
+				<div class="content_item_imgBox_itemImg" v-for="item in uploadElement" :key="item">
+					<div
+						class="imgBox"
+						@click="()=>item.isChecked = !item.isChecked"
+					>
+						<img :class="[item?.isChecked?'active':'']" :src="item?.url" class="upload_img"/>
+						<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+					</div>
+				</div>
 				<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList" :key="file">
-					<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
-						<a-spin
-							:indicator="indicator"
-							tip="Uploading..."
-						/>
+					<div class="upload_file_item_content" v-show="file?.status === 'uploading'"  style="display: flex;align-items: center;">
+						<a-spin size="large" />
 					</div>
 					<div
 						class="imgBox"
@@ -217,9 +238,10 @@ export default defineComponent({
 			exhibitionImgList:[],//选择的图片
 			projectData:null,//批量id
 			objectList:[],
+			porjectName:'',//任务名字
 			//toProduct
 			generateText:'',//输入的内容
-			similarity:[30,60],
+			similarity:[20,40],
 			brightenValue:1,//亮度
 			relightDirection:'Right Light',//打光方向
 			relightDirectionList:[
@@ -238,13 +260,43 @@ export default defineComponent({
 				}
 			],
 			fileList:[],
+			uploadElement:[],
+			placeholder:'',
 		})
+		const getUploadElement = ()=>{
+			operations.loadingShow = true
+			let value = {
+				id:operationsData.projectData,
+				moduleList:['uploadElement']
+			}
+			operationsData.placeholder = 'Batch_' + setPlaceholder()
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				operationsData.uploadElement = rv.uploadElement
+				operations.loadingShow = false
+			}).catch((err)=>{
+				operations.loadingShow = false
+			})
+		}
 		let init = (projectData,buildType)=>{
 			operations.operationsModal = true
-			if(projectData?.id)operationsData.projectData = {label:projectData.name,value:projectData.id}
-			
+			clearData()
+			if(projectData?.id){
+				operationsData.projectData = {label:projectData.name,value:projectData.id}
+				getUploadElement()
+			}
 			if(buildType.value)operationsData.buildType = buildType
 		}
+		const clearData = ()=>{
+			operationsData.porjectName = ''
+			operationsData.generateText = ''
+			operationsData.similarity = [20,40]
+			operationsData.brightenValue = 1
+			operationsData.fileList = []
+			operationsData.uploadElement = []
+		}
+		const changeProject = ()=>{
+			getUploadElement()
+		}
 		const changeBuildType = ()=>{
 			// operationsData.exhibitionImgList = []
 			operationsData.projectData = null
@@ -255,15 +307,20 @@ export default defineComponent({
 			})
 			getHistoryProjectList()
 		}
-		const getGenerateCloudImgList = ()=>{
+		const getGenerateCloudImgList = (type)=>{
 			let list = []
-			if(operationsData.buildType == 'SINGLE_DESIGN'|| operationsData.buildType == 'SERIES_DESIGN')return list
-			let selectList = operationsData.fileList.filter((item)=>item.isChecked)
+			if(type == 'SINGLE_DESIGN'|| type == 'SERIES_DESIGN')return list
+			let selectList = []
+			let fileList = operationsData.fileList.filter((item)=>item.isChecked)
+			let uploadElement = operationsData.uploadElement.filter((item)=>item.isChecked)
+			if(fileList)selectList.push(...fileList)
+			if(uploadElement)selectList.push(...uploadElement)
+			
 			selectList.forEach((item)=>{
 				let obj = {
 					
 				}
-				if(operationsData.buildType == 'POSE_TRANSFER'){
+				if(type == 'POSE_TRANSFER'){
 					obj = {
 						poseId:1,
 						productImage:getMinioUrl(item.imgUrl)
@@ -271,7 +328,7 @@ export default defineComponent({
 				}else{
 					obj = {
 						elementId:item.id,
-						elementType:item.type
+						elementType:item.type||'ProductElement'
 					}
 				}
 				list.push(obj)
@@ -337,10 +394,11 @@ export default defineComponent({
 				"buildType": buildTypeCorresponding[operationsData.buildType],
 				nums: operationsData.numberOfImages,
 				projectId: operationsData.projectData,
+				name:operationsData.porjectName || operationsData.projectData,
 				//productimg
 				toProductImage:{
 					prompt:operationsData.generateText,//输入的内容
-					toProductImageVOList:(operationsData.buildType == 'TO_PRODUCT_IMAGE' || operationsData.buildType == 'RELIGHT')?getGenerateCloudImgList():[],//选择的图片
+					toProductImageVOList:getGenerateCloudImgList(operationsData.buildType),//选择的图片
 					// toProductImageVOList:getPorductImg(),//选择的图片
 					projectId: operationsData.projectData,
 					direction:operationsData.relightDirection,//打光方向
@@ -351,7 +409,7 @@ export default defineComponent({
 				},
 				//poseTransform
 				// poseTransform:getPoseTransformData(),
-				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList():[],
+				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList('POSE_TRANSFER'):[],
 				private: operationsData.projectData,
 				ToProductImageDTO: operationsData.projectData,
 			}
@@ -375,7 +433,7 @@ export default defineComponent({
 				// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
 			}
 			if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
-			if(!data.buildType || !data.nums || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
+			if(!data.buildType || !data.nums || !data.name || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
 			operations.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designCloud, data).then(
 			(rv) => {
@@ -458,11 +516,25 @@ export default defineComponent({
 				bor = false
             }
         }
+		const setPlaceholder = ()=>{
+			if(!operationsData.projectData)return ''
+			let index = operationsData.objectList.findIndex(item => item.id === operationsData.projectData)
+			return operationsData.objectList[index].name
+		}
+		const focus = ()=>{
+			if(operationsData.porjectName)return
+			operationsData.porjectName = operationsData.placeholder
+		}
+		const blur = ()=>{
+			if(operationsData.porjectName != operationsData.placeholder)return
+			operationsData.porjectName = ''
+		}
         return {
             ...toRefs(operations),
             ...toRefs(operationsData),
 			cancelDsign,
 			init,
+			changeProject,
 			focus,
 			blur,
 			setOk,
@@ -658,13 +730,17 @@ export default defineComponent({
 					// border-radius: 1.6rem;
 					flex: 1;
 				}
-				> input{
-					border-radius: 1.6rem;
-					width: 4rem;
-					margin-left: 1rem;
-					height: 100%;
-					border-radius: 1rem;
+				>div{
+					input{
+						border-radius: 1.6rem;
+						width: 5rem;
+						padding: 4px 11px 4px;
+						margin-left: 1rem;
+						height: 100%;
+						text-align: center;
+					}
 				}
+				
 			}
 		}
 	}
diff --git a/src/component/home/batchGeneration/index.vue b/src/component/home/batchGeneration/index.vue
index 937184ed..af9e1b02 100644
--- a/src/component/home/batchGeneration/index.vue
+++ b/src/component/home/batchGeneration/index.vue
@@ -47,17 +47,35 @@
 			<div class="content">
 				<tr v-for="(row, index) in contentList" :key="index">
 					<td v-for="header in cloudTiltleList" :key="header.value">
-						<span v-show="header.value != 'operation'">
+						<div v-if="header.value != 'operation' && header.value != 'name'">
 							{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
+						</div>
+						<div v-if="header.value == 'name'">
+							<div v-if="row.id == renameId" class="rename">
+								<input type="text" v-model="renameText">
+								<i class="fi fi-br-check" @click="submitRename(row)"></i>
+							</div>
+							<div v-else>
+								{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
+							</div>
+						</div>
+						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="setRename(row)">
+							Rename
 						</span>
-						<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
+						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="detailIamge(row)">
 							Review
 						</span>
+						<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="deleteRom(row)">
+							Delete
+						</span>
 					</td>
 				</tr>
 			</div>
 			<a-pagination style="text-align: center;" @change="pagination" v-model:current="currentPage" :total="total" show-less-items />
 		</div>
+		<div class="mark_loading" v-show="loadingShow">
+			<a-spin size="large" />
+		</div>
 		<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
 	</div>
 </template>
@@ -159,6 +177,9 @@ export default defineComponent({
 			},
 			cloudTiltleList:[
 				{
+					name:'Task Name',
+					value:'name',
+				},{
 					name:'Task type',
 					value:'buildType',
 					fun:(value:any)=>{
@@ -213,6 +234,9 @@ export default defineComponent({
 			]  as any,
 			objectList:[],
 			isGetContentList:false as any,
+			renameId:-1 as any,
+			renameText:'',
+			loadingShow:false,
 		})
 		const dataDom = reactive({
 			createCloud,
@@ -259,7 +283,13 @@ export default defineComponent({
 						store.commit('setCloudList',{str:'relight',list:rv.relight})
 						router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
 					}else if(item.buildType == 'poseTransfer'){
-						store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
+						let list = {
+							list:rv.poseTransfer,
+							str:'add',
+							index:-1,
+						}
+						store.commit("setPoseTransfer", list);
+						// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
 						router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
 					}
 					// if(rv.design && rv.design.length > 0){
@@ -281,6 +311,7 @@ export default defineComponent({
 		}
 		const pagination = ()=>{
 			data.isGetContentList = true
+			data.renameId = -1
 			getContentList()
 		}
 		let time = null as any
@@ -290,7 +321,7 @@ export default defineComponent({
 				let value = {
 					page:data.currentPage,
 					size:data.pageSize,
-					projectId: data.projectData?.value,
+					projectId: data.projectData?.value?data.projectData?.value:'',
 				}
 				Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
 					data.contentList = rv.content
@@ -342,6 +373,40 @@ export default defineComponent({
 		const handleChange = (event:any,value:any)=>{
 			data.createData = value
 		}
+		const setRename = (item:any)=>{
+			data.renameId = item.id
+			data.renameText = item.name
+		}
+		const submitRename = (item:any)=>{
+			data.renameId = -1
+			data.loadingShow = true
+			let value = {
+				id:item.id,
+				name:data.renameText,
+			}
+			Https.axiosPost(Https.httpUrls.cloudTaskNameUpdate,value).then((rv)=>{
+				data.loadingShow = false
+				data.renameText = ''
+
+				data.isGetContentList = true
+				getContentList()
+			}).catch((err)=>{
+				data.loadingShow = false
+			})
+		}
+		const deleteRom = (item:any)=>{
+			let value = {
+				id:item.id
+			}
+			Https.axiosPost(Https.httpUrls.cloudTaskDelete,value).then((rv)=>{
+				data.loadingShow = false
+
+				data.isGetContentList = true
+				getContentList()
+			}).catch((err)=>{
+				data.loadingShow = false
+			})
+		}
 		onBeforeUnmount(()=>{
 			data.isGetContentList = false
 		})
@@ -366,6 +431,9 @@ export default defineComponent({
 			handleChange,
 			getHistoryProjectList,
 			pagination,
+			setRename,
+			submitRename,
+			deleteRom,
 		}
 	},
 	provide() {
@@ -452,7 +520,31 @@ export default defineComponent({
 						text-align: center;
 						width: calc(100% / 4);
 						line-height: 4.6rem;
-						font-size: 2.2rem;
+						font-size: 1.6rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						.rename{
+							display: flex;
+							align-items: center;
+							input{
+								height: 100%;
+								padding: .8rem;
+								width: 12rem;
+							}
+							> i{
+								margin-left: 1rem;
+								cursor: pointer;
+								width: 3rem;
+								height: 3rem;
+								background: #000;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								color: #fff;
+								border-radius: 2rem;
+							}
+						}
 					}
 				}
 			}
diff --git a/src/component/home/chat/index.vue b/src/component/home/chat/index.vue
index dcf8e40d..62c188d9 100644
--- a/src/component/home/chat/index.vue
+++ b/src/component/home/chat/index.vue
@@ -80,6 +80,7 @@ import { useStore } from "vuex";
 import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
 import { useI18n } from 'vue-i18n'
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useRouter,useRoute } from 'vue-router'
 export default defineComponent({
 	components:{
 	},
@@ -88,6 +89,7 @@ export default defineComponent({
 	emits:['chatChange'],
 	setup(props,{emit}) {
 		const store = useStore();
+		const route = useRoute()
 		const data = reactive({
 			chatContent:'',
 			openChat:true,
@@ -107,6 +109,7 @@ export default defineComponent({
 		watch(()=>data.selectObject.id,(newValue,oldValue)=>{
 			if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
 				data.chatList = []
+				if(route.query?.create)return
 				nextTick(()=>{
 					getChatHistory(newValue)
 				})
@@ -146,7 +149,7 @@ export default defineComponent({
 				// 	data.chatList[data.chatList.length-1].content.message+=JSON.parse(event.data).content
 				// }
 				const container = dataDom.chatBox;
-      			container.scrollTop = container.scrollHeight;
+      			if(container?.scrollHeight)container.scrollTop = container.scrollHeight;
 
 				const eventData = JSON.parse(event.data)
 				if(eventData.type == 'text'){
@@ -155,6 +158,11 @@ export default defineComponent({
 					data.chatList[data.chatList.length-1].content.think+=eventData.content
 				}else if(eventData.type == "tools_response"){
 					let nameList = ['moodboard','printboard','sketchboard','generate_color_code']
+					let nameData = {
+						moodboard:'moodBoard',
+						printboard:'printBoard',
+						sketchboard:'sketchBoard',
+					} as any
 					let getData = ''
 					if(nameList.indexOf(eventData.tools_name) > -1){
 						if(data.chatList[data.chatList.length - 1].content.message)data.chatList.push({content:{message:''},role:'system'})
@@ -163,16 +171,14 @@ export default defineComponent({
 							getData = 'colorboard'
 						}else{
 							data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
-							getData = eventData.tools_name
+							getData = nameData[eventData.tools_name]
 						}
 						data.chatList.push({content:{message:''},role:'system'})
-					}else{
-
+					}else if(eventData.tools_name == 'design_control_signal'){
+						emit('chatChange',{type:eventData.tools_name,design:true})
 					}
 					emit('chatChange',{type:eventData.type,module:getData})
 
-				}else if(eventData.type == "design_control_signal"){
-					emit('chatChange',{type:eventData.type,design:true})
 				}
 					//emit('chatChange',{type:JSON.parse(event.data).status})
 			};
diff --git a/src/component/home/design/collection.vue b/src/component/home/design/collection.vue
index 565b53bf..cab84381 100644
--- a/src/component/home/design/collection.vue
+++ b/src/component/home/design/collection.vue
@@ -11,7 +11,7 @@
 		:closable="false"
 		:mask="true"
 		:keyboard="false"
-		:destroyOnClose="true"
+		:destroyOnClose="false"
 		:zIndex="1000"
 	>
 		<div class="generalModel_btn">
@@ -23,18 +23,33 @@
 				</svg>
 			</div>
 		</div>
+		<div class="collection_title">
+			<div class="collection_title_text">
+				<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
+				<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
+				<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
+				<div v-show="collectionStep === 4">{{ $t('collectionModal.Mannquinboard') }}</div>
+				<div v-show="collectionStep === 5">{{ $t('collectionModal.Sketchboard') }}</div>
+				<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
+				<!-- <div  class="collection_title_text_intro" v-show="collectionStep === 1">{{ $t('collectionModal.MoodCollection') }}</div>
+				<div  class="collection_title_text_intro" v-show="collectionStep === 2">{{ $t('collectionModal.PrinCollection') }}</div>
+				<div  class="collection_title_text_intro" v-show="collectionStep === 3">{{ $t('collectionModal.ColorCollection') }}</div>
+				<div  class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div>
+				<div  class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div> -->
+			</div>
+		</div>
 		<div class="designOpenrtion_content">
 			<!-- <div class="modal_title_text">
 				<div>Setting</div>
 			</div> -->
 			<div class="collectionBox">
-				<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
-                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
-                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
-                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
-                <mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
+				<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
+                <PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
+                <ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
+                <mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
+                <SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
 			</div>
-			<div class="collection_page">
+			<div class="collection_page" v-show="isNext">
 				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
 				<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
 				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
@@ -47,11 +62,12 @@
 	</a-modal>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive, onBeforeMount} from 'vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
 import { init } from 'echarts/core';
 import MoodboardUpload from './collection/MoodboardUpload.vue';
 import PrintboardUpload from './collection/PrintboardUpload.vue';
@@ -64,6 +80,10 @@ export default defineComponent({
 		MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
 	},
 	props:{
+		isNext:{
+			type:Boolean,
+			default:true,
+		},
 	},
 	emits:['getHistory'],
 	setup(props,{emit}) {
@@ -74,6 +94,8 @@ export default defineComponent({
 			openType:'',
 			collectionStep:1,
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			createProbject:inject('createProbject') as any
+
 		})
 		let driver__:any = computed(()=>{
 			return store.state.Guide.guide
@@ -83,8 +105,8 @@ export default defineComponent({
 			moodBoard:null as any,
 			printBoard:null as any,
 			colorBoard:null as any,
-			sketchBoard:null as any,
 			mannequin:null as any,
+			sketchBoard:null as any,
 		}) as any
 		const init = (value:any)=>{
 			data.habitSetStyle = true
@@ -95,14 +117,16 @@ export default defineComponent({
 				dataDom[value].openSetData()
 			})
 		}
-		let cleardata = ()=>{
+		let cleardata = async ()=>{
 			data.habitSetStyle = false
+			if(data.collectionStep == 3)await getPantongName()
 			data.collectionStep = 1
 			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
 			saveProject(data.openType)
 		}
-		const saveProject = (str:any)=>{
+		const saveProject = async (str:any)=>{
 			if(str == 'design')return
+			if(!data.selectObject.id && data.createProbject)await data.createProbject()
 			let value:any = {
 				projectId:data.selectObject.id,
 			}
@@ -114,11 +138,49 @@ export default defineComponent({
 				})
 			})
 		}
-		let lastStep = ()=>{
+		let getPantongName = ()=>{
+			let colorBoards = store.state.UploadFilesModule.colorBoards;
+			if(!colorBoards || colorBoards?.length == 0) return
+			data.isShowMark = true
+			let value: any = [];
+			for (let v of colorBoards) {
+				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+				let hsv = rgbToHsv(color);
+				v.hsv = hsv[0] + hsv[1] + hsv[2];
+				value.push({
+					h: hsv[0],
+					s: hsv[1],
+					v: hsv[2],
+				});
+			}
+			
+			return new Promise((resolve: any, reject: any) => {
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							store.commit("setColorboardList", colorBoards);
+							resolve();
+						}
+						data.isShowMark = false
+					})
+					.catch((res) => {
+						reject();
+						data.isShowMark = false
+					});
+			});
+		}
+		let lastStep = async ()=>{
+			if(data.collectionStep == 3)await getPantongName()
 			data.collectionStep = data.collectionStep - 1
 			setOpenSetData()
 		}
-		let nextStep = ()=>{
+		let nextStep = async ()=>{
+			if(data.collectionStep == 3)await getPantongName()
 			data.collectionStep = data.collectionStep + 1
 			setOpenSetData()
 		}
@@ -150,6 +212,42 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 	.collectionModal{
+		:deep(.ant-modal-body){
+			padding-top: 10rem;
+
+		}
+		.collection_title{
+			top: calc(4rem*1.2);
+			display: flex;
+			font-size: var(--aida-fsize2);
+			font-weight: 900;
+			color: rgba(0,0,0,.65);
+			z-index: 999;
+			align-items: center;
+			width: calc(35rem*1.2);
+			justify-content: space-between;
+			.collection_progress{
+				width: calc(8rem*1.2);
+				height: calc(8rem*1.2);
+				>div{
+					width: 100% !important;
+					height: 100% !important;
+					:deep(.ant-progress-inner){
+						width: 100% !important;
+						height: 100% !important;
+					}
+				}
+			}
+			.collection_title_text{
+				// margin-right: calc(4rem*1.2);
+			}
+			.collection_title_text_intro{
+				font-size: var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0,0,0,.45);
+			}
+			
+		}
 		:deep(.designOpenrtion_content){
 			display: flex;
 			flex-direction: column;
diff --git a/src/component/home/design/collection/PrintboardUpload.vue b/src/component/home/design/collection/PrintboardUpload.vue
index 88c26ca3..13f97caf 100644
--- a/src/component/home/design/collection/PrintboardUpload.vue
+++ b/src/component/home/design/collection/PrintboardUpload.vue
@@ -560,7 +560,7 @@ export default defineComponent({
 				level2Type:'',
 				designType:'',
 			}
-            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
+            let arr = this.store.state.UploadFilesModule.allBoardData.printboardFiles?JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) : []
 			let setboard = {
 				generate:[] as any,
 				material:[] as any,
diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue
index a1bf4d6b..423fdc72 100644
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -31,6 +31,12 @@
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 				</div>
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<span>Selection Function</span>
+				</div>
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
+					<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+				</div>
 				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
 					<span>{{$t('ProductImg.Similarity')}}</span>
 				</div>
@@ -44,23 +50,16 @@
 					</a-slider>
 					<input type="number" readonly v-model="productimgSimilarity">
 				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 					<span>{{$t('ProductImg.RelightDirection')}}</span>
 				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction">
-					<!-- <a-slider class="system_silder"
-						v-model:value="similarity"
-						@afterChange="setSimilarity"
-						:tooltipVisible="false"
-						:step="5"
-					>
-					</a-slider> -->
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
 					<a-select  style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
 				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 					<span>{{$t('ProductImg.Highlight')}}</span>
 				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
+				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
 					<a-slider class="system_silder"
 						v-model:value="productimgBrightenValue"
 						:tooltipVisible="false"
@@ -109,7 +108,7 @@
 				<div class="generage_btn_box" style="margin-left: auto;">
 					<div class="generage_btn started_btn"  v-show="!generateSuccess.productimgIsProductimg">
 						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
-						<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'" :class="{active:speedState}" @click.stop="openSpeed"></div>
+						<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
 						<div class="content" v-show="speedState">
 							<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 						</div>
@@ -237,19 +236,37 @@ setup(props:any,{emit}) {
 	})
 	let speed = reactive({
 		speedList:[
-			{
-				title:'Generate high-quality images',
-				label:'High',
-				value:'',
-			},{
-				title:'Generate using Wanxiang',
-				label:'WX',
-				value:'wx',
-			},
-		],
+		] as any,
+		speedTypeList:{
+			poseTransfer:[
+				{
+					title:'Generate high-quality images',
+					label:'High',
+					value:'',
+				},{
+					title:'Generate using Wanxiang',
+					label:'WX',
+					value:'wx',
+				},
+			],
+			toPorductImg:[
+				{
+					title:'Generate with high quality',
+					label:'High',
+					relightLabel:'Relight',
+					value:'',
+				},{
+					title:'',
+					label:'FLUX',
+					relightLabel:'Edit',
+					value:'flux',
+				},
+			]
+		},
 		speedState:false,
 		speedData:{
 			title:'Generate high-quality images',
+			relightLabel:'Relight',
 			label:'High',
 			value:'',
 		},
@@ -264,6 +281,7 @@ setup(props:any,{emit}) {
 	}
 	const setSpeed = (item:any)=>{
 		speed.speedData = item
+		speed.speedState = false
 	}
 	let scaleImage: any = ref(false);
 	let isShowMark = ref(false)
@@ -316,15 +334,17 @@ setup(props:any,{emit}) {
 			direction:productimg.productimgRelightDirection,
 			prompt:productimg.productimgSearchName,
 			toProductImageVOList:[obj],
+			modelName:speed.speedData.value,
 			brightenValue:productimg.productimgBrightenValue,
 			projectId:productimg.selectObject.id,
 			imageStrength:(100 - imageStrength)/100,
+			ageGroup:productimg.selectObject.ageGroup
 		}
 		// return
 		productimg.generateSuccess.productimgIsProductimg = true
-		productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
-			productimg.generateSuccess.productimgRemProductimg = true
-		},10000)
+		// productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
+		// 	productimg.generateSuccess.productimgRemProductimg = true
+		// },10000)
 		let url = Https.httpUrls.relight
 		if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
 			url = Https.httpUrls.toProduct
@@ -337,6 +357,7 @@ setup(props:any,{emit}) {
 		productimg.generateSuccess.isShowMark = true
 		Https.axiosPost(url, data).then(
 			(rv) => {
+				productimg.generateSuccess.productimgRemProductimg = true
 				productimg.generateSuccess.isShowMark = false
 				scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
 				let arr:any = []
@@ -484,7 +505,8 @@ setup(props:any,{emit}) {
 			oldId:productimg.generateSuccess.id,
 			status:productimg.generateSuccess.status,
 			listType:productimg.generateSuccess.listType,
-			isIndex:productimg.generateSuccess.isIndex
+			isIndex:productimg.generateSuccess.isIndex,
+			userLikeSortId:productimg.generateSuccess.userLikeSortId
 		}
 		emit('addGenerateImg',data)
 		
@@ -565,7 +587,8 @@ methods: {
 			this.generateSuccess.isIndex = index
 
 		}
-
+		// this.
+		this.generateSuccess.userLikeSortId =  list[index].userLikeSortId
 		this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
 		this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
 		this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
@@ -595,6 +618,12 @@ methods: {
 		this.scaleImage = true
 		this.isGenerate = false
 		this.scaleImageList = list
+		if(this.scaleImageList[index].resultType == "PoseTransfer"){
+			this.speedList = this.speedTypeList.poseTransfer
+		}else{
+			this.speedList = this.speedTypeList.toPorductImg
+		}
+		this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
 		// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
 		this.scaleImageIndex = index
 		if(dialogueIndex)this.robotAssits = dialogueIndex
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index f0cb8f16..de650a6e 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -54,8 +54,6 @@
 						</div>
 						<div class="right_content_block_box">
 							<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
-								
-
 								<div class="right_content_body">
 									<div class="right_content_header">
 										<div class="content_header_left">
@@ -63,19 +61,23 @@
 												{{ $t('HomeView.SelectedDesign') }}
 												</span>
 										</div>
-										<div class="generalModel_state">
-											<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
+										<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
+											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
 												<span>Type :</span>
 												<a-select
-													v-model:value="widthValue.value"
+													v-model:value="resultType"
 													size="large"
 													style="width: 15rem"
 													placeholder="Please select"
-													:options="widthList"
-													@change="upDataLikeListType(500)"
+													:options="resultTypeList"
+													@change="changeResultType"
 												>
 												</a-select>
-											</div> -->
+											</div>
+											<div @click="setUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
+												<span>Unfold :</span>
+												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
+											</div>
 											<div class="generalModel_state_item smail" style="margin-right: 0;">
 												<span>Size :</span>
 												<a-select
@@ -92,15 +94,19 @@
 									</div>
 									<div class="right_content_img_block scroll_style active">
 										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
+											<!-- likeDesignCollectionList -->
 											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
-												v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
+												v-for="(design, index) in selectLikeDesign" :key="design.id || design.designItemId">
 												<div class="content_img_flex"
-												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId || design.id,'like')" 
-												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId || design.id,'like')"
+												:class="[design.resultType]"
+												@mouseenter="startHover(getMousePosition($event,false),design)"
+												@mouseleave="endHover(getMousePosition($event,false),design)"
+												@mousedown.stop="designMousedown(getMousePosition($event,false),design,'like')" 
+												@touchstart.passive="designMousedown(getMousePosition($event,true),design,'like')"
 												@click="designDetail(
 														design,
 														index,
-														likeDesignCollectionList,
+														selectLikeDesign,
 														'like'
 													)">
 													<img class="content_img" 
@@ -111,33 +117,36 @@
 													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
 														:key="design.designOutfitUrl" designType="like" :index="index"/>
 													<a-spin v-show="design?.generateAwait" size="large"></a-spin>
-												</div>
-												<div class="btn" v-show="!design?.generateAwait">
-													<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
-													<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
-														<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
-															<div class="text">On Like</div>
-															<div class="icon iconfont icon-jushoucanggift icon_like">
+
+													<!-- <div class="content_img_block_child" @click.stop>
+														<div class="content_img_block content_img_GetWidth active childItem"
+															:style="likeStyle"
+															v-for="childItem,childIndex in design.childList"
+														>
+															<div class="content_img_flex">
+																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
+																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
+															</div>
+															<div class="btn" v-show="!childItem?.generateAwait">
+																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
 															</div>
 														</div>
-														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'PoseTransfer','add','like')">
-															<div class="text">Transfer Pose</div>
-															<div class="icon iconfont icon-jushoucanggift icon_like"></div>
+														<div class="content_img_block content_img_GetWidth active childItem"
+															:style="likeStyle"
+															v-for="childItem,childIndex in design.childList"
+														>
+															<div class="content_img_flex">
+																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
+																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
+															</div>
+															<div class="btn" v-show="!childItem?.generateAwait">
+																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
+															</div>
 														</div>
-														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
-															<div class="text">Relight</div>
-															<i class="fi fi fi-br-keyboard-brightness"></i>
-														</div>
-														<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
-															<div class="text">To Product Image</div>
-															<i class="fi fi fi-ss-box-open"></i>
-														</div>
-														<!-- <div class="item" @click="setDeleteDesign(design,index)">
-															<div class="text">Delete</div>
-															<i class="fi fi-rr-trash icon_delete">
-															</i>
-														</div> -->
-													</div>
+													</div> -->
+												</div>
+												<div class="btn" v-show="!design?.generateAwait">
+													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
 													
 												</div>
 											</div>
@@ -182,31 +191,10 @@
 														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 													</div> 
 													<div class="btn">
-														<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
-														<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
-															<div class="item" @click="likeDesignCollection(design,index,design.resultType)">
-																<div class="text">Like</div>
-																<div class="icon iconfont icon-jushoucang icon_like">
-																</div>
-															</div>
-															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'PoseTransfer','add','disLike')">
-																<div class="text">Transfer Pose</div>
-																<div class="icon iconfont icon-jushoucanggift icon_like"></div>
-															</div>
-															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
-																<div class="text">Relight</div>
-																<i class="fi fi fi-br-keyboard-brightness"></i>
-															</div>
-															<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
-																<div class="text">To Product Image</div>
-																<i class="fi fi fi-ss-box-open"></i>
-															</div>
-															<div class="item" @click="setDeleteDesign(design,index)">
-																<div class="text">Delete</div>
-																<i class="fi fi-rr-trash icon_delete">
-																</i>
-															</div>
+														<div class="icon iconfont icon-jushoucang icon_like" @click="likeDesignCollection(design,index,design.resultType)">
 														</div>
+														<i class="fi fi-rr-trash icon_delete" @click="setDeleteDesign(design,index)">
+														</i>
 													</div>
 											</div>
 											
@@ -219,11 +207,29 @@
 								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
 							</div>
 						</div>
-						
 					</div>
 				</div>
 			</div>
 		</div>
+		<div ref="designBtn"  class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
+			<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
+				<div class="text">Delete</div>
+				<i class="fi fi-rr-trash icon_delete">
+				</i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
+				<div class="text">Transfer Pose</div>
+				<i class="fi fi fi-rr-play-alt"></i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
+				<div class="text">Relight</div>
+				<i class="fi fi fi-br-keyboard-brightness"></i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
+				<div class="text">To Product Image</div>
+				<i class="fi fi fi-ss-box-open"></i>
+			</div>
+		</div>
 		<collectionModal ref="collectionModal"></collectionModal>
 		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
 		<!-- 导出缩略图的蒙层 start-->
@@ -249,7 +255,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
+import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
@@ -376,9 +382,12 @@ export default defineComponent({
 		const dataDom = reactive({
 			collectionModal:null as any,
 			editDesignType:null as any,
+			designBtn:null as any,
 		})
 		const designData = reactive({
 			openEditBtnId:-1,
+			selectEditBtn:null as any,
+			selectEditBtnIndex:-1,
 			likeLoading: false, //喜欢防抖
 			widthList:[
 				{
@@ -392,6 +401,39 @@ export default defineComponent({
 					value:400,
 				}
 			],
+			selectDesign:null as any,//当前选择的design
+			isUnfold:false,
+			selectLikeDesign:[] as any,
+
+			//类型
+			resultTypeList:[
+				{
+					label:'All',
+					value:'All',
+				},{
+					label:'Design',
+					value:'Design',
+				},{
+					label:'Product',
+					value:'Product',
+				},
+				// ,{
+				// 	label:'To Product Image',
+				// 	value:'ToProductImage',
+				// },{
+				// 	label:'Relight',
+				// 	value:'Relight',
+				// },
+				{
+					label:'Pose Transfer',
+					value:'PoseTransfer',
+				},
+			],
+			resultType:'All',
+			oldSelectLikeDesign:null as any
+		})
+		watch(()=>likeDesignCollectionList.value.length,(val)=>{
+			if(val>0)uploadLikeDom()
 		})
 		provide('exportNav',exportNav)
 		let isShowOperate = ref(false)
@@ -476,9 +518,11 @@ export default defineComponent({
 				for(let i = 0;i < elArr.length;i++){
 					posiitonData.value.likeElList.push({
 						el: elArr[i], 
-						sort: likeDesignCollectionList.value[i].sort - 1, 
+						sort: designData.selectLikeDesign[i].sort - 1, 
+						// sort: likeDesignCollectionList.value[i].sort - 1, 
 						index: i,
-						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
+						userLikeSortId:designData.selectLikeDesign[i].userLikeSortId || designData.selectLikeDesign[i].id
+						// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
 					});
 				}
 				moveItem('like')
@@ -513,8 +557,10 @@ export default defineComponent({
 		const cancelDeleteDesign = (index:any)=>{
 			store.commit("cancelDeleteDesignCollectionList",index);
 		}
-		const designMousedown = (e:any,Id:number,str:string)=>{
+		const designMousedown = (e:any,design:any,str:string)=>{
+			if(design.resultType != 'Design' || designData.isUnfold)return
 			if(str != 'like' && showDesignMark.value) return
+			let Id = design.userLikeSortId || design.id
 			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
 			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
 			item.el.style.zIndex = 2;
@@ -624,6 +670,7 @@ export default defineComponent({
 			}
 		}
 		const setLikeDislLike = (str:string,value:any)=>{
+			designData.selectLikeDesign = []
 			posiitonData.value.likeSelectIndex = 0
 			nextTick(()=>{
 				if(str == 'like'){
@@ -688,8 +735,24 @@ export default defineComponent({
 		const openCollection = (str:string)=>{
 			dataDom.collectionModal.init(str)
 		}
-		const openEditBtn = (id:number)=>{
-			designData.openEditBtnId = id
+		const openEditBtn = (design:any,index:number,event:any)=>{
+			if(designData.selectLikeDesign[index].resultType != 'Design'){
+				designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
+			}else{
+				designData.selectDesign = designData.selectLikeDesign[index]
+			}
+			designData.openEditBtnId = design.designItemId||design.id
+			designData.selectEditBtn = design
+			designData.selectEditBtnIndex = index
+			let width = event.target.offsetWidth
+			let height = event.target.offsetHeight
+			let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect()
+			
+			let x = event.clientX - parentRect.x - event.offsetX + width
+			let y = event.clientY - parentRect.y - event.offsetY + height
+			dataDom.designBtn.style.left = x+'px'
+			dataDom.designBtn.style.top = y+'px'
+			
 			let removeEditBtnId = ()=>{
 				designData.openEditBtnId = -1
 				document.removeEventListener('click',removeEditBtnId)
@@ -714,7 +777,6 @@ export default defineComponent({
 			dataDom.editDesignType.isComparison = true
 		}
 		const addGenerateImg = (data:any)=>{
-			console.log(data)
 			if(!data.id)return
 			let obj = {
 				id:data.id,
@@ -729,6 +791,7 @@ export default defineComponent({
 				userGroupId:data.userGroupId || data.id,
 				firstFrameUrl:data.firstFrameUrl,
 				gifUrl:data.gifUrl,
+				userLikeSortId:data.userLikeSortId,	
 			}
 			let list = []
 			if(data.listType == 'disLike'){
@@ -763,16 +826,18 @@ export default defineComponent({
 				list[data.isIndex].designItemId = obj.designItemId
 				list[data.isIndex].sourceUrl = obj.sourceUrl
 			}
-			nextTick().then(()=>{
-				setDesignItemStyle()
-				setSystemDesigner(100)
-			})
+			// nextTick().then(()=>{
+			// 	// setDesignItemStyle()
+			// 	// setSystemDesigner(100)
+			// 	uploadLikeDom()
+			// })
 		}
 		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
 			let url
 			let data = {
 				toProductImageResultId:[(design.designItemId || design.id)],
 				projectId: store.state.Workspace.probjects.id,
+				collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 			} as any
 			let params = {} as any
 			if(type == 'ToProductImage' || type == 'Relight'){
@@ -788,12 +853,14 @@ export default defineComponent({
 						likeOrDislike:'like',
 						transformedId:design.id,
 						projectId:store.state.Workspace.probjects.id,
+						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 					}
 				}else{
 					params = {
 						likeOrDislike:'dislike',
 						transformedId:design.id,
 						projectId:store.state.Workspace.probjects.id,
+						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 					}
 				}
 			}else{
@@ -807,28 +874,48 @@ export default defineComponent({
 			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
 				(rv) => {
 					if(str == 'like'){
-						let value:any = {
-							...design,
-							sort:likeDesignCollectionList.value.length + 1,
-							userLikeGroupId:design.id,
-						}
-						design.groupDetailId = rv.groupDetailId;
-						store.commit(
-							"addLikeDesignCollectionList",
-							value
-						);
-						setLikeDislLike('like',value)
-						if(index != -1)store.commit("deleteDesignCollectionList", index);
-					}else{
-						if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
-						store.commit("addDesignCollectionList", [design]);
 						likeDesignCollectionList.value.forEach((item:any)=>{
-							if(item.sort > design.sort){
-								item.sort-=1
+							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
+								item.childList.push(design)
+							}
+						})
+					}else{
+						likeDesignCollectionList.value.forEach((item:any)=>{
+							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
+								item.childList = item.childList.filter((item:any)=>{
+									return item.id != design.id
+								})
 							}
 						})
-						setLikeDislLike('disLike',design)
 					}
+					nextTick().then(()=>{
+						uploadLikeDom()
+					})
+					
+
+					//一下代码是生成的design时候也可以toproduct
+					// if(str == 'like'){
+					// 	let value:any = {
+					// 		...design,
+					// 		sort:likeDesignCollectionList.value.length + 1,
+					// 		userLikeGroupId:design.id,
+					// 	}
+					// 	design.groupDetailId = rv.groupDetailId;
+					// 	store.commit(
+					// 		"addLikeDesignCollectionList",
+					// 		value
+					// 	);
+					// 	setLikeDislLike('like',value)
+					// 	if(index != -1)store.commit("deleteDesignCollectionList", index);
+					// }else{
+					// 	if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
+					// 	store.commit("addDesignCollectionList", [design]);
+					// 	likeDesignCollectionList.value.forEach((item:any)=>{
+					// 		if(item.sort > design.sort){
+					// 			item.sort-=1
+					// 		}
+					// 	})
+					// }
 					designData.likeLoading = false;
 				}
 			).catch(res=>{
@@ -898,6 +985,81 @@ export default defineComponent({
 		const gifPause = (e:any,item:any)=>{
 			e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
 		}
+		const startHover = (e:any,item:any)=>{
+		}
+		const endHover = (e:any,item:any)=>{
+
+		}
+		const setUnfold = ()=>{
+			designData.isUnfold = !designData.isUnfold
+			if(!designData.isUnfold){
+				designData.selectLikeDesign = designData.oldSelectLikeDesign || []
+			}
+			uploadLikeDom()
+		}
+		const uploadLikeDom = ()=>{
+			if(designData.isUnfold){
+				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
+				designData.selectLikeDesign = []
+				likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
+				let childLength = 0
+				likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
+					let item = JSON.parse(JSON.stringify(likeItem))
+					item.oldSort = item.sort
+					if(item?.childList?.length > 0){
+						item.childList.forEach((childItem:any,childIndex:number)=>{
+							childItem.sort = childIndex + item.sort + childLength
+							designData.selectLikeDesign.push(childItem)
+						})
+						childLength = item.childList.length + childLength
+					}
+					item.sort = childLength + item.sort
+					designData.selectLikeDesign.push(item)
+				})
+				designData.oldSelectLikeDesign = []
+				designData.resultType = 'All'
+			}else{
+				if(designData.selectLikeDesign.length == 0){
+					designData.selectLikeDesign = likeDesignCollectionList.value
+					return
+				}
+				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
+				parents.map((parent:any) => {
+					parent.sort = parent.oldSort||parent.sort
+					return {
+					...parent,
+					childList: designData.selectLikeDesign.filter((item:any) => 
+						item.parentId === parent.userLikeSortId && item.resultType !== 'Design'
+					)
+					};
+				});
+				designData.selectLikeDesign = parents
+			}
+			nextTick(()=>{
+				setSystemDesigner(0)
+			})
+		}
+		const changeResultType = ()=>{
+			if(designData.resultType != 'All'){
+				if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
+				if(designData.resultType == 'Product'){
+					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
+				}else{
+					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
+				}
+				designData.selectLikeDesign.forEach((item:any,index:number) => {
+					item.sort = index + 1
+				})
+			}else{
+				designData.selectLikeDesign = designData.oldSelectLikeDesign
+				designData.selectLikeDesign.forEach((item:any,index:number) => {
+					item.sort = index + 1
+				})
+			}
+			nextTick(()=>{
+				setSystemDesigner(0)
+			})
+		}
 		return {
 			store,
 			...toRefs(editDesignType),
@@ -952,6 +1114,10 @@ export default defineComponent({
 			setGenerateAwait,
 			gifPlay,
 			gifPause,
+			startHover,
+			endHover,
+			setUnfold,
+			changeResultType,
 		};
 	},
 	data() {
@@ -1249,6 +1415,7 @@ export default defineComponent({
 				marketingSketchFiles,
 				moodboardPosition,
 			} = this.store.state.UploadFilesModule.allBoardData;
+			console.log(JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData)))
 			this.randomNum()
 			let modelList = [] as any;
 			let workspace:any = this.store.state.Workspace.probjects
@@ -1427,21 +1594,17 @@ export default defineComponent({
 			Https.axiosPost(Https.httpUrls.designDislike, data)
 				.then((rv: any) => {
 					if (rv) {
-						this.store.commit("addDesignCollectionList", [design]);
-						this.store.commit(
-							"deleteLikeDesignCollectionList",
-							index
-						);
+						// this.store.commit("addDesignCollectionList", [design]);
 						this.likeDesignCollectionList.forEach((item:any)=>{
 							if(item.sort > design.sort){
 								item.sort-=1
 							}
 						})
-					
+						this.store.commit(
+							"deleteLikeDesignCollectionList",
+							index
+						);
 						this.setLikeDislLike('disLike',design)
-						// if (!this.likeDesignCollectionList.length) {
-						// 	this.store.commit("deleteUserGroupId");
-						// }
 					}
 					this.disLikeLoading = false;
 				})
@@ -1768,6 +1931,7 @@ export default defineComponent({
 					}
 				}
 			}
+			
 			.designPage_body {
 				width: 100%;
 				height: 100%;
@@ -1913,6 +2077,8 @@ export default defineComponent({
 									.content_img_block{
 										width: 16rem;
 										height: 23rem;
+										position: relative;
+										
 									}
 								}
 							}
@@ -2006,7 +2172,8 @@ export default defineComponent({
 									align-items: center;
 									justify-content: center;
 									position: absolute;
-									transition: top,left .3s;
+									transition: top,left .5s;
+									// transition: top,left .3s;
 									&:hover .btn{
 										display: flex;
 									}
@@ -2020,13 +2187,43 @@ export default defineComponent({
 										border: 2px solid #E0E0E0;
 										overflow: hidden;
 										background: #fff;
+										.content_img_block_child{
+											position: absolute;
+											border-radius: 2rem;
+											border: 2px solid #00000070;
+											background: #fff;
+											display: flex;
+											left: -43%;
+											transform: translateX(69%);
+											top: 0rem;
+											> .childItem{
+												> .content_img_flex{
+													border: 2px solid #00000070;
+												}
+												position: relative !important;
+												>img{
+
+												}
+											}
+										}
 									}
 									&.active{
 										.icon_like,.icon_delete{
 											display: block;
 										}
 										.content_img_flex {
-											border: 2px solid #000;
+											&.Design{
+												border: 2px solid #000;
+											}
+											&.PoseTransfer{
+												border: 2px solid #f0d9d0;
+											}
+											&.ToProductImage{
+												border: 2px solid #ccece5;
+											}
+											&.Relight{
+												border: 2px solid #ccece5;
+											}
 										}
 									}
 									.content_img {
@@ -2050,39 +2247,7 @@ export default defineComponent({
 											align-items: center;
 											justify-content: center;
 										}
-										> .btnOpen{
-											position: absolute;
-											width: max-content;
-											left: 30px;
-											top: 30px;
-											transform: translateX(-100%);
-											background: #e4e4e7;
-											padding: 12px;
-											border-radius: 12px;
-											display: none;
-											z-index: 99;
-											&.active{
-												display: block;
-											}
-											> .item{
-												display: flex;
-												align-items: center;
-												margin-bottom: 8px;
-												padding: 8px;
-												border-radius: 8px;
-												cursor: pointer;
-												&:last-child{
-													margin: 0;
-												}
-												> .text{
-													font-size: 12px;
-													margin-right: 10px;
-												}
-												&:hover{
-													background: #efeff1;
-												}
-											}
-										}
+										
 										.icon_like,.icon_delete {
 											font-size: 1.4rem;
 											cursor: pointer;
@@ -2106,7 +2271,7 @@ export default defineComponent({
 				}
 			}
 		}
-
+		
 		.page_content_bg {
 			position: absolute;
 			width: 100%;
@@ -2130,5 +2295,38 @@ export default defineComponent({
 			text-align: center;
 		}
 	}
+	.btnOpen{
+		position: absolute;
+		width: max-content;
+		left: 30px;
+		top: 30px;
+		transform: translateX(-100%);
+		background: #e4e4e7;
+		padding: 12px;
+		border-radius: 12px;
+		display: none;
+		z-index: 999;
+		&.active{
+			display: block;
+		}
+		> .item{
+			display: flex;
+			align-items: center;
+			margin-bottom: 8px;
+			padding: 8px;
+			border-radius: 8px;
+			cursor: pointer;
+			&:last-child{
+				margin: 0;
+			}
+			> .text{
+				font-size: 12px;
+				margin-right: 10px;
+			}
+			&:hover{
+				background: #efeff1;
+			}
+		}
+	}
 }
 </style>
\ No newline at end of file
diff --git a/src/component/home/design/mannequin/index.vue b/src/component/home/design/mannequin/index.vue
index dd47eb1c..fa73929f 100644
--- a/src/component/home/design/mannequin/index.vue
+++ b/src/component/home/design/mannequin/index.vue
@@ -328,7 +328,8 @@ export default defineComponent({
 		flex-direction: column;
 		align-items: center;
 		> .top,> .model{
-			width: 130rem;
+			width: 100%;
+			// width: 130rem;
 		}
 		> .top{
 			display: flex;
diff --git a/src/component/home/index.vue b/src/component/home/index.vue
index 75b02f4d..d0f2de43 100644
--- a/src/component/home/index.vue
+++ b/src/component/home/index.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 	components:{
 		design,newPorject,chat
 	},
-	emits:['setTask','newProject'],
+	emits:['setTask','setNewProject'],
 	setup(props,{emit}) {
 		const store = useStore();
 		const route = useRoute()
@@ -98,6 +98,11 @@ export default defineComponent({
 			store.commit("setAllBoardDataChoose",{});
 			store.commit("clearShowSketchboard",{});
 			store.commit("clearAllCollection");
+			store.commit("clearAllCloudList");
+			let arr = ['moodBoard','printBoard','sketchBoard','colorBoard']
+			arr.forEach((item:any)=>{
+				store.commit("clearAllBoardData",item);
+			})
 		}
 		const getWorks = (id:any)=>{
 			let value:any = {
@@ -214,69 +219,81 @@ export default defineComponent({
 		// 	})
 		// }
 		const getCollection = (type:string,module:any)=>{
-			let moduleList = [] as any
-			if(type == 'design'){
-				moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin']
-			}else{
-				moduleList = ["printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin',"patternMaking3D",'deReconstruction']
-			}
-			if(module)moduleList = [module]
-			let value:any = {
-				 "id":data.selectObject.id,
-				"moduleList":moduleList,
-			}
-			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
-				
-				historyChooseData(rv)//设置历史数据
-				if(rv.mannequin.length>0){
-					let arr = [] as any
-					rv.mannequin.forEach((item:any)=>{
-						arr.push({
-							url:item.url,
-							id:item.mannequinRelationId,
-							type:item.mannequinRelationType,
-							collectionElementId:item.collectionId
-						})
-					})
-					store.commit('setProbject',{model:arr})
-				}
-				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
-				// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
-				if(module){
-					let canvasData = ['canvas','deReconstruction']
-					for (let index = 0; index < canvasData.length; index++) {
-						const item = canvasData[index];
-						await getCanvasData(item)
-					}
-				}
-				
-				// await setitemData(allBoardData)
-				//还有一个canvas
-				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
-				
-				allBoardData.forEach((item)=>{
-					let value = {
-						type:item,
-						objectName:data.selectObject.type,
-					}
-					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
-					if(arr.indexOf(item) != -1){
-						// store.dispatch('setAllBoardData',value)
-					}else{
-						store.dispatch('setModularData',value)
-					}
-				})
-				data.isShowMark = false
-				data.dataLoad = false
+			return new Promise((resolve, reject) => {
+				let moduleList = [] as any
 				if(type == 'design'){
-					nextTick(()=>{
-					dataDom.design.openSetData()
-					})
+					moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin']
+				}else{
+					moduleList = ["printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin',"patternMaking3D",'deReconstruction','uploadElement']
 				}
-			}).catch(()=>{
-				data.isShowMark = false
-				data.dataLoad = false
+				if(module)moduleList = [module]
+				let value:any = {
+					"id":data.selectObject.id,
+					"moduleList":moduleList,
+				}
+				Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+					if(rv.uploadElement){//toproduct、relight、poseTransfer
+						let uploadElementData = {
+							str:'add',
+							list:rv.uploadElement,
+						}
+						store.commit('setUploadElement',uploadElementData)
+
+					}
+					historyChooseData(rv)//设置历史数据
+					if(rv.mannequin.length>0){
+						let arr = [] as any
+						rv.mannequin.forEach((item:any)=>{
+							arr.push({
+								url:item.url,
+								id:item.mannequinRelationId,
+								type:item.mannequinRelationType,
+								collectionElementId:item.collectionId
+							})
+						})
+						store.commit('setProbject',{model:arr})
+					}
+					let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
+					if(module){
+						let canvasData = ['canvas','deReconstruction']
+						for (let index = 0; index < canvasData.length; index++) {
+							const item = canvasData[index];
+							await getCanvasData(item)
+						}
+					}
+					
+					// await setitemData(allBoardData)
+					//还有一个canvas
+					if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+					
+					allBoardData.forEach((item)=>{
+						let value = {
+							type:item,
+							objectName:data.selectObject.type,
+						}
+						let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+						if(arr.indexOf(item) != -1){
+							// store.dispatch('setAllBoardData',value)
+						}else{
+							store.dispatch('setModularData',value)
+						}
+					})
+					data.isShowMark = false
+					data.dataLoad = false
+					if(type == 'design'){
+						nextTick(()=>{
+						dataDom.design.openSetData()
+						})
+					}
+					resolve('')
+				}).catch(()=>{
+					data.isShowMark = false
+					data.dataLoad = false
+					resolve('')
+				})
 			})
+			
 		}
 		const getCanvasData = (str:any)=>{
 			return new Promise((resolve, reject) => {
@@ -312,7 +329,7 @@ export default defineComponent({
 				),
 				generatePrintFiles: [],
 				colorBoards: dealViewChooseColor(
-					dataValue.colorBoard
+					dataValue.colorBoard 
 				),
 				sketchboardFiles: dealViewChooseData(
 					dataValue.sketchBoard,"Sketchboard"
@@ -320,7 +337,7 @@ export default defineComponent({
 			};
 			if(dataValue.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", dataValue.moodBoard.moodTemplateId);
 			store.commit("setAllBoardDataChoose", collectionData);
-			store.commit("setShowSketchboard", dataValue.sketchBoards);
+			if(dataValue.sketchBoards)store.commit("setShowSketchboard", dataValue.sketchBoards);
 			let likeDesignCollectionList:any = []
 			if(dataValue.design?.userLikeDetails){
 				dataValue.design?.userLikeDetails.map(
@@ -355,7 +372,8 @@ export default defineComponent({
 			}
 			if(dataValue.poseTransfer){
 				let value = {
-					list: dataValue.poseTransfer,
+					list:dataValue.poseTransfer.list,
+					likedList:dataValue.poseTransfer.likedList,
 					str:'add',
 					index:-1,
 				}
@@ -363,6 +381,7 @@ export default defineComponent({
 			}
 			if(dataValue.patternMaking3D){
 				let patternMaking3DData = {
+					collectionElementId:dataValue.patternMaking3D.collectionElementId,
 					threeDSimpleId:dataValue.patternMaking3D.threeDSimpleId,
 					url:dataValue.patternMaking3D.printMinioUrl,
 					printMinioUrl:getMinioUrl(dataValue.patternMaking3D.printMinioUrl),
@@ -428,16 +447,53 @@ export default defineComponent({
 			});
 			return colorList;
 		}
+		let queue = [] as any
+		let start = false
 		const chatChange = (value:any)=>{
 			if(value.type == 'design_control_signal' && dataDom.design){
-				dataDom.design.designNewCollection()
+				queue.push(
+					{
+						type:'design',
+						fun:dataDom.design.designNewCollection,
+					}
+				)
+				// dataDom.design.designNewCollection()
 			}else{
-				getCollection('design',value.module)
+				queue.push(
+					{
+						type:'promise',
+						fun:getCollection,
+						module:value.module,
+						str:'design'
+					}
+				)
+				// getCollection('design',value.module)
+			}
+			if(!start){
+				startQueue()
+			}
+		}
+		const startQueue = async ()=>{
+			start = true
+			if(queue[0].type){
+				if(queue[0].type == 'promise'){
+					await queue[0].fun(queue[0].str,queue[0].module)
+				}else{
+					await queue[0].fun()
+				}
+				queue.splice(0,1)
+			}
+			if(queue.length>0){
+				startQueue()
+			}else{
+				start = false
+
 			}
 		}
 		const newProject = (value:any)=>{
 			settingGetHistory()
-			router.push(`home?history=${value.id}`)
+			emit('setNewProject')
+			router.push(`home?history=${value.id}&create=true`)
 			data.chatData = value
 			
 		}
diff --git a/src/component/home/tools/patternMaking3D/index.vue b/src/component/home/tools/patternMaking3D/index.vue
index f7bebbce..9f78c9be 100644
--- a/src/component/home/tools/patternMaking3D/index.vue
+++ b/src/component/home/tools/patternMaking3D/index.vue
@@ -37,7 +37,15 @@
 				</div>
 			</div>
 			<div class="list printList" v-show="libraryOrModel == 'print'">
-				<selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint>
+				<!-- <selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint> -->
+				 <div v-for="item in allBoardData.printboardFiles" class="item" :class="{active:item.id == patternMaking3D.collectionElementId}" @click="setSelectPrint(item)">
+					<img :src="item.imgUrl" alt="">
+				</div>
+				<div class="item add">
+					<div class="icon" @click="openSetPrint">
+						<i class="fi fi-br-plus"></i>
+					</div>
+				</div>
 			</div>
 		</div>
 		<div class="model" v-show="selectModel.id != -1">
@@ -54,7 +62,7 @@
 					<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
 					<img v-show="isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
 				</div>
-				<threeBox v-if="imgOrThree" @saveProject="saveProject" ref="threeBox"></threeBox>
+				<threeBox v-if="imgOrThree" @threeSaveProject="saveProject" ref="threeBox"></threeBox>
 			</div>
 			<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>			
 			<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>			
@@ -74,7 +82,7 @@
 		<div class="download">
 			<download ref="download"></download>
 		</div>
-		<scaleImage ref="scaleImage"></scaleImage>
+		<collection ref="collection" :isNext="false"></collection>
 	</div>
 </template>
 <script lang="ts">
@@ -87,10 +95,10 @@ import threeBox from "./three.vue"
 import download from "./download.vue"
 import {getMinioUrl} from '@/tool/util'
 import scaleImage from "@/component/HomePage/scaleImage.vue";
-import selectPrint from './selectPrint.vue'
+import collection from '@/component/home/design/collection.vue'
 export default defineComponent({
 	components:{
-		threeBox,download,scaleImage,selectPrint
+		threeBox,download,scaleImage,collection
 	},
 	props:{
 	},
@@ -105,8 +113,10 @@ export default defineComponent({
 			// 	return store.state.UserHabit.printType
 			// }),
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			patternMaking3D:computed(()=>store.state.HomeStoreModule.patternMaking3D),//选择的项目
 			modelList:[] as any,
 			sex:'Female',
+			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
 			sexList:computed(()=>store.state.UserHabit.sex.value),
 			isShowMark:false,
 			isNoData:false,
@@ -118,13 +128,16 @@ export default defineComponent({
 			maskShow:false,
 			libraryOrModel:'model'
 		})
+		watch(()=>data.patternMaking3D.threeDSimpleId,(newValue,oldValue)=>{
+			if(newValue)openSetData()
+		})
 		const sexChange = ()=>{
 			data.modelList = []
 			data.currentPage = 0,
 			data.isNoData = false
 			data.isShowMark = false
 		}
-		const createProbject:any = inject('createProbject')
+		const createProbject:any = inject('createProbject') as any
 		const setSelectModel = async (item:any)=>{
 			if(!data.selectObject.id)await createProbject()
 			data.isShowMark = true
@@ -141,7 +154,7 @@ export default defineComponent({
 				// 	dataDom.threeBox.openSetData()
 				// }
 				let stateData = {
-					threeDSimpleId:item.id
+					threeDSimpleId:item.threeDSimpleId
 				}
 				store.commit('setPatternMaking3D',stateData)
 				saveProject()
@@ -149,10 +162,22 @@ export default defineComponent({
 				data.isShowMark = false	
 			})
 		}
+		const setSelectPrint = async (item:any)=>{
+			if(!data.selectObject.id)await createProbject()
+			let patternMaking3DData = {
+				collectionElementId:item.id,
+				url:item.imgUrl,
+				printMinioUrl:getMinioUrl(item.imgUrl),
+			};
+			store.commit('setPatternMaking3D',patternMaking3DData)
+			if(!dataDom.threeBox)dataDom.threeBox.addMaterial({url:item.imgUrl})
+			saveProject()
+		}
 		const dataDom = reactive({
 			threeBox:null as any,
 			download:null as any,
 			scaleImage:null as any,
+			collection:null as any,
 		})
 		const openSetData = ()=>{
 			nextTick(()=>{
@@ -240,16 +265,18 @@ export default defineComponent({
 					})
 				})
 			},2000)
-			
 		}
 		onMounted(()=>{
-			openSetData()
 		})
+		const openSetPrint = ()=>{
+			dataDom.collection.init('printBoard')
+		}
 		return{
 			...toRefs(dataDom),
 			...toRefs(data),
 			sexChange,
 			setSelectModel,
+			setSelectPrint,
 			openSetData,
 			getModelList,
 			setImgOrThree,
@@ -257,6 +284,8 @@ export default defineComponent({
 			setLibraryOrModel,
 			openScaleImage,
 			setPrint,
+			openSetPrint,
+			saveProject,
 		}
 	},
 	directives:{
@@ -374,6 +403,46 @@ export default defineComponent({
 						border: 2px solid #000;
 					}
 				}
+				&.printList{
+					>.item{
+						width: calc(100% / 4 - 1rem);
+						margin:.5rem;
+						aspect-ratio: 1 / 1;
+						&.active{
+							opacity: .7;
+							transform: scale(.9);
+							// border: 2px solid #000;
+							// border-radius: 2rem;
+							// overflow: hidden;
+						}
+						> img{
+							width: 100%;
+							height: 100%;
+							object-fit: cover; 
+							cursor: pointer;
+						}
+						&.add{
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							>.icon{
+								border: calc(0.3rem*1.2) solid #000;
+								border-radius: calc(1rem*1.2);
+								width: 6rem;
+								height: 6rem;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								cursor: pointer;
+								i{
+									font-weight: 600;
+									font-size: 2rem;
+									display: flex;
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 		> .model ,> .flatPatterm{
diff --git a/src/component/home/tools/patternMaking3D/selectPrint.vue b/src/component/home/tools/patternMaking3D/selectPrint.vue
deleted file mode 100644
index 10c465b1..00000000
--- a/src/component/home/tools/patternMaking3D/selectPrint.vue
+++ /dev/null
@@ -1,700 +0,0 @@
-<template>
-    <div class="printboard_upload_modal">
-		
-        <div class="printboard_left_upload">
-            <div class="left_upload_header">
-                <div class="upload_header_item">
-                    <div class="switch_type_list">
-                        <div
-							
-							class="switch_type_item"
-							:class="[openClick == 1 ? 'select_swtich' : '']"
-						>
-							<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
-						</div>
-						<div
-							
-							class="switch_type_item"
-							:class="[openClick == 2 ? 'select_swtich' : '']"
-						>
-							<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
-						</div>
-						<div
-							
-							class="switch_type_item Guide_1_2_1"
-							:class="[openClick == 3 ? 'select_swtich' : '']"
-						>
-							<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
-							
-						</div>
-						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
-							<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>	</div>
-							<ul v-show="openMenu">
-								<li 
-									v-for="item,index in printCatecoryList" 
-									class="printModel_item" 
-									@click.stop="setSceneList(item)"
-									:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
-									item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
-									item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
-								>{{ item.name }}</li>
-							</ul>
-						</div>
-                    </div>
-                </div>
-            </div>
-             <div v-show="openClick == 1" class="printboard_body">
-                <div class="upload_img_body">
-                    <div class="upload_item">
-                        <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
-                            <div class="upload_file_img_block">
-                                <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
-                                    <a-spin  :indicator="indicator" tip="Uploading..."/>
-                                </div>
-                                <div class="upload_file_item_content"  v-show="file?.status === 'done'" @click="setSetchboardGenerate(file.resData)">
-                                    <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
-									<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
-
-                                    <div class="delete_like_file_block" @click.stop="deleteFile(file)">
-										<span
-											class="icon iconfont icon-shanchu"
-										></span>
-									</div>
-                                </div>
-                            </div>
-                            <!-- <div class="pin_block" v-show="file?.status === 'done'">
-                                <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
-                            </div> -->
-                            
-                        </div>
-                        <div class="upload_file_item upload_component" v-show="printboardList.length < 16">
-                            <a-upload
-                                :action="uploadUrl + '/api/element/upload'"
-								:capture="null"
-                                list-type="picture-card"
-                                :before-upload="beforeUpload"
-                                :data="{
-                                    ...upload
-                                }"
-                                :headers="{Authorization:token}"
-                                v-model:file-list="fileList"
-                                :customRequest="function(){}"
-                                :maxCount="16 - printboardList.length+fileList.length"
-                                accept=".jpg,.png,.jpeg,.bmp"
-                                @change="fileUploadChange"
-                                >
-								<div
-                                    class="upload_tip_block"
-									v-show="printboardList.length < 16"
-                                >
-                                    <i class="fi fi-br-upload"></i>
-                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-                                </div>
-                            </a-upload>
-                        </div>
-                    </div>
-                </div>
-            </div>
-			<Material v-show="openClick == 2" 
-				ref="Material" 
-				msg="Printboard" 
-				@setLibrary = setSetchboardGenerate 
-				@confirmSelect="confirmSelect"
-				:disignTypeList="printCatecoryList"
-				></Material>
-			<Generate v-show="openClick == 3" ref="Generate" @setLibrary = setSetchboardGenerate  :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
-        </div>
-		<!-- 取消请求 -->
-		<scaleImage ref="scaleImage"></scaleImage>
-        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
-import { LoadingOutlined } from '@ant-design/icons-vue';
-import {getCookie} from '@/tool/cookie'
-import {getUploadUrl} from '@/tool/util'
-import {useStore} from 'vuex'
-import { Https } from "@/tool/https";
-import { Modal,message,Upload} from 'ant-design-vue';
-import Cropper from '@/component/HomePage/Cropper.vue'
-import Material from '@/component/HomePage/Material.vue'
-import Generate from "@/component/HomePage/Generate.vue";
-import GO from "@/tool/GO";
-import { useI18n } from 'vue-i18n';
-import { openGuide,driverObj__ } from "@/tool/guide";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import axios from 'axios'
-import generalMenu from "@/component/HomePage/generalMenu.vue";
-import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
-
-export default defineComponent({
-    components:{
-        Cropper,
-        Material,
-		Generate,
-		scaleImage,
-		generalMenu,
-		sketchCategory,
-    },
-	emits: ['setPrint'],
-    setup(){
-        let store:any =useStore()
-        let fileList:any = ref([]),//选中的文件id数据
-            printImgList:any = ref([]), //print的印花图片
-            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
-        let openClick: any = ref(1);
-		let {t} = useI18n()
-		let isTest = ref()
-		let userInfo:any = {}
-		let workspace:any = ref({})
-		let scene = ref({
-			name:'Pattern',
-			value:'Pattern'
-		})
-		let openMenu = ref(false)
-		let printCatecoryList:any = computed(()=>{
-			return store.state.UserHabit.printType
-		})
-        return {
-            fileList,
-            printImgList,
-            moodBoards,
-			openClick,
-			t,
-			isTest,
-			userInfo,
-			workspace,
-			scene,
-			openMenu,
-			printCatecoryList,
-        }
-    },
-    computed:{
-       
-    },
-	watch:{
-	},
-    data(){
-        return {
-            swtich_type:'upload',
-            indicator : h(LoadingOutlined, {
-                style: {
-                    fontSize: '2.4rem*1.2)',
-                },
-                spin: true,
-            }),
-            upload:{
-                isPin:0,
-				gender:'',
-                level1Type:'Printboard',
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
-            token:'',
-            uploadUrl:'',
-            store:useStore(),
-            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
-            currentFileNum:0, //当前上传的文件数
-            isUpload:false,
-			printboardList:computed(()=>{
-				return  useStore().state.UploadFilesModule.printboard
-			}),
-			isTextarea:false,
-			isInputFocus:false,
-			isUseGenerate:true
-        }
-    },
-    mounted(){
-		let userInfo:any = getCookie("userInfo")
-        this.userInfo = JSON.parse(userInfo);
-        this.token = getCookie('token') || ''
-		let isTest:any = getCookie('isTest')
-        this.isTest =JSON.parse(isTest)
-        this.uploadUrl = getUploadUrl()
-		this.workspace = computed(()=>{
-			return  this.store?.state?.Workspace?.workspace
-		})
-    },
-     methods:{
-		setSetchboardGenerate(item:any){
-			this.$emit('setPrint',item)
-		},
-		open(num: Number) {
-            this.openClick = num;
-			let material:any = this.$refs.Material
-			if(num == 2){
-				material.init('Printboard')
-			}
-			if(num == 3){
-				this.scene = this.printCatecoryList[0]
-			}
-        },
-        fileUploadChange(data:any){
-            let file = data.file
-			
-			// let res = JSON.parse(data?.xhr?.response);
-			file.id_ = GO.id++
-			file.type_ = {
-				type1:'upload',
-				type2:'Printboard'
-			};
-			file.pin = false;
-			// file.id = res.data.id?res.data.id:""
-            let Cropper:any = this.$refs.Cropper
-            if(this.currentFileNum === 1){
-                var reader = new FileReader();
-				
-                reader.onload = (e:any) => {
-                    let data_new;
-                    if (typeof e.target.result === 'object') {
-                    // 把Array Buffer转化为blob 如果是base64不需要
-                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
-                    } else {
-                    data_new = e.target.result;
-                    }
-                    Cropper.getOptionImg(data_new)
-					
-					
-                };
-                // 转化为base64
-                // reader.readAsDataURL(file)
-                // 转化为blob
-                reader.readAsArrayBuffer(file.originFileObj);
-                this.cropperFileData = file
-                Cropper.changeShowModal(true)
-            }else{
-                this.customRequest(file)
-            }
-        },
-
-        beforeUpload(file:any,fileList:any){
-            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
-            if (!isJpgOrPng) {
-                message.info(this.t('PrintboardUpload.jsContent1'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(this.t('PrintboardUpload.jsContent2'));
-            }
-            if(isJpgOrPng && isLt2M){
-                this.currentFileNum = fileList.length
-            }else{
-                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-            }
-            
-        },
-
-        deleteFile(item:any){
-            // this.fileList.splice(item, 1)
-            // this.store.commit('setPrintboardFile',this.fileList)
-			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
-				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
-				this.store.commit("addGenerateMaterialFils", item);
-			}else{
-				this.fileList = this.store.state.UploadFilesModule.printboardFiles
-				let moodboard 
-				this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
-					if(items.id_ == item.id_){
-						moodboard = index
-						
-					}
-				})
-				this.fileList.splice(moodboard,1)
-				this.store.commit("setPrintboardFile", this.fileList);
-			}
-        },
-		likeFile(item:any,str:string){
-			if(str == 'like'){
-				let data = {
-					generateDetailId:item.id,
-					level1Type:"Printboard",
-					level2Type: item.categoryValue,
-					gender:this.workspace.sexEnum.value,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-					(rv) => {
-						item.like = true
-					}
-				).catch(res=>{
-				});
-			}else{
-				let data = {
-					generateDetailId:item.id,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
-					(rv) => {
-						item.like = false
-					}
-				).catch(res=>{
-				});
-			}
-
-		},
-        
-        customRequest(data:any){
-            let new_data = {
-                ...this.upload,
-                file:data.originFileObj
-            }
-            let fileUid = data.uid
-            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                (rv: any) => {
-                    if (rv) {
-                        for(let file of this.fileList){
-                            if(fileUid === file.uid){
-                                file.status = 'done'
-                                file.imgUrl = rv.url
-                                file.pin = false
-                                file.id = rv.id
-								file.category = this.printCatecoryList[0].name
-								file.categoryValue = this.printCatecoryList[0].value
-                                file.resData = rv
-								
-                            }
-                        }
-                        let fileList = this.fileList.filter((v:any)=> v.status === 'done')
-                        this.store.commit('setPrintboardFile',fileList)
-                    }
-                }
-            ).catch((res)=>{
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(fileUid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-            });
-        },
-
-        closeCropper(type:any){
-            if(this.isUpload){
-                return
-            }
-            if(type == 'error'){
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(this.cropperFileData.uid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-            }
-            let Cropper:any = this.$refs.Cropper
-            Cropper.closeCropper()
-
-        },
-
-        deletUploadFile(){
-            let index = -1
-            this.fileList.forEach((ele:any,index1:any) => {
-                if(this.cropperFileData.uid === ele.uid){
-                    index = index1
-                }
-            });
-            if(index > -1){
-                this.fileList.splice(index, 1)
-            }
-        },
-
-
-        handleCropperSuccess(event:any){
-            let {file, fileData} =event
-            let new_data = {
-                ...this.upload,
-                file:file
-            }
-            if(this.isUpload){
-                return
-            }
-            this.isUpload = true
-            const hide = message.loading('loading', 0);
-            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                (rv: any) => {
-                    for(let file of this.fileList){
-                        if(fileData.uid === file.uid){
-                            file.status = 'done'
-                            file.imgUrl = rv.url
-                            file.id = rv.id
-                            file.resData = rv
-							file.category = this.printCatecoryList[0].name
-							file.categoryValue = this.printCatecoryList[0].value
-                        }
-                    }
-                    let fileList = this.fileList.filter((v:any)=> v.status === 'done')
-					
-                    this.isUpload = false
-                    this.closeCropper('success')
-                    this.cropperFileData = {name:'',uid:''}
-                    // this.store.commit('setPrintboardFile',fileList)
-                    hide()
-                }
-            ).catch(res=>{
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(fileData.uid === ele.uid){
-                        index = index1
-                    }
-                });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
-                }
-                this.cropperFileData = {name:'',uid:''}
-                this.isUpload = false
-                this.closeCropper('error')
-                hide()
-            });
-        },
-
-        recollection(){
-			
-            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
-			let setboard = {
-				generate:[] as any,
-				material:[] as any,
-				moodboard:[] as any,
-			}
-			arr.forEach((v:any)=>{
-				v.pin = v.pin == 1?true:false
-				this.printCatecoryList.forEach((item:any) => {
-					if(v.level2Type == item.value){
-						v.category=item.name
-						v.categoryValue=item.value
-					}
-				});
-				if(v.type_.type1 == 'generate'){
-					setboard.generate.push(v)
-				}else if(v.type_.type1 == 'material'){
-					setboard.material.push(v)
-				}else{
-					setboard.moodboard.push(v)
-				}
-			})
-			this.store.commit("setPrintboardGenerateFiles", setboard.generate);
-			this.store.commit("setPrintboardMaterialFiles", setboard.material);
-			this.store.commit("setPrintboardFile", setboard.moodboard);
-			this.fileList = setboard.moodboard
-            // this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
-            this.store.commit('setPrintboardFile',this.fileList)
-            // this.store.commit('setGeneratePrintFile',this.printImgList)
-
-        },
-
-        confirmSelect(event:any){
-            for(let item of event){
-                let data = {
-                    imgUrl:item.url,
-                    resData:item,
-                    pin:false,
-                    id:item.id,
-                    status:'done',
-                }
-                if(this.fileList.length == 15){
-                    message.warning(this.t('PrintboardUpload.jsContent3'))
-                    break
-                }
-                this.fileList.push(data)
-            }
-            this.store.commit('setPrintboardFile',this.fileList)
-            
-        },
-		scaleImage(index:any){
-			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.isLike = false
-			scaleImage.init(this.printboardList,index)
-		},
-		setSceneList(data:any){
-			if(this.scene.value === data.value) return
-			this.scene = data
-			let generate:any = this.$refs.Generate
-			generate.sketchboardList = []
-			generate.searchPictureName = ''
-			this.openMenu = false
-		},
-		openPrintModel(){
-			if(this.openMenu)return
-			document.addEventListener('click',this.removePrintModel)
-			this.openMenu = true
-		},
-		removePrintModel(){
-			this.openMenu = false
-			document.removeEventListener('click',this.removePrintModel)
-		}
-     }
-
-})
-</script>
-<style lang="less" scoped>
-.printboard_upload_modal{
-    // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
-	height: 100%;
-    display: flex;
-    .printboard_left_upload{
-		display: flex;
-		flex-direction: column;
-        width: 100%;
-        .switch_type_list {
-            display: flex;
-            align-items: center;
-            position: relative;
-			z-index: 11;
-            .switch_type_item {
-                display: flex;
-                align-items: center;
-                // padding: 0 2rem*1.2);
-                height: calc(4rem*1.2);
-                border-radius: calc(0.8rem*1.2);
-                line-height: calc(4rem*1.2);
-                font-size: var(--aida-fsize1-8);
-                // margin-right: 2.2rem*1.2);
-                margin-right: calc(8rem*1.2);
-                color: #000;
-                cursor: pointer;
-                position: relative;
-                text-align: center;
-                transform-origin: left;
-                transform: scale(1);
-                transition: 0.3s all;
-                &.switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.3rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: calc(.6rem*1.2);
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-                &.select_swtich {
-                    color: #000;
-                    // font-weight: 900;
-                    transform: scale(1.15);
-                }
-                &.select_swtich::before {
-                    width: 100%;
-                }
-				
-                .switch_icon {
-                    font-size: calc(1.8rem*1.2);
-                    margin-right: calc(0.8rem*1.2);
-                }
-            }
-			.printMenu{
-				margin-right: 0;
-				margin-top: auto;
-				position: relative;
-				margin-left: 2rem;
-				>div{
-					width: 14rem;
-					font-size: var(--aida-fsize1-6);
-					border: 0;
-					i{
-						transition: all .3s;
-						display: inline-block;
-						margin-left: 1rem;
-					}
-					.forbidden{
-						transform: rotate(180deg);
-					}
-				}
-				ul{
-					width: 14rem;
-				}
-			}
-			.switch_type_item:nth-child(3){
-				margin: 0;
-			}
-        }
-
-        .printboard_body{
-			display: flex;
-			flex-direction: column;
-            // height: calc(100% - 5rem*1.2));
-			flex: 1;
-			padding-top: calc(2.5rem*1.2);
-			height: calc(30rem*1.2);
-			overflow-x: hidden;
-			&.printboard_body::-webkit-scrollbar {
-            display: none;
-        }
-            .upload_img_body{
-                height: calc(100% - 3rem*1.2);
-                overflow-y: auto;
-                margin-bottom: calc(1rem*1.2);
-				&.upload_img_body::-webkit-scrollbar {
-					display: none;
-				}
-            }
-		
-            .upload_file_item{
-                margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
-				// margin: 0 2rem*1.2) 2rem*1.2) 0;
-				display: inline-block;
-				width: 10rem;
-				height: 10rem;
-				border: 1px solid #f5f5f5;
-				vertical-align: top;
-				position: relative;
-				text-align: center;
-				img{
-					width: auto;
-					object-fit: cover;
-					height: 100%;
-					max-width: 100%;
-				}
-
-              .upload_file_img_block{
-				height: 100%;
-			  }
-
-                &.upload_component{
-                }
-				.checked{
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					cursor: pointer;
-					display: none;
-					justify-content: center;
-					align-items: center;
-				}
-				&.modal_img_item:hover .checked{
-				display: flex;
-				}
-				.upload_file_item_content{
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					height: 100%;
-					position: relative;
-					cursor: pointer;
-					.upload_img{
-						display: block;
-						max-height: 100%;
-						width: auto;
-						max-width: 100%;
-						object-fit: cover;
-					}
-					&:hover .delete_like_file_block{
-						display: block;
-					}
-				}
-			}
-        }
-    }
-}
-
-
-</style>
diff --git a/src/component/home/tools/patternMaking3D/three.vue b/src/component/home/tools/patternMaking3D/three.vue
index 623ab769..dfb14c4d 100644
--- a/src/component/home/tools/patternMaking3D/three.vue
+++ b/src/component/home/tools/patternMaking3D/three.vue
@@ -63,7 +63,7 @@ export default defineComponent({
 	},
 	props:{
 	},
-	emits:['saveProject'],
+	emits:['threeSaveProject'],
 	setup(props,{emit}) {
 		const store = useStore();
 		const data = reactive({
@@ -265,8 +265,6 @@ export default defineComponent({
 				texture.anisotropy = 32;  // 提高纹理清晰度
 				data.group?.traverse((child:any) => {
 					if (child.isMesh) {
-						// console.log(child.name)
-						// 5. 创建新材质（根据需求选择材质类型）
 						const textureWidth = texture.image.width;
 						const textureHeight = texture.image.height;
 						const box = new THREE.Box3().setFromObject(child);
@@ -278,9 +276,6 @@ export default defineComponent({
 						if(patternMaking3D.x)data.repeat.x = patternMaking3D.x
 						if(patternMaking3D.y)data.repeat.y = patternMaking3D.y
 						
-						// texture.repeat.set(1, 1); // 纹理重复次数
-						texture.repeat.set(2 - data.repeat.x, 2 - data.repeat.y); // 纹理重复次数
-						
 						const newMaterial = new THREE.MeshStandardMaterial({
 							map: texture,        // 基础颜色贴图
 							roughness: 0.7,      // 表面粗糙度 (0-1)
@@ -338,7 +333,6 @@ export default defineComponent({
 					y:data.repeat.y,
 				}
 				store.commit('setPatternMaking3D',value)
-				
 			})
 		}
 		const addModel = async (url:any)=>{
@@ -421,23 +415,23 @@ export default defineComponent({
 			await setModel(modeUrl)
 			let patternMaking3D = store.state.HomeStoreModule.patternMaking3D
 			if(patternMaking3D.url)await addMaterial({url:patternMaking3D.url})
+			changeRepeat(null)
 			data.load.state = false
 		}
 		const changeRepeat = (e:any)=>{
-			if(data.isLock)data.repeat.x = e
-			if(data.isLock)data.repeat.y = e
+			if(data.isLock && e)data.repeat.x = e
+			if(data.isLock && e)data.repeat.y = e
 			clearTimeout(dataTime.updataRepeat)
 			dataTime.updataRepeat = setTimeout(()=>{
 				data.repeat.x = data.repeat.x == 6 ? 5.999 : data.repeat.x
 				data.repeat.y = data.repeat.y == 6 ? 5.999 : data.repeat.y
-				
 				data.textureLoader.repeat.set(6 - data.repeat.x,6 - data.repeat.y); // 纹理重复次数
 				let value = {
 					x:data.repeat.x,
 					y:data.repeat.y,
 				}
 				store.commit('setPatternMaking3D',value)
-				emit('saveProject')
+				emit('threeSaveProject')
 			},1000)
 		}
 		const setLock = ()=>{
diff --git a/src/component/home/tools/poseTransfer/index.vue b/src/component/home/tools/poseTransfer/index.vue
index 5c82d1d4..e071d94b 100644
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -10,13 +10,23 @@
 							<div class="text">Choose design to transfer</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
-							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
-								<img :src="item.imgUrl || item.url" alt="">	
-								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
-							</div>
-							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
+							<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
 								<img :src="item.imgUrl || item.url" alt="">	
 								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+							</div> -->
+							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
+								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
+									<a-spin size="large" />
+								</div>
+								<img v-show="item.status != 'uploading'" :src="item.imgUrl || item.url" alt="">	
+								<div v-show="item.status != 'uploading'" class="btnBox">
+									<div :class="{active:item.isChecked}">
+										<i class="fi fi-br-check"></i>
+									</div>
+									<div @click.stop="setUploadDelete(item,index)">
+										<i class="fi fi-rr-trash icon_delete"></i>
+									</div>
+								</div>
 							</div>
 							<div class="upload_item item">
 								<div class="upload_file_item">
@@ -43,7 +53,6 @@
 									</a-upload>
 								</div>	
 							</div>
-
 						</div>
 					</div>
 					<div class="poses">
@@ -107,7 +116,7 @@
 	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { defineComponent,computed,ref,inject,nextTick,watch,createVNode,toRefs, reactive, onMounted} from 'vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
@@ -144,8 +153,8 @@ export default defineComponent({
 				projectId:computed(()=>store.state.Workspace.probjects.id)
 			},
 			waitList:[],
-			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
-			noLikeList:[ ],
+			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer.likedList),
+			noLikeList:computed(()=>store.state.HomeStoreModule.poseTransfer.list),
 			isGenerate:false,//判断是否正在进行generate
 			remGenerate:false,
 			removeGenerate:false,
@@ -153,6 +162,16 @@ export default defineComponent({
 			poseList:[],
 			selectPose:null as any,
 		})
+		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
+			data.fileList = store.state.HomeStoreModule.uploadElement
+		})
+		watch(()=>store.state.HomeStoreModule.poseTransfer.list.length,(newVal,oldVal)=>{
+			let list = store.state.HomeStoreModule.poseTransfer.list
+			data.isGenerate = true
+			data.remGenerate = true
+			let taskIdList = list.filter((item:any)=>!item.id)
+			if(taskIdList.length > 0)setGenerate(taskIdList[0].taskId)
+		})
 		let speed = reactive({
 			speedList:[
 				{
@@ -180,6 +199,10 @@ export default defineComponent({
 			scaleVideo:null as any,
 		})
 		const selectImgItem = (item:any,)=>{
+			if(item.isChecked){
+				item.isChecked = !item.isChecked
+				return
+			}
 			data.selectImg = item
 			data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
 			data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
@@ -194,18 +217,17 @@ export default defineComponent({
 			if(data.poseList.length == 0){
 				getPoseList()		
 			}
-			setCloudImg()
-		}
-		const setCloudImg = ()=>{
-			let arr = store.state.UploadFilesModule.cloudList
-			let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
-			list.forEach((item:any)=>{
-				item.url = item.firstFrameUrl	
-				data.noLikeList.unshift(item)
-			})
-
-			store.commit('clearCloudList','poseTransfer')
+			// setCloudImg()
 		}
+		// const setCloudImg = ()=>{
+		// 	let arr = store.state.UploadFilesModule.cloudList
+		// 	let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
+		// 	list.forEach((item:any)=>{
+		// 		item.url = item.firstFrameUrl	
+		// 		data.noLikeList.unshift(item)
+		// 	})
+		// 	store.commit('clearCloudList','poseTransfer')
+		// }
 		const gifPlay = (e:any,item:any)=>{
 			e.target.src = item.gif//使用gif图片
 		}
@@ -234,9 +256,8 @@ export default defineComponent({
 			if(data.isGenerate)return
 
 			data.isGenerate = true
-			data.remGenerateTime = setTimeout(()=>{
-				data.remGenerate = true
-			},10000)
+			// data.remGenerateTime = setTimeout(()=>{
+			// },10000)
 			let value = {
 				poseId:data.selectPose,
 				projectId:store.state.Workspace.probjects.id,
@@ -244,6 +265,7 @@ export default defineComponent({
 				modelName:speed.speedData.value,
 			}
 			Https.axiosPost(Https.httpUrls.poseTransform,value).then((rv)=>{
+				data.remGenerate = true
 				data.noLikeList.unshift({taskId:rv})
 				setGenerate(rv)
 			}).catch((res:any)=>{
@@ -254,6 +276,7 @@ export default defineComponent({
 		}
 		const setGenerate = (dataList:any)=>{
 			let list:any = dataList
+			data.waitList = list
 			let dataNum = dataList.length
 			let state = true
 			data.generateTime = setInterval(()=>{
@@ -271,30 +294,24 @@ export default defineComponent({
 									element.url = element.firstFrameUrl
 									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
 									data.noLikeList[index] = element
-									console.log(list)
 									list = ''
 									// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
+									store.dispatch('getCredits')
 								}else if(element.status == 'Fail'){
-									
+									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
+									data.noLikeList.splice(index,1)
+									clearInterval(data.generateTime)
+									clearInterval(data.remGenerateTime)
+									data.remGenerate = false
+									data.isGenerate = false
+									store.dispatch('getCredits')
 								}
 							});
-							data.waitList = list
-							if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
-								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
-									message.info(t('Generate.effectPoor'));
-								}else{
-								}
-								
-								// this.store.dispatch('getCredits')
-								clearInterval(data.generateTime)
-								clearInterval(data.remGenerateTime)
-								data.remGenerate = false
-								data.isGenerate = false
-							}
 						}
 					}
 				).catch(res=>{
-					data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
+					let index = data.noLikeList.findIndex((obj:any) => obj.taskId === list);
+					data.noLikeList.splice(index,1)
 					clearInterval(data.generateTime)
 					clearInterval(data.remGenerateTime)
 					data.isGenerate = false
@@ -417,7 +434,7 @@ export default defineComponent({
 				(rv) => {
 					if(str == 'like'){
 						let value = {
-							list:[item],
+							likedList:[item],
 							str:'add',
 							index:-1,
 						}
@@ -425,7 +442,7 @@ export default defineComponent({
 						data.noLikeList.splice(index,1)
 					}else{
 						let value = {
-							list:[item],
+							likedList:[item],
 							str:'splice',
 							index:index,
 						}
@@ -455,6 +472,19 @@ export default defineComponent({
 		}
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
+			speed.speedState = false
+		}
+		const setUploadDelete = (item:any,index:any)=>{
+			let value = {
+				id:item.id
+			}
+			Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
+				let storeData = {
+					str:'delete',
+					index,
+				}
+				store.commit('setUploadElement',storeData)
+			})
 		}
 		return{
 			...toRefs(speed),
@@ -476,6 +506,7 @@ export default defineComponent({
 			selectPose,
 			openSpeed,
 			setSpeed,
+			setUploadDelete,
 		}
 	},
 	directives:{
@@ -512,6 +543,7 @@ export default defineComponent({
 			flex-direction: column;
 			align-items: center;
 			padding-right: 3.8rem;
+			width: 39rem;
 			&.active{
 				width: 0;
 				overflow: hidden;
@@ -562,14 +594,13 @@ export default defineComponent({
 			}
 		}
 		> .configuratioBox > .configuratio{
-			width: 31.8rem;
+			width: 100%;
 			padding-bottom: 1rem;
 			> .title{
 				// font-size: 2.6rem;
 			}
 			> .content{
 				// margin-top: 4rem;
-				margin-top: 1.8rem;
 				> .selectImg,> .poses{
 					display: flex;
 					flex-direction: column;
@@ -602,6 +633,40 @@ export default defineComponent({
 								top: 2rem;
 								right: 2rem;
 							}
+							> .btnBox{
+								position: absolute;
+								right: 1rem;
+								top: 1rem;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								justify-content: center;
+								> div{
+									width: 2rem;
+									height: 2rem;
+									display: flex;
+									border: 1px solid;
+									align-items: center;
+									border-radius: .5rem;
+									justify-content: center;
+									cursor: pointer;
+									margin-bottom: 1rem;
+									> i{
+										display: flex;
+									}
+									>.fi-br-check{
+										color: #fff;
+										display: none;
+									}
+									&.active{
+										background: #000;
+										> i{
+											display: flex;
+											color: #fff;
+										}
+									}
+								}
+							}
 							> img{
 								width: 100%;
 								object-fit: contain;
@@ -627,8 +692,6 @@ export default defineComponent({
 			}
 		}
 		> .likeBox ,> .noLikeBox{
-
-			margin-top: 1.8rem;
 			flex: 1;
 			position: relative;
 			> .element{
diff --git a/src/component/home/tools/toProduct/index.vue b/src/component/home/tools/toProduct/index.vue
index 87754291..1976b0b1 100644
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -10,56 +10,57 @@
 					<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
 						<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
 					</div> -->
-					<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
-					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
-						<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
-							<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
-							<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+					<div class="selectImg">
+						<div class="head">
+							<div class="text">{{$t('ProductImg.SelectCollection')}}</div>
 						</div>
-						<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList[productimgMenu.value]" :key="file">
-							<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
-								<a-spin
-									:indicator="indicator"
-									tip="Uploading..."
-								/>
-							</div>
-							<div
-								class="imgBox"
-								v-show="file?.status === 'done'"
-
-							>
-								<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
-								<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
-							</div>
-						</div>
-						<div class="upload_file_item upload_component">
-						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
-							<a-upload
-								:action="uploadUrl + '/api/history/toProductImageElementUpload'"
-								list-type="picture-card"
-								:capture="null"
-								:data="{
-									...upload,
-								}"
-								:headers="{ Authorization: token }"
-								:before-upload="beforeUpload"
-								v-model:file-list="fileList[productimgMenu.value]"
-								:multiple="true"
-								:maxCount="8"
-								accept=".jpg,.png,.jpeg,.bmp"
-								@change="(file) => fileUploadChange(file)"
-							>
-								<div
-									class="upload_tip_block"
-								>
-									<i class="fi fi-br-upload"></i>
-									<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+						<div class="imgBox" v-mousewheel>
+							<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
+								<img :src="item.imgUrl || item.url" alt="">	
+								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+							</div> -->
+							<div class="item" :class="[item?.isChecked?'active':'']" v-for="item,index in fileList[productimgMenu.value]" @click="setGenerate(item)">
+								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
+									<a-spin size="large" />
 								</div>
-							</a-upload>
+								<img v-show="item.status != 'uploading'" :src="item.imgUrl || item.url" alt="">	
+								<div v-show="item.status != 'uploading'" class="btnBox">
+									<div :class="{active:item.isChecked}">
+										<i class="fi fi-br-check"></i>
+									</div>
+									<div @click.stop="setUploadDelete(item,index)">
+										<i class="fi fi-rr-trash icon_delete"></i>
+									</div>
+								</div>
+								<!-- <a-checkbox v-model:checked="item.isChecked"></a-checkbox> -->
+							</div>
+							<div class="upload_item item">
+								<div class="upload_file_item">
+									<a-upload
+										:action="uploadUrl + '/api/history/toProductImageElementUpload'"
+										list-type="picture-card"
+										:capture="null"
+										:data="{
+											...upload,
+										}"
+										:headers="{ Authorization: token }"
+										:before-upload="beforeUpload"
+										v-model:file-list="fileList[productimgMenu.value]"
+										:multiple="true"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => fileUploadChange(file)"
+									>
+										<div
+											class="upload_tip_block"
+										>
+											<i class="fi fi-br-upload"></i>
+											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+										</div>
+									</a-upload>
+								</div>	
+							</div>
 						</div>
-
 					</div>
-					
 					<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Similarity')}}</span>
 					</div>
@@ -74,15 +75,21 @@
 						<input type="number" readonly v-model="similarity">
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-						<span>{{$t('ProductImg.RelightDirection')}}</span>
+						<span>Selection Function</span>
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
+						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
+					</div>
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
+						<span>{{$t('ProductImg.RelightDirection')}}</span>
+					</div>
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
 						<a-select  style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
 					</div>
-					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
 						<span>{{$t('ProductImg.Highlight')}}</span>
 					</div>
-					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
+					<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
 						<a-slider class="system_silder"
 							v-model:value="brightenValue"
 							:tooltipVisible="false"
@@ -114,8 +121,12 @@
 					</div>
 					<div class="productImg_content_item_generate_btn input_border">
 						<div class="generage_btn_box ">
-							<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
-								{{ $t('Generate.Generate') }}
+							<div v-show="!isProductimg" class="generage_btn started_btn">
+								<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;"  @click="getPrductimg"></i>
+								<div v-show="productimgMenu.value != 'Relight'" class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
+								<div class="content" v-show="speedState">
+									<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+								</div>
 							</div>
 							<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
 								<i class="fi fi-br-loading"></i>
@@ -135,32 +146,8 @@
 								{{ $t('ProductImg.SelectedDesign') }}
 							</span>
 						</div>
-						<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
-							<!-- <div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
-								<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
-							</div>
-
-							<div class="productImg_right_item_imgBox" v-else>
-								<img :src="item.url" alt="">
-								<div class="productImg_right_item_iconRight">
-									<div class="productImg_right_item_like"  @click.stop="likeFile(item,'like',index)">
-										<i class="fi fi-rr-heart"></i>
-									</div>
-								</div>
-								<div class="productImg_right_item_iconLeft" >
-									<div class="productImg_right_item_scale" @click.stop="setScaleImage(generateList,index,true)">
-										<i class="fi fi-bs-expand-arrows-alt"></i>
-									</div>
-									<div v-show="item.resultType != 'Relight'" class="productImg_right_item_men" @click.stop="setMenuShow(item)">
-										<i class="fi fi-rr-circle-ellipsis"></i>
-										<ul v-show="item.menuShow">
-											<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
-										</ul>
-									</div>
-								</div>
-							</div> -->
 						<div class="content">
-							<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
+							<generalDrag ref="generalDragLeft" :type="productimgMenu.value" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
 						</div>
 						<!-- </div> -->
 						
@@ -180,30 +167,8 @@
 							</span>
 						</div>
 						<div class="content">
-							<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
+							<generalDrag ref="generalDragRight" :type="productimgMenu.value" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
 						</div>
-						<!-- <div class="mark_loading" v-show="isShowMark">
-							<a-spin size="large" />
-						</div> -->
-						<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
-							<img :src="item.url" alt="">
-							<div class="productImg_right_item_iconRight">
-								<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
-									<i class="fi fi-sr-heart"></i>
-								</div>
-							</div>
-							<div class="productImg_right_item_iconLeft">
-								<div class="productImg_right_item_scale" @click.stop="setScaleImage(likeList[productimgMenu.value],index,false)">
-									<i class="fi fi-bs-expand-arrows-alt"></i>
-								</div>
-								<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" :title="$t('ProductImg.moreTitle')" @click.stop="setMenuShow(item)">
-									<i class="fi fi-rr-circle-ellipsis"></i>
-									<ul v-show="item.menuShow">
-										<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
-									</ul>
-								</div>
-							</div>
-						</div> -->
 					</div>
 				</div>
 			</div>
@@ -223,7 +188,7 @@
 
 <script lang="ts">
 import { LoadingOutlined } from "@ant-design/icons-vue";
-import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, inject} from "vue";
+import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, inject, onMounted} from "vue";
 import { Https } from "@/tool/https";
 import { getCookie,setCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
@@ -238,7 +203,7 @@ import generalMenu from "@/component/HomePage/generalMenu.vue";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
 import generalDrag from '@/component/modules/generalDrag.vue';
 import { List } from "echarts";
-
+import { useRouter,useRoute } from 'vue-router'
 
 export default defineComponent({
 	components:{
@@ -252,10 +217,13 @@ export default defineComponent({
 			return store.state.UserHabit.userDetail
 		})
 		const {t} = useI18n()
-		const upload:any = ref({})
+		const upload:any = ref({
+			projectId:computed(()=>store.state.Workspace.probjects.id)
+		})
 		let driver__:any = computed(()=>{
 			return store.state.Guide.guide
 		})
+		const route = useRoute()
 		const createProbject:any = inject('createProbject')
 		let productImgData:any = reactive({
 			isShowMark:false,
@@ -279,7 +247,43 @@ export default defineComponent({
 			button:{
 				left:false,
 				right:false,
-			}
+			},
+		})
+		let speed = reactive({
+			speedList:[
+				{
+					title:'Generate with high quality',
+					label:'High',
+					relightLabel:'Relight',
+					value:'',
+				},{
+					title:'',
+					label:'FLUX',
+					relightLabel:'Edit',
+					value:'flux',
+				},
+			],
+			speedState:false,
+			speedData:{
+				title:'Generate with high quality',
+				relightLabel:'Relight',
+				label:'High',
+				value:'',
+			},
+		})
+		//watch立即执行一次
+		// watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
+		// 	createProbject.generateList = []
+		// },{immediate: true })
+		watch(() => route.query.id,
+			(query:any, oldQuery:any) => {
+				if(oldQuery && query != oldQuery){
+					productImgData.generateList = []
+				}
+			},
+		);
+		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
+			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
 		})
 		const productImgDom = reactive({
 			generalDragLeft:null as any,
@@ -326,13 +330,10 @@ export default defineComponent({
 			}else if(props.productimgMenu.value == 'Relight'){
 				selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
 			}
-			upload.value = {
-				projectId:productImgData.selectObject.id
-			}
+			
 			userlikeGroupId = selectDesignList.value.userlikeGroupId
 			// getLikeProductImage(selectDesignList.value.userlikeGroupId)
 			productImgDom.generalDragLeft.setItemPosition()
-
 			setCloudImg()
 		}
 		const setCloudImg = ()=>{
@@ -430,6 +431,18 @@ export default defineComponent({
 		let setGenerate = (item:any)=>{
 			item.isChecked = !item.isChecked
 		}
+		const setUploadDelete = (item:any,index:any)=>{
+			let value = {
+				id:item.id
+			}
+			Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
+				let storeData = {
+					str:'delete',
+					index,
+				}
+				store.commit('setUploadElement',storeData)
+			})
+		}
 		let likeFile = (item:any,str:any,index:any) =>{
 			let url
 			let data = {
@@ -492,7 +505,7 @@ export default defineComponent({
 				productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
 					if(item.isChecked){
 						obj.elementId = item.id
-						obj.elementType = item.type
+						obj.elementType = item.type || 'ProductElement'
 						selectArr.push(JSON.parse(JSON.stringify(obj)))
 					}
 				})
@@ -521,14 +534,15 @@ export default defineComponent({
 				toProductImageVOList:selectArr,
 				// userLikeGroupId:upload.value.userlikeGroupId,
 				projectId:productImgData.selectObject.id,
+				modelName:speed.speedData.value,
 				direction:RelightDirection.value,
 				brightenValue:productImgData.brightenValue,
 				imageStrength:(100 - imageStrength)/100,
 			}
 			productImgData.isProductimg = true
-			remPrductimgTime = setTimeout(()=>{
-				productImgData.remProductimg = true
-			},10000)
+			// remPrductimgTime = setTimeout(()=>{
+			// 	productImgData.remProductimg = true
+			// },10000)
 			let url = Https.httpUrls.toProduct
 			if(props.productimgMenu.value == 'Relight'){
 				url = Https.httpUrls.relight
@@ -536,12 +550,12 @@ export default defineComponent({
 			productImgData.isShowMark = true
 			Https.axiosPost(url, data).then(
                 (rv) => {
+					productImgData.remProductimg = true
 					productImgData.isShowMark = false
 					let arr:any = []
 					rv.forEach((item:any)=>{
 					  arr.push(item.taskId)  
 					})
-					
 					productImgData.generateList.unshift(...rv)
 					setPrductimg(arr)
                 }
@@ -699,6 +713,8 @@ export default defineComponent({
 		const setLikeZoom = (item:any,str:string,index:number,list:List) =>{
 			if(str == 'zoom'){
 				setScaleImage(list,index,true)
+			}else if(str == 'copy'){
+				setCopy(item)
 			}else{
 				likeFile(item,str,index)
 			}
@@ -707,13 +723,12 @@ export default defineComponent({
 			productImgData.likeList[props.productimgMenu.value].forEach((item:any,index:number)=>{
 				if(item.id == id){
 					let selectStr = ''
-					str == 'zoom'?selectStr = 'zoom':selectStr ='noLike'
-					setLikeZoom(item,selectStr,index,productImgData.likeList[props.productimgMenu.value])
+					str == 'like'?(str = 'noLike'):str
+					setLikeZoom(item,str,index,productImgData.likeList[props.productimgMenu.value])
 				}
 			})
 		}
 		const generateSetBtn = (id:any,str:string)=>{
-			console.log(str)
 			if(str == 'delete'){
 				productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
 			}else{
@@ -721,12 +736,21 @@ export default defineComponent({
 					if(item.id == id){
 						let selectStr = ''
 						str == 'zoom'?selectStr = 'zoom':selectStr ='like'
-						setLikeZoom(item,selectStr,index,productImgData.generateList)
+						setLikeZoom(item,str,index,productImgData.generateList)
 					}
 				})
 			}
 
 		}
+		const setCopy = (item:any)=>{
+			let value = {
+				id:item.id
+			}
+			Https.axiosPost(Https.httpUrls.convertRelightElement,{},{params:value}).then((rv)=>{
+				if(!productImgData.fileList[props.productimgMenu.value]?.length)productImgData.fileList[props.productimgMenu.value] = []
+				productImgData.fileList[props.productimgMenu.value].unshift(rv)
+			})
+		}
 		const setItemPosition = ()=>{
 			productImgDom.generalDragLeft.setItemPosition()
 			productImgDom.generalDragRight.setItemPosition()
@@ -749,94 +773,109 @@ export default defineComponent({
 			textarea.style.height = newHeight + 'px';
 			textarea.scrollTop = scrollTop;
 		}
+		const openSpeed = ()=>{
+			speed.speedState = !speed.speedState
+			if(speed.speedState){
+				document.addEventListener('click',openSpeed)
+			}else{
+				document.removeEventListener('click',openSpeed)
+			}
+		}
+		const setSpeed = (item:any)=>{
+			speed.speedData = item
+			speed.speedState = false
+		}
         return {
 			upload,
 			driver__,
 			openSetData,
 			...toRefs(productImgData),
 			...toRefs(productImgDom),
+			...toRefs(speed),
 			productimgMenuList,
+			RelightDirectionList,
+			RelightDirection,
 
-		RelightDirectionList,
-		RelightDirection,
-
-		selectList,
-		setproduct,
-		fileUploadChange,
-		beforeUpload,
-		deleteFile,
-		setGenerate,
-		likeFile,
-		getPrductimg,
-		removeProductimg,
-		scaleImage,
-		setScaleImage,
-		setMenu,
-		setMenuShow,
-		setSimilarity,
-		setTask,
-		selectSetBtn,
-		generateSetBtn,
-		setItemPosition,
-		setSize,
-		ifMaximumLength,
-	};
-},
-directives:{
-	mousewheel:{
-			mounted (el) {
-				el.addEventListener('wheel',(e:WheelEvent)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},{ passive: true })
-			}
-		},
-},
-data() {
-	return {
-		indicator: h(LoadingOutlined, {
-			style: {
-				fontSize: "2.4rem",
+			selectList,
+			setproduct,
+			fileUploadChange,
+			beforeUpload,
+			deleteFile,
+			setGenerate,
+			setUploadDelete,
+			likeFile,
+			getPrductimg,
+			removeProductimg,
+			scaleImage,
+			setScaleImage,
+			setMenu,
+			setMenuShow,
+			setSimilarity,
+			setTask,
+			selectSetBtn,
+			generateSetBtn,
+			setItemPosition,
+			setSize,
+			ifMaximumLength,
+			openSpeed,
+			setSpeed,
+		};
+	},
+	directives:{
+		mousewheel:{
+				mounted (el) {
+					el.addEventListener('wheel',(e:WheelEvent)=>{
+						let num = 0
+						if(e.deltaY > 0){
+							num = 25
+						}else{
+							num = -25
+						}
+						el.scrollBy(num, 0);
+					},{ passive: true })
+				}
 			},
-			spin: true,
-		}),
-		// moodTemplateId: "", //模板id
-		token: "",
-		uploadUrl: "",
-		
-	};
-},
-mounted() {
-	this.token = getCookie("token") || "";
-	this.uploadUrl = getUploadUrl();
-},
-methods: {
-	// init(list:any,index:any,dialogueIndex:any){
-		
-	// },
-	// cancelDsign(){
-	// 	this.productImg = false
-	// 	// this.productImgList = []
-	// 	// this.productImgIndex = 0
-	// },
-	// download(){
-	// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
-	// },
-	// setScaleImageIndex(index:any){
-	// 	// this.productImgIndex = index
-	// 	// console.log(this.productImgIndex);
-		
-	// },
-	// LikeFile(item:any,str:string){
-	// 	let parent:any = this.$parent
-	// 	parent.likeFile(item,str)
-	// },
-},
+	},
+	data() {
+		return {
+			indicator: h(LoadingOutlined, {
+				style: {
+					fontSize: "2.4rem",
+				},
+				spin: true,
+			}),
+			// moodTemplateId: "", //模板id
+			token: "",
+			uploadUrl: "",
+			
+		};
+	},
+	mounted() {
+		this.token = getCookie("token") || "";
+		this.uploadUrl = getUploadUrl();
+	},
+	methods: {
+		// init(list:any,index:any,dialogueIndex:any){
+			
+		// },
+		// cancelDsign(){
+		// 	this.productImg = false
+		// 	// this.productImgList = []
+		// 	// this.productImgIndex = 0
+		// },
+		// download(){
+		// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
+		// },
+		// setScaleImageIndex(index:any){
+		// 	// this.productImgIndex = index
+		// 	// console.log(this.productImgIndex);
+			
+		// },
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+	},
 });
 </script>
 
@@ -890,59 +929,145 @@ methods: {
 .productImg_content_item_intro{
 	font-size: 1.4rem;
 }
-.productImg_content_item_imgBox{
-	display: flex;
-	overflow-x: auto;
-	width: auto;
-	margin-bottom: 2rem;
-	align-items: center;
-	flex-wrap: nowrap;
-	.content_item_imgBox_itemImg{
-		display: flex;
-		margin-right: 1rem;
-		position: relative;
-		height: 36rem;
-		max-height: 100%;
-		position: relative;
-		img{
-			height: 100%;
-			width: 100%;
-			cursor: pointer;
-			object-fit: contain;
-			opacity: .5;
-			&.active{
-				opacity: 1;
-			}
-		}
-		.ant-checkbox-wrapper{
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-		&.content_item_imgBox_itemImg:hover{
-			.content_item_imgBox_itemImg_delete{
-				display: block;
-				cursor: pointer;
-			}
-		}
-		.content_item_imgBox_itemImg_delete{
-			display: none;	
-			width: 100%;
-			height: 100%;
-			background: rgba(0,0,0,.2);
-			position: absolute;
-			i{
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%,-50%);
-				color: #fff;
-			}
-		}
+// .productImg_content_item_imgBox{
+// 	display: flex;
+// 	overflow-x: auto;
+// 	width: auto;
+// 	margin-bottom: 2rem;
+// 	align-items: center;
+// 	flex-wrap: nowrap;
+// 	.content_item_imgBox_itemImg{
+// 		display: flex;
+// 		margin-right: 1rem;
+// 		position: relative;
+// 		height: 36rem;
+// 		max-height: 100%;
+// 		position: relative;
+// 		img{
+// 			height: 100%;
+// 			width: 100%;
+// 			cursor: pointer;
+// 			object-fit: contain;
+// 			opacity: .5;
+// 			&.active{
+// 				opacity: 1;
+// 			}
+// 		}
+// 		.ant-checkbox-wrapper{
+// 			position: absolute;
+// 			right: 0;
+// 			top: 0;
+// 		}
+// 		&.content_item_imgBox_itemImg:hover{
+// 			.content_item_imgBox_itemImg_delete{
+// 				display: block;
+// 				cursor: pointer;
+// 			}
+// 		}
+// 		.content_item_imgBox_itemImg_delete{
+// 			display: none;	
+// 			width: 100%;
+// 			height: 100%;
+// 			background: rgba(0,0,0,.2);
+// 			position: absolute;
+// 			i{
+// 				position: absolute;
+// 				left: 50%;
+// 				top: 50%;
+// 				transform: translate(-50%,-50%);
+// 				color: #fff;
+// 			}
+// 		}
 
+// 	}
+// 	.content_item_imgBox_itemImg:last-child{
+// 		margin-right: 0;
+// 	}
+// }
+.selectImg{
+	display: flex;
+	flex-direction: column;
+	> .imgBox{
+		flex: 1;
+		max-height: 45rem;
+		margin-top: 2rem;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		width: 100%;
+		overflow: hidden;
+		overflow-x: auto;
+		// &.active
+		
+		> .item{
+			margin-right: 1rem;
+			width: calc(100% / 2 - .5rem);
+			cursor: pointer;
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+			flex-shrink: 0;
+			height: 25rem;
+			position: relative;
+			// &.active{
+			// 	border: 2px solid;
+			// }
+			:deep(.ant-checkbox-wrapper){
+				position: absolute;
+				top: 2rem;
+				right: 2rem;
+			}
+			> .btnBox{
+				position: absolute;
+				right: 1rem;
+				top: 1rem;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				> div{
+					width: 2rem;
+					height: 2rem;
+					display: flex;
+					border: 1px solid;
+					align-items: center;
+					border-radius: .5rem;
+					justify-content: center;
+					cursor: pointer;
+					margin-bottom: 1rem;
+					> i{
+						display: flex;
+					}
+					>.fi-br-check{
+						color: #fff;
+						display: none;
+					}
+					&.active{
+						background: #000;
+						> i{
+							display: flex;
+							color: #fff;
+						}
+					}
+				}
+			}
+			> img{
+				width: 100%;
+				object-fit: contain;
+			}
+		}
+		> .upload_item{
+			border: none;
+		}
 	}
-	.content_item_imgBox_itemImg:last-child{
-		margin-right: 0;
+	> .head{
+		color: #000;
+		font-weight: 600;
+		> .text{
+			display: inline-block;
+			font-size: 1.6rem;
+		}
 	}
 }
 .productImg_left,.productImg_right{
diff --git a/src/component/modules/generalDrag.vue b/src/component/modules/generalDrag.vue
index e166b329..7772a9bf 100644
--- a/src/component/modules/generalDrag.vue
+++ b/src/component/modules/generalDrag.vue
@@ -27,6 +27,9 @@
 				<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
 					<i class="fi fi-bs-expand-arrows-alt"></i>
 				</div>
+				<div class="copy" v-if="type == 'Relight' || type == 'ToProductImage' || type == 'PoseTransfer'" @click.stop="()=>$emit('setBtn',item.id,'copy')">
+					<i class="fi fi-sr-copy-alt"></i>
+				</div>
 				<div class="delete" v-if="item.url && isDelete" @click.stop="()=>$emit('setBtn',item.id,'delete')">
 					<i class="fi fi-rr-trash icon_delete"></i>
 				</div>
@@ -51,6 +54,7 @@ export default defineComponent({
 		showMark:{type:Boolean,default:false},
 		isLike:{type:Boolean,default:false},
 		isDelete:{type:Boolean,default:true},
+		type:{type:String,default:''},
 	},
 	emits:['setBtn','setSort'],
 	setup(props,{emit}) {
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index f03064da..6a8f638c 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -458,6 +458,7 @@ export default {
 		Merge:'合成',
 		maximumLength:'输入的内容超过允许输入的最大长度',
 		effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
+		everyTimeEffectPoor:'您有一张图片生成图片质量低于标准，请考虑调整您的提示词并再次尝试。',
 		Model:'模型',
 		uploadTitle:'上传参考图',
 		uploadproduct:'上传产品图',
@@ -482,6 +483,7 @@ export default {
 		Printboard:'印花板',
 		Colorboard:'颜色板',
 		Sketchboard:'线稿板块',
+		Mannquinboard:'模特板块',
 		MoodCollection:'为您的系列选择情绪版',
 		PrinCollection:'为您的系列选择印花版',
 		ColorCollection:'为您的系列选择颜色版',
@@ -505,7 +507,7 @@ export default {
 		CurrentElements:'当前元素',
 	},
 	DesignDetailAlter:{
-		current:'项目',
+		current:'当前使用',
 		Upload:'上传',
 		Library:'收藏',
 		inputContent1:'输入名字进行搜索',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index d328fb80..6033ae36 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -458,6 +458,7 @@ export default {
 		Merge:'Merge',
 		maximumLength:'The entered content exceeds the maximum length.',
 		effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
+		everyTimeEffectPoor:'One generated image falls below quality thresholds. Modify your text prompt and regenerate.',
 		Model:'Model',
 		uploadTitle:'Upload reference image',
 		uploadproduct:'Upload product picture',
@@ -482,6 +483,7 @@ export default {
 		Printboard:'Printboard',
 		Colorboard:'Colorboard',
 		Sketchboard:'Sketchboard',
+		Mannquinboard:'Mannquinboard',
 		MoodCollection:'select moodboard for your collection',
 		PrinCollection:'select printboard for your collection',
 		ColorCollection:'select colors for your collection',
@@ -505,7 +507,7 @@ export default {
 		CurrentElements:'Current Elements',
 	},
 	DesignDetailAlter:{
-		current:'Project',
+		current:'Selected',
 		Upload:'Upload',
 		Library:'Library',
 		inputContent1:'Please input',
diff --git a/src/store/homeStore/homeStore.ts b/src/store/homeStore/homeStore.ts
index 338d6376..1ba15f08 100644
--- a/src/store/homeStore/homeStore.ts
+++ b/src/store/homeStore/homeStore.ts
@@ -14,7 +14,7 @@ interface DesignDetail{
 
 	toProductImageList:any,// 产品图片
 	relightList:any,// 灯光列表
-
+	uploadElement:any,// 上传元素  toproduct、relight、pose
 	poseTransfer:any,// 姿态转换
 	deReconstruction:any,// 拼贴
 	patternMaking3D:any,//3d
@@ -34,7 +34,11 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 		showSketchList:[],
 		toProductImageList:[],
 		relightList:[],
-		poseTransfer:[],
+		uploadElement:[],
+		poseTransfer:{
+			list:[],
+			likedList:[],
+		},
 		deReconstruction:[{
 			isLike:false,
 			url:'',
@@ -43,6 +47,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 			categoryShow:false
 		}],
 		patternMaking3D:{
+			collectionElementId:null,
 			threeDSimpleId:null,
 			printMinioUrl:null,
 			url:'',
@@ -73,14 +78,33 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 	            state.relightList.splice(data.index,1)
 			}
         },
-		setPoseTransfer(state,data){
-			data.list.forEach((item:any) => {
-				item.url = item.firstFrameUrl
-			});
+		setUploadElement(state,data){
 			if(data.str == 'add'){
-	            state.poseTransfer.unshift(...data.list)
+	            state.uploadElement.unshift(...data.list)
 			}else{
-	            state.poseTransfer.splice(data.index,1)
+	            state.uploadElement.splice(data.index,1)
+			}
+		},
+		setPoseTransfer(state,data){
+			if(data.str == 'add'){
+				if(data.list){
+					data.list.forEach((item:any) => {
+						item.url = item.firstFrameUrl
+					});
+					state.poseTransfer.list.unshift(...data.list)
+				}
+				if(data.likedList){
+					data.likedList.forEach((item:any) => {
+						item.url = item.firstFrameUrl
+					});
+					state.poseTransfer.likedList.unshift(...data.likedList)
+				}
+			}else{
+				if(data.list){
+					state.poseTransfer.list.splice(data.index,1)
+				}else if(data.likedList){
+					state.poseTransfer.likedList.splice(data.index,1)
+				}
 			}
         },
 		setDeReconstruction(state,data){
@@ -165,10 +189,15 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
             state.designCollectionId = ''
 			state.deleteDesignCollectionList = []
 			state.relightList = []
+			state.uploadElement = []
 			state.toProductImageList = []
-			state.poseTransfer = []
+			state.poseTransfer = {
+				list:[],
+				likedList:[],
+			}
 			state.deReconstruction = null
 			state.patternMaking3D = {
+				collectionElementId:null,
 				threeDSimpleId:null,
 				printMinioUrl:null,
 				url:null,
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index 8bdb1bb0..521961c8 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -283,7 +283,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 			}
 		},
         setAllBoardDataChoose(state,data){
-            state.allBoardData = data
+			for (const key in data) {
+				if((data[key]?.length > 0 || Object.keys(data[key]).length>0) && data[key]){
+					state.allBoardData[key] = data[key]	
+				}
+			}
 			if(Object.keys(data).length === 0){
 				state.chooseIsDesign.value = true
 			}
@@ -334,6 +338,13 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 		setCloudList(state,{str,list}){
 			state.cloudList[str] = list
 		},
+		clearAllCloudList(state){
+			state.cloudList = {
+				toProduct:null,
+				relight:null,
+				poseTransfer:null,
+			}
+		},
 		clearCloudList(state,str){
 			state.cloudList[str] = ''
 		}
diff --git a/src/store/workspace/workspace.ts b/src/store/workspace/workspace.ts
index b5a0251d..4004775d 100644
--- a/src/store/workspace/workspace.ts
+++ b/src/store/workspace/workspace.ts
@@ -72,7 +72,6 @@ const Workspace : Module<DesignDetail,RootState> = {
 			}
 		},
 		createProbject(state){
-			console.log(123)
 			state.probjects = {
 				name:'',
 				id:'',
diff --git a/src/tool/https.js b/src/tool/https.js
index b94538d9..55039c25 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -298,7 +298,7 @@ export const Https = {
 
         elementUpload:`/api/element/upload`,//上传图片
         imageSegmentation:`/api/element/imageSegmentation`,//分割衣服
-		
+		convertRelightElement:`/api/history/convertRelightElement`,//toproduct复制到上传图片位置
 
         // oldHis:`/oldHis/history/queryUserGroup`,//上传图片
 		sketchBoardsBoundingBox:`/api/design/sketchBoardsBoundingBox`,//裁剪sketch图片
@@ -328,6 +328,8 @@ export const Https = {
 		//云生成
 		designCloud:`/api/design/designCloud`,//创建云生成
 		cloudPage:`/api/design/cloudPage`,//创建云生成
+		cloudTaskDelete:`/api/design/cloudTaskDelete`,//删除云生成
+		cloudTaskNameUpdate:`/api/design/cloudTaskNameUpdate`,//修改云生成名字
 		getDesignCloudResult:`/api/design/getDesignCloudResult`,//查询这条云生成记录的所有内容
 
 		//企业版教育版管理员页面
@@ -343,6 +345,7 @@ export const Https = {
 		getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
 		getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
 		getActiveUserFunc:`/api/inquiry/getActiveUserFunc`,//获取各模块功能
+		toProductImageElementDelete:`/api/history/toProductImageElementDelete`,//删除指定模块上传的内容
 		recentActiveUser:`/api/inquiry/recentActiveUser`,//获取近期活跃用户
 		recentActiveUserChart:`/api/inquiry/recentActiveUserChart`,//获取近期活跃用户图表数据
 		recentNewUser:`/api/inquiry/recentNewUser`,//获取近期新增用户
diff --git a/src/tool/listData.js b/src/tool/listData.js
index a891e682..3e2f636d 100644
--- a/src/tool/listData.js
+++ b/src/tool/listData.js
@@ -346,8 +346,14 @@ const openTypeList = (t)=>{
 			icon:'fi-br-time-past',
 			label:'History',
 			value:'history',
-			list:[
-			]
+			Todaylist:[
+			],
+			Yesterdaylist:[
+			],
+			WithinAWeeklist:[
+			],
+			EarlierTodaylist:[
+			],
 		},
 		gallery:{
 			icon:'fi-rr-gallery',
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index eb2ff7e5..975f2d57 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -11,7 +11,7 @@
 					<p>New Project</p>
 				</div>
 				<div class="navList marginT2">
-					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value}">
+					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
 						
 						<div class="titleBox" @click="setOpenType(item.value,item.list)">
 							<div class="left">
@@ -32,36 +32,44 @@
 								</div>
 							</div>
 							<div class="detail" v-else-if="item.value == 'history'">
-								<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
-									<div class="text" style="width: 100%;">
-										<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
-										<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
-									</div>
-									<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
-									<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
-									<div class="btn">
-										<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item.list)"></i>
-										<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
-										<div class="operation" v-show="historyData.selectHistoryIndex == index">
-											<div class="item" @click.stop="editName(childItem)">
-												<i class="fi fi-rr-edit"></i>
-												<span>Rename</span>
-											</div>
-											<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
-												<i class="fi fi-rr-settings-sliders"></i>
-												<span>Setting</span>
-											</div>
-											<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
-												<i class="fi fi-rr-settings-sliders"></i>
-												<span>Batch Generation</span>
-											</div>
-											<div class="item" @click.stop="deleteItem(childItem)">
-												<i class="icon iconfont icon-shanchu operate_icon"></i>
-												<span>Delete</span>
+								<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
+									<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div>
+									<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div>
+									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a wseek</div>
+									<div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div>
+									<div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
+										<div class="text" style="width: 100%;">
+											<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
+											<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
+										</div>
+										<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
+										<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
+										<div class="btn">
+											<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item[historyTypeItem])"></i>
+											<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
+											<div class="operation" v-show="historyData.selectHistoryIndex == index">
+												<div class="item" @click.stop="editName(childItem)">
+													<i class="fi fi-rr-edit"></i>
+													<span>Rename</span>
+												</div>
+												<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
+													<i class="fi fi-rr-settings-sliders"></i>
+													<span>Setting</span>
+												</div>
+												<div class="item" v-if="bathGenerationList.indexOf(childItem.process)>-1" @click.stop="bathGeneration(childItem)">
+													<i class="fi fi-rr-settings-sliders"></i>
+													<span>Batch Generation</span>
+												</div>
+												<div class="item" @click.stop="deleteItem(childItem)">
+													<i class="icon iconfont icon-shanchu operate_icon"></i>
+													<span>Delete</span>
+												</div>
 											</div>
 										</div>
 									</div>
 								</div>
+								
+								
 								<div v-show="!historyData.isNoData" class="material_content_list_loding">
 									<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
 									<span v-show="historyData.isShowLoading">
@@ -217,7 +225,7 @@
 					You can use these features only after becoming a regular user~
 				</div>
 				<div class="router" v-else-if="!getLangIsShowMark">
-					<home ref="home" @setTask="setTask"></home>
+					<home ref="home" @setNewProject="()=>leftShow=!leftShow" @setTask="setTask"></home>
 				</div>
 			</div>
 		</div>
@@ -289,7 +297,7 @@ export default defineComponent({
 			openType:'',
 			openTypeChild:'',
 			isLanguage:false,
-			openTypeList:openTypeList(t),
+			openTypeList:computed(()=>openTypeList(t)),
 			projectSetting:null,
 			historyData:{
 				isNoData:false,
@@ -297,10 +305,14 @@ export default defineComponent({
 				isNull:false,
 				searchCollectionName:'',
 				historyTextarea:'',
-				historyList:[],
+				updateTimeType:['Todaylist','Yesterdaylist','WithinAWeeklist','EarlierTodaylist'],
 				selectHistoryIndex:-1,
 				page:1,
 				size:10,
+				isToday:false,
+				isYesterday:false,
+				isWithinAWeek:false,
+				isEarlier:false,
 			},
 			bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
 		})
@@ -323,6 +335,7 @@ export default defineComponent({
 						homeMainData.openType = ''
 						homeMainData.openTypeChild = ''
 					}
+					if(query.create == 'true')settingGetHistory()
 				})
 			},
 			{ immediate: true } // 立即触发一次以处理初始参数
@@ -450,11 +463,11 @@ export default defineComponent({
 				homeMainData.openType = ''
 			}else {
 				homeMainData.openType = type
-				if(type == 'history'){
-					if(list.length == 0){
+				// if(type == 'history'){
+				// 	if(list.length == 0){
 						
-					}
-				}
+				// 	}
+				// }
 			}
 		}
 		let setPorfolioDom = ()=>{
@@ -501,11 +514,31 @@ export default defineComponent({
 		}
 		const settingGetHistory = ()=>{
 			homeMainData.historyData.page = 1
-			homeMainData.openTypeList.history.list = []
+			homeMainData.openTypeList.history.Todaylist = []
+			homeMainData.openTypeList.history.Yesterdaylist = []
+			homeMainData.openTypeList.history.WithinAWeeklist = []
+			homeMainData.openTypeList.history.EarlierTodaylist = []
 			homeMainData.historyData.isShowLoading = false
 			homeMainData.historyData.isNoData = false
 		}
 		provide('settingGetHistory',settingGetHistory)
+		const  categorizeDate = (inputDate) => {
+			const now = new Date();
+			const date = new Date(inputDate);
+			// 计算时间差（毫秒）
+			const diffTime = now - date;
+			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+			// 判断逻辑
+			if ((diffDays === -1 || diffDays === 0) && date.getDate() === now.getDate()) {
+				return "Today";
+			} else if (diffDays === 1 || (diffDays === 0 && date.getDate() !== now.getDate())) {
+				return "Yesterday";
+			} else if (diffDays <= 7) {
+				return "WithinAWeek";
+			} else {
+				return "Earlier";
+			}
+		}
 		const getHistory = ()=>{
 			if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
 			homeMainData.historyData.isShowLoading = true
@@ -528,8 +561,12 @@ export default defineComponent({
 						homeMainData.historyData.isNull = false
 					}
 					if (rv.content.length > 0) {
+							rv.content.forEach((item)=>{
+								let str = categorizeDate(item.updateTime) + 'list'
+								homeMainData.openTypeList.history[str].push(item)
+							})
 							homeMainData.historyData.isNull = false
-							homeMainData.openTypeList.history.list.push(...rv.content)
+							// homeMainData.openTypeList.history.list.push(...rv.content)
 					} else {
 						homeMainData.historyData.isNoData = true
 					}
@@ -571,9 +608,14 @@ export default defineComponent({
 		}
 		const editName = (item)=>{
 			homeMainData.historyData.selectHistoryIndex = -1
-			homeMainData.openTypeList.history.list.forEach((item)=>{
-				item.editName = false
-			})
+			for (const key in homeMainData.openTypeList.history) {
+				let list = ['EarlierTodaylist','Todaylist','WithinAWeeklist','Yesterdaylist']
+				if(list.indexOf(key) == -1)continue
+				homeMainData.openTypeList.history[key].forEach((item)=>{
+					item.editName = false
+				})
+			}
+			
 			item.editName = true
 			homeMainData.historyData.historyTextarea = item.name 
 		}
@@ -939,6 +981,9 @@ export default defineComponent({
 				// padding: 1.2rem;
 				max-height: 5rem;
 				border-radius: 2rem;
+				&.history{
+					flex: 1;
+				}
 				> .titleBox{
 					padding: 1.2rem;
 					display: flex;
@@ -982,10 +1027,18 @@ export default defineComponent({
 					> .detail{
 						position: relative;
 						height: 100%;
+						min-height: 10rem;
 						> img{
 							width: 100%;
 						}
-						> .detailItem{
+						.timeType{
+							font-size: 1.6rem;
+							color: #52525b;
+							font-weight: 400;
+							margin-top: 1.2rem;
+							margin-bottom: .8rem;
+						}
+						.detailItem{
 							cursor: pointer;
 							padding: 1.2rem 1.1rem 1.2rem 2.2rem;
 							font-size: 1.4rem;
@@ -1119,7 +1172,7 @@ export default defineComponent({
 								
 							}
 						}
-						> .detailItem:last-child{
+						.detailItem:last-child{
 							margin-bottom: 0;
 						}
 						> .material_content_list_loding{
@@ -1165,7 +1218,7 @@ export default defineComponent({
 					}
 					> .detailBox{
 						> .detail{
-							> .detailItem{
+							.detailItem{
 								padding: .8rem;
 								> svg{
 									margin-right: 2.5rem;
diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue
index 0ec59bef..3aa33ad7 100644
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -398,9 +398,9 @@
 													>
 													</a-upload>
 												</i>
-												<div :title="$t('Generate.style')">
+												<!-- <div :title="$t('Generate.style')">
 													<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
-												</div>
+												</div> -->
 											</div>
 
 											<textarea 
@@ -412,30 +412,35 @@
 												@click.stop=""
 												v-model="captionGeneration"
 											></textarea>
-											<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
-												<div class="generage_btn started_btn" style="padding: 1.5rem 2rem;">
-													
-													<div @click.stop="getgenerate">
-														<span v-if="
-														selectCode == 'Moodboard' || 
-														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
-														(selectCode == 'Sketchboard' && scene?.value == 'generate')">{{ speedData.label }}</span>
-														<span v-else>{{ $t('LibraryPage.Generate') }}</span>
+											
+											<div class="generage_btn_box">
+												<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
+													<div class="generage_btn started_btn">
+														<div @click.stop="getgenerate" style="display: flex;">
+															<i v-if="
+															selectCode == 'Moodboard' || 
+															(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
+															(selectCode == 'Sketchboard')" class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;"></i>
+															<span v-else>{{ $t('LibraryPage.Generate') }}</span>
+														</div>
+														<div class="icon iconfont icon-xiala" v-show="
+															selectCode == 'Moodboard' || 
+															(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
+															(selectCode == 'Sketchboard')" :class="{active:speedState}" @click.stop="openSpeed"></div>
+													</div>
+													<div class="content" v-if="scene?.value != 'extract'" v-show="speedState">
+														<div v-for="item in speedList" :class="{active:item.value == speedData.value}" v-show="(selectCode == 'Moodboard' && item?.value != 'flux') || (selectCode == 'Sketchboard' && item?.value != 'flux') || selectCode == 'Printboard'" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+													</div>
+													<div class="content" v-else v-show="speedState">
+														<div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 													</div>
-													<div class="icon iconfont icon-xiala" v-show="
-														selectCode == 'Moodboard' || 
-														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
-														(selectCode == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
 												</div>
-												<div class="content" v-show="speedState">
-													<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+												<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
+													<i class="fi fi-br-loading"></i>
+												</div>
+												<div v-show="remGenerate[selectCode]" @click.stop="removeGenerate" class="generage_btn started_btn">
+													{{$t('Generate.Close')}}
 												</div>
-											</div>
-											<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
-												<i class="fi fi-br-loading"></i>
-											</div>
-											<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
-												{{$t('Generate.Close')}}
 											</div>
 											<span class="inputShowText" ref="inputShowText"></span>
 										</div>
@@ -450,13 +455,15 @@
                                 </div>
 
                                 <div class="content_body_table scroll_style">
-                                    <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id"  :class="[img.status != 'Success'?'hideEvents':'']"  v-show="img.status == 'Success'"
+                                    <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id"  :class="[img.status != 'Success'?'hideEvents':'']"
 									:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)"  @dragover.prevent  @drop="drop($event,index)">
                                         <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
 											<!-- <img v-show="img.status != 'Success'"  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
-											<img  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
-											
-											<div class="img_item_hover">
+											<img v-if="img?.imgUrl" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
+											<div v-else class="loading">
+												<a-spin size="large" ></a-spin>
+											</div>
+											<div class="img_item_hover" v-show="img?.imgUrl">
                                                 <div class="img_operate_content left">
 													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
                                                         <span class="icon iconfont icon-shanchu operate_icon"></span>
@@ -472,7 +479,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
+											<sketchCategory  v-show="selectCode == 'Sketchboard' && img?.imgUrl" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
                                         </div>
                                         <div class="content_img_name"></div>
                                     </div>
@@ -711,6 +718,17 @@ export default defineComponent({
 					value:'wx',
 				},
 			],
+			extractList:[
+				{
+					title:'This method may produce slight discrepancies between the extracted line art and the original image.',
+					label:'High',
+					value:'',
+				},{
+					title:'Note: The extracted line art might have minor variations from the original.',
+					label:'FLUX',
+					value:'flux',
+				},
+			],
 			speedState:false,
 			speedData:{
 				title:'Picture quality is average, speed is fast',
@@ -728,7 +746,12 @@ export default defineComponent({
 		}
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
+			speed.speedState = false
 		}
+		watch(()=>scene,(newVal,oldVal)=>{
+			console.log(newVal)
+			
+		})
 		let getSex = () =>{
 			sex.value = store.state.UserHabit.sex.value[0].value
 			getPosition()
@@ -908,6 +931,11 @@ export default defineComponent({
 				}else{
 					this.isSloganHint = ''
 				}
+				if(newVal.value == 'extract'){
+					this.speedData = this.extractList[0]
+				}else{
+					this.speedData = this.speedList[0]
+				}
 			}
 		},
 		'$route.query':{
@@ -1112,7 +1140,6 @@ export default defineComponent({
 			this.isShowMark = true
 			Https.axiosPost(Https.httpUrls.brandDNAPage,data).then(
                 (rv: any) => {
-					console.log(rv);
 					this.brandDNAList = rv.content
 					this.total = rv.total
 					this.isShowMark = false
@@ -1564,10 +1591,7 @@ export default defineComponent({
 			})
 		},
 		getgenerate(){
-			if(this.scene?.value == 'extract'){
-				this.imageToSketch()
-				return
-			}
+			
 			this.isInputFocus = false
 			this.isTextarea = false
 			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
@@ -1576,60 +1600,77 @@ export default defineComponent({
 			}
 			clearInterval(this.remGenerateTime[selectCodeStr])
 			this.remGenerate[selectCodeStr] = false
-			
-			let level2Type = ''
-			let collectionElementId = ''
-			let base64 = ''
-			if(this.selectGenerateList?.[0]){
-				collectionElementId = this.selectGenerateList[0].id
-				if(this.selectGenerateList[0].base64){
-					base64 = this.selectGenerateList[0].imgUrl
+			let httpsUrl = Https.httpUrls.generatePrepare
+			let data:any
+			if(this.scene?.value == 'extract'){
+				httpsUrl = Https.httpUrls.imageToSketch
+				if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+				data = {
+					"elementId": this.selectGenerateList[0].id,
+					gender:this.sex,
+					"style": this.printModel.value,
+					"styleImageId": this.printModel.id?this.printModel.id:''
 				}
+			}else{
+				let level2Type = ''
+				let collectionElementId = ''
+				let base64 = ''
+				if(this.selectGenerateList?.[0]){
+					collectionElementId = this.selectGenerateList[0].id
+					if(this.selectGenerateList[0].base64){
+						base64 = this.selectGenerateList[0].imgUrl
+					}
+				}
+				
+				let sloganText = ''
+				let arr = ["Painting Style","Illustration Style","Real Style"]
+				sloganText = this.captionGeneration
+				if(this.selectCode == "Sketchboard"){
+					level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
+					if(this.workspace.styleName){
+						sloganText = `${this.workspace.styleName},${sloganText}`
+					}
+				}else if(this.selectCode == "Printboard"){
+					level2Type = this.scene?.value
+					if(level2Type == 'Slogan' && this.captionGeneration == ''){
+						sloganText = this.isSloganHint
+					}else if(level2Type == 'Pattern'){
+						sloganText = `${arr[this.printModel.num-1]},${sloganText}`
+					}
+					if(!base64 && level2Type == 'Slogan'){
+						message.info(this.t('Generate.jsContent10'));
+						return
+					}
+				}
+				data = {
+					generateType:'text',
+					designType:'collection',
+					collectionElementId:collectionElementId,
+					level1Type:selectCodeStr,
+					level2Type:level2Type,
+					userId:(this?.userDetail as any).userId,
+					isTestUser:this.driver__.driver?false:this.isTest,
+					text:sloganText,
+					seed:this.searchPictureSeed,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					modelName:this.speedData.value,//为1就是Print
+					gender:selectCodeStr == 'Sketchboard'?this.sex:'',
+					sloganBase64:base64,
+				}
+				this.generateLevel2[selectCodeStr] = data.level2Type
 			}
 			
-			let sloganText = ''
-			let arr = ["Painting Style","Illustration Style","Real Style"]
-			sloganText = this.captionGeneration
-			if(this.selectCode == "Sketchboard"){
-				level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
-				if(this.workspace.styleName){
-					sloganText = `${this.workspace.styleName},${sloganText}`
-				}
-			}else if(this.selectCode == "Printboard"){
-				level2Type = this.scene?.value
-				if(level2Type == 'Slogan' && this.captionGeneration == ''){
-					sloganText = this.isSloganHint
-				}else if(level2Type == 'Pattern'){
-					sloganText = `${arr[this.printModel.num-1]},${sloganText}`
-				}
-				if(!base64 && level2Type == 'Slogan'){
-					message.info(this.t('Generate.jsContent10'));
-					return
-				}
-			}
-			let data = {
-				generateType:'text',
-				designType:'collection',
-				collectionElementId:collectionElementId,
-				level1Type:selectCodeStr,
-				level2Type:level2Type,
-				userId:(this?.userDetail as any).userId,
-				isTestUser:this.driver__.driver?false:this.isTest,
-				text:sloganText,
-				seed:this.searchPictureSeed,
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				modelName:this.speedData.value,//为1就是Print
-				gender:selectCodeStr == 'Sketchboard'?this.sex:'',
-				sloganBase64:base64,
-			}
-			this.generateLevel2[selectCodeStr] = data.level2Type
 			this.isGenerate[selectCodeStr] = true
 			this.isTextarea = false
-			this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
-				this.remGenerate[selectCodeStr] = true
-			},10000)
-			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
+			// this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
+			// },10000)
+			Https.axiosPost(httpsUrl, data).then(
                 (rv) => {
+					if(this.scene?.value == 'extract'){
+						rv = {
+							uniqueId:[rv]
+						}
+					}
 					if(data.isTestUser){
 						let str:any
 						if(selectCodeStr == 'Moodboard'){
@@ -1648,8 +1689,12 @@ export default defineComponent({
 						// 	return
 						// }
 					}
+					let rvData = rv.uniqueId.map((item:any)=>{
+						return{taskId:item,status:''}
+					})
+					this.remGenerate[selectCodeStr] = true//出现取消按钮
+					this.generateList[selectCodeStr].unshift(...rvData)
 					this.setGenerate(selectCodeStr,rv.uniqueId)
-					
                 }
             ).catch(res=>{
 				// this.isShowMark = false
@@ -1701,11 +1746,15 @@ export default defineComponent({
 											element.category = itemCategory?.name
 										}
 									});
-									// element.categoryValue = this.scene?.name
-									// element.category = this.scene?.value
-									this.generateList[str].unshift(element)
+									// this.generateList[str].unshift(element)
+									let index = this.generateList[str].findIndex((item:any)=>item.taskId == element.taskId)
+									this.generateList[str][index] = element
 									data = data.filter((item:any) => item !== element.taskId);
 
+								}else if(element.status == 'Fail' || element.status == 'Invalid'){
+									data = data.filter((item:any) => item !== element.taskId);
+									this.generateList = this.generateList.filter((item:any) => item.taskId !== element.taskId);
+									message.info(this.t('Generate.everyTimeEffectPoor'));
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
@@ -1750,6 +1799,9 @@ export default defineComponent({
 				}
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
+						this.generateProceedList.forEach((generateProceedListItem:any)=>{
+							this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any) => generateProceedListItem.taskId!== item.taskId);
+						})
 						this.generateProceedList = []
 					}
 				).catch(res=>{
@@ -2257,7 +2309,13 @@ export default defineComponent({
                                             // width: 100%;
                                             // height: 100%;
                                         }
-
+										.loading{
+											width: 100%;
+											height: 100%;
+											display: flex;
+											align-items: center;
+											justify-content: center;
+										}
                                         &:hover .img_item_hover{
                                             // display: block;
 											opacity: 1;