classroom-instruments/src/components/layout/index.tsx

import { Transition, defineComponent, onMounted, ref } from 'vue';
import LayoutSilder from './layoutSilder';
import LayoutTop from './layoutTop';
import styles from './index.module.less';
import { NImage, NModal, NPopover } from 'naive-ui';
import Moveable from 'moveable';
import toolbox from './images/toolbox.png';
import setTimeIcon from './images/setTimeIcon.png';
import beatIcon from './images/beatIcon.png';
import toneIcon from './images/toneIcon.png';
import beatImage from './images/beatImage.png';
import toneImage from './images/toneImage.png';
import setTimeImage from './images/setTimeImage.png';
import dragingBoxIcon from './images/dragingBoxIcon.png';
export default defineComponent({
  name: 'layoutView',
  setup() {
    const directionType = ref('left');
    const showModalBeat = ref(false);
    const showModalTone = ref(false);
    const showModalTime = ref(false);
    const isDragIng = ref(false);
    const initMoveable = async () => {
      if (document.querySelector('.wrap')) {
        const moveable = new Moveable(document.querySelector('.wrap') as any, {
          target: document.querySelector('#moveNPopover') as any,
          // If the container is null, the position is fixed. (default: parentElement(document.body))
          container: document.querySelector('.wrap') as any,
          // snappable: true,
          // bounds: {"left":100,"top":100,"right":100,"bottom":100},
          draggable: true,
          resizable: false,
          scalable: false,
          rotatable: false,
          warpable: false,
          pinchable: false, // ["resizable", "scalable", "rotatable"]
          origin: false,
          keepRatio: false,
          // Resize, Scale Events at edges.
          edge: false,
          throttleDrag: 0,
          throttleResize: 0,
          throttleScale: 0,
          throttleRotate: 0
        });
        moveable
          // .on('dragStart', ({ target, clientX, clientY }) => {
          //   console.log('dragStart');
          // })
          .on(
            'drag',
            ({
              target,
              transform,
              left,
              top,
              right,
              bottom,
              beforeDelta,
              beforeDist,
              delta,
              dist,
              clientX,
              clientY
            }) => {
              isDragIng.value = true;
              const subdEl = document.getElementById(
                `moveNPopover`
              ) as HTMLDivElement;
              // console.log(subdEl, "subdEl", "drag");
              const subdElStyle = getComputedStyle(subdEl, null);
              const RectInfo = {
                left: Number(subdElStyle.left.replace('px', '')),
                top: Number(subdElStyle.top.replace('px', '')),
                width: Number(subdElStyle.width.replace('px', '')),
                height: Number(subdElStyle.height.replace('px', ''))
              };

              const mainWidth =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).width
                ) - RectInfo.width;

              const mainHeight =
                parseInt(
                  window.getComputedStyle(
                    document.querySelector('.wrap') as Element
                  ).height
                ) - RectInfo.height;

              if (left < 0) {
                left = 2;
              }
              if (top < 0) {
                top = 2;
              }
              if (right < 0) {
                right = 2;
              }
              if (bottom < 0) {
                bottom = 2;
              }
              if (left > mainWidth - 2) {
                left = mainWidth - 2;
              }
              if (top > mainHeight - 2) {
                top = mainHeight - 2;
              }

              target!.style.left = `${left}px`;
              target!.style.top = `${top}px`;
            }
          )
          .on('dragEnd', async ({ target, isDrag, clientX, clientY }) => {
            if (document.body.clientWidth / 2 - clientX > 0) {
              // 往左出
              directionType.value = 'right';
            } else {
              // 往又出
              directionType.value = 'left';
            }
            isDragIng.value = false;
          });
      }
    };
    onMounted(() => {
      initMoveable();
    });
    const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
      if (val == 'setTimeIcon') {
        showModalTime.value = true;
      }
      if (val == 'beatIcon') {
        showModalBeat.value = true;
      }
      if (val == 'toneIcon') {
        showModalTone.value = true;
      }
    };
    return () => (
      <div class={[styles.wrap, 'wrap']}>
        <div>
          <LayoutSilder></LayoutSilder>
        </div>
        <div class={styles.Wrapcore}>
          <LayoutTop></LayoutTop>
          <div class={styles.WrapcoreView}>
            {/* <div class={styles.WrapcoreViewInfo}> */}
            <router-view>
              {(obj: any) => (
                <Transition name="fade-slide" mode="out-in">
                  <obj.Component />
                </Transition>
              )}
            </router-view>
            {/* </div> */}
          </div>
        </div>
        <NPopover
          raw
          trigger="click"
          show-arrow={false}
          placement={directionType.value as 'left' | 'right'}
          v-slots={{
            trigger: () => (
              <img
                src={isDragIng.value ? dragingBoxIcon : toolbox}
                id="moveNPopover"
                class={[
                  styles.toolboxImg,
                  'moveNPopover',
                  isDragIng.value ? styles.isDragIng : ''
                ]}
                alt=""
              />
            )
          }}>
          <div class={styles.booxToolWrap}>
            <div
              class={styles.booxToolItem}
              onClick={() => startShowModal('beatIcon')}>
              <img src={beatIcon} alt="" />
              节拍器
            </div>
            <div
              class={styles.booxToolItem}
              onClick={() => startShowModal('toneIcon')}>
              <img src={toneIcon} alt="" />
              调音器
            </div>
            <div
              class={styles.booxToolItem}
              onClick={() => startShowModal('setTimeIcon')}>
              <img src={setTimeIcon} alt="" />
              计时器
            </div>
          </div>
        </NPopover>

        <NModal v-model:show={showModalBeat.value}>
          <div
            onClick={() => {
              showModalBeat.value = false;
            }}>
            <NImage
              src={beatImage}
              previewDisabled
              class={styles.beatImage}></NImage>
          </div>
        </NModal>
        <NModal v-model:show={showModalTone.value}>
          <div
            onClick={() => {
              showModalTone.value = false;
            }}>
            <NImage
              src={toneImage}
              previewDisabled
              class={styles.beatImage}></NImage>
          </div>
        </NModal>
        <NModal v-model:show={showModalTime.value}>
          <div
            onClick={() => {
              showModalTime.value = false;
            }}>
            <NImage
              src={setTimeImage}
              previewDisabled
              class={styles.setTimeImage}></NImage>
          </div>
        </NModal>
      </div>
    );
  }
});