Merge pull request #3366 from tylershuster/sigil-speedup

interface: Sigil speedup
This commit is contained in:
matildepark 2020-08-24 14:36:50 -04:00 committed by GitHub
commit 1d19d99ad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 46 deletions

View File

@ -1,48 +1,39 @@
import React, { Component } from 'react';
import React, { memo } from 'react';
import { sigil, reactRenderer } from 'urbit-sigil-js';
export class Sigil extends Component {
static foregroundFromBackground(background) {
const rgb = {
r: parseInt(background.slice(1, 3), 16),
g: parseInt(background.slice(3, 5), 16),
b: parseInt(background.slice(5, 7), 16)
};
const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
const whiteBrightness = 255;
export const foregroundFromBackground = (background) => {
const rgb = {
r: parseInt(background.slice(1, 3), 16),
g: parseInt(background.slice(3, 5), 16),
b: parseInt(background.slice(5, 7), 16)
};
const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
const whiteBrightness = 255;
return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
}
render() {
const { props } = this;
const classes = props.classes || '';
const foreground = Sigil.foregroundFromBackground(props.color);
if (props.ship.length > 14) {
return (
<div
className={'bg-black dib ' + classes}
style={{ width: props.size, height: props.size }}
></div>
);
} else {
return (
<div
className={'dib ' + classes}
style={{ flexBasis: props.size, backgroundColor: props.color }}
>
{sigil({
patp: props.ship,
renderer: reactRenderer,
size: props.size,
colors: [props.color, foreground],
class: props.svgClass
})}
</div>
);
}
}
return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
}
export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) => {
return ship.length > 14
? (<div
className={'bg-black dib ' + classes}
style={{ width: size, height: size }}>
</div>)
: (<div
className={'dib ' + classes}
style={{ flexBasis: size, backgroundColor: color }}
>
{sigil({
patp: ship,
renderer: reactRenderer,
size: size,
colors: [
color,
foregroundFromBackground(color)
],
class: svgClass
})}
</div>)
})
export default Sigil;

View File

@ -22,7 +22,7 @@ import GlobalStore from '~/logic/store/store';
import GlobalSubscription from '~/logic/subscription/global';
import GlobalApi from '~/logic/api/global';
import { uxToHex } from '~/logic/lib/util';
import { Sigil } from '~/logic/lib/sigil';
import { foregroundFromBackground } from '~/logic/lib/sigil';
const Root = styled.div`
font-family: ${p => p.theme.fonts.sans};
@ -85,7 +85,7 @@ class App extends React.Component {
if (this.state.contacts.hasOwnProperty('/~/default')) {
background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
}
const foreground = Sigil.foregroundFromBackground(background);
const foreground = foregroundFromBackground(background);
const svg = sigiljs({
patp: window.ship,
renderer: stringRenderer,