diff --git a/src/components/Game.vue b/src/components/Game.vue index 9dd1e27..8fa3141 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -36,9 +36,8 @@ const layerKeys = computed(() => Object.keys(layers)); const useHeader = projInfo.useHeader; function gatherLayerProps(layer: GenericLayer) { - const { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay } = - layer; - return { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay }; + const { display, minimized, name, color, minimizable, nodes, minimizedDisplay } = layer; + return { display, minimized, name, color, minimizable, nodes, minimizedDisplay }; } </script> diff --git a/src/components/Layer.vue b/src/components/Layer.vue index abdf2bf..2d89ed2 100644 --- a/src/components/Layer.vue +++ b/src/components/Layer.vue @@ -1,7 +1,8 @@ <template> <div class="layer-container" :style="{ '--layer-color': unref(color) }"> - <button v-if="showGoBack" class="goBack" @click="goBack">←</button> - <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false"> + <button v-if="showGoBack" class="goBack" @click="goBack">❌</button> + + <button class="layer-tab minimized" v-if="unref(minimized)" @click="setMinimized(false)"> <component v-if="minimizedComponent" :is="minimizedComponent" /> <div v-else>{{ unref(name) }}</div> </button> @@ -34,10 +35,6 @@ export default defineComponent({ type: Number, required: true }, - tab: { - type: Function as PropType<() => HTMLElement | undefined>, - required: true - }, display: { type: processedPropType<CoercableComponent>(Object, String, Function), required: true @@ -47,10 +44,6 @@ export default defineComponent({ type: Object as PropType<Persistent<boolean>>, required: true }, - minWidth: { - type: processedPropType<number | string>(Number, String), - required: true - }, name: { type: processedPropType<string>(String), required: true @@ -63,7 +56,7 @@ export default defineComponent({ } }, setup(props) { - const { display, index, minimized, minWidth, tab, minimizedDisplay } = toRefs(props); + const { display, index, minimized, minimizedDisplay } = toRefs(props); const component = computeComponent(display); const minimizedComponent = computeOptionalComponent(minimizedDisplay); @@ -75,60 +68,24 @@ export default defineComponent({ player.tabs.splice(unref(props.index), Infinity); } - nextTick(() => updateTab(minimized.value, unref(minWidth.value))); - watch([minimized, wrapRef(minWidth)], ([minimized, minWidth]) => - updateTab(minimized, minWidth) - ); - function updateNodes(nodes: Record<string, FeatureNode | undefined>) { props.nodes.value = nodes; } - function updateTab(minimized: boolean, minWidth: number | string) { - const width = - typeof minWidth === "number" || Number.isNaN(parseInt(minWidth)) - ? minWidth + "px" - : minWidth; - const tabValue = tab.value(); - if (tabValue != undefined) { - if (minimized) { - tabValue.style.flexGrow = "0"; - tabValue.style.flexShrink = "0"; - tabValue.style.width = "60px"; - tabValue.style.minWidth = tabValue.style.flexBasis = ""; - tabValue.style.margin = "0"; - } else { - tabValue.style.flexGrow = ""; - tabValue.style.flexShrink = ""; - tabValue.style.width = ""; - tabValue.style.minWidth = tabValue.style.flexBasis = width; - tabValue.style.margin = ""; - } - } - } - return { component, minimizedComponent, showGoBack, updateNodes, unref, - goBack + goBack, + setMinimized }; } }); </script> <style scoped> -.layer-container { - min-width: 100%; - min-height: 100%; - margin: 0; - flex-grow: 1; - display: flex; - isolation: isolate; -} - .layer-tab:not(.minimized) { padding-top: 20px; padding-bottom: 20px; diff --git a/src/game/layers.tsx b/src/game/layers.tsx index 5435a2d..c689235 100644 --- a/src/game/layers.tsx +++ b/src/game/layers.tsx @@ -21,7 +21,7 @@ import type { } from "util/computed"; import { processComputable } from "util/computed"; import { createLazyProxy } from "util/proxies"; -import type { InjectionKey, Ref } from "vue"; +import { computed, InjectionKey, Ref } from "vue"; import { ref, shallowReactive, unref } from "vue"; /** A feature's node in the DOM that has its size tracked. */ @@ -231,6 +231,8 @@ export function createLayer<T extends LayerOptions>( processComputable(layer as T, "color"); processComputable(layer as T, "display"); + processComputable(layer as T, "classes"); + processComputable(layer as T, "style"); processComputable(layer as T, "name"); setDefault(layer, "name", layer.id); processComputable(layer as T, "minWidth"); @@ -239,6 +241,34 @@ export function createLayer<T extends LayerOptions>( setDefault(layer, "minimizable", true); processComputable(layer as T, "minimizedDisplay"); + const style = layer.style as ProcessedComputable<StyleValue> | undefined; + layer.style = computed(() => { + let width = unref(layer.minWidth as ProcessedComputable<number | string>); + if (typeof width === "number" || !Number.isNaN(parseInt(width))) { + width = width + "px"; + } + return [ + unref(style) ?? "", + layer.minimized?.value + ? { + flexGrow: "0", + flexShrink: "0", + width: "60px", + minWidth: "", + flexBasis: "", + margin: "0" + } + : { + flexGrow: "", + flexShrink: "", + width: "", + minWidth: width, + flexBasis: width, + margin: "" + } + ]; + }) as Ref<StyleValue>; + return layer as unknown as Layer<T>; }); }