fix: 1

src/components/drawing-time-line/index.vue

@@ -1,5 +1,6 @@
 <template>
   <v-rect
+    v-if="background"
     :config="{
       width: size?.width,
       height: height,
@@ -55,7 +56,7 @@ const props = defineProps<{
   itemsRenderer: any;
   background?: string;
   height: number;
-  opacity: number;
+  opacity?: number;
   top: number;
   active?: TLItem;
 }>();

src/components/drawing-time/time.vue

@@ -26,6 +26,7 @@ import {
   useStage,
   useViewerInvertTransform,
   useViewerInvertTransformConfig,
+  useViewerTransform,
 } from "../drawing/hook";
 import { formatDate } from "@/utils";
 import { TextConfig } from "konva/lib/shapes/Text";
@@ -40,17 +41,19 @@ const getText = (mis: number) => {
   const date = new Date(0);
   date.setHours(0);
   date.setSeconds(mis);
-  return formatDate(date, "mm:ss");
+  const h = date.getHours();
+  return h ? formatDate(date, "hh:mm:ss") : formatDate(date, "mm:ss");
 };
 
+const viewMat = useViewerTransform();
 const invMat = useViewerInvertTransform();
 const invConfig = useViewerInvertTransformConfig();
 const { size } = useGlobalResize();
 
 const timeRange = computed(() => {
   if (!size.value) return;
-
-  const lt = { x: 0, y: 0 };
+  const start = viewMat.value.point({ x: 0, y: 0 }).x;
+  const lt = { x: start > 0 ? start : 0, y: 0 };
   const rt = { x: size.value!.width, y: 0 };
   const startPixel = invMat.value.point(lt).x;
   const endPixel = invMat.value.point(rt).x;

src/components/drawing/hook.ts

@@ -402,6 +402,7 @@ export const useViewer = installGlobalVar(() => {
   const cursor = useCursor();
 
   const init = (dom: HTMLDivElement) => {
+    viewer.move({x: 10, y: 0})
     const dragDestroy = dragListener(dom, {
       move: ({ end, prev, ev }) => {
         if (cursor.value !== "move") {

src/components/drawing/viewer.ts

@@ -1,6 +1,7 @@
 import { Transform } from "konva/lib/Util";
 import mitt from 'mitt'
 import { alignPortMat, Pos } from "./math";
+import { MathUtils } from "three";
 
 export type ViewerProps = {
 	size?: number[];
@@ -74,7 +75,7 @@ export class Viewer {
 		}
 		const offsetX = position.x
 		const currentX = this.viewMat.decompose().x
-		const finX = Math.min(0, currentX + offsetX)
+		const finX =  currentX + offsetX
 		const x = finX - currentX
 
 		const mat = initMat.copy().invert()
@@ -148,10 +149,19 @@ export class Viewer {
 			this.viewMat = new Transform(mat)
 		}
 		let dec = this.viewMat.decompose()
-		while(dec.x > 0.001) {
-			this.viewMat = this.viewMat.copy().translate(-dec.x, 0)
-			dec = this.viewMat.decompose()
+		if (dec.x > 10) {
+			dec.x = 10
+			this.viewMat = new Transform()
+				.translate(dec.x, dec.y)
+				.scale(dec.scaleX, dec.scaleY)
+				.rotate(MathUtils.degToRad(dec.rotation))
+
 		}
+		// while(dec.x > 0.01) {
+		// 	console.log(dec.x)
+		// 	this.viewMat = this.viewMat.copy().translate(-dec.x, 0)
+		// 	dec = this.viewMat.decompose()
+		// }
 		this.bus.emit('transformChange', this.transform)
 	}
 

src/views/animation/bottom.vue

@@ -40,34 +40,19 @@
       :scale="scale"
       @update:scale-value="(val) => (scaleValue = val)"
       ref="renderer"
-    >
-      <v-group>
+      ><v-group>
         <template v-if="am">
           <template v-for="prop in tlProps">
             <TimeLine
               v-if="am[prop.attr].length"
-              :items="am[prop.attr]"
+              :items="[]"
               :height="prop.height"
               :background="prop.background"
               :opacity="prop.opacity"
               :top="prop.top"
               :itemsRenderer="prop.component"
-              @update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
-              @add="
-                  (item) => {
-                    am![prop.attr].push({...item, id: onlyId()});
-                    $emit('update:active', {
-                      key: prop.attr,
-                      ndx: am![prop.attr].length - 1,
-                    });
-                  }
-                "
-              @del="(ndx) => am![prop.attr].splice(ndx, 1)"
-              :active="prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined"
-              @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
             />
           </template>
-          <empty v-if="!count" />
         </template>
       </v-group>
       <v-group>
@@ -85,6 +70,33 @@
           />
         </Time>
       </v-group>
+      <v-group>
+        <template v-if="am">
+          <template v-for="prop in tlProps">
+            <TimeLine
+              v-if="am[prop.attr].length"
+              :items="am[prop.attr]"
+              :height="prop.height"
+              :top="prop.top"
+              :itemsRenderer="prop.component"
+              @update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
+              @add="
+                  (item) => {
+                    am![prop.attr].push({...item, id: onlyId()});
+                    $emit('update:active', {
+                      key: prop.attr,
+                      ndx: am![prop.attr].length - 1,
+                    });
+                  }
+                "
+              @del="(ndx) => am![prop.attr].splice(ndx, 1)"
+              :active="prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined"
+              @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
+            />
+          </template>
+          <empty v-if="!count" />
+        </template>
+      </v-group>
     </Renderer>
   </div>
 </template>

src/views/animation/index.vue

@@ -8,7 +8,7 @@
       @delete="deleteAm"
     />
     <Right
-      v-if="focusAM"
+      v-if="focusAM && !play"
       :am="focusAM"
       :frameAction="frameAction"
       @change-frame-action="(f) => (frameAction = f.action)"
@@ -21,7 +21,7 @@
       @apply-global="k => ams.forEach((am: any) => (am[k] = focusAM![k]))"
     />
     <GlobalFrame
-      v-if="activeAttrib?.key !== 'frames'"
+      v-if="activeAttrib?.key !== 'frames' && !play"
       :data="{ id: '0', name: 'global-frame', time: 0 }"
       :frame-action="frameAction"
       @change-frame-action="(action) => (frameAction = action.action)"
@@ -54,15 +54,28 @@ import { getAddTLItemAttr } from "@/components/drawing-time-line/check";
 import { Message } from "bill/expose-common";
 import { mergeFuns, uuid } from "@/components/drawing/hook";
 import { title } from "./type";
-import { amMap, getAMKey, currentTime } from "@/sdk/association/animation";
+import { amMap, getAMKey, currentTime, play } from "@/sdk/association/animation";
 import { AnimationModel3D } from "@/sdk";
-import { showBottomBarStack, showRightPanoStack } from "@/env";
+import {
+  showBottomBarStack,
+  showLeftCtrlPanoStack,
+  showLeftPanoStack,
+  showRightPanoStack,
+  showSearchStack,
+} from "@/env";
 
 enterEdit(() => router.back());
 initialAnimationModels();
 // useViewStack(autoSaveAnimationModel);
-useViewStack(() => showBottomBarStack.push(ref(true)));
-useViewStack(() => showRightPanoStack.push(computed(() => !!focusAM.value)));
+useViewStack(() =>
+  mergeFuns(
+    showBottomBarStack.push(ref(true)),
+    showRightPanoStack.push(computed(() => !!focusAM.value && !play.value)),
+    showLeftPanoStack.push(computed(() => !play.value)),
+    showLeftCtrlPanoStack.push(computed(() => !play.value)),
+    showSearchStack.push(computed(() => !play.value))
+  )
+);
 
 const focusAM = ref<AnimationModel>();
 const activeAttrib = ref<Active>();

src/views/animation/right/index.vue

@@ -45,7 +45,7 @@ import Action from "./action.vue";
 import Frame from "./frame.vue";
 import Path from "./path.vue";
 import Subtitle from "./subtitle.vue";
-import { checkTLItem, getAddTLItemAttr } from "@/components/drawing-time-line/check";
+import { checkTLItem } from "@/components/drawing-time-line/check";
 import { Message } from "bill/expose-common";
 import { AnimationModel, AnimationModelFrame } from "@/store/animation";
 import { useViewStack } from "@/hook";