Something went wrong. Try again.
[PRE-ALPHA] an open source web-based 2D/3D graphing calculator cartesium.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<script lang="ts"> import type { Expression2d, Expression3d } from '#lib/engine/types.js'; import { formatBatchText, parseBatchText } from '#lib/document/batch-text.js';
let { expressions, onapply }: { expressions: (Expression2d | Expression3d)[]; onapply: (sources: string[]) => void; } = $props();
let draft = $state(''); let error = $state(''); let lastApplied = ''; let initialized = false; let editor = $state<HTMLTextAreaElement>(); let formattingError = $state('');
$effect(() => { let current: string;
try { current = formatBatchText(expressions); formattingError = ''; } catch (cause) { formattingError = cause instanceof Error ? cause.message : 'Some expressions cannot be shown in TXT yet.';
return; }
if (!initialized) { draft = current; lastApplied = current; initialized = true;
return; }
if (current !== lastApplied) { draft = current; lastApplied = current; error = ''; } });
function updateText(event: Event) { if (formattingError) return; draft = (event.currentTarget as HTMLTextAreaElement).value; const parsed = parseBatchText(draft); error = parsed.error ?? '';
if (parsed.error) return; lastApplied = parsed.sources.join(';\n\n'); onapply(parsed.sources); }
export function canLeave(): boolean { // A formatting failure means the row cannot be represented here; allow the // user to return to the source row and recover it. Parse errors in text // still keep the batch draft open so they are not silently discarded. if (!error) return true; editor?.focus();
return false; }</script>
<div class="batch-text"> <p> TXT edits every expression in Cartesium's ASCII language. Separate definitions with semicolons; newlines can continue an expression. </p> {#if !formattingError} <textarea bind:this={editor} bind:value={draft} oninput={updateText} aria-label="All graph expressions" aria-invalid={error ? 'true' : undefined} spellcheck="false" ></textarea> {:else} <p class="error" role="alert">{formattingError}</p> {/if} {#if error}<p class="error" role="alert">{error}</p>{/if}</div>
<style> .batch-text { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 10px; gap: 8px; } p { margin: 0; color: #475569; font-size: 12px; line-height: 1.45; } textarea { flex: 1; min-height: 180px; width: 100%; resize: none; box-sizing: border-box; padding: 10px; border: 1px solid #94a3b8; border-radius: 5px; background: white; color: #0f172a; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; } textarea:focus { outline: 2px solid #3b82f6; outline-offset: 1px; } textarea[aria-invalid='true'] { border-color: #dc2626; } .error { color: #b91c1c; }</style>