From a242fb1747a17c76e1ef0130d56b6b31a4590a94 Mon Sep 17 00:00:00 2001 From: jalal246 Date: Tue, 2 Aug 2022 18:48:33 +0200 Subject: [PATCH 1/3] init --- .../src/Node/DFlexBaseNode.ts | 15 +++++++------ .../src/Node/DFlexCoreNode.ts | 21 +++++++++++-------- .../dflex-core-instance/src/Node/constants.ts | 9 ++++++++ .../src/LayoutManager/DFlexDnDStore.ts | 3 +++ .../dflex-draggable/src/DFlexDraggable.ts | 9 ++++++++ .../src/DFlexDraggableStore.ts | 5 +++++ packages/dflex-store/src/DFlexBaseStore.ts | 15 ++++++++----- packages/dflex-utils/src/index.ts | 1 + packages/dflex-utils/src/types.ts | 2 ++ 9 files changed, 60 insertions(+), 20 deletions(-) diff --git a/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts b/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts index 062cf89b5..0a80f5681 100644 --- a/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts +++ b/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts @@ -1,4 +1,4 @@ -import { PointNum } from "@dflex/utils"; +import { PointNum, DFlexElmType } from "@dflex/utils"; import { DFLEX_ATTRIBUTES } from "./constants"; import type { AllowedAttributes } from "./constants"; @@ -14,19 +14,22 @@ class DFlexBaseNode { private _hasAttribute?: AttributeSet; - static getType(): string { - return "base:node"; - } + private readonly _type: DFlexElmType; static transform(DOM: HTMLElement, x: number, y: number): void { DOM.style.transform = `translate3d(${x}px,${y}px, 0)`; } - constructor(id: string) { + constructor(id: string, type: DFlexElmType) { this.id = id; + this._type = type; this.isPaused = true; } + getType(): DFlexElmType { + return this._type; + } + /** * Initialize the translate AxesCoordinates as part of abstract instance and * necessary for darg only movement. @@ -42,7 +45,7 @@ class DFlexBaseNode { setAttribute( DOM: HTMLElement, key: AllowedAttributes, - value: string | number + value: string | number = "true" ): void { if (key === "INDEX") { DOM.setAttribute(DFLEX_ATTRIBUTES[key], `${value}`); diff --git a/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts b/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts index a8f9c3555..7b40306b6 100644 --- a/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts +++ b/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts @@ -1,10 +1,16 @@ import { PointNum } from "@dflex/utils"; -import type { RectDimensions, Direction, Axes, AxesPoint } from "@dflex/utils"; +import type { + RectDimensions, + Direction, + Axes, + AxesPoint, + DFlexElmType, +} from "@dflex/utils"; import DFlexBaseNode from "./DFlexBaseNode"; export type SerializedDFlexCoreNode = { - type: string; + type: DFlexElmType; version: 3; id: string; translate: PointNum | null; @@ -46,6 +52,7 @@ export interface DFlexNodeInput { keys: Keys; depth: number; readonly: boolean; + type: DFlexElmType; } class DFlexCoreNode extends DFlexBaseNode { @@ -71,16 +78,12 @@ class DFlexCoreNode extends DFlexBaseNode { private _translateHistory?: TransitionHistory[]; - static getType(): string { - return "core:node"; - } - static transform = DFlexBaseNode.transform; constructor(eleWithPointer: DFlexNodeInput) { - const { order, keys, depth, readonly, id } = eleWithPointer; + const { order, keys, depth, readonly, id, type } = eleWithPointer; - super(id); + super(id, type); this.order = order; this.keys = keys; @@ -382,7 +385,7 @@ class DFlexCoreNode extends DFlexBaseNode { getSerializedInstance(): SerializedDFlexCoreNode { return { - type: DFlexCoreNode.getType(), + type: this.getType(), version: 3, id: this.id, grid: this.grid, diff --git a/packages/dflex-core-instance/src/Node/constants.ts b/packages/dflex-core-instance/src/Node/constants.ts index eb9171c02..7ebdb289b 100644 --- a/packages/dflex-core-instance/src/Node/constants.ts +++ b/packages/dflex-core-instance/src/Node/constants.ts @@ -2,6 +2,12 @@ const OUT_POS = "data-dragged-out-position"; const OUT_CONTAINER = "data-dragged-out-container"; const INDEX = "data-index"; const DRAGGED = "dragged"; +// cons "interactive" | "droppable" | "draggable"; + +const INTERACTIVE = "data-interactive"; +const DROPPABLE = "data-droppable"; +const DRAGGABLE = "data-draggable"; + // const GRID_X = "data-grid-x"; // const GRID_Y = "data-grid-y"; @@ -12,6 +18,9 @@ export const DFLEX_ATTRIBUTES = Object.freeze({ INDEX, OUT_POS, OUT_CONTAINER, + INTERACTIVE, + DROPPABLE, + DRAGGABLE, }); export type AllowedAttributes = keyof typeof DFLEX_ATTRIBUTES; diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts index 404037a07..2a50e4441 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts +++ b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts @@ -36,6 +36,8 @@ type UpdatesQueue = Array< type Deferred = Array<() => void>; +const INTERACTIVE_ELM = "interactive"; + class DFlexDnDStore extends DFlexBaseStore { containers: Containers; @@ -198,6 +200,7 @@ class DFlexDnDStore extends DFlexBaseStore { id, readonly: !!element.readonly, depth: element.depth || 0, + type: element.type || INTERACTIVE_ELM, }; // Create an instance of DFlexCoreNode and gets the DOM element into the store. diff --git a/packages/dflex-draggable/src/DFlexDraggable.ts b/packages/dflex-draggable/src/DFlexDraggable.ts index 3de18594d..bb1ec027e 100644 --- a/packages/dflex-draggable/src/DFlexDraggable.ts +++ b/packages/dflex-draggable/src/DFlexDraggable.ts @@ -18,6 +18,15 @@ class DFlexDraggable extends DFlexBaseDraggable { } dragAt(x: number, y: number) { + if (this.draggedElm.getType() === "droppable") { + if (__DEV__) { + // eslint-disable-next-line no-console + console.warn("Droppable element can't be dragged"); + } + + return; + } + this.translate(x, y); this.draggedElm.translate.clone(this.translatePlaceholder); diff --git a/packages/dflex-draggable/src/DFlexDraggableStore.ts b/packages/dflex-draggable/src/DFlexDraggableStore.ts index 05b19a116..f5840da24 100644 --- a/packages/dflex-draggable/src/DFlexDraggableStore.ts +++ b/packages/dflex-draggable/src/DFlexDraggableStore.ts @@ -6,6 +6,8 @@ declare global { var $DFlex_Draggable: DFlexDraggableStore; } +const DRAGGABLE_ELM = "draggable"; + class DFlexDraggableStore extends DFlexBaseStore { constructor() { super(); @@ -29,11 +31,14 @@ class DFlexDraggableStore extends DFlexBaseStore { */ // @ts-ignore register(id: string) { + if (!canUseDOM()) return; + super.register( { id, depth: 0, readonly: false, + type: DRAGGABLE_ELM, }, this._initBranch ); diff --git a/packages/dflex-store/src/DFlexBaseStore.ts b/packages/dflex-store/src/DFlexBaseStore.ts index 4efc1e1be..1ff7c32db 100644 --- a/packages/dflex-store/src/DFlexBaseStore.ts +++ b/packages/dflex-store/src/DFlexBaseStore.ts @@ -2,7 +2,7 @@ import Generator, { ELmBranch } from "@dflex/dom-gen"; import { DFlexNode, DFlexNodeInput } from "@dflex/core-instance"; -import { getParentElm, Tracker } from "@dflex/utils"; +import { getParentElm, Tracker, DFlexElmType } from "@dflex/utils"; // https://github.com/microsoft/TypeScript/issues/28374#issuecomment-536521051 type DeepNonNullable = { @@ -24,6 +24,8 @@ export type RegisterInputOpts = { * same interactive container. * */ readonly?: boolean; + + type?: DFlexElmType; }; export type RegisterInputBase = DeepNonNullable; @@ -110,7 +112,7 @@ class DFlexBaseStore { elm: RegisterInputBase, branchComposedCallBack: BranchComposedCallBackFunction | null ): void { - const { id, depth, readonly } = elm; + const { id, depth, readonly, type } = elm; if (!this.interactiveDOM.has(id)) { this.interactiveDOM.set(id, DOM); @@ -140,6 +142,7 @@ class DFlexBaseStore { keys, depth, readonly, + type, }; const dflexElm = new DFlexNode(coreElement); @@ -147,6 +150,7 @@ class DFlexBaseStore { this.registry.set(id, dflexElm); dflexElm.setAttribute(DOM, "INDEX", dflexElm.order.self); + dflexElm.setAttribute(DOM, "DRAGGABLE", "true"); if (depth >= 1) { if (keys.CHK === null) { @@ -176,9 +180,9 @@ class DFlexBaseStore { */ register( element: RegisterInputBase, - branchComposedCallBack?: BranchComposedCallBackFunction + branchComposedCallBack: BranchComposedCallBackFunction | null = null ): void { - const { id, depth } = element; + const { id, depth, type } = element; const DOM = this.interactiveDOM.has(id) ? this.interactiveDOM.get(id)! @@ -217,8 +221,9 @@ class DFlexBaseStore { depth: parentDepth, // Default value for inserted parent element. readonly: true, + type, }, - branchComposedCallBack || null + branchComposedCallBack ); }); diff --git a/packages/dflex-utils/src/index.ts b/packages/dflex-utils/src/index.ts index 740e4fef9..bed6bff04 100644 --- a/packages/dflex-utils/src/index.ts +++ b/packages/dflex-utils/src/index.ts @@ -21,6 +21,7 @@ export type { Axes, Axis, Direction, + DFlexElmType, } from "./types"; export { combineKeys, dirtyAssignBiggestRect } from "./collections"; diff --git a/packages/dflex-utils/src/types.ts b/packages/dflex-utils/src/types.ts index e7b3117f2..8b8584bd2 100644 --- a/packages/dflex-utils/src/types.ts +++ b/packages/dflex-utils/src/types.ts @@ -22,3 +22,5 @@ export type Axis = "x" | "y"; /** Bi-directional Axis. */ export type Axes = Axis | "z"; + +export type DFlexElmType = "interactive" | "droppable" | "draggable"; From 97e351f405f5c22fafd78a65468ab769b49e630c Mon Sep 17 00:00:00 2001 From: jalal246 Date: Wed, 3 Aug 2022 18:20:17 +0200 Subject: [PATCH 2/3] wip --- .../src/Node/DFlexBaseNode.ts | 23 ++++++++- .../src/Node/DFlexCoreNode.ts | 6 +-- .../dflex-core-instance/src/Node/constants.ts | 10 +--- .../src/components/DFlexDnDComponent.tsx | 8 ++-- .../components/todo/TodoListWithReadonly.tsx | 22 ++++++--- .../src/Droppable/DFlexMechanismController.ts | 2 +- .../src/LayoutManager/DFlexDnDStore.ts | 16 ++++--- packages/dflex-dnd/src/index.ts | 2 + .../src/DFlexDraggableStore.ts | 2 +- packages/dflex-store/src/DFlexBaseStore.ts | 21 ++------- packages/dflex-utils/src/dom/getParentElm.ts | 47 +++++++++++-------- packages/dflex-utils/src/types.ts | 10 +++- 12 files changed, 98 insertions(+), 71 deletions(-) diff --git a/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts b/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts index 0a80f5681..c1e5aedab 100644 --- a/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts +++ b/packages/dflex-core-instance/src/Node/DFlexBaseNode.ts @@ -14,7 +14,7 @@ class DFlexBaseNode { private _hasAttribute?: AttributeSet; - private readonly _type: DFlexElmType; + private _type: DFlexElmType; static transform(DOM: HTMLElement, x: number, y: number): void { DOM.style.transform = `translate3d(${x}px,${y}px, 0)`; @@ -30,6 +30,15 @@ class DFlexBaseNode { return this._type; } + /** + * This only happens during the registration. + * + * @param type + */ + setType(type: DFlexElmType): void { + this._type = type; + } + /** * Initialize the translate AxesCoordinates as part of abstract instance and * necessary for darg only movement. @@ -45,7 +54,7 @@ class DFlexBaseNode { setAttribute( DOM: HTMLElement, key: AllowedAttributes, - value: string | number = "true" + value: "true" | "false" | DFlexElmType | number ): void { if (key === "INDEX") { DOM.setAttribute(DFLEX_ATTRIBUTES[key], `${value}`); @@ -53,6 +62,16 @@ class DFlexBaseNode { return; } + if (__DEV__) { + if (this._hasAttribute === undefined) { + throw new Error(`setAttribute: Attribute set is not initialized`); + } + + if (!DFLEX_ATTRIBUTES[key]) { + throw new Error(`setAttribute: Invalid attribute key: ${key}`); + } + } + if (this._hasAttribute!.has(key)) return; DOM.setAttribute(DFLEX_ATTRIBUTES[key], `${value}`); this._hasAttribute!.add(key); diff --git a/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts b/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts index 7b40306b6..47551526d 100644 --- a/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts +++ b/packages/dflex-core-instance/src/Node/DFlexCoreNode.ts @@ -51,7 +51,6 @@ export interface DFlexNodeInput { order: DOMGenOrder; keys: Keys; depth: number; - readonly: boolean; type: DFlexElmType; } @@ -72,8 +71,6 @@ class DFlexCoreNode extends DFlexBaseNode { hasPendingTransform!: boolean; - readonly: boolean; - animatedFrame: number | null; private _translateHistory?: TransitionHistory[]; @@ -81,14 +78,13 @@ class DFlexCoreNode extends DFlexBaseNode { static transform = DFlexBaseNode.transform; constructor(eleWithPointer: DFlexNodeInput) { - const { order, keys, depth, readonly, id, type } = eleWithPointer; + const { order, keys, depth, id, type } = eleWithPointer; super(id, type); this.order = order; this.keys = keys; this.depth = depth; - this.readonly = readonly; this.isPaused = false; this.isVisible = !this.isPaused; this.animatedFrame = null; diff --git a/packages/dflex-core-instance/src/Node/constants.ts b/packages/dflex-core-instance/src/Node/constants.ts index 7ebdb289b..ec79b007c 100644 --- a/packages/dflex-core-instance/src/Node/constants.ts +++ b/packages/dflex-core-instance/src/Node/constants.ts @@ -2,11 +2,7 @@ const OUT_POS = "data-dragged-out-position"; const OUT_CONTAINER = "data-dragged-out-container"; const INDEX = "data-index"; const DRAGGED = "dragged"; -// cons "interactive" | "droppable" | "draggable"; - -const INTERACTIVE = "data-interactive"; -const DROPPABLE = "data-droppable"; -const DRAGGABLE = "data-draggable"; +const ELM_TYPE = "data-element-type"; // const GRID_X = "data-grid-x"; // const GRID_Y = "data-grid-y"; @@ -18,9 +14,7 @@ export const DFLEX_ATTRIBUTES = Object.freeze({ INDEX, OUT_POS, OUT_CONTAINER, - INTERACTIVE, - DROPPABLE, - DRAGGABLE, + ELM_TYPE, }); export type AllowedAttributes = keyof typeof DFLEX_ATTRIBUTES; diff --git a/packages/dflex-dnd-playground/src/components/DFlexDnDComponent.tsx b/packages/dflex-dnd-playground/src/components/DFlexDnDComponent.tsx index 6dfb0bdbd..fd98b817d 100644 --- a/packages/dflex-dnd-playground/src/components/DFlexDnDComponent.tsx +++ b/packages/dflex-dnd-playground/src/components/DFlexDnDComponent.tsx @@ -3,7 +3,7 @@ import React from "react"; import { store, DnD } from "@dflex/dnd"; -import type { DFlexDnDOpts, DFlexEvents } from "@dflex/dnd"; +import type { DFlexDnDOpts, DFlexEvents, DFlexElmType } from "@dflex/dnd"; // const evts = new Set([ // "$onDragOutContainer", @@ -25,7 +25,7 @@ interface Props { registerInput: { id: string; depth?: number; - readonly?: boolean; + type?: DFlexElmType; }; opts?: DFlexDnDOpts; } @@ -40,11 +40,11 @@ export const DFlexDnDComponent = ({ }: Props) => { const taskRef = React.useRef() as React.MutableRefObject; - const { id, depth, readonly } = registerInput; + const { id, depth, type } = registerInput; React.useEffect(() => { if (taskRef.current) { - store.register({ id, depth, readonly }); + store.register({ id, depth, type }); } return () => { diff --git a/packages/dflex-dnd-playground/src/components/todo/TodoListWithReadonly.tsx b/packages/dflex-dnd-playground/src/components/todo/TodoListWithReadonly.tsx index 1bd9ff21c..63021b7cc 100644 --- a/packages/dflex-dnd-playground/src/components/todo/TodoListWithReadonly.tsx +++ b/packages/dflex-dnd-playground/src/components/todo/TodoListWithReadonly.tsx @@ -1,29 +1,37 @@ +import type { DFlexElmType } from "@dflex/dnd"; import React from "react"; import DFlexDnDComponent from "../DFlexDnDComponent"; +type Task = { + id: string; + type: DFlexElmType; + msg: string; + style: React.CSSProperties; +}; + const TodoListWithReadonly = () => { - const tasks = [ + const tasks: Task[] = [ { - readonly: false, + type: "interactive", id: "interactive-1", msg: "Interactive task 1", style: { height: "4.5rem" }, }, { - readonly: true, + type: "draggable", id: "readonly-1", msg: "Readonly task 1", style: { height: "4.5rem" }, }, { - readonly: false, + type: "interactive", id: "interactive-2", msg: "Interactive task 2", style: { height: "4.5rem" }, }, { - readonly: true, + type: "draggable", id: "readonly-2", msg: "Readonly task 2", style: { height: "4.5rem" }, @@ -34,10 +42,10 @@ const TodoListWithReadonly = () => {
    - {tasks.map(({ msg, id, readonly, style }) => ( + {tasks.map(({ msg, id, type, style }) => ( diff --git a/packages/dflex-dnd/src/Droppable/DFlexMechanismController.ts b/packages/dflex-dnd/src/Droppable/DFlexMechanismController.ts index 43a8053e5..2d2bd0b67 100644 --- a/packages/dflex-dnd/src/Droppable/DFlexMechanismController.ts +++ b/packages/dflex-dnd/src/Droppable/DFlexMechanismController.ts @@ -16,7 +16,7 @@ export function isIDEligible(elmID: string, draggedID: string): boolean { elmID.length > 0 && elmID !== draggedID && store.has(elmID) && - !store.registry.get(elmID)!.readonly + store.registry.get(elmID)!.getType() === "interactive" ); } diff --git a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts index 2a50e4441..cf0865f27 100644 --- a/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts +++ b/packages/dflex-dnd/src/LayoutManager/DFlexDnDStore.ts @@ -91,24 +91,27 @@ class DFlexDnDStore extends DFlexBaseStore { container: DFlexParentContainer, id: string ) { - const [dflexNode, DOM] = this.getElmWithDOM(id); + const [dflexElm, DOM] = this.getElmWithDOM(id); const { scrollRect } = scroll; - dflexNode.resume(DOM, scrollRect.left, scrollRect.top); + dflexElm.resume(DOM, scrollRect.left, scrollRect.top); // Using element grid zero to know if the element has been initiated inside // container or not. - if (dflexNode.grid.x === 0) { - const { initialOffset } = dflexNode; + if (dflexElm.grid.x === 0) { + const { initialOffset } = dflexElm; container.registerNewElm( initialOffset, - this.unifiedContainerDimensions[dflexNode.depth] + this.unifiedContainerDimensions[dflexElm.depth] ); - dflexNode.grid.clone(container.grid); + dflexElm.grid.clone(container.grid); } + + dflexElm.setAttribute(DOM, "INDEX", dflexElm.order.self); + dflexElm.setAttribute(DOM, "ELM_TYPE", dflexElm.getType()); } private _initBranch(SK: string, depth: number, DOM: HTMLElement) { @@ -198,7 +201,6 @@ class DFlexDnDStore extends DFlexBaseStore { () => { const coreInput = { id, - readonly: !!element.readonly, depth: element.depth || 0, type: element.type || INTERACTIVE_ELM, }; diff --git a/packages/dflex-dnd/src/index.ts b/packages/dflex-dnd/src/index.ts index a4985e555..f10898f06 100644 --- a/packages/dflex-dnd/src/index.ts +++ b/packages/dflex-dnd/src/index.ts @@ -11,3 +11,5 @@ export type { DFlexEventsTypes, DFlexListenerEvents, } from "./LayoutManager"; + +export type { DFlexElmType } from "@dflex/utils"; diff --git a/packages/dflex-draggable/src/DFlexDraggableStore.ts b/packages/dflex-draggable/src/DFlexDraggableStore.ts index f5840da24..03f3d0b6c 100644 --- a/packages/dflex-draggable/src/DFlexDraggableStore.ts +++ b/packages/dflex-draggable/src/DFlexDraggableStore.ts @@ -19,6 +19,7 @@ class DFlexDraggableStore extends DFlexBaseStore { const [dflexNode, DOM] = this.getElmWithDOM(id); dflexNode.resume(DOM, 0, 0); + dflexNode.setAttribute(DOM, "ELM_TYPE", DRAGGABLE_ELM); } private _initBranch(SK: string) { @@ -37,7 +38,6 @@ class DFlexDraggableStore extends DFlexBaseStore { { id, depth: 0, - readonly: false, type: DRAGGABLE_ELM, }, this._initBranch diff --git a/packages/dflex-store/src/DFlexBaseStore.ts b/packages/dflex-store/src/DFlexBaseStore.ts index 1ff7c32db..a120639d4 100644 --- a/packages/dflex-store/src/DFlexBaseStore.ts +++ b/packages/dflex-store/src/DFlexBaseStore.ts @@ -19,12 +19,6 @@ export type RegisterInputOpts = { /** The depth of targeted element starting from zero (The default value is zero). */ depth?: number; - /** - * True for elements that won't be transformed during DnD but belongs to the - * same interactive container. - * */ - readonly?: boolean; - type?: DFlexElmType; }; @@ -112,7 +106,7 @@ class DFlexBaseStore { elm: RegisterInputBase, branchComposedCallBack: BranchComposedCallBackFunction | null ): void { - const { id, depth, readonly, type } = elm; + const { id, depth, type } = elm; if (!this.interactiveDOM.has(id)) { this.interactiveDOM.set(id, DOM); @@ -124,7 +118,7 @@ class DFlexBaseStore { // This is the only difference between register by default and register // with a user only. In the future if there's new options then this should // be updated. - elmInRegistry!.readonly = readonly; + elmInRegistry!.setType(type); if (__DEV__) { // eslint-disable-next-line no-console @@ -141,7 +135,6 @@ class DFlexBaseStore { order, keys, depth, - readonly, type, }; @@ -149,9 +142,6 @@ class DFlexBaseStore { this.registry.set(id, dflexElm); - dflexElm.setAttribute(DOM, "INDEX", dflexElm.order.self); - dflexElm.setAttribute(DOM, "DRAGGABLE", "true"); - if (depth >= 1) { if (keys.CHK === null) { if (__DEV__) { @@ -182,7 +172,7 @@ class DFlexBaseStore { element: RegisterInputBase, branchComposedCallBack: BranchComposedCallBackFunction | null = null ): void { - const { id, depth, type } = element; + const { id, depth } = element; const DOM = this.interactiveDOM.has(id) ? this.interactiveDOM.get(id)! @@ -219,9 +209,8 @@ class DFlexBaseStore { { id: parentID, depth: parentDepth, - // Default value for inserted parent element. - readonly: true, - type, + // Dropped elements are not interactive. + type: "droppable", }, branchComposedCallBack ); diff --git a/packages/dflex-utils/src/dom/getParentElm.ts b/packages/dflex-utils/src/dom/getParentElm.ts index 3bba3af7b..714452ed9 100644 --- a/packages/dflex-utils/src/dom/getParentElm.ts +++ b/packages/dflex-utils/src/dom/getParentElm.ts @@ -9,29 +9,38 @@ function getParentElm( let current: HTMLElement | null = baseElement; - do { - iterationCounter += 1; - - if (__DEV__) { - if (iterationCounter > MAX_LOOP_ELEMENTS_TO_WARN) { - throw new Error( - `getParentElm: DFlex detects performance issues during iterating for nearest parent element.` + - `Please check your registered interactive element at id:${baseElement.id}.` - ); + try { + do { + iterationCounter += 1; + + if (__DEV__) { + if (iterationCounter > MAX_LOOP_ELEMENTS_TO_WARN) { + throw new Error( + `getParentElm: DFlex detects performance issues during iterating for nearest parent element.` + + `Please check your registered interactive element at id:${baseElement.id}.` + ); + } } - } - // Skip the same element `baseElement`. - if (iterationCounter > 1) { - // If the callback returns true, then we have found the parent element. - if (cb(current)) { - iterationCounter = 0; - return current; + // Skip the same element `baseElement`. + if (iterationCounter > 1) { + // If the callback returns true, then we have found the parent element. + if (cb(current)) { + iterationCounter = 0; + return current; + } } - } - current = current.parentElement; - } while (current !== null && !current.isSameNode(document.body)); + current = current.parentElement; + } while (current !== null && !current.isSameNode(document.body)); + } catch (e) { + if (__DEV__) { + // eslint-disable-next-line no-console + console.error(e); + } + } finally { + iterationCounter = 0; + } return null; } diff --git a/packages/dflex-utils/src/types.ts b/packages/dflex-utils/src/types.ts index 8b8584bd2..fe610753a 100644 --- a/packages/dflex-utils/src/types.ts +++ b/packages/dflex-utils/src/types.ts @@ -23,4 +23,12 @@ export type Axis = "x" | "y"; /** Bi-directional Axis. */ export type Axes = Axis | "z"; -export type DFlexElmType = "interactive" | "droppable" | "draggable"; +export type DFlexElmType = + /** Interactive element can be dragged and switched its position. */ + | "interactive" + + /** To define droppable area. */ + | "droppable" + + /** For elements that won't interact with active dragging element. */ + | "draggable"; From 3e9bc5b6961c489c1f7eef44f3e31eb17ea46445 Mon Sep 17 00:00:00 2001 From: jalal246 Date: Wed, 3 Aug 2022 20:25:00 +0200 Subject: [PATCH 3/3] wip --- packages/dflex-dnd-playground/src/App.tsx | 2 + .../droppable/LayoutWithDroppable.tsx | 86 +++++++++++++++++++ .../src/components/droppable/index.ts | 3 + .../src/components/essential/List.css | 1 + .../src/components/index.ts | 1 + 5 files changed, 93 insertions(+) create mode 100644 packages/dflex-dnd-playground/src/components/droppable/LayoutWithDroppable.tsx create mode 100644 packages/dflex-dnd-playground/src/components/droppable/index.ts diff --git a/packages/dflex-dnd-playground/src/App.tsx b/packages/dflex-dnd-playground/src/App.tsx index b83434ded..3fb13bcbd 100644 --- a/packages/dflex-dnd-playground/src/App.tsx +++ b/packages/dflex-dnd-playground/src/App.tsx @@ -15,6 +15,7 @@ import { ContainerBasedEvent, ScrollMultiLists, ListMigration, + LayoutWithDroppable, } from "./components"; function App() { @@ -61,6 +62,7 @@ function App() { } /> } /> } /> + } /> ( +
      + {container.map(({ content, id, type, style }) => ( + + {content} + + ))} +
    +); + +const DFlexDroppable = ({ content, id, style, type }: Container) => ( + +
  • {content}
    • +     +); + +const LayoutWithDroppable = () => { + return ( +
    + + + +
    + ); +}; + +export default LayoutWithDroppable; diff --git a/packages/dflex-dnd-playground/src/components/droppable/index.ts b/packages/dflex-dnd-playground/src/components/droppable/index.ts new file mode 100644 index 000000000..3a14cb7e2 --- /dev/null +++ b/packages/dflex-dnd-playground/src/components/droppable/index.ts @@ -0,0 +1,3 @@ +import LayoutWithDroppable from "./LayoutWithDroppable"; + +export default LayoutWithDroppable; diff --git a/packages/dflex-dnd-playground/src/components/essential/List.css b/packages/dflex-dnd-playground/src/components/essential/List.css index 2502014ad..ac168957b 100644 --- a/packages/dflex-dnd-playground/src/components/essential/List.css +++ b/packages/dflex-dnd-playground/src/components/essential/List.css @@ -117,6 +117,7 @@ padding: 8px; border: 12px #ffee93 solid; border-radius: 18px; + overflow: auto; } .list-migration li { diff --git a/packages/dflex-dnd-playground/src/components/index.ts b/packages/dflex-dnd-playground/src/components/index.ts index 29ce94e40..09d0824fb 100644 --- a/packages/dflex-dnd-playground/src/components/index.ts +++ b/packages/dflex-dnd-playground/src/components/index.ts @@ -1,5 +1,6 @@ export { default as Depth1 } from "./depth"; export { default as ExtendedList } from "./extended"; +export { default as LayoutWithDroppable } from "./droppable"; export { AllRestrictedContainer,