chore: refactor dock tile definitions plus other changes

examples/applications/cnc/src/App.tsx

@@ -36,16 +36,16 @@ import {
 } from "@glowbuzzer/store"
 import { ToolHolderConstants } from "./constants"
 
+const CustomThreeDimensionalSceneTileDefinition = DockTileDefinitionBuilder(
+    ThreeDimensionalSceneTileDefinition
+)
+    .render(() => <CncScene />)
+    .build()
+
 export const App = () => {
     const toolList = useToolList()
     const toolHolderFrame = useFrame(ToolHolderConstants.frameIndex)
 
-    const CustomThreeDimensionalSceneTileDefinition = DockTileDefinitionBuilder(
-        ThreeDimensionalSceneTileDefinition
-    )
-        .render(() => <CncScene />)
-        .build()
-
     const { spacing, holderToolOffset } = ToolHolderConstants
     const { x: originX, y: originY, z: originZ } = toolHolderFrame.translation
     const { x: holderToolOffsetX, y: holderToolOffsetY, z: holderToolOffsetZ } = holderToolOffset

examples/applications/drives-fsoe/src/tiles.ts

@@ -12,6 +12,7 @@ export const DrivesOscillatingMoveTileDefinition = DockTileDefinitionBuilder()
     .name("Move Drives")
     .placement(0, 1)
     .render(() => React.createElement(DrivesMoveTile))
+    .requiresOperationEnabled()
     .build()
 
 export const VirtualHmiTileDefinition = DockTileDefinitionBuilder()

examples/applications/drives/src/tiles.ts

@@ -11,4 +11,5 @@ export const DrivesOscillatingMoveTileDefinition = DockTileDefinitionBuilder()
     .name("Move Drives")
     .placement(0, 1)
     .render(() => React.createElement(DrivesMoveTile))
+    .requiresOperationEnabled()
     .build()

examples/applications/pick-and-place/src/main.tsx

@@ -41,6 +41,7 @@ const DemoTileDefinition = DockTileDefinitionBuilder()
     .name("Demo")
     .placement(1, 1)
     .render(() => React.createElement(DemoTile))
+    .requiresConnection()
     .build()
 
 function App() {

examples/applications/staubli-dance/src/tiles.ts

@@ -7,4 +7,5 @@ export const DemoTileDefinition = DockTileDefinitionBuilder()
     .name("Demo")
     .placement(1, 1)
     .render(() => React.createElement(DemoTile))
+    .requiresConnection()
     .build()

examples/machines/igus/src/main.tsx

@@ -66,6 +66,7 @@ const demoMoveTile: DockTileDefinition = DockTileDefinitionBuilder()
     .name("Demo Move")
     .render(() => <DemoMoveTile />)
     .placement(0, 1)
+    .requiresOperationEnabled()
     .build()
 
 export function App() {

examples/machines/liquid-handler/src/tiles.ts

@@ -7,4 +7,5 @@ export const DemoTileDefinition = DockTileDefinitionBuilder()
     .name("Demo")
     .placement(1, 1)
     .render(() => React.createElement(DemoTile))
+    .requiresConnection()
     .build()

examples/misc/path-planning/src/main.tsx

@@ -52,7 +52,6 @@ const DemoTileDefinition = DockTileDefinitionBuilder()
     .name("Demo")
     .id("path-demo")
     .placement(1, 1)
-    .enableWithoutConnection()
     .build()
 
 const root = createRoot(document.getElementById("root"))

examples/react-native/SimpleConnectView.tsx

@@ -1,4 +1,5 @@
-import {Button, Text, View} from "react-native"
+import * as React from "react"
+import { Button, Text, View } from "react-native"
 import {
     DesiredState,
     determine_machine_state,

examples/tutorials/oscillating-move/src/SimpleOscillatingMoveTile.tsx

@@ -68,4 +68,5 @@ export const SimpleOscillatingMoveTileDefinition = DockTileDefinitionBuilder()
     .name("Oscillating Move")
     .placement(1, 0)
     .render(SimpleOscillatingMoveTile)
+    .requiresOperationEnabled()
     .build()

examples/tutorials/set-digital-out/src/main.tsx

@@ -23,6 +23,7 @@ const toggleDigitalOutputTileDefinition = DockTileDefinitionBuilder()
     .name("Toggle Digital Output")
     .placement(1, 0)
     .render(() => <ToggleDigitalOutputTile />)
+    .requiresOperationEnabled()
     .build()
 
 const config: GlowbuzzerConfig = {

examples/tutorials/three-tutorial/src/main.tsx

@@ -53,47 +53,26 @@ import { PlaybackTile } from "./playbackTile"
 import { DemoMoveTile } from "./demoMoveTile"
 import { DefaultEnvironment } from "../../../util/DefaultEnvironment"
 
-const ChooseExampleTileDefinition: DockTileDefinition = {
-    id: "chooseExample",
-    name: "Choose Example",
-    defaultPlacement: {
-        column: 2,
-        row: 0
-    },
-    excludeByDefault: false,
-    config: {
-        enableWithoutConnection: true
-    },
-    render: () => <ChooseExample />
-}
+const ChooseExampleTileDefinition = DockTileDefinitionBuilder()
+    .id("chooseExample")
+    .name("Choose Example")
+    .placement(2, 0)
+    .render(() => <ChooseExample />)
+    .build()
 
-const PlaybackTileDefinition: DockTileDefinition = {
-    id: "playback",
-    name: "Playback telemetry",
-    defaultPlacement: {
-        column: 2,
-        row: 0
-    },
-    excludeByDefault: false,
-    config: {
-        enableWithoutConnection: true
-    },
-    render: () => <PlaybackTile />
-}
+const PlaybackTileDefinition = DockTileDefinitionBuilder()
+    .id("playback")
+    .name("Playback telemetry")
+    .placement(2, 0)
+    .render(() => <PlaybackTile />)
+    .build()
 
-const DemoMoveTileDefinition: DockTileDefinition = {
-    id: "demoMove",
-    name: "Demo move",
-    defaultPlacement: {
-        column: 2,
-        row: 0
-    },
-    excludeByDefault: false,
-    config: {
-        enableWithoutConnection: true
-    },
-    render: () => <DemoMoveTile />
-}
+const DemoMoveTileDefinition = DockTileDefinitionBuilder()
+    .id("demoMove")
+    .name("Demo Move")
+    .placement(2, 0)
+    .render(() => <DemoMoveTile />)
+    .build()
 
 const DEG90 = Math.PI / 2
 

examples/util/OscillatingMoveTile.tsx

@@ -129,4 +129,5 @@ export const OscillatingMoveTileDefinition = DockTileDefinitionBuilder()
     .name("Oscillating Move")
     .id("oscillating-move")
     .render(() => <OscillatingMoveTile />)
+    .requiresOperationEnabled()
     .build()

examples/util/drives/DrivesTileDefinition.ts

@@ -11,5 +11,4 @@ export const DrivesTileDefinition = DockTileDefinitionBuilder()
     .name("Drives")
     .placement(1, 0)
     .render(() => React.createElement(DrivesTile))
-    .enableWithoutConnection()
     .build()

libs/controls/src/config/ConfigEditTileDefinition.ts

@@ -24,7 +24,6 @@ import { DockTileDefinitionBuilder } from "../dock"
 export const ConfigEditTileDefinition = DockTileDefinitionBuilder()
     .id(GlowbuzzerTileIdentifiers.CONFIG_EDIT)
     .name("Config Editor")
-    .placement(1, 0)
-    .enableWithoutConnection()
     .render(() => createElement(ConfigEditTile2, {}, null), null)
+    .placement(1, 0)
     .build()

libs/controls/src/connect/ConnectTileDefinition.ts

@@ -5,24 +5,17 @@
 import { createElement } from "react"
 import { GlowbuzzerTileIdentifiers } from "../GlowbuzzerTileIdentifiers"
 import { ConnectTile } from "./ConnectTile"
-import { ConnectSettings } from "./ConnectSettings"
 import { ConnectTabButtons } from "./ConnectTabButtons"
 import { ConnectTileHelp } from "./ConnectTileHelp"
+import { DockTileDefinitionBuilder } from "../dock"
 
-export const ConnectTileDefinition = {
-    id: GlowbuzzerTileIdentifiers.CONNECT,
-    name: "Connection",
-    enableDrag: false, // don't allow connect tile to be moved
-    enableClose: false, // or closed!
-    render: () => createElement(ConnectTile, {}, null),
-    renderSettings: () => ConnectSettings,
-    renderButtons: () => createElement(ConnectTabButtons, {}, null),
-    renderHelp: () => createElement(ConnectTileHelp, {}, null),
-    defaultPlacement: {
-        column: 0,
-        row: 0
-    },
-    config: {
-        enableWithoutConnection: true
-    }
-}
+export const ConnectTileDefinition = DockTileDefinitionBuilder()
+    .id(GlowbuzzerTileIdentifiers.CONNECT)
+    .name("Connection")
+    .render(
+        () => createElement(ConnectTile, {}, null),
+        () => createElement(ConnectTileHelp, {}, null),
+        () => createElement(ConnectTabButtons, {}, null)
+    )
+    .placement(0, 0)
+    .build()

libs/controls/src/dev/StateMachineToolsTileDefinition.ts

@@ -6,15 +6,14 @@ import { GlowbuzzerTileIdentifiers } from "../GlowbuzzerTileIdentifiers"
 import { createElement } from "react"
 import { StateMachineToolsTile } from "./StateMachineToolsTile"
 import { StateMachineToolsTileHelp } from "./StateMachineToolsTileHelp"
+import { DockTileDefinitionBuilder } from "../dock"
 
-export const StateMachineToolsTileDefinition = {
-    id: GlowbuzzerTileIdentifiers.STATE_MACHINE_TOOLS,
-    name: "State Machine Tools",
-    defaultPlacement: {
-        column: 0,
-        row: 2
-    },
-    render: () => createElement(StateMachineToolsTile, {}, null),
-    renderHelp: () => createElement(StateMachineToolsTileHelp, {}, null),
-    excludeByDefault: true
-}
+export const StateMachineToolsTileDefinition = DockTileDefinitionBuilder()
+    .id(GlowbuzzerTileIdentifiers.STATE_MACHINE_TOOLS)
+    .name("State Machine Tools")
+    .render(
+        () => createElement(StateMachineToolsTile, {}, null),
+        () => createElement(StateMachineToolsTileHelp, {}, null)
+    )
+    .placement(0, 2)
+    .build()

libs/controls/src/dock/DockLayout.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as React from "react"
-import { createElement, useContext, useState } from "react"
+import { useContext, useState } from "react"
 import { Popover } from "antd"
 import { DockLayoutContext } from "./DockLayoutContext"
 import { Layout, TabNode } from "flexlayout-react"
@@ -13,7 +13,6 @@ import { QuestionCircleOutlined } from "@ant-design/icons"
 import { MachineState, useConnection, useMachineState } from "@glowbuzzer/store"
 import { is_touch_device } from "./util"
 import { useGlowbuzzerMode } from "../modes"
-import { DockTileDisabled } from "./DockTileDisabled"
 
 const DockTileSettingsModal = ({ Component }: { Component }) => {
     const [visible, setVisible] = useState(false)
@@ -46,7 +45,6 @@ export const DockLayout = () => {
         settingsFactory,
         helpFactory,
         headerFactory,
-        wrapperFactory,
         updateModel
     } = useContext(DockLayoutContext)
 
@@ -55,23 +53,6 @@ export const DockLayout = () => {
     const machineState = useMachineState()
     const op = machineState === MachineState.OPERATION_ENABLED
 
-    function tile_factory(node: TabNode) {
-        // create the tile itself unadorned
-        const tile = factory(node)
-        // has a wrapper factory been defined for this tile?
-        // this is used to handle overlaying the tile with a dimmer when it is disabled,
-        // and to handle other mode-specific behaviours
-        const elemFactory = wrapperFactory?.(node)
-        return elemFactory
-            ? // factory exists, so use it to wrap the tile
-              elemFactory(tile, connection.connected, op, mode)
-            : // no factory, so implement the default behaviour which
-            // is to dim the tile if we're not connected
-            connection.connected
-            ? tile // no dimming
-            : createElement(DockTileDisabled, null, tile)
-    }
-
     function render_tab_set(node, renderValues) {
         const selectedNode = node.getSelectedNode()
         if (selectedNode?.getType() === "tab") {
@@ -113,7 +94,7 @@ export const DockLayout = () => {
     return (
         <Layout
             model={model}
-            factory={tile_factory}
+            factory={(node: TabNode) => factory(node)}
             font={{ size: "12px" }}
             realtimeResize={!is_touch_device()}
             onModelChange={updateModel}

libs/controls/src/dock/DockLayoutContext.ts

@@ -8,8 +8,6 @@ import { createContext } from "react"
 import { DockTileDefinition } from "./DockTileDefinition"
 import { DockPerspective } from "./types"
 
-import { TileWrapperFactory } from "./DockTileDefinitionBuilder"
-
 export type DockLayoutContextType = {
     appName: string
     model: Model
@@ -18,7 +16,6 @@ export type DockLayoutContextType = {
     headerFactory: (node: TabNode) => React.ReactNode
     buttonsFactory: (node: TabNode) => React.ReactNode
     helpFactory: (node: TabNode) => React.ReactNode
-    wrapperFactory: (node: TabNode) => TileWrapperFactory
     tiles: (Partial<DockTileDefinition> & { id: string })[]
     perspectives: DockPerspective[]
     currentPerspective: string

libs/controls/src/dock/DockTileDefinition.ts

@@ -5,15 +5,14 @@
 import { IJsonTabNode } from "flexlayout-react"
 import { ReactNode } from "react"
 
-import { TileWrapperFactory } from "./DockTileDefinitionBuilder"
-
 type DockTilePlacement = {
     column: number
     row: number
 }
 
 export interface DockTileDefinition extends IJsonTabNode {
     id: string
+    tile?: () => ReactNode
 
     render(props?): ReactNode
 
@@ -25,8 +24,6 @@ export interface DockTileDefinition extends IJsonTabNode {
 
     renderHelp?(): ReactNode
 
-    renderWrapper?: TileWrapperFactory
-
     defaultPlacement?: DockTilePlacement
 
     excludeByDefault?: boolean