@twick/2d 0.14.21 → 0.15.0

package/src/editor/tree/TreeRoot.tsx

@@ -1,10 +0,0 @@
-import {clsx} from 'clsx';
-import type {JSX} from 'preact';
-import styles from './index.module.scss';
-
-export function TreeRoot({
-  className,
-  ...props
-}: JSX.HTMLAttributes<HTMLDivElement>) {
-  return <div className={clsx(styles.root, className)} {...props} />;
-}

package/src/editor/tree/ViewRoot.tsx

@@ -1,20 +0,0 @@
-import {useSignal, useSignalEffect} from '@preact/signals';
-import {usePluginState} from '../Provider';
-import {NodeElement} from './NodeElement';
-import {TreeRoot} from './TreeRoot';
-
-export function ViewRoot() {
-  const {scene} = usePluginState();
-  const view = useSignal(scene.value?.getView());
-
-  useSignalEffect(() => {
-    view.value = scene.value?.getView();
-    return scene.value?.onReset.subscribe(() => {
-      view.value = scene.value?.getView();
-    });
-  });
-
-  return view.value ? (
-    <TreeRoot>{<NodeElement node={view.value} />}</TreeRoot>
-  ) : null;
-}

package/src/editor/tree/index.module.scss

@@ -1,38 +0,0 @@
-.root {
-  margin-top: -1px;
-  padding: 3px 0 4px;
-  border-top: 2px solid var(--background-color);
-}
-
-.label {
-  --depth: 0;
-
-  padding: 4px 0 4px calc(var(--depth) * 22px + 24px);
-  border-radius: var(--radius);
-  user-select: none;
-  cursor: pointer;
-  display: flex;
-
-  &:hover {
-    background-color: var(--surface-color-hover);
-  }
-
-  &.active {
-    --surface-color-hover: none;
-    background-color: var(--theme-overlay);
-    color: var(--theme);
-  }
-
-  &.parent {
-    padding-left: calc(var(--depth) * 22px);
-  }
-
-  > svg {
-    width: 20px;
-    height: 20px;
-    align-self: center;
-    background-color: var(--background-color);
-    border-radius: var(--radius);
-    margin-right: 8px;
-  }
-}

package/src/editor/tree/index.ts

@@ -1,3 +0,0 @@
-export * from './DetachedRoot';
-export * from './NodeElement';
-export * from './ViewRoot';

package/src/editor/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "references": [{"path": "../lib/tsconfig.build.json"}],
-  "include": ["**/*"]
-}

package/src/editor/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    "paths": {
-      "@twick/2d": ["../lib"]
-    }
-  },
-  "references": [{"path": "../lib/tsconfig.json"}],
-  "include": ["**/*"]
-}

package/src/editor/tsdoc.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
-  "extends": ["../../../../tsdoc.json"]
-}

package/src/editor/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/src/lib/code/CodeCursor.ts

@@ -1,445 +0,0 @@
-import type {SerializedVector2} from '@twick/core';
-import {clampRemap, Color, map, unwrap, Vector2} from '@twick/core';
-import type {Code} from '../components';
-import type {CodeFragment} from './CodeFragment';
-import {parseCodeFragment} from './CodeFragment';
-import type {CodeHighlighter} from './CodeHighlighter';
-import type {CodeMetrics} from './CodeMetrics';
-import type {CodePoint, CodeRange} from './CodeRange';
-import type {CodeScope} from './CodeScope';
-import {isCodeScope} from './CodeScope';
-import {isPointInCodeSelection} from './CodeSelection';
-
-export interface CodeFragmentDrawingInfo {
-  text: string;
-  position: Vector2;
-  characterSize: Vector2;
-  cursor: Vector2;
-  fill: string;
-  time: number;
-  alpha: number;
-}
-
-/**
- * A stateful class for recursively traversing a code scope.
- *
- * @internal
- */
-export class CodeCursor {
-  public cursor = new Vector2();
-  public beforeCursor = new Vector2();
-  public afterCursor = new Vector2();
-  public beforeIndex = 0;
-  public afterIndex = 0;
-  private context = {} as CanvasRenderingContext2D;
-  private monoWidth = 0;
-  private maxWidth = 0;
-  private lineHeight = 0;
-  private fallbackFill = new Color('white');
-  private caches: {before: unknown; after: unknown} | null = null;
-  private highlighter: CodeHighlighter | null = null;
-  private selection: CodeRange[] = [];
-  private selectionProgress: number | null = null;
-  private globalProgress: number[] = [];
-  private fragmentDrawingInfo: CodeFragmentDrawingInfo[] = [];
-  private fontHeight = 0;
-  private verticalOffset = 0;
-
-  public constructor(private readonly node: Code) {}
-
-  /**
-   * Prepare the cursor for the next traversal.
-   *
-   * @param context - The context used to measure and draw the code.
-   */
-  public setupMeasure(context: CanvasRenderingContext2D) {
-    const metrics = context.measureText('X');
-    this.monoWidth = metrics.width;
-    this.fontHeight =
-      metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent;
-    this.verticalOffset = metrics.fontBoundingBoxAscent;
-    this.context = context;
-    this.lineHeight = parseFloat(this.node.styles.lineHeight);
-    this.cursor = new Vector2();
-    this.beforeCursor = new Vector2();
-    this.afterCursor = new Vector2();
-    this.beforeIndex = 0;
-    this.afterIndex = 0;
-    this.maxWidth = 0;
-  }
-
-  public setupDraw(context: CanvasRenderingContext2D) {
-    this.setupMeasure(context);
-    const fill = this.node.fill();
-    this.fallbackFill =
-      fill instanceof Color ? (fill as Color) : new Color('white');
-    this.caches = this.node.highlighterCache();
-    this.highlighter = this.node.highlighter();
-    this.selection = this.node.selection();
-    this.selectionProgress = this.node.selectionProgress();
-    this.fragmentDrawingInfo = [];
-    this.globalProgress = [];
-  }
-
-  /**
-   * Measure the desired size of the code scope.
-   *
-   * @remarks
-   * The result can be retrieved with {@link getSize}.
-   *
-   * @param scope - The code scope to measure.
-   */
-  public measureSize(scope: CodeScope) {
-    const progress = unwrap(scope.progress);
-    for (const wrapped of scope.fragments) {
-      const possibleFragment = unwrap(wrapped);
-      if (isCodeScope(possibleFragment)) {
-        this.measureSize(possibleFragment);
-        continue;
-      }
-      if (Array.isArray(possibleFragment)) {
-        this.measureSize({
-          progress: scope.progress,
-          fragments: possibleFragment,
-        });
-        continue;
-      }
-
-      const fragment = parseCodeFragment(
-        possibleFragment,
-        this.context,
-        this.monoWidth,
-      );
-
-      const beforeMaxWidth = this.calculateMaxWidth(fragment.before);
-      const afterMaxWidth = this.calculateMaxWidth(fragment.after);
-
-      const maxWidth = map(beforeMaxWidth, afterMaxWidth, progress);
-      if (maxWidth > this.maxWidth) {
-        this.maxWidth = maxWidth;
-      }
-
-      const beforeEnd = this.calculateWidth(fragment.before);
-      const afterEnd = this.calculateWidth(fragment.after);
-      this.cursor.x = map(beforeEnd, afterEnd, progress);
-
-      if (this.cursor.y === 0) {
-        this.cursor.y = 1;
-      }
-
-      this.cursor.y += map(
-        fragment.before.newRows,
-        fragment.after.newRows,
-        progress,
-      );
-    }
-  }
-
-  /**
-   * Get the size measured by the cursor.
-   */
-  public getSize() {
-    return {
-      x: this.maxWidth * this.monoWidth,
-      y: this.cursor.y * this.lineHeight + this.verticalOffset,
-    };
-  }
-
-  /**
-   * Get the drawing information created by the cursor.
-   */
-  public getDrawingInfo() {
-    return {
-      fragments: this.fragmentDrawingInfo,
-      verticalOffset: this.verticalOffset,
-      fontHeight: this.fontHeight,
-    };
-  }
-
-  /**
-   * Draw the given code scope.
-   *
-   * @param scope - The code scope to draw.
-   */
-  public drawScope(scope: CodeScope) {
-    const progress = unwrap(scope.progress);
-    for (const wrappedFragment of scope.fragments) {
-      const possibleFragment = unwrap(wrappedFragment);
-      if (isCodeScope(possibleFragment)) {
-        this.drawScope(possibleFragment);
-        continue;
-      }
-      if (Array.isArray(possibleFragment)) {
-        this.drawScope({
-          progress: scope.progress,
-          fragments: possibleFragment,
-        });
-        continue;
-      }
-
-      const fragment = parseCodeFragment(
-        possibleFragment,
-        this.context,
-        this.monoWidth,
-      );
-      const timingOffset = 0.8;
-      let alpha = 1;
-      let offsetY = 0;
-      if (fragment.before.content !== fragment.after.content) {
-        const mirrored = Math.abs(progress - 0.5) * 2;
-        alpha = clampRemap(1, 1 - timingOffset, 1, 0, mirrored);
-
-        const scale = progress < 0.5 ? 4 : -4;
-        offsetY = map(
-          Math.abs(fragment.after.newRows - fragment.before.newRows) / scale,
-          0,
-          mirrored,
-        );
-      }
-
-      this.drawToken(fragment, scope, this.cursor.addY(offsetY), alpha);
-
-      this.beforeCursor.x = this.calculateWidth(
-        fragment.before,
-        this.beforeCursor.x,
-      );
-      this.afterCursor.x = this.calculateWidth(
-        fragment.after,
-        this.afterCursor.x,
-      );
-      this.beforeCursor.y += fragment.before.newRows;
-      this.afterCursor.y += fragment.after.newRows;
-
-      this.beforeIndex += fragment.before.content.length;
-      this.afterIndex += fragment.after.content.length;
-
-      this.cursor.y += map(
-        fragment.before.newRows,
-        fragment.after.newRows,
-        progress,
-      );
-
-      const beforeEnd = this.calculateWidth(fragment.before);
-      const afterEnd = this.calculateWidth(fragment.after);
-      this.cursor.x = map(beforeEnd, afterEnd, progress);
-    }
-  }
-
-  private drawToken(
-    fragment: CodeFragment,
-    scope: CodeScope,
-    offset: SerializedVector2,
-    alpha: number,
-  ) {
-    const progress = unwrap(scope.progress);
-    const currentProgress = this.currentProgress();
-    if (progress > 0) {
-      this.globalProgress.push(progress);
-    }
-
-    const code = progress < 0.5 ? fragment.before : fragment.after;
-
-    let hasOffset = true;
-    let width = 0;
-    let stringLength = 0;
-    let y = 0;
-    for (let i = 0; i < code.content.length; i++) {
-      let color = this.fallbackFill.serialize();
-      let char = code.content.charAt(i);
-      const selection: {before: number | null; after: number | null} = {
-        before: null,
-        after: null,
-      };
-
-      if (char === '\n') {
-        y++;
-        hasOffset = false;
-        width = 0;
-        stringLength = 0;
-        selection.before = null;
-        selection.after = null;
-        continue;
-      }
-
-      const beforeHighlight =
-        this.caches &&
-        this.highlighter?.highlight(this.beforeIndex + i, this.caches.before);
-      const afterHighlight =
-        this.caches &&
-        this.highlighter?.highlight(this.afterIndex + i, this.caches.after);
-
-      const highlight = progress < 0.5 ? beforeHighlight : afterHighlight;
-      if (highlight) {
-        // Handle edge cases where the highlight style changes despite the
-        // content being the same. The code doesn't fade in and out so the color
-        // has to be interpolated to avoid jarring changes.
-        if (
-          fragment.before.content === fragment.after.content &&
-          beforeHighlight?.color !== afterHighlight?.color
-        ) {
-          highlight.color = Color.lerp(
-            beforeHighlight?.color ?? this.fallbackFill,
-            afterHighlight?.color ?? this.fallbackFill,
-            progress,
-          ).serialize();
-        }
-
-        if (highlight.color) {
-          color = highlight.color;
-        }
-
-        let skipAhead = 0;
-        do {
-          if (
-            this.processSelection(
-              selection,
-              skipAhead,
-              hasOffset,
-              stringLength,
-              y,
-            )
-          ) {
-            break;
-          }
-
-          skipAhead++;
-        } while (skipAhead < highlight.skipAhead);
-
-        if (skipAhead > 1) {
-          char = code.content.slice(i, i + skipAhead);
-        }
-
-        i += char.length - 1;
-      } else {
-        this.processSelection(selection, 0, hasOffset, stringLength, y);
-        let skipAhead = 1;
-        while (
-          i < code.content.length - 1 &&
-          code.content.charAt(i + 1) !== '\n'
-        ) {
-          if (
-            this.processSelection(
-              selection,
-              skipAhead,
-              hasOffset,
-              stringLength,
-              y,
-            )
-          ) {
-            break;
-          }
-
-          skipAhead++;
-          char += code.content.charAt(++i);
-        }
-      }
-
-      let time: number;
-      const selectionAfter = selection.after ?? 0;
-      const selectionBefore = selection.before ?? 0;
-      if (fragment.before.content === '') {
-        time = selectionAfter;
-      } else if (fragment.after.content === '') {
-        time = selectionBefore;
-      } else {
-        time = map(
-          selectionBefore,
-          selectionAfter,
-          this.selectionProgress ?? currentProgress,
-        );
-      }
-
-      const measure = this.context.measureText(char);
-      this.fragmentDrawingInfo.push({
-        text: char,
-        position: new Vector2(
-          (hasOffset ? offset.x + width : width) * this.monoWidth,
-          (offset.y + y) * this.lineHeight,
-        ),
-        cursor: new Vector2(
-          hasOffset ? this.beforeCursor.x + stringLength : stringLength,
-          this.beforeCursor.y + y,
-        ),
-        alpha,
-        characterSize: new Vector2(
-          measure.width / char.length,
-          this.fontHeight,
-        ),
-        fill: color,
-        time,
-      });
-
-      stringLength += char.length;
-      width += Math.round(measure.width / this.monoWidth);
-    }
-  }
-
-  private calculateWidth(metrics: CodeMetrics, x = this.cursor.x): number {
-    return metrics.newRows === 0 ? x + metrics.lastWidth : metrics.lastWidth;
-  }
-
-  private calculateMaxWidth(metrics: CodeMetrics, x = this.cursor.x): number {
-    return Math.max(this.maxWidth, metrics.maxWidth, x + metrics.firstWidth);
-  }
-
-  private currentProgress() {
-    if (this.globalProgress.length === 0) {
-      return 0;
-    }
-
-    let sum = 0;
-    for (const progress of this.globalProgress) {
-      sum += progress;
-    }
-
-    return sum / this.globalProgress.length;
-  }
-
-  private processSelection(
-    selection: {before: number | null; after: number | null},
-    skipAhead: number,
-    hasOffset: boolean,
-    stringLength: number,
-    y: number,
-  ): boolean {
-    let shouldBreak = false;
-    let currentSelected = this.isSelected(
-      (hasOffset ? this.beforeCursor.x + stringLength : stringLength) +
-        skipAhead,
-      this.beforeCursor.y + y,
-    );
-    if (selection.before !== null && selection.before !== currentSelected) {
-      shouldBreak = true;
-    } else {
-      selection.before = currentSelected;
-    }
-
-    currentSelected = this.isSelected(
-      (hasOffset ? this.afterCursor.x + stringLength : stringLength) +
-        skipAhead,
-      this.afterCursor.y + y,
-      true,
-    );
-    if (selection.after !== null && selection.after !== currentSelected) {
-      shouldBreak = true;
-    } else {
-      selection.after = currentSelected;
-    }
-
-    return shouldBreak;
-  }
-
-  private isSelected(x: number, y: number, isAfter?: boolean): number {
-    const point: CodePoint = [y, x];
-    const maxSelection = isPointInCodeSelection(point, this.selection) ? 1 : 0;
-    if (this.node.oldSelection === null || this.selectionProgress === null) {
-      return maxSelection;
-    }
-
-    if (isAfter) {
-      return maxSelection;
-    }
-
-    return isPointInCodeSelection(point, this.node.oldSelection) ? 1 : 0;
-  }
-}

package/src/lib/code/CodeDiffer.ts

@@ -1,78 +0,0 @@
-import type {CodeScope, CodeTag} from './CodeScope';
-import {resolveScope} from './CodeScope';
-import type {CodeTokenizer} from './CodeTokenizer';
-import {patienceDiff} from './diff';
-
-/**
- * A function that compares two code snippets and returns a list of
- * {@link CodeTag}s describing a transition between them.
- */
-export type CodeDiffer = (
-  /**
-   * The original code scope.
-   */
-  from: CodeScope,
-  /**
-   * The new code scope.
-   */
-  to: CodeScope,
-  /**
-   * The inherited tokenizer to use.
-   */
-  tokenize: CodeTokenizer,
-) => CodeTag[];
-
-/**
- * Default diffing function utilizing {@link code.patienceDiff}.
- *
- * @param from - The original code scope.
- * @param to - The new code scope.
- * @param tokenize - The inherited tokenizer to use.
- */
-export function defaultDiffer(
-  from: CodeScope,
-  to: CodeScope,
-  tokenize: CodeTokenizer,
-) {
-  const fromString = resolveScope(from, false);
-  const toString = resolveScope(to, true);
-
-  const diff = patienceDiff(tokenize(fromString), tokenize(toString));
-
-  const fragments: CodeTag[] = [];
-  let before = '';
-  let after = '';
-  let lastAdded = false;
-  const flush = () => {
-    if (before !== '' || after !== '') {
-      fragments.push({
-        before,
-        after,
-      });
-      before = '';
-      after = '';
-    }
-  };
-
-  for (const line of diff.lines) {
-    if (line.aIndex === -1) {
-      if (after !== '' && !lastAdded) {
-        flush();
-      }
-      lastAdded = true;
-      after += line.line;
-    } else if (line.bIndex === -1) {
-      if (before !== '' && lastAdded) {
-        flush();
-      }
-      lastAdded = false;
-      before += line.line;
-    } else {
-      flush();
-      fragments.push(line.line);
-    }
-  }
-  flush();
-
-  return fragments;
-}