提交一波

package.json

@@ -14,7 +14,7 @@
 		"copy-to-clipboard": "^3.2.0",
 		"core-js": "^2.6.5",
 		"crypto-js": "^3.1.9-1",
-		"element-ui": "^2.4.5",
+		"element-ui": "^2.13.1",
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",
 		"moment": "^2.24.0",

src/components/SvgaPreviewView.vue

 <template>
-	<div :draggable="draggable" @dragstart="onDragstart" ref="playerContainer" :style="style">
+	<div :draggable="draggable" @dragstart="onDragstart" ref="playerContainer" :style="style"
+	     @mouseenter="onMouseEnter"
+	     @mouseleave="onMouseLeave"
+	>
 
 	</div>
 </template>
@@ -24,6 +27,10 @@
 				type: Boolean,
 				default: false,
 			},
+			autoplay: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		data() {
 			return {
@@ -75,10 +82,24 @@
 					this.videoSize.height = videoItem.videoSize.height;
 					this.$nextTick(() => {
 						player.setVideoItem(videoItem);
-						player.startAnimation();
+						if(this.autoplay){
+							player.startAnimation();
+						}else{
+							player.stepToFrame(0);
+						}
 					});
 				}
 			},
+			onMouseEnter(){
+				if(!this.autoplay){
+					this.player.stepToFrame(0, true);
+				}
+			},
+			onMouseLeave(){
+				if(!this.autoplay){
+					this.player.stepToFrame(0);
+				}
+			},
 			...mapActions([
 				'loadSvga'
 			]),

src/locales/zh-CN.json

@@ -224,6 +224,7 @@
 	"Function cmd": "功能指令",
 	"Edit store": "编辑数据",
 	"Edit computed": "计算属性",
+	"Asset dependence": "素材依赖",
 	"Are you sure to delete this cmd?": "确定删除这个指令吗?",
 	"Store editor": "数据编辑器",
 	"Store": "数据",

src/store/modules/project.js

@@ -141,26 +141,27 @@ export const projectStore = {
 			console.log('updateAssetDep');
 
 			let assets = state.data.assets;
-			let view;
+			let explicitDepAssets;
 
-			for (let asset of assets) {
+			/*for (let asset of assets) {
 				if (asset.dep) {
 					let keys = Object.keys(asset.dep);
 					for (let key of keys) {
-						if (asset.uuid === 'ddcc89f2-dfa7-4015-92ae-c4e4dbc7de44') {
-							console.log('delete', asset.name);
-						}
 						Vue.delete(asset.dep, key);
 					}
 				} else {
 					Vue.set(asset, 'dep', {});
 				}
-			}
+			}*/
 
-			for (view of state.data.views) {
-				if (!view.implicitAsset) {
-					Vue.set(view, 'implicitAsset', []);
+			for (let view of state.data.views) {
+				if (!view.implicitDepAssets) {
+					Vue.set(view, 'implicitDepAssets', []);
 				}
+				if (!view.explicitDepAssets) {
+					Vue.set(view, 'explicitDepAssets', []);
+				}
+				explicitDepAssets = view.explicitDepAssets;
 				onHitViewNode(view);
 				traverseViewNode(view.children, onHitViewNode);
 			}
@@ -172,7 +173,10 @@ export const projectStore = {
 						let uuid = prop.replace(assetScheme, '');
 						let asset = assets.find(asset => asset.uuid === uuid);
 						if (asset) {
-							Vue.set(asset.dep, view.uuid, view.implicitAsset.includes(uuid) ? 2 : 1);
+							//Vue.set(asset.dep, view.uuid, view.implicitAsset.includes(uuid) ? 2 : 1);
+							if (!explicitDepAssets.includes(asset.uuid)){
+								explicitDepAssets.push(asset.uuid);
+							}
 						}
 					}
 				}
@@ -603,6 +607,11 @@ export const projectStore = {
 		assets(state) {
 			return state.data.assets;
 		},
+		assetDepFlag: state=> uuid => {
+			return state.data.views.filter(view=>
+				view.explicitDepAssets.includes(uuid) || view.implicitDepAssets.includes(uuid)
+			).length > 0 ? 0 : -1;
+		},
 		getProcess: state => behavior => {
 			return arrayFind(state.data.processes, process => process.id === behavior.meta);
 		},
@@ -980,8 +989,8 @@ async function packAssets(assets) {
 	let newAssets = assets.concat();
 	await packImages(newAssets, {getSheetUrlByUUID});
 
-	await Promise.all(newAssets.map(asset=>{
-		return new Promise(async (resolve, reject)=>{
+	await Promise.all(newAssets.map(asset => {
+		return new Promise(async (resolve, reject) => {
 			try {
 				if (asset.file) {
 					const {url} = await editorApi.uploadFile(asset.file, true).catch(e => {
@@ -1006,7 +1015,7 @@ async function packAssets(assets) {
 				}
 
 				resolve();
-			}catch (e) {
+			} catch (e) {
 				reject(e);
 			}
 		})

src/themes/light/assets.scss

@@ -67,7 +67,6 @@
 
 .file-list {
 	display: flex;
-	flex: 1;
 	flex-direction: row;
 	flex-wrap: wrap;
 
@@ -158,6 +157,14 @@
 			height: 0;
 			border-top: 10px solid black;
 			border-right: 10px solid transparent;
+			border-top-color: $--color-primary;
+
+			&.explicit{
+				border-top-color: $--color-danger;
+			}
+			&.implicit{
+				border-top-color: $--color-success;
+			}
 		}
 	}
 

src/themes/light/editor.scss

@@ -347,45 +347,6 @@
 	}
 }
 
-.store-editor-dialog {
-	.wrapper {
-		height: 50vh;
-
-		.tabs {
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-
-			.el-tabs__content {
-				flex: 1;
-
-				& > div {
-					height: 100%;
-				}
-
-				.editor {
-					width: 100%;
-					height: 100%;
-				}
-
-				.computed-editor{
-					.editor{
-						width: 100%;
-						height: 200px;
-					}
-				}
-			}
-		}
-
-	}
-
-	.dialog-footer{
-		.save-button{
-			margin-left: 10px;
-		}
-	}
-}
-
 .px-publish-view {
 	display: flex;
 	flex-direction: column;

src/themes/light/inspector.scss

@@ -133,3 +133,54 @@
 		}
 	}
 }
+
+.store-editor-dialog {
+	.wrapper {
+		height: 50vh;
+
+		.tabs {
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+
+			.el-tabs__content {
+				flex: 1;
+
+				& > div {
+					height: 100%;
+				}
+
+				.editor {
+					width: 100%;
+					height: 100%;
+				}
+
+				.computed-editor {
+					.editor {
+						width: 100%;
+						height: 200px;
+					}
+				}
+			}
+		}
+
+	}
+
+	.dialog-footer {
+		.save-button {
+			margin-left: 10px;
+		}
+	}
+}
+
+.asset-dependence-dialog {
+	.wrapper {
+		display: flex;
+		height: 50vh;
+
+		.assets-scrollbar {
+			flex: 1;
+			border: 1px solid $--border-color-light;
+		}
+	}
+}

src/views/Editor/Assets/AssetList.vue

@@ -23,6 +23,19 @@
 				type: Boolean,
 				default: false,
 			},
+			selectable: {
+				type: Boolean,
+				default: true,
+			},
+			assetsSource: {
+				type: Array,
+			},
+			explicitDepAssets: {
+				type: Array,
+			},
+			implicitDepAssets: {
+				type: Array,
+			},
 		},
 		data() {
 			return {
@@ -32,17 +45,18 @@
 		computed: {
 			selectedAssets() {
 				let assets = [];
-				for(let index of this.selectedIndices){
+				for (let index of this.selectedIndices) {
 					assets.push(this.assets[index]);
 				}
 				return assets;
 			},
-			combinable(){
+			combinable() {
 				return this.selectedIndices.length > 1
 			},
-			...mapGetters([
-				'assets',
-			])
+			assets() {
+				return this.assetsSource ? this.assetsSource : this.$store.getters.assets;
+			},
+			...mapGetters(['assetDepFlag'])
 		},
 		methods: {
 			showFileDetails(asset) {
@@ -50,6 +64,9 @@
 			},
 			onClickItem(asset, event) {
 				this.$emit('click-item', asset);
+				if (!this.selectable) {
+					return;
+				}
 				if (event.altKey) {
 					if (this.isSelected(asset)) {
 						this.unselectItem(asset);
@@ -109,6 +126,19 @@
 				}
 				return this.selectedIndices.includes(index);
 			},
+			getDepFlag(uuid) {
+				let flag = -1;
+				const {explicitDepAssets, implicitDepAssets} = this;
+				if (explicitDepAssets || implicitDepAssets) {
+					flag = explicitDepAssets.includes(uuid) ? 1 : -1;
+					if (flag < 0) {
+						flag = implicitDepAssets.includes(uuid) ? 2 : -1;
+					}
+				} else {
+					flag = this.assetDepFlag(uuid);
+				}
+				return flag;
+			},
 			...mapMutations(['combineAssets']),
 		}
 	}

src/views/Editor/Assets/FileItem.vue

@@ -43,7 +43,7 @@
 			<span>{{data.name}}</span>
 			<span class="full-name">{{data.name}}</span>
 		</div>
-		<div :class="{'dep-flag': showDepFlag}" style="border-top-color: #9b82e3">
+		<div :class="{'dep-flag': depFlag >= 0, 'explicit': depFlag === 1, 'implicit': depFlag === 2}">
 
 		</div>
 	</div>
@@ -91,8 +91,8 @@
 			ellipsisName() {
 				return strEllipsis(this.data.name, 14, 5);
 			},
-			showDepFlag(){
-				return this.data.dep && Object.keys(this.data.dep).length > 0;
+			depFlag(){
+				return this.$parent.getDepFlag(this.data.uuid);
 			}
 		},
 		methods: {

src/views/Editor/Inspector/PropsTab.vue

@@ -4,6 +4,7 @@
 			<div class="top-bar" v-if="activeComponent.$isViewRoot">
 				<el-button size="mini" @click="clickEditStoreExp">{{$t('Edit store')}}</el-button>
 				<el-button size="mini" @click="clickEditStoreComputed">{{$t('Edit computed')}}</el-button>
+				<el-button size="mini" @click="clickAssetManager">{{$t('Asset dependence')}}</el-button>
 			</div>
 			<el-form-item :label="$t('Name')">
 				<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
@@ -51,6 +52,7 @@
 			</el-scrollbar>
 		</el-form>
 		<store-editor-dialog ref="storeEditorDialog"/>
+		<asset-dependence-dialog ref="assetDependenceDialog"/>
 	</div>
 </template>
 
@@ -60,10 +62,11 @@
 	import {getCmpProps} from "../../../utils/common";
 	import StoreEditorDialog from "./PropsTab/StoreEditorDialog";
 	import ElFormItem from "../../../components/inputs/form-item";
+	import AssetDependenceDialog from "./PropsTab/AssetDependenceDialog";
 
 	export default {
 		name: 'PropsTab',
-		components: {ElFormItem, StoreEditorDialog, PropsEditor},
+		components: {AssetDependenceDialog, ElFormItem, StoreEditorDialog, PropsEditor},
 		data() {
 			const componentsMap = this.$t('view_node_menu');
 			const customCmdNames = this.$t('customCmds');
@@ -124,6 +127,9 @@
 			clickEditStoreComputed() {
 				this.$refs.storeEditorDialog.edit('computed', this.activeComponent);
 			},
+			clickAssetManager(){
+				this.$refs.assetDependenceDialog.edit(this.activeComponent);
+			},
 			...mapMutations(['makeProjectDirty', 'addCmd', 'deleteCmd']),
 		}
 	};

src/views/Editor/Inspector/PropsTab/AssetDependenceDialog.vue

+<template>
+	<el-dialog
+		:title="$t('Asset dependence')"
+		width="80vw"
+		:visible.sync="visible"
+		:append-to-body="true"
+		:close-on-click-modal="false"
+		:show-close="false"
+		:close-on-press-escape="false"
+		custom-class="asset-dependence-dialog flex-dialog"
+	>
+		<div class="wrapper">
+			<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden"
+			              view-class="scrollbar-view">
+				<asset-list ref="depAssetList" :editable="false" :selectable="false"
+				            :assets-source="assetsSource"
+				            v-if="view"
+				            @click-item="onClickItem"
+				            :target-view="view"
+				            :explicit-dep-assets="explicitDepAssets"
+				            :implicit-dep-assets="implicitDepAssets"
+				/>
+			</el-scrollbar>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<div></div>
+			<div>
+				<el-popconfirm @onConfirm="clickClose" placement="top"
+				               :title="$t('Are you sure to close?')">
+					<el-button slot="reference" size="mini">{{ $t("Close") }}</el-button>
+				</el-popconfirm>
+				<el-button class="save-button" type="primary" size="mini" @click="clickSave">{{ $t("Save") }}
+				</el-button>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import {mapMutations} from 'vuex';
+	import MonacoEditor from "vue-monaco";
+	import {clonePureObj, monacoEditorOptions} from "../../../../utils";
+	import AssetList from "../../Assets/AssetList";
+
+	export default {
+		name: "AssetDependenceDialog",
+		components: {AssetList, MonacoEditor},
+		props: [],
+		data() {
+			return {
+				visible: false,
+				tab: 'exp',
+				monacoEditorOptions,
+				showEditor: false,
+				store: {},
+				assetsSource: [],
+				view: null,
+				explicitDepAssets: [],
+				implicitDepAssets: [],
+			}
+		},
+		computed: {},
+		methods: {
+			async edit(view) {
+				this.view = view;
+
+				this.explicitDepAssets = view.explicitDepAssets.concat();
+				this.implicitDepAssets = view.implicitDepAssets.concat();
+
+				this.assetsSource = clonePureObj(this.$store.getters.assets);
+
+				this.visible = true;
+			},
+			clickSave() {
+
+				this.visible = false;
+			},
+			clickClose() {
+				this.visible = false;
+			},
+			onClickItem(asset) {
+				const {uuid} = asset;
+				const {explicitDepAssets, implicitDepAssets} = this;
+
+				if (explicitDepAssets.includes(uuid)) {
+					return
+				}
+
+				let index = implicitDepAssets.indexOf(uuid);
+				if (index >= 0) {
+					implicitDepAssets.splice(index, 1);
+				}else{
+					implicitDepAssets.push(uuid);
+				}
+			},
+			...mapMutations(['modifyViewStore'])
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

yarn.lock

@@ -3126,9 +3126,9 @@ electron-to-chromium@^1.3.322:
   integrity sha1-cXFaypr9Mo6iCKO8RlHBW4afDRs=
 
 element-ui@^2.4.5:
-  version "2.13.0"
-  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.0.tgz#f6bb04e5b0a76ea5f62466044b774407ba4ebd2d"
-  integrity sha1-9rsE5bCnbqX2JGYES3dEB7pOvS0=
+  version "2.13.1"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
+  integrity sha1-DLGkXPJ6phxgHe++GSdArFy533w=
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -7064,7 +7064,7 @@ regenerate@^1.2.1, regenerate@^1.4.0:
 
 regenerator-runtime@^0.11.0:
   version "0.11.1"
-  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&sync_timestamp=1584052392667&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=
 
 regenerator-runtime@^0.13.2: