在元素上不能触发框选

[maskTAQ]

当光标不在元素上可以触发框选操作，鼠标在元素上触发不了，希望能在元素内触发。

[leaferjs]

列举一下具体场景，或者给个例子，到时越改越乱了～

如果你是因为在frame里面框选不了其他元素，可以将frame元素的hitFill 设为 'none'，这是业内的通用做法。

[maskTAQ]

1. 创建项目

   npm create leafer@latest vue-template

2. 修改 src/components/HelloWorld.vue 代码

   
   <script setup lang="ts">
   import { onMounted } from 'vue'
   import { App, Rect, Box, Text, Group, PointerEvent } from 'leafer-ui'
   import { EditorEvent } from '@leafer-in/editor'
   import 'leafer-editor'
   import '@leafer-in/state'
   import { Flow } from '@leafer-in/flow';
   let leafer;
   onMounted(() => {
   // rotateable: false, resizeable: false, moveable: false 
   leafer = new App({ view: 'leafer-view', fill: '#fff', editor: { rotateable: false, resizeable: false, moveable: false } })
   let { width = 1080, height = 960 } = leafer
   window.app = leafer;
   leafer.editor.on(EditorEvent.SELECT, (...v) => {
   console.log(v, 'v');
   })
   // const leaferJS = new Rect({
   //   x: 300,
   //   width: 100,
   //   height: 100,
   //   fill: {
   //     type: 'image',
   //     url: '/leafer.svg',
   //     mode: 'fit'
   //   },
   //   hoverStyle: {
   //     shadow: {
   //       x: 0,
   //       y: 0,
   //       blur: 20,
   //       color: '#32cd79'
   //     }
   //   },
   //   editable: true
   // })
   // leaferJS.on(PointerEvent.DOUBLE_TAP, () => {
   //   window.open('https://www.leaferjs.com/ui/guide/')
   // })
   const text = new Text({
   fill: 'rgba(255, 255, 255, 0.87)',
   fontSize: 35,
   fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
   fontWeight: 'bold',
   text: 'Vue + Vite + LeaferJS'
   })
   const children = [];
   window.children = children;
   const size = 50;
   for (let row = 0; row < 10; row++) {
   for (let column = 0; column < 10; column++) {
     const rect = new Rect({
       id: row + '-' + column,
       x: row * size,
       y: column * size,
       width: size,
       height: size,
       fill: '#fff',
       stroke: "#000",
       editable: true,
       // hoverStyle: {
       //   shadow: {
       //     x: 0,
       //     y: 0,
       //     blur: 20,
       //     color: '#42b883aa'
       //   }
       // },
       // resizeable: false
     });
     rect.on(PointerEvent.CLICK, () => {
       console.log({ row, column });
     })
     children.push(
       rect
     )
   }
   }
   // console.log(logoGroup, 'logoGroup');
   
   let logoGroup = new Group({
   // x: width / 2 - 200,
   // y: height * 0.4,
   children,
   stroke: 'red'
   });
   // logoGroup.add(createText('a'));
   // const treeGroup = new Group();
   // leafer.tree.add(logoGroup);
   leafer.tree.add(logoGroup)
   window.g = Group;
   
   // leafer.editor.group(new Group());
   })
   function mark() {
   if (leafer.editor.list.length) {
   console.log(leafer.editor.list, 'leafer.editor.list');
   const newGroup = new Group({
     // x: width / 2 - 200,
     // y: height * 0.4,
     children: leafer.editor.list.map(rect=>{
       rect.fill = 'red';
       return rect;
     }),
     fill:'red'
   });
   const { x, y, width } = newGroup.boxBounds;
   const text = new Box({
     x: x + width,
     y: y,
     // fill: '#FF4B4B',
     opacity: 0,
     cornerRadius: 20,
     children: [{
       tag: 'Text',
       text: 'aa',
       fill: '#fff',
       // padding: [10, 20],
       textAlign: 'left',
       verticalAlign: 'top'
     }]
   });
   newGroup.add(text);
   setTimeout(() => {
     text.x -= text.width;
     text.opacity = 1;
   }, 100);
   
   window.newGroup = newGroup;
   leafer.tree.add(newGroup);
   } else {
   alert('请选择元素')
   }
   }
   const createText = (text: string): Text => {
   return new Text({
   
   inner: {
     x: 0,
     y: 0,
   },
   // fill: 'red',
   stroke: 'red',
   fontSize: 20,
   fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
   text
   })

}

然后做框选操作，如果光标在元素上就触发不了，必须在元素之外触发框选

[maskTAQ]

下午好，请问有解决方案吗？