diff --git a/src/UI/components/muralView.tsx b/src/UI/components/muralView.tsx index e07dc8b..40a0fc8 100644 --- a/src/UI/components/muralView.tsx +++ b/src/UI/components/muralView.tsx @@ -2,14 +2,14 @@ import React from "react"; import { Store } from "../../lib/store"; import { Mural, MuralEx, MuralStatus } from "../../interfaces"; import styled from "styled-components"; -import { Border, Btn, Flex, SELECTED_COLOR } from "../styles"; +import { A, Border, Btn, Flex, SELECTED_COLOR } from "../styles"; import { CanvasToCanvasJSX } from "./canvasToCanvasJSX"; import { formatNumber, getMuralHeight, getMuralWidth, getPixelStatusMural } from "../../lib/utils"; import { IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Coordinates } from "../../lib/coordinates"; +import { Coordinates, CordType } from "../../lib/coordinates"; import { TEXT_FORMATS } from "../importMural"; import saveAs from "file-saver"; import { Popup } from "./Popup"; @@ -78,6 +78,7 @@ interface State { height: number; overlay: boolean; progress?: MuralStatus | (() => void /* loading */); + link: string; } @@ -89,22 +90,31 @@ export class MuralView extends React.Component { height: this.MAX_SIZE, width: this.MAX_SIZE, overlay: false, + link: "" }; } componentDidMount () { this.updateSize(); + this.props.cords.on(CordType.Url, this.onCordUpdate); } - componentDidUpdate ( prevProps: Readonly ) { + componentWillUnmount () { + this.props.cords.off(CordType.Url, this.onCordUpdate); + } + componentDidUpdate(prevProps: Readonly ) { if (this.props.mural.ref !== prevProps.mural.ref) { this.updateSize(); if (typeof this.state.progress === "function") { typeof this.state.progress(); - this.setState({progress: undefined}); + this.setState({progress: undefined, link: this.link}); } } } + onCordUpdate = () => { + this.setState({ link: this.link }); + }; + updateSize = () => { const w = this.props.mural.ref.width; const h = this.props.mural.ref.height; @@ -223,13 +233,17 @@ export class MuralView extends React.Component { this.props.store.removePhantomOverlay(); }; - onGoto = () => { + get link() { const weight = getMuralWidth(this.props.mural); const height = getMuralHeight(this.props.mural); const x = this.props.mural.x + Math.round(weight / 2); const y = this.props.mural.y + Math.round(height / 2); - const url = `${origin}/@${x},${y},${this.props.cords.uScale}`; - location.href = url; + const o = origin === "null" ? `${location.href}` : `${origin}/`; + return `${o}@${x},${y},${this.props.cords.uScale}`; + } + + onGoto = () => { + location.href = this.link; }; onPreview = () => { @@ -287,7 +301,7 @@ export class MuralView extends React.Component { {this.btn("Modify", faPenToSquare, this.onModify)} {this.btn("Export", faDownload, this.onExport)} {this.btn("Delete", faTrash, this.onDelete)} - {this.btn("Goto", faLocation, this.onGoto)} + Goto ; } diff --git a/src/UI/styles.tsx b/src/UI/styles.tsx index 3554495..423634d 100644 --- a/src/UI/styles.tsx +++ b/src/UI/styles.tsx @@ -12,8 +12,7 @@ export const FlexC = styled.div` flex-direction: column; `; - -export const Btn = styled.button` +const shardedBtnStyle = ` border: 1px solid white; font-size: 10pt; @@ -48,6 +47,9 @@ export const Btn = styled.button` transition: background-color 250ms; `; +export const Btn = styled.button`${shardedBtnStyle}`; +export const A = styled.a`${shardedBtnStyle}`; + export const Theme = styled.div` background-color: rgba(255, 255, 255, 0.75); color: rgb(10, 10, 10);