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

import { IconRotate , IconMove} from "@/assets/icons";
import { css } from "@linaria/core";
import { defineComponent, onMounted, ref, nextTick, reactive } from "vue";
import { any } from "vue-types";
import { TransformCtrl } from "@/modules/editor/controllers/TransformCtrl";

export const Transforms = defineComponent({
    props: {
        ctrl: any<TransformCtrl>()
    },

  setup(props) {

    const ctrl = props.ctrl ? props.ctrl : new TransformCtrl();
    const toolbarRef = ref<HTMLElement>();
    const transformRef = ref<HTMLElement>();
  
    const state = reactive({
       toolbarW: 0,
    })
    onMounted(()=>{
        if (transformRef.value) ctrl.initUI(transformRef.value);

        nextTick(()=>{
            nextTick(()=>{
              if (!toolbarRef.value) {
                return
              }  
              const r = toolbarRef.value.getBoundingClientRect();
              state.toolbarW = r.width;
            })
        })
    })
    
    return () => {

      let toolbarTop = ctrl.state.bbox.y
      if (toolbarTop < 0 ) {
        toolbarTop = 0;
      }
      
      return (
        <div
          ref={transformRef}
          class={[
            "absolute transfer z-998",
            ctrl.state.visible ? showgizmo : hideGizmo,
          ]}
          style={{
            top: ctrl.state.baseTop + "px"
          }}
        >
          <div
            id= "toolbar"
            class={toolbarStyle}
            style={{
              top: toolbarTop + "px",
              left: (ctrl.state.bbox.x + ctrl.state.bbox.w / 2.0 - state.toolbarW / 2.0)  + "px",
            }}
            ref= {toolbarRef}
          >
            {
              ctrl.state.toolbarNames.map((name) => {
                const ToolBarComp = ctrl.toolbars[name];
                return <span key={name} data-toolname={name} ><ToolBarComp class="p-4px" /></span> 
              })
            }
          </div>

          <div
            class={["absolute", selctRectStyle]}
            id="movecenter"
            style={{
              width: ctrl.state.width + "px",
              height: ctrl.state.height + "px",
              transform: ctrl.state.matrix,
              transformOrigin: `0 0`,
            }}
          >
            <div class={borderStyle} style={{ transform: ctrl.state.matrixInvert, transformOrigin: `0 0`}} >
                <div class={borderContentStyle} style={{width: ctrl.state.relWidth + "px", height: ctrl.state.relHeight + "px"}}></div>
            </div>
            <>
              {
                <div
                  class={[resizeStyle, scaleBottomRightStyle]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaleBottomright"
                />
              }

                {
                    <div
                    class={[resizeStyle, scaleBottomLeftStyle]}
                    style={{ transform: ctrl.state.matrixInvert }}
                    id="scaleBottomleft"
                  />
                }

              {
                  <div
                  class={[resizeStyle, scaleTopLeftStyle]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaleTopleft"
                />
              }
              {
                <div
                  class={[resizeStyle, scaleTopRightStyle]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaleTopright"
                />
              }

              <div class={transformBtnsStyle} style={{ transform: ctrl.state.matrixInvert }}>

                <div
                    class={transBtnStyle}
                    id="moveicon"
                  >
                    <IconMove />
                </div>

                <div
                  class={transBtnStyle}
                  id = "rotate"
                >
                  <IconRotate  />
                </div>

              </div>
              {ctrl.state.showScaleBridge && ctrl.state.showScaletop && (
                <div
                  class={[resizeHeightBtnCls, scaleTopCls]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaletop"
                />
              )}
              {ctrl.state.showScaleBridge && ctrl.state.showScalebottom && (
                <div
                  class={[resizeHeightBtnCls, scaleBottomCls]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scalebottom"
                />
              )}
              {ctrl.state.showScaleBridge &&  (
                <div
                  class={[resizeWidthBtnCls, scaleRightCls]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaleright"
                />
              )}
              {ctrl.state.showScaleBridge && (
                <div
                  class={[resizeWidthBtnCls, scaleLeftCls]}
                  style={{ transform: ctrl.state.matrixInvert }}
                  id="scaleleft"
                />
              )}
            </>
          </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%;
  pointer-events: none;
  z-index: 999;
`;
const borderContentStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 2px solid @inf-primary-color;
`

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: 0px;
  left:calc(50% - 32px);
  font-size: 16px;
  z-index: 999;
  pointer-events: auto;
  transform-origin: 50% 100%;
  pointer-events: none;
`;

const transBtnStyle = css`
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  color: #333;
  position: relative;
  top: 50px;
  @apply shadow cursor-move;
  pointer-events: auto;

  &: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(0%, -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: -4px;
  left: calc(50% - 15px);
`;

const scaleBottomCls = css`
  bottom:-4px;
  left: calc(50% - 15px);
`;

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: -4px;
  top: calc(50% - 15px);
`;

const scaleLeftCls = css`
  left: -4px;
  top: calc(50% - 15px);
`;