首页 > 其他分享 >简单的低开编辑器(三):实现组件画布内拖拽

简单的低开编辑器(三):实现组件画布内拖拽

时间:2023-11-24 12:33:25浏览次数:42  
标签:低开 top focus useFocus 画布 编辑器 dragState 组件 block

好家伙,

0.代码已开源

Fattiger4399/lowcode-demo: 一个简单的低代码编辑器 技术栈:Vue3 element-plus jsx (github.com)

 

本篇实现效果如下:

 

1.分析

这玩意的思路很好理解

本质上就是给组件绑个拖拽方法

拽到哪里,就把位置更新给组件就好了,简单粗暴

当然,需要做选中判定,知道我选中了哪些组件

 

 

2.选中判定实现

//editor.jsx

import { useFocus } from "./useFocus";

let { blockMousedown, focusData } = useFocus(data, (e) => {
            mousedown(e)
        });

 

 

 

//useFocus.js

import {computed} from 'vue'

//useFocus用于处理画布中组件元素的选中
export function useFocus(data,callback){ //获取哪些元素被选中了
    const focusData = computed(() => {
        let focus = [];
        let unfocused = [];
        data.value.blocks.forEach(block => (block.focus ? focus : unfocused).push(block))
        return {focus,unfocused}
    })
    return{
        blockMousedown,
        focusData
    }
}

此处,我们做一次选中判定,将选中的组件,和未被选中的组件,分开放,并返回

 

 

//useFocus.js

const blockMousedown = (e, block) => {
        //block上我们规划一个属性focus 获取焦点后就将focus变为true
        e.preventDefault();
        e.stopPropagation();
        if (e.shiftKey) {
            block.focus = !block.focus
        } else {
            if (!block.focus) {
                clearBlockFocus();
                block.focus = true;//清空其他组件的focus属性
            } else {
                block.focus = false;
            }
        }
        callback(e)
    }

判断是否按下了shift键

 

 

3.点击触发事件

//editor.jsx

<div class="editor-container-canvas__content"
                        style={containerStyles.value}
                        ref={containerRef}
                        onm ousedown={containerMousedown}>
                        {
                            (data.value.blocks.map(block => (
                                <EditorBlock
                                    class={block.focus ? 'editor-block-focus' : ''}
                                    block={block}
                                    onm ousedown={(e) => blockMousedown(e, block)}
                                ></EditorBlock>
                            )))
                        }
                    </div>
let { blockMousedown, focusData } = useFocus(data, (e) => {
            mousedown(e)
        });
        const mousemove = (e) => {
            let { clientX: moveX, clientY: moveY } = e;
            let endX = moveX - dragState.startX;
            let endY = moveY - dragState.startY;

            focusData.value.focus.forEach((block, idx) => {
                // console.log(dragState)
                block.top = dragState.startPos[idx].top + endY;
                block.left = dragState.startPos[idx].top + endX;
            })
        }
        const mouseup = (e) => {
            console.log(document)
            document.removeEventListener('mousemove', mousemove)
            document.removeEventListener('mouseup', mouseup)
        }
        const mousedown = (e) => {
            dragState = {
                startX: e.clientX,
                startY: e.clientY,
                startPos: focusData.value.focus.map(({ top, left }) => ({ top, left }))
            }
            console.log(dragState)
            document.addEventListener('mousemove', mousemove)
            document.addEventListener('mouseup', mouseup)
        }

 

//useFocus.js

const blockMousedown = (e, block) => {
        //block上我们规划一个属性focus 获取焦点后就将focus变为true
        e.preventDefault();
        e.stopPropagation();
        if (e.shiftKey) {
            block.focus = !block.focus
        } else {
            if (!block.focus) {
                clearBlockFocus();
                block.focus = true;//清空其他组件的focus属性
            } else {
                block.focus = false;
            }
        }
        callback(e)
    }

判断是否按下了shift键

 

focusData.value.focus.forEach((block, idx) => {
                // console.log(dragState)
                      block.top = dragState.startPos[idx].top + endY;
                block.left = dragState.startPos[idx].top + endX;
            })

最后更改数据

搞定!

 

 

标签:低开,top,focus,useFocus,画布,编辑器,dragState,组件,block
From: https://www.cnblogs.com/FatTiger4399/p/17853309.html

相关文章

  • cocos creator新手入门教程:如何绑定参数到编辑器
    很多cocoscreator同学不知道如何绑定组件属性到编辑器上,今天我们来教大家如何绑定1:基本数据属性绑定到编辑器这个非常简单,模板是属性名字:默认的值;Is_debug:false,speed:100,2:系统组件类型与节点绑定到编辑器属性名字:{type:组件类型(cc.Sprite,cc.Label,cc.......
  • vim编辑器
    linux系统中一切皆文件vi/vim是什么vi是unix操作系统和类unix操作系统中最通用的文本编辑器vim编辑器是从vi发展出来的一个性能更强大的文本编辑器,可以主动的以字体颜色辨别语法的正确性,方便程序设计。vi与vim编辑器完全兼容模式vim主要有三种模式,分别是命令模式,输入模式,末行模......
  • 个人征信pdf无痕修改工具,一键生成电子版报告,解除密码编辑器,易语言开源代码!
    提前说明一下,这个不管任何文档只要带有密码的都有解除密码,PDF是最常见的,比如征信报告,我们改内容删记录,加记录都是需要密码的,PS的肯定不行,因为默认导出来的是PDf格式,而网上有一些暴力破解都是字典破解的,估计你破解一个月都破解不出来,这个工具很简单,只需要将带有密码的PDF文件导入进......
  • VIM编辑器
    一.vim的基本概念vim简单来说就是一款多模式的编辑器,记事本知道吧,和它一样是一种编辑器,只不过它有很多种编辑模式,所以上手相对更难一点。下面我们来熟悉它的三种模式:首先,我们先创建一个文件然后用vim进入文件命令模式(Normalmode)进入界面后,这就是命令模式,也叫正常/普通/一般......
  • 个人征信报告修改软件工具,无密码编辑器,无痕制作pdf密码,代码分享仅供阅读学习
    正常情况我们导出的征信报告是代码密码的,或者是其他的一些PDF文件都是带密码,我们要编辑的话必须要输入密码才可以,不然只能仅仅阅读,右击编辑就会出现输入密码框,通过这个工具你可以把带有密码的PDF文档导入进来,它会自动输出到指定目录,然后就可以直接修改内容,不需要密码,注意:成品不提......
  • 简单的低开编辑器(二):实现组件拖拽
    好家伙, 0.代码已开源Fattiger4399/lowcode-demo:一个简单的低代码编辑器技术栈:Vue3element-plusjsx(github.com)该章实现的效果:组件从物料区到画布的拖拽 1.分析  先来分析,鼠标点击物料区的某个组件,再将其拖拽到画布这个过程我们如何实现组件的拖拽??......
  • Linux系统的Vim编辑器怎么用
    今天公司要换Linux服务器,已经两年不用命令行操作的我赶紧学习起了Linux操作,其实不难,VIM编辑器是内置在Linux系统里面的一款有效的编辑器,功能十分强大,堪称“世界上最好的编辑器”步入正题文件操作【增,删,改,查】【增】新建文件touch新增目录mkdir目录名命令:touch文件名示例:在......
  • 本地Stackedit Markdown编辑器设置远程访问
    StackEdit是一个受欢迎的Markdown编辑器,在GitHub上拥有20.7kStar!,它支持将Markdown笔记保存到多个仓库,包括Gitee、GitHub和Gitea。此在线笔记工具还提供了一些便捷功能,如拖拽或粘贴上传图片、文件搜索功能,以及可切换为炫酷的暗黑主题,这些功能特别适合那些喜欢使用Markdown来记录笔......
  • cocos如何绑定参数到编辑器
    很多cocos creator同学不知道如何绑定组件属性到编辑器上,今天我们来教大家如何绑定  1:基本数据属性绑定到编辑器   这个非常简单,模板是属性名字: 默认的值;Is_debug:false,speed:100,2:系统组件类型与节点绑定到编辑器属性名字: {   type:组件类型(cc......
  • 简单的低开编辑器(一):实现组件渲染
    好家伙, 项目目录如下:该项目使用Vue3,Element-plus 效果图如下:  开搞:1.写出简单界面App.vue<template><divclass="app"><Editorv-model="state"></Editor></div></template><script>import{ref,p......