github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-21 16:48:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

add boreder resizing

Browse Source
This commit is contained in:
飞百 2020-05-11 16:51:45 +08:00
parent d5f459620b
commit 9d04cebb46
3 changed files with 210 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/designer/package.json
View File

@ -19,6 +19,7 @@
"@ali/lowcode-types": "^0.8.1", "@ali/lowcode-types": "^0.8.1",
"@ali/lowcode-utils": "^0.8.2", "@ali/lowcode-utils": "^0.8.2",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"event": "^1.0.0",
"react": "^16", "react": "^16",
"react-dom": "^16.7.0" "react-dom": "^16.7.0"
}, },

191
packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
View File

@ -1,7 +1,7 @@
import { Component, Fragment } from 'react'; import { Component, Fragment } from 'react';
// import Bus from '../../../../core/bus'; // import Bus from '../../../../core/bus';
// import DragResizeEngine from '../../../../core/dragResizeEngine'; import DragResizeEngine from './dragResizeEngine';
// import OverlayCore from '../../../../core/overlay'; // import OverlayCore from '../../../../core/overlay';
import { observer, computed, Tip } from '@ali/lowcode-editor-core'; import { observer, computed, Tip } from '@ali/lowcode-editor-core';
import classNames from 'classnames'; import classNames from 'classnames';
@ -52,89 +52,20 @@ export default class BoxResizing extends Component {
// this.bus = new Bus(); // this.bus = new Bus();
} }
componentDidMount() { componentDidUpdate() {
// this.hoveringCapture.setBoundary(this.outline); // this.hoveringCapture.setBoundary(this.outline);
// this.willBind(); // 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() { componentWillUnmount() {
// this.hoveringCapture.setBoundary(this.outline); // // this.hoveringCapture.setBoundary(null);
// this.willBind();
// }
// componentWillUnmount() {
// this.hoveringCapture.setBoundary(null);
// if (this.willDetach) { // if (this.willDetach) {
// this.willDetach(); // this.willDetach();
// } // }
// if (this.willUnbind) { // if (this.willUnbind) {
// 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;
// };
// }
render() { render() {
const selecting = this.selecting; const selecting = this.selecting;
@ -142,10 +73,9 @@ export default class BoxResizing extends Component {
// DIRTY FIX, recore has a bug! // DIRTY FIX, recore has a bug!
return <Fragment />; return <Fragment />;
} }
// console.log(selecting[0].componentMeta, 'component meta data');
const componentMeta = selecting[0].componentMeta; // const componentMeta = selecting[0].componentMeta;
const metaData = componentMeta.getMetadata(); // const metaData = componentMeta.getMetadata();
console.log('meta data', metaData);
return ( return (
<Fragment> <Fragment>
@ -208,22 +138,117 @@ export class BoxResizingInstance extends Component<{
highlight?: boolean; highlight?: boolean;
dragging?: boolean; dragging?: boolean;
}> { }> {
// private outline: any;
private willUnbind: () => any;
private outlineRight: any;
private outlineLeft: any;
componentWillUnmount() { componentWillUnmount() {
this.props.observed.purge(); 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() { render() {
const { observed, highlight, dragging } = this.props; const { observed, highlight, dragging } = this.props;
if (!observed.hasOffset) { if (!observed.hasOffset) {
return null; return null;
} }
const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
const triggerVisible = { const triggerVisible = {
w: true, w: true,
e: 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'); const className = classNames('lc-borders lc-resize-box');
@ -231,6 +256,9 @@ export class BoxResizingInstance extends Component<{
<div> <div>
{triggerVisible.w && ( {triggerVisible.w && (
<div <div
ref={(ref) => {
this.outlineLeft = ref;
}}
className={className} className={className}
style={{ style={{
height: offsetHeight, height: offsetHeight,
@ -242,6 +270,9 @@ export class BoxResizingInstance extends Component<{
{triggerVisible.e && ( {triggerVisible.e && (
<div <div
className={className} className={className}
ref={(ref) => {
this.outlineRight = ref;
}}
style={{ style={{
height: offsetHeight, height: offsetHeight,
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`, transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,

92
packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts Normal file
View File

@ -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();