Skip to content

New mixer page (unifies page stitches and droste) - #281

Draft
jo-pol wants to merge 244 commits into
d-bl:masterfrom
jo-pol:hybryd
Draft

New mixer page (unifies page stitches and droste)#281
jo-pol wants to merge 244 commits into
d-bl:masterfrom
jo-pol:hybryd

Conversation

@jo-pol

@jo-pol jo-pol commented May 6, 2026

Copy link
Copy Markdown
Collaborator

Fixes issue #259

Description / purpose of the changes

Notify

@d-bl/gf

@jo-pol jo-pol mentioned this pull request May 31, 2026
4 tasks

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new “hybrid” page generator to unify the functionality of the existing stitches, droste, and a new drosteMixer page variant (per issue #259), while migrating the site pages toward the Jekyll layout/front-matter model and removing older standalone HTML/CSS/UI implementations.

Changes:

  • Add docs/js/hybrid.js and new Jekyll pages (docs/stitches.md, docs/droste.md, docs/drosteMixer.md) to generate the new unified UI using panels/galleries.
  • Refactor/adjust supporting JS/CSS (e.g., nudgePairs.js, stitch-gallery.js, docs/assets/css/hybrid.css) and update test-doc pages.
  • Remove legacy standalone pages/assets (old stitches.html, droste.html, related JS/CSS and API demonstrators) and add a GitHub Action workflow to generate/upload JSDoc.

Reviewed changes

Copilot reviewed 31 out of 38 changed files in this pull request and generated 12 comments.

Show a summary per file
File Description
test-docs/tile-gallery.html Loads hybrid.js in the tile gallery test page and adds related CSS tweaks.
test-docs/hybrid.html Adds a test harness page for the new hybrid UI loader.
src/main/scala/dibl/proto/TilesConfig.scala Changes default patch sizing behavior (no longer auto-clamps to tile size).
docs/tiles.md Minor front-matter title capitalization update.
docs/stitches.md New Jekyll page for stitches using hybrid.js (replaces legacy HTML page).
docs/stitches.html Removes legacy standalone stitches HTML page.
docs/random-stitches/index2.md Adds a new Jekyll page for the stitch generator UI.
docs/mix4snow/mix.js Removes forced focus after flip actions.
docs/js/stitches.js Removes legacy stitches page script (superseded by hybrid.js).
docs/js/stitch-gallery.js Adjusts stitch gallery API for reuse across pages.
docs/js/nudgePairs.js Improves documentation and adds diagram-type-specific nudge distance.
docs/js/hybrid.js Adds the new unified page generator / mixer implementation.
docs/js/droste.js Removes legacy droste page script (superseded by hybrid.js).
docs/drosteMixer.md New Jekyll page for the new mixer UI (two droste steps).
docs/droste.md New Jekyll page for droste using hybrid.js (replaces legacy HTML page).
docs/droste.html Removes legacy standalone droste HTML page.
docs/css/tooltips.css Removes legacy tooltip styling (no longer used by removed pages).
docs/css/tiles.css Removes legacy tiles page styling (no longer used by removed pages).
docs/css/stitches.css Removes legacy stitches/droste styling (no longer used by removed pages).
docs/css/print.css Removes legacy print stylesheet.
docs/assets/css/hybrid.css Adds styling for the new hybrid/panel-based UI, including print rules.
docs/API/thread.html Removes legacy thread API demonstrator HTML page.
docs/API/panels.md Updates panels API docs/examples to match newer usage patterns.
docs/API/pair.html Removes legacy pair API demonstrator HTML page.
docs/API/index.md Updates API index structure and adds a “work in progress/widgets” section.
docs/_layouts/default.html Updates asset loading (repo-name-based paths) and adds page-scoped css/js includes.
docs/_includes/Sidebar-stitches.md Adds a stitches-specific sidebar include for the new Jekyll pages.
docs/_includes/Sidebar-droste.md Adds a droste-specific sidebar include for the new Jekyll pages.
docs/_includes/downloadTemplate.html Removes legacy download template include.
docs/_includes/download.html Removes legacy download include.
.github/workflows/jsdoc.yml Adds a workflow to generate JSDoc and publish a merged PDF artifact/release asset.
Suppressed comments (2)

docs/js/hybrid.js:179

  • drosteOnBasicStitch.getHtmlString() also builds a malformed oninput handler (unterminated template literal / mismatched quotes), which will throw when the page is parsed and makes the field unusable.
            getHtmlString() {
                const other = `document.getElementById('${GF_hybrid.tweak.basicStitch.id}`;
                return `
            <label>Droste applied to basic stitch:
                <input type="text" id="${this.id}"

docs/js/hybrid.js:213

  • Same selection-range issue as the basic stitch input: subtracting 1 from selectionStart/selectionEnd can produce -1 and cause setSelectionRange to throw when an invalid character is entered at the start.
                    const pos1 = drosteOnBasicEl.selectionStart - 1;
                    const pos2 = drosteOnBasicEl.selectionEnd - 1;
                    drosteOnBasicEl.setSelectionRange(pos1, pos2);
                    GF_hybrid.toast.show(this.msg);

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
<link rel="stylesheet" href="{{ '/{{ site.github.repository_name }}/assets/css/print.css' | relative_url }}" media="print" type="text/css">
<link rel="stylesheet" href="{{ /{{ site.github.repository_name }}/assets/css/print.css }}" media="print" type="text/css">
Comment thread docs/js/hybrid.js
Comment on lines +127 to +137
getHtmlString() {
const other = `document.getElementById('${GF_hybrid.tweak.drosteOnBasicStitch.id}`;
return `
<label>Basic stitch:
<span id="colorCode"></span>
<input type="text" id="${this.id}"
value="${GF_hybrid.tweak.basicStitch.lastValid}" placeholder="empty=random; type ? for more info"
oninput="GF_hybrid.tweak.basicStitch.fixInput(this,${other}'))"
/>
</label>`
},
Comment thread docs/js/hybrid.js
<p>Flip:
<button onclick="GF_hybrid.tweak.flip.apply('b2d')">&harr;</button>
<button onclick="GF_hybrid.tweak.flip.apply('b2p')">&varr;</button>
<button onclick="GF_hybrid.tweak.flip.apply('b2d');GF_hybrid.recipes.flip.apply('b2p')">both</button>
Comment thread docs/js/hybrid.js
Comment on lines +154 to +156
const pos1 = basicStitchEl.selectionStart - 1;
const pos2 = basicStitchEl.selectionEnd - 1;
basicStitchEl.setSelectionRange(pos1, pos2);
Comment thread docs/js/hybrid.js
Comment on lines +394 to +396
} else if( changedEl.rangeOverflow ){
GF_hybrid.toast.show("Large dense swatches cause slow diagrams and may choke browsers.");
}
<input type="number" name="maxTwistsBetweenStitches" id="maxTwistsBetweenStitches" min="1" max="5" value="2" onchange="genVal(this)" >&nbsp;
**The maximal number of twists between two stitches**
Minimal 1, maximal 5.
The generated stitch can have 0 twists at the front and at the back, e.g. "ctc".</td>
Comment thread docs/API/index.md
* [Download SVG](#download-svg)
* [Stitch gallery](stitch-gallery)

GroundForge is a library to generate tread diagrams from pair diagrams for bobbin lace.
Comment thread docs/API/index.md
Some new scripts are started to share code between the user interfaces.

* [Stitch gallery](stitch-gallery) shares code between _nets_, _stitches_ and _droste_.
* [Panels](panels) is started to be resued on several existing pages before developing new pages.
Comment thread docs/API/index.md
Comment on lines +47 to +49
This variant wass inspired when writing
[snow with two droste steps](/GroundForge-help/snow-mix/droste),
it connects the 3/6 pair snowflakes in an [asymmetric](//GroundForge-help/snow-mix/droste/#spiderysnowyasym-connections/) way.
Comment thread docs/js/stitch-gallery.js
Comment on lines +46 to +48
loadStitchExamples(gallryID = "#gallery") {
for (let stitch of GF_stitches.stitches) {
document.querySelector("#gallery").innerHTML += `
document.querySelector(gallryID).innerHTML += `
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants