refactor: replace detachable: false with constraints (#4548)

Here got rid of detachable flag in favor of more universal constraints
queries.

Despite of detachable constraints allow to drag such nodes but limits
drop target more precisely.

Try any radix component.

Author: TrySound

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

@@ -440,13 +440,16 @@ const canDrag = (instance: Instance, instanceSelector: InstanceSelector) => {
       return false;
     }
   }
+  // prevent moving block template out of first position
+  if (instance.component === blockTemplateComponent) {
+    return false;
+  }
 
   const meta = $registeredComponentMetas.get().get(instance.component);
   if (meta === undefined) {
     return true;
   }
-  const detachable =
-    meta.type !== "rich-text-child" && (meta.detachable ?? true);
+  const detachable = meta.type !== "rich-text-child";
   if (detachable === false) {
     toast.error(
       "This instance can not be moved outside of its parent component."

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

@@ -15,7 +15,6 @@ import {
 } from "~/shared/nano-states";
 import { publish, useSubscribe } from "~/shared/pubsub";
 import {
-  findClosestDetachableInstanceSelector,
   getComponentTemplateData,
   insertTemplateData,
   reparentInstance,
@@ -28,6 +27,7 @@ import {
 import {
   type InstanceSelector,
   areInstanceSelectorsEqual,
+  getAncestorInstanceSelector,
 } from "~/shared/tree-utils";
 import {
   findClosestInstanceMatchingFragment,
@@ -114,6 +114,26 @@ const sharedDropOptions = {
   },
 };
 
+const findClosestDraggable = (instanceSelector: InstanceSelector) => {
+  // cannot drag root
+  if (instanceSelector.length === 1) {
+    return;
+  }
+  const instances = $instances.get();
+  const metas = $registeredComponentMetas.get();
+  for (const instanceId of instanceSelector) {
+    const instance = instances.get(instanceId);
+    if (instance === undefined) {
+      return;
+    }
+    const meta = metas.get(instance.component);
+    if (meta?.type === "rich-text-child") {
+      continue;
+    }
+    return getAncestorInstanceSelector(instanceSelector, instanceId);
+  }
+};
+
 export const useDragAndDrop = () => {
   const state = useRef({ ...initialState });
 
@@ -201,22 +221,12 @@ export const useDragAndDrop = () => {
       if (instanceSelector === undefined) {
         return false;
       }
-      // cannot drag root
-      if (instanceSelector.length === 1) {
-        return false;
-      }
       // cannot drag while editing text
       if (element.closest("[contenteditable=true]")) {
         return false;
       }
       // When trying to drag an instance inside editor, drag the editor instead
-      return (
-        findClosestDetachableInstanceSelector(
-          instanceSelector,
-          $instances.get(),
-          $registeredComponentMetas.get()
-        ) ?? false
-      );
+      return findClosestDraggable(instanceSelector) ?? false;
     },
 
     onStart({ data: dragInstanceSelector }) {

apps/builder/app/shared/instance-utils.ts

@@ -255,28 +255,6 @@ export const findClosestEditableInstanceSelector = (
   }
 };
 
-export const findClosestDetachableInstanceSelector = (
-  instanceSelector: InstanceSelector,
-  instances: Instances,
-  metas: Map<string, WsComponentMeta>
-) => {
-  for (const instanceId of instanceSelector) {
-    const instance = instances.get(instanceId);
-    if (instance === undefined) {
-      return;
-    }
-    const meta = metas.get(instance.component);
-    if (meta === undefined) {
-      return;
-    }
-    const detachable = meta.detachable ?? true;
-    if (meta.type === "rich-text-child" || detachable === false) {
-      continue;
-    }
-    return getAncestorInstanceSelector(instanceSelector, instanceId);
-  }
-};
-
 export const isInstanceDetachable = (
   instances: Instances,
   instanceSelector: InstanceSelector
@@ -296,17 +274,11 @@ export const isInstanceDetachable = (
     newInstances.set(parentInstance.id, parentInstance);
   }
   // check parent can follow constraints without selected instance
-  const matches = isTreeMatching({
+  return isTreeMatching({
     instances: newInstances,
     metas,
     instanceSelector: instanceSelector.slice(1),
   });
-  const instance = instances.get(instanceId);
-  if (instance === undefined) {
-    return false;
-  }
-  const meta = metas.get(instance.component);
-  return (meta?.detachable ?? true) && matches;
 };
 
 export const insertInstanceChildrenMutable = (

apps/builder/app/shared/matcher.ts

@@ -1,10 +1,11 @@
-import type {
-  Instance,
-  Instances,
-  Matcher,
-  MatcherOperation,
-  MatcherRelation,
-  WebstudioFragment,
+import {
+  parseComponentName,
+  type Instance,
+  type Instances,
+  type Matcher,
+  type MatcherOperation,
+  type MatcherRelation,
+  type WebstudioFragment,
 } from "@webstudio-is/sdk";
 import type { InstanceSelector } from "./tree-utils";
 import type { WsComponentMeta } from "@webstudio-is/react-sdk";
@@ -65,7 +66,12 @@ const formatList = (operation: MatcherOperation) => {
   if (operation.$nin) {
     list.push(...operation.$nin);
   }
-  return listFormat.format(list);
+  return listFormat.format(
+    list.map((component) => {
+      const [_namespace, name] = parseComponentName(component);
+      return name;
+    })
+  );
 };
 
 /**

packages/react-sdk/src/components/component-meta.ts

@@ -67,10 +67,6 @@ export const WsComponentMeta = z.object({
   // naming every item manually
   indexWithinAncestor: z.optional(z.string()),
   stylable: z.optional(z.boolean()),
-  // specifies whether the instance can be deleted,
-  // copied or dragged out of its parent instance
-  // true by default
-  detachable: z.optional(z.boolean()),
   label: z.optional(z.string()),
   description: z.string().optional(),
   icon: z.string(),

packages/react-sdk/src/core-components.ts

@@ -94,7 +94,10 @@ const descendantMeta: WsComponentMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
-  detachable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: "HtmlEmbed" },
+  },
 };
 
 const descendantPropsMeta: WsComponentPropsMeta = {
@@ -126,33 +129,42 @@ const descendantPropsMeta: WsComponentPropsMeta = {
   initialProps: ["selector"],
 };
 
+export const blockComponent = "ws:block";
+
 export const blockTemplateComponent = "ws:block-template";
 
 export const blockTemplateMeta: WsComponentMeta = {
   category: "hidden",
-  detachable: false,
   type: "container",
   icon: AddTemplateInstanceIcon,
   stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: blockComponent },
+  },
 };
 
 const blockTemplatePropsMeta: WsComponentPropsMeta = {
   props: {},
   initialProps: [],
 };
 
-export const blockComponent = "ws:block";
-
 const blockMeta: WsComponentMeta = {
   category: "data",
   order: 2,
   type: "container",
   label: "Content Block",
   icon: EditIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: [collectionComponent, blockComponent] },
-  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: [collectionComponent, blockComponent] },
+    },
+    {
+      relation: "child",
+      component: { $eq: blockTemplateComponent },
+    },
+  ],
   stylable: false,
   template: [
     {

packages/sdk-components-react-radix/src/accordion.ws.ts

@@ -127,6 +127,12 @@ export const metaAccordion: WsComponentMeta = {
   presetStyle,
   description:
     "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionItem" },
+    },
+  ],
   template: [
     {
       type: "instance",
@@ -222,10 +228,20 @@ export const metaAccordionItem: WsComponentMeta = {
   type: "container",
   label: "Item",
   icon: ItemIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Accordion" },
-  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Accordion" },
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionHeader" },
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionContent" },
+    },
+  ],
   indexWithinAncestor: "Accordion",
   presetStyle,
 };
@@ -235,11 +251,16 @@ export const metaAccordionHeader: WsComponentMeta = {
   type: "container",
   label: "Item Header",
   icon: HeaderIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionItem" },
-  },
-  detachable: false,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "AccordionItem" },
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionTrigger" },
+    },
+  ],
   presetStyle: {
     h3: [h3, tc.my(0)].flat(),
   },
@@ -254,7 +275,6 @@ export const metaAccordionTrigger: WsComponentMeta = {
     relation: "ancestor",
     component: { $eq: "AccordionHeader" },
   },
-  detachable: false,
   states: [
     ...defaultStates,
     {
@@ -277,7 +297,6 @@ export const metaAccordionContent: WsComponentMeta = {
     relation: "ancestor",
     component: { $eq: "AccordionItem" },
   },
-  detachable: false,
   presetStyle,
 };
 

packages/sdk-components-react-radix/src/checkbox.ws.ts

@@ -20,6 +20,10 @@ export const metaCheckbox: WsComponentMeta = {
   category: "radix",
   order: 101,
   type: "container",
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "CheckboxIndicator" },
+  },
   icon: CheckboxCheckedIcon,
   description:
     "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
@@ -136,7 +140,10 @@ export const metaCheckbox: WsComponentMeta = {
 export const metaCheckboxIndicator: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  detachable: false,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Checkbox" },
+  },
   icon: TriggerIcon,
   states: defaultStates,
   presetStyle: {

packages/sdk-components-react-radix/src/collapsible.ws.ts

@@ -24,6 +24,16 @@ export const metaCollapsible: WsComponentMeta = {
   category: "radix",
   order: 5,
   type: "container",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleTrigger" },
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleContent" },
+    },
+  ],
   presetStyle,
   icon: CollapsibleIcon,
   description:
@@ -79,15 +89,21 @@ export const metaCollapsibleTrigger: WsComponentMeta = {
   type: "container",
   icon: TriggerIcon,
   stylable: false,
-  detachable: false,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" },
+  },
 };
 
 export const metaCollapsibleContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle,
   icon: ContentIcon,
-  detachable: false,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" },
+  },
 };
 
 export const propsMetaCollapsible: WsComponentPropsMeta = {