HumanBreak/src/ui/toolbar.vue

<template>
    <Box
        class="toolbar-container"
        :dragable="true"
        :resizable="true"
        v-model:left="box.x"
        v-model:top="box.y"
        v-model:height="box.height"
        v-model:width="box.width"
        :key="num"
    >
        <div class="toolbar">
            <div
                class="toolbar-item"
                v-for="item of bar.items"
                @click.stop="click"
                :noaction="!!item.noDefaultAction"
            >
                <component
                    :is="(CustomToolbar.info[item.type].show as any)"
                    :item="item"
                    :toolbar="bar"
                ></component>
            </div>
        </div>
    </Box>
</template>

<script lang="ts" setup>
import Box from '@/components/box.vue';
import { CustomToolbar } from '@/core/main/custom/toolbar';
import { GameUi } from '@/core/main/custom/ui';
import { mainSetting } from '@/core/main/setting';
import { onUnmounted, reactive, watch } from 'vue';

interface BoxData {
    x: number;
    y: number;
    width: number;
    height: number;
}

const props = defineProps<{
    num: number;
    ui: GameUi;
    bar: CustomToolbar;
}>();

const bar = props.bar;
const scale = mainSetting.getValue('ui.toolbarScale', 100) / 100;

const box = reactive<BoxData>({
    x: bar.x,
    y: bar.y,
    width: bar.width,
    height: bar.height
});

watch(box, ({ x, y, width, height }) => {
    bar.x = x;
    bar.y = y;
    bar.width = width;
    bar.height = height;
});

function click() {
    // pass
}

function posChange() {
    box.x = bar.x;
    box.y = bar.y;
    box.width = bar.width;
    box.height = bar.height;
}

bar.on('posChange', posChange);

onUnmounted(() => {
    bar.off('posChange', posChange);
});
</script>

<style lang="less" scoped>
.toolbar-container {
    background-color: #0009;
    padding: v-bind('scale * 5 + "px"');
}

.toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: 150%;
}

.toolbar-item {
    display: flex;
    margin: v-bind('scale * 5 + "px"');
    min-width: v-bind('scale * 50 + "px"');
    min-height: v-bind('scale * 50 + "px"');
    background-color: #222;
    border: 1.5px solid #ddd8;
    justify-content: center;
    align-items: center;
    transition: all 0.1s linear;
}

.toolbar-item[noaction='false'] {
    cursor: pointer;
}

.toolbar-item::v-deep(> *) {
    height: 100%;
    min-width: v-bind('scale * 50 + "px"');
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-overflow: clip;
    text-wrap: nowrap;
    overflow: hidden;
}

.toolbar-item::v-deep(.button-text)[active='true'] {
    color: gold;
    background-color: #555;
}

.toolbar-item:hover[noaction='false'] {
    background-color: #444;
}

.toolbar-item:active[noaction='false'] {
    background-color: #333;
}
</style>