From 181b7ffbf7fc1550a797e1f4735445e939762d08 Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 16:12:24 -0500
Subject: [PATCH 1/3] working on the text feild

---
 src/components/TextBox.vue    | 48 +++++++++++++++++++++++++++++++++++
 src/components/WrapperBox.vue |  4 +--
 src/pages/Editor.vue          |  7 +++--
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TextBox.vue

diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
new file mode 100644
index 0000000..5209bc0
--- /dev/null
+++ b/src/components/TextBox.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const editor = ref("");
+const editMode = ref(false);
+
+function edit() {
+  editMode.value = !editMode.value;
+}
+</script>
+
+<template>
+
+  <q-dialog v-if="editMode" >
+    <q-editor v-model="editor" min-height="5rem" />
+  </q-dialog>
+
+
+  <Draggable :grid="[25, 25]">
+    <div style="display: flex">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="editor" />
+            <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="edit">Edit</q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section>Remove</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </Draggable>
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/WrapperBox.vue b/src/components/WrapperBox.vue
index 2f894b4..caa52a7 100644
--- a/src/components/WrapperBox.vue
+++ b/src/components/WrapperBox.vue
@@ -16,9 +16,7 @@ function increment() {
       <div>Grid with component</div>
 
         <q-btn @click="increment">Count is: {{ count }}</q-btn>
-        <q-card class="my-card">
-            hi
-        </q-card>
+
     </div>
   </Draggable>
 </template>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 3efbf92..1a39d64 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -31,8 +31,10 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container>
-      <WrapperBox />
+    <q-page-container style="display: flex">
+
+      <TextBox/>
+
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -48,6 +50,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
 
 const leftDrawerOpen = ref(false);
 

From ad750a89595e4c89ec29cf163636895959aedd7e Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 17:31:01 -0500
Subject: [PATCH 2/3] rich editing works

---
 src/assets/grid.svg        | 13 +++++++
 src/components/TextBox.vue | 23 ++++---------
 src/pages/Editor.vue       | 69 +++++++++++++++++++++++++++++---------
 3 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/grid.svg

diff --git a/src/assets/grid.svg b/src/assets/grid.svg
new file mode 100644
index 0000000..70917da
--- /dev/null
+++ b/src/assets/grid.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    </pattern>
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <rect width="80" height="80" fill="url(#smallGrid)"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    </pattern>
+  </defs>
+      
+  <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>
\ No newline at end of file
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index 5209bc0..bd61a0f 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -1,38 +1,27 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useQuasar } from "quasar";
 
-const $q = useQuasar();
-const editor = ref("");
-const editMode = ref(false);
-
-function edit() {
-  editMode.value = !editMode.value;
-}
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
 </script>
 
 <template>
-
-  <q-dialog v-if="editMode" >
-    <q-editor v-model="editor" min-height="5rem" />
-  </q-dialog>
-
-
   <Draggable :grid="[25, 25]">
     <div style="display: flex">
       <q-card flat bordered>
         <q-card-section>
           <div class="row items-center no-wrap">
-            <q-card-section v-html="editor" />
+            <q-card-section v-html="props.statement" />
             <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="edit">Edit</q-item-section>
+                      <q-item-section @click="() => $emit('edit')">Edit</q-item-section>
                     </q-item>
                     <q-item clickable>
-                      <q-item-section>Remove</q-item-section>
+                      <q-item-section @click="() => $emit('remove')">Remove</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 1a39d64..92d1962 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditStatement = (stmt: String) => {
+  console.log('editing statement', stmt, editModal)
+  activeStatement = stmt
+  richEditModal.value = true
+  richEditExpression.value = stmt.raw
+}
+</script>
+
 <template>
   <q-layout view="hHh Lpr fff">
     <q-header reveal bordered class="bg-primary text-white" height-hint="98">
@@ -19,9 +50,7 @@
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <div class="column" style="height: 100%">
-        <div class="col">
-          variables
-        </div>
+        <div class="col">variables</div>
         <div class="col">
           <q-separator />
           function
@@ -31,10 +60,22 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container style="display: flex">
-
-      <TextBox/>
+    <q-page-container id="editor" style="display: flex">
+      <q-dialog ref="edit-modal" v-model="richEditModal">
+        <q-card>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Cancel" v-close-popup></q-btn>
+            <q-btn flat label="Save" v-close-popup></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
 
+      <span v-for="(item, index) in richTextStatments">
+        <TextBox
+          :statement="item.text"
+          v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
+        ></TextBox>
+      </span>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -47,14 +88,10 @@
   </q-layout>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
-import WrapperBox from "../components/WrapperBox.vue";
-import TextBox from "../components/TextBox.vue";
-
-const leftDrawerOpen = ref(false);
-
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
 }
-</script>
+</style>

From 14960831b45d9cbc37e8c1076f8296fb6c57ad5c Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 17:31:11 -0500
Subject: [PATCH 3/3] forgot to stage these

---
 src/App.vue          |  3 ++-
 src/pages/Editor.vue | 24 +++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 57e6d72..0d84cf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@ import { ref } from "vue";
 </script>
 
 <template>
-  <q-layout view="hHh Lpr fff">
+  <q-layout view="hHr LpR fFf">
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
@@ -26,6 +26,7 @@ import { ref } from "vue";
       <q-tabs align="left">
         <q-route-tab to="/Scratch" label="Scratch" />
         <q-route-tab to="/Editor" label="Editor" />
+
       </q-tabs>
     </q-header>
 
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 92d1962..66ad1a0 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -21,11 +21,17 @@ const richTextStatments = ref([
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
-const richEditStatement = (stmt: String) => {
-  console.log('editing statement', stmt, editModal)
-  activeStatement = stmt
-  richEditModal.value = true
-  richEditExpression.value = stmt.raw
+const richEditID = ref(0);
+
+const richEditStatement = (id: int) => {
+  console.log("editing statement", id, richEditModal);
+  richEditModal.value = true;
+  richEditID.value = id;
+  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+};
+
+function richUpdateValue() {
+  richTextStatments.value[richEditID.value].text = richEditExpression.value;
 }
 </script>
 
@@ -61,19 +67,19 @@ const richEditStatement = (stmt: String) => {
     </q-drawer>
 
     <q-page-container id="editor" style="display: flex">
-      <q-dialog ref="edit-modal" v-model="richEditModal">
+      <q-dialog v-model="richEditModal">
         <q-card>
+          <q-editor v-model="richEditExpression" min-height="5rem" />
           <q-card-actions align="right" class="text-primary">
             <q-btn flat label="Cancel" v-close-popup></q-btn>
-            <q-btn flat label="Save" v-close-popup></q-btn>
+            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
           </q-card-actions>
         </q-card>
       </q-dialog>
-
       <span v-for="(item, index) in richTextStatments">
         <TextBox
           :statement="item.text"
-          v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
+          v-on:edit="() => (item.text ? richEditStatement(index) : {})"
         ></TextBox>
       </span>
     </q-page-container>