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

import { IconRotate } from "@/assets/icons";
import { CompToolbars } from "@/modules/editor/objects/Toolbars";
import { css } from "@linaria/core";
import { defineComponent, onMounted, onUnmounted, ref , nextTick} from "vue";
import { useEditor } from "../../../..";

export const SelectTransfer = defineComponent({
  setup() {
    const editor = useEditor();
    const { controls } = editor;
    const { selectCtrl } = controls;
    const { transferStyle } = selectCtrl;

    const selectRectRef = ref();
    const rotateRef = ref();
    const rotateRef2 = ref();
    const rotateRef3 = ref();
    const scaleBottomrightRef = ref();
    const scaleBottomLeftRef = ref();
    const scaleTopLeftRef = ref();
    const scaleTopRightRef = ref();
    const scaleRightRef = ref();
    const scaleLeftRef = ref();

    const scaleTopRef = ref();
    const scaleBottomRef = ref();

    onMounted(()=>{
        nextTick(()=>{
            selectRectRef.value.editable = "move";
            rotateRef.value.editable = "rotate";
            rotateRef2.value.editable = "rotate";
            rotateRef3.value.editable = "rotate";
            scaleBottomrightRef.value.editable = "scaleBottomright";

            scaleBottomLeftRef.value.editable = "scaleBottomleft";
            scaleTopLeftRef.value.editable = "scaleTopleft";
            scaleTopRightRef.value.editable = "scaleTopright";
            scaleRightRef.value.editable = "scaleright"
            scaleLeftRef.value.editable = "scaleleft"
            scaleTopRef.value.editable = "scaletop"
            scaleBottomRef.value.editable = "scalebottom"
        })
    })
    return () => {
      return (
       (
          <div
            class={["absolute transfer z-1001",transferStyle.showGizmo? showgizmo:hideGizmo]}
          >
              <div class="">
                {/* {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
              class={["absolute", selctRectStyle]}
              ref={selectRectRef}

              style={{
                width: transferStyle.width + "px",
                height: transferStyle.height + "px",
                transform: transferStyle.matrix,
                transformOrigin: `0 0`,
              }}
            >
              <div
                class={borderStyle}
              />
                <>
                  <div
                    class={[resizeStyle, scaleBottomRightStyle]}
                    style={{transform: transferStyle.matrixInvert}}
                    ref={scaleBottomrightRef}
                  />
                  <div
                    class={[resizeStyle, scaleBottomLeftStyle]}
                    style={{transform: transferStyle.matrixInvert}}
                    ref={scaleBottomLeftRef}
                  />
                  <div
                    class={[resizeStyle, scaleTopLeftStyle]}
                    style={{transform: transferStyle.matrixInvert}}
                    ref={scaleTopLeftRef}
                  />
                   
                
                    <div
                        class={[resizeStyle, scaleTopRightStyle ]}
                        style={{transform: transferStyle.matrixInvert}}
                        ref={scaleTopRightRef}
                    />
             
                  

                  
                    <div class={transformBtnsStyle} ref={rotateRef3}>
                        <div class={transBtnStyle} ref={rotateRef} style={{transform: transferStyle.matrixInvert}} >
                            <IconRotate ref={rotateRef2} />
                        </div>
                    </div>
                  

                  <div
                    class={[resizeHeightBtnCls, scaleTopCls]}
                    ref={scaleTopRef}
                  />

                  <div
                    class={ [resizeHeightBtnCls, scaleBottomCls]}
                    ref={scaleBottomRef}
                  />

                  <div
                    class={ [resizeWidthBtnCls, scaleRightCls]}
                    ref={scaleRightRef}
                  />
                   <div
                    class={ [resizeWidthBtnCls, scaleLeftCls]}
                    ref={scaleLeftRef}
                  />
                
                </>
            </div>
          </div>
        )
      );
    };
  },
});
const selctRectStyle = css`
    pointer-events: none;
`
const showgizmo = css`
    display: block;
    left: 0;
    top: 0;
    /* pointer-events: none; */
`
const hideGizmo = css`
    display: none;
`

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;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 999;
  transform: translate(50%, 50%);
  pointer-events: auto;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
  cursor: nwse-resize;
  &:hover {
    border-color: @inf-primary-color;
  }
`;

const scaleBottomRightStyle = css`
  bottom: -8px;
  right: -8px;
`
const scaleBottomLeftStyle = css`
  bottom: -8px;
  left: -8px;
`

const scaleTopLeftStyle = css`
  top: -8px;
  left: -8px;
`

const scaleTopRightStyle = css`
  top: -8px;
  right: -8px;
`

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);
  pointer-events: auto;
`;

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);
  pointer-events: auto;
  cursor: ns-resize;
  background: rgba(255, 255, 255, 0.3);
  &:hover {
    background: @inf-primary-color;
  }
  @apply shadow;
  z-index: 999;
`;

const scaleTopCls = css`
  top: 0;
  transform: translate(-50%, -4px);
`;

const scaleBottomCls = css`
  bottom: 0;
  transform: translate(-50%, 4px);
`;


const resizeWidthBtnCls = css`
  position: absolute;
  width: 8px;
  height: 30px;
  border-radius: 4px;
  pointer-events: auto;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.3);
  &:hover {
    background: @inf-primary-color;
  }
  @apply shadow;
  z-index: 999;
`;

const scaleRightCls = css`
   right: 0;
   top: 50%;
   transform: translate(4px, -50%);
`;

const scaleLeftCls = css`
  left: 0;
  top: 50%;
  transform: translate(-4px, -50%);
`;