profectus/TMT-Demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleaned up tooltips

Browse source
This commit is contained in:
thepaperpilot 2022-07-06 22:52:03 -05:00
parent 409b3bbac4
commit 0229c0130f
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/features/tooltips/Tooltip.vue
View file

@ -34,10 +34,10 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="tsx">
import themes from "data/themes"; import themes from "data/themes";
import type { CoercableComponent, StyleValue } from "features/feature"; import type { CoercableComponent } from "features/feature";
import { jsx } from "features/feature"; import { jsx, StyleValue } from "features/feature";
import type { Persistent } from "game/persistence"; import type { Persistent } from "game/persistence";
import settings from "game/settings"; import settings from "game/settings";
import { Direction } from "util/common"; import { Direction } from "util/common";
@ -46,15 +46,15 @@ import {
coerceComponent, coerceComponent,
computeOptionalComponent, computeOptionalComponent,
processedPropType, processedPropType,
render, renderJSX,
unwrapRef unwrapRef
} from "util/vue"; } from "util/vue";
import type { Component, PropType } from "vue"; import type { Component, PropType } from "vue";
import { computed, defineComponent, ref, shallowRef, toRefs, unref, watchEffect } from "vue"; import { computed, defineComponent, ref, shallowRef, toRefs, unref } from "vue";
export default defineComponent({ export default defineComponent({
props: { props: {
element: processedPropType<VueFeature>(Object), element: Object as PropType<VueFeature>,
display: { display: {
type: processedPropType<CoercableComponent>(Object, String, Function), type: processedPropType<CoercableComponent>(Object, String, Function),
required: true required: true
@ -73,14 +73,14 @@ export default defineComponent({
const isShown = computed(() => (unwrapRef(pinned) || isHovered.value) && comp.value); const isShown = computed(() => (unwrapRef(pinned) || isHovered.value) && comp.value);
const comp = computeOptionalComponent(display); const comp = computeOptionalComponent(display);
const elementComp = shallowRef<Component | "" | null>(null); const elementComp = shallowRef<Component | "" | null>(
watchEffect(() => { coerceComponent(
const currComponent = unwrapRef(element); jsx(() => {
elementComp.value = const currComponent = unwrapRef(element);
currComponent == null return currComponent == null ? "" : renderJSX(currComponent);
? null })
: coerceComponent(jsx(() => render(currComponent) as JSX.Element)); )
}); );
function togglePinned(e: MouseEvent) { function togglePinned(e: MouseEvent) {
const isPinned = pinned as unknown as Persistent<boolean> | undefined; // Vue typing :/ const isPinned = pinned as unknown as Persistent<boolean> | undefined; // Vue typing :/

4
src/features/tooltips/tooltip.ts
View file

@ -85,13 +85,13 @@ export function addTooltip<T extends TooltipOptions>(
const elementComponent = element[Component]; const elementComponent = element[Component];
element[Component] = TooltipComponent; element[Component] = TooltipComponent;
const elementGratherProps = element[GatherProps].bind(element); const elementGatherProps = element[GatherProps].bind(element);
element[GatherProps] = function gatherTooltipProps(this: GenericTooltip) { element[GatherProps] = function gatherTooltipProps(this: GenericTooltip) {
const { display, classes, style, direction, xoffset, yoffset, pinned } = this; const { display, classes, style, direction, xoffset, yoffset, pinned } = this;
return { return {
element: { element: {
[Component]: elementComponent, [Component]: elementComponent,
[GatherProps]: elementGratherProps [GatherProps]: elementGatherProps
}, },
display, display,
classes, classes,