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
ece6efd828
commit
d5f459620b
@ -52,35 +52,35 @@ export default class BoxResizing extends Component {
|
||||
// this.bus = new Bus();
|
||||
}
|
||||
|
||||
// componentDidMount() {
|
||||
// // this.hoveringCapture.setBoundary(this.outline);
|
||||
// this.willBind();
|
||||
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 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 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);
|
||||
// }
|
||||
// };
|
||||
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);
|
||||
// }
|
||||
// DragResizeEngine.onResize(resize);
|
||||
// DragResizeEngine.onResizeStart(resizeStart);
|
||||
// DragResizeEngine.onResizeEnd(resizeEnd);
|
||||
}
|
||||
|
||||
// componentDidUpdate() {
|
||||
// this.hoveringCapture.setBoundary(this.outline);
|
||||
@ -142,6 +142,10 @@ 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);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
@ -151,94 +155,6 @@ export default class BoxResizing extends Component {
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
// render() {
|
||||
// const node = this.selecting;
|
||||
// console.log(selecting, 'selecting');
|
||||
// if (!selecting || selecting.length < 1) {
|
||||
// // DIRTY FIX, recore has a bug!
|
||||
// return <Fragment />;
|
||||
// }
|
||||
// // if (!this.hoveringLine.hasOutline()) {
|
||||
// // return null;
|
||||
// // }
|
||||
|
||||
// // const page = node.getPage();
|
||||
// const bounds = 2;
|
||||
// // page.getBounds();
|
||||
// const st = 2;
|
||||
// // page.getScrollTop();
|
||||
// const rect = node.getRect();
|
||||
|
||||
// if (!rect || !bounds) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// const proto = node.componentMeta;
|
||||
// console.log('proto', proto);
|
||||
// const triggerVisible: any = {
|
||||
// w: true,
|
||||
// e: true,
|
||||
// };
|
||||
// // 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'),
|
||||
// // };
|
||||
// // }
|
||||
|
||||
// return (
|
||||
// <Fragment>
|
||||
// {selecting.map((node) => (
|
||||
// <BoxResizingForNode key={node.id} node={node} />
|
||||
// ))}
|
||||
// </Fragment>
|
||||
// );
|
||||
|
||||
// // return (
|
||||
// // <div
|
||||
// // ref={(ref) => {
|
||||
// // this.outline = ref;
|
||||
// // }}
|
||||
// // >
|
||||
// // {triggerVisible.w && (
|
||||
// // <div
|
||||
// // ref={(ref) => {
|
||||
// // this.outlineLeft = ref;
|
||||
// // }}
|
||||
// // className="engine-outline engine-resize-outline"
|
||||
// // style={{
|
||||
// // height: rect.height,
|
||||
// // transform: `translate(${rect.left - bounds.left - 10}px, ${rect.top + st - bounds.top}px)`,
|
||||
// // width: 20,
|
||||
// // }}
|
||||
// // />
|
||||
// // )}
|
||||
// // {triggerVisible.e && (
|
||||
// // <div
|
||||
// // ref={(ref) => {
|
||||
// // this.outlineRight = ref;
|
||||
// // }}
|
||||
// // className="engine-outline engine-resize-outline"
|
||||
// // style={{
|
||||
// // height: rect.height,
|
||||
// // transform: `translate(${rect.left - bounds.left + rect.width - 10}px, ${rect.top + st - bounds.top}px)`,
|
||||
// // width: 20,
|
||||
// // }}
|
||||
// // />
|
||||
// // )}
|
||||
// // </div>
|
||||
// // );
|
||||
// }
|
||||
}
|
||||
|
||||
@observer
|
||||
@ -303,11 +219,11 @@ export class BoxResizingInstance extends Component<{
|
||||
}
|
||||
|
||||
const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
|
||||
console.log(offsetHeight, offsetLeft, offsetTop, offsetWidth);
|
||||
const triggerVisible = {
|
||||
w: true,
|
||||
e: true,
|
||||
};
|
||||
console.log('hee');
|
||||
|
||||
const className = classNames('lc-borders lc-resize-box');
|
||||
|
||||
@ -335,11 +251,5 @@ export class BoxResizingInstance extends Component<{
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <div className={className} style={style}>
|
||||
// {!dragging && <Toolbar observed={observed} />}
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { BorderHovering } from './border-hovering';
|
||||
import { SimulatorContext } from '../context';
|
||||
import { BuiltinSimulatorHost } from '../host';
|
||||
import { BorderSelecting } from './border-selecting';
|
||||
import BoxResizing from './box-resizing';
|
||||
import BorderResizing from './border-resizing';
|
||||
import { InsertionView } from './insertion';
|
||||
import './bem-tools.less';
|
||||
import './borders.less';
|
||||
@ -25,7 +25,7 @@ export class BemTools extends Component {
|
||||
<BorderHovering key="hovering" />
|
||||
<BorderSelecting key="selecting" />
|
||||
<InsertionView key="insertion" />
|
||||
<BoxResizing key="resizing" />
|
||||
<BorderResizing key="resizing" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user