CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Small formatting and style fixes and add image boxes

Browse Source
This commit is contained in:
QiTao Weng 2022-04-10 02:37:49 -05:00
parent 7e07427238
commit ee32663bdd
4 changed files with 128 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/ImageBox.vue
View File

@ -1,33 +1,61 @@
<script setup lang="ts">
import { ref } from "vue";
import { RichTextBox } from "../support/types";
import { ImageContainer } from "../support/types";
import { stepX, stepY } from "../support/const";
const props = defineProps<{value: RichTextBox}>();
const props = defineProps<{ value: ImageContainer }>();
const emit = defineEmits<{
(eventName: 'move', x: number, y: number): void,
(eventName: 'edit',): void,
(eventName: 'remove',): void,
}>()
function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
// const x = e.x;
// const y = e.y;
const { x, y } = e.data;
props.value.x = x;
props.value.y = y;
console.log(e)
}
function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
// console.log(typeof(e))
const { x, y } = e.data;
// const x = e.x;
// const y = e.y;
console.log(self)
emit('move', x, y);
onControlledDrag(e);
}
</script>
<template>
<Draggable
:grid="[stepX, stepY]"
:default-position="{ x: props.value.x, y: props.value.y }"
:position="{ x: props.value.x, y: props.value.y }"
@stop="onControlledDragStop"
>
<div>
<q-card flat bordered>
<q-card-section style="padding: 0">
<div class="row items-center no-wrap">
<q-card-section v-html="props.value.text" />
<q-card-section>
<q-img :src="props.value.url" style="min-width: 200px"></q-img>
</q-card-section>
<div class="col-auto">
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section @click="() => $emit('edit')"
>Edit</q-item-section
>
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
</q-item>
<q-item clickable>
<q-item-section @click="() => $emit('remove')"
>Remove</q-item-section
>
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
</q-item>
</q-list>
</q-menu>
@ -40,4 +68,6 @@ const props = defineProps<{value: RichTextBox}>();
</Draggable>
</template>
<style lang="sass" scoped></style>
<style lang="sass" scoped>
</style>

12
src/components/TextBox.vue
View File

@ -51,15 +51,11 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
<q-list>
<q-item clickable>
<q-item-section @click="() => $emit('edit')">
<q-icon name="edit" />
<q-item-label>Edit</q-item-label>
>Edit</q-item-section
>
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section @click="() => $emit('remove')"
>Remove</q-item-section
>
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
</q-item>
</q-list>
</q-menu>
@ -72,4 +68,6 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
</Draggable>
</template>
<style lang="sass" scoped></style>
<style lang="sass" scoped>
</style>

68
src/pages/Editor.vue
View File

@ -8,9 +8,10 @@ import Statement from '../components/Statement.vue'
import VarDeclEditor from './VarDeclEditor.vue'
import ExpressionEditor from './ExpressionEditor.vue'
import TextBox from '../components/TextBox.vue'
import ImageBox from '../components/ImageBox.vue'
import FunctionEditor from '../components/FunctionEditor.vue'
import { RichTextBox } from '../support/types'
import { RichTextBox, ImageContainer } from '../support/types'
import { stepX, stepY } from '../support/const'
import { checkLoggedIn, loggedOut } from '../support/auth'
import router from '../router'
@ -218,6 +219,46 @@ const removeRichTextBox = (id: number) => {
richTextStatements.value.splice(id, 1);
};
/*
Image box
*/
const makeNewImageBox = () => {
images.value.push(new ImageContainer(''));
imageID.value = images.value.length - 1;
imageURL.value = images.value[richEditID.value].url;
imageModal.value = true;
};
const images = ref<ImageContainer[]>([]);
const imageModal = ref(false);
const imageURL = ref("");
const imageID = ref(0);
const imageEditStatement = (id: number) => {
imageModal.value = true;
imageID.value = id;
imageURL.value = images.value[imageID.value].url;
};
const moveImageBox = (id: number, x: number, y: number) => {
imageID.value = id;
images.value[imageID.value].x = x;
images.value[imageID.value].y = y;
};
function imageUpdateValue() {
images.value[imageID.value].url = imageURL.value;
}
const removeimageBox = (id: number) => {
console.log(images.value[id]);
images.value.splice(id, 1);
};
/*
Auth
*/
@ -388,6 +429,12 @@ onMounted(() => {
title="Add a text box"
@click="() => makeNewRichTextBox()"
/>
<q-fab-action
color="secondary"
icon="image"
title="Add an image box"
@click="() => makeNewImageBox()"
/>
</q-fab>
</q-page-sticky>
@ -409,6 +456,25 @@ onMounted(() => {
v-on:move="(x, y) => moveRichTextBox(index, x, y)"
/>
</div>
<q-dialog v-model="imageModal">
<q-card autogrow style="min-width: 25em;">
<q-input autogrow v-model="imageURL"/>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup></q-btn>
<q-btn flat label="Save" @click="imageUpdateValue" v-close-popup></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<div v-for="(item, index) in images" style="display: flex">
<ImageBox
:value="item"
v-on:edit="() => (item.url ? imageEditStatement(index) : {})"
v-on:remove="() => removeimageBox(index)"
v-on:move="(x, y) => moveImageBox(index, x, y)"
/>
</div>
</q-page-container>
<q-footer reveal elevated class="bg-grey-8 text-white">

4
src/support/types.ts
View File

@ -102,9 +102,9 @@ export class RichTextBox {
}
export class ImageBox {
export class ImageContainer {
constructor(
public text: string = '',
public url: string = '',
public x: number = 0,
public y: number = 0,
) {}