[sc] improve initial positioning

a-type · Jun 6, 2024 · 1ab0222 · 1ab0222
1 parent babac9b
commit 1ab0222
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/apps/star-chart/web/src/components/canvas/CanvasObject.tsx b/apps/star-chart/web/src/components/canvas/CanvasObject.tsx
@@ -4,6 +4,7 @@ import { useMergedRef } from '@biscuits/client';
 import { animated, to, useSpring } from '@react-spring/web';
 import {
   createContext,
+  CSSProperties,
   ReactNode,
   useCallback,
   useContext,
@@ -34,13 +35,15 @@ export interface CanvasObjectRootProps {
   className?: string;
   canvasObject: CanvasObject;
   onTap?: () => void;
+  style?: CSSProperties;
 }
 
 export function CanvasObjectRoot({
   children,
   className,
   canvasObject,
   onTap,
+  style,
   ...rest
 }: CanvasObjectRootProps) {
   const ref = useRef<HTMLDivElement>(null);
@@ -72,6 +75,10 @@ export function CanvasObjectRoot({
         // onDragEnd={preventDefault}
         // onDrag={preventDefault}
         {...canvasObject.rootProps}
+        style={{
+          ...style,
+          ...canvasObject.rootProps.style,
+        }}
         {...bind()}
         {...rest}
       >

diff --git a/apps/star-chart/web/src/components/project/ConnectionSource.tsx b/apps/star-chart/web/src/components/project/ConnectionSource.tsx
@@ -8,10 +8,11 @@ import { useCanvas } from '../canvas/CanvasProvider.jsx';
 import { SvgPortal } from '../canvas/CanvasSvgLayer.jsx';
 import { useViewport } from '../canvas/ViewportRoot.jsx';
 import { Wire } from '../canvas/Wire.jsx';
-import { closestLivePoint } from '../canvas/math.js';
+import { addVectors, closestLivePoint } from '../canvas/math.js';
 import { Task } from '@star-chart.biscuits/verdant';
 import { Vector2 } from '../canvas/types.js';
 import { projectState } from './state.js';
+import { CARD_MIN_HEIGHT, CARD_WIDTH } from './constants.js';
 
 export interface ConnectionSourceProps {
   sourceTask: Task;
@@ -112,7 +113,10 @@ export function ConnectionSource({
         const task = await client.tasks.put({
           projectId: sourceTask.get('projectId'),
           content: 'New Task',
-          position: worldPosition,
+          position: addVectors(worldPosition, {
+            x: -CARD_WIDTH / 2,
+            y: -CARD_MIN_HEIGHT / 2,
+          }),
         });
         // select the new task
         canvas.selections.set([task.get('id')]);

diff --git a/apps/star-chart/web/src/components/project/ProjectCanvas.tsx b/apps/star-chart/web/src/components/project/ProjectCanvas.tsx
@@ -10,7 +10,7 @@ import {
 import { CanvasRenderer } from '../canvas/CanvasRenderer.jsx';
 import { CanvasSvgLayer } from '../canvas/CanvasSvgLayer.jsx';
 import { CanvasWallpaper } from '../canvas/CanvasWallpaper.jsx';
-import { snapVector } from '../canvas/math.js';
+import { addVectors, snapVector } from '../canvas/math.js';
 import { Vector2 } from '../canvas/types.js';
 import { useViewport, ViewportRoot } from '../canvas/ViewportRoot.jsx';
 import { AnalysisContext } from './AnalysisContext.jsx';
@@ -25,6 +25,7 @@ import { SelectionMenu } from './SelectionMenu.jsx';
 import { TaskNode } from './TaskNode.jsx';
 import { TouchTools } from './TouchTools.jsx';
 import { CanvasOverlay } from '../canvas/CanvasOverlay.jsx';
+import { CARD_MIN_HEIGHT, CARD_WIDTH } from './constants.js';
 
 export interface ProjectCanvasProps {
   project: Project;
@@ -56,7 +57,16 @@ export function ProjectCanvas({ project }: ProjectCanvasProps) {
         <CanvasGestures
           onTap={async (info) => {
             if (canvas.selections.selectedIds.size === 0) {
-              const task = await addTask(info.worldPosition);
+              const task = await addTask(
+                addVectors(
+                  info.worldPosition,
+                  // offset to center
+                  {
+                    x: -CARD_WIDTH / 2,
+                    y: -CARD_MIN_HEIGHT / 2,
+                  },
+                ),
+              );
               canvas.selections.set([task.get('id')]);
             } else {
               canvas.selections.set([]);
@@ -121,7 +131,6 @@ function useZoomToFit(tasks: Task[]) {
   const [hasZoomed, setHasZoomed] = useState(false);
   useEffect(() => {
     if (hasZoomed) return;
-    if (tasks.length === 0) return;
     const bounds = tasks.reduce(
       (acc, task) => {
         const position = task.get('position').getAll();

diff --git a/apps/star-chart/web/src/components/project/TaskNode.tsx b/apps/star-chart/web/src/components/project/TaskNode.tsx
@@ -18,11 +18,17 @@ import { useDownstreamCount, useUpstreamCount } from './hooks.js';
 import { TaskMenu } from './TaskMenu.jsx';
 import { useSnapshot } from 'valtio';
 import { projectState } from './state.js';
+import { CARD_MIN_HEIGHT, CARD_WIDTH } from './constants.js';
 
 export interface TaskNodeProps {
   task: Task;
 }
 
+const style = {
+  width: CARD_WIDTH,
+  minHeight: CARD_MIN_HEIGHT,
+};
+
 export function TaskNode({ task }: TaskNodeProps) {
   const { id, position, completedAt } = hooks.useWatch(task);
   const initialPosition = useMemo(() => position.getSnapshot(), []);
@@ -71,10 +77,11 @@ export function TaskNode({ task }: TaskNodeProps) {
             : 'opacity-[calc(var(--zoom,1)*var(--zoom,1)*0.5)]'),
         activeConnectionTarget === id && 'bg-accent-light border-accent',
       )}
+      style={style}
       canvasObject={canvasObject}
       onTap={onTap}
     >
-      <CanvasObjectDragHandle className={clsx('p-2')}>
+      <CanvasObjectDragHandle className="flex-col items-stretch justify-stretch">
         <TaskFullContent
           task={task}
           upstreams={upstreams}
@@ -122,7 +129,7 @@ function TaskFullContent({
   );
 
   return (
-    <div className="w-240px row items-start">
+    <div className="row items-start p-2">
       <Checkbox
         className={clsx(!completedAt && upstreams > 0 ? 'opacity-50' : '')}
         checked={!!completedAt}

diff --git a/apps/star-chart/web/src/components/project/constants.ts b/apps/star-chart/web/src/components/project/constants.ts
@@ -0,0 +1,2 @@
+export const CARD_WIDTH = 256;
+export const CARD_MIN_HEIGHT = 48;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const CARD_WIDTH = 256;
		export const CARD_MIN_HEIGHT = 48;