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

Open
mcdurdin wants to merge 5 commits into
base: change/developer/touch-layout-reorganize-files
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 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
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
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

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
2 changes: 1 addition & 1 deletion 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 @@ -211,7 +211,7 @@ procedure TAppSourceHttpResponder.RespondTouchEditorLib(
if doc.StartsWith('/app/source/toucheditor/lib/') and (Pos('..', doc) = 0) then
begin
Delete(doc, 1, Length('/app/source/toucheditor/lib/'));
RespondFile(GetLayoutBuilderPath + 'src/' + doc, AContext, ARequestInfo, AResponseInfo);
RespondFile(GetLayoutBuilderPath + 'build/' + doc, AContext, ARequestInfo, AResponseInfo);
end
else
Respond404(AContext, ARequestInfo, AResponseInfo)
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";
initBuilder();
</script>
</head>
<body class='text-controls-in-toolbar'>
<div id='toolbar'>
Expand Down
29 changes: 29 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,29 @@
{
"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": {
"@types/jquery": "^1.10.2",
"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
0 .../xml/layoutbuilder/src/builder-charmap.js → .../xml/layoutbuilder/src/builder-charmap.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...src/tike/xml/layoutbuilder/src/builder.js → ...src/tike/xml/layoutbuilder/src/builder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1156,7 +1156,7 @@ $(function() {

}.bind(builder));

function initBuilder() {
export function initBuilder() {
$(function() {
builder.cleanupKVKL();
builder.prepareKeyCapTypes();
Expand Down
0 ...src/tike/xml/layoutbuilder/src/cleanup.js → ...src/tike/xml/layoutbuilder/src/cleanup.ts
View file
Open in desktop
File renamed without changes.
0 ...c/tike/xml/layoutbuilder/src/constants.js → ...c/tike/xml/layoutbuilder/src/constants.ts
View file
Open in desktop
File renamed without changes.
0 ...c/tike/xml/layoutbuilder/src/drag-drop.js → ...c/tike/xml/layoutbuilder/src/drag-drop.ts
View file
Open in desktop
File renamed without changes.
0 ...e/xml/layoutbuilder/src/layer-controls.js → ...e/xml/layoutbuilder/src/layer-controls.ts
View file
Open in desktop
File renamed without changes.
0 ...ml/layoutbuilder/src/platform-controls.js → ...ml/layoutbuilder/src/platform-controls.ts
View file
Open in desktop
File renamed without changes.
0 ...tike/xml/layoutbuilder/src/prepare-key.js → ...tike/xml/layoutbuilder/src/prepare-key.ts
View file
Open in desktop
File renamed without changes.
0 ...src/tike/xml/layoutbuilder/src/subkeys.js → ...src/tike/xml/layoutbuilder/src/subkeys.ts
View file
Open in desktop
File renamed without changes.
Loading