diff --git a/src/app/hooks/useActiveTimout.ts b/src/app/hooks/useActiveTimout.ts index f3449b76..a651f3c8 100644 --- a/src/app/hooks/useActiveTimout.ts +++ b/src/app/hooks/useActiveTimout.ts @@ -1,4 +1,4 @@ -import { useRef, useState } from 'preact/hooks' +import { useCallback, useRef, useState } from 'preact/hooks' interface ActiveTimeoutOptions { cooldown?: number, @@ -9,13 +9,13 @@ export function useActiveTimeout({ cooldown, invert, initial }: ActiveTimeoutOpt const [active, setActive] = useState(initial) const timeout = useRef(undefined) - const trigger = () => { + const trigger = useCallback(() => { setActive(invert ? false : true) if (timeout.current !== undefined) clearTimeout(timeout.current) timeout.current = setTimeout(() => { setActive(invert ? true : false) }, cooldown ?? 2000) as any - } + }, []) return [active, trigger] } diff --git a/src/app/pages/Transformation.tsx b/src/app/pages/Transformation.tsx index 2fa70f15..171ebfe7 100644 --- a/src/app/pages/Transformation.tsx +++ b/src/app/pages/Transformation.tsx @@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState } from 'preact/hooks' import { Footer, NumberInput, Octicon, RangeInput } from '../components/index.js' import { InteractiveCanvas3D } from '../components/previews/InteractiveCanvas3D.jsx' import { useLocale, useTitle } from '../contexts/index.js' +import { useActiveTimeout } from '../hooks/useActiveTimout.js' import { useAsync } from '../hooks/useAsync.js' import { loadImage } from '../services/DataFetcher.js' import { composeMatrix, svdDecompose } from '../Utils.js' @@ -121,6 +122,18 @@ export function Transformation({}: Props) { renderer.current?.draw(view, usedMatrix.data) }, [usedMatrix]) + const [copiedDecomposed, setCopiedDecomposed] = useActiveTimeout() + const onCopyDecomposed = useCallback(() => { + navigator.clipboard.writeText(`{translation:[${translation.components().map(formatFloat).join(',')}],left_rotation:[${[...leftRotation].map(formatFloat).join(',')}],scale:[${scale.components().map(formatFloat).join(',')}],right_rotation:[${[...rightRotation].map(formatFloat).join(',')}]}`) + .then(() => setCopiedDecomposed()) + }, [translation, leftRotation, scale, rightRotation, setCopiedDecomposed]) + + const [copiedComposed, setCopiedComposed] = useActiveTimeout() + const onCopyComposed = useCallback(() => { + navigator.clipboard.writeText(`[${[...matrix.data].map(formatFloat).join(',')}]`) + .then(() => setCopiedComposed()) + }, [matrix, setCopiedComposed]) + return
@@ -128,6 +141,7 @@ export function Transformation({}: Props) {
{locale('transformation.translation')} +
{XYZ.map((c) =>
changeTranslation(c, v)} /> @@ -172,6 +186,7 @@ export function Transformation({}: Props) {
{locale('transformation.matrix')} +
{Array(16).fill(0).map((_, i) =>
@@ -190,6 +205,10 @@ export function Transformation({}: Props) {
} +function formatFloat(x: number) { + return x.toFixed(3).replace(/\.?0+$/, '') + 'f' +} + const vsMesh = ` attribute vec4 vertPos; attribute vec2 texCoord; diff --git a/src/app/services/Sharing.ts b/src/app/services/Sharing.ts index 6a92680d..028cc931 100644 --- a/src/app/services/Sharing.ts +++ b/src/app/services/Sharing.ts @@ -9,7 +9,6 @@ export async function shareSnippet(type: string, version: VersionId, jsonData: a try { const raw = JSON.stringify(jsonData) const data = lz.compressToBase64(raw) - console.debug('Compression rate', raw.length / raw.length) const body = JSON.stringify({ data, type, version, show_preview }) let id = ShareCache.get(body) if (!id) { diff --git a/src/locales/en.json b/src/locales/en.json index d658a722..6cc0f571 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -134,6 +134,8 @@ "transformation.left_rotation": "Left rotation", "transformation.scale": "Scale", "transformation.right_rotation": "Right rotation", + "transformation.copy_decomposed": "Copy decomposed format", + "transformation.copy_composed": "Copy matrix format", "trim_material": "Trim material", "trim_pattern": "Trim pattern", "pack_mcmeta": "Pack.mcmeta", diff --git a/src/styles/global.css b/src/styles/global.css index fb689c88..86780f89 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -598,6 +598,7 @@ main.has-project { .transformation-title { display: flex; margin-bottom: 2px; + align-items: flex-end; } .transformation-title span { @@ -608,7 +609,7 @@ main.has-project { display: flex; justify-content: center; align-items: center; - padding: 2px 3px; + padding: 4px 6px; background-color: var(--background-4); border: none; border-radius: 3px;