@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/controls-panel/layout/controls-panel-inline-layout.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import * as React from "react";
+import { ControlInlineGroup } from "@repo/ui";
+
+import type {
+  ToolcraftControlLayoutGroupSchema,
+  ToolcraftControlSchema,
+} from "../../../schema/types";
+import {
+  getControlName,
+  shouldRenderCompoundControlSectionDivider,
+  type RenderedControlRenderGroup,
+} from "./controls-panel-layout";
+
+const maxInlineSwitchLabelLength = 16;
+const maxInlineSwitchLabelWordCount = 2;
+
+function hasColorOpacityControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "colorOpacity",
+  );
+}
+
+function hasSliderControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) =>
+      controlsById[controlId]?.type === "slider" ||
+      controlsById[controlId]?.type === "rangeSlider",
+  );
+}
+
+function hasSegmentedControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "segmented",
+  );
+}
+
+function hasSectionedCompoundControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some((controlId) => {
+    const control = controlsById[controlId];
+
+    return control ? shouldRenderCompoundControlSectionDivider(control) : false;
+  });
+}
+
+function isInlineSwitchLabelSafe(
+  controlId: string,
+  control: ToolcraftControlSchema,
+): boolean {
+  const label = getControlName(controlId, control.label).trim();
+  const wordCount = label.split(/\s+/u).filter(Boolean).length;
+
+  return label.length <= maxInlineSwitchLabelLength && wordCount <= maxInlineSwitchLabelWordCount;
+}
+
+function hasUnsafeInlineSwitchLabels(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  const switchEntries = layoutGroup.controls
+    .map((controlId) => [controlId, controlsById[controlId]] as const)
+    .filter(
+      (entry): entry is readonly [string, ToolcraftControlSchema] =>
+        Boolean(entry[1]) && entry[1].type === "switch",
+    );
+
+  return (
+    switchEntries.length > 1 &&
+    switchEntries.some(([controlId, control]) => !isInlineSwitchLabelSafe(controlId, control))
+  );
+}
+
+function isBooleanControl(control: ToolcraftControlSchema | undefined): boolean {
+  return control?.type === "checkbox" || control?.type === "switch";
+}
+
+function isToggleParameterLayoutGroup(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  if (layoutGroup.controls.length !== 2) {
+    return false;
+  }
+
+  const controls = layoutGroup.controls.map((controlId) => controlsById[controlId]);
+  const booleanControlCount = controls.filter((control) => isBooleanControl(control)).length;
+  const parameterControlCount = controls.filter((control) => !isBooleanControl(control)).length;
+
+  return booleanControlCount === 1 && parameterControlCount === 1;
+}
+
+export function shouldHideToggleParameterControlLabel({
+  control,
+  controlsById,
+  layoutGroup,
+}: {
+  control: ToolcraftControlSchema;
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroup: ToolcraftControlLayoutGroupSchema | undefined;
+}): boolean {
+  return Boolean(
+    layoutGroup &&
+      isToggleParameterLayoutGroup(controlsById, layoutGroup) &&
+      !isBooleanControl(control),
+  );
+}
+
+function getControlTargetEntityKey(control: ToolcraftControlSchema): string | null {
+  const parts = control.target.split(".");
+
+  if (parts.length < 2) {
+    return null;
+  }
+
+  return parts.slice(0, -1).join(".");
+}
+
+function shouldAutoInlineBooleanPair(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  firstId: string,
+  secondId: string,
+): boolean {
+  const firstControl = controlsById[firstId];
+  const secondControl = controlsById[secondId];
+
+  if (!isBooleanControl(firstControl) || !isBooleanControl(secondControl)) {
+    return false;
+  }
+
+  if (
+    !isInlineSwitchLabelSafe(firstId, firstControl) ||
+    !isInlineSwitchLabelSafe(secondId, secondControl)
+  ) {
+    return false;
+  }
+
+  const firstEntityKey = getControlTargetEntityKey(firstControl);
+  const secondEntityKey = getControlTargetEntityKey(secondControl);
+
+  return firstEntityKey !== null && firstEntityKey === secondEntityKey;
+}
+
+function getAutoInlineBooleanLayoutGroups({
+  controlsById,
+  renderedGroups,
+  reservedControlIds,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  renderedGroups: readonly RenderedControlRenderGroup[];
+  reservedControlIds: ReadonlySet<string>;
+}): ToolcraftControlLayoutGroupSchema[] {
+  const layoutGroups: ToolcraftControlLayoutGroupSchema[] = [];
+  let index = 0;
+
+  while (index < renderedGroups.length) {
+    const firstIds = renderedGroups[index]?.ids;
+    const secondIds = renderedGroups[index + 1]?.ids;
+    const firstId = firstIds?.length === 1 ? firstIds[0] : undefined;
+    const secondId = secondIds?.length === 1 ? secondIds[0] : undefined;
+
+    if (
+      firstId &&
+      secondId &&
+      !reservedControlIds.has(firstId) &&
+      !reservedControlIds.has(secondId) &&
+      shouldAutoInlineBooleanPair(controlsById, firstId, secondId)
+    ) {
+      layoutGroups.push({
+        columns: 2,
+        controls: [firstId, secondId],
+        layout: "inline",
+      });
+      index += 2;
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return layoutGroups;
+}
+
+export function renderControlLayoutGroups({
+  controlsById,
+  layoutGroups,
+  renderedGroups,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroups?: readonly ToolcraftControlLayoutGroupSchema[];
+  renderedGroups: readonly RenderedControlRenderGroup[];
+}): React.ReactNode[] {
+  if (!layoutGroups?.length) {
+    const autoLayoutGroups = getAutoInlineBooleanLayoutGroups({
+      controlsById,
+      renderedGroups,
+      reservedControlIds: new Set(),
+    });
+
+    if (autoLayoutGroups.length === 0) {
+      return renderedGroups.map((group) => group.node);
+    }
+
+    return renderControlLayoutGroups({
+      controlsById,
+      layoutGroups: autoLayoutGroups,
+      renderedGroups,
+    });
+  }
+
+  const reservedControlIds = new Set(layoutGroups.flatMap((group) => group.controls));
+  const resolvedLayoutGroups = [
+    ...layoutGroups,
+    ...getAutoInlineBooleanLayoutGroups({
+      controlsById,
+      renderedGroups,
+      reservedControlIds,
+    }),
+  ];
+  const layoutGroupByControlId = getInlineLayoutGroupByControlId({
+    controlsById,
+    layoutGroups: resolvedLayoutGroups,
+  });
+
+  const nodes: React.ReactNode[] = [];
+
+  for (const renderedGroup of renderedGroups) {
+    const layoutGroup = renderedGroup.ids
+      .map((id) => layoutGroupByControlId.get(id))
+      .find((group): group is ToolcraftControlLayoutGroupSchema => Boolean(group));
+
+    if (!layoutGroup) {
+      nodes.push(renderedGroup.node);
+      continue;
+    }
+
+    const groupedRenderedControls = renderedGroups.filter((candidate) =>
+      candidate.ids.some((id) => layoutGroup.controls.includes(id)),
+    );
+    const firstGroupedControl = groupedRenderedControls[0];
+
+    if (firstGroupedControl !== renderedGroup) {
+      continue;
+    }
+
+    if (groupedRenderedControls.length < 2) {
+      nodes.push(renderedGroup.node);
+      continue;
+    }
+
+    nodes.push(
+      <ControlInlineGroup
+        columns={layoutGroup.columns ?? 2}
+        kind={
+          isToggleParameterLayoutGroup(controlsById, layoutGroup)
+            ? "toggleParameter"
+            : "default"
+        }
+        key={`layout-group-${layoutGroup.controls.join("-")}`}
+      >
+        {groupedRenderedControls.map((group) => group.node)}
+      </ControlInlineGroup>,
+    );
+  }
+
+  return nodes;
+}
+
+export function getInlineLayoutGroupByControlId({
+  controlsById,
+  layoutGroups,
+}: {
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroups?: readonly ToolcraftControlLayoutGroupSchema[];
+}): Map<string, ToolcraftControlLayoutGroupSchema> {
+  const layoutGroupByControlId = new Map<string, ToolcraftControlLayoutGroupSchema>();
+
+  for (const layoutGroup of layoutGroups ?? []) {
+    if (layoutGroup.layout !== "inline") {
+      continue;
+    }
+
+    if (
+      hasColorOpacityControl(controlsById, layoutGroup) ||
+      hasSliderControl(controlsById, layoutGroup) ||
+      hasSegmentedControl(controlsById, layoutGroup) ||
+      hasSectionedCompoundControl(controlsById, layoutGroup) ||
+      hasUnsafeInlineSwitchLabels(controlsById, layoutGroup)
+    ) {
+      continue;
+    }
+
+    for (const controlId of layoutGroup.controls) {
+      layoutGroupByControlId.set(controlId, layoutGroup);
+    }
+  }
+
+  return layoutGroupByControlId;
+}

package/templates/runtime/react/controls-panel/layout/controls-panel-layout.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import * as React from "react";
+
+import type {
+  ToolcraftControlSectionSchema,
+  ToolcraftControlSchema,
+} from "../../../schema/types";
+import {
+  getToolcraftCanvasSizeTargetDimension,
+  isToolcraftRuntimeOwnedTarget,
+} from "../../../schema/runtime-targets";
+
+export type ControlEntry = [string, ToolcraftControlSchema];
+
+export type ControlRenderGroup =
+  | { entries: readonly ControlEntry[]; kind: "colorGroup" }
+  | { entry: ControlEntry; kind: "control" };
+
+export type RenderedControlRenderGroup = {
+  ids: readonly string[];
+  node: React.ReactNode;
+};
+
+const hiddenDiscreteMarkerCount = 2;
+const sectionedCompoundControlTypes = new Set([
+  "channelMixer",
+  "collectionActions",
+  "fontPicker",
+  "gradient",
+  "palette",
+]);
+
+export function shouldRenderCompoundControlSectionDivider(
+  control: ToolcraftControlSchema,
+): boolean {
+  if (control.type === "curves") {
+    return control.variant !== "single";
+  }
+
+  return sectionedCompoundControlTypes.has(control.type);
+}
+
+export function withCompoundControlSectionDivider({
+  children,
+  control,
+}: {
+  children: React.ReactNode;
+  control: ToolcraftControlSchema;
+}): React.ReactNode {
+  if (!shouldRenderCompoundControlSectionDivider(control)) {
+    return children;
+  }
+
+  return (
+    <div className="contents" data-control-section-divider="compound">
+      {children}
+    </div>
+  );
+}
+
+export function getControlName(
+  id: string,
+  label: boolean | string | undefined,
+): string {
+  if (typeof label === "string") {
+    return label;
+  }
+
+  return id;
+}
+
+export function getControlsRecord(
+  entries: readonly ControlEntry[],
+): Record<string, ToolcraftControlSchema> {
+  return Object.fromEntries(entries);
+}
+
+export function getControlRenderGroups(
+  entries: readonly ControlEntry[],
+): ControlRenderGroup[] {
+  const groups: ControlRenderGroup[] = [];
+  let index = 0;
+
+  while (index < entries.length) {
+    const entry = entries[index];
+
+    if (!entry) {
+      index += 1;
+      continue;
+    }
+
+    if (entry[1].type !== "color") {
+      groups.push({ entry, kind: "control" });
+      index += 1;
+      continue;
+    }
+
+    const colorEntries: ControlEntry[] = [];
+
+    while (entries[index]?.[1].type === "color") {
+      const colorEntry = entries[index];
+
+      if (colorEntry) {
+        colorEntries.push(colorEntry);
+      }
+
+      index += 1;
+    }
+
+    for (let colorIndex = 0; colorIndex < colorEntries.length; colorIndex += 2) {
+      const firstEntry = colorEntries[colorIndex];
+      const secondEntry = colorEntries[colorIndex + 1];
+
+      if (firstEntry && secondEntry) {
+        groups.push({ entries: [firstEntry, secondEntry], kind: "colorGroup" });
+      } else if (firstEntry) {
+        groups.push({ entry: firstEntry, kind: "control" });
+      }
+    }
+  }
+
+  return groups;
+}
+
+export function getControlRenderGroupIds(
+  group: ControlRenderGroup,
+): readonly string[] {
+  return group.kind === "colorGroup"
+    ? group.entries.map(([id]) => id)
+    : [group.entry[0]];
+}
+
+export function countControlsByType(
+  sections: readonly ToolcraftControlSectionSchema[],
+  type: string,
+): number {
+  return sections.reduce(
+    (count, section) =>
+      count +
+      Object.values(section.controls).filter((control) => control.type === type)
+        .length,
+    0,
+  );
+}
+
+export function shouldCommitTextControlOnBlur(
+  control: ToolcraftControlSchema,
+): boolean {
+  return (
+    control.commitMode === "setting" ||
+    Boolean(getToolcraftCanvasSizeTargetDimension(control.target))
+  );
+}
+
+function isColorFieldControl(control: ToolcraftControlSchema | undefined): boolean {
+  return control?.type === "color" || control?.type === "colorOpacity";
+}
+
+export function isColorOnlySection(entries: readonly ControlEntry[]): boolean {
+  return entries.length > 0 && entries.every(([, control]) => isColorFieldControl(control));
+}
+
+export function getRenderedControlsSectionTitle(
+  section: ToolcraftControlSectionSchema,
+): ToolcraftControlSectionSchema["title"] {
+  return isStickyFooterActionSection(section) ? undefined : section.title;
+}
+
+export function isRuntimeSetupSection({
+  entries,
+  section,
+}: {
+  entries: readonly ControlEntry[];
+  section: ToolcraftControlSectionSchema;
+}): boolean {
+  return (
+    section.title === "Setup" &&
+    entries.some(([, control]) => isToolcraftRuntimeOwnedTarget(control.target))
+  );
+}
+
+function isStickyFooterActionSection(section: ToolcraftControlSectionSchema): boolean {
+  return (
+    section.actionGroup !== undefined &&
+    Object.values(section.controls).some((control) => control.type === "panelActions")
+  );
+}
+
+export function shouldShowColorFieldLabel({
+  control,
+  sectionHasOnlyColorFields,
+}: {
+  control: ToolcraftControlSchema;
+  sectionHasOnlyColorFields: boolean;
+}): boolean {
+  return control.label !== false && !sectionHasOnlyColorFields;
+}
+
+export function getControlMarkerCount(
+  control: ToolcraftControlSchema,
+  markerLimit?: number,
+): number | undefined {
+  const markerCount = control.markerCount;
+
+  if (
+    markerLimit &&
+    control.variant === "discrete" &&
+    typeof markerCount === "number" &&
+    markerCount > markerLimit
+  ) {
+    return hiddenDiscreteMarkerCount;
+  }
+
+  return markerCount;
+}