Add mobile view-only support
Below md width, the app now forces view-only (same canEdit mechanism as a shared view-only diagram) rather than trying to support touch editing: palette and inspector panels hide, editing controls disable, and the top bar collapses to just Diagrams + Account. A bottom tab bar swaps between a full-screen canvas and a full-screen Bill of Materials, since there's no room for both side by side. Canvas gets a few mobile-specific trims too: MiniMap and the interactivity lock button hide whenever canEdit is false (the lock button doesn't actually grant editing either way — nodesDraggable/ nodesConnectable already override it — so leaving it visible would just be misleading), and h-screen is replaced with h-dvh throughout so the layout doesn't get clipped by a mobile browser's collapsing address bar. Also fixes quick-add's anti-stack offset (24px — far smaller than a device node) to actually tile devices apart instead of leaving them nearly overlapping, and logs a deferred "Auto-arrange" layout feature in organized-ideas.md, surfaced by mobile visitors having no way to fix an overlapping diagram themselves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x
This commit is contained in:
@@ -2,12 +2,12 @@ import { useMemo, useState } from 'react'
|
||||
import { allCableTypes, cableTypesForConnection, getPortType } from '../../domain/diagram'
|
||||
import { useCatalogStore } from '../../state/catalogStore'
|
||||
import { useDiagramStore } from '../../state/diagramStore'
|
||||
import { useCanEdit } from '../../hooks/useCanEdit'
|
||||
|
||||
export default function ConnectionInspector({ connectionId }: { connectionId: string }) {
|
||||
const diagram = useDiagramStore((s) => s.diagram)
|
||||
const catalog = useCatalogStore((s) => s.catalog)
|
||||
const access = useDiagramStore((s) => s.access)
|
||||
const canEdit = access?.myPermission !== 'view'
|
||||
const canEdit = useCanEdit()
|
||||
const updateConnection = useDiagramStore((s) => s.updateConnection)
|
||||
const removeConnection = useDiagramStore((s) => s.removeConnection)
|
||||
const startBundle = useDiagramStore((s) => s.startBundle)
|
||||
|
||||
Reference in New Issue
Block a user