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
dist/index.css
Vendored
+4 -5
View File
@@ -475,6 +475,7 @@ body[showing-chat] #chat-page-wrapper {
width: 100%;
max-width: 100%;
padding: 0px;
overflow: hidden;
}
#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content > div {
animation: slide-up var(--animation-duration);
@@ -485,14 +486,12 @@ body[showing-chat] #chat-page-wrapper {
gap: var(--gap-between-tiles);
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%;
overflow: visible;
width: auto;
height: auto;
transform-origin: top left;
padding: var(--content-padding);
}
dist/index.js
Vendored
+93 -45
View File
@@ -1136,32 +1136,82 @@
function localeCompare(a, b) {
return a.localeCompare(b);
}
function implementPinchZoom(element) {
let initialDistance = 0;
function implementPinchZoom(targetSelector) {
let pinching = false;
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 = () => canvas.querySelector(targetSelector);
const parent = () => element().parentElement;
const distance = (e) => 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()})`;
const point = (e, direction, i) => e.touches[i][direction == "x" ? "clientX" : "clientY"];
const midpoint = (e, direction) => (point(e, direction, 0) + point(e, direction, 1)) / 2;
function apply(factor, offset) {
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) => {
if (event.touches.length != 2) return;
initialDistance = distance(event);
pinching = true;
apply(1);
});
element.addEventListener("touchend", (event) => {
if (event.touches.length == 2) return;
const canvas = document.body;
canvas.addEventListener("touchstart", (event) => {
document.activeElement.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;
initialDistance = distance(event);
initialTouchX = midpoint(event, "x");
initialTouchY = midpoint(event, "y");
});
element.addEventListener("touchmove", (event) => {
if (!pinching) return;
canvas.addEventListener("touchmove", (event) => {
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) => {
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) => {
event.preventDefault();
});
}
@@ -1174,7 +1224,7 @@
this.connectionModel = connectionModel2;
this.chatListModel = chatListModel2;
this.fileTransferModel = fileTransferModel2;
this.BUILD = "Build 26.08.30.C";
this.BUILD = "Build 26.08.30.D";
// CONTEXT
this.contextStack = /* @__PURE__ */ new Map();
this.closeContext = (contextId, fromHistoryEvent = false) => {
@@ -1858,7 +1908,10 @@
};
this.downloadFile = async () => {
const date = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
const backup = await this.coreViewModel.fileTransferModel.generateBackup(this.selectedPaths.value.values(), this.exportKey.value);
const backup = 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`;
@@ -1888,7 +1941,10 @@
if (!fileString || !key) return;
this.cannotDecryptImport.value = true;
try {
await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
await this.coreViewModel.fileTransferModel.handleBackupFile(
fileString,
key
);
window.location.reload();
} catch (e) {
console.error(e);
@@ -4907,7 +4963,7 @@
const index = createPropertyValueIndexState(sortedStatuses, statusName);
return StatusNameCell(coreViewModel2, statusName, index, boardViewModel);
};
const main = /* @__PURE__ */ createElement("div", { class: "status-page-content" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { class: "status-page-content zoom" }, /* @__PURE__ */ createElement(
"div",
{
class: "status-name-row",
@@ -4941,8 +4997,6 @@
);
}
));
implementPinchZoom(main);
return main;
}
function StatusNameCell(coreViewModel2, statusName, index, boardViewModel) {
const taskViewModelsWithMatchingStatus = new ListState();
@@ -5066,7 +5120,7 @@
// src/View/ChatPages/boardKanbanPage.tsx
function BoardKanbanPage(coreViewModel2, boardViewModel) {
const main = PropertyValueList(
return PropertyValueList(
"category",
(taskViewModel) => taskViewModel.task,
boardViewModel.filteredTaskViewModels,
@@ -5086,14 +5140,12 @@
return /* @__PURE__ */ createElement(
"div",
{
class: "kanban-board-wrapper",
class: "kanban-board-wrapper zoom",
"children:append": [categories, categoryNameConverter]
}
);
}
);
implementPinchZoom(main);
return main;
}
function Column(coreViewModel2, categoryName, index, boardViewModel) {
return FilteredList(
@@ -6800,9 +6852,7 @@
function toggle() {
isSelected.value = !isSelected.value;
}
return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(
...fileOption.path
))));
return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))));
}
function DirectionSelectionModal(coreViewModel2, connectionViewModel2, fileTransferViewModel2) {
const isPresented = createProxyState(
@@ -6813,12 +6863,7 @@
[connectionViewModel2.isConnected],
() => connectionViewModel2.isConnected.value == false
);
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap content-margin-bottom"
},
/* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement(
"button",
{
class: "tile",
@@ -6828,8 +6873,7 @@
/* @__PURE__ */ createElement("span", { class: "icon" }, "share_windows"),
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.fromThisDeviceButton)),
/* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
),
/* @__PURE__ */ createElement(
), /* @__PURE__ */ createElement(
"button",
{
class: "tile",
@@ -6839,9 +6883,7 @@
/* @__PURE__ */ createElement("span", { class: "icon" }, "cloud_download"),
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.toThisDeviceButton)),
/* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
),
/* @__PURE__ */ createElement("hr", null),
/* @__PURE__ */ createElement(
), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
"button",
{
class: "tile",
@@ -6850,8 +6892,7 @@
/* @__PURE__ */ createElement("span", { class: "icon" }, "file_save"),
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.exportButton)),
/* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
),
/* @__PURE__ */ createElement(
), /* @__PURE__ */ createElement(
"button",
{
class: "tile",
@@ -6860,8 +6901,7 @@
/* @__PURE__ */ createElement("span", { class: "icon" }, "upload_file"),
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.importButton)),
/* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
)
)), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.close }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.close }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
}
function FileSelectionModal(coreViewModel2, fileTransferViewModel2) {
const OptionConverter = (fileOption) => {
@@ -7118,7 +7158,14 @@
[fileTransferViewModel2.presentedModal],
() => fileTransferViewModel2.presentedModal.value == 8 /* ImportSelection */
);
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement("input", { id: "file-transfer-input", type: "file", "on:change": fileTransferViewModel2.updateImportSelection }))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement(
"input",
{
id: "file-transfer-input",
type: "file",
"on:change": fileTransferViewModel2.updateImportSelection
}
))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
"button",
{
class: "flex",
@@ -8031,4 +8078,5 @@
StorageModal(coreViewModel, storageViewModel),
SettingsModal(coreViewModel, settingsViewModel)
);
implementPinchZoom(".zoom");
})();
src/Model/Global/fileTransferModel.ts
+3 -2
View File
@@ -151,12 +151,13 @@ export default class FileTransferModel {
const rawBackup = stringify(files);
console.log(rawBackup);
const encrypted = await encryptString(rawBackup, passphrase);
const blob = new Blob([encrypted], {type: "text/plain"});
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
+83 -20
View File
@@ -279,31 +279,94 @@ export function localeCompare(a: string, b: string): number {
}
// ui
export function implementPinchZoom(element: HTMLElement) {
let initialDistance = 0;
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);
pinching = true;
apply(1);
});
element.addEventListener("touchend", (event: TouchEvent) => {
if (event.touches.length == 2) return;
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;
})
element.addEventListener("touchmove", (event: TouchEvent) => {
if (!pinching) return;
initialTouchX = event.touches[0].clientX;
initialTouchY = event.touches[0].clientY;
return;
}
pinching = true;
initialDistance = distance(event);
initialTouchX = midpoint(event, "x");
initialTouchY = midpoint(event, "y");
});
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
+42 -37
View File
@@ -31,7 +31,7 @@ export function DataTransferModalWrapper(
{ExportModal(coreViewModel, fileTransferViewModel)}
{ImportModal(coreViewModel, fileTransferViewModel)}
{ImportDecryptionDataModal(coreViewModel, fileTransferViewModel)}
</div>
</div>
);
}
@@ -60,9 +60,7 @@ function OptionEntry(
<div>
<b class="ellipsis">{fileOption.label}</b>
<span class="secondary ellipsis">
{StorageModel.pathComponentsToString(
...fileOption.path,
)}
{StorageModel.pathComponentsToString(...fileOption.path)}
</span>
</div>
</button>
@@ -98,9 +96,7 @@ function DirectionSelectionModal(
}
</h2>
<div
class="flex-column gap content-margin-bottom"
>
<div class="flex-column gap content-margin-bottom">
<button
class="tile"
toggle:disabled={isDisconnected}
@@ -144,7 +140,9 @@ function DirectionSelectionModal(
<button
class="tile"
on:click={fileTransferViewModel.showExportSelectionModal}
on:click={
fileTransferViewModel.showExportSelectionModal
}
>
<span class="icon">file_save</span>
<div>
@@ -270,7 +268,7 @@ function FileSelectionModal(
</div>
</div>
</div>
);
);
}
function TransferDataDisplayModal(
@@ -432,7 +430,7 @@ function TransferDisplayModal(
</div>
</div>
</div>
);
);
}
function TransferDataInputModal(
@@ -579,7 +577,7 @@ function DataReceptionModal(
</button>
</div>
</div>
);
);
}
function ExportFileSelectionModal(
@@ -669,7 +667,7 @@ function ExportFileSelectionModal(
</div>
</div>
</div>
);
);
}
function ExportModal(
@@ -701,14 +699,11 @@ function ExportModal(
<span class="secondary">
{
coreViewModel.translations
.dataTransferModal
.exportKey
.dataTransferModal.exportKey
}
</span>
<input
bind:value={
fileTransferViewModel.exportKey
}
bind:value={fileTransferViewModel.exportKey}
type="password"
></input>
</div>
@@ -745,11 +740,12 @@ function ExportModal(
<button
class="primary flex"
on:click={fileTransferViewModel.downloadFile}
toggle:disabled={
fileTransferViewModel.cannotExport
}
toggle:disabled={fileTransferViewModel.cannotExport}
>
{coreViewModel.translations.dataTransferModal.downloadFileButton}
{
coreViewModel.translations.dataTransferModal
.downloadFileButton
}
<span class="icon">download</span>
</button>
</div>
@@ -781,7 +777,13 @@ function ImportModal(
</h2>
<div class="flex-column gap content-margin-bottom">
<input id="file-transfer-input" type="file" on:change={fileTransferViewModel.updateImportSelection}></input>
<input
id="file-transfer-input"
type="file"
on:change={
fileTransferViewModel.updateImportSelection
}
></input>
</div>
</main>
@@ -797,11 +799,12 @@ function ImportModal(
<button
class="primary flex"
on:click={fileTransferViewModel.importFile}
toggle:disabled={
fileTransferViewModel.cannotImport
}
toggle:disabled={fileTransferViewModel.cannotImport}
>
{coreViewModel.translations.dataTransferModal.importFileButton}
{
coreViewModel.translations.dataTransferModal
.importFileButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
@@ -839,14 +842,11 @@ function ImportDecryptionDataModal(
<span class="secondary">
{
coreViewModel.translations
.dataTransferModal
.exportKey
.dataTransferModal.exportKey
}
</span>
<input
bind:value={
fileTransferViewModel.importKey
}
bind:value={fileTransferViewModel.importKey}
type="password"
></input>
</div>
@@ -855,16 +855,18 @@ function ImportDecryptionDataModal(
<p
class="error"
toggle:hidden={fileTransferViewModel.isImportKeyCorrect}>
{coreViewModel.translations.dataTransferModal.incorrectPassphraseError}
toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
>
{
coreViewModel.translations.dataTransferModal
.incorrectPassphraseError
}
</p>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showImportModal
}
on:click={fileTransferViewModel.showImportModal}
>
{coreViewModel.translations.general.backButton}
</button>
@@ -875,7 +877,10 @@ function ImportDecryptionDataModal(
fileTransferViewModel.cannotDecryptImport
}
>
{coreViewModel.translations.dataTransferModal.decryptImportButton}
{
coreViewModel.translations.dataTransferModal
.decryptImportButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
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
+19 -13
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);
@@ -75,17 +75,16 @@ export default class FileTransferViewModel extends Context {
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
@@ -138,12 +137,16 @@ export default class FileTransferViewModel extends Context {
downloadFile = async (): Promise<void> => {
const date = new Date().toISOString().split("T")[0];
const backup: Blob = await this.coreViewModel.fileTransferModel.generateBackup(this.selectedPaths.value.values(), this.exportKey.value);
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");
@@ -152,7 +155,7 @@ export default class FileTransferViewModel extends Context {
const file = input.files[0];
this.importedFile.value = file;
}
};
importFile = (): void => {
const file = this.importedFile.value;
@@ -164,8 +167,8 @@ export default class FileTransferViewModel extends Context {
const result = reader.result;
this.importedFileString.value = result.toString();
this.showImportDecryptDataModal();
}
}
};
};
decryptImport = async (): Promise<void> => {
const fileString = this.importedFileString.value;
@@ -174,14 +177,17 @@ export default class FileTransferViewModel extends Context {
this.cannotDecryptImport.value = true;
try {
await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
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 => {
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");