update

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -11,7 +11,7 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
 
-    const { store, controls, helper } = useEditor();
+    const { store, controls } = useEditor();
 
     async function changeVal() {
       try {
@@ -55,11 +55,6 @@ export const Component = defineComponent({
                 ? value.url
                 : value.url + "?editMode=" + store.isEditMode
             }
-            onLoad={() => {
-              if (helper.isCurrComp(props.compId)) {
-                controls.transferCtrl.initStyle();
-              }
-            }}
           />
         </View>
       );

src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch } from "vue";
+import { defineComponent, ref, watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -11,9 +11,10 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { store, controls } = useEditor();
+    const { store, controls, actions } = useEditor();
     const comp = useCompData(props.compId);
     const { value } = comp;
+    const videoRef = ref();
 
     async function changeVal() {
       try {
@@ -28,7 +29,10 @@ export const Component = defineComponent({
     watch(
       () => [value.ratio],
       () => {
-        comp.setH(comp.getW() / value.ratio);
+        const { videoWidth, videoHeight } = videoRef.value;
+        const t = value.ratio || videoWidth / videoHeight;
+        comp.setH(comp.getW() / t);
+        actions.onCompLayoutUpdated(comp);
       }
     );
 
@@ -41,6 +45,8 @@ export const Component = defineComponent({
       return (
         <View class={rootCls} compId={props.compId}>
           <video
+            ref={videoRef}
+            key={value.url}
             class="w-full object-cover"
             style={{ aspectRatio: value.ratio }}
             {...options}

src/modules/editor/components/CompUI/basicUI/Video/index.ts

@@ -33,6 +33,7 @@ export const Form = createAttrsForm([
     component: "Select",
     props: {
       options: [
+        { label: "原始比例", value: 0 },
         { label: "1:1", value: 1 },
         { label: "4:3", value: 4 / 3 },
         { label: "3:4", value: 3 / 4 },

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -167,7 +167,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
           <div>
             {valueColumns.length ? (
               <>
-                <div>组件属性</div>
+                <div>属性</div>
                 <FormUI
                   data={component}
                   columns={valueColumns}
@@ -175,7 +175,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                 />
               </>
             ) : null}
-            <div>组件布局</div>
+            <div>布局</div>
             <FormUI
               data={component}
               columns={layoutColumns}
@@ -183,7 +183,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
             />
             {!isEmpty(component?.layout?.background) ? (
               <>
-                <div>组件背景</div>
+                <div>背景</div>
                 <FormUI
                   data={component}
                   columns={bgColumns}

src/modules/editor/components/Viewport/Slider/SliderRight/index.tsx

@@ -20,7 +20,7 @@ export default defineUI({
             <Form component={currComp} />
           </div>
           <div class="p-16px border-bottom !border-2px border-top">组件树</div>
-          <div class="h-500px py-20px pr-20px scrollbar">
+          <div class="h-360px py-20px pr-20px scrollbar">
             <CompTree class={compTreeCls} />
           </div>
         </div>

src/modules/editor/module/actions/init.ts

@@ -1,4 +1,6 @@
 import { EditorModule } from "..";
+import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createProxyEffect } from "../../objects/ProxyStore/create";
 import { EditorMode } from "../../typings";
 import { editActions } from "./edit";
@@ -33,4 +35,10 @@ export const initActions = EditorModule.action({
     this.store.currStreamCardId = this.store.streamCardIds[0];
     this.controls.selectCtrl.initEvents(pageEl, selEl, viewPort);
   },
+
+  onCompLayoutUpdated(comp: DesignComp) {
+    if (this.helper.isCurrComp(comp.id)) {
+      this.controls.selectCtrl.selecteObjs([new CompObject(comp)]);
+    }
+  },
 });