Small formatting and style fixes and add image boxes

src/components/ImageBox.vue

@@ -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>

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
                   <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>

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<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">

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,
     ) {}