many small fixes

client/src/gl/renderMap.ts

@@ -386,13 +386,15 @@ export class RenderMap {
     if (part.name !== undefined)
       rlayer.layer.name = part.name
 
+    if (rlayer instanceof RenderAnyTilesLayer) {
+      if ('width' in part)
+        this.setLayerWidth(rgroup, rlayer, part.width)
+      if ('height' in part)
+        this.setLayerHeight(rgroup, rlayer, part.height)
+    }
     if (rlayer instanceof RenderTilesLayer && part.type === MapDir.LayerKind.Tiles) {
       if (part.color !== undefined)
         rlayer.layer.color = part.color
-      if (part.width !== undefined)
-        this.setLayerWidth(rgroup, rlayer, part.width)
-      if (part.height !== undefined)
-        this.setLayerHeight(rgroup, rlayer, part.height)
       if (part.color_env !== undefined)
         rlayer.layer.colorEnv = part.color_env === null ? null : this.map.envelopes[stringToResIndex(part.color_env)[0]] as ColorEnvelope
       if (part.color_env_offset !== undefined)

client/src/ui/lib/dialog.ts

@@ -27,7 +27,8 @@ export function clearDialog(id: number | 'all' = 'all') {
 export function showDialog(
   type: DialogType,
   message: string,
-  controls: DialogControls = 'none'
+  controls: DialogControls = 'none',
+  timeout: number = 5000
 ): Promise<boolean> | number {
   const id = Math.random()
   dialog.$set({
@@ -43,10 +44,19 @@ export function showDialog(
     return id
   else
     return new Promise(resolve => {
+      let timeout_id = 0
       dialog.$on('close', e => {
-        if (e.detail[0] === id)
+        if (e.detail[0] === id) {
+          window.clearTimeout(timeout_id)
           resolve(e.detail[1])
+        }
       })
+      if (timeout && controls === 'closable') {
+        timeout_id = window.setTimeout(() => {
+          clearDialog(id)
+          resolve(false)
+        }, timeout)
+      }
     })
 }
 

client/src/ui/lib/editor.ts

@@ -205,18 +205,18 @@ export function adaptTilesToLayer(map: Map, g: number, l: number, tiles: Info.An
   )
 }
 
-export function adaptBrushToLayers(map: Map, brush: Brush, ll: number[]): Brush {
+export function adaptBrushToLayers(map: Map, brush: Brush, g: number, ll: number[]): Brush {
   return {
-    group: brush.group,
+    group: g,
     layers: ll.map(l => {
-      const layer = brush.layers.find(x => x.layer === l)
+      const layer = brush.layers.find(x => brush.group === g && x.layer === l)
       if (layer) {
         return layer
       }
       else {
         return {
           layer: l,
-          tiles: adaptTilesToLayer(map, brush.group, l, brush.layers[0].tiles)
+          tiles: adaptTilesToLayer(map, g, l, brush.layers[0].tiles)
         }
       }
     })

client/src/ui/lib/mapEditor.svelte

@@ -2,8 +2,8 @@
 <script lang="ts">
   import * as Editor from './editor'
   import { server, selected, anim, peers, rmap, map } from '../global'
-  import { AnyTilesLayer, GameLayer } from "../../twmap/tilesLayer"
-  import { tweened } from "svelte/motion"
+  import { AnyTilesLayer, GameLayer, TilesLayer } from "../../twmap/tilesLayer"
+  import { tweened, type Readable } from "svelte/motion"
   import { type Coord, LayerType } from "../../twmap/types"
   import { QuadsLayer } from "../../twmap/quadsLayer"
   import { Image } from '../../twmap/image'
@@ -23,6 +23,7 @@
   import type * as Info from '../../twmap/types'
   import type { Recv, Resp } from '../../server/protocol'
   import { base64ToBytes } from '../../server/convert'
+  import { pick, read } from '../../server/util'
   import { Button } from 'carbon-components-svelte'
   import { Add as AddIcon } from 'carbon-icons-svelte'
 
@@ -55,6 +56,15 @@
     $rmap.setActiveLayer(rlayer)
   }
 
+  let syncImg: Readable<Image | null>
+  $: if (rlayer && rlayer instanceof RenderAnyTilesLayer) {
+    syncImg = read($server, rlayer.texture.image, {
+      query: 'edit/layer',
+      match: [g, l, { image: pick }],
+      apply: () => rlayer.texture.image,
+    })
+  }
+
   let time = 0
   let animTime = 0
   $: if (!$anim && $rmap) updateEnvelopes(0)
@@ -322,6 +332,9 @@
   }
 
   function onMouseMove(e: MouseEvent) {
+    if (e.target !== viewport.cont)
+      return
+
     shiftKey = e.shiftKey
     if (rlayer && rlayer.layer instanceof AnyTilesLayer || $selected.length > 1) {
       const curPos = worldPosToTileCoord(viewport.mousePos)
@@ -489,7 +502,7 @@
         tiles: e.detail,
       }]
     }
-    brushBuffer = Editor.adaptBrushToLayers($rmap.map, brushBuffer, $selected.map(s => s[1]))
+    brushBuffer = Editor.adaptBrushToLayers($rmap.map, brushBuffer, g, selectedTileLayers)
 
     if (brushBuffer === null) {
       brushState = BrushState.Empty
@@ -516,23 +529,19 @@
     mouseRange.end.y = mouseRange.start.y + brushRange.end.y
   }
 
-  function onLayerSelectionChanged(sel: [number, number][]) {
+  function onLayerSelectionChanged(_sel: [number, number][]) {
     if (!brushBuffer) {
       return
     }
 
-    if (sel.length === 0) {
+    if (selectedTileLayers.length === 0 || rlayer && rlayer.layer instanceof QuadsLayer) {
+      brushState = BrushState.Empty
       brushBuffer = null
-      return
     }
-
-    const g = sel[0][0]
-    if (g !== brushBuffer.group) {
-      brushBuffer = null
-      return
+    else {
+      brushBuffer = Editor.adaptBrushToLayers($rmap.map, brushBuffer, g, selectedTileLayers)
     }
 
-    brushBuffer = Editor.adaptBrushToLayers($rmap.map, brushBuffer, sel.map(s => s[1]))
   }
 </script>
 
@@ -574,6 +583,7 @@
 
   {#if rlayer instanceof RenderAnyTilesLayer}
     <TilePicker
+      image={$syncImg}
       rlayer={rlayer}
       on:select={onTilePick}
     />

client/src/ui/lib/tilePicker.svelte

@@ -2,9 +2,9 @@
   import { createEventDispatcher } from 'svelte'
   import type * as Info from '../../twmap/types'
   import * as MapDir from '../../twmap/mapdir'
-  import type { Image } from '../../twmap/image'
   import type { AnyTilesLayer } from '../../twmap/tilesLayer'
   import type { RenderAnyTilesLayer } from '../../gl/renderTilesLayer'
+  import type { Image } from '../../twmap/image'
   import type { Tile, Tele, Switch, Speedup, Tune, Coord } from '../../twmap/types'
   import { TileFlags } from '../../twmap/types'
   import {
@@ -29,6 +29,7 @@
   const tileCount = 16
 
   export let rlayer: RenderAnyTilesLayer<AnyTilesLayer<{ id: number }>>
+  export let image: Image
   export let selected: Info.AnyTile[][] = []
 
   const dispatch = createEventDispatcher<{
@@ -59,14 +60,15 @@
   let currentSpeedup: { kind: MapDir.LayerKind.Speedup } & Speedup = { kind: MapDir.LayerKind.Speedup, ...SpeedupLayer.defaultTile() }
   let currentTune: { kind: MapDir.LayerKind.Tune } & Tune = { kind: MapDir.LayerKind.Tune, ...TuneLayer.defaultTile() }
 
-  $: currentTele.number = clamp(currentTele.number, 0, 255)
-  $: currentSwitch.delay = clamp(currentSwitch.delay, 0, 255)
-  $: currentSwitch.number = clamp(currentSwitch.number, 0, 255)
-  $: currentSpeedup.angle = clamp(currentSpeedup.angle, 0, 359)
-  $: currentSpeedup.maxSpeed = clamp(currentSpeedup.maxSpeed, 0, 255)
-  $: currentSpeedup.force = clamp(currentSpeedup.force, 0, 255)
-  $: currentTune.number = clamp(currentTune.number, 0, 255)
-
+  function sanitizeInputs() {
+    currentTele.number = clamp(currentTele.number, 0, 255)
+    currentSwitch.delay = clamp(currentSwitch.delay, 0, 255)
+    currentSwitch.number = clamp(currentSwitch.number, 0, 255)
+    currentSpeedup.angle = clamp(currentSpeedup.angle, 0, 359)
+    currentSpeedup.maxSpeed = clamp(currentSpeedup.maxSpeed, 0, 255)
+    currentSpeedup.force = clamp(currentSpeedup.force, 0, 255)
+    currentTune.number = clamp(currentTune.number, 0, 255)
+  }
   let current: Info.AnyTile | null
   let boxSelect = false
 
@@ -90,7 +92,6 @@
   let mounted = false
   onMount(() => {
     ctx = canvas.getContext('2d')!
-    drawLayer()
     Editor.on('keydown', onKeyDown)
     Editor.on('keyup', onKeyUp)
     mounted = true
@@ -102,12 +103,12 @@
     mounted = false
   })
 
-  $: if (mounted && rlayer) {
-    drawLayer()
+  $: if (mounted) {
+    drawLayer(image)
   }
 
-  async function drawLayer() {
-    const img = await getCanvasImage(rlayer.texture.image)
+  async function drawLayer(image: Image) {
+    const img = await getCanvasImage(image)
     if (!mounted)
       return
     canvas.width = img.width as number
@@ -257,33 +258,34 @@
       <div class="header">
         {#if rlayer.layer instanceof TeleLayer}
           <label>
-            Teleport target <input type="number" min={0} max={255} bind:value={currentTele.number} />
+            Teleport target <input type="number" min={0} max={255} bind:value={currentTele.number} on:change={sanitizeInputs} />
           </label>
         {:else if rlayer.layer instanceof SwitchLayer}
           <label>
-            Switch number <input type="number" min={0} max={255} bind:value={currentSwitch.number} />
+            Switch number <input type="number" min={0} max={255} bind:value={currentSwitch.number} on:change={sanitizeInputs} />
           </label>
           <label>
-            Switch delay <input type="number" min={0} max={255} bind:value={currentSwitch.delay} />
+            Switch delay <input type="number" min={0} max={255} bind:value={currentSwitch.delay} on:change={sanitizeInputs} />
           </label>
         {:else if rlayer.layer instanceof SpeedupLayer}
           <label>
-            Speedup force <input type="number" min={0} max={255} bind:value={currentSpeedup.force} />
+            Speedup force <input type="number" min={0} max={255} bind:value={currentSpeedup.force} on:change={sanitizeInputs} />
           </label>
           <label>
             Speedup max speed <input
               type="number"
               min={0}
               max={255}
               bind:value={currentSpeedup.maxSpeed}
+              on:change={sanitizeInputs}
             />
           </label>
           <label>
-            Speedup angle <input type="number" min={0} max={359} bind:value={currentSpeedup.angle} />
+            Speedup angle <input type="number" min={0} max={359} bind:value={currentSpeedup.angle} on:change={sanitizeInputs} />
           </label>
         {:else if rlayer.layer instanceof TuneLayer}
           <label>
-            Tune zone <input type="number" min={0} max={255} bind:value={currentTune.number} />
+            Tune zone <input type="number" min={0} max={255} bind:value={currentTune.number} on:change={sanitizeInputs} />
           </label>
         {:else}
           Select tiles to place on the map.