Still working on avatars for locations.
This commit is contained in:
parent
d1da0a110d
commit
9ce7f33cb4
|
|
@ -37,7 +37,6 @@
|
|||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-router": "^5.1.11",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"avatar-initials": "^5.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"cordova-plugin-geolocation": "^4.1.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
|
|
@ -5634,14 +5633,6 @@
|
|||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/avatar-initials": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/avatar-initials/-/avatar-initials-5.0.0.tgz",
|
||||
"integrity": "sha512-4fgzwu70faLzVIAXguRryGjJhfIz9XmXwTQTXUNTg1E+6Pf9dfuhr/1Hvs6mOrw7p0yEGnYKkBjniECxhXSbxw==",
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/axe-core": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
|
||||
|
|
@ -23880,11 +23871,6 @@
|
|||
"postcss-value-parser": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"avatar-initials": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/avatar-initials/-/avatar-initials-5.0.0.tgz",
|
||||
"integrity": "sha512-4fgzwu70faLzVIAXguRryGjJhfIz9XmXwTQTXUNTg1E+6Pf9dfuhr/1Hvs6mOrw7p0yEGnYKkBjniECxhXSbxw=="
|
||||
},
|
||||
"axe-core": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-router": "^5.1.11",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"avatar-initials": "^5.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"cordova-plugin-geolocation": "^4.1.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
|
|||
import { geoPoint, lat2tile, lon2tile, Point } from '../../lib/geo';
|
||||
|
||||
import { MapState } from '../../store/map';
|
||||
import { getSTile } from './Reticle';
|
||||
import { tileProviders } from './tile';
|
||||
|
||||
interface AvatarForLocationProps {
|
||||
|
|
@ -28,6 +29,57 @@ const AvatarForLocation: React.FC<AvatarForLocationProps> = (
|
|||
y: lat2tile(location.lat, zoom),
|
||||
};
|
||||
|
||||
const locationWithinTile: Point = {
|
||||
x: 256 * (tilesLocation.x - Math.floor(tilesLocation.x)),
|
||||
y: 256 * (tilesLocation.y - Math.floor(tilesLocation.y)),
|
||||
};
|
||||
|
||||
const eastTileNeeded = locationWithinTile.x > 256 - size;
|
||||
const westTileNeeded = locationWithinTile.x < size;
|
||||
const southTileNeeded = locationWithinTile.y > 256 - size;
|
||||
const northTileNeeded = locationWithinTile.y < size;
|
||||
|
||||
const getImage = (stepX: number, stepY: number) => (
|
||||
<image
|
||||
href={tileProviders[tileProvider].getTileUrl(
|
||||
zoom,
|
||||
Math.floor(tilesLocation.x) + stepX,
|
||||
Math.floor(tilesLocation.y) + stepY
|
||||
)}
|
||||
height='256'
|
||||
width={256}
|
||||
x={-locationWithinTile.x + stepX * 256}
|
||||
y={-locationWithinTile.y + stepY * 256}
|
||||
/>
|
||||
);
|
||||
|
||||
var images = [getImage(0, 0)];
|
||||
if (eastTileNeeded) {
|
||||
images.push(getImage(1, 0));
|
||||
}
|
||||
if (westTileNeeded) {
|
||||
images.push(getImage(-1, 0));
|
||||
}
|
||||
if (southTileNeeded) {
|
||||
images.push(getImage(0, 1));
|
||||
}
|
||||
if (northTileNeeded) {
|
||||
images.push(getImage(0, -1));
|
||||
}
|
||||
if (northTileNeeded && eastTileNeeded) {
|
||||
images.push(getImage(1, -1));
|
||||
}
|
||||
if (northTileNeeded && westTileNeeded) {
|
||||
images.push(getImage(-1, -1));
|
||||
}
|
||||
if (southTileNeeded && eastTileNeeded) {
|
||||
images.push(getImage(1, 1));
|
||||
}
|
||||
if (southTileNeeded && westTileNeeded) {
|
||||
images.push(getImage(-1, 1));
|
||||
}
|
||||
|
||||
console.log(`${images.length} images: ${images}`);
|
||||
|
||||
return (
|
||||
<svg width={size} height={size}>
|
||||
|
|
@ -37,8 +89,8 @@ const AvatarForLocation: React.FC<AvatarForLocationProps> = (
|
|||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path='url(#cut-off)'>
|
||||
<image href={tileProviders[tileProvider].getTileUrl(zoom, Math.floor(tilesLocation.x), Math.floor(tilesLocation.y))} />
|
||||
<text x='2' y={size / 2 + 5}>
|
||||
{[images]}
|
||||
<text x='2' y={size / 2 + 5} visibility='hidden'>
|
||||
{name}
|
||||
</text>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import {
|
|||
IonListHeader,
|
||||
IonItem,
|
||||
IonSpinner,
|
||||
IonAccordionGroup,
|
||||
IonAccordion,
|
||||
} from '@ionic/react';
|
||||
import React, { Fragment, useRef, useState } from 'react';
|
||||
import {
|
||||
|
|
@ -26,14 +24,12 @@ import {
|
|||
Avatar,
|
||||
} from '@chatscope/chat-ui-kit-react';
|
||||
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
|
||||
import AvatarInitial from 'avatar-initials';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import i18n from '../../i18n';
|
||||
import { geoPoint } from '../../lib/geo';
|
||||
import { MapState } from '../../store/map';
|
||||
import AvatarForLocation from './AvatarForLocation';
|
||||
import { round } from 'lodash';
|
||||
|
||||
const LocationInfo: React.FC<{}> = () => {
|
||||
const scope = useSelector((state: { map: MapState }) => state.map.scope);
|
||||
|
|
@ -268,21 +264,9 @@ const LocationInfo: React.FC<{}> = () => {
|
|||
sentTime={comment.date}
|
||||
/>
|
||||
<Message.Footer sentTime={comment.action} />
|
||||
<Avatar
|
||||
src={AvatarInitial.initialAvatar({
|
||||
size: 100,
|
||||
initials: comment.user ? comment.user : '??',
|
||||
initial_fg: comment.user
|
||||
? 'darkblue'
|
||||
: 'lightgrey',
|
||||
initial_bg: comment.user ? 'ivory' : 'darkred',
|
||||
initial_size: 0, // Defaults to height / 2
|
||||
initial_weight: 1000,
|
||||
initial_font_family:
|
||||
"'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
||||
})}
|
||||
name={comment.user ? comment.user : 'anonymous'}
|
||||
/>
|
||||
<Avatar>
|
||||
{comment.user ? comment.user : '??'}
|
||||
</Avatar>
|
||||
</Message>
|
||||
)
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue