diff --git a/public/index.html b/public/index.html index f3cf4b1..3099bd1 100644 --- a/public/index.html +++ b/public/index.html @@ -43,7 +43,7 @@

How do I add an icon to my asset?

-

Ironsworn Asset Workbench v0.6.2

+

Ironsworn Asset Workbench v0.7.1

diff --git a/src/asset.tsx b/src/asset.tsx index 4330f2a..cb1f212 100644 --- a/src/asset.tsx +++ b/src/asset.tsx @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' import { scaleRatio, assetScale } from './assetScaling' +import { FontConfig, makeMergedConfig, createGoogleFontString } from './models/assetStyles' const WriteIn = (props: { writeIn?: string }) => { @@ -103,42 +104,6 @@ const Icon = (props: { icon: string | { svg: { d: string, fill: string, fillOpac } } -const createGoogleFontString = (...fonts) => { - let urlifiedFonts = Array.from(new Set(fonts)) - .filter(font => font) - .map(font => font.replace(/ /g, "+")) - .join("|") - return urlifiedFonts ? `https://fonts.googleapis.com/css?family=${urlifiedFonts}&display=swap` : "" -} - -const defaultFontConfig = { - assetTypeFontSize: "1.03em", - assetTypeFont: "Simonetta", - assetNameFontSize: "1.26em", - assetNameFont: "Simonetta", - detailsFontSize: "0.97em", - detailsFont: "PT Serif", - trackFontSize: "1.42em", - trackFont: "Simonetta" -} - -const makeMergedConfig = (config) => { - //TODO: merge in a way that doesn't have the pitfall of overriding with invalid values - // if an object with defined properties but values of "" or null or undefined gets passed in. - return Object.assign({}, defaultFontConfig, config) -} - -interface FontConfig { - assetTypeFontSize: string, - assetTypeFont: string, - assetNameFontSize: string, - assetNameFont: string, - detailsFontSize: string, - detailsFont: string, - trackFontSize: string, - trackFont: string, -} - const AssetStyles = (props: { fonts: object }) => { //TODO: put styles onto corresponding elements directly instead of living 'dangerously'. let fonts = props.fonts || {} @@ -210,20 +175,10 @@ export const Asset = (props: AssetProps) => {
) } -const setSvgDimensions = () => { - const svgs = document.querySelectorAll('svg') - svgs.forEach(svg => { - //TODO: less typecasting madness - svg.setAttribute('height', (svg.parentNode as HTMLElement).offsetHeight.toString()) - svg.setAttribute('width', (svg.parentNode as HTMLElement).offsetWidth.toString()) - }) -} - export const showAssetIn = (element, asset) => { // TODO: watch for state changes inside of a react component instead of re-rendering everything ReactDOM.render(, element) - //setSvgDimensions() } const assetContainer = document.querySelector(".assets") diff --git a/src/editor.tsx b/src/editor.tsx index 03f31c0..4ac2137 100644 --- a/src/editor.tsx +++ b/src/editor.tsx @@ -1,5 +1,5 @@ import { showAsset } from './asset' -import { transformToLatest, transformSvgString, AssetDocument } from './models' +import { transformToLatest, transformSvgString, AssetDocument } from './models/models' export let currentAsset: AssetDocument diff --git a/src/models/assetStyles.test.ts b/src/models/assetStyles.test.ts new file mode 100644 index 0000000..cdb2881 --- /dev/null +++ b/src/models/assetStyles.test.ts @@ -0,0 +1,20 @@ +import { makeMergedConfig } from './assetStyles' + +describe("font styles", () => { + test("merged font config handles specified sizes but unspecified fonts", () => { + let config = { + "assetTypeFontSize": "1.03em", + "assetTypeFont": undefined, + "assetNameFontSize": "1.26em", + "assetNameFont": undefined, + "detailsFontSize": "0.97em", + "detailsFont": undefined, + "trackFontSize": "1.42em", + "trackFont": undefined + } + + let result = makeMergedConfig(config) + + expect(result.assetNameFont).toBe("Simonetta") + }) +}) \ No newline at end of file diff --git a/src/models/assetStyles.ts b/src/models/assetStyles.ts new file mode 100644 index 0000000..be3697a --- /dev/null +++ b/src/models/assetStyles.ts @@ -0,0 +1,37 @@ +export const createGoogleFontString = (...fonts) => { + let urlifiedFonts = Array.from(new Set(fonts)) + .filter(font => font) + .map(font => font.replace(/ /g, "+")) + .join("|"); + return urlifiedFonts ? `https://fonts.googleapis.com/css?family=${urlifiedFonts}&display=swap` : ""; +}; + +const defaultFontConfig = { + assetTypeFontSize: "1.03em", + assetTypeFont: "Simonetta", + assetNameFontSize: "1.26em", + assetNameFont: "Simonetta", + detailsFontSize: "0.97em", + detailsFont: "PT Serif", + trackFontSize: "1.42em", + trackFont: "Simonetta" +}; + +export const makeMergedConfig = (config): FontConfig => { + let merged = Object.assign({}, defaultFontConfig) + for (let key in merged) { + merged[key] = config[key] || merged[key] + } + return merged +}; + +export interface FontConfig { + assetTypeFontSize: string; + assetTypeFont: string; + assetNameFontSize: string; + assetNameFont: string; + detailsFontSize: string; + detailsFont: string; + trackFontSize: string; + trackFont: string; +} diff --git a/src/models.test.ts b/src/models/models.test.ts similarity index 100% rename from src/models.test.ts rename to src/models/models.test.ts diff --git a/src/models.ts b/src/models/models.ts similarity index 100% rename from src/models.ts rename to src/models/models.ts