thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-21 16:13:57 +00:00
Code Issues Releases Activity Actions

Potential fix for some tab weirdness

Browse source
This commit is contained in:
thepaperpilot 2022-12-23 23:34:49 -06:00
parent 0bcd920f4d
commit 53e8669061
3 changed files with 36 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Game.vue
View file

@ -66,9 +66,8 @@ const useHeader = projInfo.useHeader;
const loreBody = computeOptionalComponent(main.loreBody);
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>

46
src/components/Layer.vue
View file

@ -2,7 +2,7 @@
<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" @click="setMinimized(false)">
<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 +34,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 +43,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 +55,7 @@ export default defineComponent({
}
},
setup(props) {
const { display, index, minimized, minWidth, tab, minimizedDisplay, name } = toRefs(props);
const { display, index, minimized, minimizedDisplay } = toRefs(props);
const component = computeComponent(display);
const minimizedComponent = computeOptionalComponent(minimizedDisplay);
@ -79,39 +71,10 @@ export default defineComponent({
minimized.value = min;
}
nextTick(() => updateTab(minimized.value, unref(minWidth.value)));
watch([name, minimized, wrapRef(minWidth)], ([name, minimized, minWidth]) => {
updateTab(minimized, minWidth);
});
function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
props.nodes.value = nodes;
}
function updateTab(min: boolean, minWidth: number | string) {
minimized.value = min;
const width =
typeof minWidth === "number" || Number.isNaN(parseInt(minWidth))
? minWidth + "px"
: minWidth;
const tabValue = tab.value();
if (tabValue != undefined) {
if (min) {
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,
@ -119,16 +82,13 @@ export default defineComponent({
updateNodes,
unref,
goBack,
setMinimized,
minimized,
minWidth
setMinimized
};
}
});
</script>
<style scoped>
.layer-tab:not(.minimized) {
padding-top: 20px;
padding-bottom: 20px;

32
src/game/layers.tsx
View file

@ -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>;
});
}