低代码5之组件的层级（置顶展示）、选中删除、编辑与预览效果

低代码5之组件的层级（置顶展示）、选中删除、编辑与预览效果

• 功能

• 拖拽后的组件在内容区域内，展示这些组件的层级（ 谁顶层谁底层 ）
  • 需要添加按钮
  • 在useCommand.js之中 添加命令
    • 置顶 就是在未选中之中找到最大的zIndex值(maxZIndex)，然后设置以选中的zIndex为 maxZIndex + 1
    • 置底 就是未选中找到最小的zIndex值(minZIndex)，然后判断这个值是否小于0，则设置为minZIndex为0，其未选中的zIndex则为minZIndex的绝对值 + 原本的值，然后选中的则为minZIndex
• 删除
  • 删除-撤销 就是拿到当前的data下的最新的blocks值
  • 删除-重做 就是拿focusData之中未被选中的值，因为以选中的被删除了
• 编辑与预览
  • previewRef添加一个预览与编辑的flag，在useFocus.js之中去判断是否处于预览效果，若是为true则为预览效果则无法进行拖拽操作

src / package / editor.jsx

import {
   
    
     computed, defineComponent, inject, ref } from "vue";
import "./editor.scss";
import EditorBlock from "./editor-block";
import deepcopy from "deepcopy";
import {
   
    
     useMenuDragger } from "./useMenuDragger";
import {
   
    
     useFocus } from "./useFocus";
import {
   
    
     useBlockDragger } from "./useBlockDragger";
import {
   
    
     useCommand } from "./useCommand";
import {
   
    
     $dialog } from "@/components/Dailog";
export default defineComponent({
   
    
    
  props: {
   
    
    
    modelValue: {
   
    
    
      type: Object,
    },
  },
  emits: ["update:modelValue"], // 1：菜单拖拽功能-03：触发事件 更新app的数据 set之中更新
  setup(props, ctx) {
   
    
    
    // 预览效果 内容不支持操作 可以点击 输入内容 方便查看效果
    const previewRef = ref(true) // 需要在获取焦点的时候 判断是否处于预览效果 useFocus.js
    // console.log('props',props.modelValue);
    const data = computed({
   
    
    
      get() {
   
    
    
        return props.modelValue;
      },
      set(newValue) {
   
    
    
        ctx.emit("update:modelValue", deepcopy(newValue));
      },
    });
    const contentStyle = computed(() => ({
   
    
    
      width: data.value.container.width + "px",
      height: data.value.container.height + "px",
    }));
    const config = inject("config");

    //  1：菜单拖拽功能-02：实现h5的拖拽放入组件容器形成被拖拽的组件 useMenuDragger实现左侧菜单拖拽功能
    const containerRef = ref(null);
    const {
   
    
     dragstart, dragend } = useMenuDragger(containerRef, data);
    // 2：容器内获取焦点功能-01：点击容器时候聚焦与按住shift时候支持多个聚焦；选中后拖拽
    const {
   
    
     blockMousedown, containerMousedown, focusData,lastSelectBlock,clearBlockFocus } = useFocus(
      data,previewRef,
      (e) => {
   
    
    
        // 3：获取焦点后 进行拖拽-02
        mousedown(e, focusData);
      }
    );
    // 3：实现组件拖拽-01：
    const {
   
    
     mousedown,markLine } = useBlockDragger(focusData,lastSelectBlock,data);

    // 4：每一次操作的记录 撤销与重做功能
    const {
   
    
    commands} = useCommand(data,focusData)
    const buttons = [
      {
   
    
    lable:'撤销',icon:'',handler:()=>commands.undo()},
      {
   
    
    lable:'重做',icon:'',handler:()=>commands.redo()},
      {
   
    
    lable:'导出',icon:'',handler:()=>{
   
    
    
        $dialog({
   
    
    
          title:'导出json使用',
          content: JSON.stringify(data.value)
        })
      }},
      {
   
    
    lable:'导入',icon:'',handler:()=>{
   
    
    
        $dialog({
   
    
    
          title:'导入json使用',
          content:'',
          footer:true,
          onComfirm:(text)=>{
   
    
    
            // 需要在useCommand.js文件之中 调用消息队列 实现撤销重做等操作
            commands.updateContainer( JSON.parse(text) )
          }
        })
      }},
      {
   
    
    lable:'置顶',icon:'',handler:()=>commands.placeTop()},
      {
   
    
    lable:'置底',icon:'',handler:()=>commands.placeBottom()},
      {
   
    
    lable:'删除',icon:'',handler:()=>commands.delete()},
      {
   
    
    lable: ()=>previewRef.value ? '编辑' : '预览',icon:()=>previewRef.value ? '编辑icon' : '预览icon',
        handler:()=> {
   
    
     
          previewRef.value = !previewRef.value;
          clearBlockFocus()
        }
      },
    ]

    return () => (
      <div class="editor">
        <div