@versa_ai/vmml-editor 1.0.2

package/dist/index.js

@@ -0,0 +1,2675 @@
+'use strict';
+
+var vmmlPlayer = require('@versa_ai/vmml-player');
+var react = require('react');
+var vmmlUtils = require('@versa_ai/vmml-utils');
+var remotion = require('remotion');
+var jsxRuntime = require('react/jsx-runtime');
+var fabric = require('fabric');
+var uuid = require('uuid');
+var domToImage = require('dom-to-image');
+
+// src/index.tsx
+
+// src/assets/css/index.scss
+var css = `@charset "UTF-8";
+.editor {
+  background: #000;
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.editor .padding-box {
+  flex: 1;
+}
+.editor > .header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 11.467vw;
+  padding-left: 4.4vw;
+  padding-right: 3.2vw;
+  box-sizing: border-box;
+  position: relative;
+}
+.editor > .header > .close {
+  width: 4vw;
+  height: 4vw;
+}
+.editor > .header > .close img {
+  width: 100%;
+  height: 100%;
+}
+.editor > .header > .history-operate {
+  height: 7.2vw;
+  display: none;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.editor > .header > .history-operate img {
+  width: 4.667vw;
+  height: 5.067vw;
+}
+.editor > .header > .history-operate > img:last-child {
+  margin-left: 8vw;
+}
+.editor > .header > .next-button {
+  width: 16vw;
+  height: 7.2vw;
+  line-height: 7.2vw;
+  background: #1677FF;
+  border-radius: 6.533vw;
+  text-align: center;
+  font-size: 3.2vw;
+  color: #fff;
+}
+.editor .text-style {
+  filter: blur(10px);
+}
+.editor .editor-vessel {
+  padding-top: 3.2vw;
+}
+.editor .main {
+  width: 81.467vw;
+  height: 144.8vw;
+  margin: auto;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  border-radius: 3.2vw;
+  overflow: hidden;
+}
+.editor .main .vessel {
+  width: 100%;
+  height: 100%;
+}
+.editor .main .controls-box {
+  height: 12vw;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-radius: 3.2vw;
+}
+.editor .main .player-controls {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 2.13vw;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+}
+.editor .main .player-controls .mr-16 {
+  margin-right: 2.13vw;
+}
+.editor .main .player-controls .player-controls-toggle > img {
+  display: block;
+  width: 4.8vw;
+  height: 4.8vw;
+  cursor: pointer;
+}
+.editor .main .player-controls .player-controls-seekbar {
+  flex: 1;
+  position: relative;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container {
+  height: 100%;
+  user-select: none;
+  touch-action: none;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container .seekbar-background {
+  user-select: none;
+  height: 1.6vw;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 1vw;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container .seekbar-background .seekbar-fill {
+  position: absolute;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  border-radius: 1vw;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container .seekbar-background .seekbar-line {
+  height: 100%;
+  border-radius: 1vw;
+  background-color: #eeeeee;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container .seekbar-background .seekbar-sign {
+  width: 10px;
+  position: absolute;
+  top: 50%;
+  margin-top: -6px;
+}
+.editor .main .player-controls .player-controls-seekbar .seekbar-container .seekbar-background .seekbar-cirle {
+  position: absolute;
+  top: -0.8vw;
+  width: 3.2vw;
+  height: 3.2vw;
+  border-radius: 50%;
+  background: #eeeeee;
+}
+.editor .main .player-controls .player-controls-time {
+  width: 10vw;
+  color: #fff;
+}
+.editor .main .play-btn {
+  position: absolute;
+  bottom: 4vw;
+  left: 3vw;
+  width: 4.8vw;
+  height: 4.8vw;
+}
+.editor .main .play-btn img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.editor .main .opacity-06 {
+  opacity: 0.6;
+}
+.editor .footer {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20.333vw 10.933vw;
+}
+.editor .footer > div {
+  width: 30%;
+  margin: 0 15%;
+}
+.editor .footer > div img {
+  width: 6.4vw;
+  height: 6.4vw;
+  display: block;
+  margin: auto;
+}
+.editor .footer > div p {
+  font-size: 3.2vw;
+  color: #fff;
+  margin-top: 1.867vw;
+  text-align: center;
+}
+.editor .not-show-text {
+  justify-content: space-around;
+}
+.editor .editor-video-menu {
+  position: fixed;
+  height: 0;
+  width: 100%;
+  background: #1E1E1E;
+  bottom: 0;
+  border-radius: 8px 8px 0 0;
+  transition: all 0.5s ease-in-out;
+}
+.editor .editor-video-menu.active {
+  height: 38.13vh;
+}
+.editor .editor-video-menu .editor-video-menu-header {
+  display: flex;
+  padding: 1.6vw 1.6vw 0;
+  height: 4.81vh;
+  line-height: 4.81vh;
+  color: rgba(255, 255, 255, 0.4);
+  overflow: hidden;
+  overflow-x: auto;
+}
+.editor .editor-video-menu .editor-video-menu-header::-webkit-scrollbar {
+  display: none; /* \u9690\u85CF\u6EDA\u52A8\u6761 */
+}
+.editor .editor-video-menu .editor-video-menu-header > div {
+  margin: 0 3.2vw;
+  white-space: nowrap;
+}
+.editor .editor-video-menu .editor-video-menu-header .active {
+  color: #FFFFFF;
+}
+.editor .editor-video-menu .editor-video-menu-itmes {
+  padding: 0 3.33vw;
+  max-height: calc(100% - 4.81vh - 1.6vw);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 3.2vw;
+  column-gap: 2.6vw;
+  overflow: auto;
+}
+.editor .editor-video-menu .editor-video-menu-itmes > div {
+  width: 21.33vw;
+  height: 21.33vw;
+  background-color: #1e1e1e;
+}
+.editor .editor-video-menu .editor-video-menu-itmes > div img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiRDpcXHByb2plY3RzXFx2bW1sLXBsYXllclxccGFja2FnZXNcXGVkaXRvclxcc3JjXFxhc3NldHNcXGNzcyIsInNvdXJjZXMiOlsiaW5kZXguc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUE7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFDQTtFQUNFO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBOztBQUdKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBOztBQUVGO0VBQ0U7O0FBR0o7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUdKO0VBQ0U7O0FBR0Y7RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBOztBQUVGO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ0U7O0FBR0E7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFHSjtFQUNFO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOztBQUVGO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUtSO0VBQ0U7RUFDQTs7QUFHSjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBO0VBQ0E7O0FBR0o7RUFDRTs7QUFLSjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBOztBQUNBO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFLTjtFQUNFOztBQUdGO0VBQ0U7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ0U7O0FBRUY7RUFDRTtFQUNBOztBQUVGO0VBQ0U7O0FBR0o7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFDQTtFQUNFO0VBQ0E7RUFDQTs7QUFDQTtFQUNFO0VBQ0E7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi5lZGl0b3J7XHJcbiAgYmFja2dyb3VuZDogIzAwMDtcclxuICB3aWR0aDogMTAwJTtcclxuICBtaW4taGVpZ2h0OiAxMDB2aDtcclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICAucGFkZGluZy1ib3gge1xyXG4gICAgZmxleDogMTtcclxuICB9XHJcbiAgLy8g6aG26YOoXHJcbiAgJj4uaGVhZGVye1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGhlaWdodDogMTEuNDY3dnc7XHJcbiAgICBwYWRkaW5nLWxlZnQ6IDQuNHZ3O1xyXG4gICAgcGFkZGluZy1yaWdodDogMy4ydnc7XHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgJj4uY2xvc2V7XHJcbiAgICAgIHdpZHRoOiA0dnc7XHJcbiAgICAgIGhlaWdodDogNHZ3O1xyXG4gICAgICBpbWd7XHJcbiAgICAgICAgd2lkdGg6IDEwMCU7XHJcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICAmPi5oaXN0b3J5LW9wZXJhdGV7XHJcbiAgICAgIGhlaWdodDogNy4ydnc7XHJcbiAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgbGVmdDogNTAlO1xyXG4gICAgICB0b3A6IDUwJTtcclxuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwtNTAlKTtcclxuICAgICAgaW1ne1xyXG4gICAgICAgIHdpZHRoOiA0LjY2N3Z3O1xyXG4gICAgICAgIGhlaWdodDogNS4wNjd2dztcclxuICAgICAgfVxyXG4gICAgICAmPmltZzpsYXN0LWNoaWxke1xyXG4gICAgICAgIG1hcmdpbi1sZWZ0OiA4dnc7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgICY+Lm5leHQtYnV0dG9ue1xyXG4gICAgICB3aWR0aDogMTZ2dztcclxuICAgICAgaGVpZ2h0OiA3LjJ2dztcclxuICAgICAgbGluZS1oZWlnaHQ6IDcuMnZ3O1xyXG4gICAgICBiYWNrZ3JvdW5kOiAjMTY3N0ZGO1xyXG4gICAgICBib3JkZXItcmFkaXVzOiA2LjUzM3Z3O1xyXG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbiAgICAgIGZvbnQtc2l6ZTogMy4ydnc7XHJcbiAgICAgIGNvbG9yOiAjZmZmO1xyXG4gICAgfVxyXG4gIH1cclxuICAudGV4dC1zdHlsZXtcclxuICAgIGZpbHRlcjpibHVyKDEwcHgpXHJcbiAgfVxyXG5cclxuICAuZWRpdG9yLXZlc3NlbCB7XHJcbiAgICBwYWRkaW5nLXRvcDogMy4ydnc7XHJcbiAgfVxyXG4gIC8vcGxheWVy5LiO55S75biDXHJcbiAgLm1haW57XHJcbiAgICB3aWR0aDogODEuNDY3dnc7XHJcbiAgICBoZWlnaHQ6IDE0NC44dnc7XHJcbiAgICBtYXJnaW46IGF1dG87XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBib3JkZXItcmFkaXVzOiAzLjJ2dztcclxuICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICAudmVzc2VsIHtcclxuICAgICAgd2lkdGg6IDEwMCU7XHJcbiAgICAgIGhlaWdodDogMTAwJTtcclxuICAgIH1cclxuICAgIC5jb250cm9scy1ib3gge1xyXG4gICAgICBoZWlnaHQ6IDEydnc7XHJcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgYm90dG9tOiAwO1xyXG4gICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgYm9yZGVyLXJhZGl1czogMy4ydnc7XHJcbiAgICB9XHJcbiAgICAucGxheWVyLWNvbnRyb2xzIHtcclxuICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgICAgd2lkdGg6IDEwMCU7XHJcbiAgICAgIGhlaWdodDogMTAwJTtcclxuICAgICAgcGFkZGluZzogMCAyLjEzdnc7XHJcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCggMTgwZGVnLCByZ2JhKDAsMCwwLDApIDAlLCByZ2JhKDAsMCwwLDAuNikgMTAwJSk7XHJcbiAgICAgIC5tci0xNiB7XHJcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAyLjEzdnc7XHJcbiAgICAgIH1cclxuICAgICAgLnBsYXllci1jb250cm9scy10b2dnbGUge1xyXG4gICAgICAgID5pbWcge1xyXG4gICAgICAgICAgZGlzcGxheTogYmxvY2s7XHJcbiAgICAgICAgICB3aWR0aDogNC44dnc7XHJcbiAgICAgICAgICBoZWlnaHQ6IDQuOHZ3O1xyXG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgICAucGxheWVyLWNvbnRyb2xzLXNlZWtiYXIge1xyXG4gICAgICAgIGZsZXg6IDE7XHJcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgICAgIC5zZWVrYmFyLWNvbnRhaW5lciB7XHJcbiAgICAgICAgICBoZWlnaHQ6IDEwMCU7XHJcbiAgICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcclxuICAgICAgICAgIHRvdWNoLWFjdGlvbjogbm9uZTtcclxuICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcclxuICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgICAgICAgICAuc2Vla2Jhci1iYWNrZ3JvdW5kIHtcclxuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XHJcbiAgICAgICAgICAgIGhlaWdodDogMS42dnc7XHJcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7XHJcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDF2dztcclxuICAgICAgICAgICAgLnNlZWtiYXItZmlsbCB7XHJcbiAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xyXG4gICAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcclxuICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAxdnc7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgLnNlZWtiYXItbGluZSB7XHJcbiAgICAgICAgICAgICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDF2dztcclxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlZWVlO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIC5zZWVrYmFyLXNpZ24ge1xyXG4gICAgICAgICAgICAgIHdpZHRoOiAxMHB4O1xyXG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgICAgICAgICB0b3A6IDUwJTtcclxuICAgICAgICAgICAgICBtYXJnaW4tdG9wOiAtNnB4O1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIC5zZWVrYmFyLWNpcmxlIHtcclxuICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICAgICAgICAgICAgdG9wOiAtMC44dnc7XHJcbiAgICAgICAgICAgICAgd2lkdGg6IDMuMnZ3O1xyXG4gICAgICAgICAgICAgIGhlaWdodDogMy4ydnc7XHJcbiAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xyXG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6ICNlZWVlZWU7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgIH1cclxuICAgICAgLnBsYXllci1jb250cm9scy10aW1lIHtcclxuICAgICAgICB3aWR0aDogMTB2dztcclxuICAgICAgICBjb2xvcjogI2ZmZjtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgLnBsYXktYnRuIHtcclxuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgICBib3R0b206IDR2dztcclxuICAgICAgbGVmdDogM3Z3O1xyXG4gICAgICB3aWR0aDogNC44dnc7XHJcbiAgICAgIGhlaWdodDogNC44dnc7XHJcbiAgICAgIGltZyB7XHJcbiAgICAgICAgd2lkdGg6IDEwMCU7XHJcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICAub3BhY2l0eS0wNiB7XHJcbiAgICAgIG9wYWNpdHk6IDAuNjtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8v5bqV6YOoXHJcbiAgLmZvb3RlcntcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgICB3aWR0aDogMTAwJTtcclxuICAgIHBhZGRpbmc6IDAgMjAuMzMzdncgMTAuOTMzdnc7XHJcbiAgICAmPmRpdntcclxuICAgICAgd2lkdGg6IDMwJTtcclxuICAgICAgbWFyZ2luOiAwIDE1JTtcclxuICAgICAgaW1ne1xyXG4gICAgICAgIHdpZHRoOiA2LjR2dztcclxuICAgICAgICBoZWlnaHQ6IDYuNHZ3O1xyXG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgICAgIG1hcmdpbjogYXV0bztcclxuICAgICAgfVxyXG4gICAgICBwe1xyXG4gICAgICAgIGZvbnQtc2l6ZTogMy4ydnc7XHJcbiAgICAgICAgY29sb3I6ICNmZmY7XHJcbiAgICAgICAgbWFyZ2luLXRvcDogMS44Njd2dztcclxuICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIC5ub3Qtc2hvdy10ZXh0e1xyXG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XHJcbiAgfVxyXG5cclxuICAuZWRpdG9yLXZpZGVvLW1lbnUge1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgLy8gaGVpZ2h0OiAzOC4xM3ZoO1xyXG4gICAgaGVpZ2h0OiAwO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBiYWNrZ3JvdW5kOiAjMUUxRTFFO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgYm9yZGVyLXJhZGl1czogOHB4IDhweCAwIDA7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC41cyBlYXNlLWluLW91dDsgIFxyXG4gICAgJi5hY3RpdmUge1xyXG4gICAgICBoZWlnaHQ6IDM4LjEzdmg7XHJcbiAgICB9XHJcbiAgICAuZWRpdG9yLXZpZGVvLW1lbnUtaGVhZGVyIHtcclxuICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAgcGFkZGluZzogMS42dncgMS42dncgMDtcclxuICAgICAgaGVpZ2h0OiA0Ljgxdmg7XHJcbiAgICAgIGxpbmUtaGVpZ2h0OiA0Ljgxdmg7XHJcbiAgICAgIGNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNDApO1xyXG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gICAgICBvdmVyZmxvdy14OiBhdXRvO1xyXG4gICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XHJcbiAgICAgICAgZGlzcGxheTogbm9uZTsgLyog6ZqQ6JeP5rua5Yqo5p2hICovXHJcbiAgICAgIH1cclxuICAgICAgPmRpdiB7XHJcbiAgICAgICAgbWFyZ2luOiAwIDMuMnZ3O1xyXG4gICAgICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XHJcbiAgICAgIH1cclxuICAgICAgLmFjdGl2ZSB7XHJcbiAgICAgICAgY29sb3I6ICNGRkZGRkY7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIC5lZGl0b3ItdmlkZW8tbWVudS1pdG1lcyB7XHJcbiAgICAgIHBhZGRpbmc6IDAgMy4zM3Z3O1xyXG4gICAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMCUgLSA0LjgxdmggLSAxLjZ2dyk7XHJcbiAgICAgIGRpc3BsYXk6IGdyaWQ7XHJcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIDFmcik7XHJcbiAgICAgIHJvdy1nYXA6IDMuMnZ3O1xyXG4gICAgICBjb2x1bW4tZ2FwOiAyLjZ2dztcclxuICAgICAgb3ZlcmZsb3c6IGF1dG87XHJcbiAgICAgID5kaXYge1xyXG4gICAgICAgIHdpZHRoOiAyMS4zM3Z3O1xyXG4gICAgICAgIGhlaWdodDogMjEuMzN2dztcclxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUxZTFlO1xyXG4gICAgICAgIGltZyB7XHJcbiAgICAgICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgICAgIGhlaWdodDogMTAwJTtcclxuICAgICAgICAgIG9iamVjdC1maXQ6IGNvbnRhaW47XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0= */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+
+// src/utils/const.ts
+var closeIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/c5dc68e4-2db5-4ea6-ada6-191bb9128a4c.png";
+var wordIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/6ba37577-5fef-4722-9a61-f7ab5e5790ad.png";
+var emotionIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/a6bb2684-4f26-481a-81dd-90500c1f7544.png";
+var playIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9c6d947f-071a-4875-9546-fd0dce371928.png";
+var pauseIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/65076da8-c1e4-42a9-90af-839a2e42ace7.png";
+var iconText2 = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/f50a1be1-512b-49f5-8be5-61b85c7cbb66.png";
+var iconText1 = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/f9071de5-48d0-42ca-8b9a-13ae19ed48e3.png";
+var signIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/bcbd9a71-ec40-4c4d-ba03-29c2bec2bf89.png";
+var getFrameFromX = (clientX, durationInFrames, width) => {
+  const pos = clientX;
+  const frame = Math.round(
+    remotion.interpolate(pos, [0, width], [0, durationInFrames - 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    })
+  );
+  return frame;
+};
+console.log(2222);
+var SeekBar = ({ player, vmmlRef, frame, durationInFrames, intoEdit, setDragState, signList }) => {
+  const containerRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState({
+    dragging: false
+  });
+  const fillStyle = react.useMemo(() => {
+    return {
+      width: `${frame / (durationInFrames - 1) * 100}%`
+    };
+  }, [frame, durationInFrames]);
+  const cirleStyle = react.useMemo(() => {
+    return {
+      left: `calc(${frame / (durationInFrames - 1) * 100}% - 1.6vw)`
+    };
+  }, [frame, durationInFrames]);
+  const onPointerDown = react.useCallback((e) => {
+    var _a;
+    if (e.button !== 0) {
+      return;
+    }
+    const { left, width } = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const _frame = getFrameFromX(
+      e.clientX - left,
+      durationInFrames,
+      width
+    );
+    setDragState(1);
+    setDragging({
+      dragging: true,
+      wasPlaying: player.isPlaying()
+    });
+    player.pause();
+    player.seekTo(_frame);
+    vmmlRef.current && vmmlRef.current.onSeekStart();
+  }, [player, durationInFrames]);
+  const onPointerMove = react.useCallback((e) => {
+    var _a;
+    if (!dragging.dragging) {
+      return;
+    }
+    const { left, width } = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const _frame = getFrameFromX(
+      e.clientX - left,
+      durationInFrames,
+      width
+    );
+    setDragState(2);
+    player.seekTo(_frame);
+  }, [player, dragging.dragging, durationInFrames]);
+  const onPointerUp = (e) => {
+    setDragging({
+      dragging: false
+    });
+    if (!dragging.dragging) {
+      return;
+    }
+    setDragState(3);
+    intoEdit();
+    vmmlRef.current && vmmlRef.current.onSeekEnd();
+  };
+  const onClickSign = (sign) => {
+    player.pause();
+    player.seekTo(sign.inFrame);
+    vmmlRef.current && vmmlRef.current.onSeekStart();
+    setTimeout(() => {
+      setDragState(4);
+      intoEdit(sign.inFrame);
+      vmmlRef.current && vmmlRef.current.onSeekEnd();
+    }, 100);
+  };
+  react.useEffect(() => {
+    if (!dragging.dragging) {
+      return;
+    }
+    const body = document.querySelector("body");
+    if (body) {
+      body.addEventListener("pointermove", onPointerMove);
+      body.addEventListener("pointerup", onPointerUp);
+      return () => {
+        body.removeEventListener("pointermove", onPointerMove);
+        body.removeEventListener("pointerup", onPointerUp);
+      };
+    }
+  }, [dragging.dragging, onPointerMove, onPointerUp]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "seekbar-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "seekbar-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "seekbar-fill", onPointerDown }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "seekbar-line", style: fillStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "seekbar-signs", children: signList.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("img", { onClick: () => onClickSign(item), style: { left: `calc(${item.inFrame / durationInFrames * 100}% - 6px)` }, className: "seekbar-sign", src: signIcon, alt: "" }, index)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "seekbar-cirle", style: cirleStyle, onPointerDown })
+  ] }) });
+};
+var SeekBar_default = SeekBar;
+var Controls = ({ player, vmmlRef, frame, fps, durationInFrames, intoEdit, isPlaying, setDragState, onControlsClick, signList }) => {
+  const onClickToggle = (e) => {
+    if (isPlaying) {
+      intoEdit();
+    } else {
+      onControlsClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "player-controls", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "player-controls-toggle mr-16 opacity-06", onClick: onClickToggle, children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: pauseIcon, alt: "\u6682\u505C" }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: playIcon, alt: "\u64AD\u653E" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "player-controls-time opacity-06", children: vmmlUtils.formatTime(frame / fps) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "player-controls-seekbar mr-16", children: /* @__PURE__ */ jsxRuntime.jsx(SeekBar_default, { player, vmmlRef, frame, durationInFrames, intoEdit, setDragState, signList }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "player-controls-time opacity-06", children: vmmlUtils.formatTime(durationInFrames / fps) })
+  ] });
+};
+var Controls_default = Controls;
+
+// src/utils/HistoryClass.ts
+var HistoryClass = class {
+  historyUndo;
+  historyRedo;
+  cacheAction;
+  canvas;
+  historyProcessing;
+  editorInstance;
+  actionTypeList;
+  constructor(canvas) {
+    console.log("history init");
+    this.canvas = canvas;
+    this.historyUndo = [];
+    this.historyRedo = [];
+    this.cacheAction = [];
+    this.editorInstance = [];
+    this.actionTypeList = [];
+    this.historyProcessing = false;
+    this.initHistory();
+  }
+  initHistory() {
+    this.historyUndo = [];
+    this.historyRedo = [];
+    this.cacheAction = [];
+    this.canvas && this.canvas.on(this._historyEvents());
+  }
+  _historyNext() {
+    const keys = [
+      "id",
+      "gradientAngle",
+      "selectable",
+      "hasControls",
+      "linkData",
+      "editable",
+      "extensionType",
+      "extension",
+      "clipData"
+    ];
+    const getJson = this.canvas && this.canvas.toJSON(keys);
+    return getJson;
+  }
+  _historyEvents() {
+    return {
+      "object:added": (e) => this._historySaveAction(e, "object:added"),
+      "object:removed": (e) => this._historySaveAction(e, "object:removed"),
+      "object:modified": (e) => this._historySaveAction(e, "object:modified"),
+      "object:skewing": (e) => this._historySaveAction(e, "object:skewing"),
+      "object:muteChange": (e) => this._historySaveAction(e, "object:muteChange")
+    };
+  }
+  _historySaveAction(e, type) {
+    if (this.historyProcessing) return;
+    this.actionTypeList.length < 1 && this.actionTypeList.push({ type });
+    if (!e || e.target && !e.target.excludeFromExport) {
+      const json = this._historyNext();
+      this.cacheAction.push(json);
+      if (this.cacheAction.length > 1) {
+        this.cacheAction.shift();
+      }
+      this.historyRedo = [];
+      this.canvas.fire("history:appnd", { json });
+    }
+  }
+  undo(callback) {
+    this.historyProcessing = true;
+    const history = this.historyUndo.pop();
+    if (history) {
+      this._loadHistory(history, "history:undo", callback);
+    } else {
+      this.historyProcessing = false;
+    }
+  }
+  redo(callback) {
+    this.historyProcessing = true;
+    const history = this.historyRedo.pop();
+    if (history) {
+      this.historyUndo.push(this._historyNext());
+      this._loadHistory(history, "history:redo", callback);
+    } else {
+      this.historyProcessing = false;
+    }
+  }
+  _loadHistory(history, event, callback) {
+    this.canvas && this.canvas.loadFromJSON(history, () => {
+      this.canvas.renderAll();
+      this.canvas.fire(event);
+      this.historyProcessing = false;
+      if (callback && typeof callback === "function") callback();
+    });
+  }
+  _historyDispose() {
+    this.canvas.off(this._historyEvents());
+  }
+  clearHistory() {
+    this.historyUndo = [];
+    this.historyRedo = [];
+    this.cacheAction = [];
+    this.canvas.fire("history:clear");
+  }
+  canUndo() {
+    return this.historyUndo.length > 0;
+  }
+  canRedo() {
+    return this.historyRedo.length > 0;
+  }
+  //离开画布保存上一次编辑的状态
+  onCanvasRoute(canvas) {
+    this.editorInstance.push(canvas);
+  }
+  getActionType() {
+    return this.actionTypeList;
+  }
+};
+var VmmlConverter = class {
+  vmml;
+  canvasSize;
+  tracks;
+  heightScale;
+  widthScale;
+  fontSize;
+  /**
+   * VmmlConverter 构造函数
+   * @param vmml - VMML 模板数据
+   * @param canvasSize - 画布尺寸
+   */
+  constructor({ vmml, canvasSize }) {
+    const { width, height } = vmml.template.dimension;
+    this.vmml = vmml;
+    this.canvasSize = canvasSize;
+    this.tracks = vmml.template.tracks;
+    this.fontSize = vmmlUtils.getFontSize(width, height);
+    this.heightScale = height / canvasSize.height;
+    this.widthScale = width / canvasSize.width;
+  }
+  //更新位置
+  setPosParam(fObj) {
+    console.log("setPosParam fObj", fObj);
+    const {
+      clipData: { type },
+      centerPoint,
+      scaleX,
+      scaleY,
+      angle,
+      width,
+      height
+    } = fObj;
+    let _scaleX, _scaleY, _centerX, _centerY;
+    if (type === "\u6587\u5B57") {
+      _scaleX = 22 * scaleX * this.widthScale / this.fontSize;
+      _scaleY = 22 * scaleY * this.heightScale / this.fontSize;
+      _centerX = centerPoint.x / this.canvasSize.width;
+      _centerY = centerPoint.y / this.canvasSize.height;
+    } else if (type === "\u8868\u60C5\u5305") {
+      _scaleX = width * scaleX * this.widthScale / width;
+      _scaleY = height * scaleY * this.heightScale / height;
+      _centerX = centerPoint.x / this.canvasSize.width;
+      _centerY = centerPoint.y / this.canvasSize.height;
+    }
+    return {
+      scaleX: _scaleX,
+      scaleY: _scaleY,
+      centerX: _centerX,
+      centerY: _centerY,
+      rotationZ: angle
+    };
+  }
+  /**
+   * 转换 TextClip
+   * @param fObj - 画布fObj
+   */
+  addTextClip(fObj) {
+    console.log("addTextClip fObj", fObj);
+    const posParam = this.setPosParam(fObj);
+    const { clipData: { id, inPoint, text, textColor, bgColor } } = fObj;
+    const { template: { duration } } = this.vmml;
+    const clips = [];
+    const editorTrack = this.tracks.find((track) => track.editorType === "\u6587\u5B57");
+    const tClipData = {
+      duration,
+      originDuration: duration,
+      start: 0,
+      end: duration,
+      inPoint,
+      id,
+      type: 202,
+      fObj,
+      textClip: {
+        lineSpacing: 0,
+        alignType: 0,
+        fontCode: "",
+        bold: false,
+        dimension: {
+          height: 282,
+          width: 825
+        },
+        posParam,
+        backgroundColor: this.toARGB(bgColor),
+        textContent: text,
+        textColor: this.toARGB(textColor)
+        // fontFamily:'unset'
+      }
+    };
+    if (!editorTrack) {
+      clips.push(tClipData);
+      this.tracks.push({
+        clips,
+        description: "editorText",
+        id: uuid.v4(),
+        type: 2,
+        editorType: "\u6587\u5B57"
+      });
+    } else {
+      editorTrack.clips.push(tClipData);
+    }
+    console.log("addTextClip \u6700\u7EC8vmml", this.vmml);
+  }
+  /**
+   * 转换 VideoClip
+   * @param fObj - 画布fObj
+   */
+  addVideoClip(fObj) {
+    console.log("addVideoClip fObj", fObj);
+    const clips = [];
+    const editorTrack = this.tracks.find((track) => track.editorType === "\u8868\u60C5\u5305");
+    const clipData = this.loadClipData(fObj);
+    if (!editorTrack) {
+      const index = this.tracks.findIndex((track) => track.editorType === "\u6587\u5B57");
+      for (const item of clipData) {
+        if (item !== null) {
+          clips.push(item);
+        }
+      }
+      const data = {
+        clips,
+        description: "editorEmoji",
+        id: uuid.v4(),
+        type: 1,
+        editorType: "\u8868\u60C5\u5305"
+      };
+      if (index !== -1) {
+        this.tracks.splice(index, 0, data);
+      } else {
+        this.tracks.push(data);
+      }
+    } else {
+      for (const item of clipData) {
+        if (item !== null) {
+          editorTrack.clips.push(item);
+        }
+      }
+    }
+    console.log("addVideoClip \u6700\u7EC8vmml", this.vmml);
+  }
+  /**
+   * 更新 clip
+   * @param fObj - 画布fObj
+   */
+  updateClip(fObj) {
+    console.log("updateClip fObj", fObj);
+    const posParam = this.setPosParam(fObj);
+    const {
+      // clipData: { id, type, lineSpacing },
+      clipData: { id, type, lineSpacing, originClip }
+    } = fObj;
+    let existClip = null;
+    if (originClip) {
+      existClip = originClip;
+    } else {
+      const editorTrack = this.tracks.find((track) => track.editorType === type);
+      existClip = ((editorTrack == null ? void 0 : editorTrack.clips) || []).find((clip) => clip.id === id);
+    }
+    if (existClip) {
+      !originClip && (existClip.fObj = fObj);
+      if (type === "\u8868\u60C5\u5305") {
+        existClip.videoClip.posParam = posParam;
+      } else if (type === "\u6587\u5B57") {
+        const { clipData: { text, textColor, bgColor } } = fObj;
+        const scale = this.fontSize / 22;
+        existClip.textClip = {
+          ...existClip.textClip,
+          posParam,
+          backgroundColor: this.toARGB(bgColor),
+          textContent: text,
+          textColor: this.toARGB(textColor),
+          dimension: {
+            width: Math.floor(fObj.width * scale),
+            height: Math.floor(fObj.height * scale)
+          }
+        };
+      }
+    }
+    console.log("updateClip \u6700\u7EC8vmml", this.vmml);
+  }
+  /**
+   * 删除 Clip
+   * @param id - 实例 id
+   * @param type - 实例 类型
+   */
+  deleteClip({ id, type, originClip }) {
+    if (originClip) {
+      originClip.duration = 0;
+    } else {
+      const editorTrack = this.tracks.find((track) => track.editorType === type);
+      const index = editorTrack.clips.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        if (editorTrack.clips[index + 1] && editorTrack.clips[index + 1].audioClip) {
+          editorTrack.clips.splice(index, 2);
+        } else {
+          editorTrack.clips.splice(index, 1);
+        }
+      }
+      if (editorTrack.clips.length === 0) {
+        const trackIndex = this.tracks.indexOf(editorTrack);
+        if (trackIndex !== -1) {
+          this.tracks.splice(trackIndex, 1);
+        }
+      }
+    }
+    console.log("deleteClip \u6700\u7EC8Vmml", this.vmml);
+  }
+  //切换静音 视频/音频
+  changeMute({ id, isMute }) {
+    const editorTrack = this.tracks.find((track) => track.editorType === "\u8868\u60C5\u5305");
+    const index = editorTrack.clips.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      const volume = isMute ? 0 : 1;
+      editorTrack.clips[index].videoClip.volume = volume;
+      if (editorTrack.clips[index + 1] && editorTrack.clips[index + 1].audioClip) {
+        editorTrack.clips[index + 1].audioClip.volume = volume;
+      }
+    }
+    console.log("changeMute \u6700\u7EC8Vmml", this.vmml);
+  }
+  //加载clip数据
+  loadClipData(fObj) {
+    const posParam = this.setPosParam(fObj);
+    const {
+      clipData: { id, inPoint, fileUrl },
+      width,
+      height
+    } = fObj;
+    let aClipData = null;
+    const availableDuration = this.vmml.template.duration - inPoint;
+    const _duration = fileUrl.duration > availableDuration ? availableDuration : fileUrl.duration;
+    const vClipData = {
+      duration: _duration,
+      originDuration: fileUrl.duration,
+      start: 0,
+      end: _duration,
+      inPoint,
+      type: 102,
+      id,
+      fObj,
+      videoClip: {
+        grayMaskUrl: fileUrl.grayMaskUrl,
+        webmUrl: fileUrl.webmUrl,
+        movUrl: fileUrl.movUrl,
+        gifUrl: fileUrl.visibleUrl,
+        dimension: {
+          height,
+          width
+        },
+        posParam,
+        constantSpeed: 1,
+        volume: 1,
+        sourceUrl: fileUrl.visibleUrl,
+        thumbnailSourceUrl: fileUrl.thumbnailUrl,
+        sourceCode: "",
+        mimeType: fileUrl.visiableMimeType
+      }
+    };
+    if (fileUrl.hasAudio === "true") {
+      aClipData = {
+        duration: _duration,
+        originDuration: fileUrl.duration,
+        start: 0,
+        end: _duration,
+        inPoint,
+        type: 304,
+        id: uuid.v4(),
+        audioClip: {
+          sourceUrl: fileUrl.soundUrl,
+          volume: 1,
+          constantSpeed: 1
+        }
+      };
+    }
+    return [vClipData, aClipData];
+  }
+  /**
+   * 将颜色转换为 ARGB 格式
+   * @param color - 颜色字符串
+   * @returns ARGB 颜色字符串
+   */
+  toARGB(color) {
+    if (color === "transparent") {
+      return "#00000000";
+    }
+    if (color.includes("rgb")) {
+      return vmmlUtils.rgbaToArgb(color);
+    }
+    if (color.includes("#")) {
+      return vmmlUtils.hexToArgb(color);
+    }
+  }
+};
+var VmmlConverter_default = VmmlConverter;
+function drawImg(ctx, left, top, img, wSize, hSize, angle) {
+  if (angle === void 0) return;
+  ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.fabric.util.degreesToRadians(angle));
+  ctx.drawImage(img, -wSize / 2, -hSize / 2, wSize, hSize);
+  ctx.restore();
+}
+function usePeekControl(canvas) {
+  const iconUrls = {
+    delete: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0c7084a9-6067-4277-a5af-2932983cbeb7.png",
+    // zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/ff6aea73-4d12-4201-9404-3134d5f9525c.png",
+    zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0909485d-46db-47b4-8bb1-5a686510ddb3.png",
+    mute: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/3fef2c5d-7576-424d-813c-34508b051884.png",
+    volume: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/1ab2e829-c5b1-4177-8554-ae2f74b02e1d.png",
+    edit: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9e9ed472-62cf-4b71-891f-bc08c8b08a5d.png"
+  };
+  const createIconElement = (url) => {
+    const img = document.createElement("img");
+    img.src = url;
+    return img;
+  };
+  const deleteObject = (mouseEvent, target) => {
+    if (target.action === "rotate") return true;
+    const activeObject = canvas.getActiveObjects();
+    if (activeObject) {
+      activeObject.map((item) => canvas.remove(item));
+      canvas.requestRenderAll();
+      canvas.discardActiveObject();
+    }
+    return true;
+  };
+  const delImg = createIconElement(iconUrls.delete);
+  const zoomImg = createIconElement(iconUrls.zoom);
+  const muteImg = createIconElement(iconUrls.mute);
+  const volumeImg = createIconElement(iconUrls.volume);
+  const editImg = createIconElement(iconUrls.edit);
+  const renderDelIcon = (ctx, left, top, styleOverride, fabricObject) => {
+    drawImg(ctx, left, top, delImg, 28, 28, fabricObject.angle);
+  };
+  const renderIconRotate = (ctx, left, top, styleOverride, fabricObject) => {
+    drawImg(ctx, left, top, zoomImg, 28, 28, fabricObject.angle);
+  };
+  const renderMuteIcon = (ctx, left, top, styleOverride, fabricObject) => {
+    if (!fabricObject.clipData) return false;
+    if (fabricObject.clipData.type === "\u8868\u60C5\u5305") {
+      if (fabricObject.clipData.isMute === null || fabricObject.clipData.isMute === void 0) return false;
+      if (fabricObject.clipData.isMute) {
+        drawImg(ctx, left, top, muteImg, 28, 28, fabricObject.angle);
+      } else {
+        drawImg(ctx, left, top, volumeImg, 28, 28, fabricObject.angle);
+      }
+    }
+  };
+  const renderEditIcon = (ctx, left, top, styleOverride, fabricObject) => {
+    if (!fabricObject.clipData) return false;
+    if (fabricObject.clipData.type === "\u6587\u5B57") {
+      drawImg(ctx, left, top, editImg, 28, 28, fabricObject.angle);
+    }
+  };
+  const muteAction = (eventData, transform, x, y) => {
+    if (transform.target.clipData.isMute === null) return false;
+    transform.target.clipData = JSON.parse(JSON.stringify(transform.target.clipData));
+    transform.target.clipData.isMute = !transform.target.clipData.isMute;
+    canvas.renderAll();
+    canvas.fire("object:muteChange", { target: transform.target });
+    return true;
+  };
+  const editAction = (eventData, transform, x, y) => {
+    if (transform.target.clipData.type === "\u6587\u5B57") {
+      canvas.fire("object:textEdit", { target: transform.target });
+    }
+    return true;
+  };
+  const actionHandler = (eventData, transform, x, y) => {
+    try {
+      const t = transform, target = t.target, pivotPoint = target.translateToOriginPoint(
+        target.getCenterPoint(),
+        t.originX,
+        t.originY
+      );
+      const lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x);
+      let angle2 = Math.floor((curAngle - lastAngle + t.theta) * (180 / Math.PI));
+      fabric.fabric.controlsUtils.scalingEqually(eventData, transform, x, y);
+      const rotateAngles = [
+        [85, 95, 90],
+        [175, 185, 180],
+        [265, 275, 270],
+        [355, 365, 360],
+        [440, 460, 90],
+        [-5, 5, 0],
+        [-95, -85, 270],
+        [-185, -175, 180]
+      ];
+      for (let i = 0; i < rotateAngles.length; i++) {
+        if (rotateAngles[i][0] < angle2 && angle2 < rotateAngles[i][1]) {
+          target.rotate(rotateAngles[i][2]);
+          return true;
+        }
+      }
+      fabric.fabric.controlsUtils.rotationWithSnapping(eventData, transform, x, y);
+      return true;
+    } catch (error) {
+      console.error("Action handler error:", error);
+      return false;
+    }
+  };
+  fabric.fabric.Object.prototype.controls.tl = new fabric.fabric.Control({
+    x: -0.5,
+    y: -0.5,
+    mouseUpHandler: deleteObject,
+    render: renderDelIcon
+  });
+  fabric.fabric.Object.prototype.controls.bl = new fabric.fabric.Control({
+    x: -0.5,
+    y: 0.5,
+    mouseUpHandler: muteAction,
+    render: renderMuteIcon
+  });
+  fabric.fabric.Object.prototype.controls.tr = new fabric.fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    mouseUpHandler: editAction,
+    render: renderEditIcon
+  });
+  fabric.fabric.Object.prototype.controls.ml = new fabric.fabric.Control({ visible: false });
+  fabric.fabric.Object.prototype.controls.mr = new fabric.fabric.Control({ visible: false });
+  fabric.fabric.Object.prototype.controls.mb = new fabric.fabric.Control({ visible: false });
+  fabric.fabric.Object.prototype.controls.mt = new fabric.fabric.Control({ visible: false });
+  fabric.fabric.Object.prototype.controls.mtr = new fabric.fabric.Control({ visible: false });
+  fabric.fabric.Object.prototype.controls.br = new fabric.fabric.Control({
+    x: 0.5,
+    y: 0.5,
+    actionName: "rotate",
+    actionHandler,
+    render: renderIconRotate
+  });
+  fabric.fabric.Object.prototype.set({
+    borderColor: "#d6d6d699",
+    borderScaleFactor: 1.5,
+    borderOpacityWhenMoving: 1,
+    padding: 5
+  });
+  return canvas;
+}
+var EditorCanvas = react.forwardRef(
+  ({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange }, ref) => {
+    const [fc, setFc] = react.useState(null);
+    const [history, setHistory] = react.useState(null);
+    const waitFcTasks = react.useRef([]);
+    const vmmlConverterRef = react.useRef(null);
+    const heightScaleRef = react.useRef(1);
+    const widthScaleRef = react.useRef(1);
+    const initCanvas = () => {
+      const canvas = new fabric.fabric.Canvas("canvas", {
+        width: canvasSize.width,
+        height: canvasSize.height,
+        selection: false
+        // 画布框选
+      });
+      heightScaleRef.current = vmml.template.dimension.height / canvasSize.height;
+      widthScaleRef.current = vmml.template.dimension.width / canvasSize.width;
+      if (initFcObjs.length) {
+        createFcObjs(canvas);
+      }
+      setFc(canvas);
+      initCanvasEvent(canvas);
+      usePeekControl(canvas);
+    };
+    const createFcObjs = (canvas) => {
+      const ns = Math.floor(frame / 30 * 1e6);
+      fabric.fabric.util.enlivenObjects(initFcObjs, (objects) => {
+        objects.forEach((item) => {
+          item.on("modified", () => {
+            const fObj = convertToJSON(item);
+            vmmlConverterRef.current.updateClip(fObj);
+          });
+          item.set("visible", ns >= item.clipData.inPoint);
+          canvas.add(item);
+        });
+        canvas.renderAll();
+      }, "");
+    };
+    const checkObjectInPoint = (f) => {
+      if (fc) {
+        const ns = Math.floor((f ?? frame) / 30 * 1e6);
+        const objects = fc.getObjects();
+        objects.forEach((item) => {
+          var _a, _b, _c;
+          if (((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u6587\u5B57") {
+            item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
+          } else {
+            item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_c = (_b = item.clipData) == null ? void 0 : _b.fileUrl) == null ? void 0 : _c.duration));
+          }
+        });
+        fc.discardActiveObject();
+        fc.renderAll();
+      }
+    };
+    const initCanvasEvent = (canvas) => {
+      canvas.on("mouse:down", (e) => {
+        const active = canvas.getActiveObject();
+        if (active) {
+          if (active.isSelected !== null && active.clipData.type === "\u6587\u5B57") {
+            imitateDBclick(active, canvas);
+          }
+        } else {
+          enterPreview(canvas);
+        }
+      });
+      canvas.on("object:removed", (e) => {
+        if (e.target.clipData && !e.target.clipData.originClip) {
+          onVideoChange(e.target.clipData);
+        }
+        const { clipData } = e.target.toJSON(["clipData"]);
+        vmmlConverterRef.current.deleteClip(clipData);
+      });
+      canvas.on("object:muteChange", (e) => {
+        const { clipData } = e.target.toJSON(["clipData"]);
+        vmmlConverterRef.current.changeMute(clipData);
+      });
+      canvas.on("object:textEdit", (e) => {
+        const active = canvas.getActiveObject();
+        handleIntoTextMenu(active, canvas);
+      });
+    };
+    const imitateDBclick = (active, canvas) => {
+      active.isSelected++;
+      const timer = setTimeout(() => {
+        active.isSelected = 0;
+      }, 500);
+      if (active.isSelected === 2) {
+        active.isSelected = 0;
+        clearTimeout(timer);
+        handleIntoTextMenu(active, canvas);
+      }
+    };
+    const handleIntoTextMenu = (active, canvas) => {
+      const {
+        left,
+        top,
+        angle,
+        scaleX,
+        scaleY,
+        zoomX,
+        zoomY,
+        clipData: { textBasicInfo, textColor, text, bgColor, fontFamily, id, fontAssetUrl }
+      } = active;
+      const textInfo = {
+        id,
+        text,
+        textColor,
+        bgColor,
+        left,
+        top,
+        angle,
+        scaleX,
+        scaleY,
+        zoomX,
+        zoomY,
+        textBasicInfo,
+        fontFamily,
+        fontAssetUrl
+        // width,
+        // height
+      };
+      active.set("visible", false);
+      canvas.renderAll();
+      intoTextEdit(textInfo);
+    };
+    const convertToJSON = (data) => {
+      const centerPoint = data.getCenterPoint();
+      return { ...data.toJSON(["clipData", "type"]), centerPoint };
+    };
+    const createImage = (file, emojiId) => {
+      const url = file.resourcesType === "image" ? file.visibleUrl : "";
+      return new Promise((resolve, reject) => {
+        try {
+          fabric.fabric.Image.fromURL(
+            url,
+            (img) => {
+              const scaleX = canvasSize.width / 2 / file.width;
+              img.set({
+                width: file.width,
+                height: file.height,
+                scaleX,
+                scaleY: scaleX,
+                left: canvasSize.width / 2,
+                top: canvasSize.height / 2,
+                originX: "center",
+                originY: "center",
+                clipData: {
+                  id: uuid.v4(),
+                  isMute: file.hasAudio === "true" ? false : null,
+                  inPoint: Math.floor(frame / 30 * 1e6),
+                  inFrame: frame,
+                  type: "\u8868\u60C5\u5305",
+                  once: false,
+                  emojiId,
+                  fileUrl: file
+                }
+              });
+              img.on("modified", () => {
+                const fObj2 = convertToJSON(img);
+                fObj2.src = "";
+                vmmlConverterRef.current.updateClip(fObj2);
+              });
+              fc.add(img);
+              onVideoChange(img.clipData);
+              const fObj = convertToJSON(img);
+              resolve(fObj);
+            },
+            {
+              padding: 3
+            }
+          );
+        } catch (err) {
+          reject(err + "\u6DFB\u52A0\u8868\u60C5\u5305\u5931\u8D25");
+        }
+      });
+    };
+    const updateImage = (id, base64, fc2) => {
+      const canvas = fc || fc2;
+      if (canvas) {
+        const imgs = canvas.getObjects().filter((item) => {
+          var _a;
+          return ((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u8868\u60C5\u5305";
+        });
+        const target = imgs.find((item) => item.clipData.id === id);
+        if (target) {
+          target.setSrc(base64, (img) => {
+            img.setCoords();
+            canvas.renderAll();
+          });
+        }
+      } else {
+        waitFcTasks.current.push(updateImage.bind(void 0, id, base64));
+      }
+    };
+    const createImageFromClip = (clip, fc2) => {
+      const canvas = fc || fc2;
+      if (canvas && canvasSize.width) {
+        const url = /video/g.test(clip.videoClip.mimeType) ? "" : clip.videoClip.sourceUrl;
+        fabric.fabric.Image.fromURL(url, (img) => {
+          const { dimension, posParam } = clip.videoClip;
+          const scaleX = posParam.scaleX / heightScaleRef.current;
+          const scaleY = posParam.scaleY / widthScaleRef.current;
+          const left = canvasSize.width * posParam.centerX;
+          const top = canvasSize.height * posParam.centerY;
+          const inFrame = vmmlUtils.getFrames(clip.inPoint, 30);
+          const durationFrame = vmmlUtils.getFrames(clip.duration, 30);
+          img.set({
+            width: dimension.width,
+            height: dimension.height,
+            scaleX,
+            scaleY,
+            left,
+            top,
+            angle: posParam.rotationZ,
+            originX: "center",
+            originY: "center",
+            clipData: {
+              id: clip.id,
+              isMute: null,
+              inPoint: clip.inPoint,
+              inFrame,
+              type: "\u8868\u60C5\u5305",
+              once: false,
+              fileUrl: {
+                duration: clip.duration
+              },
+              originClip: clip
+            },
+            visible: frame >= inFrame && frame < inFrame + durationFrame
+          });
+          canvas.add(img);
+          img.on("modified", () => {
+            const fObj = convertToJSON(img);
+            fObj.src = "";
+            vmmlConverterRef.current.updateClip(fObj);
+          });
+        });
+      } else {
+        waitFcTasks.current.push(createImageFromClip.bind(void 0, clip));
+      }
+    };
+    const handleRedo = () => {
+      history.redo();
+    };
+    const handleUndo = () => {
+      history.undo();
+    };
+    const createTextFromClip = async (clip, fc2) => {
+      const canvas = fc || fc2;
+      if (canvas) {
+        const { width, height } = vmml.template.dimension;
+        const fontSize = vmmlUtils.getFontSize(width, height);
+        const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
+        const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
+        const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
+        const left = canvasSize.width * posParam.centerX;
+        const top = canvasSize.height * posParam.centerY;
+        const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
+        const isAiError = textContent === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor === "#00000000";
+        const textFill = vmmlUtils.argbToRgba(isAiError ? "#ffffffff" : textColor || "#ffffffff");
+        const textBasicInfo = {
+          isBack: backgroundColor ? true : false,
+          colorValue: textFill,
+          colorName: "custom",
+          textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left"
+        };
+        const textImgData = await createTextImg({ textContent, bgColor, textColor: textFill, fontAssetUrl, textBasicInfo });
+        const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
+        let fontMap = {};
+        try {
+          fontMap = fontJSON ? JSON.parse(fontJSON) : {};
+        } catch {
+          fontMap = {};
+        }
+        const fontFamily = fontMap[fontAssetUrl] || "";
+        fabric.fabric.Image.fromURL(textImgData.base64Image, (imgData) => {
+          imgData.set({
+            left,
+            top,
+            width: textImgData.width,
+            height: textImgData.height,
+            scaleX,
+            scaleY,
+            angle: posParam.rotationZ,
+            originX: "center",
+            originY: "center",
+            clipData: {
+              id: uuid.v4(),
+              inPoint: clip.inPoint,
+              inFrame: vmmlUtils.getFrames(clip.inPoint, 30),
+              type: "\u6587\u5B57",
+              textColor: textFill,
+              text: textContent,
+              bgColor,
+              originClip: clip,
+              fontAssetUrl,
+              fontFamily,
+              textBasicInfo,
+              isAiError,
+              duration: clip.duration
+            }
+          });
+          imgData.on("selected", (options) => {
+            options.target.isSelected = -1;
+          });
+          imgData.on("moving", (options) => {
+            options.transform.target.isSelected = 0;
+          });
+          imgData.on("modified", () => {
+            const fObj = convertToJSON(imgData);
+            if (fObj.clipData.isAiError) {
+              fObj.clipData.textColor = "rgba(0, 0, 0, 0)";
+            }
+            vmmlConverterRef.current.updateClip(fObj);
+          });
+          canvas.add(imgData).renderAll();
+        });
+      } else {
+        waitFcTasks.current.push(createTextFromClip.bind(void 0, clip));
+      }
+    };
+    const embedFontInSVG = async (svgString, url) => {
+      if (url) {
+        const res = await vmmlUtils.urlToBlob({ url });
+        const fontFace = `
+					@font-face {
+						font-family: 'font-${url}';
+						src: url(${res});
+					}
+				`;
+        const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
+        return svgString.replace("</svg>", `${styleElement}</svg>`);
+      }
+      return svgString;
+    };
+    const createTextImg = async ({ textContent, bgColor, textColor, fontAssetUrl = null, textBasicInfo }) => {
+      const container = document.createElement("div");
+      container.style.backgroundColor = bgColor;
+      container.style.boxSizing = "content-box";
+      container.style.display = "inline-block";
+      container.style.textAlign = textBasicInfo.textAlign || "left";
+      const lines = textContent.split("\n");
+      lines.forEach((line) => {
+        const p = document.createElement("p");
+        p.style.color = textColor;
+        p.style.fontSize = "22px";
+        p.style.lineHeight = "22px";
+        const font = fontAssetUrl ? `font-${fontAssetUrl}` : "sansMedium";
+        p.style.fontFamily = font;
+        p.style.whiteSpace = "nowrap";
+        p.style.padding = "0";
+        p.textContent = line || " ";
+        container.appendChild(p);
+      });
+      container.style.padding = "6.5px 7px 6.5px 7px";
+      container.style.borderRadius = "5px";
+      document.body.appendChild(container);
+      const { width, height } = container == null ? void 0 : container.getBoundingClientRect();
+      const dataurl = await domToImage.toSvg(container);
+      document.body.removeChild(container);
+      const base64Image = await embedFontInSVG(dataurl, fontAssetUrl);
+      return { base64Image, height, width };
+    };
+    const createText = async ({ textContent, bgColor, textColor, position, textBasicInfo, id }, fc2) => {
+      const canvas = fc || fc2;
+      const { left, top, angle, scaleX, scaleY, zoomX, zoomY } = position;
+      const textImgData = await createTextImg({ textContent, bgColor, textColor, textBasicInfo });
+      return new Promise((resolve, reject) => {
+        fabric.fabric.Image.fromURL(textImgData.base64Image, (imgData) => {
+          imgData.set({
+            left,
+            top,
+            angle,
+            width: textImgData.width,
+            height: textImgData.height,
+            scaleX,
+            scaleY,
+            clipData: {
+              id: uuid.v4(),
+              inPoint: Math.floor(frame / 30 * 1e6),
+              inFrame: frame,
+              type: "\u6587\u5B57",
+              textBasicInfo,
+              textColor,
+              text: textContent,
+              bgColor
+            }
+          });
+          imgData.on("selected", (options) => {
+            options.target.isSelected = -1;
+          });
+          imgData.on("moving", (options) => {
+            options.transform.target.isSelected = 0;
+          });
+          imgData.on("modified", () => {
+            const fObj = convertToJSON(imgData);
+            vmmlConverterRef.current.updateClip(fObj);
+          });
+          canvas.centerObject(imgData);
+          canvas.add(imgData);
+          setTimeout(() => {
+            canvas.renderAll();
+          });
+          onVideoChange(imgData.clipData);
+          vmmlConverterRef.current.addTextClip(convertToJSON(imgData));
+          resolve(true);
+        });
+      });
+    };
+    const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }) => {
+      const textImgData = await createTextImg({ textContent, bgColor, textColor, fontAssetUrl, textBasicInfo });
+      const target = fc.getObjects().find((item) => item.clipData.id === id);
+      target.setSrc(textImgData.base64Image, (img) => {
+        img.set({
+          visible: true,
+          clipData: {
+            ...img.clipData,
+            textBasicInfo,
+            textColor,
+            text: textContent,
+            bgColor,
+            isAiError: false
+          }
+        });
+        img.setCoords();
+        fc.renderAll();
+        vmmlConverterRef.current.updateClip(convertToJSON(img));
+      });
+    };
+    const changeObjectVisible = (id, visible = true) => {
+      const target = fc.getObjects().find((item) => item.clipData.id === id);
+      target.set({ visible });
+      fc.renderAll();
+    };
+    const getfObjectNums = (type) => {
+      if (fc) {
+        const objects = fc.getObjects();
+        return objects.filter((item) => item.clipData.type === type && !item.clipData.originClip).length;
+      }
+    };
+    const getfcObject = () => {
+      if (fc) {
+        return fc.getObjects();
+      }
+    };
+    const styles = react.useMemo(() => {
+      return {
+        position: "absolute",
+        top: canvasSize.top,
+        display: showCanvas ? "block" : "none"
+      };
+    }, [showCanvas]);
+    react.useEffect(() => {
+      if (!fc && canvasSize.width) {
+        initCanvas();
+      }
+      return () => {
+        if (fc) {
+          fc.dispose();
+          setFc(null);
+        }
+      };
+    }, [canvasSize.width]);
+    react.useEffect(() => {
+      if (!previewState && fc) {
+        fc.discardActiveObject();
+        checkObjectInPoint();
+      }
+    }, [previewState]);
+    react.useEffect(() => {
+      if (fc) {
+        if (dragState === 1) {
+          fc.discardActiveObject();
+        }
+      }
+    }, [fc, dragState]);
+    react.useEffect(() => {
+      if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
+        vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
+      }
+    }, [canvasSize, vmml]);
+    react.useEffect(() => {
+      if (fc) {
+        const historyClass2 = new HistoryClass(fc);
+        setHistory(historyClass2);
+        if (waitFcTasks.current.length) {
+          waitFcTasks.current.forEach((item) => item(fc));
+          waitFcTasks.current = [];
+        }
+      }
+    }, [fc]);
+    react.useImperativeHandle(ref, () => ({
+      createImage,
+      createText,
+      updateText,
+      handleRedo,
+      handleUndo,
+      getActions,
+      getfObjectNums,
+      updateImage,
+      getfcObject,
+      checkObjectInPoint,
+      createImageFromClip,
+      createTextFromClip,
+      changeObjectVisible
+    }));
+    const getActions = () => {
+      if (history) {
+        return history.getActionType();
+      }
+      return [];
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles, children: /* @__PURE__ */ jsxRuntime.jsx("canvas", { id: "canvas" }) });
+  }
+);
+var EditorCanvas_default = EditorCanvas;
+
+// src/assets/css/loading.scss
+var css2 = `.page-loader {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+  overflow: hidden;
+}
+.page-loader .light {
+  width: 75%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  transform: skew(-45deg) translateX(-400%);
+  animation: animate_light 1s infinite;
+}
+
+@keyframes animate_light {
+  100% {
+    transform: skew(-45deg) translateX(200%);
+  }
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiRDpcXHByb2plY3RzXFx2bW1sLXBsYXllclxccGFja2FnZXNcXGVkaXRvclxcc3JjXFxhc3NldHNcXGNzcyIsInNvdXJjZXMiOlsibG9hZGluZy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUNBO0VBQ0U7RUFDQTtFQUNBO0VBT0E7RUFDQTs7O0FBSUo7RUFDRTtJQUNFIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbi5wYWdlLWxvYWRlciB7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIHRvcDogMDtcclxuICB3aWR0aDogMTAwJTtcclxuICBoZWlnaHQ6IDEwMCU7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHotaW5kZXg6IDEwMDtcclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIC5saWdodCB7XHJcbiAgICB3aWR0aDogNzUlO1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDkwZGVnLFxyXG4gICAgICAgIHJnYmEoMjU1LCAyNTUsIDI1NSwgMCksXHJcbiAgICAgICAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSxcclxuICAgICAgICByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMyksXHJcbiAgICAgICAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSxcclxuICAgICAgICByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMCksXHJcbiAgICAgICk7XHJcbiAgICB0cmFuc2Zvcm06IHNrZXcoLTQ1ZGVnKSB0cmFuc2xhdGVYKC00MDAlKTtcclxuICAgIGFuaW1hdGlvbjogYW5pbWF0ZV9saWdodCAxcyBpbmZpbml0ZTtcclxuICB9XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgYW5pbWF0ZV9saWdodCB7XHJcbiAgMTAwJSB7XHJcbiAgICB0cmFuc2Zvcm06IHNrZXcoLTQ1ZGVnKSB0cmFuc2xhdGVYKDIwMCUpO1xyXG4gIH1cclxufSJdfQ== */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
+var Loaidng = ({ show }) => {
+  const styles = {
+    display: show ? "flex" : "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles, className: "page-loader", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "light" }) });
+};
+var Loading_default = Loaidng;
+
+// src/assets/css/maxTextLayer.scss
+var css3 = `.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.container .main_text {
+  background: #000000;
+  border-radius: 16px;
+  backdrop-filter: blur(40px);
+  padding: 3.2vw;
+  font-weight: 400;
+  font-size: 4vw;
+  color: #FFFFFF;
+  line-height: 5.6vw;
+  text-align: right;
+  font-style: normal;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiRDpcXHByb2plY3RzXFx2bW1sLXBsYXllclxccGFja2FnZXNcXGVkaXRvclxcc3JjXFxhc3NldHNcXGNzcyIsInNvdXJjZXMiOlsibWF4VGV4dExheWVyLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUUE7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIiR2bV9iYXNlOiA3NTA7XHJcblxyXG5AZnVuY3Rpb24gdm0oJHB4KSB7XHJcblxyXG4gICAgQHJldHVybiAoJHB4IC8gNzUwKSAqIDEwMHZ3O1xyXG5cclxufVxyXG5cclxuLmNvbnRhaW5lcntcclxuICB3aWR0aDogMTAwdnc7XHJcbiAgaGVpZ2h0OiAxMDB2aDtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgbGVmdDogMDtcclxuICB0b3A6IDA7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWZsb3c6IHJvdyBub3dyYXA7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAubWFpbl90ZXh0e1xyXG4gICAgYmFja2dyb3VuZDogIzAwMDAwMDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDE2cHg7XHJcbiAgICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoNDBweCk7XHJcbiAgICBwYWRkaW5nOiB2bSgyNCk7XHJcbiAgICBmb250LXdlaWdodDogNDAwO1xyXG4gICAgZm9udC1zaXplOiB2bSgzMCk7XHJcbiAgICBjb2xvcjogI0ZGRkZGRjtcclxuICAgIGxpbmUtaGVpZ2h0OiB2bSg0Mik7XHJcbiAgICB0ZXh0LWFsaWduOiByaWdodDtcclxuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcclxuICB9XHJcbn0iXX0= */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css3));
+var MaxTextLayer = ({
+  show = false,
+  textLayerHide,
+  text
+}) => {
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      textLayerHide();
+    }, 2e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+  return show && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", onClick: textLayerHide, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "main_text", children: text }) }) });
+};
+var MaxTextLayer_default = MaxTextLayer;
+
+// src/assets/css/editorTextMenu.scss
+var css4 = `@charset "UTF-8";
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 24px;
+  overflow: hidden;
+}
+.overlay > .text-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 11.467vw;
+  padding-left: 4.4vw;
+  padding-right: 3.2vw;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  transition: all 0.01s;
+  z-index: 16;
+}
+.overlay > .text-header > .close {
+  width: 5.0666666667vw;
+  height: 5.0666666667vw;
+}
+.overlay > .text-header > .close img {
+  width: 100%;
+  height: 100%;
+}
+.overlay > .text-header > .history-operate {
+  height: 7.2vw;
+  display: none;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay > .text-header > .history-operate img {
+  width: 4.667vw;
+  height: 5.067vw;
+}
+.overlay > .text-header > .history-operate > img:last-child {
+  margin-left: 8vw;
+}
+.overlay > .text-header > .next-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16vw;
+  height: 7.2vw;
+  line-height: 7.2vw;
+  background: #1677FF;
+  border-radius: 6.533vw;
+  text-align: center;
+  font-size: 3.2vw;
+  color: #fff;
+  border: 0;
+}
+.overlay .cover {
+  position: fixed;
+  bottom: 8vw;
+  width: 100%;
+  height: 10.6666666667vw;
+  z-index: 999;
+  transition: all 0.1s;
+}
+.overlay .text-input, .overlay .mappingarea {
+  font-family: PingFangSC, PingFang SC;
+  border: none;
+  font-size: 22px;
+  /* \u53D6\u6D88\u5916\u8FB9\u6846 */
+  outline: none;
+  background-color: rgba(0, 0, 0, 0);
+  line-height: 30px;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  transition: all 0.1s;
+}
+.overlay .text-input::-webkit-scrollbar, .overlay .mappingarea::-webkit-scrollbar {
+  display: none;
+}
+.overlay .text-input {
+  padding-top: 1.0666666667vw;
+  padding-bottom: 1.0666666667vw;
+  padding-left: 1.6vw;
+  padding-right: 1.3333333333vw;
+  z-index: 10;
+  width: 84vw;
+  caret-color: #1677ff;
+  position: absolute;
+  top: 30%;
+  left: 5%;
+  height: 200px;
+  word-break: break-all;
+}
+.overlay .mappingarea {
+  padding-top: 1.0666666667vw;
+  padding-bottom: 1.0666666667vw;
+  padding-left: 1.6vw;
+  padding-right: 1.3333333333vw;
+  border-radius: 1.3333333333vw;
+  border: 0;
+  position: fixed;
+  top: 30%;
+  left: 5%;
+  height: fit-content;
+  max-height: 200px;
+  color: transparent;
+  overflow-y: scroll;
+  z-index: 9;
+  display: flex;
+  flex-flow: column nowrap;
+  box-sizing: content-box;
+}
+.overlay .mappingarea .mappingarea_span {
+  font-size: 22px;
+  max-width: 84vw;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiRDpcXHByb2plY3RzXFx2bW1sLXBsYXllclxccGFja2FnZXNcXGVkaXRvclxcc3JjXFxhc3NldHNcXGNzcyIsInNvdXJjZXMiOlsiZWRpdG9yVGV4dE1lbnUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBT0E7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBOztBQUVBO0VBQ0U7RUFDQTs7QUFJSjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0U7RUFDQTs7QUFHRjtFQUNFOztBQUlKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUlKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUdGO0VBRUU7RUFDQTtFQUVBO0FBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFLQTtFQUNBO0VBQ0E7O0FBTEE7RUFDRTs7QUFNSjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBQ0E7RUFDRTtFQUNBO0VBQ0E7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIiR2bV9iYXNlOiA3NTA7XHJcblxyXG5AZnVuY3Rpb24gdm0oJHB4KSB7XHJcblxyXG4gICAgQHJldHVybiAoJHB4IC8gNzUwKSAqIDEwMHZ3O1xyXG5cclxufVxyXG4ub3ZlcmxheSB7XHJcbiAgcG9zaXRpb246IGZpeGVkO1xyXG4gIHRvcDogMDtcclxuICBsZWZ0OiAwO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMTAwJTtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNSk7XHJcbiAgLy8gYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpO1xyXG4gIC8vIC13ZWJraXQtYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpO1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICBjb2xvcjogd2hpdGU7XHJcbiAgZm9udC1zaXplOiAyNHB4O1xyXG4gIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgLy8g6aG26YOoXHJcbiAgJj4udGV4dC1oZWFkZXIge1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGhlaWdodDogMTEuNDY3dnc7XHJcbiAgICBwYWRkaW5nLWxlZnQ6IDQuNHZ3O1xyXG4gICAgcGFkZGluZy1yaWdodDogMy4ydnc7XHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDAuMDFzO1xyXG4gICAgei1pbmRleDoxNjtcclxuICAgICY+LmNsb3NlIHtcclxuICAgICAgd2lkdGg6IHZtKDM4KTtcclxuICAgICAgaGVpZ2h0OiB2bSgzOCk7XHJcblxyXG4gICAgICBpbWcge1xyXG4gICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgIGhlaWdodDogMTAwJTtcclxuICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgICY+Lmhpc3Rvcnktb3BlcmF0ZSB7XHJcbiAgICAgIGhlaWdodDogNy4ydnc7XHJcbiAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgbGVmdDogNTAlO1xyXG4gICAgICB0b3A6IDUwJTtcclxuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7XHJcblxyXG4gICAgICBpbWcge1xyXG4gICAgICAgIHdpZHRoOiA0LjY2N3Z3O1xyXG4gICAgICAgIGhlaWdodDogNS4wNjd2dztcclxuICAgICAgfVxyXG5cclxuICAgICAgJj5pbWc6bGFzdC1jaGlsZCB7XHJcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDh2dztcclxuICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgICY+Lm5leHQtYnV0dG9uIHtcclxuICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAgIHdpZHRoOiAxNnZ3O1xyXG4gICAgICBoZWlnaHQ6IDcuMnZ3O1xyXG4gICAgICBsaW5lLWhlaWdodDogNy4ydnc7XHJcbiAgICAgIGJhY2tncm91bmQ6ICMxNjc3RkY7XHJcbiAgICAgIGJvcmRlci1yYWRpdXM6IDYuNTMzdnc7XHJcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuICAgICAgZm9udC1zaXplOiAzLjJ2dztcclxuICAgICAgY29sb3I6ICNmZmY7XHJcbiAgICAgIGJvcmRlcjogMDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC5jb3ZlciB7XHJcbiAgICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgICBib3R0b206IHZtKDYwKTtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgaGVpZ2h0OnZtKDgwKTtcclxuICAgIHotaW5kZXg6IDk5OTtcclxuICAgIHRyYW5zaXRpb246IGFsbCAwLjFzO1xyXG4gIH1cclxuXHJcbiAgLnRleHQtaW5wdXQsLm1hcHBpbmdhcmVhe1xyXG4gICAgLy8gZm9udC1mYW1pbHk6O1xyXG4gICAgZm9udC1mYW1pbHk6IFBpbmdGYW5nU0MsIFBpbmdGYW5nIFNDO1xyXG4gICAgYm9yZGVyOiBub25lO1xyXG4gICAgLy8gZm9udC13ZWlnaHQ6IDYwMDtcclxuICAgIGZvbnQtc2l6ZTogMjJweDtcclxuICAgIC8qIOWPlua2iOWklui+ueahhiAqL1xyXG4gICAgb3V0bGluZTogbm9uZTtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMCk7XHJcbiAgICBsaW5lLWhlaWdodDogMzBweDtcclxuICAgIC8vIOmakOiXj+a7muWKqOadoe+8jOS9huS7jeeEtuS/neaMgea7muWKqOWKn+iDvVxyXG4gICAgJjo6LXdlYmtpdC1zY3JvbGxiYXIgeyBcclxuICAgICAgZGlzcGxheTogbm9uZTsgXHJcbiAgICB9XHJcbiAgICAtbXMtb3ZlcmZsb3ctc3R5bGU6IG5vbmU7ICAvKiBJRSBhbmQgRWRnZSAqL1xyXG4gICAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOyAgLyogRmlyZWZveCAqL1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDAuMXM7XHJcbiAgfVxyXG4gIC50ZXh0LWlucHV0e1xyXG4gICAgcGFkZGluZy10b3A6IHZtKDgpO1xyXG4gICAgcGFkZGluZy1ib3R0b206IHZtKDgpO1xyXG4gICAgcGFkZGluZy1sZWZ0OiB2bSgxMik7XHJcbiAgICBwYWRkaW5nLXJpZ2h0OiB2bSgxMCk7XHJcbiAgICB6LWluZGV4OiAxMDtcclxuICAgIHdpZHRoOiA4NHZ3O1xyXG4gICAgY2FyZXQtY29sb3I6ICMxNjc3RkZGRjtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHRvcDogMzAlO1xyXG4gICAgbGVmdDogNSU7XHJcbiAgICBoZWlnaHQ6IDIwMHB4O1xyXG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xyXG4gICAgLy8gcGFkZGluZzogdm0oMTgpO1xyXG4gIH1cclxuICAubWFwcGluZ2FyZWF7XHJcbiAgICBwYWRkaW5nLXRvcDogdm0oOCk7XHJcbiAgICBwYWRkaW5nLWJvdHRvbTogdm0oOCk7XHJcbiAgICBwYWRkaW5nLWxlZnQ6IHZtKDEyKTtcclxuICAgIHBhZGRpbmctcmlnaHQ6IHZtKDEwKTtcclxuICAgIGJvcmRlci1yYWRpdXM6IHZtKDEwKTtcclxuICAgIGJvcmRlcjowO1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgdG9wOiAzMCU7XHJcbiAgICBsZWZ0OiA1JTtcclxuICAgIGhlaWdodDogZml0LWNvbnRlbnQ7XHJcbiAgICBtYXgtaGVpZ2h0OiAyMDBweDtcclxuICAgIGNvbG9yOiB0cmFuc3BhcmVudDsgLy/orr7nva7popzoibLpgI/mmI7vvIzkv53or4Hog4zmma/popzoibJcclxuICAgIG92ZXJmbG93LXk6IHNjcm9sbDtcclxuICAgIHotaW5kZXg6IDk7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1mbG93OiBjb2x1bW4gbm93cmFwO1xyXG4gICAgYm94LXNpemluZzogY29udGVudC1ib3g7XHJcbiAgICAubWFwcGluZ2FyZWFfc3BhbntcclxuICAgICAgZm9udC1zaXplOiAyMnB4O1xyXG4gICAgICBtYXgtd2lkdGg6IDg0dnc7XHJcbiAgICAgIHdoaXRlLXNwYWNlOiBwcmUtd3JhcDtcclxuICAgICAgd29yZC1icmVhazogYnJlYWstYWxsO1xyXG4gICAgfVxyXG4gIH1cclxufSJdfQ== */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css4));
+var checkIPhoneSeries = () => {
+  const screenWidth = window.screen.width;
+  const screenHeight = window.screen.height;
+  if (screenWidth === 320 && screenHeight === 480) {
+    return "iPhone 4 or 4S";
+  } else if (screenWidth === 375 && screenHeight === 667) {
+    return "iPhone 6/7/8";
+  } else if (screenWidth === 414 && screenHeight === 736) {
+    return "iPhone 6/7/8 Plus";
+  } else if (screenWidth === 375 && screenHeight === 812) {
+    return "iPhone X/XS";
+  } else if (screenWidth === 414 && screenHeight === 896) {
+    return "iPhone XR/11";
+  } else if (screenWidth === 414 && screenHeight === 844) {
+    return "iPhone 12 mini";
+  } else if (screenWidth === 414 && screenHeight === 915) {
+    return "iPhone 13 Pro Max/12 Pro Max";
+  } else if (screenWidth === 390 && screenHeight === 844) {
+    return "iPhone 13 mini";
+  } else {
+    return "Unknown iPhone model";
+  }
+};
+var iPhoneAdapter = (series) => {
+  const seriesArr = ["iPhone 6/7/8 Plus", "iPhone 6/7/8"];
+  return seriesArr.includes(series);
+};
+var watchKeyBoard = (callback) => {
+  const focusInHandler = (e) => {
+    callback(true);
+    stopMove();
+  };
+  const focusOutHandler = (e) => {
+    callback(false);
+  };
+  document.body.addEventListener("focusin", focusInHandler);
+  document.body.addEventListener("focusout", focusOutHandler);
+  return () => {
+    document.body.removeEventListener("focusin", focusInHandler);
+    document.body.removeEventListener("focusout", focusOutHandler);
+  };
+};
+var stopMove = () => {
+  const dom = document.getElementsByClassName("overlay")[0];
+  const element = document.querySelector(".mappingarea");
+  const stopScroll = (e) => {
+    var _a, _b, _c;
+    const lastTouchPositionX = 0;
+    const lastTouchPositionY = 0;
+    const currentTouchPositionX = e.touches[0].clientX;
+    const currentTouchPositionY = e.touches[0].clientY;
+    const deltaX = currentTouchPositionX - lastTouchPositionX;
+    const deltaY = currentTouchPositionY - lastTouchPositionY;
+    if (["text-header", "overlay", "text_bg_change"].includes((_a = e.target) == null ? void 0 : _a.className)) {
+      e.preventDefault();
+    }
+    if (element) {
+      const willOverflow = element.scrollHeight > element.clientHeight;
+      if (willOverflow) {
+        return;
+      } else if (((_b = e.target) == null ? void 0 : _b.className.split(" ").includes("color-item")) || ((_c = e.target) == null ? void 0 : _c.className) === "text_color_change") {
+        if (deltaX < 0 || deltaX > 0) {
+          return;
+        } else {
+          e.preventDefault();
+        }
+      } else {
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+          e.preventDefault();
+        }
+      }
+    }
+    e.preventDefault();
+  };
+  if (dom) {
+    dom.addEventListener("touchmove", stopScroll);
+  }
+};
+var onKeyBoardAction = (status, headerRef, textareaRef, coverRef, mappingareaRef, aimTop) => {
+  if (vmmlUtils.isIOS()) {
+    forIos(status, headerRef, textareaRef, coverRef);
+  }
+};
+var forIos = (status, headerRef, textareaRef, coverRef, mappingareaRef) => {
+  const series = checkIPhoneSeries();
+  const isIPhoneAdapt = iPhoneAdapter(series);
+  if (status) {
+    const totalHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    const keyBoardHeight = totalHeight * 0.25;
+    if (coverRef && textareaRef) {
+      const textareaRefPos = textareaRef.getBoundingClientRect();
+      const { height } = textareaRefPos;
+      if (isIPhoneAdapt) {
+        coverRef.style.bottom = `${keyBoardHeight + 50}px`;
+      } else {
+        coverRef.style.transform = `translateY(${-(height + 10)}px)`;
+      }
+    }
+  } else {
+    if (coverRef) {
+      if (isIPhoneAdapt) {
+        coverRef.style.bottom = `8vw`;
+      } else {
+        coverRef.style.transform = `translateY(0px)`;
+      }
+    }
+  }
+};
+
+// src/assets/css/colorSelector.scss
+var css5 = `@charset "UTF-8";
+.color-selector {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-right: 2.6666666667vw;
+}
+.color-selector .text_bg_change {
+  width: 6.4vw;
+  height: 6.4vw;
+  flex: 0 0 auto;
+  text-align: center;
+  line-height: 6.4vw;
+  padding: 0 4.8vw;
+  margin-right: 4vw;
+  border-right: 2px solid rgba(255, 255, 255, 0.4); /* \u8BBE\u7F6E\u5DE6\u8FB9\u6846\u7684\u5BBD\u5EA6\u3001\u6837\u5F0F\u548C\u989C\u8272 */
+}
+.color-selector .text_color_change {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  overflow-x: auto;
+  white-space: nowrap;
+  height: 100%;
+  padding-right: 1.3333333333vw;
+  align-items: center;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.color-selector .text_color_change > * {
+  flex-shrink: 0;
+}
+.color-selector .text_color_change .color-item {
+  width: 6.4vw;
+  height: 6.4vw;
+  border-radius: 50%;
+  margin: 0 2vw;
+  box-sizing: border-box;
+}
+.color-selector .text_color_change .black-border {
+  border: 0.2666666667vw solid #333333;
+}
+.color-selector .text_color_change .current {
+  box-shadow: 0 0 0 0.8vw #1677FF;
+}
+.color-selector .text_color_change::-webkit-scrollbar {
+  display: none;
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiRDpcXHByb2plY3RzXFx2bW1sLXBsYXllclxccGFja2FnZXNcXGVkaXRvclxcc3JjXFxhc3NldHNcXGNzcyIsInNvdXJjZXMiOlsiY29sb3JTZWxlY3Rvci5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFRQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFDQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBc0JBO0VBQ0E7O0FBdEJBO0VBQ0U7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVGO0VBQ0U7O0FBRUY7RUFFRTs7QUFHRjtFQUNJIiwic291cmNlc0NvbnRlbnQiOlsiJHZtX2Jhc2U6IDc1MDtcclxuXHJcbkBmdW5jdGlvbiB2bSgkcHgpIHtcclxuXHJcbiAgICBAcmV0dXJuICgkcHggLyA3NTApICogMTAwdnc7XHJcblxyXG59XHJcblxyXG4uY29sb3Itc2VsZWN0b3J7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgaGVpZ2h0OiAxMDAlO1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1mbG93OiByb3cgbm93cmFwO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgcGFkZGluZy1yaWdodDogdm0oMjApO1xyXG4gIC50ZXh0X2JnX2NoYW5nZXtcclxuICAgIHdpZHRoOiB2bSg0OCk7XHJcbiAgICBoZWlnaHQ6IHZtKDQ4KTtcclxuICAgIGZsZXg6IDAgMCBhdXRvO1xyXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgbGluZS1oZWlnaHQ6IHZtKDQ4KTtcclxuICAgIHBhZGRpbmc6MCB2bSgzNik7XHJcbiAgICBtYXJnaW4tcmlnaHQ6IHZtKDMwKTtcclxuICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkICNGRkZGRkY2NjsgLyog6K6+572u5bem6L655qGG55qE5a695bqm44CB5qC35byP5ZKM6aKc6ImyICovXHJcbiAgfVxyXG4gIC50ZXh0X2NvbG9yX2NoYW5nZXtcclxuICAgIGZsZXg6IDEgMSBhdXRvO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZmxvdzogcm93IG5vd3JhcDtcclxuICAgIG92ZXJmbG93LXg6IGF1dG87IC8vIOWFgeiuuOaoquWQkea7muWKqFxyXG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDsgLy8g56Gu5L+d5paH5pys5LiN5Lya5o2i6KGMXHJcbiAgICBoZWlnaHQ6MTAwJTtcclxuICAgIHBhZGRpbmctcmlnaHQ6IHZtKDEwKTtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAmID4gKiB7XHJcbiAgICAgIGZsZXgtc2hyaW5rOiAwOyAvLyDpmLLmraLlrZDlhYPntKDnvKnlsI9cclxuICAgIH1cclxuICAgIC5jb2xvci1pdGVte1xyXG4gICAgICB3aWR0aDogdm0oNDgpO1xyXG4gICAgICBoZWlnaHQ6dm0oNDgpO1xyXG4gICAgICBib3JkZXItcmFkaXVzOiA1MCU7XHJcbiAgICAgIG1hcmdpbjogMCB2bSgxNSk7XHJcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgICB9XHJcbiAgICAuYmxhY2stYm9yZGVye1xyXG4gICAgICBib3JkZXI6dm0oMikgc29saWQgIzMzMzMzM0ZGXHJcbiAgICB9XHJcbiAgICAuY3VycmVudHtcclxuICAgICAgLy8gYm9yZGVyOiB2bSg2KSBzb2xpZCAjMTY3N0ZGO1xyXG4gICAgICBib3gtc2hhZG93OiAwIDAgMCB2bSg2KSAjMTY3N0ZGO1xyXG4gICAgfVxyXG4gICAgLy8g6ZqQ6JeP5rua5Yqo5p2h77yM5L2G5LuN54S25L+d5oyB5rua5Yqo5Yqf6IO9XHJcbiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7IFxyXG4gICAgICAgIGRpc3BsYXk6IG5vbmU7IFxyXG4gICAgfVxyXG4gICAgLW1zLW92ZXJmbG93LXN0eWxlOiBub25lOyAgLyogSUUgYW5kIEVkZ2UgKi9cclxuICAgIHNjcm9sbGJhci13aWR0aDogbm9uZTsgIC8qIEZpcmVmb3ggKi9cclxuICB9XHJcbn0iXX0= */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css5));
+var colorList = [
+  { colorName: "white", colorValue: "rgb(255,255,255)" },
+  { colorName: "black", colorValue: "rgb(0,0,0)" },
+  { colorName: "gray", colorValue: "rgb(153,153,153)" },
+  { colorName: "red", colorValue: "rgb(248,82,81)" },
+  { colorName: "orange", colorValue: "rgb(250,158,60)" },
+  { colorName: "yellow", colorValue: "rgb(255,196,0)" },
+  { colorName: "lightGreen", colorValue: "rgb(145,212,0)" },
+  { colorName: "green", colorValue: "rgb(0,181,212)" },
+  { colorName: "lightBlue", colorValue: "rgb(0,183,244)" },
+  { colorName: "blue", colorValue: "rgb(23,120,255)" },
+  { colorName: "purple", colorValue: "rgb(82,95,255)" }
+];
+var ColorSelector = react.forwardRef(({ onColorChange, onBackGroundChange }, ref) => {
+  const [currentColorItem, setCurrentColorItem] = react.useState(colorList.find((color) => color.colorName === "red"));
+  react.useState(null);
+  const [isSetBack, setIsSetBack] = react.useState(false);
+  const setColorClass = (item) => {
+    const { colorName } = currentColorItem;
+    const classes = [
+      item.colorName === "black" && "black-border",
+      item.colorName === colorName && "current",
+      "color-item"
+    ].filter(Boolean).join(" ");
+    return classes;
+  };
+  const handleColorClick = (item) => {
+    setCurrentColorItem(item);
+    onColorChange(item);
+  };
+  const handleChangeBackGround = () => {
+    const setBgStatus = new Promise((resolve, reject) => {
+      setIsSetBack(!isSetBack);
+      resolve();
+    });
+    setBgStatus.then(() => {
+      onBackGroundChange(currentColorItem);
+    });
+  };
+  const getBackState = () => {
+    return isSetBack;
+  };
+  react.useImperativeHandle(ref, () => ({
+    getBackState,
+    setIsSetBack,
+    setCurrentColorItem
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-selector", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "text_bg_change",
+        onClick: () => {
+          handleChangeBackGround();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", src: isSetBack ? iconText2 : iconText1, style: { width: "100%", height: "100%" } })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text_color_change", children: colorList.map((item) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: setColorClass(item),
+          style: { backgroundColor: item.colorValue },
+          onClick: () => {
+            handleColorClick(item);
+          }
+        },
+        item.colorName
+      );
+    }) })
+  ] });
+});
+var ColorSelector_default = ColorSelector;
+var formatText = (text, maxLengthBase = 40) => {
+  var _a;
+  const newlineRegex = /(\r\n|\r|\n)/g;
+  const matches = ((_a = text.match(newlineRegex)) == null ? void 0 : _a.length) || 0;
+  const maxLength = maxLengthBase + matches;
+  let trimmedText = text.substring(0, maxLength);
+  if (text.length - matches === maxLengthBase) {
+    trimmedText = trimmedText.replace(/(\r\n|\r|\n)+$/g, "");
+  }
+  return trimmedText;
+};
+var TextMenu = react.forwardRef(({ createText, textClose, textInfo, showTextButtons }, ref) => {
+  const formRef = react.useRef(null);
+  const headerRef = react.useRef(null);
+  const textareaRef = react.useRef(null);
+  const coverRef = react.useRef(null);
+  const mappingarea = react.useRef(null);
+  const [textContent, setTextContent] = react.useState("");
+  const [bgColor, setBgColor] = react.useState("transparent");
+  const [textColor, setTextColor] = react.useState("rgb(248,82,81)");
+  const [textPos, setTextPos] = react.useState({ left: 0, top: 0, angle: 0, scaleX: 0.75, scaleY: 0.75, zoomX: 0, zoomY: 0 });
+  const [textBasicInfo, setTextBasicInfo] = react.useState({
+    colorName: "red",
+    colorValue: "rgb(248,82,81)",
+    isBack: false,
+    textAlign: "left"
+  });
+  const colorSelectorRef = react.useRef(null);
+  const [textContentOnShow, setTextContentOnShow] = react.useState([]);
+  const [scrollYValue, setScrollYValue] = react.useState(() => {
+    return Number.parseInt(localStorage.getItem("scrollYValue")) || null;
+  });
+  const scrollYValueRef = react.useRef(scrollYValue);
+  react.useEffect(() => {
+    const callback = (status) => {
+      if (scrollYValueRef.current === null) {
+        setTimeout(() => {
+          const newScrollYValue = window.scrollY;
+          setScrollYValue(newScrollYValue);
+          scrollYValueRef.current = newScrollYValue;
+          localStorage.setItem("scrollYValue", newScrollYValue.toString());
+        }, 150);
+      }
+      setTimeout(() => {
+        onKeyBoardAction(
+          status,
+          headerRef.current,
+          textareaRef.current,
+          coverRef.current,
+          mappingarea.current
+        );
+      }, 200);
+    };
+    const removeListeners = watchKeyBoard(callback);
+    return () => {
+      removeListeners();
+    };
+  }, []);
+  react.useEffect(() => {
+    const syncScroll = () => {
+      if (textareaRef.current && mappingarea.current) {
+        const scrollPosition = textareaRef.current.scrollTop;
+        mappingarea.current.scrollTop = scrollPosition;
+      }
+    };
+    if (textareaRef.current) {
+      textareaRef.current.addEventListener("scroll", syncScroll);
+      textareaRef.current.addEventListener("input", syncScroll);
+    }
+    return () => {
+      if (textareaRef.current) {
+        textareaRef.current.removeEventListener("scroll", syncScroll);
+        textareaRef.current.removeEventListener("input", syncScroll);
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    let lines = [];
+    if (textContent.includes("\r")) {
+      lines = textContent.split("\r");
+    } else {
+      lines = textContent.split("\n");
+    }
+    setTextContentOnShow(lines);
+  }, [textContent]);
+  react.useEffect(() => {
+    if (Object.keys(textInfo).length > 0) {
+      setText(textInfo);
+    } else {
+      resetInfo();
+    }
+  }, [textInfo]);
+  react.useEffect(() => {
+    if (!vmmlUtils.isIOS()) {
+      if (mappingarea.current && textareaRef.current) {
+        textareaRef.current.style.position = "static";
+        mappingarea.current.style.maxHeight = textareaRef.current.style.height = "50vh";
+        mappingarea.current.style.maxWidth = getComputedStyle(textareaRef.current).width;
+        textareaRef.current.focus();
+      }
+    } else {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    }
+  }, []);
+  const handleOnChange = (e) => {
+    const inputValue = e.target.value;
+    setTextContent(formatText(inputValue));
+  };
+  const handleSubmit = (e) => {
+    if (showTextButtons) {
+      e.preventDefault();
+    }
+    if (formRef.current) {
+      const formData = new FormData(formRef.current);
+      const formJson = Object.fromEntries(formData.entries());
+      const { input_content } = formJson;
+      renderText(input_content);
+    }
+  };
+  const handleChangeColor = (item) => {
+    setColor(item);
+  };
+  const onBackGroundChange = (currentColorItem) => {
+    setColor(currentColorItem);
+  };
+  const setColor = (colorItem) => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+    const { current } = colorSelectorRef;
+    const { colorName, colorValue } = colorItem;
+    const isBack = current ? current.getBackState() : false;
+    const textBasic = {
+      colorName,
+      colorValue,
+      isBack,
+      textAlign: textBasicInfo.textAlign
+    };
+    setTextBasicInfo(textBasic);
+    if (!isBack) {
+      setBgColor("transparent");
+      setTextColor(colorValue);
+    } else {
+      setBgColor(colorValue);
+      colorName === "white" || colorValue === "rgba(255, 255, 255, 1)" ? setTextColor("#000") : setTextColor("#fff");
+    }
+  };
+  const setText = (textInfo2) => {
+    const { bgColor: bgColor2, text, textColor: textColor2, left, top, angle, scaleX, scaleY, zoomX, zoomY, textBasicInfo: textBasicInfo2, width, height } = textInfo2;
+    const { isBack, colorName, colorValue } = textBasicInfo2;
+    const fillColor = text === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor2 === "rgba(0, 0, 0, 0)" ? "rgba(255, 255, 255, 1)" : textColor2;
+    setBgColor(bgColor2);
+    setTextColor(fillColor);
+    setTextContent(text);
+    setTextBasicInfo(textBasicInfo2);
+    setTextPos({ left, top, angle, scaleX, scaleY, zoomX, zoomY, width, height });
+    const { current } = colorSelectorRef;
+    if (!current) return;
+    current.setIsSetBack(isBack);
+    current.setCurrentColorItem({ colorName, colorValue });
+  };
+  const resetInfo = () => {
+    setBgColor("transparent");
+    setTextColor("rgb(248,82,81)");
+    setTextContent("");
+    setTextPos({ left: 0, top: 0, angle: 0, scaleX: 0.75, scaleY: 0.75, zoomX: 0, zoomY: 0 });
+  };
+  const close = () => {
+    textClose(textInfo.id);
+  };
+  const renderText = (input_content) => {
+    const { current } = mappingarea;
+    if (current) {
+      const computedStyle = window.getComputedStyle(current);
+      const { width, height } = computedStyle;
+      setTextPos(
+        Object.assign(textPos, { width: Number(width.split("px")[0]), height: Number(height.split("px")[0]) })
+      );
+    }
+    if (input_content && input_content.trim() !== "") {
+      const { id, fontFamily, fontAssetUrl } = textInfo;
+      createText({ textContent: input_content, bgColor, textColor, position: textPos, textBasicInfo, id, fontFamily, fontAssetUrl });
+    } else {
+      textClose(textInfo.id);
+    }
+  };
+  react.useImperativeHandle(ref, () => ({
+    setText,
+    close,
+    handleSubmit
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx("form", { method: "post", onSubmit: handleSubmit, ref: formRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overlay", children: [
+    showTextButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-header", ref: headerRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => close(), className: "close", children: /* @__PURE__ */ jsxRuntime.jsx("img", { crossOrigin: "anonymous", src: closeIcon, alt: "close" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "next-button", children: "\u5B8C\u6210" })
+    ] }),
+    !vmmlUtils.isIOS() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "edit_container", style: {
+      width: "100%",
+      position: "relative",
+      paddingLeft: "4.4vw",
+      paddingRight: "3.2vw",
+      display: "flex"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          cols: 20,
+          wrap: "hard",
+          name: "input_content",
+          className: "text-input",
+          value: textContent,
+          onChange: handleOnChange,
+          style: { color: textColor, width: "94%", fontFamily: textInfo.fontFamily }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "mappingarea",
+          ref: mappingarea,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          style: {
+            background: bgColor,
+            position: "absolute",
+            top: "0",
+            zIndex: "-1",
+            left: "4.4vw"
+          },
+          children: textContentOnShow.map((text, index) => {
+            return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mappingarea_span", style: { maxWidth: "100%" }, children: text ? text : " " }, index);
+          })
+        }
+      )
+    ] }),
+    vmmlUtils.isIOS() && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          cols: 20,
+          wrap: "hard",
+          name: "input_content",
+          className: "text-input",
+          value: textContent,
+          onChange: handleOnChange,
+          style: { color: textColor, fontFamily: textInfo.fontFamily }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "mappingarea",
+          ref: mappingarea,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          style: { background: bgColor },
+          children: textContentOnShow.map((text, index) => {
+            return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mappingarea_span", children: text ? text : " " }, index);
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: coverRef, className: "cover", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ColorSelector_default,
+      {
+        ref: colorSelectorRef,
+        onColorChange: handleChangeColor,
+        onBackGroundChange
+      }
+    ) })
+  ] }) });
+});
+var TextMenu_default = TextMenu;
+var VideoMenu = ({ createImage, videoMenus, menuState }) => {
+  const [active, setActive] = react.useState();
+  const [menus, setMenus] = react.useState([]);
+  const [items, setItems] = react.useState([]);
+  const onClickClass = ({ id, emojiList }) => {
+    setActive(id);
+    setItems(emojiList);
+  };
+  const onClickItem = ({ emojiId, fileUrl }) => {
+    if (menuState === "video") {
+      createImage(fileUrl, emojiId);
+    }
+  };
+  react.useEffect(() => {
+    setMenus(videoMenus);
+    if (videoMenus.length) {
+      onClickClass(videoMenus[0]);
+    }
+  }, [videoMenus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `editor-video-menu ${menuState === "video" ? "active" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-video-menu-header", children: menus.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: active === item.id ? "active" : "", onClick: () => onClickClass(item), children: item.classifyType }, item.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-video-menu-itmes", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => onClickItem(item), children: /* @__PURE__ */ jsxRuntime.jsx("img", { loading: "lazy", src: item.fileUrl.thumbnailUrl, alt: "\u7D20\u6750" }) }, item.emojiId)) })
+  ] });
+};
+var VideoMenu_default = VideoMenu;
+var historyClass = new HistoryClass();
+var EditorFn = ({
+  vmml,
+  pauseFrame = 0,
+  maxText = 10,
+  maxVideo = 5,
+  videoMenus = [],
+  onMenuChange,
+  showTextButtons = false,
+  editableArray = [],
+  templateId,
+  strategyId,
+  pauseWhenBuffering = false
+}, ref) => {
+  var _a;
+  vmml = vmmlUtils.convertVmmlTextScaleByForbidden(vmml);
+  const textMenuRef = react.useRef(null);
+  const vmmlPlayerRef = react.useRef();
+  const canvasRef = react.useRef();
+  const fps = 30;
+  const once = react.useRef(false);
+  const [player, setPlayer] = react.useState();
+  const [loading, setLoading] = react.useState(true);
+  const [frame, setFrame] = react.useState(pauseFrame);
+  const [isPlaying, setIsPlaying] = react.useState(false);
+  const [showCanvas, setShowCanvas] = react.useState(false);
+  const [durationInFrames, setDurationInFrames] = react.useState(vmmlUtils.getFrames(((_a = vmml == null ? void 0 : vmml.template) == null ? void 0 : _a.duration) || 1, fps));
+  const [previewState, setPreviewState] = react.useState(true);
+  const [menuState, setMenuState] = react.useState("");
+  const [canvasSize, setCanvasSize] = react.useState({ width: 0, height: 0, top: 0 });
+  const [textInfo, setTextInfo] = react.useState({});
+  const [isShowMaxTextLayer, setIsShowMaxTextLayer] = react.useState(false);
+  const [buffering, setBuffering] = react.useState(false);
+  const videoList = react.useRef([]);
+  const [signList, setSignList] = react.useState([]);
+  const [tips, setTips] = react.useState("");
+  const [dragState, setDragState] = react.useState(0);
+  const vmmlConverterRef = react.useRef(null);
+  const [initFcObjs, setInitFcObjs] = react.useState([]);
+  const vmmlFlag = react.useRef(false);
+  const needPlay = react.useRef(true);
+  const setVmml = () => {
+    const { current } = vmmlPlayerRef;
+    if (!current) return;
+    if (!once.current) {
+      current.setVmml(vmml, pauseFrame);
+    } else {
+      current.setVmml(vmml, Math.max(0, frame - 3));
+    }
+  };
+  const hideLoading = () => {
+    const { current } = vmmlPlayerRef;
+    vmmlFlag.current = false;
+    if (current && current.playerRef) {
+      setPlayer(current.playerRef);
+      current.unmute();
+      if (!once.current) {
+        once.current = true;
+      } else {
+        if (needPlay.current) {
+          current.play();
+        } else {
+          needPlay.current = true;
+        }
+      }
+    }
+    setShowCanvas(false);
+    setLoading(false);
+  };
+  const onClickMain = () => {
+    if (buffering) return;
+    const { current } = vmmlPlayerRef;
+    if (current) {
+      if (isPlaying) {
+        intoEdit();
+      } else {
+        current.unmute();
+        current.play();
+      }
+    }
+  };
+  const enterPreview = (canvas, hiddenMenu = false) => {
+    if (hiddenMenu) {
+      setMenuState("");
+    } else {
+      setMenuState("");
+      setPreviewState(true);
+      historyClass.onCanvasRoute(canvas);
+    }
+  };
+  const onControlsClick = () => {
+    if (previewState) {
+      const { current } = vmmlPlayerRef;
+      current.unmute();
+      current.play();
+    } else {
+      setMenuState("");
+      setPreviewState(true);
+    }
+  };
+  const onClickMenu = (type) => {
+    if (type === "text" && checkTextNum()) return;
+    if (type === "video" && checkVideoNum()) return;
+    if (previewState) {
+      intoEdit();
+    }
+    setTextInfo({});
+    setMenuState(type);
+  };
+  const checkTextNum = () => {
+    const { current } = canvasRef;
+    if (current) {
+      const textNums = current.getfObjectNums("\u6587\u5B57");
+      if (textNums >= maxText) {
+        setTips(`\u6700\u591A\u6DFB\u52A0${maxText}\u4E2A\u6587\u5B57`);
+        setIsShowMaxTextLayer(true);
+        return true;
+      }
+    }
+    return false;
+  };
+  const checkVideoNum = () => {
+    const { current } = canvasRef;
+    if (current) {
+      const videoNum = current.getfObjectNums("\u8868\u60C5\u5305");
+      if (videoNum >= maxVideo) {
+        setTips(`\u6700\u591A\u6DFB\u52A0${maxVideo}\u4E2A\u8868\u60C5\u5305`);
+        setIsShowMaxTextLayer(true);
+        return true;
+      }
+    }
+    return false;
+  };
+  const getfcObject = () => {
+    const { current } = canvasRef;
+    if (current) {
+      return current.getfcObject();
+    }
+    return [];
+  };
+  const intoEdit = (frame2) => {
+    const { current } = vmmlPlayerRef;
+    if (current) {
+      frame2 && current.seekTo(frame2);
+      current.pause();
+      if (canvasRef.current) {
+        const { current: canvasC } = canvasRef;
+        canvasC.checkObjectInPoint(frame2);
+      }
+      getAllVideoFrames();
+      setShowCanvas(true);
+      setPreviewState(false);
+    }
+  };
+  const getAllVideoFrames = () => {
+    const { current } = canvasRef;
+    const doms = document.querySelectorAll("[data-clipid][data-cliptype=video][data-editorType],[data-editclip='true'][data-cliptype=video]");
+    for (const item of Array.from(doms)) {
+      const id = item.getAttribute("data-clipid");
+      const video = item.querySelector("video");
+      const base64 = vmmlUtils.takeScreenshot(video);
+      current.updateImage(id, base64);
+    }
+    switchClipDisplay("none");
+  };
+  const switchClipDisplay = (display) => {
+    const clips = document.querySelectorAll("[data-editorType],[data-editclip='true']");
+    clips.forEach((clip) => {
+      clip.style.display = display;
+    });
+  };
+  const createImage = async (file, emojiId) => {
+    const { current } = canvasRef;
+    if (current && !checkVideoNum()) {
+      const fObj = await current.createImage(file, emojiId);
+      vmmlConverterRef.current.addVideoClip(fObj);
+      setMenuState("");
+      setPreviewState(true);
+    }
+  };
+  const createText = async (data) => {
+    const { current } = canvasRef;
+    if (current) {
+      const server = data.id ? "updateText" : "createText";
+      await current[server](data);
+      setMenuState("");
+    }
+  };
+  const onVideoChange = (clipData) => {
+    const index = videoList.current.findIndex((item) => item.id === clipData.id);
+    if (index > -1) {
+      videoList.current.splice(index, 1);
+    } else {
+      videoList.current.push(clipData);
+    }
+    setSignList([...videoList.current]);
+  };
+  const getActions = () => {
+    const { current } = canvasRef;
+    return current.getActions().length;
+  };
+  const textClose = (id) => {
+    const { current } = canvasRef;
+    id && current.changeObjectVisible(id);
+    setMenuState("");
+  };
+  const intoTextEdit = (textInfo2) => {
+    setMenuState("text");
+    setTextInfo(textInfo2);
+  };
+  const onFrameUpdate = (e) => {
+    setFrame(e.detail.frame);
+  };
+  const onPlay = () => {
+    setIsPlaying(true);
+  };
+  const onPause = () => {
+    setIsPlaying(false);
+  };
+  const onWaiting = () => {
+    setShowCanvas(false);
+    setPreviewState(true);
+    setBuffering(true);
+  };
+  const onResume = () => {
+    setBuffering(false);
+  };
+  const initCanEditClips = (tracks = []) => {
+    if (editableArray.length) {
+      const list = findEditClips(tracks);
+      if (list.length) {
+        const { current } = canvasRef;
+        list.forEach((clip) => {
+          if (clip.videoClip) {
+            current.createImageFromClip(clip);
+          } else {
+            current.createTextFromClip(clip);
+          }
+        });
+      }
+    }
+  };
+  const findEditClips = (tracks = []) => {
+    const list = [];
+    tracks.forEach((track) => {
+      track.clips.forEach((clip) => {
+        if (editableArray.includes(clip.id)) {
+          clip.edit = true;
+          list.push(clip);
+        }
+      });
+    });
+    return list;
+  };
+  const initFcObjects = (tracks = []) => {
+    const fcTracks = tracks.filter((item) => item.editorType);
+    if (fcTracks.length) {
+      const clips = fcTracks.map((item) => item.clips).flat().filter((item) => Reflect.has(item, "fObj"));
+      const fObjs = clips.map((item) => item.fObj);
+      setInitFcObjs(fObjs);
+      fObjs.forEach((item) => {
+        onVideoChange(item.clipData);
+      });
+    }
+  };
+  const getVmml = () => {
+    try {
+      const tracks = vmml.template.tracks.filter((item) => item.editorType === "\u6587\u5B57");
+      tracks.forEach((track) => {
+        track.clips.forEach((clip) => {
+          clip.fObj.src = "";
+        });
+      });
+    } catch {
+      console.log("\u51FA\u9519\u4E86");
+    }
+    return vmml;
+  };
+  const getPlayer = () => {
+    return player;
+  };
+  react.useEffect(() => {
+    if (onMenuChange && typeof onMenuChange === "function") {
+      onMenuChange(menuState);
+    }
+  }, [menuState]);
+  react.useEffect(() => {
+    if (previewState && !vmmlFlag.current) {
+      vmmlFlag.current = true;
+      setVmml();
+    }
+  }, [previewState]);
+  react.useEffect(() => {
+    if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current && vmml) {
+      vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
+    }
+    if (canvasSize.width) {
+      initCanEditClips(vmml.template.tracks);
+    }
+  }, [canvasSize, vmml]);
+  react.useEffect(() => {
+    if (vmml) {
+      initFcObjects(vmml.template.tracks);
+    }
+  }, [vmml]);
+  react.useEffect(() => {
+    if (!showCanvas) {
+      switchClipDisplay("block");
+    }
+  }, [showCanvas]);
+  react.useEffect(() => {
+    if (player) {
+      const parent = player.getContainerNode();
+      if (!canvasSize.width) {
+        const playerElement = parent == null ? void 0 : parent.children[0];
+        const { width, height } = (playerElement == null ? void 0 : playerElement.getBoundingClientRect()) || {};
+        setCanvasSize({ width, height, top: playerElement.offsetTop });
+      }
+      player.addEventListener("play", onPlay);
+      player.addEventListener("pause", onPause);
+      player.addEventListener("frameupdate", onFrameUpdate);
+      player.addEventListener("waiting", onWaiting);
+      player.addEventListener("resume", onResume);
+      return () => {
+        player.removeEventListener("play", onPlay);
+        player.removeEventListener("pause", onPause);
+        player.removeEventListener("frameupdate", onFrameUpdate);
+        player.removeEventListener("waiting", onWaiting);
+        player.removeEventListener("resume", onResume);
+      };
+    }
+  }, [player]);
+  react.useEffect(() => {
+    if (dragState === 2) {
+      needPlay.current = false;
+      const { current } = vmmlPlayerRef;
+      current.setVmml(vmml, frame, false);
+      setShowCanvas(false);
+    }
+    if (dragState === 3 || dragState === 4) {
+      setShowCanvas(true);
+      setPreviewState(false);
+    }
+  }, [dragState]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      getActions,
+      getfcObject,
+      getVmml,
+      getPlayer,
+      texteditClose,
+      textFinish
+    }),
+    [vmml, player]
+  );
+  const texteditClose = () => {
+    if (textMenuRef) {
+      textMenuRef.current.close();
+    }
+  };
+  const textFinish = () => {
+    if (textMenuRef) {
+      textMenuRef.current.handleSubmit();
+    }
+  };
+  const menuStyles = react.useMemo(() => {
+    if (loading) {
+      return {
+        opacity: 0.4,
+        pointerEvents: "none"
+      };
+    }
+    return {};
+  }, [loading]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-vessel", onClick: () => {
+        setMenuState("");
+      }, children: /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `main ${menuState === "text" ? "text-style" : ""}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vessel", onClick: onClickMain, children: /* @__PURE__ */ jsxRuntime.jsx(
+          vmmlPlayer.VmmlPlayer,
+          {
+            ref: vmmlPlayerRef,
+            vmml,
+            existenceBorderRadio: true,
+            moveToBeginningWhenEnded: true,
+            isEditorState: true,
+            muted: true,
+            fps,
+            hideLoading,
+            editableArray,
+            premountFor: 40,
+            pauseWhenBuffering
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EditorCanvas_default,
+          {
+            ref: canvasRef,
+            previewState,
+            showCanvas,
+            canvasSize,
+            enterPreview,
+            intoTextEdit,
+            frame,
+            vmml,
+            dragState,
+            initFcObjs,
+            onVideoChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "controls-box", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Controls_default,
+          {
+            player,
+            vmmlRef: vmmlPlayerRef,
+            fps,
+            durationInFrames,
+            intoEdit,
+            frame,
+            isPlaying,
+            setDragState,
+            onControlsClick,
+            signList
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Loading_default, { show: loading })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "padding-box" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { style: menuStyles, className: `footer ${menuState === "text" ? "text-style" : ""}`, children: [
+        maxText > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            onClick: () => onClickMenu("text"),
+            "data-aspm-click": "c375146.d480849",
+            "data-aspm-expo": true,
+            "data-aspm-param": `Template_Id=${templateId}^Strategy_Id=${strategyId}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: wordIcon, alt: "word" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u6587\u5B57" })
+            ]
+          }
+        ),
+        maxVideo > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            onClick: () => onClickMenu("video"),
+            "data-aspm-click": "c375146.d480850",
+            "data-aspm-expo": true,
+            "data-aspm-param": `Template_Id=${templateId}^Strategy_Id=${strategyId}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: emotionIcon, alt: "emotion" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\u8868\u60C5\u5305" })
+            ]
+          }
+        )
+      ] }),
+      maxVideo > 0 && /* @__PURE__ */ jsxRuntime.jsx(VideoMenu_default, { menuState, createImage, videoMenus }),
+      menuState === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextMenu_default, { ref: textMenuRef, createText, textClose, textInfo, showTextButtons })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(MaxTextLayer_default, { textLayerHide: () => setIsShowMaxTextLayer(false), show: isShowMaxTextLayer, text: tips })
+  ] });
+};
+var forward = react.forwardRef;
+var Editor = forward(EditorFn);
+
+exports.Editor = Editor;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map