source: main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue@ 35734

<template>
<div class="root">
    <div class="image-panel">
        <table v-if="rotateMode" class="rotate-guide">
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
            <tr><hr /></tr>
        </table>

        <!-- <img :src="imageUrl" class="image" :style="{ filter: filterString, transform: transformString }" /> -->
        <div class="image-container">
            <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-tl" />
            <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-tr" />
            <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-bl" />
            <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-br" />

            <img :src="imageUrl" class="image" :style="{ filter: filterString, transform: transformString }" />
        </div>
    </div>

    <div class="control-panel">
        <button class="btn-fab" @click="$emit('closeRequested')">
            <span class="material-icons mdi-l">save</span>
        </button>

        <button class="btn-fab" @click="invert = !invert">
            <span class="material-icons mdi-l">invert_colors</span>
        </button>

        <toggle-button v-model="rotateMode">
            <span class="material-icons mdi-l">crop_rotate</span>
        </toggle-button>
    </div>
</div>
</template>

<style lang="scss" scoped>
.root {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 100%;
    align-items: center;
    justify-items: center;
    background: rgba(0, 0, 0, 0.8);
}

.image-panel {
    position: relative;
    height: 100%;
    width: 100%;

    display: grid;
    align-items: center;
    justify-items: center;
}

.image {
    max-width: 100%;
    height: auto;
}

.image-container {
    max-width: 70%;
    max-height: 70%;
    position: relative;
    margin: auto;
    padding: 1em;

    .rotate-handle {
        height: 2em;
        position: absolute;

        // Generated with https://codepen.io/sosuke/pen/Pjoqqp using var(--primary-bg-color)
        filter: invert(16%) sepia(100%) saturate(3091%) hue-rotate(347deg) brightness(75%) contrast(90%);
    }

    .rotate-tl {
        top: 0;
        left: 0;
    }

    .rotate-tr {
        top: 0;
        right: 0;
        transform: rotate(90deg);
    }

    .rotate-bl {
        bottom: 0;
        left: 0;
        transform: rotate(270deg);
    }

    .rotate-br {
        bottom: 0;
        right: 0;
        transform: rotate(180deg);
    }
}

.rotate-guide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;

    tr hr {
        background-color: rgba(var(--bg-color-raw), 0.5);
    }
}

.control-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 0.5em;
    gap: 1em;
    height: 100%;

    // background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 10%);
}
</style>

<script>
import { mapState } from "vuex";
import ToggleButton from "./ToggleButton.vue"

export default {
    name: "EditPage",
    components: {
        ToggleButton
    },
    props: {
        image: File
    },
    data() {
        return {
            imageUrl: URL.createObjectURL(this.image),
            invert: false,
            rotateMode: false
        }
    },
    computed: {
        ...mapState({
            translations: state => state.translations,
            filterString() {
                let filters = "";

                if (this.invert) {
                    filters += "invert(1) ";
                }

                return filters;
            },
            transformString() {
                return `rotate(${this.rotation}deg)`
            }
        })
    },
    methods: {
    }
}
</script>