diff --git a/package-lock.json b/package-lock.json index 9604d3b..5dd2c84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2258,122 +2258,6 @@ "tslint": "^5.20.1", "webpack": "^4.0.0", "yorkie": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792369066&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz", - "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687000046&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz", - "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz?cache=0&sync_timestamp=1566248870121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-2.0.1.tgz", - "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", - "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", - "dev": true, - "optional": true - }, - "fork-ts-checker-webpack-plugin-v5": { - "version": "npm:fork-ts-checker-webpack-plugin@5.2.1", - "resolved": "https://registry.npm.taobao.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz?cache=0&sync_timestamp=1607084938170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffork-ts-checker-webpack-plugin%2Fdownload%2Ffork-ts-checker-webpack-plugin-5.2.1.tgz", - "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=", - "dev": true, - "optional": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@types/json-schema": "^7.0.5", - "chalk": "^4.1.0", - "cosmiconfig": "^6.0.0", - "deepmerge": "^4.2.2", - "fs-extra": "^9.0.0", - "memfs": "^3.1.2", - "minimatch": "^3.0.4", - "schema-utils": "2.7.0", - "semver": "^7.3.2", - "tapable": "^1.0.0" - } - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz", - "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", - "dev": true, - "optional": true - }, - "lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427484405&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz", - "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=", - "dev": true, - "optional": true, - "requires": { - "yallist": "^4.0.0" - } - }, - "schema-utils": { - "version": "2.7.0", - "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz", - "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=", - "dev": true, - "optional": true, - "requires": { - "@types/json-schema": "^7.0.4", - "ajv": "^6.12.2", - "ajv-keywords": "^3.4.1" - } - }, - "semver": { - "version": "7.3.4", - "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606852064928&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz", - "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=", - "dev": true, - "optional": true, - "requires": { - "lru-cache": "^6.0.0" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205010380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz", - "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "yallist": { - "version": "4.0.0", - "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz", - "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=", - "dev": true, - "optional": true - } } }, "@vue/cli-plugin-unit-jest": { @@ -2537,17 +2421,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687000046&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz", - "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz", @@ -2610,18 +2483,6 @@ "graceful-fs": "^4.1.6" } }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", - "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", @@ -2670,18 +2531,6 @@ "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=", "dev": true }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.1.2", - "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.2.tgz?cache=0&sync_timestamp=1608187974157&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.2.tgz", - "integrity": "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ=", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } - }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz", @@ -7478,6 +7327,122 @@ "worker-rpc": "^0.1.0" } }, + "fork-ts-checker-webpack-plugin-v5": { + "version": "npm:fork-ts-checker-webpack-plugin@5.2.1", + "resolved": "https://registry.npm.taobao.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz", + "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=", + "dev": true, + "optional": true, + "requires": { + "@babel/code-frame": "^7.8.3", + "@types/json-schema": "^7.0.5", + "chalk": "^4.1.0", + "cosmiconfig": "^6.0.0", + "deepmerge": "^4.2.2", + "fs-extra": "^9.0.0", + "memfs": "^3.1.2", + "minimatch": "^3.0.4", + "schema-utils": "2.7.0", + "semver": "^7.3.2", + "tapable": "^1.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792302448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz", + "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz", + "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz", + "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", + "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz", + "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", + "dev": true, + "optional": true + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz", + "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=", + "dev": true, + "optional": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "schema-utils": { + "version": "2.7.0", + "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz", + "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=", + "dev": true, + "optional": true, + "requires": { + "@types/json-schema": "^7.0.4", + "ajv": "^6.12.2", + "ajv-keywords": "^3.4.1" + } + }, + "semver": { + "version": "7.3.4", + "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606852122426&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz", + "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=", + "dev": true, + "optional": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz", + "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz", + "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=", + "dev": true, + "optional": true + } + } + }, "form-data": { "version": "2.3.3", "resolved": "https://registry.npm.taobao.org/form-data/download/form-data-2.3.3.tgz", @@ -15923,6 +15888,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.1.2", + "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.2.tgz?cache=0&sync_timestamp=1608187974157&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.2.tgz", + "integrity": "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ=", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792302448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz", + "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz", + "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz", + "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", + "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz", + "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", + "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz", + "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", diff --git a/src/configs/animation.ts b/src/configs/animation.ts index da1af7b..a90f296 100644 --- a/src/configs/animation.ts +++ b/src/configs/animation.ts @@ -1,38 +1,90 @@ export const ANIMATIONS = [ - { name: '渐显', value: 'fadeIn' }, - { name: '向右进入', value: 'fadeInLeft' }, - { name: '向左进入', value: 'fadeInRight' }, - { name: '向上进入', value: 'fadeInUp' }, - { name: '向下进入', value: 'fadeInDown' }, - { name: '向右长距进入', value: 'fadeInLeftBig' }, - { name: '向左长距进入', value: 'fadeInRightBig' }, - { name: '向上长距进入', value: 'fadeInUpBig' }, - { name: '向下长距进入', value: 'fadeInDownBig' }, - { name: '旋转进入', value: 'rotateIn' }, - { name: '左顺时针旋转', value: 'rotateInDownLeft' }, - { name: '右逆时针旋转', value: 'rotateInDownRight' }, - { name: '左逆时针旋转', value: 'rotateInUpLeft' }, - { name: '右逆时针旋转', value: 'rotateInUpRight' }, - { name: '弹入', value: 'bounceIn' }, - { name: '向右弹入', value: 'bounceInLeft' }, - { name: '向左弹入', value: 'bounceInRight' }, - { name: '向上弹入', value: 'bounceInUp' }, - { name: '向下弹入', value: 'bounceInDown' }, - { name: '光速从右进入', value: 'lightSpeedInRight' }, - { name: '光速从左进入', value: 'lightSpeedInLeft' }, - { name: '光速从右退出', value: 'lightSpeedOutRight' }, - { name: '光速从左退出', value: 'lightSpeedOutLeft' }, - { name: 'Y轴旋转', value: 'flip' }, - { name: '中心X轴旋转', value: 'flipInX' }, - { name: '中心Y轴旋转', value: 'flipInY' }, - { name: '左长半径旋转', value: 'rollIn' }, - { name: '由小变大进入', value: 'zoomIn' }, - { name: '左变大进入', value: 'zoomInLeft' }, - { name: '右变大进入', value: 'zoomInRight' }, - { name: '向上变大进入', value: 'zoomInUp' }, - { name: '向下变大进入', value: 'zoomInDown' }, - { name: '向右滑动展开', value: 'slideInLeft' }, - { name: '向左滑动展开', value: 'slideInRight' }, - { name: '向上滑动展开', value: 'slideInUp' }, - { name: '向下滑动展开', value: 'slideInDown' }, + { + type: 'bounce', + name: '弹跳', + children: [ + { name: '弹入', value: 'bounceIn' }, + { name: '向右弹入', value: 'bounceInLeft' }, + { name: '向左弹入', value: 'bounceInRight' }, + { name: '向上弹入', value: 'bounceInUp' }, + { name: '向下弹入', value: 'bounceInDown' }, + ], + }, + { + type: 'fade', + name: '浮现', + children: [ + { name: '浮入', value: 'fadeIn' }, + { name: '向下浮入', value: 'fadeInDown' }, + { name: '向下长距浮入', value: 'fadeInDownBig' }, + { name: '向右浮入', value: 'fadeInLeft' }, + { name: '向右长距浮入', value: 'fadeInLeftBig' }, + { name: '向左浮入', value: 'fadeInRight' }, + { name: '向左长距浮入', value: 'fadeInRightBig' }, + { name: '向上浮入', value: 'fadeInUp' }, + { name: '向上长距浮入', value: 'fadeInUpBig' }, + { name: '从左上浮入', value: 'fadeInTopLeft' }, + { name: '从右上浮入', value: 'fadeInTopRight' }, + { name: '从左下浮入', value: 'fadeInBottomLeft' }, + { name: '从右下浮入', value: 'fadeInBottomRight' }, + ], + }, + { + type: 'rotate', + name: '旋转', + children: [ + { name: '旋转进入', value: 'rotateIn' }, + { name: '基于左下旋转进入', value: 'rotateInDownLeft' }, + { name: '基于右下旋转进入', value: 'rotateInDownRight' }, + { name: '基于左上旋转进入', value: 'rotateInUpLeft' }, + { name: '基于右上旋转进入', value: 'rotateInUpRight' }, + ], + }, + { + type: 'zoom', + name: '缩放', + children: [ + { name: '放大进入', value: 'zoomIn' }, + { name: '向下放大进入', value: 'zoomInDown' }, + { name: '从左放大进入', value: 'zoomInLeft' }, + { name: '从右放大进入', value: 'zoomInRight' }, + { name: '向上放大进入', value: 'zoomInUp' }, + ], + }, + { + type: 'slide', + name: '滑入', + children: [ + { name: '向下滑入', value: 'slideInDown' }, + { name: '从右滑入', value: 'slideInLeft' }, + { name: '从左滑入', value: 'slideInRight' }, + { name: '向上滑入', value: 'slideInUp' }, + ], + }, + { + type: 'flip', + name: '翻转', + children: [ + { name: 'X轴翻转进入', value: 'flipInX' }, + { name: 'Y轴翻转进入', value: 'flipInY' }, + ], + }, + { + type: 'back', + name: '放大滑入', + children: [ + { name: '向下放大滑入', value: 'backInDown' }, + { name: '从左放大滑入', value: 'backInLeft' }, + { name: '从右放大滑入', value: 'backInRight' }, + { name: '向上放大滑入', value: 'backInUp' }, + ], + }, + { + type: 'lightSpeed', + name: '飞入', + children: [ + { name: '从右飞入', value: 'lightSpeedInRight' }, + { name: '从左飞入', value: 'lightSpeedInLeft' }, + ], + }, ] \ No newline at end of file diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts deleted file mode 100644 index 5d500fd..0000000 --- a/src/hooks/useAnimation.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { computed, Ref, ref } from 'vue' -import { useStore } from 'vuex' -import { State } from '@/store' -import { Slide } from '@/types/slides' - -const prefix = 'animate__' - -export default (elId: string) => { - const animationIndex = ref(-1) - const needWaitAnimation = ref(false) - - const store = useStore() - const currentSlide: Ref = computed(() => store.getters.currentSlide) - const animations = computed(() => currentSlide.value.animations || []) - - const elementIndexInAnimation = animations.value.findIndex(animation => animation.elId === elId) - if(elementIndexInAnimation !== -1 && elementIndexInAnimation < animationIndex.value) { - needWaitAnimation.value = true - } - - const runAnimation = () => { - const animations = currentSlide.value.animations || [] - if(!animations.length) return - if(animationIndex.value >= animations.length - 1) return - - animationIndex.value += 1 - const animation = animations[animationIndex.value] - - const elRef = document.querySelector(`#screen-el-${animation.elId}`) - if(elRef) { - const animationName = `${prefix}${animation.type}` - elRef.classList.add(`${prefix}animated`, animationName) - } - } - - const revokeAnimation = () => { - const animations = currentSlide.value.animations || [] - if(!animations.length) return - if(animationIndex.value <= 0) return - - animationIndex.value -= 1 - const animation = animations[animationIndex.value] - - const elRef = document.querySelector(`#screen-el-${animation.elId}`) - if(elRef) { - const animationName = `${prefix}${animation.type}` - elRef.classList.remove(`${prefix}animated`, animationName) - } - } - - return { - needWaitAnimation, - runAnimation, - revokeAnimation, - } -} \ No newline at end of file diff --git a/src/mocks/index.ts b/src/mocks/index.ts index 3037390..ca598ec 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -68,7 +68,7 @@ export const slides: Slide[] = [ }, { elId: 'xxx2', - type: 'zoomInDown', + type: 'zoomIn', duration: 1000, }, ], @@ -89,5 +89,12 @@ export const slides: Slide[] = [ content: '
😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒
', }, ], + animations: [ + { + elId: 'yyx1', + type: 'flipInX', + duration: 1000, + }, + ], }, ] \ No newline at end of file diff --git a/src/store/constants.ts b/src/store/constants.ts index 1859ab3..e3b8dae 100644 --- a/src/store/constants.ts +++ b/src/store/constants.ts @@ -10,6 +10,7 @@ export enum MutationTypes { SET_DISABLE_HOTKEYS_STATE = 'setDisableHotkeysState', SET_GRID_LINES_STATE = 'setGridLinesState', SET_AVAILABLE_FONTS = 'setAvailableFonts', + SET_TOOLBAR_STATE = 'setToolbarState', // slides SET_SLIDES = 'setSlides', @@ -29,7 +30,7 @@ export enum MutationTypes { SET_SHIFT_KEY_STATE = 'setShiftKeyState', // screen - SET_SCREENING = 'SET_SCREENING' + SET_SCREENING = 'setScreening', } export enum ActionTypes { diff --git a/src/store/index.ts b/src/store/index.ts index d681c3a..ebcb3a4 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -20,6 +20,7 @@ export interface State { disableHotkeys: boolean; showGridLines: boolean; availableFonts: FontName[]; + toolbarState: string; slides: Slide[]; slideIndex: number; snapshotCursor: number; @@ -39,6 +40,7 @@ const state: State = { disableHotkeys: false, showGridLines: false, availableFonts: [], + toolbarState: '', slides: slides, slideIndex: 0, snapshotCursor: -1, diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 11b6572..ab0d70c 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -53,6 +53,10 @@ export const mutations: MutationTree = { state.availableFonts = FONT_NAMES.filter(font => isSupportFontFamily(font.en)) }, + [MutationTypes.SET_TOOLBAR_STATE](state, type) { + state.toolbarState = type + }, + // slides [MutationTypes.SET_SLIDES](state, slides: Slide[]) { diff --git a/src/views/Editor/Canvas/Operate/AnimationIndex.vue b/src/views/Editor/Canvas/Operate/AnimationIndex.vue deleted file mode 100644 index 9e41ed6..0000000 --- a/src/views/Editor/Canvas/Operate/AnimationIndex.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue index 99dace6..b9ddd23 100644 --- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue +++ b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue @@ -42,8 +42,6 @@ @mousedown.stop="rotateElement(elementInfo)" /> - - @@ -59,7 +57,6 @@ import useCommonOperate from '../hooks/useCommonOperate' import RotateHandler from './RotateHandler.vue' import ResizeHandler from './ResizeHandler.vue' import BorderLine from './BorderLine.vue' -import AnimationIndex from './AnimationIndex.vue' import ImageClipHandler from './ImageClipHandler.vue' export default defineComponent({ @@ -68,7 +65,6 @@ export default defineComponent({ RotateHandler, ResizeHandler, BorderLine, - AnimationIndex, ImageClipHandler, }, props: { @@ -92,10 +88,6 @@ export default defineComponent({ type: Boolean, required: true, }, - animationIndex: { - type: Number, - required: true, - }, rotateElement: { type: Function as PropType<(element: PPTImageElement) => void>, required: true, diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue index b4639c9..1dc1481 100644 --- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue +++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue @@ -29,8 +29,6 @@ @mousedown.stop="rotateElement(elementInfo)" /> - - @@ -46,7 +44,6 @@ import useCommonOperate from '../hooks/useCommonOperate' import RotateHandler from './RotateHandler.vue' import ResizeHandler from './ResizeHandler.vue' import BorderLine from './BorderLine.vue' -import AnimationIndex from './AnimationIndex.vue' export default defineComponent({ name: 'text-element-operate', @@ -54,7 +51,6 @@ export default defineComponent({ RotateHandler, ResizeHandler, BorderLine, - AnimationIndex, }, props: { elementInfo: { @@ -77,10 +73,6 @@ export default defineComponent({ type: Boolean, required: true, }, - animationIndex: { - type: Number, - required: true, - }, rotateElement: { type: Function as PropType<(element: PPTTextElement) => void>, required: true, diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue index 3d7b1c1..edac871 100644 --- a/src/views/Editor/Canvas/Operate/index.vue +++ b/src/views/Editor/Canvas/Operate/index.vue @@ -15,22 +15,29 @@ :isActive="isActive" :isActiveGroupElement="isActiveGroupElement" :isMultiSelect="isMultiSelect" - :animationIndex="animationIndex" + :animationIndex="elementIndexInAnimation" :rotateElement="rotateElement" :scaleElement="scaleElement" > + +
+ {{elementIndexInAnimation + 1}} +
\ No newline at end of file