From 268d2378bd6f64bb1779bb74f5a1ee982106adda Mon Sep 17 00:00:00 2001 From: evlist Date: Sat, 15 Oct 2022 00:03:35 +0200 Subject: [PATCH] Playing with multiple tiled layers. --- svgmap/src/components/map/Map.tsx | 22 +++- svgmap/src/components/map/SlippyBoard.tsx | 16 ++- svgmap/src/components/map/Tile.tsx | 9 +- svgmap/src/components/map/TiledLayer.tsx | 125 +++++++++++++--------- 4 files changed, 110 insertions(+), 62 deletions(-) diff --git a/svgmap/src/components/map/Map.tsx b/svgmap/src/components/map/Map.tsx index 7e5b0f8..8340ddb 100644 --- a/svgmap/src/components/map/Map.tsx +++ b/svgmap/src/components/map/Map.tsx @@ -1,5 +1,5 @@ import { IonContent } from '@ionic/react'; -import react, { useEffect, useState } from 'react'; +import react, { useState } from 'react'; import './Map.css'; import MouseHandler from './MouseHandler'; @@ -86,13 +86,31 @@ const Map: react.FC = (props: MapProperties) => { ), }, { - key: 'tiles', + key: 'tiles1', content: ( + ), + }, + { + key: 'tiles2', + transform: 'scale(.5)', + content: ( + = 2} /> ), }, diff --git a/svgmap/src/components/map/SlippyBoard.tsx b/svgmap/src/components/map/SlippyBoard.tsx index f4ef95f..0a05adb 100644 --- a/svgmap/src/components/map/SlippyBoard.tsx +++ b/svgmap/src/components/map/SlippyBoard.tsx @@ -1,5 +1,4 @@ -import { ReactComponentOrElement } from '@ionic/react'; -import react, { ReactComponentElement, ReactElement, ReactNode } from 'react'; +import react, { ReactElement, ReactNode } from 'react'; interface SlippyBoardProperties { boardSize: number; @@ -7,7 +6,8 @@ interface SlippyBoardProperties { zoom: number; layers?: { key: string; - content: ReactElement|ReactNode | ReactElement[] | ReactElement[][]; + transform?: string; + content: ReactElement | ReactNode | ReactElement[] | ReactElement[][]; }[]; } @@ -20,7 +20,15 @@ const SlippyBoard: react.FC = ( transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`} > {props.layers - ? props.layers.map((layer) => {layer.content}) + ? props.layers.map((layer) => ( + + {layer.content} + + )) : null} diff --git a/svgmap/src/components/map/Tile.tsx b/svgmap/src/components/map/Tile.tsx index 27f6a98..6fa1faf 100644 --- a/svgmap/src/components/map/Tile.tsx +++ b/svgmap/src/components/map/Tile.tsx @@ -4,6 +4,7 @@ interface TileProperties { href?: string; x: number; y: number; + tileSize: number; delay?: number; } @@ -19,7 +20,7 @@ const Tile: react.FC = (props: TileProperties) => { if (props.href !== undefined) { const loadImage = async () => { console.log(`Pre loading: ${JSON.stringify(props.href)}`); - const image = new Image(256, 256); + const image = new Image(props.tileSize, props.tileSize); // const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement; // const image = new SVGImageElement(); image.loading = 'eager'; @@ -35,8 +36,8 @@ const Tile: react.FC = (props: TileProperties) => { 'http://www.w3.org/2000/svg', 'image' ) as unknown as SVGImageElement; - svgImage.setAttribute('width', '256'); - svgImage.setAttribute('height', '256'); + svgImage.setAttribute('width', props.tileSize.toString()); + svgImage.setAttribute('height', props.tileSize.toString()); // @ts-ignore svgImage.setAttribute('href', props.href); // svgImage.setAttribute('x', '0'); @@ -45,7 +46,7 @@ const Tile: react.FC = (props: TileProperties) => { }; loadImage(); } - }, [props.href, props.delay]); + }, [props.href, props.delay, props.tileSize]); // const children = useMemo( // () => ( diff --git a/svgmap/src/components/map/TiledLayer.tsx b/svgmap/src/components/map/TiledLayer.tsx index 589caf9..c54b971 100644 --- a/svgmap/src/components/map/TiledLayer.tsx +++ b/svgmap/src/components/map/TiledLayer.tsx @@ -12,18 +12,18 @@ interface TiledLayerProperties { width: number; shift: Point; zoom: number; + tileSize: number; + nbTiles: number; + active: boolean; } const TiledLayer: react.FC = ( props: TiledLayerProperties ) => { - const nbTiles = - Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2; - var initialTiledLayer: any[][] = []; - for (let row = 0; row < nbTiles; row++) { + for (let row = 0; row < props.nbTiles; row++) { let tileRow = []; - for (let col = 0; col < nbTiles; col++) { + for (let col = 0; col < props.nbTiles; col++) { tileRow.push(); } initialTiledLayer.push(tileRow); @@ -32,57 +32,78 @@ const TiledLayer: react.FC = ( const [tiledLayer, setTiledLayer] = useState(initialTiledLayer); useEffect(() => { - const firstVisibleTiles = { - x: Math.max(Math.floor(-props.shift.x / 256 / props.zoom), 0), - y: Math.max(Math.floor(-props.shift.y / 256 / props.zoom), 0), - }; + if (props.active) { + const firstVisibleTiles = { + x: Math.max( + Math.floor(-props.shift.x / props.tileSize / props.zoom), + 0 + ), + y: Math.max( + Math.floor(-props.shift.y / props.tileSize / props.zoom), + 0 + ), + }; - const lastVisibleTiles = { - x: Math.min( - Math.ceil(firstVisibleTiles.x + props.width / 256 / props.zoom), - nbTiles - 1 - ), - y: Math.min( - Math.ceil(firstVisibleTiles.y + props.height / 256 / props.zoom), - nbTiles - 1 - ), - }; - console.log( - `Adding new tiles if needed for ${JSON.stringify( - firstVisibleTiles - )}/${JSON.stringify(lastVisibleTiles)}.` - ); - const newTiledLayer: any[][] = []; - for (let row = 0; row < nbTiles; row++) { - let tileRow = []; - for (let col = 0; col < nbTiles; col++) { - const key = `${row}/${col}`; - if ( - tiledLayer[row][col].type === 'g' && - row >= firstVisibleTiles.y && - row <= lastVisibleTiles.y && - col >= firstVisibleTiles.x && - col <= lastVisibleTiles.x - ) { - console.log(`Adding tile ${row}/${col}`); - tileRow.push( - - ); - } else { - tileRow.push(tiledLayer[row][col]); + const lastVisibleTiles = { + x: Math.min( + Math.ceil( + firstVisibleTiles.x + props.width / props.tileSize / props.zoom + ), + props.nbTiles - 1 + ), + y: Math.min( + Math.ceil( + firstVisibleTiles.y + props.height / props.tileSize / props.zoom + ), + props.nbTiles - 1 + ), + }; + console.log( + `Adding new tiles if needed for ${JSON.stringify( + firstVisibleTiles + )}/${JSON.stringify(lastVisibleTiles)}.` + ); + const newTiledLayer: any[][] = []; + for (let row = 0; row < props.nbTiles; row++) { + let tileRow = []; + for (let col = 0; col < props.nbTiles; col++) { + const key = `${row}/${col}`; + if ( + tiledLayer[row][col].type === 'g' && + row >= firstVisibleTiles.y && + row <= lastVisibleTiles.y && + col >= firstVisibleTiles.x && + col <= lastVisibleTiles.x + ) { + console.log(`Adding tile ${row}/${col}`); + tileRow.push( + + ); + } else { + tileRow.push(tiledLayer[row][col]); + } } + newTiledLayer.push(tileRow); } - newTiledLayer.push(tileRow); - } - setTiledLayer(newTiledLayer); - }, [props.shift, props.zoom, nbTiles, props.height, props.width]); + setTiledLayer(newTiledLayer); + } + }, [ + props.shift, + props.zoom, + props.nbTiles, + props.height, + props.width, + props.active, + props.tileSize, + ]); return <>{tiledLayer}; };