Allow disabling spacing around TextInput

apps/python-dsl/src/projections/incrementProjection.ts

@@ -1,15 +1,14 @@
 import { arg, block, contextVariable } from "@puredit/parser";
 import type { Projection } from "@puredit/projections/types";
 import { pythonParser } from "./parser";
-import { simpleProjection } from "@puredit/simple-projection";
+import { noSpacing, simpleProjection } from "@puredit/simple-projection";
 
 const var_x = arg("var_x", "identifier");
 export const [pattern, draft] = pythonParser.statementPattern`
 ${var_x} += 1
 `;
 
-// todo: fix unnecessary indent
-export const widget = simpleProjection([var_x, "++"]);
+export const widget = simpleProjection([noSpacing(var_x), "++"]);
 
 // alternative: explicit and long projection definion
 // import { svelteProjection } from "@puredit/projections/svelte";

apps/python-dsl/src/projections/putsProjection.ts

@@ -12,7 +12,7 @@ export const [pattern, draft] = pythonParser.statementPattern`
 print(${anything}, end="")
 `;
 
-export const widget = simpleProjection(["puts ", anything]);
+export const widget = simpleProjection(["puts", anything]);
 
 // alternative projection def: explicit and long projection definion
 // import { svelteProjection } from "@puredit/projections/svelte";

apps/python-dsl/src/projections/timesProjection.ts

@@ -1,7 +1,7 @@
 import { arg, block } from "@puredit/parser";
 import type { Projection } from "@puredit/projections/types";
 import { pythonParser } from "./parser";
-import { simpleProjection } from "@puredit/simple-projection";
+import { noSpacing, simpleProjection } from "@puredit/simple-projection";
 
 const times_var = arg("times_var", "identifier");
 const times_value = arg("times_value", "identifier");
@@ -11,11 +11,10 @@ for ${times_var} in range(${times_value}):
     ${block({})}
 `;
 
-// todo: fix unnecessary indent
 export const widget = simpleProjection([
-  times_value,
+  noSpacing(times_value),
   ".times with ",
-  times_var,
+  noSpacing(times_var),
   ":",
 ]);
 

packages/projections/TextInput.svelte

@@ -17,6 +17,7 @@
   export let className: string | null = null;
   export let placeholder = "text";
   export let focusGroup: FocusGroup | null = null;
+  export let noSpacing: boolean | undefined = undefined;
 
   export let codeToValue = (code: string) => code;
   export let valueToCode = (value: string) => value;
@@ -157,6 +158,7 @@
 
 <label
   data-value={value || placeholder}
+  class:no-spacing={noSpacing}
   on:pointerenter={onPointerEnter}
   on:pointerleave={onPointerLeave}
 >
@@ -217,7 +219,13 @@
     vertical-align: top;
     align-items: center;
     position: relative;
-    margin: 0px 0px;
+    margin: 0 5px;
+
+    &.no-spacing {
+      // The negative margin compensates the inner padding
+      // while still preserving the spacing towards the focus outline.
+      margin: 0 -4px;
+    }
 
     &::after {
       content: attr(data-value);
@@ -247,7 +255,7 @@
   label::after,
   input {
     width: auto;
-    min-width: 0em;
+    min-width: 1em;
     grid-area: 1 / 2;
     font: inherit;
     margin: 0;
@@ -257,7 +265,7 @@
     outline: none;
 
     display: inline-block;
-    padding: 0px 0px;
+    padding: 2px 4px;
     border: 1px solid transparent;
     border-radius: 3px;
   }

packages/simple-projection/index.ts

@@ -10,8 +10,12 @@ import TextInput from "@puredit/projections/TextInput.svelte";
 import { isString } from "@puredit/utils";
 import type { SvelteComponent } from "@puredit/projections/svelte";
 
+interface SimpleProjectionArg extends TemplateArg {
+  noSpacing?: boolean;
+}
+
 export const simpleProjection = (
-  template: Array<string | TemplateArg | TemplateArg[]>
+  template: Array<string | SimpleProjectionArg | SimpleProjectionArg[]>
 ) =>
   class extends ProjectionWidget implements FocusGroupHandler {
     focusGroup!: FocusGroup;
@@ -46,6 +50,7 @@ export const simpleProjection = (
               state,
               view: null,
               focusGroup: this.focusGroup,
+              noSpacing: args[0].noSpacing,
             },
           });
           this.inputs.push([args, component]);
@@ -137,3 +142,8 @@ export const simpleProjection = (
       });
     }
   };
+
+export const noSpacing = (arg: SimpleProjectionArg): SimpleProjectionArg => ({
+  ...arg,
+  noSpacing: true,
+});