-
+
+
+
- $emit('edit')"
- >Edit
+ $emit('edit')">Edit
- $emit('remove')"
- >Remove
+ $emit('remove')">Remove
@@ -40,4 +68,6 @@ const props = defineProps<{value: RichTextBox}>();
-
+
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index d18f178..50a0ad4 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -2,32 +2,32 @@
import { ref } from "vue";
import { RichTextBox } from "../support/types";
import { stepX, stepY } from "../support/const";
-const props = defineProps<{value: RichTextBox}>();
+const props = defineProps<{ value: RichTextBox }>();
const emit = defineEmits<{
- (eventName: 'move', x: number,y:number): void,
+ (eventName: 'move', x: number, y: number): void,
(eventName: 'edit',): void,
(eventName: 'remove',): void,
}>()
-function onControlledDrag(e: {event: MouseEvent, data: {x: number, y: number}}) {
-
+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)
+ 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}}) {
+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);
+ const { x, y } = e.data;
+ // const x = e.x;
+ // const y = e.y;
+ console.log(self)
+ emit('move', x, y);
onControlledDrag(e);
}
@@ -51,15 +51,11 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
$emit('edit')">
-
Edit
- >Edit
+
- $emit('remove')"
- >Remove
+ $emit('remove')">Remove
@@ -72,4 +68,6 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
-
+
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index cc82442..aba1711 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -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([]);
+
+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()"
/>
+ makeNewImageBox()"
+ />
@@ -409,6 +456,25 @@ onMounted(() => {
v-on:move="(x, y) => moveRichTextBox(index, x, y)"
/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/support/types.ts b/src/support/types.ts
index 533e3aa..d14794c 100644
--- a/src/support/types.ts
+++ b/src/support/types.ts
@@ -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,
) {}