更新组件树

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -1,216 +0,0 @@
-import { IconRotate } from "@/assets/icons";
-import { CompToolbars } from "@/modules/editor/objects/Toolbars";
-import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted } from "vue";
-import { useEditor } from "../../../..";
-
-export const Transfer = defineComponent({
-  setup() {
-    const editor = useEditor();
-    const { controls, helper } = editor;
-    const { transferCtrl } = controls;
-    const { transferStyle } = transferCtrl;
-
-    onMounted(() => {
-      setTimeout(() => {
-        const pageEl = helper.findRootComp()?.$el;
-        if (pageEl) {
-          transferCtrl.init(pageEl.firstChild as HTMLElement);
-        }
-      });
-    });
-
-    onUnmounted(() => {
-      transferCtrl.destroy();
-      // console.log("transferCtrl.destroy========================");
-    });
-
-    return () => {
-      const comp = transferCtrl.currComp;
-      const toolbarOpts =
-        CompToolbars[transferCtrl.currComp?.compKey] || CompToolbars.default;
-
-      // const showTransfer =
-      //   store.isEditComp || store.pageCompIds.includes(comp.id);
-      const showTransfer = true;
-
-      return (
-        transferStyle.width && (
-          <div
-            class="absolute transfer z-999"
-            style={{
-              top: transferStyle.top,
-              left: transferStyle.left,
-              width: transferStyle.width,
-              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
-            }}
-          >
-            {showTransfer && (
-              <div class={toolbarStyle}>
-                {toolbarOpts.map((item) => {
-                  return item.getVisible.call(editor, comp) ? (
-                    <item.component
-                      class="p-4px"
-                      value={item.getValue?.(comp)}
-                      onClick={() => item.onClick.call(editor, comp)}
-                    />
-                  ) : null;
-                })}
-              </div>
-            )}
-            <div
-              style={{
-                transform: `rotate(${transferStyle.transform.rotate})`,
-                transformOrigin: `center ${
-                  parseInt(transferStyle.height.split("px")[0]) / 2
-                }px`,
-              }}
-            >
-              <div
-                class={borderStyle}
-                style={{
-                  width: transferStyle.width,
-                  height: transferStyle.height,
-                }}
-              />
-
-              {showTransfer && (
-                <>
-                  <div
-                    class={resizeStyle}
-                    style={{ marginBottom: "-" + transferStyle.height }}
-                    onMousedown={(e) =>
-                      transferCtrl.mousedown(
-                        e,
-                        comp.compKey === "Image" ? "resizeXY" : "scale"
-                      )
-                    }
-                  />
-
-                  <div
-                    class={transformBtnsStyle}
-                    style={{ marginBottom: "-" + transferStyle.height }}
-                  >
-                    <div
-                      class={transBtnStyle}
-                      onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
-                    >
-                      <IconRotate />
-                    </div>
-                  </div>
-                  <div
-                    class={resizeHeightBtnCls}
-                    style={{ top: transferStyle.height }}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeY")}
-                  />
-                  <div
-                    class={resizeWidthBtnCls}
-                    style={{ top: parseInt(transferStyle.height) / 2 + "px" }}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeX")}
-                  />
-                </>
-              )}
-            </div>
-          </div>
-        )
-      );
-    };
-  },
-});
-
-const borderStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  outline: 2px solid @inf-primary-color;
-  pointer-events: none;
-  z-index: 999;
-`;
-
-const resizeStyle = css`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  z-index: 999;
-  transform: translate(50%, 50%);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
-  cursor: nwse-resize;
-  &:hover {
-    border-color: @inf-primary-color;
-  }
-`;
-
-const transformBtnsStyle = css`
-  @apply space-x-10px whitespace-nowrap;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  font-size: 16px;
-  z-index: 999;
-  transform: translate(-50%, 50px);
-`;
-
-const transBtnStyle = css`
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #fff;
-  text-align: center;
-  line-height: 36px;
-  font-size: 20px;
-  color: #333;
-  @apply shadow cursor-move;
-
-  &:hover {
-    color: #fff;
-    background-color: @inf-primary-color;
-  }
-`;
-
-const toolbarStyle = css`
-  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -60px);
-  z-index: 999;
-`;
-
-const resizeHeightBtnCls = css`
-  position: absolute;
-  width: 30px;
-  height: 8px;
-  border-radius: 4px;
-  left: 50%;
-  transform: translate(-50%, -4px);
-  cursor: ns-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-`;
-
-const resizeWidthBtnCls = css`
-  position: absolute;
-  width: 8px;
-  height: 30px;
-  border-radius: 4px;
-  right: 0;
-  transform: translate(4px, -50%);
-  cursor: ew-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-`;

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

@@ -6,8 +6,6 @@ import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
-import { Transfer } from "../../CompUI/basicUI/Transfer";
-import { Transforms } from "../../CompUI/basicUI/Transfer/transform";
 
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";

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

@@ -1,211 +0,0 @@
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import { css } from "@linaria/core";
-import { defineUI } from "queenjs";
-import { onUnmounted, reactive, ref, onMounted } from "vue";
-import { Container, Draggable } from "vue-dndrop";
-import { useEditor } from "../../..";
-import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
-import { CompUI } from "../../CompUI";
-import { Transfer } from "../../CompUI/basicUI/Transfer";
-import { Transforms } from "../../CompUI/basicUI/Transfer/transform";
-
-import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
-import { TipIcons } from "../../TipIcons";
-
-export default defineUI({
-  setup() {
-    const editor = useEditor();
-    const { store, actions, helper, controls } = editor;
-
-    const hotKeyCtrl = new HotKeyCtrl(editor);
-    hotKeyCtrl.init();
-    onUnmounted(() => {
-      hotKeyCtrl.destroy();
-    });
-
-    const state = reactive({
-      draging: false,
-    });
-
-    const NotFoundComp = () => <div>无效的组件</div>;
-    const flagRef = ref();
-    const containRef = ref();
-    const selectCanvasRef = ref();
-    const viewportRef = ref();
-    controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
-    const editLayerRef = ref();
-
-    onMounted(()=>{
-      if (!flagRef.value) {
-        flagRef.value = true;
-        // setTimeout(() => {
-        //   // actions.onViewReady(
-        //   //   pageRoot.$el,
-        //   //   selectCanvasRef.value,
-        //   //   viewportRef.value
-        //   // );
-        //   // helper.initEditLayer(editLayerRef.value);
-        // }, 0);
-      }
-    })
-    return () => {
-      const pageRoot = controls.compCtrl.getRootPage();
-
-      return (
-        <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
-          <div class="relative">
-            <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
-              <CompUI.Page.Component compId={pageRoot.id}>
-                {{
-                  Container(children: any) {
-                    return (
-                      <>
-                        <Container
-                          behaiver="drop-zone"
-                          class={store.isEditPage ? "!min-h-750px" : ""}
-                          // drag-handle-selector=".draganchor"
-                          ref={containRef}
-                          should-accept-drop={(
-                            sourceContainerOptions: any,
-                            payload: any
-                          ) => {
-                            if (sourceContainerOptions.groupName != "canvas") {
-                              return false;
-                            }
-                            if (typeof payload == "string")
-                              controls.dragAddCtrl.updateCompKey(payload);
-                            else {
-                              controls.dragAddCtrl.updateCompKey(payload.type);
-                              controls.dragAddCtrl.updateCompData(payload.data);
-                            }
-                            return false;
-                          }}
-                          drop-not-allowed={(p: any) => {
-                            console.log("p", p);
-                          }}
-                          onDrop={(e: any) => {
-                            if (e.payload) {
-                              actions.addCompToDesign(e.payload, e.addedIndex);
-                            } else {
-                              actions.moveComp(e.removedIndex, e.addedIndex);
-                            }
-                          }}
-                          onDragStart={() => (state.draging = true)}
-                          onDragEnd={() => {
-                            state.draging = false;
-                          }}
-                          non-drag-area-selector={".drag-disable"}
-                        >
-                          {children}
-                        </Container>
-
-                        {/* {store.currStreamCardId && (
-                          <StreamCardTransfer
-                            key={store.currStreamCardId + streamCardIndex}
-                          />
-                        )} */}
-
-                        {/* { 
-                          !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
-                        } */}
-
-                        {!state.draging && <SelectTransfer />}
-                      </>
-                    );
-                  },
-                  CompItem(comp: DesignComp) {
-                    const Comp =
-                      controls.compUICtrl.state.components.get(comp.compKey)
-                        ?.Component || NotFoundComp;
-                    return (
-                      <Draggable key={comp.id}>
-                        <Comp compId={comp.id} />
-                      </Draggable>
-                    );
-                  },
-                }}
-              </CompUI.Page.Component>
-            </div>
-            
-            <div class={editLayerStyle} ref={editLayerRef}>
-            </div>
-            <canvas class={selectCls} ref={selectCanvasRef} />
-          </div>
-          <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>
-      );
-    };
-  },
-});
-
-const contentCls = css`
-  .dndrop-container.vertical > .dndrop-draggable-wrapper {
-    overflow: unset;
-  }
-`;
-const selectCls = css`
-  pointer-events: none;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-`;
-
-const meatureStyle = css`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1001;
-  pointer-events: none;
-
-  .ruler {
-    position: absolute;
-    cursor: ns-resize;
-    pointer-events: auto;
-  }
-  .top {
-    top: 0;
-    left: 0;
-    height: 10px;
-    width: 100%;
-  }
-  .bottom {
-    bottom: 0;
-    left: 0;
-    height: 10px;
-    width: 100%;
-  }
-  .left {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 10px;
-    cursor: ew-resize;
-  }
-  .right {
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 10px;
-    cursor: ew-resize;
-  }
-`;
-
-const editLayerStyle = css`
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-`

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

@@ -19,23 +19,24 @@ type TreeItem = {
 
 export const CompTree = defineComponent({
   setup() {
-    const { store, actions, helper, controls } = useEditor();
-    const { compUICtrl } = controls;
+    const { actions, helper, controls } = useEditor();
+    const { compUICtrl, compCtrl } = controls;
 
     const state = useReactive(() => ({
       expandedKeys: [] as string[],
       treeData() {
-        const rootComp = helper.findRootComp();
-
+        const rootComp = compCtrl.getRootPage();
+        
         function getCompChildren(ids: string[]): TreeItem[] {
           return ids.map((id) => {
-            const comp = helper.findComp(id) as DesignComp;
+            const comp = compCtrl.getObj(id)
+            const title = comp.title || compUICtrl.state.components.get(comp.compKey)?.name || "未命名";
+          
+            console.log("title=>", title);
+          
             return {
               key: comp.id,
-              title:
-                comp.title ||
-                compUICtrl.state.components.get(comp.compKey)?.name ||
-                "未命名",
+              title: title,
               value: comp.id,
               children: getCompChildren(comp.getChildIds()),
             };
@@ -45,17 +46,14 @@ export const CompTree = defineComponent({
       },
     }));
 
-    watch(
-      () => store.currCompId,
-      () => {
-        // expandedKeys需要等Tree的内部状态更新后再赋值
-        nextTick(() => {
-          state.expandedKeys = store.currCompId
-            ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
-            : [];
-        });
-      }
-    );
+    compCtrl.state.onCurrCompIdChanged((id)=>{
+      nextTick(() => {
+        state.expandedKeys = id
+          ? helper.getCompTrees(id).map((comp) => comp.id)
+          : [];
+      });
+    })
+
     const onDrop = (info: any) => {
       const dragNode = info.dragNode; //被拖拽
       const dropNode = info.node; //拖拽落下
@@ -138,12 +136,16 @@ export const CompTree = defineComponent({
       }
     };
 
-    return () => (
+    return () => {
+
+      console.log("===>", state.treeData);
+
+      return (
       <Tree
         class={treeStyle}
         treeData={state.treeData}
         v-model={[state.expandedKeys, "expandedKeys"]}
-        selectedKeys={[store.currCompId]}
+        selectedKeys={[compCtrl.state.currCompId]}
         blockNode={true}
         draggable={true}
         onDrop={onDrop}
@@ -158,7 +160,8 @@ export const CompTree = defineComponent({
           },
         }}
       </Tree>
-    );
+    )
+      };
   },
 });
 
@@ -169,7 +172,7 @@ const CompNode = defineComponent({
   },
   setup(props) {
     const editor = useEditor();
-    const comp = editor.helper.findComp(props.id);
+    const comp = editor.controls.compCtrl.getObj<any>(props.id);
     return () => {
       if (!comp) return;
       const compOpts = editor.controls.compUICtrl.state.components.get(
@@ -180,6 +183,7 @@ const CompNode = defineComponent({
         comp.compKey === "Image"
           ? comp.value.url
           : comp.thumbnail || compOpts?.thumbnail;
+
       return (
         <div class={nodeStyle}>
           <Image src={thumbnail} size={240} />

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

@@ -5,6 +5,7 @@ import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
+import { CompBase } from "../../objects/Elements/base";
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -370,9 +371,10 @@ export const editActions = EditorModule.action({
       comp.layout.position === "absolute" ? undefined : "absolute";
   },
   // 设置组件显示隐藏
-  setCompVisible(comp: DesignComp) {
-    comp.layout.visible = comp.layout.visible === false ? true : false;
+  setCompVisible(comp: CompBase<any>) {
+    comp.state.setVisible(comp.state.visible === false ? true : false);
   },
+
   // 清除组件变换
   clearCompTransform(comp: DesignComp) {
     comp.layout.margin = "";
@@ -383,11 +385,11 @@ export const editActions = EditorModule.action({
     console.log(comp);
   },
   // 设置组件层级
-  setCompLayer(comp: DesignComp, offset: number) {
-    comp.layout.zIndex = Math.min(
-      Math.max((comp.layout.zIndex || 0) + offset, 0),
-      99
-    );
+  setCompLayer(comp: CompBase<any>, offset: number) {
+    // comp.state.zIndex = Math.min(
+    //   Math.max((comp.layout.zIndex || 0) + offset, 0),
+    //   99
+    // );
   },
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
@@ -419,7 +421,7 @@ export const editActions = EditorModule.action({
     this.store.setGroupMode(false);
   },
   // 取消打组
-  cancelGroupComps(groupComp: DesignComp) {
+  cancelGroupComps(groupComp: any) {
     this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
     this.store.setCurrComp(groupComp.children.default?.[0] as string);
   },

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

@@ -3,6 +3,7 @@ import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
+import { CompBase } from "../../objects/Elements/base";
 import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
@@ -32,7 +33,7 @@ export const helpers = EditorModule.helper({
     const comps = this.helper.getCompTrees(compId);
     comps.pop();
     while (comps.length) {
-      const comp = comps.pop() as DesignComp;
+      const comp = comps.pop() as any;
       if (comp.compKey === "Group") {
         return true;
       }
@@ -62,12 +63,12 @@ export const helpers = EditorModule.helper({
   },
 
   getCompCard(compId:string) {
-      const paths:DesignComp[] = this.helper.getCompTrees(compId);
+      const paths:any[] = this.helper.getCompTrees(compId);
       return paths[1]
   },
 
   getCompWorlParentPos(compId:string, vx:number ,vy: number) {
-    const paths:DesignComp[] = this.helper.getCompTrees(compId);
+    const paths:any[] = this.helper.getCompTrees(compId);
     const m = new Matrix();
     let n = paths.length;
     let box = paths[1].$el.getBoundingClientRect();
@@ -82,17 +83,20 @@ export const helpers = EditorModule.helper({
 
 
   getCompTrees(compId: string) {
-    const comps: DesignComp[] = [];
+    const comps: CompBase<any>[] = [];
     const getParentComp = (compId: string) => {
-      const comp = this.helper.findComp(compId);
+      const comp = this.controls.compCtrl.getObj(compId);
       if (comp) {
         comps.unshift(comp);
-        getParentComp(this.store.compPids[comp.id]);
+        if (comp.parent) {
+          getParentComp(comp.parent.id);
+        }
       }
     };
     getParentComp(compId);
     return comps;
   },
+
   createStyle(layout: Partial<Layout> & {size:any[]}) {
     return createCompStyle(this, layout);
   },

src/modules/editor/objects/Elements/base.ts

@@ -35,7 +35,15 @@ class CompBase<T extends object> extends Container {
     onCreated() {
         console.log("set compkey here!");
     }
+    getChildIds() {
+        if (this.state.children.length < 1) return [];
 
+        return this.state.children.map(item=>item.id);
+    }
+    isPostioned() {
+        return this.state.position == "absolute";
+    }
+    
     setHistory(h :HistoryController) {
         this.value.setHistory(h);
         this.state.setHistory(h);

src/modules/editor/objects/Elements/image.ts

@@ -1,94 +1,106 @@
 import { effect } from "vue";
-import { CompBase } from "./base"
+import { CompBase } from "./base";
 import { HistoryController } from "./history";
 import { Dict_Imgs } from "@/dict";
 
 export type ImageValue = {
-    url: string;
-    showLink: boolean;
-    link: string;
-    initSized?: boolean
-}
+  url: string;
+  showLink: boolean;
+  link: string;
+  initSized?: boolean;
+};
 
 export type ImageContenValue = {
-    url: string;
-}
+  url: string;
+};
 
 export class CompImageContent extends CompBase<ImageContenValue> {
-    override onCreated() {
-        this.compKey = "ImageContent" as any;
-    }
-}   
-    
+  override onCreated() {
+    this.compKey = "ImageContent" as any;
+  }
+}
 
 export class CompImage extends CompBase<ImageValue> {
-    
-   override onCreated() {
-        this.compKey = "Image";
-        this.state.size = [750, 400];
-        this.value.initSized = false;
-        this.state.children.push(new CompImageContent({url: this.value.url}))
-   }
+  override getChildIds() {
+    return [];
+  }
 
-   get imageObj() {
-      return this.state.children[0];
-   }
+  override onCreated() {
+    this.compKey = "Image";
+    this.state.size = [750, 400];
+    this.value.initSized = false;
+    this.state.children.push(new CompImageContent({ url: this.value.url }));
+  }
 
-    override init(): void {
-        super.init();
+  get imageObj() {
+    return this.state.children[0];
+  }
 
-        this.value.onUrlChanged((value, old)=>{
-            console.log("iamge url change=>", value, old)
-            if (value != old) {//重新把对象放置在容器中间
+  override init(): void {
+    super.init();
 
-            }
-        })
-        this.updateTransform();
-    }
+    this.value.onUrlChanged((value, old) => {
+      console.log("iamge url change=>", value, old);
+      if (value != old) {
+        //重新把对象放置在容器中间
+      }
+    });
+    this.updateTransform();
+  }
 }
 
+export async function createImageComp(
+  values: Partial<ImageValue>,
+  h: HistoryController,
+  objMap: Map<string, any>
+): Promise<CompImage> {
+  return new Promise((r) => {
+    const options = {
+      url: Dict_Imgs.Default,
+      showLink: false,
+      link: "",
+      ...values,
+    };
+    const obj = new CompImage(options);
+    const isDefaultUrl = options.url == Dict_Imgs.Default;
 
-export async function createImageComp(values: Partial<ImageValue>, h:HistoryController, objMap: Map<string, any>): Promise<CompImage> {
-    return new Promise((r)=>{
-
-        const options = {url: Dict_Imgs.Default, showLink: false, link: "", ...values};
-        const obj = new CompImage(options)
-        const isDefaultUrl = options.url == Dict_Imgs.Default;
-
-        const size = obj.state.size;
-        const temImg = new Image();
-        temImg.src = options.url;
-        temImg.onload = function () {
-          const ratio = temImg.width / temImg.height;
-          if (!isDefaultUrl) { //不是默认的图片
-                const W = temImg.width > 750 ? 750 : temImg.width;
-                const h  = W / ratio;
-                obj.state.size = [W, h];
-                obj.imageObj.state.size = [W, h];
-                obj.imageObj.updateTransform();
-          } else { //保持默认的750x400尺寸 cantain
-            const r1 = size[0] / size[1];
-            let srcWidth = size[0]
-            let srcHeight = size[1]
-            let srcOffx = 0, srcOffy=0;
-            if (r1 < ratio) { 
-                const s = size[1] / temImg.height
-                srcWidth = temImg.width * s;
-                srcOffx = (size[0] - srcWidth) /2.0;
-            }  else {
-                //高度不变,计算宽度
-                const s = size[0] / temImg.width
-                srcHeight = s * temImg.height;
-                srcOffy = (size[1] - srcHeight) / 2.0;
-            }
-            obj.imageObj.state.size = [srcWidth, srcHeight];
-            obj.imageObj.state.pos = [srcOffx, srcOffy];
-            obj.imageObj.updateTransform();
-          }
-          obj.init();
-          obj.setHistory(h);
-          objMap.set(obj.id, obj);
-          r(obj);
-        };
-    })
-}
+    const size = obj.state.size;
+    const temImg = new Image();
+    temImg.src = options.url;
+    temImg.onload = function () {
+      const ratio = temImg.width / temImg.height;
+      if (!isDefaultUrl) {
+        //不是默认的图片
+        const W = temImg.width > 750 ? 750 : temImg.width;
+        const h = W / ratio;
+        obj.state.size = [W, h];
+        obj.imageObj.state.size = [W, h];
+        obj.imageObj.updateTransform();
+      } else {
+        //保持默认的750x400尺寸 cantain
+        const r1 = size[0] / size[1];
+        let srcWidth = size[0];
+        let srcHeight = size[1];
+        let srcOffx = 0,
+          srcOffy = 0;
+        if (r1 < ratio) {
+          const s = size[1] / temImg.height;
+          srcWidth = temImg.width * s;
+          srcOffx = (size[0] - srcWidth) / 2.0;
+        } else {
+          //高度不变,计算宽度
+          const s = size[0] / temImg.width;
+          srcHeight = s * temImg.height;
+          srcOffy = (size[1] - srcHeight) / 2.0;
+        }
+        obj.imageObj.state.size = [srcWidth, srcHeight];
+        obj.imageObj.state.pos = [srcOffx, srcOffy];
+        obj.imageObj.updateTransform();
+      }
+      obj.init();
+      obj.setHistory(h);
+      objMap.set(obj.id, obj);
+      r(obj);
+    };
+  });
+}

src/modules/editor/objects/Elements/page.ts

@@ -55,6 +55,7 @@ export class CompCard extends CompBase<CardValue> {
 
 export class CompPage extends CompBase<PageValue> {
   override onCreated(): void {
+    this.id = "root";
     this.state.position = "relative";
     this.state.bgColor = "#ffffff";
     this.compKey = "Page";

src/modules/editor/objects/Toolbars/CompToolbars.ts

@@ -6,9 +6,9 @@ export const CompToolbars: ICompToolbars = {
     // toolbars.position,
     toolbars.layerUp,
     toolbars.layerDown,
-    toolbars.clearTransform,
+    // toolbars.clearTransform,
     // toolbars.fullWidth,
-    toolbars.align,
+    // toolbars.align,
     toolbars.delete,
     toolbars.imageCropper,
   ],

src/modules/editor/objects/Toolbars/default.ts

@@ -1,9 +1,10 @@
 import { TipIcons } from "../../components/TipIcons";
 import { EditorModule } from "../../module";
 import { ICompKeys } from "../../typings";
-import { DesignComp } from "../DesignTemp/DesignComp";
 
-function getVisible(this: EditorModule, comp: DesignComp) {
+import { CompBase } from "../Elements/base";
+
+function getVisible(this: EditorModule, comp: CompBase<any>) {
   return !!comp;
 }
 
@@ -12,8 +13,8 @@ type ItemParams = Pick<ToolbarItem, "getValue" | "component" | "onClick"> & {
 };
 class ToolbarItem {
   component: any;
-  getValue?: (c: DesignComp) => number;
-  onClick: (this: EditorModule, c: DesignComp) => void;
+  getValue?: (c: CompBase<any>) => number;
+  onClick: (this: EditorModule, c: CompBase<any>) => void;
   getVisible!: typeof getVisible;
 
   constructor(data: ItemParams) {
@@ -91,9 +92,9 @@ export const toolbars = createToolbars({
   // 显示/隐藏
   visible: {
     component: TipIcons.Visible,
-    getValue: (comp) => (comp.layout.visible !== false ? 0 : 1),
+    getValue: (comp:any) => (comp.state.visible !== false ? 0 : 1),
     onClick(comp) {
-      this.actions.setCompVisible(comp);
+      this.actions.setCompVisible(comp as any);
     },
   },
   // 锁定
@@ -101,7 +102,7 @@ export const toolbars = createToolbars({
     component: TipIcons.Lock,
     getValue: (comp) => (comp ? 0 : 1),
     onClick(comp) {
-      this.actions.setCompLock(comp);
+      this.actions.setCompLock(comp as any);
     },
   },
   // 删除
@@ -114,45 +115,45 @@ export const toolbars = createToolbars({
       this.actions.removeComp(comp.id);
     },
   },
-  // 对齐
-  align: {
-    component: TipIcons.Align,
-    getVisible: (comp) => !comp.isPostioned() && !comp.isFullWidth(),
-    getValue: (comp) =>
-      ["start", "center", "end"].indexOf(comp.layout.alignSelf || "start"),
-    onClick(comp) {
-      const vals = ["start", "center", "end"];
-      let index = vals.indexOf(comp.layout.alignSelf || "start");
-      this.actions.setCompAlign(comp, vals[++index % 3]);
-    },
-  },
+  // // 对齐
+  // align: {
+  //   component: TipIcons.Align,
+  //   getVisible: (comp) => !comp.isPostioned() && !comp.isFullWidth(),
+  //   getValue: (comp) =>
+  //     ["start", "center", "end"].indexOf(comp.layout.alignSelf || "start"),
+  //   onClick(comp) {
+  //     const vals = ["start", "center", "end"];
+  //     let index = vals.indexOf(comp.layout.alignSelf || "start");
+  //     this.actions.setCompAlign(comp, vals[++index % 3]);
+  //   },
+  // },
   // 绝对定位
-  position: {
-    component: TipIcons.Position,
-    getVisible(comp) {
-      return this.helper.isCustomChildComp(comp);
-    },
-    getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
-    onClick(comp) {
-      this.actions.setCompPosition(comp);
-    },
-  },
+  // position: {
+  //   component: TipIcons.Position,
+  //   getVisible(comp) {
+  //     return this.helper.isCustomChildComp(comp);
+  //   },
+  //   getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
+  //   onClick(comp) {
+  //     this.actions.setCompPosition(comp);
+  //   },
+  // },
   // 全屏尺寸
-  fullWidth: {
-    component: TipIcons.FullWidth,
-    getVisible: (comp) => !comp.isTransformed && !comp.isFullWidth,
-    onClick(comp) {
-      this.actions.fullCompWidth(comp);
-    },
-  },
+  // fullWidth: {
+  //   component: TipIcons.FullWidth,
+  //   getVisible: (comp) => !comp.isTransformed && !comp.isFullWidth,
+  //   onClick(comp) {
+  //     this.actions.fullCompWidth(comp);
+  //   },
+  // },
   // 清除变换
-  clearTransform: {
-    component: TipIcons.ClearTransform,
-    getVisible: (comp) => comp.isTransformed(),
-    onClick(comp) {
-      this.actions.clearCompTransform(comp);
-    },
-  },
+  // clearTransform: {
+  //   component: TipIcons.ClearTransform,
+  //   getVisible: (comp) => comp.isTransformed(),
+  //   onClick(comp) {
+  //     this.actions.clearCompTransform(comp);
+  //   },
+  // },
   // 定位图层上移
   layerUp: {
     component: TipIcons.LayerUp,
@@ -173,7 +174,7 @@ export const toolbars = createToolbars({
   parentComp: {
     component: TipIcons.ParentComp,
     getVisible(comp) {
-      return !this.helper.isCustomChildComp(comp);
+      return !this.helper.isCustomChildComp(comp as any);
     },
     onClick(comp) {
       this.actions.pickParentComp(comp.id);
@@ -183,10 +184,10 @@ export const toolbars = createToolbars({
   saveAsComp: {
     component: TipIcons.SaveAsComp,
     getVisible(comp) {
-      return this.helper.isShowSaveComp(comp);
+      return this.helper.isShowSaveComp(comp as any);
     },
     async onClick(comp) {
-      await this.actions.saveAsComp(comp);
+      await this.actions.saveAsComp(comp as any);
       this.controls.compUICtrl.init();
     },
   },