mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
add boreder resizing
This commit is contained in:
飞百
parent
d5f459620b
commit
9d04cebb46
@ -19,6 +19,7 @@
|
||||
"@ali/lowcode-types": "^0.8.1",
|
||||
"@ali/lowcode-utils": "^0.8.2",
|
||||
"classnames": "^2.2.6",
|
||||
"event": "^1.0.0",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0"
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
|
||||
// import Bus from '../../../../core/bus';
|
||||
// import DragResizeEngine from '../../../../core/dragResizeEngine';
|
||||
import DragResizeEngine from './dragResizeEngine';
|
||||
// import OverlayCore from '../../../../core/overlay';
|
||||
import { observer, computed, Tip } from '@ali/lowcode-editor-core';
|
||||
import classNames from 'classnames';
|
||||
@ -52,89 +52,20 @@ export default class BoxResizing extends Component {
|
||||
// this.bus = new Bus();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
componentDidUpdate() {
|
||||
// this.hoveringCapture.setBoundary(this.outline);
|
||||
// this.willBind();
|
||||
|
||||
const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResize === 'function') {
|
||||
proto.options.onResize(e, direction, node, moveX, moveY);
|
||||
}
|
||||
};
|
||||
|
||||
const resizeStart = (e: MouseEvent, direction: string, node: any) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResizeStart === 'function') {
|
||||
proto.options.onResizeStart(e, direction, node);
|
||||
}
|
||||
};
|
||||
|
||||
const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') {
|
||||
proto.options.onResizeEnd(e, direction, node);
|
||||
}
|
||||
};
|
||||
|
||||
// DragResizeEngine.onResize(resize);
|
||||
// DragResizeEngine.onResizeStart(resizeStart);
|
||||
// DragResizeEngine.onResizeEnd(resizeEnd);
|
||||
}
|
||||
|
||||
// componentDidUpdate() {
|
||||
// this.hoveringCapture.setBoundary(this.outline);
|
||||
// this.willBind();
|
||||
// }
|
||||
|
||||
// componentWillUnmount() {
|
||||
// this.hoveringCapture.setBoundary(null);
|
||||
// if (this.willDetach) {
|
||||
// this.willDetach();
|
||||
// }
|
||||
// if (this.willUnbind) {
|
||||
// this.willUnbind();
|
||||
// }
|
||||
// }
|
||||
|
||||
// willBind() {
|
||||
// if (this.willUnbind) {
|
||||
// this.willUnbind();
|
||||
// }
|
||||
|
||||
// if (!this.outlineRight && !this.outlineLeft) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const unBind: any[] = [];
|
||||
// unBind
|
||||
// .push
|
||||
// // DragResizeEngine.from(this.outlineRight, 'e', () => {
|
||||
// // if (!this.hoveringLine.hasOutline()) {
|
||||
// // return null;
|
||||
// // }
|
||||
// // return this.hoveringLine.getCurrentNode();
|
||||
// // }),
|
||||
// ();
|
||||
// unBind
|
||||
// .push
|
||||
// // DragResizeEngine.from(this.outlineLeft, 'w', () => {
|
||||
// // if (!this.hoveringLine.hasOutline()) {
|
||||
// // return null;
|
||||
// // }
|
||||
// // return this.hoveringLine.getCurrentNode();
|
||||
// // }),
|
||||
// ();
|
||||
|
||||
// this.willUnbind = () => {
|
||||
// if (unBind && unBind.length > 0) {
|
||||
// unBind.forEach((item) => {
|
||||
// item();
|
||||
// });
|
||||
// }
|
||||
// this.willUnbind = null;
|
||||
// };
|
||||
// }
|
||||
componentWillUnmount() {
|
||||
// // this.hoveringCapture.setBoundary(null);
|
||||
// if (this.willDetach) {
|
||||
// this.willDetach();
|
||||
// }
|
||||
// if (this.willUnbind) {
|
||||
// this.willUnbind();
|
||||
// }
|
||||
}
|
||||
|
||||
render() {
|
||||
const selecting = this.selecting;
|
||||
@ -142,10 +73,9 @@ export default class BoxResizing extends Component {
|
||||
// DIRTY FIX, recore has a bug!
|
||||
return <Fragment />;
|
||||
}
|
||||
// console.log(selecting[0].componentMeta, 'component meta data');
|
||||
const componentMeta = selecting[0].componentMeta;
|
||||
const metaData = componentMeta.getMetadata();
|
||||
console.log('meta data', metaData);
|
||||
|
||||
// const componentMeta = selecting[0].componentMeta;
|
||||
// const metaData = componentMeta.getMetadata();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
@ -208,22 +138,117 @@ export class BoxResizingInstance extends Component<{
|
||||
highlight?: boolean;
|
||||
dragging?: boolean;
|
||||
}> {
|
||||
// private outline: any;
|
||||
private willUnbind: () => any;
|
||||
private outlineRight: any;
|
||||
private outlineLeft: any;
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.observed.purge();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.hoveringCapture.setBoundary(this.outline);
|
||||
this.willBind();
|
||||
|
||||
const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResize === 'function') {
|
||||
proto.options.onResize(e, direction, node, moveX, moveY);
|
||||
}
|
||||
};
|
||||
|
||||
const resizeStart = (e: MouseEvent, direction: string, node: any) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResizeStart === 'function') {
|
||||
proto.options.onResizeStart(e, direction, node);
|
||||
}
|
||||
};
|
||||
|
||||
const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
|
||||
const proto = node.getPrototype();
|
||||
if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') {
|
||||
proto.options.onResizeEnd(e, direction, node);
|
||||
}
|
||||
};
|
||||
|
||||
DragResizeEngine.onResize(resize);
|
||||
DragResizeEngine.onResizeStart(resizeStart);
|
||||
DragResizeEngine.onResizeEnd(resizeEnd);
|
||||
}
|
||||
|
||||
willBind() {
|
||||
if (this.willUnbind) {
|
||||
this.willUnbind();
|
||||
}
|
||||
|
||||
if (!this.outlineRight && !this.outlineLeft) {
|
||||
return;
|
||||
}
|
||||
|
||||
const unBind: any[] = [];
|
||||
|
||||
unBind.push(
|
||||
DragResizeEngine.from(this.outlineRight, 'e', () => {
|
||||
// if (!this.hoveringLine.hasOutline()) {
|
||||
// return null;
|
||||
// }
|
||||
// return this.hoveringLine.getCurrentNode();
|
||||
}),
|
||||
);
|
||||
unBind.push(
|
||||
DragResizeEngine.from(this.outlineLeft, 'w', () => {
|
||||
// if (!this.hoveringLine.hasOutline()) {
|
||||
// return null;
|
||||
// }
|
||||
// return this.hoveringLine.getCurrentNode();
|
||||
}),
|
||||
);
|
||||
|
||||
this.willUnbind = () => {
|
||||
if (unBind && unBind.length > 0) {
|
||||
unBind.forEach((item) => {
|
||||
item();
|
||||
});
|
||||
}
|
||||
this.willUnbind = () => {};
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { observed, highlight, dragging } = this.props;
|
||||
if (!observed.hasOffset) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
|
||||
const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
|
||||
const triggerVisible = {
|
||||
w: true,
|
||||
e: true,
|
||||
};
|
||||
console.log('hee');
|
||||
// let triggerVisible: any = {};
|
||||
const metaData = node.componentMeta.getMetadata();
|
||||
let resizingHandler: any = {};
|
||||
if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) {
|
||||
resizingHandler = metaData.experimental.getResizingHandlers(node);
|
||||
}
|
||||
console.log(resizingHandler, 'resizing handle');
|
||||
// if (proto && proto.options && typeof proto.options.canResizing === 'boolean') {
|
||||
// triggerVisible = {
|
||||
// e: proto.options.canResizing,
|
||||
// w: proto.options.canResizing,
|
||||
// n: proto.options.canResizing,
|
||||
// s: proto.options.canResizing,
|
||||
// };
|
||||
// } else if (proto && proto.options && typeof proto.options.canResizing === 'function') {
|
||||
// triggerVisible = {
|
||||
// e: proto.options.canResizing(node, 'e'),
|
||||
// w: proto.options.canResizing(node, 'w'),
|
||||
// n: proto.options.canResizing(node, 'n'),
|
||||
// s: proto.options.canResizing(node, 's'),
|
||||
// };
|
||||
// }
|
||||
console.log(resizingHandler, 'node data');
|
||||
|
||||
const className = classNames('lc-borders lc-resize-box');
|
||||
|
||||
@ -231,6 +256,9 @@ export class BoxResizingInstance extends Component<{
|
||||
<div>
|
||||
{triggerVisible.w && (
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineLeft = ref;
|
||||
}}
|
||||
className={className}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
@ -242,6 +270,9 @@ export class BoxResizingInstance extends Component<{
|
||||
{triggerVisible.e && (
|
||||
<div
|
||||
className={className}
|
||||
ref={(ref) => {
|
||||
this.outlineRight = ref;
|
||||
}}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
|
||||
|
||||
@ -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();
|
||||
Loading…
x
Reference in New Issue
Block a user