VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve zooming and scrolling

Browse Source
This commit is contained in:
marlon-erler
2026-08-30 22:24:55 +02:00
parent 7eb02f07dc
commit f159d45c75
13 changed files with 1042 additions and 924 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Model/Global/fileTransferModel.ts
+5 -4
View File
@@ -149,14 +149,15 @@ export default class FileTransferModel {
});
}
const rawBackup = stringify(files);
console.log(rawBackup);
console.log(rawBackup);
const encrypted = await encryptString(rawBackup, passphrase);
const blob = new Blob([encrypted], {type: "text/plain"});
return blob;
const blob = new Blob([encrypted], { type: "text/plain" });
return blob;
};
readonly prepareFileForSending = (filePath: string[]): string => {
const fileContent: string | undefined = this.storageModel.read(filePath);
const fileContent: string | undefined =
this.storageModel.read(filePath);
if (fileContent == null) return "";
const fileData: FileData = {
src/Model/Utility/utility.ts
+84 -21
View File
@@ -278,32 +278,95 @@ export function localeCompare(a: string, b: string): number {
return a.localeCompare(b);
}
// ui
export function implementPinchZoom(element: HTMLElement) {
let initialDistance = 0;
// ui
export function implementPinchZoom(targetSelector: string) {
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()})`;
let initialDistance = 0;
let currentZoom = 1;
let initialZoom = 1;
let currentX = 0;
let currentY = 0;
let initialX = 0;
let initialY = 0;
let initialTouchX = 0;
let initialTouchY = 0;
const MIN = 0.25;
const MAX = 5;
const element = (): HTMLElement => canvas.querySelector(targetSelector);
const parent = (): HTMLElement => element().parentElement;
const distance = (e: TouchEvent) =>
Math.hypot(
e.touches[0].pageX - e.touches[1].pageX,
e.touches[0].pageY - e.touches[1].pageY,
);
const point = (e: TouchEvent, direction: "x" | "y", i: number) =>
e.touches[i][direction == "x" ? "clientX" : "clientY"];
const midpoint = (e: TouchEvent, direction: "x" | "y") =>
(point(e, direction, 0) + point(e, direction, 1)) / 2;
function apply(factor: number, offset: [number, number]) {
if (factor < MIN) return apply(MIN, offset);
if (factor > MAX) return apply(5, offset);
if (!element) return;
const [x, y] = offset;
element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`;
currentX = x;
currentY = y;
currentZoom = factor;
}
element.addEventListener("touchstart", (event: TouchEvent) => {
if (event.touches.length != 2) return;
initialDistance = distance(event);
const canvas = document.body;
canvas.addEventListener("touchstart", (event: TouchEvent) => {
(document.activeElement as HTMLElement).blur();
initialZoom = currentZoom;
initialX = currentX;
initialY = currentY;
if (event.touches.length != 2) {
pinching = false;
initialTouchX = event.touches[0].clientX;
initialTouchY = event.touches[0].clientY;
return;
}
pinching = true;
apply(1);
initialDistance = distance(event);
initialTouchX = midpoint(event, "x");
initialTouchY = midpoint(event, "y");
});
element.addEventListener("touchend", (event: TouchEvent) => {
if (event.touches.length == 2) return;
pinching = false;
})
element.addEventListener("touchmove", (event: TouchEvent) => {
if (!pinching) return;
canvas.addEventListener("touchmove", (event: TouchEvent) => {
if (!pinching) {
apply(currentZoom, [
initialX + (((event.touches[0].clientX - initialTouchX)/initialZoom)),
initialY + ((event.touches[0].clientY - initialTouchY)/initialZoom),
]);
return;
}
if (event.touches.length < 2) return;
event.preventDefault();
const currentDistance = distance(event);
const factor = currentDistance / initialDistance;
apply(factor);
})
}
const midX = midpoint(event, "x");
const midY = midpoint(event, "y");
const ratio = currentDistance / initialDistance;
const difference = currentDistance - initialDistance;
apply(initialZoom * ratio, [initialX + (midX - difference - initialTouchX)/initialZoom, initialY + (midY - difference - initialTouchY)/initialZoom]);
});
canvas.addEventListener("wheel", (event: WheelEvent) => {
event.preventDefault();
if (!event.shiftKey) {
apply(currentZoom, [currentX - event.deltaX, currentY - event.deltaY]);
return;
};
apply(currentZoom + (event.deltaY < 0 ? 1 : -1) * 0.1, [initialX, initialY]);
});
canvas.addEventListener("scroll", (event: MouseEvent) => {
event.preventDefault();
});
}
src/View/ChatPages/boardKanbanPage.tsx
+3 -6
View File
@@ -1,6 +1,4 @@
import * as React from "bloatless-react";
import * as Utility from "../../Model/Utility/utility";
import { ViewController } from "../viewController";
import { TaskViewModelToEntry } from "../Components/taskEntry";
import {
@@ -12,12 +10,13 @@ import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPro
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import * as Utility from "../../Model/Utility/utility";
export function BoardKanbanPage(
coreViewModel: CoreViewModel,
boardViewModel: BoardViewModel,
) {
const main = PropertyValueList(
return PropertyValueList(
"category",
(taskViewModel: TaskViewModel) => taskViewModel.task,
boardViewModel.filteredTaskViewModels,
@@ -43,14 +42,12 @@ export function BoardKanbanPage(
return (
<div
class="kanban-board-wrapper"
class="kanban-board-wrapper zoom"
children:append={[categories, categoryNameConverter]}
></div>
);
},
);
Utility.implementPinchZoom(main);
return main;
}
function Column(
src/View/ChatPages/boardPage.tsx
+2
View File
@@ -11,6 +11,7 @@ import BoardViewModel, {
BoardPageTypes,
} from "../../ViewModel/Pages/boardViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import * as Utility from "../../Model/Utility/utility";
export function BoardPage(
coreViewModel: CoreViewModel,
@@ -148,6 +149,7 @@ export function BoardPage(
</button>
</span>
</div>
<div class="content main-content" children:set={pages}></div>
{BoardSettingsModal(coreViewModel, boardViewModel)}
src/View/ChatPages/boardStatusGridPage.tsx
+3 -6
View File
@@ -1,6 +1,4 @@
import * as React from "bloatless-react";
import * as Utility from "../../Model/Utility/utility";
import { ViewController } from "../viewController";
import { TaskViewModelToEntry } from "../Components/taskEntry";
import {
@@ -17,6 +15,7 @@ import {
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import * as Utility from "../../Model/Utility/utility";
export function BoardStatusGridPage(
coreViewModel: CoreViewModel,
@@ -42,8 +41,8 @@ export function BoardStatusGridPage(
return StatusNameCell(coreViewModel, statusName, index, boardViewModel);
};
const main = (
<div class="status-page-content">
return (
<div class="status-page-content zoom">
<div
class="status-name-row"
children:append={[statuses, statusNameCellConverter]}
@@ -85,8 +84,6 @@ export function BoardStatusGridPage(
)}
</div>
);
Utility.implementPinchZoom(main);
return main;
}
function StatusNameCell(
src/View/ChatPages/taskPage.css
+4 -5
View File
@@ -3,6 +3,7 @@
max-width: 100%;
padding: 0px;
overflow: hidden;
}
#chat-page
@@ -24,16 +25,14 @@
padding: var(--content-padding);
}
#chat-page > div > #main > #task-page .kanban-board-wrapper,
#chat-page > div > #main > #task-page .status-page-content {
#chat-page > div > #main > #task-page .zoom {
display: flex;
align-items: start;
gap: var(--large-gap);
width: 100%;
height: 100%;
width: auto;
height: auto;
overflow: visible;
transform-origin: top left;
padding: var(--content-padding);
src/View/Modals/dataTransferModal.tsx
+697 -692
View File
File diff suppressed because it is too large Load Diff
src/View/translations.ts
+8 -8
View File
@@ -145,14 +145,14 @@ const englishTranslations = {
filesReceivedCount: (count: number) => `Files processed: ${count}.`,
//
exportKey: "Encryption key",
exportKeyConfirmation: "Confirm",
downloadFileButton: "Download",
importFileButton: "Import",
decryptImportButton: "Decrypt",
incorrectPassphraseError: "The encryption key is incorrect",
//
exportKey: "Encryption key",
exportKeyConfirmation: "Confirm",
downloadFileButton: "Download",
importFileButton: "Import",
decryptImportButton: "Decrypt",
incorrectPassphraseError: "The encryption key is incorrect",
},
storage: {
src/ViewModel/Global/coreViewModel.ts
+1 -1
View File
@@ -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.C";
readonly BUILD = "Build 26.08.30.D";
translations: Translations;
src/ViewModel/Global/fileTransferViewModel.ts
+104 -98
View File
@@ -54,7 +54,7 @@ export default class FileTransferViewModel extends Context {
exportKey: React.State<string> = new React.State("");
exportKeyConfirmation: React.State<string> = new React.State("");
importedFile: React.State<File|undefined> = new React.State(undefined);
importedFile: React.State<File | undefined> = new React.State(undefined);
importedFileString: React.State<string> = new React.State("");
importKey: React.State<string> = new React.State("");
isImportKeyCorrect: React.State<boolean> = new React.State(true);
@@ -71,21 +71,20 @@ export default class FileTransferViewModel extends Context {
this.receivingTransferChannel.value == "" ||
this.receivingTransferKey.value == "",
);
cannotExport: React.State<boolean> = React.createProxyState(
[this.exportKey, this.exportKeyConfirmation],
() =>
this.exportKey.value == "" || this.exportKey.value != this.exportKeyConfirmation.value
this.exportKey.value == "" ||
this.exportKey.value != this.exportKeyConfirmation.value,
);
cannotImport: React.State<boolean> = React.createProxyState(
[this.importedFile],
() =>
this.importedFile.value == undefined
() => this.importedFile.value == undefined,
);
cannotDecryptImport: React.State<boolean> = React.createProxyState(
[this.importKey],
() =>
this.importKey.value == ""
() => this.importKey.value == "",
);
// handlers
@@ -136,142 +135,149 @@ export default class FileTransferViewModel extends Context {
};
downloadFile = async (): Promise<void> => {
const date = new Date().toISOString().split("T")[0];
const date = new Date().toISOString().split("T")[0];
const backup: Blob = await this.coreViewModel.fileTransferModel.generateBackup(this.selectedPaths.value.values(), this.exportKey.value);
const anchor = document.createElement("a");
anchor.href = window.URL.createObjectURL(backup);
anchor.download = `comms-${date}.bak`;
anchor.click();
}
const backup: Blob =
await this.coreViewModel.fileTransferModel.generateBackup(
this.selectedPaths.value.values(),
this.exportKey.value,
);
const anchor = document.createElement("a");
anchor.href = window.URL.createObjectURL(backup);
anchor.download = `comms-${date}.bak`;
anchor.click();
};
updateImportSelection = (): void => {
const input = document.getElementById("file-transfer-input");
if (!input) return;
if (!(input instanceof HTMLInputElement)) return;
const input = document.getElementById("file-transfer-input");
if (!input) return;
if (!(input instanceof HTMLInputElement)) return;
const file = input.files[0];
this.importedFile.value = file;
}
const file = input.files[0];
this.importedFile.value = file;
};
importFile = (): void => {
const file = this.importedFile.value;
if (!file) return;
const file = this.importedFile.value;
if (!file) return;
const reader = new FileReader();
reader.readAsText(file, "utf8");
reader.onload = () => {
const result = reader.result;
this.importedFileString.value = result.toString();
this.showImportDecryptDataModal();
}
}
const reader = new FileReader();
reader.readAsText(file, "utf8");
reader.onload = () => {
const result = reader.result;
this.importedFileString.value = result.toString();
this.showImportDecryptDataModal();
};
};
decryptImport = async (): Promise<void> => {
const fileString = this.importedFileString.value;
const key = this.importKey.value;
if (!fileString || !key) return;
const fileString = this.importedFileString.value;
const key = this.importKey.value;
if (!fileString || !key) return;
this.cannotDecryptImport.value = true;
try {
await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
window.location.reload();
} catch (e) {
console.error(e);
this.isImportKeyCorrect.value = false;
this.cannotDecryptImport.value = false;
}
}
this.cannotDecryptImport.value = true;
try {
await this.coreViewModel.fileTransferModel.handleBackupFile(
fileString,
key,
);
window.location.reload();
} catch (e) {
console.error(e);
this.isImportKeyCorrect.value = false;
this.cannotDecryptImport.value = false;
}
};
// view
showDirectionSelectionModal = (): void => {
this.coreViewModel.context = this;
this.presentedModal.value = FileTransferModals.DirectionSelection;
this.getOptions();
this.coreViewModel.context = this;
this.presentedModal.value = FileTransferModals.DirectionSelection;
this.getOptions();
};
showFileSelectionModal = (): void => {
this.presentedModal.value = FileTransferModals.FileSelection;
this.presentedModal.value = FileTransferModals.FileSelection;
};
showTransferDataModal = (): void => {
this.presentedModal.value = FileTransferModals.TransferDataDisplay;
this.getTransferData();
this.coreViewModel.fileTransferModel.prepareToSend();
this.presentedModal.value = FileTransferModals.TransferDataDisplay;
this.getTransferData();
this.coreViewModel.fileTransferModel.prepareToSend();
};
initiateTransfer = (): void => {
this.presentedModal.value = FileTransferModals.TransferDisplay;
this.didNotFinishSending.value = true;
this.filePathsSent.clear();
this.presentedModal.value = FileTransferModals.TransferDisplay;
this.didNotFinishSending.value = true;
this.filePathsSent.clear();
this.coreViewModel.fileTransferModel.sendFiles(
this.selectedPaths.value.values(),
(path: string) => {
this.filePathsSent.add(path);
},
);
this.coreViewModel.fileTransferModel.sendFiles(
this.selectedPaths.value.values(),
(path: string) => {
this.filePathsSent.add(path);
},
);
this.didNotFinishSending.value = false;
this.didNotFinishSending.value = false;
};
showTransferDataInputModal = (): void => {
this.presentedModal.value = FileTransferModals.TransferDataInput;
this.presentedModal.value = FileTransferModals.TransferDataInput;
};
showExportSelectionModal = (): void => {
this.presentedModal.value = FileTransferModals.ExportFileSelection;
this.presentedModal.value = FileTransferModals.ExportFileSelection;
};
showExportModal = (): void => {
this.presentedModal.value = FileTransferModals.Export;
this.presentedModal.value = FileTransferModals.Export;
};
showImportModal = (): void => {
this.presentedModal.value = FileTransferModals.ImportSelection;
this.presentedModal.value = FileTransferModals.ImportSelection;
};
showImportDecryptDataModal = (): void => {
this.presentedModal.value = FileTransferModals.ImportDecryptData;
this.presentedModal.value = FileTransferModals.ImportDecryptData;
};
prepareReceivingData = (): void => {
if (this.cannotPrepareToReceive.value == true) return;
this.presentedModal.value = FileTransferModals.ReceptionDisplay;
this.filePathsReceived.clear();
if (this.cannotPrepareToReceive.value == true) return;
this.presentedModal.value = FileTransferModals.ReceptionDisplay;
this.filePathsReceived.clear();
const transferData: TransferData = {
channel: this.receivingTransferChannel.value,
key: this.receivingTransferKey.value,
};
this.coreViewModel.fileTransferModel.prepareToReceive(transferData);
const transferData: TransferData = {
channel: this.receivingTransferChannel.value,
key: this.receivingTransferKey.value,
};
this.coreViewModel.fileTransferModel.prepareToReceive(transferData);
};
// exit
close = (): void => {
this.coreViewModel.closeContext(this.contextId);
this.coreViewModel.closeContext(this.contextId);
};
handleContextClose = (): void => {
this.presentedModal.value = undefined;
this.presentedModal.value = undefined;
};
// init
constructor(public readonly coreViewModel: CoreViewModel) {
super("file-transfer");
super("file-transfer");
this.coreViewModel.fileTransferModel.fileHandlerManager.setHandler(
"file-transfer-view-model",
this.handleReceivedFile,
);
this.coreViewModel.fileTransferModel.fileHandlerManager.setHandler(
"file-transfer-view-model",
this.handleReceivedFile,
);
this.coreViewModel.fileTransferModel.readyToSendHandlerManager.setHandler(
"file-transfer-view-model",
() => this.initiateTransfer(),
);
this.coreViewModel.fileTransferModel.readyToSendHandlerManager.setHandler(
"file-transfer-view-model",
() => this.initiateTransfer(),
);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
}
}
@@ -283,18 +289,18 @@ export interface FileTransferOption {
export enum FileTransferModals {
DirectionSelection,
// sending
FileSelection,
TransferDataDisplay,
TransferDisplay,
// sending
FileSelection,
TransferDataDisplay,
TransferDisplay,
// receiving
TransferDataInput,
ReceptionDisplay,
// receiving
TransferDataInput,
ReceptionDisplay,
// export
ExportFileSelection,
Export,
ImportSelection,
ImportDecryptData,
// export
ExportFileSelection,
Export,
ImportSelection,
ImportDecryptData,
}
src/index.tsx
+2 -1
View File
@@ -2,7 +2,6 @@ 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";
@@ -17,6 +16,7 @@ import { SettingsModal } from "./View/Modals/settingsModal";
import { DataTransferModalWrapper } from "./View/Modals/dataTransferModal";
import { ConnectionModal } from "./View/Modals/connectionModal";
import v1Upgrader from "./Upgrader/v1";
import * as Utility from "./Model/Utility/utility";
import StorageModel from "./Model/Global/storageModel";
import SettingsModel from "./Model/Global/settingsModel";
import FileTransferModel from "./Model/Global/fileTransferModel";
@@ -100,3 +100,4 @@ document
StorageModal(coreViewModel, storageViewModel),
SettingsModal(coreViewModel, settingsViewModel),
);
Utility.implementPinchZoom(".zoom");