添加左边cardList

src/assets/imgs/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><defs><style>.a{fill:#1f1f1f;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g transform="translate(-1489 -385)"><rect class="a" width="80" height="80" rx="4" transform="translate(1489 385)"/><g transform="translate(1514.754 410.754)"><path class="b" d="M24,16V33.666" transform="translate(-9.754 -10.587)"/><path class="b" d="M16,24H33.666" transform="translate(-10.587 -9.754)"/></g></g></svg>

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

@@ -37,7 +37,8 @@ export const Component = defineComponent({
           contextStyle.transition = "transform .4s ease-out";
         }
       }
-      
+      console.log("curr card=>", store.currStreamCardId, store.currStreamCard?.children.default?.length);
+
       return (
         <div
           ref={compRef}

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -91,11 +91,11 @@ export const View = defineComponent({
             {slots.default?.()}
           </div>
 
-          {store.isEditMode &&
+          {/* {store.isEditMode &&
             isStreamCard &&
             store.currStreamCardId == props.compId && (
               <Hudop compId={props.compId} />
-            )}
+            )} */}
 
           {store.isEditMode && props.editlayer && (
             <div ref={editorLayerRef} class={editAreaStyle}></div>

src/modules/editor/components/Viewport/Content/index.tsx

@@ -52,7 +52,40 @@ export default defineUI({
       }
 
       return (
-        <div ref={refs.parent} class="scrollbar overflow-y-auto flex-1">
+        <div class="flex flex-1 relative">
+       
+            <div class={["scrollbar", cardList]}>
+                <div>
+                <Container>
+                {
+                  store.streamCardIds.map(item=>{
+                    const c = helper.findComp(item) as DesignComp;
+                    const Comp = controls.compUICtrl.state.components.get(c.compKey)
+                      ?.Component || NotFoundComp;
+                  
+                    const r = c.layout.size[1] / c.layout.size[0];
+                    let h = (80 * r);
+                    if (h>80) h = 80;
+                    const style:any = {height:h+ "px"}
+                    if (store.currStreamCardId == item) {
+                      style.border = "2px solid #EA9E40"
+                    }
+                  return (<Draggable>
+                      <div class="card-item" style={style} onClick={()=>{
+                          actions.pickComp(item, false);
+                      }}>
+                          <Comp compId={c.id} style={{transformOrigin:"0 0", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
+                      </div>
+                    </Draggable>)
+                  })
+                }
+                <img class="mt-15px cursor-pointer" onClick={()=>{
+                   console.log("add card");
+                }} src={require("@/assets/imgs/add.svg")} alt="" />
+                </Container>
+              </div>
+          </div>
+        <div ref={refs.parent} class={["absolute", viewportStyle]}>
           <div ref={refs.editor}>
             <div ref={refs.page}  class={"select-none " + contentCls}>
               <CompUI.Page.Component compId={pageRoot.id}>
@@ -72,7 +105,7 @@ export default defineUI({
                       controls.compUICtrl.state.components.get(comp.compKey)
                         ?.Component || NotFoundComp;
                     return (
-                        <Comp compId={comp.id} />
+                        <Comp compId={comp.id}  key={comp.id}/>
                     );
                   },
                 }}
@@ -81,13 +114,14 @@ export default defineUI({
             <div class={editLayerStyle} ref={editLayerRef}></div>
           </div>
           <canvas class={selectCls} ref={refs.canvas} />
-          <div class={meatureStyle}>      
+          <div class={meatureStyle}>    
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
             {/* <div class="ruler right" id="rulerRight"></div>
             <div class="ruler bottom" id="rulerBottom"></div> */}
           </div>
         </div>
+        </div>
       );
     };
   },
@@ -117,7 +151,6 @@ const meatureStyle = css`
   top: 0px;
   z-index: 999;
   pointer-events: none;
-
   .ruler {
     position: absolute;
     cursor: ns-resize;
@@ -125,7 +158,7 @@ const meatureStyle = css`
   }
   .top {
     top: 0;
-    left: 0;
+    left: 0px;
     height: 20px;
     width: 100%;
     z-index: 2;
@@ -157,7 +190,7 @@ const meatureStyle = css`
   }
   .left {
     top: 0;
-    left: 0;
+    left: 0px;
     height: 100%;
     width: 20px;
     z-index: 1;
@@ -201,3 +234,36 @@ const editLayerStyle = css`
   height: 100%;
   z-index: 1000;
 `;
+
+const cardList = css`
+  
+  width: 120px;
+  height: 100%;
+  background: #262626;
+  overflow-x: hidden;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  padding-bottom: 120px;
+
+  .card-item {
+    flex-shrink: 0;
+    margin-top: 15px;
+    width: 80px;
+    height: 80px;
+    background: #1F1F1F;
+    border-radius: 4px 4px 4px 4px;
+    cursor: pointer;
+    overflow: hidden;
+  }
+`;
+
+const viewportStyle =  css`
+  width: calc(100% - 120px);
+  height: 100%;
+  left: 120px;
+  top: 0px;
+  overflow: hidden;
+`

src/modules/editor/controllers/EditorCtrl/index.ts

@@ -6,6 +6,7 @@ import {ref, onMounted, nextTick} from "vue";
 import { RxValue } from "../ReactCtrl/rxValue";
 import { DisplayObject } from "../SelectCtrl/objects/displayObject";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
+import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
 
 
 const KeySpace = 32;
@@ -21,7 +22,6 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         },
         
         scale:  1,
-        mouse: {x: 0, y: 0},
         keyCode: -1,
 
         page: {w: 375, h: 650}
@@ -40,7 +40,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         EditorRef.value.style.width = this.state.width + "px";
         EditorRef.value.style.height = this.state.height + "px";
         EditorRef.value.style.position = "absolute";
-        EditorRef.value.style.backgroundColor = "greenyellow";
+        // EditorRef.value.style.backgroundColor = "greenyellow";
         EditorRef.value.style.left = "0";
         EditorRef.value.style.top = "0";
 
@@ -92,19 +92,16 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     let isMoving = false;
     let moveX = 0, moveY = 0;
     parent.addEventListener("mousemove",(e:MouseEvent)=>{
-        this.state.setMouse({x: e.offsetX, y: e.offsetY});
-
-        console.log("move", isMoving);
+        //this.state.setMouse({x: e.offsetX, y: e.offsetY});
 
         if (isMoving) {
             const xOffset = e.pageX - moveX;
             const yOffset = e.pageY - moveY;
-            console.log(xOffset, yOffset);
+            console.log(this.state.pos, xOffset, yOffset);
             this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
-
-            moveX = e.pageX;
-            moveY = e.pageY;
         }
+        moveX = e.pageX;
+        moveY = e.pageY;
     });
 
     document.addEventListener("mouseup",(e:MouseEvent)=>{
@@ -112,8 +109,8 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     })
 
     this.state.onScaleChanged((v)=>{
-        editorLayer.style.transform = `scale(${v})`;
         editorLayer.style.transformOrigin = "50% 50%";
+        editorLayer.style.transform = `scale(${v})`;
     })
     this.state.onPosChanged((v)=>{
         editorLayer.style.left= v.x + "px";
@@ -131,6 +128,10 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
 
     window.addEventListener("resize", ()=>this.updateEditorSize());
     this.state.onPageChanged(()=>this.updateCardSize());
+
+    setTimeout(() => {
+        this.updateEditorSize();
+    }, 100);
   }
 
   updateCardSize() {
@@ -145,12 +146,11 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
   }
 
   updateEditorSize() {
-    const page = this.doms.editor.value as HTMLElement;
     const state = this.state;
     const parent = this.doms.parent.value as HTMLElement;
-    const left = ( parent.clientWidth - state.width) / 2.0
-    const top =  (parent.clientHeight - state.height) / 2.0
-    page.style.left = left + "px";
-    page.style.top = top + "px";
+    const left = ( parent.clientWidth - state.width) / 2.0;
+    const top =  (parent.clientHeight - state.height) / 2.0;
+
+    this.state.setPos({x: left, y: top});
   }
 }

src/modules/editor/module/stores/index.ts

@@ -171,11 +171,15 @@ export const store = EditorModule.store({
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
       const comps = this.helper.getCompTrees(compId);
-
+      
       if (compId == "root") {
         return;
       }
-      this.store.currStreamCardId = comps[1]?.id || "";
+      let cardId = comps[1]?.id || "";
+      if (this.helper.isStreamCard(compId)) {
+        cardId = compId;
+      }
+      this.store.currStreamCardId = cardId;
     },
 
     deleteComp(compId: string) {