refactor: migrate dnd to new constraints (#4507)

Replaced legacy utilities with matchers

List item no longer possible to place into list item, thanks to new
parent matcher.

Dnd in navigator and on canvas can be tested

Author: TrySound

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -51,19 +51,15 @@ import {
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { MetaIcon } from "~/builder/shared/meta-icon";
-import {
-  computeInstancesConstraints,
-  findClosestDroppableComponentIndex,
-  getInstanceLabel,
-  reparentInstance,
-} from "~/shared/instance-utils";
+import { getInstanceLabel, reparentInstance } from "~/shared/instance-utils";
 import { emitCommand } from "~/builder/shared/commands";
 import { useContentEditable } from "~/shared/dom-hooks";
 import {
   $selectedPage,
   getInstanceKey,
   selectInstance,
 } from "~/shared/awareness";
+import { isTreeMatching } from "~/shared/matcher";
 
 type TreeItem = {
   level: number;
@@ -530,17 +526,12 @@ const canDrop = (
     return false;
   }
 
-  const metas = $registeredComponentMetas.get();
-  const insertConstraints = computeInstancesConstraints(metas, instances, [
-    dragSelector[0],
-  ]);
-  const ancestorIndex = findClosestDroppableComponentIndex({
-    metas,
-    constraints: insertConstraints,
+  return isTreeMatching({
     instances,
-    instanceSelector: dropSelector,
+    metas: $registeredComponentMetas.get(),
+    // make sure dragging tree can be put inside of drop instance
+    instanceSelector: [dragSelector[0], ...dropSelector],
   });
-  return ancestorIndex === 0;
 };
 
 export const NavigatorTree = () => {

apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx

@@ -46,10 +46,10 @@ export const CanvasTools = () => {
     return;
   }
 
-  if (
-    dragAndDropState.isDragging &&
-    dragAndDropState.placementIndicator !== undefined
-  ) {
+  if (dragAndDropState.isDragging) {
+    if (dragAndDropState.placementIndicator === undefined) {
+      return;
+    }
     const { dropTarget, placementIndicator } = dragAndDropState;
     const dropTargetInstance =
       dropTarget === undefined

apps/builder/app/canvas/shared/use-drag-drop.ts

@@ -15,13 +15,10 @@ import {
 } from "~/shared/nano-states";
 import { publish, useSubscribe } from "~/shared/pubsub";
 import {
-  computeInstancesConstraints,
-  findClosestDroppableComponentIndex,
   findClosestDetachableInstanceSelector,
   getComponentTemplateData,
   insertTemplateData,
   reparentInstance,
-  type InsertConstraints,
 } from "~/shared/instance-utils";
 import {
   getElementByInstanceSelector,
@@ -32,6 +29,10 @@ import {
   type InstanceSelector,
   areInstanceSelectorsEqual,
 } from "~/shared/tree-utils";
+import {
+  findClosestInstanceMatchingFragment,
+  isTreeMatching,
+} from "~/shared/matcher";
 
 declare module "~/shared/pubsub" {
   export interface PubsubMap {
@@ -66,39 +67,30 @@ const findClosestDroppableInstanceSelector = (
   const instances = $instances.get();
   const metas = $registeredComponentMetas.get();
 
-  let insertConstraints: undefined | InsertConstraints;
+  let droppableIndex = -1;
   if (dragPayload?.type === "insert") {
-    const templateData = getComponentTemplateData(dragPayload.dragComponent);
-    if (templateData) {
-      const { children, instances } = templateData;
-      const newInstances = new Map(
-        instances.map((instance) => [instance.id, instance])
-      );
-      const rootInstanceIds = children
-        .filter((child) => child.type === "id")
-        .map((child) => child.value);
-      insertConstraints = computeInstancesConstraints(
+    const fragment = getComponentTemplateData(dragPayload.dragComponent);
+    if (fragment) {
+      droppableIndex = findClosestInstanceMatchingFragment({
+        instances,
         metas,
-        newInstances,
-        rootInstanceIds
-      );
+        instanceSelector,
+        fragment,
+      });
     }
   }
   if (dragPayload?.type === "reparent") {
-    insertConstraints = computeInstancesConstraints(metas, instances, [
-      dragPayload.dragInstanceSelector[0],
-    ]);
-  }
-  if (insertConstraints === undefined) {
-    return;
+    const matches = isTreeMatching({
+      instances,
+      metas,
+      instanceSelector: [
+        dragPayload.dragInstanceSelector[0],
+        ...instanceSelector,
+      ],
+    });
+    droppableIndex = matches ? 0 : -1;
   }
 
-  const droppableIndex = findClosestDroppableComponentIndex({
-    metas: $registeredComponentMetas.get(),
-    constraints: insertConstraints,
-    instances: $instances.get(),
-    instanceSelector,
-  });
   if (droppableIndex === -1) {
     return;
   }

apps/builder/app/shared/instance-utils.test.tsx

@@ -31,11 +31,8 @@ import type {
 import { encodeDataSourceVariable, getStyleDeclKey } from "@webstudio-is/sdk";
 import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
 import {
-  computeInstancesConstraints,
-  findClosestDroppableComponentIndex,
   findClosestEditableInstanceSelector,
   insertTemplateData,
-  type InsertConstraints,
   deleteInstanceMutable,
   extractWebstudioFragment,
   insertWebstudioFragmentCopy,
@@ -189,11 +186,6 @@ const createFontAsset = (id: string, family: string): Asset => {
   };
 };
 
-const emptyInsertConstraints: InsertConstraints = {
-  requiredAncestors: new Set(),
-  invalidAncestors: new Set(),
-};
-
 describe("find closest editable instance selector", () => {
   test("searches closest container", () => {
     const instances: Instances = toMap([
@@ -268,173 +260,6 @@ describe("find closest editable instance selector", () => {
   });
 });
 
-describe("compute instances constraints", () => {
-  const base = {
-    type: "container",
-    label: "",
-    icon: "",
-  } as const;
-
-  test("combine required ancestors excluding already resolved ones", () => {
-    const metas = new Map<string, WsComponentMeta>([
-      ["Button", { ...base, requiredAncestors: ["Form"] }],
-      ["Checkbox", { ...base, requiredAncestors: ["Form", "Label"] }],
-      ["Label", { ...base, requiredAncestors: ["Body"] }],
-    ]);
-    // button
-    // label
-    //   checkbox
-    const instances = new Map<Instance["id"], Instance>([
-      createInstancePair("button", "Button", []),
-      createInstancePair("label", "Label", [{ type: "id", value: "checkbox" }]),
-      createInstancePair("checkbox", "Checkbox", []),
-    ]);
-    expect(
-      computeInstancesConstraints(metas, instances, ["button", "label"])
-    ).toEqual({
-      requiredAncestors: new Set(["Body", "Form"]),
-      invalidAncestors: new Set(),
-    });
-  });
-
-  test("combine invalid ancestors of all instances", () => {
-    const metas = new Map<string, WsComponentMeta>([
-      ["Button", { ...base, invalidAncestors: ["Button"] }],
-      ["Form", { ...base, invalidAncestors: ["Button", "Form"] }],
-    ]);
-    // form
-    //   button
-    const instances = new Map<Instance["id"], Instance>([
-      createInstancePair("form", "Form", [{ type: "id", value: "button" }]),
-      createInstancePair("button", "Button", []),
-    ]);
-    expect(computeInstancesConstraints(metas, instances, ["form"])).toEqual({
-      requiredAncestors: new Set(),
-      invalidAncestors: new Set(["Button", "Form"]),
-    });
-  });
-});
-
-describe("find closest droppable component index", () => {
-  test("finds container", () => {
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: emptyInsertConstraints,
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", []),
-        ]),
-        instanceSelector: ["box", "body"],
-      })
-    ).toEqual(0);
-  });
-
-  test("skips non containers", () => {
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: emptyInsertConstraints,
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", [{ type: "id", value: "text" }]),
-          createInstancePair("text", "Text", [{ type: "id", value: "italic" }]),
-          createInstancePair("italic", "Italic", [
-            { type: "id", value: "bold" },
-          ]),
-          createInstancePair("bold", "Bold", []),
-        ]),
-        instanceSelector: ["bold", "italic", "text", "box", "body"],
-      })
-    ).toEqual(2);
-  });
-
-  test("considers invalid ancestors", () => {
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: {
-          requiredAncestors: new Set(),
-          invalidAncestors: new Set(["Item"]),
-        },
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "item" }]),
-          createInstancePair("item", "Item", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", []),
-        ]),
-        instanceSelector: ["box", "item", "body"],
-      })
-    ).toEqual(2);
-  });
-
-  test("requires some ancestor", () => {
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: {
-          requiredAncestors: new Set(["Form"]),
-          invalidAncestors: new Set(),
-        },
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", []),
-        ]),
-        instanceSelector: ["box", "body"],
-      })
-    ).toEqual(-1);
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: {
-          requiredAncestors: new Set(["Form"]),
-          invalidAncestors: new Set(),
-        },
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "form" }]),
-          createInstancePair("form", "Form", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", []),
-        ]),
-        instanceSelector: ["box", "form", "body"],
-      })
-    ).toEqual(0);
-  });
-
-  test("considers both required and invalid ancestors", () => {
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: {
-          requiredAncestors: new Set(["Form"]),
-          invalidAncestors: new Set(["Box"]),
-        },
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "form" }]),
-          createInstancePair("form", "Form", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", [{ type: "id", value: "div" }]),
-          createInstancePair("div", "Div", []),
-        ]),
-        instanceSelector: ["div", "box", "form", "body"],
-      })
-    ).toEqual(2);
-    expect(
-      findClosestDroppableComponentIndex({
-        metas: createFakeComponentMetas({}),
-        constraints: {
-          requiredAncestors: new Set(["Form"]),
-          invalidAncestors: new Set(["Box"]),
-        },
-        instances: new Map<Instance["id"], Instance>([
-          createInstancePair("body", "Body", [{ type: "id", value: "form" }]),
-          createInstancePair("form", "Form", [{ type: "id", value: "box" }]),
-          createInstancePair("box", "Box", [{ type: "id", value: "div" }]),
-          createInstancePair("div", "Div", []),
-        ]),
-        instanceSelector: ["div", "form", "box", "body"],
-      })
-    ).toEqual(-1);
-  });
-});
-
 describe("insert instance children", () => {
   test("insert instance children into empty target", () => {
     const instances = toMap([createInstance("body", "Body", [])]);