set fixed window size

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "crimata-electron",
+  "name": "crimata-messenger",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -11,7 +11,7 @@
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstal": "electron-builder install-app-deps"
   },
   "main": "background.js",
   "dependencies": {

src/background.ts

@@ -33,8 +33,9 @@ protocol.registerSchemesAsPrivileged([
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 650,
+    width: 350,
-    height: 1200,
+    height: 525,
+    resizable: false,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
@@ -47,7 +48,7 @@ function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
-    if (!process.env.IS_TEST) win.webContents.openDevTools();
+    // if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol("app");
     // Load the index.html when not in development

src/components/AI/index.vue

@@ -26,7 +26,6 @@
       data-name="Rectangle 410"
       width="350"
       height="500"
-      rx="20"
       fill="url(#radial-gradient)"
     />
   </g>

src/components/UI/UIDetails/inputItem.vue

@@ -91,7 +91,7 @@ div[contenteditable] {
   border: 0;
   border-radius: 20px;
   color: #fff;
-  background-color: #61b4f4;
+  background-color: #585858;
   font-size: 14;
   text-align: left;
   p {

src/components/UI/index.vue

@@ -9,7 +9,7 @@
     <AI />
     <MessageRenderer />
     <InputItem />
-    <TitleBar />
+    <!-- <TitleBar /> -->
   </svg>
 </template>
 
@@ -54,6 +54,6 @@ export default defineComponent({
   height: 500px;
   background-color: #e6e6e6;
   box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 20px;
+  // border-radius: 20px;
 }
 </style>

src/composables/messageItem/useMessageItemComp.ts

@@ -33,10 +33,10 @@ export default function useMessageItemComp(m: string, id: string) {
 
   const textFill = computed(() => {
     switch (m) {
-      case "fr":
+      case "sf":
-        return "#000";
-      default:
         return "#fff";
+      default:
+        return "#000";
     }
   });
 
@@ -45,7 +45,7 @@ export default function useMessageItemComp(m: string, id: string) {
       case "sf":
         return "#61b4f4";
       case "ai":
-        return "#585858";
+        return "#DDDDDD";
       default:
         return "#fff";
     }

src/composables/messageRenderer/useMessageRenderer.ts

@@ -6,7 +6,6 @@ export default function useMessageRenderer() {
     const { shiftAnimate, stackAnimate } = useRendererAnims();
 
     let messageList: NodeList;
-    let modifier: string;
     let message: HTMLElement | null;
     let messageOffset = { x: 0, y: 0 };
     let shift = false;
@@ -21,7 +20,6 @@ export default function useMessageRenderer() {
     }
 
     function beforeEnter(el: SVGGElement): void {
-        modifier = el.className.baseVal.substring(0, 2);
         const queryResult = document.querySelectorAll(".messageList");
         if (queryResult.length) messageList = queryResult;
     }

src/composables/messageRenderer/useOffsetCalculator.ts

@@ -23,8 +23,8 @@ export default function useOffsetCalculator() {
 
     const calculateMessageOffsets = (msg: HTMLElement) => {
         const msgRect = msg.getBoundingClientRect();
-        setXoffset(msg)
+        setXoffset(msg);
-        setYoffset(msgRect.height)
+        setYoffset(msgRect.height);
         const offsets = {
             x: xOffset.value as number,
             y: yOffset.value as number

src/composables/scroller/useScroller.ts

@@ -7,9 +7,8 @@ export default function useScroller({ targetId }: {targetId: string}) {
     let topBound: number;
 
     const clampedScroll = computed(() => {
-      const test = targetHeight.value;
+      if (targetHeight.value === 0) { return 0; }
-      if (test === 0) { return 0; }
+      topBound = -targetHeight.value + 440;
-      topBound = -test + 440;
       return Math.max(topBound, Math.min(scroll.value, 0)) as number;
     })
 
@@ -22,24 +21,34 @@ export default function useScroller({ targetId }: {targetId: string}) {
       return `0 ${clampedScroll.value} 350 500`;
     });
 
-    onMounted(() => {
+    const getHeight = () => {
-      scrollTarget = document.getElementById(targetId);
+      if (scrollTarget) {
-    });
+        return scrollTarget.getBoundingClientRect().height as number;
+      }
+    }
 
-    window.addEventListener(
+    const handleScrollEvent = (verticalScroll: number) => {
-      "wheel",
-      (e) => {
         if (scrollTarget) {
-          // get renderer height
-          targetHeight.value = scrollTarget.getBoundingClientRect().height;
           // only scroll if renderer height is greater than main window
-          if (targetHeight.value > 500) {
+          const heightResult = getHeight();
-            scroll.value += e.deltaY * 0.25;
+          if (heightResult) {
+            if (heightResult > 500) { 
+              targetHeight.value = heightResult;
+              scroll.value += verticalScroll;
+            }
           }
         }
-      },
+    }
-      { passive: true }
+
-    );
+    onMounted(() => {
+      scrollTarget = document.getElementById(targetId);
+      if (scrollTarget) {
+        window.addEventListener("wheel", (e) => {
+          const verticalScroll = e.deltaY * 0.25;
+          handleScrollEvent(verticalScroll);
+        })
+      }
+    });
 
     return {
       scrollView