Fixed #59 Collisions

package.json

@@ -50,6 +50,7 @@
         "@sveltejs/kit": "^1",
         "@testing-library/jest-dom": "^5",
         "@testing-library/svelte": "^4",
+        "@types/matter-js": "^0.19.0",
         "@types/uuid": "^9",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
@@ -83,6 +84,7 @@
         "firebase": "^9",
         "firebase-functions": "^4.4.1",
         "graphemer": "^1.4.0",
+        "matter-js": "^0.19.0",
         "pitchy": "^4.0.7",
         "recoverable-random": "^1.0.3",
         "uuid": "^9"

src/components/concepts/ExampleUI.svelte

@@ -10,7 +10,7 @@
     import type Value from '../../values/Value';
     import CodeView from './CodeView.svelte';
     import { DB, locales } from '../../db/Database';
-    import Stage, { toStage } from '../../output/Stage';
+    import Stage, { NameGenerator, toStage } from '../../output/Stage';
     import OutputView from '../output/OutputView.svelte';
 
     export let example: Example;
@@ -44,7 +44,9 @@
     function update() {
         if (evaluator) {
             value = evaluator.getLatestSourceValue(project.main);
-            stage = value ? toStage(project, value) : undefined;
+            stage = value
+                ? toStage(project, value, new NameGenerator())
+                : undefined;
         }
     }
 

src/components/output/GroupView.svelte

@@ -15,16 +15,18 @@
     import Group from '@output/Group';
     import Evaluate from '@nodes/Evaluate';
     import { getSelectedOutput } from '../project/Contexts';
-    import type { Shape } from '../../output/Shapes';
     import type Stage from '../../output/Stage';
     import { locale, locales } from '../../db/Database';
+    import type { Form } from '../../output/Form';
+    import Shape from '../../output/Shape';
+    import ShapeView from './ShapeView.svelte';
 
     export let group: Group | Stage;
     export let place: Place;
     export let focus: Place;
     export let viewport: { width: number; height: number } | undefined =
         undefined;
-    export let clip: Shape | undefined = undefined;
+    export let clip: Form | undefined = undefined;
     export let interactive: boolean;
     export let parentAscent: number;
     export let context: RenderContext;
@@ -108,6 +110,17 @@
                 {editing}
                 {still}
             />
+        {:else if child instanceof Shape}
+            <ShapeView
+                shape={child}
+                place={childPlace}
+                focus={offsetFocus}
+                {interactive}
+                parentAscent={root ? 0 : layout.height}
+                {context}
+                {editing}
+                {still}
+            />
         {:else}
             <svelte:self
                 group={child}
@@ -125,10 +138,11 @@
         <svg
             class="frame"
             role="presentation"
-            width={clip.getWidth()}
-            height={clip.getHeight()}
+            width={clip.getWidth() * PX_PER_METER}
+            height={clip.getHeight() * PX_PER_METER}
             xmlns="http://www.w3.org/2000/svg"
-            style="transform: translate({clip.getLeft()}px, {clip.getTop()}px)"
+            style="transform: translate({clip.getLeft() *
+                PX_PER_METER}px, {-clip.getTop() * PX_PER_METER}px)"
         >
             <path class="border" d={clip.toSVGPath()} />
         </svg>

src/components/output/OutputView.svelte

@@ -95,11 +95,17 @@
     let startGesturePlace: Place | undefined = undefined;
 
     $: exception = value instanceof ExceptionValue ? value : undefined;
+
+    /** Everyt ime the value changes, try to parse a Stage from it. */
     $: stageValue = value === undefined ? undefined : toStage(project, value);
+
+    /** Keep track of whether the creator is typing, so we can blur output until the next change. */
     $: typing =
         !mini &&
         $evaluation?.playing === true &&
         $keyboardEditIdle === IdleKind.Typing;
+
+    /** Keep a background color up to date. */
     $: background =
         value instanceof ExceptionValue
             ? 'var(--wordplay-error)'
@@ -581,7 +587,7 @@
                         // Scale down the mouse delta and offset by the drag starting point.
                         stage.setFocus(
                             renderedDeltaX / scale + drag.startPlace.x,
-                            -renderedDeltaY / scale + drag.startPlace.y,
+                            renderedDeltaY / scale + drag.startPlace.y,
                             drag.startPlace.z
                         );
                         event.stopPropagation();

src/components/output/ShapeView.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type Place from '@output/Place';
+    import {
+        getColorCSS,
+        getFaceCSS as getFaceCSS,
+        getSizeCSS as getSizeCSS,
+        getOpacityCSS,
+        toOutputTransform,
+        PX_PER_METER,
+    } from '@output/outputToCSS';
+    import type RenderContext from '@output/RenderContext';
+    import { locale, locales } from '../../db/Database';
+    import type Shape from '../../output/Shape';
+    import { Rectangle } from '../../output/Form';
+
+    export let shape: Shape;
+    export let place: Place;
+    export let focus: Place;
+    export let interactive: boolean;
+    export let parentAscent: number;
+    export let context: RenderContext;
+    export let editing: boolean;
+    export let still: boolean;
+
+    // Visible if z is ahead of focus and font size is greater than 0.
+    $: visible = place.z > focus.z;
+
+    $: selectable = shape.selectable;
+
+    $: width = shape.form.getWidth() * PX_PER_METER;
+    $: height = shape.form.getHeight() * PX_PER_METER;
+</script>
+
+{#if visible}
+    <div
+        role={selectable ? 'button' : 'presentation'}
+        aria-disabled={!selectable}
+        aria-label={still ? shape.getDescription($locales) : null}
+        aria-roledescription={!selectable ? $locale.term.phrase : null}
+        class="output shape {shape.form instanceof Rectangle
+            ? 'rectangle'
+            : ''}"
+        tabIndex={interactive && (selectable || editing) ? 0 : null}
+        data-id={shape.getHTMLID()}
+        data-node-id={shape.value.creator.id}
+        data-name={shape.getName()}
+        data-selectable={selectable}
+        style:font-family={getFaceCSS(context.face)}
+        style:font-size={getSizeCSS(context.size)}
+        style:border-color={shape.getDefaultPose()?.color?.toCSS()}
+        style:background={shape.background?.toCSS() ?? null}
+        style:color={getColorCSS(shape.getFirstRestPose(), shape.pose)}
+        style:opacity={getOpacityCSS(shape.getFirstRestPose(), shape.pose)}
+        style:width="{width}px"
+        style:height="{height}px"
+        style:transform={toOutputTransform(
+            shape.getFirstRestPose(),
+            shape.pose,
+            place,
+            focus,
+            parentAscent,
+            {
+                width,
+                height,
+                ascent: height,
+                descent: 0,
+            }
+        )}
+    />
+{/if}
+
+<style>
+    .shape {
+        position: absolute;
+        left: 0;
+        top: 0;
+        /* This disables translation around the center; we want to translate around the focus.*/
+        transform-origin: 0 0;
+    }
+
+    .shape.rectangle {
+        background: var(--wordplay-inactive-color);
+        border-radius: calc(2 * var(--wordplay-border-radius));
+        border-width: calc(2 * var(--wordplay-border-width));
+        border-style: solid;
+        border-color: transparent;
+    }
+</style>

src/components/output/StageView.svelte

@@ -34,7 +34,7 @@
         getEvaluation,
     } from '../project/Contexts';
     import type Evaluator from '@runtime/Evaluator';
-    import type TypeOutput from '../../output/TypeOutput';
+    import type Output from '../../output/Output';
     import { animationFactor, locale, locales } from '../../db/Database';
     import {
         describeEnteredOutput,
@@ -91,10 +91,10 @@
     }
 
     let exiting: OutputInfoSet = new Map();
-    let entered: Map<string, TypeOutput> = new Map();
-    let present: Map<string, TypeOutput> = new Map();
+    let entered: Map<string, Output> = new Map();
+    let present: Map<string, Output> = new Map();
     let moved: Moved = new Map();
-    let previouslyPresent: Map<string, TypeOutput> | undefined = undefined;
+    let previouslyPresent: Map<string, Output> | undefined = undefined;
 
     const announcer = getAnnounce();
 
@@ -127,7 +127,9 @@
     /** A stage to manage entries, exits, animations. A new one each time the for each project. */
     let scene: Scene;
     $: {
+        // Previous scene? Stop it.
         if (scene !== undefined) scene.stop();
+        // Make a new one.
         scene = new Scene(
             evaluator,
             // When output exits, remove it from the map and triggering a render.
@@ -154,7 +156,7 @@
     $: editableStore.set(editable);
     setContext('project', project);
 
-    /** Whenever the verse, languages, fonts, or rendered focus changes, update the rendered scene accordingly. */
+    /** Whenever the stage, languages, fonts, or rendered focus changes, update the rendered scene accordingly. */
     $: {
         const results = scene.update(
             stage,
@@ -256,7 +258,7 @@
         fitFocus = createPlace(
             evaluator,
             -(contentBounds.left + contentBounds.width / 2),
-            -contentBounds.top + contentBounds.height / 2,
+            contentBounds.top - contentBounds.height / 2,
             z
         );
         // If we're currently fitting to content, just make the adjusted focus the same in case the setting is inactive.
@@ -458,4 +460,10 @@
         background-color: var(--grid-color);
         opacity: 0.4;
     }
+
+    .rectangle-barrier {
+        position: absolute;
+        background: var(--wordplay-inactive-color);
+        border-radius: calc(var(--wordplay-border-radius) * 2);
+    }
 </style>

src/components/palette/ContentEditor.svelte

@@ -32,6 +32,10 @@
                     value.is(
                         project.shares.output.Group,
                         project.getNodeContext(value)
+                    ) ||
+                    value.is(
+                        project.shares.output.Shape,
+                        project.getNodeContext(value)
                     ))
         );
 
@@ -92,7 +96,7 @@
                               project,
                               list,
                               list?.values.length ?? 1 - 1,
-                              true
+                              'phrase'
                           )
                         : undefined}
                 >+{project.shares.output.Phrase.getNames()[0]}</Button
@@ -107,10 +111,25 @@
                               project,
                               list,
                               list?.values.length ?? 1 - 1,
-                              false
+                              'group'
                           )
                         : undefined}
                 >+{project.shares.output.Group.getNames()[0]}</Button
+            >
+            <Button
+                tip={$locale.ui.palette.button.addShape}
+                active={editable}
+                action={() =>
+                    list
+                        ? addContent(
+                              DB,
+                              project,
+                              list,
+                              list?.values.length ?? 1 - 1,
+                              'shape'
+                          )
+                        : undefined}
+                >+{project.shares.output.Shape.getNames()[0]}</Button
             ></div
         >
     {:else}