Add types for registered elements

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,31 @@ class DFlexBaseNode {
 
  private _hasAttribute?: AttributeSet;
 
- static getType(): string {
- return "base:node";
- }
+ private _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;
+ }
+
+ /**
+ * 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.
@@ -42,14 +54,24 @@ class DFlexBaseNode {
  setAttribute(
  DOM: HTMLElement,
  key: AllowedAttributes,
- value: string | number
+ value: "true" | "false" | DFlexElmType | number
  ): void {
  if (key === "INDEX") {
  DOM.setAttribute(DFLEX_ATTRIBUTES[key], `${value}`);
 
  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);

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;
@@ -45,7 +51,7 @@ export interface DFlexNodeInput {
  order: DOMGenOrder;
  keys: Keys;
  depth: number;
- readonly: boolean;
+ type: DFlexElmType;
 }
 
 class DFlexCoreNode extends DFlexBaseNode {
@@ -65,27 +71,20 @@ class DFlexCoreNode extends DFlexBaseNode {
 
  hasPendingTransform!: boolean;
 
- readonly: boolean;
-
  animatedFrame: number | null;
 
  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, id, type } = eleWithPointer;
 
- super(id);
+ 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;
@@ -382,7 +381,7 @@ class DFlexCoreNode extends DFlexBaseNode {
 
  getSerializedInstance(): SerializedDFlexCoreNode {
  return {
- type: DFlexCoreNode.getType(),
+ type: this.getType(),
  version: 3,
  id: this.id,
  grid: this.grid,

packages/dflex-core-instance/src/Node/constants.ts

@@ -2,6 +2,8 @@ const OUT_POS = "data-dragged-out-position";
 const OUT_CONTAINER = "data-dragged-out-container";
 const INDEX = "data-index";
 const DRAGGED = "dragged";
+const ELM_TYPE = "data-element-type";
+
 // const GRID_X = "data-grid-x";
 // const GRID_Y = "data-grid-y";
 
@@ -12,6 +14,7 @@ export const DFLEX_ATTRIBUTES = Object.freeze({
  INDEX,
  OUT_POS,
  OUT_CONTAINER,
+ ELM_TYPE,
 });
 
 export type AllowedAttributes = keyof typeof DFLEX_ATTRIBUTES;

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() {
  <Route path="/todo" element={<TodoListWithEvents />} />
  <Route path="/migration" element={<ListMigration />} />
  <Route path="/commit" element={<ListMigration withCommitBtn />} />
+ <Route path="/droppable" element={<LayoutWithDroppable />} />
  <Route
  path="/component-based-event"
  element={

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<HTMLLIElement>;
 
- 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 () => {

packages/dflex-dnd-playground/src/components/droppable/LayoutWithDroppable.tsx

@@ -0,0 +1,86 @@
+import type { DFlexElmType } from "@dflex/dnd";
+import React from "react";
+
+import DFlexDnDComponent from "../DFlexDnDComponent";
+
+type Container = {
+ id: string;
+ content: string;
+ type: DFlexElmType;
+ style: React.CSSProperties;
+};
+
+const container1: Container[] = [
+ { id: "inter-elm-1", type: "interactive", content: "Inter-1", style: {} },
+ {
+ id: "inter-elm-2",
+ type: "interactive",
+ content: "Inter-2",
+ style: {},
+ },
+ {
+ id: "inter-elm-3",
+ type: "interactive",
+ content: "Inter-3",
+ style: {},
+ },
+ { id: "inter-elm-4", type: "interactive", content: "Inter-4", style: {} },
+ { id: "inter-elm-5", type: "interactive", content: "Inter-5", style: {} },
+ { id: "inter-elm-6", type: "interactive", content: "Inter-6", style: {} },
+ { id: "inter-elm-7", type: "interactive", content: "Inter-7", style: {} },
+ { id: "inter-elm-8", type: "interactive", content: "Inter-8", style: {} },
+ { id: "inter-elm-9", type: "interactive", content: "Inter-9", style: {} },
+ { id: "inter-elm-10", type: "interactive", content: "Inter-10", style: {} },
+];
+
+const container2: Container = {
+ id: "drop-elm-1",
+ type: "droppable",
+ content: "Droppable area 1",
+ style: {},
+};
+
+const container3: Container = {
+ id: "drop-elm-2",
+ type: "droppable",
+ content: "Droppable area 2",
+ style: {},
+};
+
+const DFlexInteractive = ({ container }: { container: Container[] }) => (
+ <ul>
+ {container.map(({ content, id, type, style }) => (
+ <DFlexDnDComponent
+ Component={"li"}
+ registerInput={{ id, type }}
+ key={id}
+ style={style}
+ >
+ {content}
+ </DFlexDnDComponent>
+ ))}
+ </ul>
+);
+
+const DFlexDroppable = ({ content, id, style, type }: Container) => (
+ <DFlexDnDComponent
+ Component={"ul"}
+ registerInput={{ id, type }}
+ key={id}
+ style={style}
+ >
+ <li>{content}</li>
+ </DFlexDnDComponent>
+);
+
+const LayoutWithDroppable = () => {
+ return (
+ <div className="list-migration">
+ <DFlexInteractive container={container1} />
+ <DFlexDroppable {...container2} />
+ <DFlexDroppable {...container3} />
+ </div>
+ );
+};
+
+export default LayoutWithDroppable;

packages/dflex-dnd-playground/src/components/droppable/index.ts

@@ -0,0 +1,3 @@
+import LayoutWithDroppable from "./LayoutWithDroppable";
+
+export default LayoutWithDroppable;

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 {

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,

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 = () => {
  <div className="root">
  <div className="todo">
  <ul>
- {tasks.map(({ msg, id, readonly, style }) => (
+ {tasks.map(({ msg, id, type, style }) => (
  <DFlexDnDComponent
  Component={"li"}
- registerInput={{ id, readonly }}
+ registerInput={{ id, type }}
  key={id}
  style={style}
  >

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"
  );
 }