{
+ this.outlineLeft = ref;
+ }}
className={className}
style={{
height: offsetHeight,
@@ -242,6 +270,9 @@ export class BoxResizingInstance extends Component<{
{triggerVisible.e && (
{
+ this.outlineRight = ref;
+ }}
style={{
height: offsetHeight,
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
diff --git a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts
new file mode 100644
index 000000000..ae91fa534
--- /dev/null
+++ b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts
@@ -0,0 +1,92 @@
+import * as EventEmitter from 'events';
+// import Cursor from './cursor';
+// import Pages from './pages';
+
+// 拖动缩放
+class DragResizeEngine {
+ private emitter: EventEmitter;
+ private dragResizing = false;
+
+ constructor() {
+ this.emitter = new EventEmitter();
+ }
+
+ isDragResizing() {
+ console.log('is drag resizign');
+ return this.dragResizing;
+ }
+
+ /**
+ * drag reszie from
+ * @param shell
+ * @param direction n/s/e/w
+ * @param boost (e: MouseEvent) => VE.Node
+ */
+ from(shell: Element, direction: string, boost: (e: MouseEvent) => any) {
+ let node: any;
+ let startEvent: MouseEvent;
+ console.log('drag from');
+
+ if (!shell) {
+ return () => {};
+ }
+
+ const move = (e: MouseEvent) => {
+ const moveX = e.clientX - startEvent.clientX;
+ const moveY = e.clientY - startEvent.clientY;
+
+ this.emitter.emit('resize', e, direction, node, moveX, moveY);
+ };
+ const over = (e: MouseEvent) => {
+ document.removeEventListener('mousemove', move, true);
+ document.removeEventListener('mouseup', over, true);
+
+ this.dragResizing = false;
+ // Cursor.release();
+
+ this.emitter.emit('resizeEnd', e, direction, node);
+ };
+ const mousedown = (e: MouseEvent) => {
+ node = boost(e);
+ startEvent = e;
+
+ this.emitter.emit('resizestart', e, direction, node);
+
+ document.addEventListener('mousemove', move, true);
+ document.addEventListener('mouseup', over, true);
+
+ this.dragResizing = true;
+ // Cursor.addState('ew-resize');
+ };
+ shell.addEventListener('mousedown', mousedown);
+ return () => {
+ shell.removeEventListener('mousedown', mousedown);
+ };
+ }
+
+ onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) {
+ console.log('hello resize start');
+ this.emitter.on('resizestart', func);
+ return () => {
+ this.emitter.removeListener('resizestart', func);
+ };
+ }
+
+ onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
+ console.log('hello on resize');
+ this.emitter.on('resize', func);
+ return () => {
+ this.emitter.removeListener('resize', func);
+ };
+ }
+
+ onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) {
+ console.log('resize end');
+ this.emitter.on('resizeEnd', func);
+ return () => {
+ this.emitter.removeListener('resizeEnd', func);
+ };
+ }
+}
+
+export default new DragResizeEngine();