bits

guhitkudlit2/site/authoring/index.js

@@ -125,6 +125,11 @@ export function Authoring() {
       }
       .authoringTools {
         grid-area: tools;
+        display: flex;
+        flex-direction: column;
+      }
+      .authoringToolsScroll {
+        overflow-y: auto;
       }
     </style>
     <div class="authoring authoringLayout">
@@ -135,7 +140,9 @@ export function Authoring() {
         <${Glyphed} />
       </main>
       <aside class="authoringTools">
-        <${Toolbar} />
+        <div class="authoringToolsScroll">
+          <${Toolbar} />
+        </div>
       </aside>
     </div>
   `;

guhitkudlit2/site/authoring/toolbar.js

@@ -270,6 +270,17 @@ export function Toolbar({
         )}
         value=${trajectoryParams.lookaheadTime}
       />
+      <${Input}
+        type="range"
+        min="1"
+        max="4"
+        step="1"
+        onChange=${action(
+          (event) =>
+            (trajectoryParams.iterations = Number(event.currentTarget.value))
+        )}
+        value=${trajectoryParams.iterations}
+      />
     </div>
   `;
 }

guhitkudlit2/site/calligraphy/generate-path.js

@@ -15,6 +15,7 @@
  *  velErrorWeight: number,
  *  accelErrorWeight: number,
  *  lookaheadTime: number,
+ *  iterations: number,
  * }} TrajectoryParams
  */
 
@@ -24,6 +25,7 @@ export const defaultTrajectoryParams = Object.freeze({
   velErrorWeight: 0.9,
   accelErrorWeight: 0.9,
   lookaheadTime: 30.0,
+  iterations: 1,
 });
 
 /**
@@ -96,7 +98,7 @@ function* generateStroke(sequence, params) {
 function optimizeTrajectory(pen, nodes, nodeTimes, params) {
   const tempNode = {};
 
-  for (let i = 0; i < 1; i++) {
+  for (let i = 0; i < Math.min(params.iterations, 10); i++) {
     let jerkX = 0;
     let jerkY = 0;
     let totalWeight = 0;

guhitkudlit2/site/components/form.js

@@ -16,6 +16,17 @@ export function Input({ class: className, tag = "input", ...props }) {
         padding: var(--size-xs);
         box-sizing: border-box;
       }
+      .formInput[type="range"] {
+        border: none;
+        accent-color: var(--color-orange);
+        background: linear-gradient(
+          to bottom,
+          transparent calc(50% - 1px),
+          var(--color-fg-secondary) calc(50% - 1px),
+          var(--color-fg-secondary) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        );
+      }
       .formInput::placeholder {
         opacity: var(--opacity-placeholder);
       }

guhitkudlit2/site/global.css

@@ -31,6 +31,7 @@ body {
   font-size: var(--font-size-m);
   background: var(--color-bg);
   color: var(--color-fg);
+  accent-color: var(--color-orange);
 }
 
 * {