mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-08 02:52:49 +00:00
73 lines
1.8 KiB
Svelte
73 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import {share} from "$lib/share"
|
|
import tippy from "tippy.js"
|
|
import {setContext} from "svelte"
|
|
import Layout from "$lib/components/layout/Layout.svelte"
|
|
import {charaFileToUriComponent} from "$lib/share/share-url"
|
|
import SharePopup from "../SharePopup.svelte"
|
|
import type {VisualLayoutConfig} from "$lib/components/layout/visual-layout"
|
|
import {writable} from "svelte/store"
|
|
import {layout} from "$lib/undo-redo"
|
|
|
|
async function shareLayout(event: Event) {
|
|
const url = new URL(window.location.href)
|
|
url.searchParams.set(
|
|
"import",
|
|
await charaFileToUriComponent({
|
|
charaVersion: 1,
|
|
type: "layout",
|
|
device: "one",
|
|
layout: $layout.map(it => it.map(it => it.action)) as [number[], number[], number[]],
|
|
}),
|
|
)
|
|
await navigator.clipboard.writeText(url.toString())
|
|
let shareComponent: SharePopup
|
|
tippy(event.target as HTMLElement, {
|
|
onCreate(instance) {
|
|
const target = instance.popper.querySelector(".tippy-content")!
|
|
shareComponent = new SharePopup({target})
|
|
},
|
|
onHidden(instance) {
|
|
instance.destroy()
|
|
},
|
|
onDestroy() {
|
|
shareComponent.$destroy()
|
|
},
|
|
}).show()
|
|
}
|
|
|
|
setContext<VisualLayoutConfig>("visual-layout-config", {
|
|
scale: 50,
|
|
inactiveScale: 0.7,
|
|
inactiveOpacity: 0.8,
|
|
strokeWidth: 1,
|
|
margin: 5,
|
|
fontSize: 9,
|
|
iconFontSize: 14,
|
|
})
|
|
|
|
setContext("active-layer", writable(0))
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Layout Manager - CharaChorder Device Manager</title>
|
|
<meta name="description" content="Edit your layout" />
|
|
</svelte:head>
|
|
|
|
<svelte:window use:share={shareLayout} />
|
|
|
|
<section>
|
|
<Layout />
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|