Implement simple line

common/src/domain.ts

@@ -156,6 +156,7 @@ export type Connection = {
     fromStyle: ConnectionEndStyle
     toStyle: ConnectionEndStyle
     pointStyle: "none" | "black-dot"
+    action: "connect" | "line"
 }
 export type ConnectionEndPoint = Point | ConnectionEndPointToItem
 export type ConnectionEndPointToItem = Id | ConectionEndPointDirectedToItem

common/src/migration.ts

@@ -54,8 +54,12 @@ export function migrateBoard(origBoard: Board) {
 }
 
 function migrateConnection(c: Connection): Connection {
-    if (c.fromStyle && c.fromStyle !== ("white-dot" as any) && c.toStyle && c.pointStyle) return c
-    return { ...c, fromStyle: "black-dot", toStyle: "arrow", pointStyle: "black-dot" }
+    c =
+        c.fromStyle && c.fromStyle !== ("white-dot" as any) && c.toStyle && c.pointStyle
+            ? c
+            : { ...c, fromStyle: "black-dot", toStyle: "arrow", pointStyle: "black-dot" }
+    c = c.action !== undefined ? c : { ...c, action: "connect" }
+    return c
 }
 
 function migrateItem(item: Item, migratedItems: Item[], boardItems: Record<string, Item>): Item {

frontend/src/board/BoardView.tsx

@@ -158,6 +158,7 @@ export const BoardView = ({
         },
     )
     installKeyboardShortcut(plainKey("c"), () => toolController.tool.set("connect"))
+    installKeyboardShortcut(plainKey("l"), () => toolController.tool.set("line"))
     L.fromEvent<JSX.KeyboardEvent>(window, "click")
         .pipe(L.applyScope(componentScope()))
         .forEach((event) => {

frontend/src/board/board-drag.ts

@@ -16,7 +16,7 @@ export type DragAction =
     | { action: "select"; selectedAtStart: BoardFocus }
     | { action: "pan" }
     | { action: "none" }
-    | { action: "connect"; startPos: Point }
+    | { action: "connect" | "line"; startPos: Point }
 
 export function boardDragHandler({
     boardElem,
@@ -58,6 +58,8 @@ export function boardDragHandler({
             current.set(pos)
             if (t === "connect") {
                 dragAction.set({ action: "connect", startPos: pos })
+            } else if (t === "line") {
+                dragAction.set({ action: "line", startPos: pos })
             } else if (!shouldDragSelect) {
                 dragAction.set({ action: "pan" })
             } else {
@@ -113,7 +115,9 @@ export function boardDragHandler({
                                 c.x - s.x,
                             )}px, ${coordinateHelper.emToPagePx(c.y - s.y)}px)`)
                     } else if (da.action === "connect") {
-                        connector.whileDragging(da.startPos, coords)
+                        connector.whileDragging(da.startPos, coords, "connect")
+                    } else if (da.action === "line") {
+                        connector.whileDragging(da.startPos, coords, "line")
                     }
                 },
                 15,
@@ -136,7 +140,7 @@ export function boardDragHandler({
                 const xDiff = coordinateHelper.emToPagePx(startX - x)
                 const yDiff = coordinateHelper.emToPagePx(startY - y)
                 s.scrollBy(xDiff, yDiff)
-            } else if (da.action === "connect") {
+            } else if (da.action === "connect" || da.action === "line") {
                 toolController.useDefaultTool()
                 connector.endDrag()
             }

frontend/src/board/contextmenu/connection-ends.tsx

@@ -22,7 +22,9 @@ function nextStyle(style: ConnectionEndStyle) {
 
 export function connectionEndsMenu({ board, focusedItems, dispatch }: SubmenuProps) {
     const connections = L.view(focusedItems, (items) => items.connections)
-    const singleConnection = L.view(connections, (connections) => (connections.length === 1 ? connections[0] : null))
+    const singleConnection = L.view(connections, (connections) =>
+        connections.length === 1 && connections[0].action === "connect" ? connections[0] : null,
+    )
     return L.view(singleConnection, (connection) => {
         if (!connection) return []
         return !connection

frontend/src/board/item-connect.ts

@@ -12,6 +12,7 @@ import {
     isContainedBy,
     isItem,
     isItemEndPoint,
+    isPoint,
     Item,
     Point,
 } from "../../../common/src/domain"
@@ -48,10 +49,11 @@ export function startConnecting(
         focus.set({ status: "connection-adding" })
         const toWatch = [currentConnectionHandler, toolController.tool, focus] as L.Property<any>[]
         const stop = L.merge(toWatch.map((p) => p.pipe(L.changes))).pipe(L.take(1, globalScope))
+        const action = toolController.tool.get() === "line" ? "line" : "connect"
 
-        h.whileDragging(from, coordinateHelper.currentBoardCoordinates.get())
+        h.whileDragging(from, coordinateHelper.currentBoardCoordinates.get(), action)
         coordinateHelper.currentBoardCoordinates.pipe(L.takeUntil(stop)).forEach((pos) => {
-            h.whileDragging(from, pos)
+            h.whileDragging(from, pos, action)
         })
         stop.forEach(endConnection)
     }
@@ -76,15 +78,17 @@ export function newConnectionCreator(
 ) {
     let localConnection: Connection | null = null
 
-    function whileDragging(from: Item | Point, currentBoardCoords: Point) {
+    function whileDragging(from: Item | Point, currentBoardCoords: Point, action: "connect" | "line") {
         const b = board.get()
         const boardId = b.id
         const startPoint: ConnectionEndPoint = isItem(from) ? from.id : from
         const item = isItem(from) ? from : null
+        const target = findTarget(b, startPoint, currentBoardCoords, localConnection, {
+            allowConnect: action === "connect",
+            allowSnap: action === "line",
+        })
 
-        const targetExistingItem = findTarget(b, startPoint, currentBoardCoords, localConnection)
-
-        if (targetExistingItem === item) {
+        if (target === item?.id) {
             if (localConnection !== null) {
                 // Remove current connection, because connect-to-self is not allowed at least for now
                 if (!IS_TOUCHSCREEN)
@@ -94,7 +98,7 @@ export function newConnectionCreator(
         } else {
             if (localConnection === null) {
                 // Start new connection
-                localConnection = newConnection(startPoint)
+                localConnection = newConnection(startPoint, action)
                 if (!IS_TOUCHSCREEN) dispatch({ action: "connection.add", boardId, connections: [localConnection] })
             } else {
                 // Change current connection endpoint
@@ -103,7 +107,7 @@ export function newConnectionCreator(
                 localConnection = rerouteConnection(
                     {
                         ...localConnection,
-                        to: targetExistingItem ? targetExistingItem.id : currentBoardCoords,
+                        to: target,
                     },
                     b,
                 )
@@ -113,17 +117,27 @@ export function newConnectionCreator(
             }
         }
 
-        function newConnection(from: ConnectionEndPoint): Connection {
+        function newConnection(from: ConnectionEndPoint, action: "connect" | "line"): Connection {
             const l = latestConnection.get()
+
             return rerouteConnection(
                 {
                     id: uuid.v4(),
                     from: from,
                     controlPoints: l && l.controlPoints.length === 0 ? [] : [{ x: 0, y: 0 }],
-                    to: targetExistingItem ? targetExistingItem.id : currentBoardCoords,
-                    fromStyle: (l && l.fromStyle) ?? "none",
-                    toStyle: (l && l.toStyle) ?? "arrow",
-                    pointStyle: (l && l.pointStyle) ?? "black-dot",
+                    to: target,
+                    action,
+                    ...(action === "connect"
+                        ? {
+                              fromStyle: (l && l.fromStyle) ?? "none",
+                              toStyle: (l && l.toStyle) ?? "arrow",
+                              pointStyle: (l && l.pointStyle) ?? "black-dot",
+                          }
+                        : {
+                              fromStyle: "none",
+                              toStyle: "none",
+                              pointStyle: "none",
+                          }),
                 },
                 b,
             )
@@ -150,6 +164,10 @@ export function newConnectionCreator(
     }
 }
 
+function shouldPreventAttach(e: DragEvent) {
+    return e.shiftKey || e.altKey || e.ctrlKey || e.metaKey
+}
+
 export function existingConnectionHandler(
     endNode: HTMLElement,
     connectionId: string,
@@ -162,8 +180,7 @@ export function existingConnectionHandler(
     endNode.addEventListener(
         "drag",
         _.throttle((e: DragEvent) => {
-            const preventAttach = e.shiftKey || e.altKey || e.ctrlKey || e.metaKey
-            modifyConnection(preventAttach)
+            modifyConnection(shouldPreventAttach(e))
         }, 20) as any,
     )
 
@@ -180,17 +197,21 @@ export function existingConnectionHandler(
         const b = board.get()
         const connection = b.connections.find((c) => c.id === connectionId)!
         const coords = coordinateHelper.currentBoardCoordinates.get()
+        const options = {
+            allowConnect: connection.action === "connect" && !preventAttach,
+            allowSnap: connection.action === "line" && !preventAttach,
+        }
         if (type === "to") {
-            const hitsItem = !preventAttach && findTarget(b, connection.from, coords, connection)
-            const to = hitsItem && hitsItem.id !== connection.from ? hitsItem.id : coords
+            const target = findTarget(b, connection.from, coords, connection, options)
+            const to = target !== connection.from ? target : coords
             dispatch({
                 action: "connection.modify",
                 boardId: b.id,
                 connections: [rerouteConnection({ ...connection, to }, b)],
             })
         } else if (type === "from") {
-            const hitsItem = !preventAttach && findTarget(b, connection.to, coords, connection)
-            const from = hitsItem && hitsItem.id !== connection.to ? hitsItem.id : coords
+            const target = findTarget(b, connection.to, coords, connection, options)
+            const from = target !== connection.to ? target : coords
             dispatch({
                 action: "connection.modify",
                 boardId: b.id,
@@ -211,21 +232,26 @@ function findTarget(
     from: Item | ConnectionEndPoint,
     currentPos: Point,
     currentConnection: Connection | null,
-) {
+    options: { allowConnect: boolean; allowSnap: boolean },
+): Id | Point {
     const items = b.items
     const resolvedFromPoint = resolveEndpoint(from, items)
     const fromItem = isItem(resolvedFromPoint) ? resolvedFromPoint : null
 
-    return Object.values(items)
-        .filter((i) => containedBy({ ...currentPos, width: 0, height: 0 }, i)) // match coordinates
-        .filter((i) => isConnectionAttachmentPoint(currentPos, i))
-        .filter((i) =>
-            isItem(resolvedFromPoint)
-                ? !isConnected(b, i, resolvedFromPoint, currentConnection)
-                : !containedBy(resolvedFromPoint, i),
-        )
-        .sort((a, b) => (isContainedBy(items, a)(b) ? 1 : -1)) // most innermost first (containers last)
-        .find((i) => !fromItem || !isContainedBy(items, i)(fromItem)) // does not contain the "from" item
+    const targetItem =
+        options.allowConnect &&
+        Object.values(items)
+            .filter((i) => containedBy({ ...currentPos, width: 0, height: 0 }, i)) // match coordinates
+            .filter((i) => isConnectionAttachmentPoint(currentPos, i))
+            .filter((i) =>
+                isItem(resolvedFromPoint)
+                    ? !isConnected(b, i, resolvedFromPoint, currentConnection)
+                    : !containedBy(resolvedFromPoint, i),
+            )
+            .sort((a, b) => (isContainedBy(items, a)(b) ? 1 : -1)) // most innermost first (containers last)
+            .find((i) => !fromItem || !isContainedBy(items, i)(fromItem)) // does not contain the "from" item
+
+    return targetItem || currentPos
 }
 
 function isConnected(b: Board, x: Item, y: Item, connectionToIgnore: Connection | null) {

frontend/src/board/item-dragmove.ts

@@ -38,10 +38,10 @@ export function itemDragToMove(
 
                 // TODO: disable multiple selection in connect mode
 
-                if (t === "connect") {
+                if (t === "connect" || t === "line") {
                     const { current, dragStartPosition } = items[0]
                     const from = isConnectionAttachmentPoint(startPos, current) ? current : startPos
-                    connector.whileDragging(from, coordinateHelper.currentBoardCoordinates.get())
+                    connector.whileDragging(from, coordinateHelper.currentBoardCoordinates.get(), t)
                 } else {
                     const margin = BOARD_ITEM_BORDER_MARGIN
                     const movedItems = items.map(({ dragStartPosition, current }) => {

frontend/src/board/tool-selection.ts

@@ -1,7 +1,7 @@
 import { localStorageAtom } from "./local-storage-atom"
 import * as L from "lonna"
 
-export type Tool = "pan" | "select" | "connect" | "note" | "container" | "text"
+export type Tool = "pan" | "select" | "connect" | "note" | "container" | "text" | "line"
 export type ControlSettings = {
     tool: Tool
     defaultTool?: Tool

frontend/src/board/toolbars/MainToolBar.tsx

@@ -9,12 +9,11 @@ import { BoardCoordinateHelper } from "../board-coordinates"
 import { BoardFocus, getSelectedConnectionIds, getSelectedItemIds } from "../board-focus"
 import { dispatchDeletion } from "../item-delete"
 import { DND_GHOST_HIDING_IMAGE } from "../item-drag"
+import { dispatchDuplication } from "../item-duplicate"
 import { localStorageAtom } from "../local-storage-atom"
 import { ToolController } from "../tool-selection"
-import { IS_TOUCHSCREEN } from "../touchScreen"
 import { PaletteView } from "./PaletteView"
 import { ToolSelector } from "./ToolSelector"
-import { dispatchDuplication } from "../item-duplicate"
 
 export const MainToolBar = ({
     coordinateHelper,

frontend/src/board/toolbars/ToolSelector.tsx

@@ -74,6 +74,18 @@ export const ToolSelector = ({ toolController }: { toolController: ToolControlle
                     ),
                 }}
             />
+            <ToolIcon
+                {...{
+                    name: "line",
+                    tooltip: "Line tool",
+                    currentTool: tool,
+                    svg: (c) => (
+                        <svg viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M4 11h16v2H4z"></path>
+                        </svg>
+                    ),
+                }}
+            />
         </>
     )
 }

frontend/src/style/tool-layer.scss

@@ -113,6 +113,12 @@
                 }
             }
 
+            .line {
+                @media (max-width: 500px) {
+                    display: none;
+                }
+            }
+
             .tool.undo,
             .tool.redo {
                 @media (min-width: $non-narrow-screen-breakpoint) {