astro-tractstack 2.1.2 → 2.2.0

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx

@@ -1,120 +0,0 @@
-import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore } from '@/stores/storykeep';
-import { RenderChildren } from '../RenderChildren';
-import type { NodeProps } from '@/types/nodeProps';
-import { tagTitles } from '@/types/compositorTypes';
-import { getTemplateNode } from '@/utils/compositor/nodesHelper';
-import { type JSX, type MouseEvent } from 'react';
-
-type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
-
-export const NodeBasicTagInsert = (props: NodeTagProps) => {
-  const { value: toolAddMode } = getCtx(props).toolAddModeStore.get();
-  const nodeId = props.nodeId;
-  const { allowInsertBefore, allowInsertAfter } =
-    props.tagName !== 'li'
-      ? getCtx(props).allowInsert(nodeId, toolAddMode)
-      : getCtx(props).allowInsertLi(nodeId, toolAddMode);
-  const children = getCtx(props).getChildNodeIDs(props.nodeId);
-
-  const Tag = props.tagName;
-  const newTagTitle = tagTitles[toolAddMode];
-
-  const handleInsertAbove = (e: MouseEvent) => {
-    e.stopPropagation();
-    const templateNode = getTemplateNode(
-      getCtx(props).toolAddModeStore.get().value
-    );
-    const newNodeId = getCtx(props).addTemplateNode(
-      props.nodeId,
-      templateNode,
-      props.nodeId,
-      'before'
-    );
-    if (newNodeId && templateNode.tagName)
-      handleInsertSignal(templateNode.tagName, newNodeId);
-  };
-
-  const handleInsertBelow = (e: MouseEvent) => {
-    e.stopPropagation();
-    const templateNode = getTemplateNode(
-      getCtx(props).toolAddModeStore.get().value
-    );
-    const newNodeId = getCtx(props).addTemplateNode(
-      props.nodeId,
-      templateNode,
-      props.nodeId,
-      'after'
-    );
-    if (newNodeId && templateNode.tagName)
-      handleInsertSignal(templateNode.tagName, newNodeId);
-  };
-
-  const handleInsertSignal = (tagName: string, nodeId: string) => {
-    getCtx(props).handleInsertSignal(tagName, nodeId);
-  };
-
-  const handleClickIntercept = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const InsertButtons = () => (
-    <div
-      className={`absolute left-2 top-2 z-10 flex items-center gap-2 transition-opacity`}
-    >
-      {(allowInsertBefore || allowInsertAfter) && (
-        <div className="rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-800">
-          Insert {newTagTitle}
-        </div>
-      )}
-      {allowInsertBefore && (
-        <button
-          onClick={handleInsertAbove}
-          className="z-10 rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
-        >
-          + Above
-        </button>
-      )}
-      {allowInsertAfter && (
-        <button
-          onClick={handleInsertBelow}
-          className="z-10 rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
-        >
-          + Below
-        </button>
-      )}
-      {!allowInsertBefore && !allowInsertAfter && (
-        <button
-          className="rounded bg-white px-2 py-1 text-sm text-cyan-700 opacity-50 shadow-sm transition-colors"
-          disabled={true}
-        >
-          + Can't Insert {newTagTitle} Here
-        </button>
-      )}
-    </div>
-  );
-
-  return (
-    <div className="group relative">
-      <div className="relative">
-        {/* Click interceptor layer */}
-        <div
-          className="absolute inset-0 z-10"
-          onClick={handleClickIntercept}
-          onMouseDown={handleClickIntercept}
-          onMouseUp={handleClickIntercept}
-        />
-        <div className="absolute inset-0">
-          <div className="h-full w-full opacity-50 mix-blend-difference outline-dashed outline-4 outline-cyan-600 group-focus-within:opacity-100 group-hover:opacity-100" />
-        </div>
-        <InsertButtons />
-        <Tag
-          className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
-        >
-          <RenderChildren children={children} nodeProps={props} />
-        </Tag>
-      </div>
-    </div>
-  );
-};

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx

@@ -1,62 +0,0 @@
-import { type JSX } from 'react';
-import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
-import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
-import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore } from '@/stores/storykeep';
-import { RenderChildren } from '../RenderChildren';
-import type { FlatNode } from '@/types/compositorTypes';
-import type { NodeProps } from '@/types/nodeProps';
-
-type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
-
-export const NodeBasicTagSettings = (props: NodeTagProps) => {
-  const nodeId = props.nodeId;
-  const node = getCtx(props).allNodes.get().get(nodeId) as FlatNode;
-  const children = getCtx(props).getChildNodeIDs(props.nodeId);
-  const Tag = props.tagName;
-
-  const canMove = (/*direction: "before" | "after"*/): boolean => {
-    // only block level can move
-    if (node.tagName === 'li') {
-      return false;
-    }
-    return true;
-  };
-
-  const SettingsButtons = () => (
-    <div
-      className={`absolute left-2 top-2 z-10 flex items-center gap-2 transition-opacity`}
-    >
-      {canMove(/*"after"*/) && (
-        <button onClick={() => getCtx().moveNode(nodeId, 'after')}>
-          <div className="inline-flex items-center rounded-b-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
-            <ArrowDownIcon className="mr-1 h-6 w-6" />
-          </div>
-        </button>
-      )}
-      {canMove(/*"before"*/) && (
-        <button onClick={() => getCtx().moveNode(nodeId, 'before')}>
-          <div className="inline-flex items-center rounded-b-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
-            <ArrowUpIcon className="mr-1 h-6 w-6" />
-          </div>
-        </button>
-      )}
-    </div>
-  );
-
-  return (
-    <div className="group relative">
-      <div className="relative">
-        <div className="absolute inset-0">
-          <div className="h-full w-full opacity-50 outline-dashed outline-4 outline-cyan-600 group-focus-within:opacity-100 group-hover:opacity-100" />
-        </div>
-        <SettingsButtons />
-        <Tag
-          className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
-        >
-          <RenderChildren children={children} nodeProps={props} />
-        </Tag>
-      </div>
-    </div>
-  );
-};

package/templates/src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx

@@ -1,26 +0,0 @@
-import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
-import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore } from '@/stores/storykeep';
-import { RenderChildren } from '../RenderChildren';
-import type { NodeProps } from '@/types/nodeProps';
-
-export const NodeButtonEraser = (props: NodeProps) => {
-  return (
-    <button
-      className={` ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)} eraser-child group relative transition-all before:pointer-events-none before:absolute before:inset-0 before:opacity-50 before:outline-dashed before:outline-4 before:outline-red-700 hover:before:bg-red-600/50 hover:before:opacity-100 focus:before:bg-red-600/50 focus:before:opacity-100`}
-      title="Delete Link"
-      onClick={(e) => {
-        getCtx(props).setClickedNodeId(props.nodeId);
-        e.stopPropagation();
-      }}
-    >
-      <div className="absolute right-2 top-2 rounded-full bg-red-700 p-0.5">
-        <TrashIcon className="h-5 w-5 text-white" />
-      </div>
-      <RenderChildren
-        children={getCtx(props).getChildNodeIDs(props.nodeId)}
-        nodeProps={props}
-      />
-    </button>
-  );
-};