vue-lowcode-cockpit-admin

const state = reactive({
  scale: 0.4,
  startX: 0,
  startY: 0,
  // 参考线
  lines: {
    h: [],
    v: [],
    // h: [0, 1920],
    // v: [0, 1080]
  },
  palette: {
    bgColor: '#18181c',
    longfgColor: '#4d4d4d',
    shortfgColor: '#4d4d4d',
    fontColor: '#4d4d4d',
    shadowColor: '#18181c',
    borderColor: '#18181c',
    cornerActiveColor: '#18181c',
  },
  thick: 20,
  isShowRuler: true, // 显示标尺
  isShowReferLine: true, // 显示参考线
});

// 滚动条居中，使可滚动内容区展示最中心位置，即可显示大屏画布
const canvasPosCenter = () => {
  const screensRect = screensRef.value.getBoundingClientRect();
  const containerRect = containerRef.value.getBoundingClientRect();
  screensRef.value.scrollLeft = Math.abs(containerRect.width - screensRect.width) / 2;
  screensRef.value.scrollTop = Math.abs(containerRect.height - screensRect.height) / 2;
};


onMounted(() => {
  canvasPosCenter();
});

// 鼠标滚动监听
const handleScroll = () => {
  const screensRect = document.querySelector('#screens').getBoundingClientRect();
  const canvasRect = document.querySelector('#canvas').getBoundingClientRect();
  // 标尺开始的刻度
  const startX = (screensRect.left + state.thick - canvasRect.left) / state.scale;
  const startY = (screensRect.top + state.thick - canvasRect.top) / state.scale;
  state.startX = startX;
  state.startY = startY;
};

// 进度条调整缩放
const scaleChange = (value) => {
  state.scale = Number(value);
  nextTick(() => {
    handleScroll();
    canvasPosCenter();
  });
  if (sketchRuleRef.value.panzoomInstance) {
    const panzoomInstance = sketchRuleRef.value.panzoomInstance;
    panzoomInstance.zoom(state.scale);
  }
};

// 监听设置的大屏宽高自动计算缩放比例
watch(
  () => [props.width, props.height],
  () => {
    nextTick(() => {
      if (screensRef.value) {
        const screensRect = screensRef.value.getBoundingClientRect();
        const fitWidth = screensRect.width - 100;
        const fitHeight = screensRect.height - 100;

        const scaleWidth = props.width > fitWidth ? fitWidth / props.width : 1;
        const scaleHeight = props.height > fitHeight ? fitHeight / props.height : 1;

        state.scale = Number(Math.min(scaleWidth, scaleHeight).toFixed(2));
      }

      handleScroll();
      canvasPosCenter();
    });
  },
  {
    immediate: true,
  }
);

// ctrl+鼠标滚动控制缩放值
const handleWheel = (e) => {
  if (e.ctrlKey || e.metaKey) {
    e.preventDefault();
    const nextScale = Number.parseFloat(Math.max(minScale, state.scale - e.deltaY / 500).toFixed(2));
    state.scale = nextScale > maxScale ? maxScale : nextScale;
  }
  nextTick(() => {
    handleScroll();
  });
};

function dragStart(_, item) {
  dragData.value = cloneDeep(item);
}

// 组件库组件拖拽放入画布
function drop(e) {
  const newComponent = {
    ...dragData.value,
    x: e.offsetX - dragData.value.width / 2,
    y: e.offsetY - dragData.value.height / 2,
    id: Math.random().toFixed(6).slice(-6)
  };
  registerComponent(newComponent.chartKey); // 动态注册图表和图表配置组件
  chartEditStore.addComponentList(newComponent); // 添加实例到图表数组
  dragData.value = {}; // 清空拖拽数据
  selectComponent.value = newComponent; // 更新当前选中的图表实例
}

// 鼠标双击添加图表实例
function dblclickHandle(item) {
  const newItem = {
    ...item,
    x: 0,
    y: 0,
    id: Math.random().toFixed(6).slice(-6)
  };
  registerComponent(newItem.chartKey); // 动态注册图表和图表配置组件
  chartEditStore.addComponentList(newItem); // 添加实例到图表数组
  selectComponent.value = newItem; // 更新当前选中的图表实例
}

// 图表实例拖拽移动
function handleMouseDown(e, item, index) {
  const mousemove = event => {
    const x = item.x + (event.clientX - e.clientX) / canvasScale.value;
    const y = item.y + (event.clientY - e.clientY) / canvasScale.value;
    chartEditStore.updateComponent(index, {
      x: Math.round(x),
      y: Math.round(y)
    });
  };

  const mouseup = () => {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
  };

  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);
}

// 移动锚点
function handleMouseDown(e, point) {
  e.stopPropagation();
  e.preventDefault();
  const { x, y, width, height } = props.item;

  const mousemove = event => {
    const moveX = (event.clientX - e.clientX) / props.scale;
    const moveY = (event.clientY - e.clientY) / props.scale;

    const isTop = /t/.test(point);
    const isBottom = /b/.test(point);
    const isLeft = /l/.test(point);
    const isRight = /r/.test(point);

    const newWidth = width + (isLeft ? -moveX : isRight ? moveX : 0);
    const newHeight = height + (isTop ? -moveY : isBottom ? moveY : 0);

    const data = {
      width: newWidth > 0 ? Math.round(newWidth) : 0,
      height: newHeight > 0 ? Math.round(newHeight) : 0,
      x: Math.round(x + (isLeft ? moveX : 0)),
      y: Math.round(y + (isTop ? moveY : 0))
    };
    chartEditStore.updateComponent(props.i, data);
  };

  const mouseup = () => {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
  };

  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);
}

import { ref, watch } from 'vue';
import { useChartEditStore } from '@/store/modules/chartEdit';
import MonacoEditor from '@/components/MonacoEditor/index.vue';

const editJson = ref('');

const chartEditStore = useChartEditStore();
const { selectComponent } = chartEditStore;
const { canvasConfig } = chartEditStore.designData;

watch(
  () => selectComponent.value?.chartData,
  () => {
    editJson.value = JSON.stringify(selectComponent.value.chartData, null, 2);
  }
);
const updateComponentData = () => {
  selectComponent.value.chartData = JSON.parse(editJson.value);
};