tranform的toolbar居中

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

@@ -1,7 +1,7 @@
 import { IconRotate , IconMove} from "@/assets/icons";
 import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted, ref, nextTick } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, nextTick, reactive, watch } from "vue";
 import { useEditor } from "../../../..";
 
 
@@ -11,22 +11,44 @@ export const SelectTransfer = defineComponent({
     const { controls, store } = editor;
     const { selectCtrl } = controls;
     const { transferStyle } = selectCtrl;
+    const toolbarRef = ref<HTMLElement>();
+  
+    const state = reactive({
+       toolbarW: 0,
+       toolbarOpts: [] as any[],
+    })
 
+    watch(()=>[store.selectId, store.selected], ()=>{
+      console.log("changing--")
+      if (store.selected.length == 1) {
+        const comp = store.compMap[store.selected[0]];
+        //@ts-ignore
+        state.toolbarOpts = CompToolbars[comp.compKey] || CompToolbars.default;
+      }  else {
+        state.toolbarOpts = CompToolbars.MultiSelector;
+      }
+      nextTick(()=>{
+        nextTick(()=>{
+          if (!toolbarRef.value) {
+            return
+          }  
+          const r = toolbarRef.value.getBoundingClientRect();
+          state.toolbarW = r.width;
+        })
+      })
+    })
 
+  
     return () => {
-      let toolbarOpts = CompToolbars.default;
+      
       let comp: any = null;
-      if (selectCtrl.selected.length == 1) {
-        comp = selectCtrl.selected[0].comp;
-        //@ts-ignore
-        toolbarOpts = CompToolbars[comp.compKey] || toolbarOpts;
-      }  else {
-        toolbarOpts = CompToolbars.MultiSelector;
+      if (store.selected.length == 1) {
+        comp = store.compMap[store.selected[0]];
       }
 
-      const w = selectCtrl.objContainer?.getBound();
+      const w :any = selectCtrl.objContainer?.getBound();
       const isTextEdit = selectCtrl.selected.length == 1 && selectCtrl.selected[0].comp.compKey == "Text";
-
+  
       return (
         <div
           class={[
@@ -42,11 +64,12 @@ export const SelectTransfer = defineComponent({
             class={toolbarStyle}
             style={{
               top: w?.y + "px",
-              left: w?.x + "px",
+              left: (w?.x + w?.width / 2.0 - state.toolbarW / 2.0)  + "px",
             }}
+            ref= {toolbarRef}
           >
             {
-              toolbarOpts.map((item) => {
+              state.toolbarOpts.map((item) => {
                 return item.getVisible.call(editor, comp) ? (
                   <item.component
                     class="p-4px"
@@ -248,7 +271,7 @@ const transBtnStyle = css`
   top: 50px;
   @apply shadow cursor-move;
   pointer-events: auto;
-  
+
   &:hover {
     color: #fff;
     background-color: @inf-primary-color;