Something went wrong. Try again.
[PRE-ALPHA] an open source web-based 2D/3D graphing calculator cartesium.org
Something went wrong. Try again.
Svelte
at mathquill
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162<script lang="ts"> import type { Expression2d, ExpressionRole2d } from '#lib/engine/types.js';
let { title, expressions, expressionRoles = {}, resolvedExpressionColors = {} }: { title: string; expressions: Expression2d[]; expressionRoles?: Record<string, ExpressionRole2d>; resolvedExpressionColors?: Record<string, string>; } = $props();</script>
<aside aria-label="Graph expressions"> <header> <h1>{title || 'Untitled graph'}</h1> </header> <ol> {#each expressions as expression, index} <li class:disabled={!expression.enabled}> <span class="number" class:colored={Boolean( expressionRoles[expression.id] === 'plot' && resolvedExpressionColors[expression.id] )} style:--expression-color={resolvedExpressionColors[expression.id]} > {index + 1} </span> <code>{expression.source || 'Empty expression'}</code> {#if !expression.enabled}<span class="status">Hidden</span>{/if} </li> {/each} </ol> <footer>Open in Cartesium to edit these expressions.</footer></aside>
<style> aside { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding-top: 58px; border-right: 1px solid #cbd5e1; background: #f8fafc; color: #0f172a; overflow: hidden; }
header { padding: 12px 14px; border-bottom: 1px solid #cbd5e1; }
h1 { margin: 0; font-size: 17px; line-height: 1.3; }
ol { min-height: 0; margin: 0; padding: 10px; list-style: none; overflow: auto; }
li { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: start; gap: 8px; margin-bottom: 8px; padding: 10px; border: 1px solid #dbe3ed; border-radius: 7px; background: white; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
li.disabled { opacity: 0.55; }
.number { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 999px; background: var(--expression-color, #e2e8f0); color: var(--expression-color, #475569); font: 700 11px/1 system-ui, sans-serif; }
.number.colored { color: white; }
code { padding-top: 2px; color: #1e293b; font: 500 14px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.status { padding: 3px 5px; border-radius: 4px; background: #e2e8f0; color: #64748b; font-size: 10px; font-weight: 700; text-transform: uppercase; }
footer { margin-top: auto; padding: 10px 14px; border-top: 1px solid #cbd5e1; color: #64748b; font-size: 11px; }
@media (max-width: 760px) { aside { padding-top: 0; border-top: 1px solid #cbd5e1; border-right: 0; }
header { padding: 9px 12px; }
footer { display: none; }
h1 { font-size: 14px; }
ol { padding: 7px; }
li { margin-bottom: 6px; padding: 7px; } }</style>