From ce3eafb8dfdfd31f508fbaeddaba59de8d005e31 Mon Sep 17 00:00:00 2001 From: poanse <50020771+poanse@users.noreply.github.com> Date: Thu, 18 Dec 2025 09:54:24 +0300 Subject: [PATCH] cleanup --- src/{pixi => }/Constants.ts | 0 ...lobalState.svelte.ts => Context.svelte.ts} | 18 +- src/{pixi => }/Custom.js | 0 src/{pixi => }/IconService.ts | 2 +- .../{pixi.svelte => TaskmapContainer.svelte} | 26 +-- src/legacy/Button.ts | 135 ----------- src/legacy/TaskView.ts | 219 ------------------ src/legacy/TaskmapViewComponent.svelte | 15 -- src/legacy/canvas/Ball.svelte | 70 ------ src/legacy/canvas/CanvasApp.svelte | 22 -- src/legacy/demo/DemoApp.svelte | 203 ---------------- 11 files changed, 21 insertions(+), 689 deletions(-) rename src/{pixi => }/Constants.ts (100%) rename src/{pixi/GlobalState.svelte.ts => Context.svelte.ts} (88%) rename src/{pixi => }/Custom.js (100%) rename src/{pixi => }/IconService.ts (98%) rename src/components/{pixi.svelte => TaskmapContainer.svelte} (83%) delete mode 100644 src/legacy/Button.ts delete mode 100644 src/legacy/TaskView.ts delete mode 100644 src/legacy/TaskmapViewComponent.svelte delete mode 100644 src/legacy/canvas/Ball.svelte delete mode 100644 src/legacy/canvas/CanvasApp.svelte delete mode 100644 src/legacy/demo/DemoApp.svelte diff --git a/src/pixi/Constants.ts b/src/Constants.ts similarity index 100% rename from src/pixi/Constants.ts rename to src/Constants.ts diff --git a/src/pixi/GlobalState.svelte.ts b/src/Context.svelte.ts similarity index 88% rename from src/pixi/GlobalState.svelte.ts rename to src/Context.svelte.ts index c813c11..30909a7 100644 --- a/src/pixi/GlobalState.svelte.ts +++ b/src/Context.svelte.ts @@ -1,12 +1,12 @@ -import TaskmapPlugin from "../main"; -import type { ProjectData } from "../ProjectData.svelte"; -import { StatusCode, type TaskId } from "../types"; +import TaskmapPlugin from "./main"; +import type { ProjectData } from "./ProjectData.svelte.js"; +import { StatusCode, type TaskId } from "./types"; import { Spring } from "svelte/motion"; import type { App } from "obsidian"; -import type { TaskmapView } from "../TaskmapView"; -import type { NodePositionsCalculator } from "../NodePositionsCalculator"; +import type { TaskmapView } from "./TaskmapView"; +import type { NodePositionsCalculator } from "./NodePositionsCalculator"; -export class UIState { +export class Context { app: App; view: TaskmapView; nodePositionsCalculator: NodePositionsCalculator; @@ -132,12 +132,8 @@ export class UIState { } public getCurrentTaskPosition(taskId: number) { - const pos = this.taskPositions.find((t) => t.taskId === taskId)!.tween! + return this.taskPositions.find((t) => t.taskId === taskId)!.tween! .current; - if (taskId == 5) { - console.log(JSON.stringify(pos)); - } - return pos; } public serializeForDebugging() { diff --git a/src/pixi/Custom.js b/src/Custom.js similarity index 100% rename from src/pixi/Custom.js rename to src/Custom.js diff --git a/src/pixi/IconService.ts b/src/IconService.ts similarity index 98% rename from src/pixi/IconService.ts rename to src/IconService.ts index 57d3a74..8793487 100644 --- a/src/pixi/IconService.ts +++ b/src/IconService.ts @@ -1,4 +1,4 @@ -import { IconCode, StatusCode } from "../types"; +import { IconCode, StatusCode } from "./types"; export const LOGO_NAME = "TaskmapLogo"; export const LOGO_CONTENT = ` diff --git a/src/components/pixi.svelte b/src/components/TaskmapContainer.svelte similarity index 83% rename from src/components/pixi.svelte rename to src/components/TaskmapContainer.svelte index 83ce41d..89830cd 100644 --- a/src/components/pixi.svelte +++ b/src/components/TaskmapContainer.svelte @@ -3,9 +3,9 @@ import Toolbar from "./Toolbar.svelte"; import Task from "./Task.svelte"; import Panzoom, {type PanzoomObject} from '@panzoom/panzoom' - import type {Context} from "../types"; + import type {Context} from "../Context.svelte.js"; - let {uiState, projectData}: Context = $props(); + let {context}: {context: Context} = $props(); let viewportEl: HTMLDivElement | null = null; let sceneEl: HTMLDivElement | null = null; @@ -48,7 +48,7 @@ (ev) => { getPanzoom().zoomWithWheel(ev); if (getPanzoom().getScale() > 1) { - uiState.incrementUpdateOnZoomCounter(); + context.incrementUpdateOnZoomCounter(); } } ); @@ -68,7 +68,7 @@ function handleKey(e: KeyboardEvent) { console.log('handleKey ', e.key); if (e.key === "Escape") { - uiState.setSelectedTaskId(-1); + context.setSelectedTaskId(-1); e.stopPropagation(); } } @@ -93,10 +93,10 @@ return } mouseDown = false; - console.log(`Window clicked + ${uiState.serializeForDebugging()}`); - console.log('selectedTaskId ' + uiState.selectedTaskId); - uiState.pressedButtonIndex = -1; - uiState.setSelectedTaskId(-1); + console.log(`Window clicked + ${context.serializeForDebugging()}`); + console.log('selectedTaskId ' + context.selectedTaskId); + context.pressedButtonIndex = -1; + context.setSelectedTaskId(-1); sceneEl!.focus(); } function getPanzoom() { @@ -115,7 +115,7 @@ style="width: 100%; height: 100vh; overflow: hidden; position: relative; background: #1C1C1C;" >
mouseDown = true} onclick={handleCanvasClick} @@ -124,13 +124,13 @@ style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;" role="presentation" > - {#each projectData.tasks.filter(t => !t.deleted) as task} - + {#each context.projectData.tasks.filter(t => !t.deleted) as task} + {/each} - {#if uiState.selectedTaskId !== -1} + {#if context.selectedTaskId !== -1} {/if}
diff --git a/src/legacy/Button.ts b/src/legacy/Button.ts deleted file mode 100644 index c449d96..0000000 --- a/src/legacy/Button.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { - type Application, - Color, - Container, - Graphics, - SCALE_MODES, - type Size, - Sprite, - Texture, -} from "pixi.js"; -import { match, P } from "ts-pattern"; - -export enum ButtonState { - INACTIVE = "INACTIVE", - INACTIVE_HOVERED = "INACTIVE_HOVERED", - ACTIVE = "ACTIVE", - ACTIVE_HOVERED = "ACTIVE_HOVERED", - // TODO: pressed -} - -export type ColorStateMap = { - [key in ButtonState]: Color; -}; - -class ButtonOptions { - size: Size; - backgroundColors: ColorStateMap; - iconColors: ColorStateMap; -} - -export class Button extends Container { - private app: Application; - private state: ButtonState; - private opts: ButtonOptions; - private iconSource: Promise; - - private background: Sprite; - private icon: Sprite; - - constructor( - app: Application, - initialState: ButtonState, - iconSource: Promise, - opts: ButtonOptions, - ) { - super(); - this.app = app; - this.state = initialState; - this.iconSource = iconSource; - this.opts = opts; - } - - setup() { - this.eventMode = "static"; - this.cursor = "pointer"; - - this.on("pointerover", this.hoverOn); - this.on("pointerout", this.hoverOff); - this.on("pointerdown", () => { - console.log("Clicked icon"); - }); - // background - - // tooltip - // ... - this.update(); - // callbacks - // ... - } - - async update() { - // TODO: я идиот и менял не тот бэкграунд - // this.background.destroy(); - - const bgTexture = this.app.renderer.generateTexture({ - target: new Graphics() - .roundRect(0, 0, this.opts.size.width, this.opts.size.height, 2) - .fill({ color: this.opts.backgroundColors[this.state] }), - // resolution: 4, - // antialias: true, - }); - bgTexture.source.scaleMode = "linear"; - this.background = new Sprite(bgTexture); - this.addChild(this.background); - - const icon = await this.iconSource; - const iconTexture = match(icon) - .returnType() - .with(P.instanceOf(Graphics), () => - this.app.renderer.generateTexture({ - target: icon as Graphics, - // .fill({ - // color: this.opts.iconColors[this.state], - // }) - // antialias: true, - resolution: 4, - }), - ) - .with(P.instanceOf(Texture), () => icon as Texture) - .exhaustive(); - iconTexture.source.scaleMode = "linear"; - this.icon = new Sprite({ - texture: iconTexture, - anchor: 0.5, - // roundPixels: true, - }); - this.icon.scale = 0.6; - this.icon.position.set( - this.opts.size.width / 2, - this.opts.size.height / 2, - ); - this.addChild(this.icon); - } - - changeState(state: ButtonState) { - this.state = state; - this.icon.destroy(); - this.update(); - } - - hoverOn() { - if (this.state == ButtonState.ACTIVE) { - this.changeState(ButtonState.ACTIVE_HOVERED); - } else if (this.state == ButtonState.INACTIVE) { - this.changeState(ButtonState.INACTIVE_HOVERED); - } - } - hoverOff() { - if (this.state == ButtonState.ACTIVE_HOVERED) { - this.changeState(ButtonState.ACTIVE); - } else if (this.state == ButtonState.INACTIVE_HOVERED) { - this.changeState(ButtonState.INACTIVE); - } - } -} diff --git a/src/legacy/TaskView.ts b/src/legacy/TaskView.ts deleted file mode 100644 index 2fde968..0000000 --- a/src/legacy/TaskView.ts +++ /dev/null @@ -1,219 +0,0 @@ -import { Application, Color, Container, Graphics, TextStyle } from "pixi.js"; -import TextInput from "./text-input"; -import { Button, ButtonState } from "./Button"; -import { alphaBlend } from "@napolab/alpha-blend"; -import { IconService } from "../pixi/IconService"; - -export interface TaskCardOptions { - label: string; - width: number; - height: number; -} - -const COLOR_WHITE = "#ffffff"; // Double-click detection -const DOUBLE_CLICK_DELAY = 300; // milliseconds -let lastClickTime = 0; - -export const TASK_BACKGROUND_DEFAULT_COLOR: Color = new Color("0x1E1E1E"); -const TASK_BORDER_DEFAULT_COLOR = new Color("0x343434"); -// const TASK_BACKGROUND_DEFAULT_COLOR: Color = new Color(COLOR_WHITE); -const ICON_BACKGROUND_COLOR = new Color("0x1E1E1E"); -const HOVERED_ICON_BACKGROUND_COLOR = new Color("0x343434"); -const TOOLBAR_BACKGROUND_DEFAULT_COLOR: string = alphaBlend( - ICON_BACKGROUND_COLOR.toRgbaString(), - new Color("#000000").setAlpha(0.5).toRgbaString(), -); -console.log("TASK BACKGROUND COLOR: ", TOOLBAR_BACKGROUND_DEFAULT_COLOR); -export const TASK_DEFAULT_BORDER = { - color: 0x7e7e7e, - width: 1, -}; -export const TASK_FOCUSED_BORDER = { - color: 0x7e7e7e, - width: 2, -}; -export const TEXT_COLOR = COLOR_WHITE; -export const TEXT_STYLE = new TextStyle({ - fill: TEXT_COLOR, - fontSize: 10, - fontFamily: "Segoe UI", - lineHeight: 1.5, -}); - -export class TaskView extends Container { - private toolbar!: Container; - private card!: Graphics; - // private text!: Text; - private app!: Application; - private readonly opts: TaskCardOptions; - - private inputEl: TextInput | null = null; - private mountEl: HTMLDivElement; - - constructor( - app: Application, - mountEl: HTMLDivElement, - opts: TaskCardOptions, - ) { - super(); - this.app = app; - this.mountEl = mountEl; - this.opts = opts; - } - - async draw() { - // this.card = new Graphics() - // .roundRect(0, yShift, CARD_W, CARD_H, 10) - // .fill({ color: TASK_BACKGROUND_DEFAULT_COLOR }); - // .stroke(TASK_DEFAULT_BORDER) - // this.addChild(this.card); - - // TODO: почему-то поле с редактированием текста рисуется на бэкграунде и его не видно - // TODO: после редктирования показываются оба варианта текста... - let input = new TextInput(this.mountEl, { - text: this.opts.label, - input: { - // multiline: true, - fontFamily: TEXT_STYLE.fontFamily, - fontSize: `${TEXT_STYLE.fontSize}pt`, - padding: `${TEXT_STYLE.padding}px`, - width: `${this.opts.width}px`, - height: `${this.opts.height}px`, - color: TEXT_STYLE.fill, - textAlign: "center", - // dom params - "border-radius": 0, - // "background-color": COLOR_WHITE, - // "font-size": `${TEXT_STYLE.fontSize}pt`, - border: "0px solid #ccc", - "box-shadow": "none", - // outline: "none", - }, - box: { - default: { - fill: TOOLBAR_BACKGROUND_DEFAULT_COLOR, - rounded: 10, - stroke: TASK_DEFAULT_BORDER, - }, - focused: { - fill: TOOLBAR_BACKGROUND_DEFAULT_COLOR, - rounded: 10, - stroke: TASK_FOCUSED_BORDER, - }, - disabled: { - fill: TOOLBAR_BACKGROUND_DEFAULT_COLOR, - rounded: 0, - }, - }, - }); - input.placeholder = this.opts.label; - // Background - // input.x = 100; - // input.y = yShift; - // input.eventMode = "static"; - // input.on("blur", () => this.finishEditing()); - // input.on("pointerdown", (e) => { - // const now = Date.now(); - // if (now - lastClickTime < DOUBLE_CLICK_DELAY) { - // this.startEditing(); - // } - // lastClickTime = now; - // }); - this.addChild(input); - this.inputEl = input; - this.inputEl.render(this.app.renderer); - // this.text = new Text({ - // text: opts.label, - // resolution: 4, - // style: new TextStyle({ - // fill: COLOR_WHITE, - // fontSize: 10, - // fontFamily: "Segoe UI", - // lineHeight: 1.5, - // }), - // }); - // this.text.anchor.set(0.5); - // this.text.position = { - // x: CARD_W / 2, - // y: 50 + CARD_H / 2, - // }; - // this.text.eventMode = "static"; - // this.text.on("pointerdown", (e) => { - // const now = Date.now(); - // if (now - lastClickTime < DOUBLE_CLICK_DELAY) { - // this.startEditing(); - // } - // lastClickTime = now; - // }); - // this.addChild(this.text); - - // const TB_W = 98; - // const TB_H = 22; - // const TB_PADDING = { x: 2, y: 2 }; - // const TB_GAP = 1; - // - // this.toolbar = new Container(); - // this.toolbar.position = { x: (CARD_W - TB_W) / 2, y: TB_H }; - // this.toolbar.addChild( - // new Graphics() - // .roundRect(0, 0, TB_W, TB_H, 4) - // .fill({ color: TOOLBAR_BACKGROUND_DEFAULT_COLOR }), - // ); - // this.addChild(this.toolbar); - // // ========================= - // // 4) Create icons as vector shapes - // // ========================= - // - // const icons = [ - // IconService.makeTrashIcon(), - // IconService.makeKeyIcon(), - // IconService.makeLockIcon(), - // IconService.makeFocusIcon(), - // IconService.makeCircleIcon(), - // ]; - // - // icons.forEach((icon, i) => { - // const button = new Button(this.app, ButtonState.ACTIVE, icon, { - // size: { width: 18, height: 18 }, - // backgroundColors: { - // [ButtonState.ACTIVE]: new Color( - // TOOLBAR_BACKGROUND_DEFAULT_COLOR, - // ), - // [ButtonState.ACTIVE_HOVERED]: HOVERED_ICON_BACKGROUND_COLOR, - // [ButtonState.INACTIVE]: new Color(ICON_BACKGROUND_COLOR), - // [ButtonState.INACTIVE_HOVERED]: - // HOVERED_ICON_BACKGROUND_COLOR, - // }, - // iconColors: { - // [ButtonState.ACTIVE]: TASK_BACKGROUND_DEFAULT_COLOR, - // [ButtonState.ACTIVE_HOVERED]: TASK_BACKGROUND_DEFAULT_COLOR, - // [ButtonState.INACTIVE]: TASK_BACKGROUND_DEFAULT_COLOR, - // [ButtonState.INACTIVE_HOVERED]: - // TASK_BACKGROUND_DEFAULT_COLOR, - // }, - // }); - // button.x = TB_PADDING.x + i * (18 + TB_GAP); - // button.y = TB_PADDING.y; - // - // button.setup(); - // this.toolbar.addChild(button); - // }); - } - - // ================================================== - // LABEL EDIT MODE (HTML input overlay) - // ================================================== - - // private startEditing() { - // if (this.inputEl?.visible) return; - // this.inputEl!.visible = true; - // this.inputEl?.focus(); - // } - // - // private finishEditing() { - // if (!this.inputEl?.visible) return; - // - // this.text.text = this.inputEl.text; - // this.inputEl.visible = false; - // } -} diff --git a/src/legacy/TaskmapViewComponent.svelte b/src/legacy/TaskmapViewComponent.svelte deleted file mode 100644 index 0539355..0000000 --- a/src/legacy/TaskmapViewComponent.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - -
-

Hello world!

- -
diff --git a/src/legacy/canvas/Ball.svelte b/src/legacy/canvas/Ball.svelte deleted file mode 100644 index 39d99a2..0000000 --- a/src/legacy/canvas/Ball.svelte +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/src/legacy/canvas/CanvasApp.svelte b/src/legacy/canvas/CanvasApp.svelte deleted file mode 100644 index 24a9193..0000000 --- a/src/legacy/canvas/CanvasApp.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - - {#each balls as { color, x, y } (color)} - reorder(color)} /> - {/each} - diff --git a/src/legacy/demo/DemoApp.svelte b/src/legacy/demo/DemoApp.svelte deleted file mode 100644 index 51cfbe6..0000000 --- a/src/legacy/demo/DemoApp.svelte +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - - - - {title} - - - {#if taskClicked} - - - {/if} - - - -{#if editing} -
- -
-{/if} - - - - -