@myko/ui-svelte 4.4.0 → 4.4.3

package/src/lib/components/transactions/EntityHistory.svelte

@@ -1,173 +0,0 @@
-<script lang="ts">
-	import { myko as client } from '../../services/svelte-client.svelte.js';
-	import { ChildEntitiesAllTime, EventsForEntity, type EventContainer, type ID } from '@myko/core';
-	import { startWith } from 'rxjs';
-	import { getContext } from 'svelte';
-	import {
-		fromISOMemo,
-		isoToMillisMemo,
-		TRANSACTIONS_VIEW_STATE,
-		type TransactionsViewState
-	} from '../state/viewstate.svelte.js';
-
-	import { inview } from 'svelte-inview';
-	import EntityHistory from './EntityHistory.svelte';
-	import TransactionEvent from './TransactionEvent.svelte';
-	import TransactionEventGroup from './TransactionEventGroup.svelte';
-
-	const {
-		id,
-		itemType,
-		level = 0
-	}: {
-		id: ID;
-		itemType: string;
-		level?: number;
-	} = $props();
-
-	const viewState = getContext(TRANSACTIONS_VIEW_STATE) as TransactionsViewState;
-
-	const start = $derived(viewState.leftTime.toUTC().toISO());
-	const end = $derived(viewState.rightTime.toUTC().toISO());
-
-	const isRoot = $derived(level == 0);
-
-	const history = client.watchQuery(new EventsForEntity(id)).pipe(startWith([]));
-
-	const name = $derived(
-		$history.length > 0 && $history[0].event.item && typeof $history[0].event.item === 'object' && 'name' in $history[0].event.item
-			? $history[0].event.item['name']
-			: `Unknown ${itemType}`
-	);
-
-	$effect(() => {
-		const firstEvent = $history && $history.length > 0 ? $history[0] : undefined;
-		if (isRoot && firstEvent) {
-			viewState.timeZero = fromISOMemo(firstEvent.event.createdAt);
-		}
-	});
-
-	$effect(() => {
-		viewState.registerEvents($history.map((x: EventContainer) => x.event.createdAt));
-	});
-
-	const visibleEvents = $derived(
-		$history.filter(
-			(x: EventContainer) => (start ? x.event.createdAt >= start : true) && (end ? x.event.createdAt <= end : true)
-		)
-	);
-
-	type EventRenderInfo = {
-		eventContainer: EventContainer;
-		leftPx: number;
-	};
-
-	const visibleEventRenders: EventRenderInfo[] = $derived(
-		visibleEvents.map((x: EventContainer) => {
-			const timeMilis = $derived(isoToMillisMemo(x.event.createdAt));
-
-			const leftTimeMilis = $derived(timeMilis - viewState.leftTimeMilis);
-
-			const leftPx = $derived(leftTimeMilis / viewState.durationMilisPerPx);
-
-			return {
-				eventContainer: x,
-				leftPx
-			};
-		})
-	);
-
-	type EventRenderGroup = {
-		firstPx: number;
-		lastPx: number;
-		events: EventRenderInfo[];
-	};
-
-	const eventGroups = $derived(
-		visibleEventRenders.reduce((acc, x) => {
-			const lastGroup = acc[acc.length - 1];
-			if (lastGroup && x.leftPx - lastGroup.lastPx < 10) {
-				lastGroup.lastPx = x.leftPx;
-				lastGroup.events.push(x);
-			} else {
-				acc.push({
-					firstPx: x.leftPx,
-					lastPx: x.leftPx,
-					events: [x]
-				});
-			}
-			return acc;
-		}, [] as EventRenderGroup[])
-	);
-
-	const children = $derived(
-		client
-			.watchReport(
-				new ChildEntitiesAllTime({
-					parentType: itemType,
-					parentId: id
-				})
-			)
-			.pipe(startWith([]))
-	);
-
-	let isInView = $state(false);
-</script>
-
-<div class="entity-history" style="min-height:{($children.length + 1) * 10}px;">
-	<div
-		class="self"
-		use:inview={{}}
-		oninview_enter={() => (isInView = true)}
-		oninview_leave={() => (isInView = false)}
-	>
-		<h2 style="margin-left: {level * 1}rem;">
-			{name}
-			{$children.length}
-		</h2>
-		<div class="events">
-			{#if isInView}
-				{#each eventGroups as group}
-					{#if group.events.length === 1}
-						<TransactionEvent event={group.events[0].eventContainer.event} />
-					{:else}
-						<TransactionEventGroup
-							firstPx={group.firstPx}
-							lastPx={group.lastPx}
-							numEvents={group.events.length}
-						/>
-					{/if}
-				{/each}
-			{/if}
-		</div>
-	</div>
-
-	{#each $children as child (child.id)}
-		<EntityHistory id={child.id} itemType={child.itemType} level={level + 1} />
-	{/each}
-</div>
-
-<style>
-	.self {
-		display: flex;
-		align-items: center;
-		position: relative;
-		margin-bottom: 0.1rem;
-	}
-	.entity-history {
-		position: relative;
-		background-color: rgba(255, 255, 255, 0.05);
-		min-height: 10px;
-	}
-
-	h2 {
-		opacity: 0.5;
-	}
-
-	.events {
-		position: absolute;
-		display: flex;
-		align-items: center;
-		inset: 0;
-	}
-</style>

package/src/lib/components/transactions/TransactionDetails.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { myko as client } from '../../services/svelte-client.svelte.js';
-	import { EventsForTransaction, type ID } from '@myko/core';
-	import { fromISOMemo, FULL_DATE_FORMAT } from '../state/viewstate.svelte.js';
-
-	const { tx }: { tx: ID } = $props();
-	const events = client.watchReport(new EventsForTransaction({ transactionId: tx }));
-</script>
-
-{#if $events}
-	{#each $events as event (event)}
-		<div class="div">
-			<p>{event.itemType}</p>
-			<p>{event.changeType}</p>
-			<p>{fromISOMemo(event.createdAt).diffNow().toHuman()}</p>
-			<p>{fromISOMemo(event.createdAt).toFormat(FULL_DATE_FORMAT)}</p>
-		</div>
-	{/each}
-{/if}
-
-<style>
-	.div {
-		display: flex;
-		gap: 1rem;
-	}
-</style>

package/src/lib/components/transactions/Transactions.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">
-	import { myko as client } from '../../services/svelte-client.svelte.js';
-	import { EntitySnapshotDifference, type ID } from '@myko/core';
-	import { setContext } from 'svelte';
-	import { watchResize } from 'svelte-watch-resize';
-	import { TRANSACTIONS_VIEW_STATE, TransactionsViewState } from '../state/viewstate.svelte';
-	import { windbackState } from '../state/windback.svelte.js';
-	import EntityHistory from './EntityHistory.svelte';
-	import TimeStrip from './TimeStrip.svelte';
-
-	const viewstate = new TransactionsViewState(windbackState);
-
-	setContext(TRANSACTIONS_VIEW_STATE, viewstate);
-
-	let isMouseDown = $state(false);
-
-	const {
-		entrypointId,
-		entrypointItemType
-	}: {
-		entrypointId: ID;
-		entrypointItemType: string;
-	} = $props();
-
-	const onwheel = (e: WheelEvent) => {
-		if (e.ctrlKey || e.metaKey) {
-			e.preventDefault();
-			viewstate.zoom(e.deltaY);
-		}
-
-		if (e.shiftKey) {
-			e.preventDefault();
-			viewstate.pan(e.deltaY);
-		}
-	};
-
-	const onmousemove = (e: MouseEvent) => {
-		viewstate.mouseX = e.clientX;
-	};
-
-	const onkeydown = (e: KeyboardEvent) => {
-		if (e.key === 'z') {
-			viewstate.zoomAllTheWayOut();
-		}
-	};
-
-	const onmousedown = (e: MouseEvent) => {
-		e.stopPropagation();
-		if (e.button === 0) {
-		}
-
-		viewstate.startDragWindback();
-	};
-
-	const onmouseup = (e: MouseEvent) => {
-		e.stopPropagation();
-
-		viewstate.stopDragWindback();
-	};
-
-	const diff = client.watchReport(
-		new EntitySnapshotDifference({
-			parentType: entrypointItemType,
-			parentId: entrypointId
-		})
-	);
-</script>
-
-<svelte:window {onkeydown} {onmousedown} {onmouseup} />
-<div
-	class:windbackCursor={viewstate.isOverWindback}
-	class="transactions-frame extra class"
-	role="presentation"
-	use:watchResize={(e) => {
-		console.log('RESIZE', e.clientWidth);
-		viewstate.width = e.clientWidth;
-	}}
-	{onwheel}
-	{onmousemove}
->
-	<div class="header pad">
-		<TimeStrip></TimeStrip>
-	</div>
-	<div class="scroll pad">
-		<EntityHistory id={entrypointId} itemType={entrypointItemType} />
-	</div>
-</div>
-
-<style>
-	.transactions-frame {
-		height: 100%;
-		min-height: 100%;
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-	}
-
-	.scroll {
-		overflow: scroll;
-		scrollbar-width: none;
-	}
-
-	.header {
-		flex-shrink: 0;
-	}
-
-	.windbackCursor {
-		cursor: ew-resize;
-	}
-</style>