Risuai 0.6.3 first commit

2023-05-07 12:41:45 +09:00
parent 50e5e1d917
commit 2c5c7d2694
98 changed files with 15070 additions and 0 deletions
--- a/src/lib/ChatScreens/ResizeBox.svelte
+++ b/src/lib/ChatScreens/ResizeBox.svelte
@@ -0,0 +1,96 @@
+<script>
+    import { CharEmotion, ViewBoxsize } from '../../ts/stores';
+    import { onMount } from 'svelte';
+    import EmotionBox from './EmotionBox.svelte';
+    import TransitionImage from './TransitionImage.svelte';
+    import { getEmotion } from '../../ts/util';
+    import { DataBase } from '../../ts/database';
+
+    let box;
+    let isResizing = false;
+    let initialWidth;
+    let initialHeight;
+    let initialX;
+    let initialY;
+
+    function handleStart(event) {
+        isResizing = true;
+        initialWidth = box.clientWidth;
+        initialHeight = box.clientHeight;
+        initialX = event.clientX || event.touches[0].clientX;
+        initialY = event.clientY || event.touches[0].clientY;
+    }
+
+    function handleEnd() {
+        isResizing = false;
+    }
+
+    function handleMove(event) {
+        if (!isResizing) return;
+        event.preventDefault();
+
+        const clientX = event.clientX || event.touches[0].clientX;
+        const clientY = event.clientY || event.touches[0].clientY;
+        const deltaX = initialX - clientX;
+        const deltaY = clientY - initialY;
+
+        const newWidth = Math.min(initialWidth + deltaX, window.innerWidth * 0.8);
+        const newHeight = Math.min(initialHeight + deltaY, window.innerHeight * 0.8);
+
+        ViewBoxsize.set({
+            width: newWidth,
+            height: newHeight
+        })
+    }
+
+    onMount(() => {
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleEnd);
+        window.addEventListener('touchmove', handleMove, { passive: false });
+        window.addEventListener('touchend', handleEnd);
+
+        return () => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('mouseup', handleEnd);
+        window.removeEventListener('touchmove', handleMove);
+        window.removeEventListener('touchend', handleEnd);
+        };
+    });
+</script>
+
+<style>
+    .box {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        border-bottom: 1px solid #6272a4;
+        border-left: 1px solid #6272a4;
+        width: 12rem;
+        height: 12rem;
+        z-index: 5;
+    }
+
+    .resize-handle {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-top: 1px solid #6272a4;
+        border-right: 1px solid #6272a4;
+        cursor: sw-resize;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+    }
+</style>
+
+<div class="box bg-darkbg bg-opacity-70" bind:this="{box}" style="width: {$ViewBoxsize.width}px; height: {$ViewBoxsize.height}px;">
+    <!-- Your content here -->
+    <TransitionImage classType='risu' src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
+    <div
+      class="resize-handle"
+      on:mousedown="{handleStart}"
+      on:mouseup="{handleEnd}"
+      on:touchstart="{handleStart}"
+      on:touchend="{handleEnd}"
+    ></div>
+</div>