react实现leaferjs编辑器功能点之右键点击菜单

实现功能:编辑器单个元素右键点击需要在鼠标位置出现菜单项

思路:leaferjs有右键点击事件,事件回调函数参数中有x和y坐标,那么在获得容器dom后可以直接使用绝对定位进行偏移

简化点:右键点击菜单不是出现的固定ui,因此使用多余变量进行维护一直是我不怎么喜欢的,并且声明式使用函数还需要传递各种参数,使用Context又难免耦合,因此我使用指令式组件封装针对x和y的一个组件,与leaferjs和要制作的编辑器无关。(指令式封装参考我的另一篇文章)

ts 复制代码
import React, { FC, useRef } from 'react';
import { useClickAway } from 'ahooks';
import { createPortal } from 'react-dom';
import { css } from '@emotion/css';
import { appInstance } from '@/runTime';
import { InstructionMountProps } from '@/hooks/useElementsContextHolder';

interface Props {
  container: HTMLDivElement
  x: number
  y: number
  node: React.ReactNode
}

const CoordinateDom: FC<Props & InstructionMountProps<null>> = (props) => {
  const { container, x, y, node, closeResolve } = props;
  const ref = useRef<HTMLDivElement>(null);

  useClickAway(() => {
    closeResolve();
  }, ref, ['click', 'contextmenu']);

  return (
    createPortal(
      <div ref={ref} className={css`position: absolute;left: ${x}px;top: ${y}px`}>
        {node}
      </div>,
      container,
    )
  );
};

export const openCoordinateDomPromise = (args: Props) => {
  return appInstance.getContextHolder().instructionMountPromise<Props, null>({
    Component: CoordinateDom,
    props: args,
  });
};

使用如下:

ts 复制代码
const rect_1 = Rect.one({
  editable: true,
  fill: '#FEB027',
  cornerRadius: [20, 0, 0, 20],
  zIndex: 2,
}, 100, 100);

rect_1.on(PointerEvent.MENU, (e) => {
  e.stop();
  openCoordinateDomPromise({
    container: this.containerRef.current,
    x: e.x,
    y: e.y,
    node: (
      <div className={css`width: 100px;height: 100px`}>1fefe24</div>
    ),
  });
});

简单封装如上,如菜单位置临界等问题以后在加相关处理逻辑,也可以使用antd的dropdown,但既然是以学习为目的最好是自己实现。

相关推荐
ZhuAiQuan13 分钟前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown18 分钟前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh31 分钟前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥1 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球1 小时前
css新特性
前端·css
Nicholas681 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙1 小时前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze1 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
jvxiao2 小时前
搭建个人博客系列--(4) 利用Github Actions自动构建博客
前端
袁煦丞2 小时前
SimpleMindMap私有部署团队脑力风暴:cpolar内网穿透实验室第401个成功挑战
前端·程序员·远程工作