Skip to content

change(developer): move touch layout editor to typescript #16520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcdurdin merged 8 commits into from
Sep 24, 2026
+8,622 −3,484
Merged

change(developer): move touch layout editor to typescript #16520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31999ce
change(developer): convert layout editor to esmodules and tsc build
mcdurdin Sep 3, 2026
173e2ec
change(developer): rename touch layout editor .js to .ts
mcdurdin Sep 3, 2026
c1abf5f
change(developer): move touch layout editor to typescript
mcdurdin Sep 3, 2026
d86b2b5
chore(developer): move jquery and jqueryui types into source tree
mcdurdin Sep 5, 2026
98fee32
change(developer): refactor constants into separate object in touch l…
mcdurdin Sep 7, 2026
099d039
fix(developer): address crashes in touch layout editor
mcdurdin Sep 16, 2026
641fe66
Merge branch 'change/developer/touch-layout-reorganize-files' into ch…
mcdurdin Sep 21, 2026
d7e231a
chore(developer): Merge branch 'change/developer/touch-layout-reorgan…
mcdurdin Sep 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions developer/src/tike/build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ builder_describe "Build Keyman Developer IDE" \
@/common/include \
@/core:x86 \
@/common/windows/delphi \
:project :touch-layout-editor \
clean configure build test publish install edit

builder_parse "$@"
Expand All @@ -30,7 +31,6 @@ function do_configure() {

mkdir -p "$DEVELOPER_PROGRAM"
cp "$KEYMAN_ROOT/common/schemas/kps/kps.xsd" "$DEVELOPER_PROGRAM"
cp "$KEYMAN_ROOT/common/resources/fonts/keymanweb-osk.ttf" "$DEVELOPER_ROOT/src/tike/xml/layoutbuilder/src/assets/fonts/keymanweb-osk.ttf"
run_in_vs_env rc icons.rc
}

Expand Down Expand Up @@ -58,11 +58,27 @@ function do_monaco_copy() {
KEYMANCORE_DLL=keymancore-2.dll
KEYMANCORE_PDB=keymancore-2.pdb

function do_build_touch_layout_editor() {
# TODO: this could be a configure step but leaving it here while changes are in flux

@jahorton jahorton Sep 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I assume there is a plan to handle these TODOs in a separate PR, given they're still in the incoming changeset?

cp "$KEYMAN_ROOT/common/resources/fonts/keymanweb-osk.ttf" "$DEVELOPER_ROOT/src/tike/xml/layoutbuilder/src/assets/fonts/keymanweb-osk.ttf"
# TODO: do_configure_touch_layout_editor
rm -rf xml/layoutbuilder/build/assets/
rm -rf xml/layoutbuilder/build/ext/
mkdir -p xml/layoutbuilder/build/assets/
mkdir -p xml/layoutbuilder/build/ext/
cp -R xml/layoutbuilder/src/assets/* xml/layoutbuilder/build/assets/
cp -R xml/layoutbuilder/src/ext/* xml/layoutbuilder/build/ext/
tsc --build xml/layoutbuilder
}

function do_build() {
create-developer-output-folders
build_version.res
build_manifest.res

# todo: make this an internal dependency
do_build_touch_layout_editor
Comment on lines +79 to +80

@jahorton jahorton Sep 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

TODO:


rm -rf "$DEVELOPER_PROGRAM/xml"
mkdir -p "$DEVELOPER_PROGRAM/xml"
cp -R "$DEVELOPER_ROOT/src/tike/xml/"* "$DEVELOPER_PROGRAM/xml/"
Expand Down Expand Up @@ -104,13 +120,14 @@ function do_install() {
cp "$DEVELOPER_PROGRAM/$KEYMANCORE_DLL" "$INSTALLPATH_KEYMANDEVELOPER/$KEYMANCORE_DLL"
}

builder_run_action clean:project clean_windows_project_files
builder_run_action configure:project do_configure
builder_run_action build:project do_build
# builder_run_action test:project do_test
builder_run_action publish:project do_publish
builder_run_action install:project do_install
builder_run_action edit:project start tike.dproj
builder_run_action clean:project clean_windows_project_files
builder_run_action configure:project do_configure
builder_run_action build:project do_build
builder_run_action build:touch-layout-editor do_build_touch_layout_editor
# builder_run_action test:project do_test
builder_run_action publish:project do_publish
builder_run_action install:project do_install
builder_run_action edit:project start tike.dproj

# Note: generating monaco installer:
# @echo *******************************************************************************************
Expand Down
12 changes: 9 additions & 3 deletions developer/src/tike/http/Keyman.Developer.System.HttpServer.AppSource.pas
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,8 @@ procedure TAppSourceHttpResponder.ProcessRequest(AContext: TIdContext;
Filename := CrackUTF8ZeroExtendedString(ARequestInfo.CommandType, ARequestInfo.Params.Values['Filename']);
RespondTouchEditorState(Filename, AContext, ARequestInfo, AResponseInfo);
end
else if ARequestInfo.Document.StartsWith('/app/source/toucheditor/lib/') then
else if ARequestInfo.Document.StartsWith('/app/source/toucheditor/lib/') or
ARequestInfo.Document.StartsWith('/app/source/toucheditor/src/') then
begin
RespondTouchEditorLib(AContext, ARequestInfo, AResponseInfo);
end
Expand Down Expand Up @@ -208,11 +209,16 @@ procedure TAppSourceHttpResponder.RespondTouchEditorLib(
doc: string;
begin
doc := ARequestInfo.Document;
if doc.StartsWith('/app/source/toucheditor/lib/') and (Pos('..', doc) = 0) then
if doc.StartsWith('/app/source/toucheditor/src/') and (Pos('..', doc) = 0) then
begin
Delete(doc, 1, Length('/app/source/toucheditor/lib/'));
Delete(doc, 1, Length('/app/source/toucheditor/src/'));
RespondFile(GetLayoutBuilderPath + 'src/' + doc, AContext, ARequestInfo, AResponseInfo);
end
else if doc.StartsWith('/app/source/toucheditor/lib/') and (Pos('..', doc) = 0) then
begin
Delete(doc, 1, Length('/app/source/toucheditor/lib/'));
RespondFile(GetLayoutBuilderPath + 'build/' + doc, AContext, ARequestInfo, AResponseInfo);
end
Comment on lines 209 to +221

@jahorton jahorton Sep 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Seems a touch WET, but I do see the distinction between src/ and build/ for the RespondFile statements.

Furthermore, it appears that the lib entries refer to the built versions of the TS files? Basically, anything with a lib path redirects to the TS build output?

The new src entries thus refer to the original, foundational TS source, then?

@mcdurdin mcdurdin Sep 16, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Yes, that's correct. Both src/ and build/ folders are available in the distribution of the editor. I didn't want to change lib/ internally, hence the rearrangement here from lib -> src to src -> src + lib -> build.

WET because it's not worth DRYing out two blocks like this -- very little gain!

else
Respond404(AContext, ARequestInfo, AResponseInfo)
end;
Expand Down
1 change: 1 addition & 0 deletions developer/src/tike/xml/layoutbuilder/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Copied from configure
src/assets/fonts/keymanweb-osk.ttf
build/
29 changes: 16 additions & 13 deletions developer/src/tike/xml/layoutbuilder/builder.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,28 @@
<script src="/app/lib/sentry/init.js"><xsl:text> </xsl:text></script>
<title>On Screen Keyboard Builder</title>
<link rel="stylesheet" type='text/css'><xsl:attribute name="href"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>ext/jquery-ui/jquery-ui.css</xsl:attribute></link>
<link rel='stylesheet' type='text/css'><xsl:attribute name="href"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>builder.css</xsl:attribute></link>
<link rel='stylesheet' type='text/css'><xsl:attribute name="href"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>assets/stylesheets/builder.css</xsl:attribute></link>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>ext/jquery-1.10.2.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>ext/jquery-ui/jquery-ui.js</xsl:attribute></script>
<script>
var KVKL = <xsl:value-of select='/TouchLayoutBuilder/LayoutJS' />;
window.builder = {};
</script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>constants.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>builder.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>undo.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>prepare-key.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>subkeys.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>view-controls.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>platform-controls.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>layer-controls.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>builder-charmap.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>drag-drop.js</xsl:attribute></script>
<script><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>cleanup.js</xsl:attribute></script>
<script>initBuilder();</script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/constants.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/builder.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/undo.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/prepare-key.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/subkeys.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/view-controls.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/platform-controls.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/layer-controls.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/builder-charmap.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/drag-drop.js</xsl:attribute></script>
<script type="module"><xsl:attribute name="src"><xsl:value-of select="/TouchLayoutBuilder/LibPath"/>src/cleanup.js</xsl:attribute></script>
<script type="module">
import { initBuilder } from "./toucheditor/lib/src/builder.js";
window.builder = initBuilder();
</script>
</head>
<body class='text-controls-in-toolbar'>
<div id='toolbar'>
Expand Down
28 changes: 28 additions & 0 deletions developer/src/tike/xml/layoutbuilder/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "@keymanapp/developer-touch-layout-editor",
"description": "Keyman Developer Touch Layout Editor",
"keywords": [
"keyboard",
"keyman",
"kmn",
"keyman-touch-layout",
"unicode"
],
"type": "module",
"files": [
"/build/src/"
],
"author": "Marc Durdin <marc@keyman.com> (https://github.com/mcdurdin)",
"license": "MIT",
"bugs": {
"url": "https://github.com/keymanapp/keyman/issues"
},
"devDependencies": {
"typescript": "^5.4.5"
},
"repository": {
"type": "git",
"url": "git+https://github.com/keymanapp/keyman.git",
"directory": "developer/src/tike/xml/layoutbuilder"
}
}
30 changes: 15 additions & 15 deletions ...rc/tike/xml/layoutbuilder/src/builder.css → ...uilder/src/assets/stylesheets/builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
font-family: KeymanwebOsk;
font-style: normal;
font-weight: normal;
src: url('assets/fonts/keymanweb-osk.ttf') format('truetype');
src: url('../fonts/keymanweb-osk.ttf') format('truetype');
}

* {
Expand Down Expand Up @@ -37,7 +37,7 @@ body {
}

#kbd.tablet-ipad-landscape {
background: url('assets/images/tablet-ipad-landscape.png') no-repeat white;
background: url('../images/tablet-ipad-landscape.png') no-repeat white;
background-position: 0px -390px;
background-attachment: scroll;
padding-top: 30px;
Expand All @@ -48,7 +48,7 @@ body {
}

#kbd.tablet-ipad-portrait {
background: url('assets/images/tablet-ipad-portrait.png') no-repeat white;
background: url('../images/tablet-ipad-portrait.png') no-repeat white;
background-position: 0px -562px;
background-attachment: scroll;
padding-top: 34px;
Expand All @@ -59,7 +59,7 @@ body {
}

#kbd.phone-iphone5-landscape {
background: url('assets/images/phone-iphone5-landscape.png') no-repeat white;
background: url('../images/phone-iphone5-landscape.png') no-repeat white;
background-position: 0px -186px;
background-attachment: scroll;
padding-left: 144px;
Expand All @@ -70,7 +70,7 @@ body {
}

#kbd.phone-iphone5-portrait {
background: url('assets/images/phone-iphone5-portrait.png') no-repeat white;
background: url('../images/phone-iphone5-portrait.png') no-repeat white;
background-position: 0px -800px;
background-attachment: scroll;
padding-left: 92px;
Expand Down Expand Up @@ -208,7 +208,7 @@ body {
}

.has-multitap {
background: no-repeat url('assets/images/multitap.svg') 0 0 / 100%;
background: no-repeat url('../images/multitap.svg') 0 0 / 100%;
position: absolute;
right: 2px;
bottom: 12px;
Expand All @@ -217,7 +217,7 @@ body {
}

.has-longpress {
background: no-repeat url('assets/images/longpress.svg') 0 0 / 100%;
background: no-repeat url('../images/longpress.svg') 0 0 / 100%;
position: absolute;
margin-left: 50%;
left: -5px;
Expand All @@ -239,26 +239,26 @@ body {
}

.has-flick-nw {
background:no-repeat url('assets/images/flick-nw.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-nw.svg') 0 0 / 100%;
left: 1px;
top: 1px;
}

.has-flick-n {
background:no-repeat url('assets/images/flick-n.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-n.svg') 0 0 / 100%;
left: 50%;
margin-left: -2.5px;
top: 1px;
}

.has-flick-ne {
background:no-repeat url('assets/images/flick-ne.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-ne.svg') 0 0 / 100%;
right: 1px;
top: 1px;
}

.has-flick-w {
background:no-repeat url('assets/images/flick-w.svg') 0 0 / 50%;
background:no-repeat url('../images/flick-w.svg') 0 0 / 50%;
left: 1px;
top: 50%;
width: 7.5px;
Expand All @@ -267,7 +267,7 @@ body {
}

.has-flick-e {
background:no-repeat url('assets/images/flick-e.svg') 0 0 / 50%;
background:no-repeat url('../images/flick-e.svg') 0 0 / 50%;
right: -1px;
top: 50%;
width: 7.5px;
Expand All @@ -276,20 +276,20 @@ body {
}

.has-flick-sw {
background:no-repeat url('assets/images/flick-sw.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-sw.svg') 0 0 / 100%;
left: 1px;
bottom: 1px;
}

.has-flick-s {
background:no-repeat url('assets/images/flick-s.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-s.svg') 0 0 / 100%;
left: 50%;
margin-left: -2.5px;
bottom: -1px;
}

.has-flick-se {
background:no-repeat url('assets/images/flick-se.svg') 0 0 / 100%;
background:no-repeat url('../images/flick-se.svg') 0 0 / 100%;
right: 1px;
bottom: 1px;
}
Expand Down
Loading
Loading