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

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"
            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;
`;