From e73d6d831713c4a940cc645f02d62c3c1c159edf Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sat, 12 Jun 2021 18:40:02 +1000 Subject: [PATCH] Refactor token outline and add SVG option for token bar image previews --- src/components/map/MapToken.js | 44 +------------ src/components/token/TokenImage.js | 33 +++++++++- src/components/token/TokenOutline.js | 94 ++++++++++++++++++++++++++++ 3 files changed, 127 insertions(+), 44 deletions(-) create mode 100644 src/components/token/TokenOutline.js diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index 2025ca9..f94b315 100644 --- a/src/components/map/MapToken.js +++ b/src/components/map/MapToken.js @@ -1,5 +1,5 @@ import React, { useState, useRef } from "react"; -import { Image as KonvaImage, Group, Line, Rect, Circle } from "react-konva"; +import { Image as KonvaImage, Group } from "react-konva"; import { useSpring, animated } from "react-spring/konva"; import useImage from "use-image"; import Konva from "konva"; @@ -18,8 +18,7 @@ import { useDataURL } from "../../contexts/AssetsContext"; import TokenStatus from "../token/TokenStatus"; import TokenLabel from "../token/TokenLabel"; - -import colors from "../../helpers/colors"; +import TokenOutline from "../token/TokenOutline"; import { tokenSources } from "../../tokens"; @@ -235,43 +234,6 @@ function MapToken({ } } - function renderOutline() { - const outline = getScaledOutline(); - const sharedProps = { - fill: colors.black, - opacity: tokenImage ? 0 : 0.8, - }; - if (outline.type === "rect") { - return ( - - ); - } else if (outline.type === "circle") { - return ( - - ); - } else { - return ( - - ); - } - } - return ( - {renderOutline()} +