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

feat: for box resizing

Browse Source
This commit is contained in:
飞百 2020-05-11 22:45:27 +08:00
parent 83d6cd3b58
commit cb2854d735
2 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,11 +10,11 @@ import { BuiltinSimulatorHost } from '../host';
import { OffsetObserver } from '../../designer'; import { OffsetObserver } from '../../designer';
@observer @observer
export default class BoxResizing extends Component { export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext; static contextType = SimulatorContext;
get host(): BuiltinSimulatorHost { get host(): BuiltinSimulatorHost {
return this.context; return this.props.host;
} }
get dragging(): boolean { get dragging(): boolean {
@ -80,7 +80,7 @@ export default class BoxResizing extends Component {
return ( return (
<Fragment> <Fragment>
{selecting.map((node) => ( {selecting.map((node) => (
<BoxResizingForNode key={node.id} node={node} /> <BoxResizingForNode key={node.id} node={node} host={this.props.host} />
))} ))}
</Fragment> </Fragment>
); );
@ -88,11 +88,11 @@ export default class BoxResizing extends Component {
} }
@observer @observer
export class BoxResizingForNode extends Component<{ node: Node }> { export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> {
static contextType = SimulatorContext; static contextType = SimulatorContext;
get host(): BuiltinSimulatorHost { get host(): BuiltinSimulatorHost {
return this.context; return this.props.host;
} }
get dragging(): boolean { get dragging(): boolean {
@ -117,7 +117,7 @@ export class BoxResizingForNode extends Component<{ node: Node }> {
} }
return ( return (
<Fragment key={node.id}> <Fragment key={node.id}>
{instances.map((instance) => { {instances.map((instance: any) => {
const observed = designer.createOffsetObserver({ const observed = designer.createOffsetObserver({
node, node,
instance, instance,
@ -147,28 +147,49 @@ export class BoxResizingInstance extends Component<{
this.props.observed.purge(); this.props.observed.purge();
} }
getExperiMentalFns = (metaData: any) => {
if (metaData.experimental && metaData.experimental.callbacks) {
return metaData.experimantal.callbacks;
}
};
componentDidMount() { componentDidMount() {
// 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 resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
const proto = node.getPrototype(); const metaData = node.componentMeta.getMetadata();
if (proto && proto.options && typeof proto.options.onResize === 'function') { if (
proto.options.onResize(e, direction, node, moveX, moveY); metaData &&
metaData.experimental &&
metaData.experimental.callbacks &&
metaData.experimental.callbacks.onResize === 'funtion'
) {
metaData.experimental.callbacks.onResize(e, direction, node, moveX, moveY);
} }
}; };
const resizeStart = (e: MouseEvent, direction: string, node: any) => { const resizeStart = (e: MouseEvent, direction: string, node: any) => {
const proto = node.getPrototype(); const metaData = node.componentMeta.getMetadata();
if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { if (
proto.options.onResizeStart(e, direction, node); metaData &&
metaData.experimental &&
metaData.experimental.callbacks &&
metaData.experimental.callbacks.onResizeStart === 'funtion'
) {
metaData.experimental.callbacks.onResizeStart(e, direction, node);
} }
}; };
const resizeEnd = (e: MouseEvent, direction: string, node: any) => { const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
const proto = node.getPrototype(); const metaData = node.componentMeta.getMetadata();
if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { if (
proto.options.onResizeEnd(e, direction, node); metaData &&
metaData.experimental &&
metaData.experimental.callbacks &&
metaData.experimental.callbacks.onResizeEnd === 'funtion'
) {
metaData.experimental.callbacks.onResizeStart(e, direction, node);
} }
}; };
@ -194,10 +215,12 @@ export class BoxResizingInstance extends Component<{
// return null; // return null;
// } // }
// return this.hoveringLine.getCurrentNode(); // return this.hoveringLine.getCurrentNode();
return this.props.observed.node;
}), }),
); );
unBind.push( unBind.push(
DragResizeEngine.from(this.outlineLeft, 'w', () => { DragResizeEngine.from(this.outlineLeft, 'w', () => {
return this.props.observed.node;
// if (!this.hoveringLine.hasOutline()) { // if (!this.hoveringLine.hasOutline()) {
// return null; // return null;
// } // }
@ -222,39 +245,17 @@ export class BoxResizingInstance extends Component<{
} }
const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
const triggerVisible = { let triggerVisible: any = [];
w: true,
e: true,
};
// let triggerVisible: any = {};
const metaData = node.componentMeta.getMetadata(); const metaData = node.componentMeta.getMetadata();
let resizingHandler: any = {};
if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) { if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) {
resizingHandler = metaData.experimental.getResizingHandlers(node); triggerVisible = 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');
return ( return (
<div> <div>
{triggerVisible.w && ( {triggerVisible.includes('w') && (
<div <div
ref={(ref) => { ref={(ref) => {
this.outlineLeft = ref; this.outlineLeft = ref;
@ -267,7 +268,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.e && ( {triggerVisible.includes('e') && (
<div <div
className={className} className={className}
ref={(ref) => { ref={(ref) => {

3
packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts
View File

@ -25,7 +25,6 @@ class DragResizeEngine {
from(shell: Element, direction: string, boost: (e: MouseEvent) => any) { from(shell: Element, direction: string, boost: (e: MouseEvent) => any) {
let node: any; let node: any;
let startEvent: MouseEvent; let startEvent: MouseEvent;
console.log('drag from');
if (!shell) { if (!shell) {
return () => {}; return () => {};
@ -65,7 +64,6 @@ class DragResizeEngine {
} }
onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) { onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) {
console.log('hello resize start');
this.emitter.on('resizestart', func); this.emitter.on('resizestart', func);
return () => { return () => {
this.emitter.removeListener('resizestart', func); this.emitter.removeListener('resizestart', func);
@ -73,7 +71,6 @@ class DragResizeEngine {
} }
onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) { onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
console.log('hello on resize');
this.emitter.on('resize', func); this.emitter.on('resize', func);
return () => { return () => {
this.emitter.removeListener('resize', func); this.emitter.removeListener('resize', func);