fix: node支持getRGL改造

This commit is contained in:
jianhui.fjh 2021-06-16 16:55:28 +08:00
parent f747f7934b
commit cabb91ab8b
3 changed files with 75 additions and 40 deletions

View File

@ -557,14 +557,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
});
const judgeEnterOtherRGL = (e: MouseEvent) => {
const _nodeInst = this.getNodeInstanceFromElement(e.target as Element);
const { isRGL: _isRGL, rglNode: _rglNode } = this.getRGLObject(
_nodeInst as NodeInstance,
);
const _node = _nodeInst?.node;
if (!_node) return { status: false };
const { isRGL: _isRGL, rglNode: _rglNode } = _node.getRGL();
const status = !!(
_isRGL &&
_rglNode?.id !== rglNode?.id &&
_rglNode?.getParent() !== node &&
nodeInst?.node !== _nodeInst?.node
_node !== nodeInst?.node
);
return { status, rglNode: _rglNode };
};
@ -734,19 +734,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
private disableDetecting?: () => void;
/**
* node实例的磁贴相关信息
*/
getRGLObject(nodeInst: NodeInstance) {
const isContainerNode = nodeInst?.node.isContainer();
const isEmptyNode = nodeInst?.node?.isEmpty();
const isRGLContainerNode = nodeInst?.node?.isRGLContainer;
const isRGLNode = nodeInst?.node?.getParent()?.isRGLContainer;
const isRGL = isRGLContainerNode || (isRGLNode && (!isContainerNode || !isEmptyNode));
let rglNode = isRGLContainerNode ? nodeInst?.node : isRGL ? nodeInst?.node?.getParent() : {};
return { isContainerNode, isEmptyNode, isRGLContainerNode, isRGLNode, isRGL, rglNode };
}
/**
*
*/

View File

@ -76,10 +76,6 @@ export interface ISensor {
*
*/
getNodeInstanceFromElement(e: Element | null): NodeInstance<ComponentInstance> | null;
/**
* RGL相关信息
*/
getRGLObject(nodeInst: NodeInstance): any;
}
export type DragObject = DragNodeObject | DragNodeDataObject | DragAnyObject;
@ -263,12 +259,12 @@ export class Dragon {
this._dragging = false;
const getRGLObject = (e: MouseEvent | DragEvent) => {
const getRGL = (e: MouseEvent | DragEvent) => {
const locateEvent = createLocateEvent(e);
const sensor = chooseSensor(locateEvent);
if (!sensor || !sensor.getNodeInstanceFromElement) return {};
const nodeInst = sensor.getNodeInstanceFromElement(e.target as Element);
return sensor.getRGLObject(nodeInst as NodeInstance);
return nodeInst?.node?.getRGL() || {};
};
const checkesc = (e: KeyboardEvent) => {
@ -324,7 +320,7 @@ export class Dragon {
lastArrive = e;
const locateEvent = createLocateEvent(e);
const sensor = chooseSensor(locateEvent);
const { isRGL, rglNode } = getRGLObject(e);
const { isRGL, rglNode } = getRGL(e);
if (isRGL) {
this._canDrop = !!sensor?.locate(locateEvent);
if (this._canDrop) {
@ -403,7 +399,7 @@ export class Dragon {
const over = (e?: any) => {
// 发送drop事件
if (e) {
const { isRGL, rglNode } = getRGLObject(e);
const { isRGL, rglNode } = getRGL(e);
if (isRGL && this._canDrop) {
const tarNode = dragObject.nodes[0];
if (rglNode.id !== tarNode.id) {

View File

@ -110,7 +110,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
/**
* @deprecated
*/
private _addons: { [key: string]: { exportData: () => any; isProp: boolean; } } = {};
private _addons: { [key: string]: { exportData: () => any; isProp: boolean } } = {};
@obx.ref private _parent: ParentalNode | null = null;
@ -177,7 +177,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
this.settingEntry = this.document.designer.createSettingEntry([this]);
this._children = new NodeChildren(this as ParentalNode, this.initialChildren(children));
this._children.internalInitParent();
this.props.import(this.upgradeProps(this.initProps(props || {})), this.upgradeProps(extras || {}));
this.props.import(
this.upgradeProps(this.initProps(props || {})),
this.upgradeProps(extras || {}),
);
this.setupAutoruns();
}
@ -221,6 +224,16 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return children || [];
}
private _isRGLContainer = false;
set isRGLContainer(status: boolean) {
this._isRGLContainer = status;
}
get isRGLContainer(): boolean {
return !!this._isRGLContainer;
}
isContainer(): boolean {
return this.isParental() && this.componentMeta.isContainer;
}
@ -335,7 +348,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
/**
*
*/
remove(useMutator = true, purge = true, options: NodeRemoveOptions = { suppressRemoveEvent: false }) {
remove(
useMutator = true,
purge = true,
options: NodeRemoveOptions = { suppressRemoveEvent: false },
) {
if (this.parent) {
if (!options.suppressRemoveEvent) {
this.document.designer.editor?.emit('node.remove.topLevel', {
@ -616,15 +633,21 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
import(data: Schema, checkId = false) {
const { componentName, id, children, props, ...extras } = data;
if (this.isSlot()) {
foreachReverse(this.children, (subNode: Node) => {
subNode.remove(true, true);
}, (iterable, idx) => (iterable as NodeChildren).get(idx));
foreachReverse(
this.children,
(subNode: Node) => {
subNode.remove(true, true);
},
(iterable, idx) => (iterable as NodeChildren).get(idx),
);
}
if (this.isParental()) {
this.props.import(props, extras);
(this._children as NodeChildren).import(children, checkId);
} else {
this.props.get('children', true)!.setValue(isDOMText(children) || isJSExpression(children) ? children : '');
this.props
.get('children', true)!
.setValue(isDOMText(children) || isJSExpression(children) ? children : '');
}
}
@ -792,7 +815,8 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
* action
*/
canPerformAction(action: string): boolean {
const availableActions = this.componentMeta?.availableActions?.map((action) => action.name) || [];
const availableActions =
this.componentMeta?.availableActions?.map((action) => action.name) || [];
return availableActions.indexOf(action) >= 0;
}
@ -854,7 +878,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return this.children?.onChange(fn);
}
mergeChildren(remover: () => any, adder: (children: Node[]) => NodeData[] | null, sorter: () => any) {
mergeChildren(
remover: () => any,
adder: (children: Node[]) => NodeData[] | null,
sorter: () => any,
) {
this.children?.mergeChildren(remover, adder, sorter);
}
@ -907,6 +935,21 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return this.document;
}
/**
*
*/
getRGL() {
const isContainerNode = this.isContainer();
const isEmptyNode = this.isEmpty();
const isRGLContainerNode = this.isRGLContainer;
const isRGLNode = this.getParent()?.isRGLContainer;
const isRGL = isRGLContainerNode || (isRGLNode && (!isContainerNode || !isEmptyNode));
let rglNode = isRGLContainerNode ? this : isRGL ? this?.getParent() : {};
return { isContainerNode, isEmptyNode, isRGLContainerNode, isRGLNode, isRGL, rglNode };
}
/**
/**
* @deprecated
*/
@ -933,9 +976,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return { container: dropElement, ref };
}
const rootCanDropIn = this.componentMeta?.prototype?.options?.canDropIn;
if (rootCanDropIn === undefined
|| rootCanDropIn === true
|| (typeof rootCanDropIn === 'function' && rootCanDropIn(node))) {
if (
rootCanDropIn === undefined ||
rootCanDropIn === true ||
(typeof rootCanDropIn === 'function' && rootCanDropIn(node))
) {
return { container: this, ref };
}
// 假如最后找不到合适位置,返回 null 阻止继续插入节点
@ -944,9 +989,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
const canDropIn = this.componentMeta?.prototype?.options?.canDropIn;
if (this.isContainer()) {
if (canDropIn === undefined ||
if (
canDropIn === undefined ||
(typeof canDropIn === 'boolean' && canDropIn) ||
(typeof canDropIn === 'function' && canDropIn(node))) {
(typeof canDropIn === 'function' && canDropIn(node))
) {
return { container: this, ref };
}
}
@ -1113,7 +1160,12 @@ export function comparePosition(node1: Node, node2: Node): PositionNO {
return PositionNO.BeforeOrAfter;
}
export function insertChild(container: ParentalNode, thing: Node | NodeData, at?: number | null, copy?: boolean): Node {
export function insertChild(
container: ParentalNode,
thing: Node | NodeData,
at?: number | null,
copy?: boolean,
): Node {
let node: Node;
if (isNode(thing) && (copy || thing.isSlot())) {
thing = thing.export(TransformStage.Clone);