implement pinch to zoom

src/Model/Utility/utility.ts

@@ -277,3 +277,33 @@ export function parseArray(inputString: string): any[] {
 export function localeCompare(a: string, b: string): number {
     return a.localeCompare(b);
 }
+
+// ui 
+export function implementPinchZoom(element: HTMLElement) {
+    let initialDistance = 0;
+    let pinching = false;
+
+    const distance = (e: TouchEvent) => Math.hypot(e.touches[0].pageX - e.touches[1].pageX,
+        e.touches[0].pageY - e.touches[1].pageY);
+    function apply(factor) {
+	element.style.transform = `scale(${(Math.floor(factor*100)/100).toString()})`;
+    }
+
+    element.addEventListener("touchstart", (event: TouchEvent) => {
+	if (event.touches.length != 2) return;
+	initialDistance = distance(event);
+	pinching = true;
+	apply(1);
+    });
+    element.addEventListener("touchend", (event: TouchEvent) => {
+	if (event.touches.length == 2) return;
+	pinching = false;
+    })
+    element.addEventListener("touchmove", (event: TouchEvent) => {
+	if (!pinching) return;
+	event.preventDefault();
+	const currentDistance = distance(event);
+	const factor = currentDistance / initialDistance;
+	apply(factor);
+    })
+} 

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,4 +1,6 @@
 import * as React from "bloatless-react";
+import * as Utility from "../../Model/Utility/utility";
+
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -15,7 +17,7 @@ export function BoardKanbanPage(
     coreViewModel: CoreViewModel,
     boardViewModel: BoardViewModel,
 ) {
-    return PropertyValueList(
+    const main = PropertyValueList(
         "category",
         (taskViewModel: TaskViewModel) => taskViewModel.task,
         boardViewModel.filteredTaskViewModels,
@@ -47,6 +49,8 @@ export function BoardKanbanPage(
             );
         },
     );
+    Utility.implementPinchZoom(main);
+    return main;
 }
 
 function Column(

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,4 +1,6 @@
 import * as React from "bloatless-react";
+import * as Utility from "../../Model/Utility/utility";
+
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -40,7 +42,7 @@ export function BoardStatusGridPage(
         return StatusNameCell(coreViewModel, statusName, index, boardViewModel);
     };
 
-    return (
+    const main = (
         <div class="status-page-content">
             <div
                 class="status-name-row"
@@ -83,6 +85,8 @@ export function BoardStatusGridPage(
             )}
         </div>
     );
+    Utility.implementPinchZoom(main);
+    return main;
 }
 
 function StatusNameCell(

src/View/ChatPages/taskPage.css

@@ -33,11 +33,16 @@
     width: 100%;
     height: 100%;
 
-    overflow: auto;
+    overflow: visible;
+    transform-origin: top left;
 
     padding: var(--content-padding);
 }
 
+#board-content .main-content {
+    overflow: auto;
+}
+
 #chat-page > div > #main > #task-page .kanban-board-wrapper .kanban-column,
 #chat-page > div > #main > #task-page .status-grid-wrapper .status-column {
     display: flex;

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.08.30.B";
+    readonly BUILD = "Build 26.08.30.C";
 
     translations: Translations;
 

src/index.tsx

@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 import "./colors.css";
 import "./coloredTile.css";
 import "./base.css";
+import * as Utility from "./Model/Utility/utility";
 import HomeViewModel from "./ViewModel/Pages/homeViewModel";
 import StorageViewModel from "./ViewModel/Global/storageViewModel";
 import SettingsViewModel from "./ViewModel/Global/settingsViewModel";