diff --git a/.github/workflows/pxt-buildpush.yml b/.github/workflows/pxt-buildpush.yml index 34ce4c3721e2..011f2a95d08f 100644 --- a/.github/workflows/pxt-buildpush.yml +++ b/.github/workflows/pxt-buildpush.yml @@ -9,6 +9,11 @@ on: pull_request: branches: - '**' # Run workflow for pull requests targeting any branch + merge_group: + branches: + - '**' # Run workflow for merge queue checks targeting any branch + types: + - checks_requested permissions: contents: write @@ -38,9 +43,9 @@ jobs: uses: actions/setup-node@main with: node-version: 20.x - + - name: Update npm - run: npm install -g npm@latest + run: npm install -g npm@11 - name: npm install run: | @@ -75,7 +80,7 @@ jobs: node-version: 20.x - name: Update npm - run: npm install -g npm@latest + run: npm install -g npm@11 - name: npm install run: | diff --git a/.vscode/settings.json b/.vscode/settings.json index c0421ef1bbf0..d62b6f37b868 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -27,5 +27,6 @@ "*.variables": "less", "*.jres": "json" }, - "git.ignoreLimitWarning": true + "git.ignoreLimitWarning": true, + "js/ts.tsdk.path": "node_modules/typescript/lib" } \ No newline at end of file diff --git a/ThirdPartyNotice b/ThirdPartyNotice index 8d0e5ab22166..d1857cafdb4b 100644 --- a/ThirdPartyNotice +++ b/ThirdPartyNotice @@ -882,6 +882,7 @@ General Public License. 864. @fortawesome/fontawesome-free 5.15.4 (https://www.npmjs.com/package/@fortawesome/fontawesome-free/v/5.15.4) 865. @blockly/plugin-workspace-search 4.0.10 (https://www.npmjs.com/package/@blockly/plugin-workspace-search/v/4.0.10) 866. @blockly/keyboard-navigation 1.0.0-beta.0 (https://www.npmjs.com/package/@blockly/keyboard-navigation/v/1.0.0-beta.0) +867. Qix-/color-convert 5c106a633b5cd2de554d9c287ad31f9eeca7a271 (https://github.com/Qix-/color-convert) @@ -28361,14 +28362,14 @@ The copyright in this software is being made available under the BSD License, in **Copyright (c) 2015, Dash Industry Forum. **All rights reserved.** - + * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the Dash Industry Forum nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. **THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.** - + ========================================= END OF dashjs 4.4.0 NOTICES AND INFORMATION @@ -28955,3 +28956,30 @@ END OF @blockly/plugin-workspace-search 4.0.10 NOTICES AND INFORMATION limitations under the License. ========================================= END OF @blockly/keyboard-navigation 1.0.0-beta.0 NOTICES AND INFORMATION + + +%% Qix-/color-convert 5c106a633b5cd2de554d9c287ad31f9eeca7a271 NOTICES AND INFORMATION BEGIN HERE +========================================= +Copyright (c) 2011-2016 Heather Arthur . +Copyright (c) 2016-2021 Josh Junon . + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +========================================= +END OF Qix-/color-convert 5c106a633b5cd2de554d9c287ad31f9eeca7a271 NOTICES AND INFORMATION \ No newline at end of file diff --git a/cli/cli.ts b/cli/cli.ts index c16596e9fcb0..c3d71ea714fa 100644 --- a/cli/cli.ts +++ b/cli/cli.ts @@ -276,8 +276,8 @@ class FileGithubDb implements pxt.github.IGithubDb { return this.loadAsync(repopath, tag, "pxt", (r, t) => this.db.loadConfigAsync(r, t)); } - loadPackageAsync(repopath: string, tag: string): Promise { - return this.loadAsync(repopath, tag, "pkg", (r, t) => this.db.loadPackageAsync(r, t)); + loadPackageAsync(repopath: string, tag: string, fallbackPackageFiles?: pxt.Map): Promise { + return this.loadAsync(repopath, tag, "pkg", (r, t) => this.db.loadPackageAsync(r, t, fallbackPackageFiles)); } loadTutorialMarkdown(repopath: string, tag?: string): Promise { @@ -5839,7 +5839,9 @@ export async function buildCoreDeclarationFiles(parsed: commandParser.ParsedComm nodeutil.mkdirP(builtFolder); process.chdir(cwd); - const host = shareId ? new Host() : new SnippetHost("decl-build", { "main.ts" : "" }, { "blocksprj": "*" }); + const blocksprjConfig = readBlocksprjConfig(); + + const host = shareId ? new Host() : new SnippetHost("decl-build", { "main.ts" : "" }, { ...blocksprjConfig.dependencies }); const mainPkg = new pxt.MainPackage(host); if (shareId) { @@ -6223,6 +6225,16 @@ function checkDocsAsync(parsed?: commandParser.ParsedCommand): Promise { ) } +function readBlocksprjConfig(): pxt.PackageConfig { + const configPath = path.join("libs", pxt.BLOCKS_PROJECT_NAME, "pxt.json"); + + if (!nodeutil.fileExistsSync(configPath)) { + return undefined; + } + const config = nodeutil.readJson(configPath) as pxt.PackageConfig; + return config; +} + function checkFileSize(files: string[]): number { if (!pxt.appTarget.cloud) return 0; @@ -6262,6 +6274,8 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo const existingSnippets: pxt.Map = {}; let snippets: CodeSnippet[] = []; + const blocksprjConfig = readBlocksprjConfig(); + const maxFileSize = checkFileSize(nodeutil.allFiles("docs", { maxDepth: 10, allowMissing: true, includeDirs: true, ignoredFileMarker: ".ignorelargefiles" })); if (!pxt.appTarget.ignoreDocsErrors && maxFileSize > (pxt.appTarget.cloud.maxFileSize || (30000000))) @@ -6434,7 +6448,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo } // look for snippets - getCodeSnippets(entrypath, md).forEach((snippet, snipIndex) => addSnippet(snippet, entrypath, snipIndex, entrypath)); + getCodeSnippets(entrypath, md, blocksprjConfig).forEach((snippet, snipIndex) => addSnippet(snippet, entrypath, snipIndex, entrypath)); } nodeutil.mkdirP("temp"); @@ -6479,8 +6493,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo continue; } const tutorial = pxt.tutorial.parseTutorial(tutorialMd); - const pkgs: pxt.Map = { "blocksprj": "*" }; - pxt.Util.jsonMergeFrom(pkgs, pxt.gallery.parsePackagesFromMarkdown(tutorialMd) || {}); + const pkgs = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, pxt.gallery.parsePackagesFromMarkdown(tutorialMd) || {}); let extraFiles: Map = null; @@ -6497,7 +6510,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo || (tutorial.language == "python")) { tutorial.steps .filter(step => !!step.contentMd) - .forEach((step, stepIndex) => getCodeSnippets(`${card.name}-step${stepIndex}`, step.contentMd) + .forEach((step, stepIndex) => getCodeSnippets(`${card.name}-step${stepIndex}`, step.contentMd, blocksprjConfig) .forEach((snippet, snippetIndex) => { snippet.packages = pkgs; snippet.extraFiles = extraFiles; @@ -6539,8 +6552,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo continue; } const prj = pxt.gallery.parseExampleMarkdown(card.name, exMd); - const pkgs: pxt.Map = { "blocksprj": "*" }; - pxt.U.jsonMergeFrom(pkgs, prj.dependencies); + const pkgs = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, prj.dependencies); let extraFiles: Map = undefined; @@ -6616,6 +6628,8 @@ function internalCacheUsedBlocksAsync(): Promise> { const mdRegex = /\.md$/; const targetDirs = pxt.appTarget.cacheusedblocksdirs; const builtTututorialInfo: Map = {}; + const blocksprjConfig = readBlocksprjConfig(); + if (targetDirs) { targetDirs.forEach(dir => { pxt.log(`looking for tutorial markdown in ${dir}`); @@ -6633,8 +6647,9 @@ function internalCacheUsedBlocksAsync(): Promise> { pxt.log(`error resolving tutorial markdown at ${path}`); } const tutorial = pxt.tutorial.parseTutorial(md) as TutorialInfo; - const pkgs: pxt.Map = { "blocksprj": "*" }; - pxt.Util.jsonMergeFrom(pkgs, pxt.gallery.parsePackagesFromMarkdown(md) || {}); + const tutorialDeps = pxt.gallery.parsePackagesFromMarkdown(md) || {}; + const pkgs: pxt.Map = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, tutorialDeps); + tutorial.pkgs = pkgs; tutorial.path = path; @@ -6752,7 +6767,7 @@ export interface CodeSnippet { src?: string; } -export function getCodeSnippets(fileName: string, md: string): CodeSnippet[] { +export function getCodeSnippets(fileName: string, md: string, baseConfig: pxt.PackageConfig): CodeSnippet[] { const supported: pxt.Map = { "blocks": "ts", "block": "ts", @@ -6778,21 +6793,20 @@ export function getCodeSnippets(fileName: string, md: string): CodeSnippet[] { }; } - - const pkgs: pxt.Map = { - "blocksprj": "*" - } - snippets.filter(snip => snip.type == "package") + const tutorialDeps = snippets.filter(snip => snip.type == "package") .map(snip => snip.code.split('\n')) - .forEach(lines => lines - .map(l => l.replace(/\s*$/, '')) - .filter(line => !!line) - .forEach(line => { + .reduce((acc, lines) => { + for (let line of lines) { + line = line.replace(/\s*$/, ''); + if (!line) continue; const i = line.indexOf('='); - if (i < 0) pkgs[line] = "*"; - else pkgs[line.substring(0, i)] = line.substring(i + 1); - }) - ); + if (i < 0) acc[line] = "*"; + else acc[line.substring(0, i).trim()] = line.substring(i + 1); + } + return acc; + }, {} as pxt.Map); + + const pkgs = pxt.tutorial.mergeTutorialDependencies(baseConfig.dependencies, tutorialDeps); const pkgName = fileName.replace(/\\/g, '-').replace(/.md$/i, ''); return codeSnippets.map((snip, i) => { diff --git a/common-docs/javascript/generics.md b/common-docs/javascript/generics.md index f812b55873f7..cdc2acd2bbd9 100644 --- a/common-docs/javascript/generics.md +++ b/common-docs/javascript/generics.md @@ -131,7 +131,7 @@ function identity(arg: T): T { return arg; } -let myIdentity: (arg: U) => U = identity; +let myIdentity: (arg: V) => V = identity; ``` We can also write the generic type as a call signature of an object literal type: diff --git a/common-docs/share.md b/common-docs/share.md index fa196157e410..7a4931f3d705 100644 --- a/common-docs/share.md +++ b/common-docs/share.md @@ -56,6 +56,16 @@ By default, all shared projects in MakeCode can be copied and edited. There is n ![Edit shared project button](/static/share/edit-shared-project.png) +## Asset Packs #asset-packs + +Certain editors (such as [MakeCode Arcade](https://arcade.makecode.com)) can include resource files inside of projects. The resources, or _assets_, might contain byte respresentations of images, animations, sounds, tilemaps, etc. An **Asset Pack** is a resource only project where just the assets are shared and no code is loaded from the shared project. + +If this feature is supported by your editor, you can set a project as an asset pack by going to the **Settings** (⚙️) menu and selecting 'Project Settings'. Enable the 'Import as asset pack' setting. Watch this video to see how it's done: + +https://youtu.be/CjLYl5KJiSk + +See the [Asset Packs](https://makecode.com/extensions/asset-packs) page to learn more. + ## Report Abuse All MakeCode shared projects pass through Microsoft standard scanning for security and safety compliance. In addition, the "Report Abuse" option is available on any shared project if you deem the contents of the project not appropriate (contains unsafe content or includes personally identifiable information). For these types of projects, the MakeCode Team will remove the project from our databases. diff --git a/common-docs/static/logo/Microsoft-logo_rgb_c-gray.png b/common-docs/static/logo/Microsoft-logo_rgb_c-gray.png new file mode 100644 index 000000000000..6b77415ea54c Binary files /dev/null and b/common-docs/static/logo/Microsoft-logo_rgb_c-gray.png differ diff --git a/common-docs/teachertool/catalog-shared.json b/common-docs/teachertool/catalog-shared.json index 6679295131c4..70f7d5dcfa20 100644 --- a/common-docs/teachertool/catalog-shared.json +++ b/common-docs/teachertool/catalog-shared.json @@ -123,7 +123,7 @@ "use": "variable_usage", "template": "Uses at least ${count} variable(s)", "docPath": "/teachertool", - "description": "The program creates and uses at least this many user-defined variables.", + "description": "At least this many user-defined variables are both set and read — auto-generated variables like loop indices do not count.", "maxCount": 1, "tags": ["Code Elements"], "params": [ diff --git a/docfiles/footer.html b/docfiles/footer.html index ab249b637ceb..a778901e1695 100644 --- a/docfiles/footer.html +++ b/docfiles/footer.html @@ -3,8 +3,8 @@
diff --git a/docs/blog.md b/docs/blog.md index 5c5e7769e1aa..2db583ecdc60 100644 --- a/docs/blog.md +++ b/docs/blog.md @@ -1,5 +1,21 @@ # Microsoft MakeCode Blog +## [Summer 2026 – MakeCode Professional Development](/blog/csp/summer-pd-2026) + +April 6th, 2026 by [Jaqster](https://github.com/jaqster) + +Planning your summer schedule? Make sure to register for some of these FREE MakeCode Professional Development opportunities. + +**[Continue reading this blog post](/blog/csp/summer-pd-2026)** + +## [MakeCode Arcade 2026 Update](/blog/arcade/update-feb-2026) + +February 13th, 2026 by [Jaqster](https://github.com/jaqster) + +Today we are pleased to release our 2026 MakeCode Arcade updates! + +**[Continue reading this blog post](/blog/arcade/update-feb-2026)** + ## [Interview with MakeCode Arcade Game Maker](/blog/arcade/code-ninjas) December 19, 2025 by [Jaqster](https://github.com/jaqster) diff --git a/docs/blog/SUMMARY.md b/docs/blog/SUMMARY.md index 88ab34d3098b..41baf2278736 100644 --- a/docs/blog/SUMMARY.md +++ b/docs/blog/SUMMARY.md @@ -1,6 +1,8 @@ # Microsoft MakeCode Blog * [Blog](/blog) + * [Summer 2026 – MakeCode Professional Development](/blog/csp/summer-pd-2026) + * [MakeCode Arcade 2026 Update](/blog/arcade/update-feb-2026) * [Interview with MakeCode Arcade Game Maker](/blog/arcade/code-ninjas) * [Computer Science Education Week 2025](/blog/csed-week/csed-week-2025) * [MakeCode Minecraft 2025 Update](/blog/minecraft/2025-release) diff --git a/docs/blog/arcade/update-feb-2026.md b/docs/blog/arcade/update-feb-2026.md new file mode 100644 index 000000000000..f91d64336b56 --- /dev/null +++ b/docs/blog/arcade/update-feb-2026.md @@ -0,0 +1,177 @@ +# MakeCode Arcade 2026 Update + +**Posted on February 13th, 2026 by [Jaqster](https://github.com/jaqster)** + +Today we are pleased to release our 2026 MakeCode Arcade updates! + +We know it's the middle of the school year for many, so if you would like to continue using the existing version, you can bookmark https://arcade.makecode.com/v2.0. + +## Reliability & Stability + +One of our big focus areas for this release was the reliability and stability of the product. So, although this is an invisible feature, we did a lot of back-end work to ensure that students don't lose work or progress. If you do find any issues like this, please log a [GitHub issue](https://github.com/microsoft/pxt-arcade/issues), or post on the [Forum](https://forum.makecode.com) (See the posting about ["What to do when you encounter a bug"](https://forum.makecode.com/t/what-to-do-when-you-encounter-a-bug/35120)). We hope these improvements help keep MakeCode the product that always "just works"! + +## Code Evaluation + +Last year, we introduced the [Code Evaluation](https://makecode.com/blog/tools/code-eval-tool) tool for the micro:bit as a way to help teachers understand and evaluate student programs. We've learned a lot over the past year and are now bringing this tool to MakeCode Arcade. We are still learning how best to support teachers in evaluating and assessing student programs while preserving creativity and self-expression. + +Here's a quick overview video of how the tool works – + +https://youtu.be/XnFaELem5-o + +Please try it out yourself and let us know what you think by clicking on the Feedback button. + +![Feedback button](/static/blog/arcade/update-feb-2026/feedback.png) + +You can get to the tool directly at https://arcade.makecode.com/--eval, or click on the Evaluate button in the top right corner of any shared project page. + +![Share project page](/static/blog/arcade/update-feb-2026/share-project.png) + +## Error Explainer + +Have you ever encountered the dreaded red outline or underline in your code that lets you know that something's not right? Now when that happens, you're not alone in debugging! There's a helpful "Error Explainer" that can walk you through bugs in your code. + +When an error occurs in your project, a problems pane appears below the editor with the error message and an **Explain with AI** button that users can optionally click for a more comprehensive explanation of the error, as well as indicating where in their code the error occurs. This feature is available for both Blocks and Text editors. Please note that you do have to be signed into MakeCode Arcade for this feature. + +![Blocks for Explain with AI](/static/blog/arcade/update-feb-2026/explain-ai-blocks.png) + +![Text for Explain with AI](/static/blog/arcade/update-feb-2026/explain-ai-text.png) + +## Tutorial Sharing + +My personal favorite feature for this release! Finally we have an easy way to share tutorials! This has been a long-time request of teachers looking for a way to assign tutorials to students. Now from the Home Page, you can click on a tutorial card and click the **Share** button to copy a link to the tutorial and paste it into your favorite LMS or classroom assignment tool. + +![Share tutorial on home page](/static/blog/arcade/update-feb-2026/share-tutorial.png) + +![Share tutorial dialog](/static/blog/arcade/update-feb-2026/share-tutorial-dialog.png) + +## Keyboard Controls + +Arcade is our final editor to get the keyboard navigation feature that we worked on with the [Micro:bit Foundation](https://microbit.org/accessibility/blockly-accessibility-project) and [Blockly](https://developers.google.com/blockly/accessibility) last year. This feature is a wonderful accessibility improvement making block-based coding accessible for people who need or prefer to use a keyboard instead of a mouse. + +To turn on the keyboard controls, in the MakeCode editor, click on the **Settings** (⚙️) menu and select 'Keyboard Controls'. + +![keyboard controls menu](/static/blog/arcade/update-feb-2026/keyboard-controls-menu.png) + +You can also just press the **Tab** key when you open the editor to get the shortcut menu and then select **Enter**. + +![Shortcut menu](/static/blog/arcade/update-feb-2026/shortcut-menu.png) + +When you activate keyboard controls, a help pane will appear with information on the keys to press to navigate around the editor. **Ctrl B** also shows you screen region shortcuts for keyboard navigation. + +![Side document view](/static/blog/arcade/update-feb-2026/sidedocs.png) + +## Game Description + +Have you ever wanted to include more description or instructions for your game, but don't want to put it all in the splash screen? Now in the "Share Project" window, there's a nice big description field that allows you to enter details about your game so other people have a bit more context before they jump right into playing. + +![Share project dialog](/static/blog/arcade/update-feb-2026/share-project-dialog.png) + +![Share page description](/static/blog/arcade/update-feb-2026/share-project-desc.png) + +## Asset Packs + +Who loves pixel artists?! I do!!! And I love using community shared pixel art in my games. Now there's an easier way to share assets. You can create a project full of custom assets, and in the "Project Settings" window, toggle the **Asset Pack** setting to on. This will allow other people to import the assets from your project, just like they would an extension. + +Watch this video to see how it's done – + +https://youtu.be/CjLYl5KJiSk + +## Tilemap Gallery + +We have a gallery of images, animations, and tiles... and now we have a gallery of pre-built tilemaps too! These are quite beautiful and useful to get started creating tilemap games. Of course, your own custom tilemaps are the best, but these can help you plan and ideate on that dungeon crawler game you've always wanted to build! + +![Tilemap Gallery](/static/blog/arcade/update-feb-2026/tilemap-gallery.png) + +![Tilemap example](/static/blog/arcade/update-feb-2026/tilemap.png) + +## YouTube Education video player + +Something you may not notice right away, but that educators will appreciate – we've switched out our regular YouTube player for embedded videos to YouTube's Player for Education which improves student privacy, safety and gives us an ad-free experience. Look Ma! No ads! + +![YouTube Education Player](/static/blog/arcade/update-feb-2026/youtube-player-edu.png) + +## Game window fullscreen + +Students love playing their games in fullscreen mode. Alas, many of them don't even know this view exists! So we have made some improvements to hopefully help with discoverability and being able to move back and forth between the code editor and the game window fullscreen. We changed the icon to be arrows (similar to the YouTube buttons), and we now also support the **Escape** shortcut key as a way to exit fullscreen mode. + +![Game window and sizing](/static/blog/arcade/update-feb-2026/game-window.png) + +## New blocks + +We have a couple new code blocks for this release. + +### 'unfollow' block + +The [unfollow](https://arcade.makecode.com/reference/sprites/sprite/unfollow) block will do exactly what you think. Once you have a sprite that's set to follow another sprite, this block will stop the sprite from following. + +![The 'unfollow' block](/static/blog/arcade/update-feb-2026/unfollow-block.png) + +### Math Constants + +The Math Constants block contains some helpful values like **Pi (π)**, **e**, and some square root and logarithmic values. + +![Math constants](/static/blog/arcade/update-feb-2026/math-constants.png) + +## New Extensions + +There are over 30 officially supported extensions for MakeCode Arcade, and we're adding more! Here are three new extension updates that make building the games of your dreams much easier. + +### Character Animations + +The [Character Animations](https://arcade.makecode.com/pkg/microsoft/arcade-character-animations) extension provides fine-grain control over when animations run on a sprite. For example, you can create specific animations for when your sprite is moving or facing certain directions. + +![Animation extension card](/static/blog/arcade/update-feb-2026/animation-ext-card.png) + +![Animation extension](/static/blog/arcade/update-feb-2026/animation-extension.png) + +### Tile Scanner + +The [Tile Scanner](https://arcade.makecode.com/pkg/riknoll/arcade-tile-scanner) extension is super helpful for Tilemap games! You can use one block to scan your entire tilemap to select groups of common tiles using a variety of different rules. + +![Tile scanner extension card](/static/blog/arcade/update-feb-2026/tile-scanner-card.png) + +Here are a couple examples where you can use it to select the location of all grass blocks in your tilemap, or the location of all contiguous matching tiles. + +![Tile extension example 1](/static/blog/arcade/update-feb-2026/tile-scanner1.png) + +![Tile scanner example 2](/static/blog/arcade/update-feb-2026/tile-scanner2.png) + +### Mini Menu + +Let's add [Mini Menu](https://arcade.makecode.com/pkg/riknoll/arcade-mini-menu)! This has been an unofficial extension for a while and super popular! So, glad to finally welcome it to our official extension gallery. These blocks are all about helping you make menus in your game. + +![Mini-menu card](/static/blog/arcade/update-feb-2026/mini-menu-card.png) + +![Mini-menu example](/static/blog/arcade/update-feb-2026/mini-menu-example.png) + +## New hardware + +And we have some exciting new Arcade hand-held devices from our partners Forward Education and Elecfreaks. I'm so excited about the gorgeous big screens on these devices! + +### CodeCTRL + +[CodeCTRL for micro:bit]( https://forwardedu.com/products/codectrl-for-micro-bit) by Forward Education is nice and big, but also lightweight with an easy-to-use joystick. + +![CodeCTRL shield for micro:bit](/static/blog/arcade/update-feb-2026/codectrl.png) + +### micro:bit Arcade Pro + +The [micro:bit Arcade Pro](https://shop.elecfreaks.com/products/elecfreaks-microsoft-makecode-micro-bit-arcade-pro) from Elecfreaks is one of the nicest feeling hand-held game devices I've ever used! The d-pad, buttons, large screen and shape all work together to provide a really enjoyable game experience. + +![micro:bit Arcade pro shield](/static/blog/arcade/update-feb-2026/arcade-pro.png) + +## Theme Change + +One other change that we're waiting until summer to flip the switch on is our default theme change. In order to improve visual accessibility and color contrast, we'll be changing the default 'Arcade Orange' theme to the 'Blue Light' theme at the end of June. So, if you have screenshots or images in any curriculum or publications, please start the process of updating these. Note that if you are attached to the original orange theme, don't worry it's not going away. If you log in to use MakeCode, we save your preferred theme setting in your user preferences. + +![Theme picker](/static/blog/arcade/update-feb-2026/theme.png) + +Thank you to everyone who has logged bugs, submitted PR's, translated and suggested new features! Any new bugs you find in this release, please log them in GitHub: https://github.com/Microsoft/pxt-arcade/issues + +Any other questions, comments, suggestions, and feedback – please join the discussion at the [MakeCode Forum](https://forum.makecode.com). + + +Happy Making and Coding! + +
+The MakeCode Team diff --git a/docs/blog/csp/summer-pd-2026.md b/docs/blog/csp/summer-pd-2026.md new file mode 100644 index 000000000000..de9b2071a6a7 --- /dev/null +++ b/docs/blog/csp/summer-pd-2026.md @@ -0,0 +1,171 @@ +# Summer 2026 – MakeCode Professional Development + +**Posted on April 6th, 2026 by [Jaqster](https://github.com/jaqster)** + +Planning your summer schedule? Make sure to register for some of these FREE MakeCode Professional Development opportunities. + +## AP Computer Science Principles + +![MakeCode APCSP Banner](/static/blog/csp/summer-pd-2025/makecode-apcsp-banner.png) + +Free, online training to help prepare educators to teach the [AP CS Principles with Microsoft MakeCode](https://makecode.com/csp) course for the 2026-2027 academic year. During this week-long workshop, participants will gain familiarity with the [Microsoft MakeCode Arcade](https://arcade.makecode.com/#editor) programming interface and understand how the curriculum prepares students for the AP Exam and Create Performance Task. This workshop is a mix of asynchronous study tasks and live learning. Sessions will be offered in both June and July – please register for the week that is most convenient for you: + +- **[Week 1: June 15 – 19](https://events.teams.microsoft.com/event/48776882-c0d1-4549-ac57-e731d5e8d07b@bb5e02fd-bc80-48c9-9d60-76e5da6dbc91)** +- **[Week 2: July 20 – 24](https://events.teams.microsoft.com/event/8a4ce10d-9475-4e88-ac6d-311163430261@bb5e02fd-bc80-48c9-9d60-76e5da6dbc91)** + +## Intro to CS with MakeCode Arcade + +![Intro CS Banner](/static/blog/csp/summer-pd-2026/InfoSysBanner.png) + +Join us at the InfoSys Pathfinders Summer Institute for an in-depth look at teaching Introduction to Computer Science in a fun, playful way with MakeCode Arcade. The [Intro to CS with MakeCode Arcade](https://arcade.makecode.com/courses/introCS) curriculum is free and designed to be taught as a full year introductory programming class. As part of the registration for this course, all applicants are required to complete an acceptance letter from their school to participate. Along with the courseware, attendees will receive lots of other resources, including 75 additional lessons on computers, technology, and AI! This workshop will be offered during the weeks of June 15th-19th and July 20th-24th. + +Learn more and register on the **[InfoSys Pathfinders Summer Institute](https://pathfinders.onwingspan.com/web/en/app/event-details/teaching-intro-to-CS-with-makeCode-arcade)** website (you will need to create an account). + +## Microsoft MakeCode Summer Learning Series + +![Summer Learning Series Banner](/static/blog/csp/summer-pd-2026/MakeCodeSummerPDBanner.jpg) + +Don’t have time for a full week curriculum workshop? Drop in for one of our Summer Learning Series webinars for Educators. And even if you can’t make it live, if you register, we’ll send you the recording and post the video on our [YouTube](https://www.youtube.com/@MSMakeCode) channel for on-demand viewing later. + +### 🔵 Top 10 little-known features of MakeCode + +Thursday June 11th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Join us for this fun countdown of the top 10 little-known (but very useful) features of MakeCode. Whether you are a newbie or a power user, we hope you walk away with some new features to put to use! + +**Note**: this content applies for all MakeCode editors (micro:bit, Minecraft and Arcade). + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.c8c09c14-1392-4e02-81fd-202df3b62672@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 MakeCode localization + +Friday June 12th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Do your students speak in a language other than English, and are you interested in helping translate MakeCode for them? Please join us for a walk through of MakeCode's localization platform where anyone can be a translator! + +**Note**: this content applies for all MakeCode editors (micro:bit, Minecraft and Arcade). + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.d9d8fc3e-13e9-4748-8a67-d25e02a1eccc@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 Saving and Sharing projects + +Friday June 26th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – In this webinar, we will walk through the different ways to save and share MakeCode projects and discuss the benefits and drawbacks of each approach. We'll talk about saving projects in the browser cache, in the cloud, to a local file or in GitHub. Then we'll show the different types of project share links that exist and how you can embed projects in a web page. We'll close out with talking about MakeCode privacy and safety policies. + +**Note**: this content applies for all MakeCode editors (micro:bit, Minecraft and Arcade). + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.106a0088-d435-4c01-a713-d85d43f820dc@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 Tips and tricks for debugging + +Friday July 10th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Everyone gets stuck sometimes. And even though it can be frustrating, it's a great opportunity for learning! In this webinar we'll talk about troubleshooting as a critical skill to teach/learn in computer science, and specifically some tools and techniques for debugging in MakeCode. + +**Note**: this content applies for all MakeCode editors (micro:bit, Minecraft and Arcade). + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.b09cafee-605e-4064-ae65-7b6b07cfa472@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 Top 10 student errors in MakeCode Arcade + +Friday July 17th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – MakeCode Arcade is a simple but powerful game development platform where students can create amazingly complex and creative retro-style arcade games. But there are some common pitfalls that we've seen over and over again among students new to the platform. Join us for an entertaining top 10 countdown of student oopsies! And learn how you can respond to help your students through their learning journeys. + +**Note**: this content applies specifically to MakeCode Arcade. + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.360f22c8-3420-4ef0-99c8-803982eb30bd@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 MakeCode Arcade Hardware Showcase + +Friday July 31st – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – You won't want to miss this "unboxing" experience to see all the different MakeCode Arcade hand-held devices available to play your students' games. We'll walk through each one and give our thoughts on the features and specifications. We'll leave time at the end for questions, sharing of classroom hardware experiences, and feedback. + +**Note**: this content applies specifically to MakeCode Arcade. + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.8ce757fc-9a4f-42fa-abb8-fcde5699ebba@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 MakeCode for Minecraft: All about Positions + +Friday August 7th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Positions and 3D coordinates can be one of the first stumbling blocks to learning to code in Minecraft. In this webinar, we'll start with the basics, discuss the different types of positions and when to use each type, and then do some fun code-along exercises to deepen our understanding of positions and how to programmatically build cool stuff in Minecraft! + +**Note**: this content applies specifically to MakeCode for Minecraft Education. + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.a1a97b7a-95a8-4cb3-8273-a982a4deab6e@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 Data Science with MakeCode for the micro:bit + +Friday August 21st – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Join us for this introductory session on using the micro:bit and MakeCode for data science experiments. We'll talk through the data science process and how to structure lessons using the micro:bit to collect environmental data, and then analyze and interpret the results. Attendees will walk away with some classroom-ready lessons and projects they can use with their students. + +**Note**: this content applies specifically to MakeCode for the micro:bit. + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.5614a5ea-5a2d-4678-82eb-a0a381396b0d@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 How to create a MakeCode tutorial + +Thursday August 27th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Join us for a fun hands-on workshop on how to write tutorials in MakeCode! No prior experience required. Come with your own idea for a tutorial, or use an example project. You'll learn how to write markdown to create a MakeCode tutorial and then publish it live! + +**Note**: this content applies for all MakeCode editors (micro:bit, Minecraft and Arcade). + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.51c160f3-942c-400c-9840-d68761a38fc3@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +### 🔵 Physical Computing and AI with MakeCode for the micro:bit + +Friday August 28th – 9am Pacific / 11am Central / 12pm Eastern / 4pm UTC + +**Topic** – Looking for a fun, engaging way to teach AI? Bring AI and Machine Learning concepts to life with the micro:bit and MakeCode! Join us for an interactive, hands-on learning session where we'll walk through some example lessons using micro:bit CreateAI to collect movement data, train a model, and then code using custom gestures. + +**Note**: this content applies specifically to MakeCode for the micro:bit. + +**[Register here](https://msit.events.teams.microsoft.com/event/msit.b088ce8b-f981-4afe-b5e9-607ccb072f1c@72f988bf-86f1-41af-91ab-2d7cd011db47)** + +## Minecraft Teacher Academy + +![Minecraft Education Logo](/static/blog/csp/summer-pd-2026/MCEDULogo.png) + +Get certified to teach with Minecraft in the classroom. Learn essential skills on how to incorporate gameplay into any curriculum through a series of on-demand courses including AI Foundations for Educators. + +**[Learn more](https://education.minecraft.net/en-us/resources/training-for-educators)** + +## Micro:bit Professional Development + +![Microbit Logo](/static/blog/csp/summer-pd-2026/microbitLogo.png) + +**[Micro:bit Professional Development webinars](https://microbit.org/teach/featured)** are free online training courses that support you to develop your computing and micro:bit knowledge on your own time and at your own pace. + +## Other Resources + +### 📑 [Teach AP Computer Science Principles with Microsoft MakeCode](https://learn.microsoft.com/en-us/training/modules/teach-ap-computer-science-principles-makecode) + +Can’t make it to the week-long workshop for AP CS Principles this summer? No problem! Take this abbreviated online course to learn more about the curriculum and how to teach it. + +### 📑 [Engage learners through games with MakeCode Arcade](https://learn.microsoft.com/en-us/training/modules/engage-learners-through-games-with-makecode-arcade) + +In this online course, you’ll learn about the benefits of game-based learning and how games are used in Microsoft MakeCode Arcade to provide meaningful instruction to develop computer science concepts and skills. + +### 📑 [Begin Python coding in Minecraft with MakeCode](https://learn.microsoft.com/en-us/training/modules/begin-python-coding-minecraft-makecode-azure-notebooks) + +Educators will learn the basics of Python, a text-based programming language, in Minecraft Education to build out coding knowledge to facilitate Python coding in the classroom. + +### 📺 MakeCode YouTube + +Browse our collection of videos created specifically for [Educators](https://www.youtube.com/@MSMakeCode) or jump into one of our many [Playlists](https://www.youtube.com/@MicrosoftMakeCode/playlists). + +--- + +
+ +If you have questions, or would like to participate in the MakeCode community, please join the [Forum](https://forum.makecode.com) or follow us on social [@MSMakeCode](https://twitter.com/MSMakeCode). + +Happy Making and Coding! + +
+The MakeCode Team diff --git a/docs/defining-blocks.md b/docs/defining-blocks.md index 1dfb851025ad..4195ed18bd63 100644 --- a/docs/defining-blocks.md +++ b/docs/defining-blocks.md @@ -106,7 +106,7 @@ parameter = string * each `field` is mapped to a field name on the block. * the function parameters are mapped to the `$parameter` argument with an identical name. The loader automatically builds a mapping between the block field names and the function names. * the block will automatically switch to external inputs (wrapping) when there are four or more parameters. -* the `|` indicates where to start a new line if the block is in external inputs mode. +* the `|` indicates where to start a new line if the block is in external inputs mode. ## Custom block localization @@ -124,11 +124,12 @@ For example, export function square(x: number): number {} ``` -You can also override the ``jsdoc`` description and parameter info. +You can also override the ``jsdoc`` description, parameter info, and ariaLabel (for dropdown values). ``` jsdoc.loc.LOCALE = translated jsdoc PARAM.loc.LOCALE = parameter jsdoc +ariaLabel.loc.LOCALE = translated aria label ``` ```typescript-ignore @@ -141,6 +142,14 @@ PARAM.loc.LOCALE = parameter jsdoc //% jsdoc.loc.fr="Calcule le carré de x" //% x.loc.fr="le nombre" export function square(x: number): number {} + + +export enum MyEnum { + //% block="x" + //% ariaLabel="x axis" + //% ariaLabel.loc.fr="axe des x" + X +} ``` @@ -339,14 +348,16 @@ Enum is supported and will automatically be represented by a dropdown in blocks. enum Button { A = 1, B = 2, - //% blockId="ApB" block="A+B" + //% block="A+B" ariaLabel="A and B" AB = 3, } ``` * the initializer can be used to map the value -* the `blockId` attribute can be used to override the block id * the `block` attribute can be used to override the rendered string +* the `ariaLabel` attribute can be used to override the aria label on the dropdown value if the `block` value is not read correctly by screen readers + +The `block` and `ariaLabel` values can both be localized, either by including a strings JSON file or locally in the comments (see custom block localization section above). ### Tip: dropdown for non-enum parameters diff --git a/docs/docs.md b/docs/docs.md index 5c184c942b39..356be95606e3 100644 --- a/docs/docs.md +++ b/docs/docs.md @@ -63,5 +63,9 @@ for creating JavaScript/Blocks online editors. * [UF2 file format](http://github.com/microsoft/uf2) +## Other Documentation +* [Arcade](https://arcade.makecode.com/docs) +* [Minecraft](https://minecraft.makecode.com/docs) +* [Maker](https://maker.makecode.com/docs) diff --git a/docs/extensions.md b/docs/extensions.md index 9b68d17d3f17..d8c847ba0cd8 100644 --- a/docs/extensions.md +++ b/docs/extensions.md @@ -26,6 +26,7 @@ In this scenario, PXT dynamically loads the neopixel extensions directly from Gi * [Extension approval](/extensions/approval) * [GitHub Extension Authoring](/extensions/github-authoring) * [Adding docs to GitHub Extensions](/extensions/github-docs) +* [Asset only (asset pack) extensions](/extensions/asset-packs) ## [Editor extensions](/extensions/extensions) diff --git a/docs/extensions/asset-packs.md b/docs/extensions/asset-packs.md new file mode 100644 index 000000000000..346291f6d76c --- /dev/null +++ b/docs/extensions/asset-packs.md @@ -0,0 +1,44 @@ +# Asset packs + +Certain editors (such as [MakeCode Arcade](https://arcade.makecode.com)) can include resource files inside of projects. The resources, or _assets_, might contain byte respresentations of images, animations, sounds, tilemaps, etc. + +An extension containing assets may use them to support the code provided in the extension (custom buttons, animations, etc.). However, you can mark an extension to import only its assets and not include any of the code exported in the extension. This is useful as a way to package reusable assets and publish them for others to use in their projects. + +## Assets in the extension + +Assets are included as part of the `files[]` list in the `pxt.json` file. As an example, here are some shark image assets in a MakeCode Arcade extension. + +![Shark image assets](/static/extensions/shark-image-assets.png) + +These images are contained and loaded using the `assets.json` and `images.*` files. + +```json +{ + "name": "hungry-sharks", + "description": "", + "dependencies": { + "device": "*" + }, + "files": [ + "main.blocks", + "main.ts", + "README.md", + "assets.json", + "images.g.jres", + "images.g.ts" + ], + "preferredEditor": "tsprj" +} +``` + +## Commit settings + +When committing project changes to GitHub, if assets are present, an **Import as asset pack** option appears in the 'Extension zone' of the commit operation window. + +![Import assets not set](/static/extensions/asset-pack-unset.png) + +Turning on this option will cause the editor to only load the assets in the extension and ignore any code. + +If a project already has the import option, `pxt.json` will contain the setting `"assetPack": true` and the settings in the commit operation window will show the **Import as asset pack** option as set. + +![Import assets set](/static/extensions/asset-pack-set.png) \ No newline at end of file diff --git a/docs/multi.html b/docs/multi.html index a887e5b8ee02..cd8cdf83e5be 100644 --- a/docs/multi.html +++ b/docs/multi.html @@ -146,10 +146,36 @@ ifrm.src = select.value + flags + h; } function handleHash() { - var route = (window.location.hash || "#"); - var parts = route.replace(/^#/, '').split(':|:', 2); - updateSrc(left, selectLeft, parts[0]); - updateSrc(right, selectRight, parts[1]); + var route = decodeURIComponent(window.location.hash || "#"); + + if (route.indexOf(":|:") !== -1) { + var parts = route.replace(/^#/, '').split(':|:', 2); + updateSrc(left, selectLeft, parts[0]); + updateSrc(right, selectRight, parts[1]); + } + else { + route = route.replace(/^#/, ''); + var params = new URLSearchParams(route); + if (params.has("left")) { + updateSrc(left, selectLeft, params.get("left")); + } + else if (params.has("leftscript")) { + updateSrc(left, selectLeft, "pub:" + params.get("leftscript")); + } + else { + updateSrc(left, selectLeft); + } + if (params.has("right")) { + updateSrc(right, selectRight, params.get("right")); + } + else if (params.has("rightscript")) { + updateSrc(right, selectRight, "pub:" + params.get("rightscript")); + } + else { + updateSrc(right, selectRight); + } + } + window.history.replaceState('', '', '#') } diff --git a/docs/static/blog/arcade/update-feb-2026/animation-ext-card.png b/docs/static/blog/arcade/update-feb-2026/animation-ext-card.png new file mode 100644 index 000000000000..426a797a78d1 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/animation-ext-card.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/animation-extension.png b/docs/static/blog/arcade/update-feb-2026/animation-extension.png new file mode 100644 index 000000000000..20c044691112 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/animation-extension.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/arcade-pro.png b/docs/static/blog/arcade/update-feb-2026/arcade-pro.png new file mode 100644 index 000000000000..ccdbfbc53ff2 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/arcade-pro.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/codectrl.png b/docs/static/blog/arcade/update-feb-2026/codectrl.png new file mode 100644 index 000000000000..c8c29d4c6f79 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/codectrl.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/explain-ai-blocks.png b/docs/static/blog/arcade/update-feb-2026/explain-ai-blocks.png new file mode 100644 index 000000000000..2ac3805f5f20 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/explain-ai-blocks.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/explain-ai-text.png b/docs/static/blog/arcade/update-feb-2026/explain-ai-text.png new file mode 100644 index 000000000000..f459852972f6 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/explain-ai-text.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/feedback.png b/docs/static/blog/arcade/update-feb-2026/feedback.png new file mode 100644 index 000000000000..c842745bfa35 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/feedback.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/game-window.png b/docs/static/blog/arcade/update-feb-2026/game-window.png new file mode 100644 index 000000000000..456bf3c8a15f Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/game-window.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/keyboard-controls-menu.png b/docs/static/blog/arcade/update-feb-2026/keyboard-controls-menu.png new file mode 100644 index 000000000000..369fc1f32863 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/keyboard-controls-menu.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/math-constants.png b/docs/static/blog/arcade/update-feb-2026/math-constants.png new file mode 100644 index 000000000000..1032f6172b19 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/math-constants.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/mini-menu-card.png b/docs/static/blog/arcade/update-feb-2026/mini-menu-card.png new file mode 100644 index 000000000000..8b46f05e7234 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/mini-menu-card.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/mini-menu-example.png b/docs/static/blog/arcade/update-feb-2026/mini-menu-example.png new file mode 100644 index 000000000000..25cf22bf4fc4 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/mini-menu-example.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/share-project-desc.png b/docs/static/blog/arcade/update-feb-2026/share-project-desc.png new file mode 100644 index 000000000000..c0628a5cd1f1 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/share-project-desc.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/share-project-dialog.png b/docs/static/blog/arcade/update-feb-2026/share-project-dialog.png new file mode 100644 index 000000000000..e41bbe60c954 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/share-project-dialog.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/share-project.png b/docs/static/blog/arcade/update-feb-2026/share-project.png new file mode 100644 index 000000000000..a0af3a9b3b46 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/share-project.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/share-tutorial-dialog.png b/docs/static/blog/arcade/update-feb-2026/share-tutorial-dialog.png new file mode 100644 index 000000000000..b829d2bb7f52 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/share-tutorial-dialog.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/share-tutorial.png b/docs/static/blog/arcade/update-feb-2026/share-tutorial.png new file mode 100644 index 000000000000..8e6dd76b6524 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/share-tutorial.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/shortcut-menu.png b/docs/static/blog/arcade/update-feb-2026/shortcut-menu.png new file mode 100644 index 000000000000..5d11780211da Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/shortcut-menu.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/sidedocs.png b/docs/static/blog/arcade/update-feb-2026/sidedocs.png new file mode 100644 index 000000000000..112f881e22c9 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/sidedocs.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/theme.png b/docs/static/blog/arcade/update-feb-2026/theme.png new file mode 100644 index 000000000000..934c892c34eb Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/theme.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/tile-scanner-card.png b/docs/static/blog/arcade/update-feb-2026/tile-scanner-card.png new file mode 100644 index 000000000000..7b133512791c Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/tile-scanner-card.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/tile-scanner1.png b/docs/static/blog/arcade/update-feb-2026/tile-scanner1.png new file mode 100644 index 000000000000..6323fb615270 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/tile-scanner1.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/tile-scanner2.png b/docs/static/blog/arcade/update-feb-2026/tile-scanner2.png new file mode 100644 index 000000000000..e1951cd771e5 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/tile-scanner2.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/tilemap-gallery.png b/docs/static/blog/arcade/update-feb-2026/tilemap-gallery.png new file mode 100644 index 000000000000..3191fde1e901 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/tilemap-gallery.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/tilemap.png b/docs/static/blog/arcade/update-feb-2026/tilemap.png new file mode 100644 index 000000000000..b233cfac4b89 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/tilemap.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/unfollow-block.png b/docs/static/blog/arcade/update-feb-2026/unfollow-block.png new file mode 100644 index 000000000000..9bc3eb70cae4 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/unfollow-block.png differ diff --git a/docs/static/blog/arcade/update-feb-2026/youtube-player-edu.png b/docs/static/blog/arcade/update-feb-2026/youtube-player-edu.png new file mode 100644 index 000000000000..0fadab2ccf00 Binary files /dev/null and b/docs/static/blog/arcade/update-feb-2026/youtube-player-edu.png differ diff --git a/docs/static/blog/csp/summer-pd-2026/InfoSysBanner.png b/docs/static/blog/csp/summer-pd-2026/InfoSysBanner.png new file mode 100644 index 000000000000..897b487e1e93 Binary files /dev/null and b/docs/static/blog/csp/summer-pd-2026/InfoSysBanner.png differ diff --git a/docs/static/blog/csp/summer-pd-2026/MCEDULogo.png b/docs/static/blog/csp/summer-pd-2026/MCEDULogo.png new file mode 100644 index 000000000000..a690cd54fcd8 Binary files /dev/null and b/docs/static/blog/csp/summer-pd-2026/MCEDULogo.png differ diff --git a/docs/static/blog/csp/summer-pd-2026/MakeCodeSummerPDBanner.jpg b/docs/static/blog/csp/summer-pd-2026/MakeCodeSummerPDBanner.jpg new file mode 100644 index 000000000000..a7c21feb0f76 Binary files /dev/null and b/docs/static/blog/csp/summer-pd-2026/MakeCodeSummerPDBanner.jpg differ diff --git a/docs/static/blog/csp/summer-pd-2026/microbitLogo.png b/docs/static/blog/csp/summer-pd-2026/microbitLogo.png new file mode 100644 index 000000000000..9bdd6862d84f Binary files /dev/null and b/docs/static/blog/csp/summer-pd-2026/microbitLogo.png differ diff --git a/docs/static/extensions/asset-pack-set.png b/docs/static/extensions/asset-pack-set.png new file mode 100644 index 000000000000..c74224a3841d Binary files /dev/null and b/docs/static/extensions/asset-pack-set.png differ diff --git a/docs/static/extensions/asset-pack-unset.png b/docs/static/extensions/asset-pack-unset.png new file mode 100644 index 000000000000..7575c2c09b83 Binary files /dev/null and b/docs/static/extensions/asset-pack-unset.png differ diff --git a/docs/static/extensions/shark-image-assets.png b/docs/static/extensions/shark-image-assets.png new file mode 100644 index 000000000000..d09eca226a90 Binary files /dev/null and b/docs/static/extensions/shark-image-assets.png differ diff --git a/docs/static/tools/code-eval-tool.png b/docs/static/tools/code-eval-tool.png new file mode 100644 index 000000000000..3c1da8f67020 Binary files /dev/null and b/docs/static/tools/code-eval-tool.png differ diff --git a/docs/tools.md b/docs/tools.md index 605361c3d9b2..c62ada5e3f65 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -1,5 +1,16 @@ # MakeCode Tools +## Code Evaluation Tool + +![A screenshot of the Code Evaluation Tool page](/static/tools/code-eval-tool.png) + +Create a checklist of rules to evaluate student projects. Use AI prompts to get deeper insights and generate feedback. + +### Code Evaluation Tool Pages + +- [MakeCode Arcade](https://arcade.makecode.com/--eval) +- [MakeCode for micro:bit](https://makecode.microbit.org/--eval) + ## [GitHub Explorer](/github-explorer) ![A screenshot of the GitHub Explorer page](/static/tools/github-explorer.png) @@ -40,6 +51,8 @@ Create a SVG image of the blocks shown for selected lines of code. Copy the scre ## See Also +[Code Evaluation Tool (Arcade)](https://arcade.makecode.com/--eval), +[Code Evaluation Tool (micro:bit)](https://makecode.microbit.org/--eval), [GitHub Explorer](/github-explorer), [Playground](/playground), [Tutorial tool](/tutorial-tool), diff --git a/docs/trademarks-ref.json b/docs/trademarks-ref.json index ef2bfb970f81..d6666db40466 100644 --- a/docs/trademarks-ref.json +++ b/docs/trademarks-ref.json @@ -1,3 +1,3 @@ { - "redirect": "https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/default.aspx " -} \ No newline at end of file + "redirect": "https://www.microsoft.com/legal/intellectualproperty/trademarks" +} diff --git a/docs/writing-docs/tutorials/basics.md b/docs/writing-docs/tutorials/basics.md index 6d6ddbe27048..570f85c23bd7 100644 --- a/docs/writing-docs/tutorials/basics.md +++ b/docs/writing-docs/tutorials/basics.md @@ -289,7 +289,7 @@ The `BlocksExistValidator` also has an `Enabled` property that determines whethe ``` ```` -**Enable the `BlocksExistValidator` globally and ignore highlighted blocks** +**Enable the `BlocksExistValidator` globally and ignore highlighted blocks** _Note: highlight is not specified in the markers property._ ```` ```validation.global @@ -306,7 +306,7 @@ _Note: highlight is not specified in the markers property._ ``` ```` ## Accordion/hidden hints -If you want to provide extra information without having to divert the coder's attention, you can include content in an "accordion" style hint control. +If you want to provide extra information without having to divert the coder's attention, you can include content in an "accordion" style hint control. ### ~ hint If you want your hint to display by default when a step is encountered see [Explicit Hints](/writing-docs/tutorials/control-options#explicit-hints). @@ -383,3 +383,55 @@ If your tutorial requires the use of an extension, you can add it using the [pac microturtle=github:microsoft/pxt-microturtle ``` ```` + +These dependencies will be merged into the dependencies of the default project (i.e. the project you get when you click "New Project" on the home page). + +For example, in pxt-microbit the default project's dependencies look like this: + +```json +{ + "dependencies": { + "core": "*", + "radio": "*", + "microphone": "*" + } +} +``` + +With the above package annotation, the dependencies would be updated to include and entry for `microturtle` like so: + +```json +{ + "dependencies": { + "core": "*", + "radio": "*", + "microphone": "*", + "microturtle": "microsoft/pxt-microturtle" + } +} +``` + +If your tutorial needs to remove one of the default dependencies from the project, you can do so by placing the word "remove" after the equals sign. + +For example, the `bluetooth` extension in pxt-microbit is not compatible with the default `radio` extension. If we wanted to author a `bluetooth` tutorial, we would need to remove the `radio` extension like so: + +```` +```package +bluetooth +radio=remove +``` +```` + +which would result in: + +```json +{ + "dependencies": { + "core": "*", + "microphone": "*", + "bluetooth": "*" + } +} +``` + +In general, it's better not to remove any dependencies from the project unless absolutely required! \ No newline at end of file diff --git a/libs/bare/basic.ts b/libs/bare/basic.ts index f208af49b222..c3dcd56e1a87 100644 --- a/libs/bare/basic.ts +++ b/libs/bare/basic.ts @@ -18,6 +18,7 @@ namespace control { * @param ms how long to pause for, eg: 100, 200, 500, 1000, 2000 */ //% async block="pause (ms) %pause" + //% ms.label="value" //% blockId=device_pause icon="\uf110" shim=basic::pause export function pause(ms: number): void { } @@ -42,6 +43,7 @@ namespace console { //% weight=90 //% help=console/log blockGap=8 text.shadowOptions.toString=true //% blockId=console_log block="console|log %text" + //% value.label="value" export function log(value: any): void { let s: string = value + "" control.__log(s) diff --git a/libs/pxt-common/pxt-core.d.ts b/libs/pxt-common/pxt-core.d.ts index dc9ad87e270e..00cdce5f3202 100644 --- a/libs/pxt-common/pxt-core.d.ts +++ b/libs/pxt-common/pxt-core.d.ts @@ -15,6 +15,7 @@ interface Array { //% help=arrays/push //% shim=Array_::push weight=50 //% blockId="array_push" block="%list| add value %value| to end" blockNamespace="arrays" + //% list.label="list to change" item.label="value to add" //% group="Modify" push(item: T): void; @@ -31,6 +32,7 @@ interface Array { //% help=arrays/pop //% shim=Array_::pop weight=45 //% blockId="array_pop" block="get and remove last value from %list" blockNamespace="arrays" + //% list.label="list to change" //% group="Read" pop(): T; @@ -40,6 +42,7 @@ interface Array { //% help=arrays/reverse //% helper=arrayReverse weight=10 //% blockId="array_reverse" block="reverse %list" blockNamespace="arrays" + //% list.label="list to change" //% group="Operations" reverse(): void; @@ -49,6 +52,7 @@ interface Array { //% help=arrays/shift //% helper=arrayShift weight=30 //% blockId="array_shift" block="get and remove first value from %list" blockNamespace="arrays" + //% list.label="list to change" //% group="Read" shift(): T; @@ -59,6 +63,7 @@ interface Array { //% help=arrays/unshift //% helper=arrayUnshift weight=25 //% blockId="array_unshift" block="%list| insert %value| at beginning" blockNamespace="arrays" + //% list.label="list to change" value.label="value to add" //% group="Modify" //unshift(...values:T[]): number; //rest is not supported in our compiler yet. unshift(value: T): number; @@ -159,6 +164,7 @@ interface Array { //% help=arrays/remove-at //% shim=Array_::removeAt weight=47 //% blockId="array_removeat" block="%list| get and remove value at %index" blockNamespace="arrays" + //% list.label="list to change" index.label="position within list" //% group="Read" removeAt(index: number): T; @@ -170,6 +176,7 @@ interface Array { //% help=arrays/insert-at //% shim=Array_::insertAt weight=20 //% blockId="array_insertAt" block="%list| insert at %index| value %value" blockNamespace="arrays" + //% list.label="list to change" index.label="position within list" value.label="value to add" //% group="Modify" insertAt(index: number, value: T): void; @@ -181,6 +188,7 @@ interface Array { //% help=arrays/index-of //% shim=Array_::indexOf weight=40 //% blockId="array_indexof" block="%list| find index of %value" blockNamespace="arrays" + //% list.label="list to check" item.label="value to find" //% group="Operations" indexOf(item: T, fromIndex?: number): number; @@ -207,6 +215,7 @@ interface Array { //% help=arrays/pick-random //% helper=arrayPickRandom weight=25 //% blockId="array_pickRandom" block="get random value from %list" + //% list.label="list to check" //% blockNamespace="arrays" //% group="Read" _pickRandom(): T; @@ -220,6 +229,7 @@ interface Array { //% help=arrays/unshift //% helper=arrayUnshift weight=24 //% blockId="array_unshift_statement" block="%list| insert %value| at beginning" blockNamespace="arrays" + //% list.label="list to change" value.label="value to add" //% blockAliasFor="Array.unshift" //% group="Modify" _unshiftStatement(value: T): void; @@ -230,6 +240,7 @@ interface Array { //% help=arrays/pop //% shim=Array_::pop weight=44 //% blockId="array_pop_statement" block="remove last value from %list" blockNamespace="arrays" + //% list.label="list to change" //% blockAliasFor="Array.pop" //% group="Modify" _popStatement(): void; @@ -240,6 +251,7 @@ interface Array { //% help=arrays/shift //% helper=arrayShift weight=29 //% blockId="array_shift_statement" block="remove first value from %list" blockNamespace="arrays" + //% list.label="list to change" //% blockAliasFor="Array.shift" //% group="Modify" _shiftStatement(): void; @@ -248,6 +260,7 @@ interface Array { //% help=arrays/remove-at-statement //% shim=Array_::removeAt weight=14 //% blockId="array_removeat_statement" block="%list| remove value at %index" blockNamespace="arrays" + //% list.label="list to change" index.label="position within list" //% blockAliasFor="Array.removeAt" //% group="Modify" _removeAtStatement(index: number): void; @@ -272,6 +285,7 @@ declare interface String { //% shim=String_::charAt weight=48 //% help=text/char-at //% blockId="string_get" block="char from %this=text|at %pos" blockNamespace="text" + //% this.label="value" index.label="position within text" //% this.defl="this" charAt(index: number): string; @@ -287,6 +301,7 @@ declare interface String { //% shim=String_::charCodeAt weight=46 //% help=text/char-code-at //% blockId="string_charcode_at" block="char code from $this=text|at $index" blockNamespace="text" + //% this.label="value" index.label="position within text" //% this.defl="this" charCodeAt(index: number): number; @@ -297,6 +312,7 @@ declare interface String { //% shim=String_::compare //% help=text/compare //% blockId="string_compare" block="compare %this=text| to %that" blockNamespace="text" + //% this.label="value" that.label="other value" //% this.defl="this" compare(that: string): number; @@ -309,6 +325,7 @@ declare interface String { //% help=text/substr //% blockId=string_substr_new //% block="substring of $this|from $start||of length $length" + //% this.label="value" start.label="start position" length.label="length" //% this.shadow="text" //% this.defl="this" //% blockNamespace="text" @@ -348,6 +365,7 @@ declare interface String { //% help=text/is-empty //% blockId="string_isempty" blockNamespace="text" //% block="%this=text| is empty" + //% this.label="value" //% this.defl="this" isEmpty(): boolean; @@ -360,6 +378,7 @@ declare interface String { //% help=text/index-of //% blockId="string_indexof" blockNamespace="text" //% block="%this=text|find index of %searchValue" + //% this.label="value" searchValue.label="text to find" //% this.defl="this" indexOf(searchValue: string, start?: number): number; @@ -372,6 +391,7 @@ declare interface String { //% help=text/includes //% blockId="string_includes" blockNamespace="text" //% block="%this=text|includes %searchValue" + //% this.label="value" searchValue.label="text to find" //% this.defl="this" includes(searchValue: string, start?: number): boolean; @@ -384,6 +404,7 @@ declare interface String { //% help=text/split //% blockId="string_split" blockNamespace="text" //% block="split %this=text|at %separator" + //% this.label="value" separator.label="separator" //% this.defl="this" split(separator?: string, limit?: number): string[]; @@ -415,6 +436,7 @@ declare interface String { //% helper=stringSubstr //% help=text/substr //% blockId="string_substr" block="substring of %this=text|from %start|of length %length" blockNamespace="text" + //% this.label="value" start.label="start position" length.label="length" //% this.defl="this" //% blockAliasFor="String.substr" //% deprecated @@ -430,6 +452,7 @@ declare interface String { //% shim=String_::toNumber //% help=text/parse-float //% blockId="string_parsefloat" block="parse to number %text" blockNamespace="text" +//% text.label="value" //% text.defl="123" declare function parseFloat(text: string): number; @@ -440,6 +463,7 @@ declare function parseFloat(text: string): number; * @param max the upper inclusive bound, eg: 10 */ //% blockId="device_random" block="pick random %min|to %limit" +//% min.label="minimum" max.label="maximum" //% blockNamespace="Math" //% help=math/randint //% shim=Math_::randomRange @@ -485,6 +509,7 @@ declare namespace String { //% help=math/from-char-code //% shim=String_::fromCharCode weight=1 //% blockNamespace="text" blockId="stringFromCharCode" block="text from char code %code" + //% code.label="value" function fromCharCode(code: number): string; } @@ -542,6 +567,7 @@ declare namespace Math { * @param max the upper inclusive bound, eg: 10 */ //% blockId="device_random_deprecated" block="pick random %min|to %limit" + //% min.label="minimum" max.label="maximum" //% help=math/random-range deprecated //% shim=Math_::randomRange function randomRange(min: number, max: number): number; diff --git a/libs/pxt-common/pxt-helpers.ts b/libs/pxt-common/pxt-helpers.ts index 73cbb6fffad5..a6b0e6fe2cc9 100644 --- a/libs/pxt-common/pxt-helpers.ts +++ b/libs/pxt-common/pxt-helpers.ts @@ -40,6 +40,7 @@ interface StringMap { */ //% help=text/parse-int //% blockId="string_parseint" block="parse to integer %text" blockNamespace="text" +//% text.label="value" //% text.defl="123" //% blockHidden=1 function parseInt(text: string, radix?: number): number { @@ -65,14 +66,14 @@ function parseInt(text: string, radix?: number): number { switch (text.charAt(start)) { case "-": sign = -1; - // fallthrough + // fallthrough case "+": ++start; } if ((!radix || radix == 16) - && "0" === text[start] - && ("x" === text[start + 1] || "X" === text[start + 1])) { + && "0" === text[start] + && ("x" === text[start + 1] || "X" === text[start + 1])) { radix = 16; start += 2; } else if (!radix) { @@ -753,3 +754,170 @@ namespace __internal { return ms; } } + + +// Converted to TS from https://github.com/Qix-/color-convert/blob/5c106a633b5cd2de554d9c287ad31f9eeca7a271/conversions.js +// See ThirdPartyNotice in microsoft/pxt for license information +namespace colorHelpers { + /** + * Converts a red, green, and blue color value into a single color number. + * + * + * @param red The red component of the color, between 0 and 255 + * @param green The green component of the color, between 0 and 255 + * @param blue The blue component of the color, between 0 and 255 + * @returns The combined color as a single number + */ + export function rgb(red: number, green: number, blue: number): number { + return (Math.clamp(0, 255, red) << 16) | (Math.clamp(0, 255, green) << 8) | Math.clamp(0, 255, blue); + } + + /** + * Converts a hue, saturation, and value (HSV) color into a single color number. + * + * + * @param hue The hue component of the color, between 0 and 360 + * @param saturation The saturation component of the color, between 0 and 100 + * @param value The value component of the color, between 0 and 100 + * @returns The combined color as a single number + */ + export function hsv(hue: number, saturation: number, value: number): number { + hue = Math.clamp(0, 360, hue) / 60; + saturation = Math.clamp(0, 100, saturation) / 100; + value = Math.clamp(0, 100, value) / 100; + + const hi = Math.floor(hue) % 6; + + const f = hue - Math.floor(hue); + const p = 255 * value * (1 - saturation); + const q = 255 * value * (1 - (saturation * f)); + const t = 255 * value * (1 - (saturation * (1 - f))); + value *= 255; + + switch (hi) { + case 0: + return rgb(value, t, p); + case 1: + return rgb(q, value, p); + case 2: + return rgb(p, value, t); + case 3: + return rgb(p, q, value); + case 4: + return rgb(t, p, value); + case 5: + return rgb(value, p, q); + } + + // never + return 0; + } + + /** + * Converts a hue, saturation, and lightness (HSL) color into a single color number. + * + * + * @param hue The hue component of the color, between 0 and 360 + * @param saturation The saturation component of the color, between 0 and 100 + * @param lightness The lightness component of the color, between 0 and 100 + * @returns The combined color as a single number + */ + export function hsl(hue: number, saturation: number, lightness: number): number { + hue = Math.clamp(0, 360, hue) / 360; + saturation = Math.clamp(0, 100, saturation) / 100; + lightness = Math.clamp(0, 100, lightness) / 100; + + let t3: number; + let value: number; + + if (saturation === 0) { + value = lightness * 255; + return rgb(value, value, value); + } + + const t2 = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation; + + const t1 = 2 * lightness - t2; + + const channels: number[] = [0, 0, 0]; + for (let i = 0; i < 3; i++) { + t3 = hue + 1 / 3 * -(i - 1); + if (t3 < 0) { + t3++; + } + + if (t3 > 1) { + t3--; + } + + if (6 * t3 < 1) { + value = t1 + (t2 - t1) * 6 * t3; + } + else if (2 * t3 < 1) { + value = t2; + } + else if (3 * t3 < 2) { + value = t1 + (t2 - t1) * (2 / 3 - t3) * 6; + } + else { + value = t1; + } + + channels[i] = value * 255; + } + + return rgb(channels[0], channels[1], channels[2]); + } + + /** + * Converts a hexadecimal color string into a single color number. The hexadecimal string can be in the short + * 3-digit form ("#f0a") or the full 6-digit form ("#ff00aa"). + * + * + * @param hex A hexadecimal color string, optionally starting with "#" and either in 3-digit or 6-digit format + * @returns The combined color as a single number + */ + export function hex(hex: string): number { + if (hex.charAt(0) === "#") { + hex = hex.slice(1); + } + + if (hex.length === 3) { + hex = hex.split("").map(c => c + c).join(""); + } + + if (hex.length !== 6) { + return 0; + } + + const num = parseInt(hex, 16); + if (isNaN(num)) { + return 0; + } + + return num; + } + + /** + * Converts a CMYK color into a single color number. + * + * + * @param cyan The cyan component of the color, between 0 and 100 + * @param magenta The magenta component of the color, between 0 and 100 + * @param yellow The yellow component of the color, between 0 and 100 + * @param black The black component of the color, between 0 and 100 + * @returns The combined color as a single number + */ + export function cmyk(cyan: number, magenta: number, yellow: number, black: number): number { + cyan = Math.clamp(0, 100, cyan) / 100; + magenta = Math.clamp(0, 100, magenta) / 100; + yellow = Math.clamp(0, 100, yellow) / 100; + black = Math.clamp(0, 100, black) / 100; + + const r = 1 - Math.min(1, cyan * (1 - black) + black); + const g = 1 - Math.min(1, magenta * (1 - black) + black); + const b = 1 - Math.min(1, yellow * (1 - black) + black); + + return rgb(r * 255, g * 255, b * 255); + } +} \ No newline at end of file diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts index 7df549db71e5..a7eb379bb604 100644 --- a/localtypings/pxtarget.d.ts +++ b/localtypings/pxtarget.d.ts @@ -24,6 +24,8 @@ declare namespace pxt { multiplayer?: MultiplayerConfig; // common galleries galleries?: pxt.Map; + // additional galleries included in projects search but not shown on the homescreen + searchGalleries?: pxt.Map; // localized galleries localizedGalleries?: pxt.Map>; windowsStoreLink?: string; @@ -904,13 +906,7 @@ declare namespace ts.pxtc { icon?: string; jresURL?: string; iconURL?: string; - imageLiteral?: number; - gridLiteral?: number; - gridLiteralOnColor?: string; - gridLiteralOffColor?: string; - imageLiteralColumns?: number; // optional number of columns - imageLiteralRows?: number; // optional number of rows - imageLiteralScale?: number; // button sizing between 0.6 and 2, default is 1 + weight?: number; parts?: string; hiddenParts?: string; // allows an extesion to declaratively hide a part @@ -984,9 +980,27 @@ declare namespace ts.pxtc { enumIsHash?: boolean; // if true, the name of the enum is normalized, then hashed to generate the value enumPromptHint?: string; // The hint that will be displayed in the member creation prompt enumInitialMembers?: string[]; // The initial enum values which will be given the lowest values available + ariaLabel?: string; // The aria label for the enum value if the screen reader text should differ from the block value in dropdown items /* end enum-only attributes */ + /* led matrix field editor attributes */ + + imageLiteral?: number; + gridLiteral?: number; + colorGridLiteral?: number; + gridLiteralPalette?: string; + gridLiteralPaletteNames?: string; + gridLiteralUseProjectPalette?: boolean; + gridLiteralOnColor?: string; + gridLiteralOffColor?: string; + gridLiteralVerticalSpacing?: number; // optional spacing between pixels, default is 5 + gridLiteralHorizontalSpacing?: number; // optional spacing between pixels, default is 7 + gridLiteralBorderRadius?: number; // optional border radius for pixels, default is 5 + imageLiteralColumns?: number; // optional number of columns + imageLiteralRows?: number; // optional number of rows + imageLiteralScale?: number; // button sizing between 0.6 and 2, default is 1 + isKind?: boolean; // annotation for built-in kinds in library code kindMemberName?: string; // The name a member of the kind as it will appear in the blocks editor. If the kind was "Colors" this would be "color" @@ -1003,12 +1017,15 @@ declare namespace ts.pxtc { _expandedDef?: ParsedBlockDef; _untranslatedBlock?: string; // The block definition before it was translated _untranslatedJsDoc?: string // the jsDoc before it was translated + _untranslatedParamDefl?: pxt.Map; // the parameter defaults before they were translated + _untranslatedAriaLabel?: string; // the aria label before it was translated _translatedLanguageCode?: string // the language this block has been translated into _shadowOverrides?: pxt.Map; jsDoc?: string; paramHelp?: pxt.Map; // foo.defl=12 -> paramDefl: { foo: "12" }; eg.: 12 in arg description will also go here paramDefl: pxt.Map; + paramLabels?: pxt.Map; //.label paramSnippets?: pxt.Map; // this lists arguments that have .defl as opposed to just eg.: stuff explicitDefaults?: string[]; @@ -1025,6 +1042,7 @@ declare namespace ts.pxtc { alias?: string; // another symbol alias for this member pyAlias?: string; // optional python version of the alias blockAliasFor?: string; // qname of the function this block is an alias for + builtinBlockId?: string; // if present, this block is to be replaced with a builtin block in the toolbox } interface ParamSnippet { @@ -1117,6 +1135,7 @@ declare namespace ts.pxtc { fileSystem: pxt.Map; target: CompileTarget; testMode?: boolean; + enhancedErrors?: boolean; // enable extra editor-only diagnostics sourceFiles?: string[]; // list of file names sourceTexts?: string[]; // list of file text content (TS string) generatedFiles?: string[]; diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts index 77b5595b934f..bc353dcd30cb 100644 --- a/localtypings/pxteditor.d.ts +++ b/localtypings/pxteditor.d.ts @@ -814,7 +814,6 @@ declare namespace pxt.editor { editorOffset?: string; print?: boolean; greenScreen?: boolean; - accessibleBlocks?: boolean; home?: boolean; hasError?: boolean; cancelledDownload?: boolean; @@ -824,6 +823,7 @@ declare namespace pxt.editor { errorListCollapsed?: boolean; screenshoting?: boolean; extensionsVisible?: boolean; + extensionsToolboxTriggered?: boolean; isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks? activeTourConfig?: pxt.tour.TourConfig; areaMenuOpen?: boolean; @@ -1050,9 +1050,8 @@ declare namespace pxt.editor { toggleHighContrast(): void; setHighContrast(on: boolean): void; + toggleScreenReaderMode(eventSource: string): void; toggleGreenScreen(): void; - toggleAccessibleBlocks(eventSource: string): void; - isAccessibleBlocks(): boolean; launchFullEditor(): void; resetWorkspace(): void; @@ -1098,10 +1097,11 @@ declare namespace pxt.editor { showChooseHwDialog(skipDownload?: boolean): void; showExperimentsDialog(): void; - showPackageDialog(query?: string): void; + showPackageDialog(toolboxTriggered?: boolean): void; showBoardDialogAsync(features?: string[], closeIcon?: boolean): Promise; checkForHwVariant(): boolean; pairAsync(): Promise; + shouldShowPairingDialogOnDownload(): boolean; createModalClasses(classes?: string): string; showModalDialogAsync(options: ModalDialogOptions): Promise; diff --git a/localtypings/pxtelectron.d.ts b/localtypings/pxtelectron.d.ts index c6f20ad28c63..f171dc581215 100644 --- a/localtypings/pxtelectron.d.ts +++ b/localtypings/pxtelectron.d.ts @@ -7,6 +7,7 @@ declare namespace pxt.electron { timeStamp?: string; // In the format of (new Date()).toISOString() isDriveDeployBanned?: boolean; isFileDeployBanned?: boolean; + isWebUSBDeployBanned?: boolean; } export const enum UpdateStatus { @@ -31,6 +32,10 @@ declare namespace pxt.electron { isProd: number; // If the app is production, this will be set to 1 } + export interface Capabilities { + webUSBDeploy?: boolean; + } + // Have to duplicate this here because of typings issue when building export interface CompileResult { outfiles: pxt.Map; @@ -71,6 +76,7 @@ declare namespace pxt.electron { sendOpenDevTools: () => void; // Asks the app shell to open dev tools. sendDriveDeploy: (compileResult: CompileResult) => void; // Asks the app to deploy the program to the device via USB file copy. sendFileDeploy: (files: FileDeployRequest) => void // Asks the app to deploy the given files to a known folder. + capabilities?: Capabilities; versions: VersionInfo; // Various versions for telemetry base properties } } \ No newline at end of file diff --git a/localtypings/pxtmusic.d.ts b/localtypings/pxtmusic.d.ts index 7961550e4f26..317308b4bb23 100644 --- a/localtypings/pxtmusic.d.ts +++ b/localtypings/pxtmusic.d.ts @@ -45,6 +45,7 @@ declare namespace pxt.assets.music { notes: Note[]; startTick: number; endTick: number; + velocity?: number; } export interface Note { @@ -60,6 +61,7 @@ declare namespace pxt.assets.music { } export interface DrumInstrument { + name?: string; startFrequency: number; startVolume: number; steps: DrumSoundStep[]; diff --git a/localtypings/pxtpackage.d.ts b/localtypings/pxtpackage.d.ts index c5d007c11cb4..81eab469ddf0 100644 --- a/localtypings/pxtpackage.d.ts +++ b/localtypings/pxtpackage.d.ts @@ -98,6 +98,7 @@ declare namespace pxt { namespaces: {[index: string]: "visible" | "hidden" | "disabled"}, blocks: {[index: string]: "visible" | "hidden" | "disabled"}, } + disableHistory?: boolean; // if set to true, project history will not be saved for this project. useful for giant projects where diffing on each edit can slow things down } interface PackageExtension { @@ -158,6 +159,7 @@ declare namespace pxt { labelIcon?: string; labelClass?: string; tags?: string[]; // tags shown in home screen, colors specified in theme + searchTerms?: string[]; // extra terms used to improve home screen search matching tabIndex?: number; style?: string; // "card" | "item" | undefined; diff --git a/package.json b/package.json index d14827d63cb8..d2a6fce5f144 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pxt-core", - "version": "12.2.34", + "version": "13.1.2", "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors", "keywords": [ "TypeScript", @@ -61,7 +61,6 @@ }, "dependencies": { "@blockly/field-grid-dropdown": "6.0.4", - "@blockly/keyboard-navigation": "3.0.3", "@blockly/plugin-workspace-search": "10.1.2", "@crowdin/crowdin-api-client": "^1.33.0", "@fortawesome/fontawesome-free": "^5.15.4", @@ -72,7 +71,7 @@ "@zip.js/zip.js": "2.4.20", "adm-zip": "^0.5.12", "axios": "^1.12.2", - "blockly": "12.3.1", + "blockly": "13.1.1", "browserify": "17.0.0", "chai": "^3.5.0", "chalk": "^4.1.2", @@ -151,6 +150,12 @@ "yargs": "^17.7.2" }, "overrides": { + "@blockly/field-grid-dropdown": { + "blockly": "13.1.1" + }, + "@blockly/plugin-workspace-search": { + "blockly": "13.1.1" + }, "combine-source-map": { "source-map": "0.4.4" }, diff --git a/pxtblocks/builtins/functions.ts b/pxtblocks/builtins/functions.ts index 2cdda1c9dffd..a24b54bf6d9c 100644 --- a/pxtblocks/builtins/functions.ts +++ b/pxtblocks/builtins/functions.ts @@ -3,14 +3,11 @@ import * as Blockly from "blockly" import { installBuiltinHelpInfo } from "../help"; import { FunctionDefinitionBlock, FunctionManager } from "../plugins/functions"; -import { createFlyoutHeadingLabel } from "../toolbox"; import { FieldProcedure } from "../fields"; import { cachedBlockInfo, setOutputCheck } from "../loader"; import { domToWorkspaceNoEvents } from "../importer"; - -import { shouldDuplicateOnDrag } from "../plugins/duplicateOnDrag"; -import { PathObject } from "../plugins/renderer/pathObject"; import { FieldImageNoText } from "../fields/field_imagenotext"; +import { maybeMoveFocusFromButton } from "../utils"; export function initFunctions() { const msg = Blockly.Msg; @@ -211,8 +208,6 @@ export function initFunctions() { }; installBuiltinHelpInfo(functionReturnId); - Blockly.Procedures.flyoutCategory = flyoutCategory; - // Configure function editor argument icons const iconsMap: pxt.Map = { number: pxt.blocks.defaultIconForArgType("number"), @@ -297,7 +292,8 @@ function initReturnStatement(b: Blockly.Block) { return mutation; } - function updateShape() { + function updateShape(userTriggered?: boolean) { + let buttonToFocus: null | Blockly.Input = null; const returnValueInput = b.getInput("RETURN_VALUE"); if (returnValueVisible) { @@ -322,7 +318,7 @@ function initReturnStatement(b: Blockly.Block) { b.removeInput(buttonAddName); } if (!b.getInput(buttonRemName)) { - addMinusButton(); + buttonToFocus = addMinusButton(); } if (lastConnectedId) { @@ -353,11 +349,15 @@ function initReturnStatement(b: Blockly.Block) { b.removeInput(buttonRemName); } if (!b.getInput(buttonAddName)) { - addPlusButton(); + buttonToFocus = addPlusButton(); } } b.setInputsInline(true); + + if (userTriggered) { + maybeMoveFocusFromButton(buttonToFocus?.fieldRow[0]); + } } function setReturnValue(mutation: Element, hasReturnValue: boolean) { @@ -368,12 +368,12 @@ function initReturnStatement(b: Blockly.Block) { return mutation.getAttribute("no_return_value") !== "true" } - function addPlusButton() { - addButton(buttonAddName, (b as any).ADD_IMAGE_DATAURI, lf("Add return value")); + function addPlusButton(): Blockly.Input { + return addButton(buttonAddName, (b as any).ADD_IMAGE_DATAURI, lf("Add return value")); } - function addMinusButton() { - addButton(buttonRemName, (b as any).REMOVE_IMAGE_DATAURI, lf("Remove return value")); + function addMinusButton(): Blockly.Input { + return addButton(buttonRemName, (b as any).REMOVE_IMAGE_DATAURI, lf("Remove return value")); } function mutationString() { @@ -385,8 +385,8 @@ function initReturnStatement(b: Blockly.Block) { Blockly.Events.fire(new Blockly.Events.BlockChange(b, "mutation", null, pre, post)); } - function addButton(name: string, uri: string, alt: string) { - b.appendDummyInput(name) + function addButton(name: string, uri: string, alt: string): Blockly.Input { + return b.appendDummyInput(name) .appendField(new FieldImageNoText(uri, 24, 24, alt, () => { const oldMutation = mutationString(); returnValueVisible = !returnValueVisible; @@ -394,7 +394,7 @@ function initReturnStatement(b: Blockly.Block) { const preUpdate = mutationString() fireMutationChange(oldMutation, preUpdate); - updateShape(); + updateShape(true); const postUpdate = mutationString(); fireMutationChange(preUpdate, postUpdate); @@ -403,124 +403,3 @@ function initReturnStatement(b: Blockly.Block) { } } -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: false): Blockly.utils.toolbox.FlyoutItemInfo[]; -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: true): Element[]; -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: boolean): Element[] | Blockly.utils.toolbox.FlyoutItemInfo[] { - if (!useXml) return []; - - let xmlList: Element[] = []; - - if (!pxt.appTarget.appTheme.hideFlyoutHeadings) { - // Add the Heading label - let headingLabel = createFlyoutHeadingLabel(lf("Functions"), - pxt.toolbox.getNamespaceColor('functions'), - pxt.toolbox.getNamespaceIcon('functions'), - 'blocklyFlyoutIconfunctions'); - xmlList.push(headingLabel); - } - - const newFunction = lf("Make a Function..."); - const newFunctionTitle = lf("New function name:"); - - // Add the "Make a function" button - let button = Blockly.utils.xml.createElement('button'); - button.setAttribute('text', newFunction); - button.setAttribute('callbackKey', 'CREATE_FUNCTION'); - - let createFunction = (name: string) => { - /** - * Create matching definition block. - * - * - * test - * - * - */ - let topBlock = workspace.getTopBlocks(true)[0]; - let x = 10, y = 10; - if (topBlock) { - let xy = topBlock.getRelativeToSurfaceXY(); - x = xy.x + (Blockly as any).SNAP_RADIUS * (topBlock.RTL ? -1 : 1); - y = xy.y + (Blockly as any).SNAP_RADIUS * 2; - } - let xml = Blockly.utils.xml.createElement('xml'); - let block = Blockly.utils.xml.createElement('block'); - block.setAttribute('type', 'procedures_defnoreturn'); - block.setAttribute('x', String(x)); - block.setAttribute('y', String(y)); - let field = Blockly.utils.xml.createElement('field'); - field.setAttribute('name', 'NAME'); - field.appendChild(document.createTextNode(name)); - block.appendChild(field); - xml.appendChild(block); - let newBlockIds = domToWorkspaceNoEvents(xml, workspace); - // Close flyout and highlight block - Blockly.hideChaff(); - let newBlock = workspace.getBlockById(newBlockIds[0]) as Blockly.BlockSvg; - newBlock.select(); - // Center on the new block so we know where it is - workspace.centerOnBlock(newBlock.id, true); - } - - workspace.registerButtonCallback('CREATE_FUNCTION', function (button) { - let promptAndCheckWithAlert = (defaultName: string) => { - Blockly.dialog.prompt(newFunctionTitle, defaultName, function (newFunc) { - pxt.tickEvent('blocks.makeafunction'); - // Merge runs of whitespace. Strip leading and trailing whitespace. - // Beyond this, all names are legal. - if (newFunc) { - newFunc = newFunc.replace(/[\s\xa0]+/g, ' ').replace(/^ | $/g, ''); - if (newFunc == newFunction) { - // Ok, not ALL names are legal... - newFunc = null; - } - } - if (newFunc) { - if (workspace.getVariableMap().getVariable(newFunc)) { - Blockly.dialog.alert(Blockly.Msg.VARIABLE_ALREADY_EXISTS.replace('%1', - newFunc.toLowerCase()), - function () { - promptAndCheckWithAlert(newFunc); // Recurse - }); - } - else if (!Blockly.Procedures.isNameUsed(newFunc, workspace)) { - Blockly.dialog.alert(Blockly.Msg.PROCEDURE_ALREADY_EXISTS.replace('%1', - newFunc.toLowerCase()), - function () { - promptAndCheckWithAlert(newFunc); // Recurse - }); - } - else { - createFunction(newFunc); - } - } - }); - }; - promptAndCheckWithAlert('doSomething'); - }); - xmlList.push(button as HTMLElement); - - function populateProcedures(procedureList: any, templateName: any) { - for (let i = 0; i < procedureList.length; i++) { - let name = procedureList[i][0]; - let args = procedureList[i][1]; - // - // name - // - let block = Blockly.utils.xml.createElement('block'); - block.setAttribute('type', templateName); - block.setAttribute('gap', '16'); - block.setAttribute('colour', pxt.toolbox.getNamespaceColor('functions')); - let field = Blockly.utils.xml.createElement('field') - field.textContent = name; - field.setAttribute('name', 'NAME'); - block.appendChild(field); - xmlList.push(block as HTMLElement); - } - } - - let tuple = Blockly.Procedures.allProcedures(workspace); - populateProcedures(tuple[0], 'procedures_callnoreturn'); - - return xmlList; -} \ No newline at end of file diff --git a/pxtblocks/builtins/lists.ts b/pxtblocks/builtins/lists.ts index da834929db25..5fc3251f8e47 100644 --- a/pxtblocks/builtins/lists.ts +++ b/pxtblocks/builtins/lists.ts @@ -32,7 +32,8 @@ export function initLists() { { "type": "input_value", "name": "VALUE", - "check": ['Array'] + "check": ['Array'], + "ariaLabelText": lf("list to check") } ], "output": 'Number', @@ -53,12 +54,14 @@ export function initLists() { { "type": "input_value", "name": "LIST", - "check": "Array" + "check": "Array", + "ariaLabelText": lf("list to check") }, { "type": "input_value", "name": "INDEX", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("position within list") } ], "colour": pxt.toolbox.blockColors['arrays'], @@ -84,17 +87,20 @@ export function initLists() { { "type": "input_value", "name": "LIST", - "check": "Array" + "check": "Array", + "ariaLabelText": lf("list to change") }, { "type": "input_value", "name": "INDEX", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("position within list") }, { "type": "input_value", "name": "VALUE", - "check": null + "check": null, + "ariaLabelText": lf("value to set") } ], "previousStatement": null, diff --git a/pxtblocks/builtins/loops.ts b/pxtblocks/builtins/loops.ts index 3294c00ca03a..8fa04681bcb2 100644 --- a/pxtblocks/builtins/loops.ts +++ b/pxtblocks/builtins/loops.ts @@ -25,7 +25,8 @@ export function initLoops() { { "type": "input_value", "name": "COND", - "check": "Boolean" + "check": "Boolean", + "ariaLabelText": lf("condition") } ], "previousStatement": null, @@ -60,7 +61,8 @@ export function initLoops() { { "type": "input_value", "name": "TO", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("ending number") } ], "previousStatement": null, @@ -132,7 +134,8 @@ export function initLoops() { { "type": "input_value", "name": "TO", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("ending number") } ], "previousStatement": null, @@ -291,7 +294,8 @@ export function initLoops() { { "type": "input_value", "name": "LIST", - "check": ["Array", "String"] + "check": ["Array", "String"], + "ariaLabelText": lf("list to iterate over") } ], "previousStatement": null, @@ -339,7 +343,8 @@ export function initLoops() { { "type": "input_value", "name": "LIST", - "check": "Array" + "check": "Array", + "ariaLabelText": lf("list to iterate over") } ], "previousStatement": null, diff --git a/pxtblocks/builtins/math.ts b/pxtblocks/builtins/math.ts index ee07b75a74d0..9e5bbeea627e 100644 --- a/pxtblocks/builtins/math.ts +++ b/pxtblocks/builtins/math.ts @@ -29,12 +29,14 @@ export function initMath(blockInfo: pxtc.BlocksInfo) { { "type": "input_value", "name": "x", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("first value") }, { "type": "input_value", "name": "y", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("second value") } ], "inputsInline": true, @@ -69,7 +71,8 @@ export function initMath(blockInfo: pxtc.BlocksInfo) { { "type": "input_value", "name": "x", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("value") } ], "inputsInline": true, @@ -214,6 +217,10 @@ export function initMathOpBlock() { function addArgInput(b: Blockly.Block, second: boolean) { const i = b.appendValueInput("ARG" + (second ? 1 : 0)); i.setCheck("Number"); + i.setAriaLabelProvider(input => + b.getInput("ARG1") + ? (input.name === "ARG0" ? lf("first value") : lf("second value")) + : lf("value")); if (second) { (i.connection as any).setShadowDom(numberShadowDom()); (i.connection as any).respawnShadow_(); @@ -297,5 +304,6 @@ export function initMathRoundBlock() { function addArgInput(b: Blockly.Block) { const i = b.appendValueInput("ARG0"); i.setCheck("Number"); + i.setAriaLabelProvider(lf("value")); } -} \ No newline at end of file +} diff --git a/pxtblocks/builtins/misc.ts b/pxtblocks/builtins/misc.ts index 6a6d56abee17..433f7b7c8cdc 100644 --- a/pxtblocks/builtins/misc.ts +++ b/pxtblocks/builtins/misc.ts @@ -165,7 +165,8 @@ export function initOnStart() { { "type": "input_value", "name": "PREDICATE", - "check": "Boolean" + "check": "Boolean", + "ariaLabelText": lf("condition") } ], "inputsInline": true, diff --git a/pxtblocks/builtins/text.ts b/pxtblocks/builtins/text.ts index fdd930ca5928..a8060c90cb54 100644 --- a/pxtblocks/builtins/text.ts +++ b/pxtblocks/builtins/text.ts @@ -30,7 +30,8 @@ export function initText() { { "type": "input_value", "name": "VALUE", - "check": ['String'] + "check": ['String'], + "ariaLabelText": lf("value") } ], "output": 'Number', diff --git a/pxtblocks/builtins/variables.ts b/pxtblocks/builtins/variables.ts index 64a465042892..d45b3c964a80 100644 --- a/pxtblocks/builtins/variables.ts +++ b/pxtblocks/builtins/variables.ts @@ -2,91 +2,8 @@ import * as Blockly from "blockly"; import { createFlyoutGroupLabel, createFlyoutHeadingLabel, mkVariableFieldBlock } from "../toolbox"; import { installBuiltinHelpInfo, setBuiltinHelpInfo } from "../help"; -export const CREATE_VAR_BTN_ID = 'create-variable-btn'; - export function initVariables() { let varname = lf("{id:var}item"); - Blockly.Variables.flyoutCategory = flyoutCategory; - - Blockly.Variables.flyoutCategoryBlocks = function (workspace) { - let variableModelList = workspace.getVariableMap().getVariablesOfType(''); - - let xmlList: HTMLElement[] = []; - if (variableModelList.length > 0) { - let mostRecentVariable = variableModelList[variableModelList.length - 1]; - variableModelList.sort(Blockly.Variables.compareByName); - // variables getters first - for (let i = 0; i < variableModelList.length; i++) { - const variable = variableModelList[i]; - if (Blockly.Blocks['variables_get']) { - const block = mkVariableFieldBlock( - "variables_get", - variable.getId(), - variable.getType(), - variable.getName(), - false - ); - block.setAttribute("gap", "8"); - xmlList.push(block); - } - } - xmlList[xmlList.length - 1].setAttribute('gap', '24'); - - if (Blockly.Blocks['variables_change'] || Blockly.Blocks['variables_set']) { - xmlList.unshift(createFlyoutGroupLabel(lf("Your Variables"))); - } - - if (Blockly.Blocks['variables_change']) { - let gap = Blockly.Blocks['variables_get'] ? 20 : 8; - const block = mkVariableFieldBlock( - "variables_change", - mostRecentVariable.getId(), - mostRecentVariable.getType(), - mostRecentVariable.getName(), - false - ); - block.setAttribute("gap", gap + "") - { - let value = Blockly.utils.xml.createElement('value'); - value.setAttribute('name', 'VALUE'); - let shadow = Blockly.utils.xml.createElement('shadow'); - shadow.setAttribute("type", "math_number"); - value.appendChild(shadow); - let field = Blockly.utils.xml.createElement('field'); - field.setAttribute('name', 'NUM'); - field.appendChild(document.createTextNode("1")); - shadow.appendChild(field); - block.appendChild(value); - } - xmlList.unshift(block); - } - if (Blockly.Blocks['variables_set']) { - let gap = Blockly.Blocks['variables_change'] ? 8 : 24; - const block = mkVariableFieldBlock( - "variables_set", - mostRecentVariable.getId(), - mostRecentVariable.getType(), - mostRecentVariable.getName(), - false - ); - block.setAttribute("gap", gap + "") - { - let value = Blockly.utils.xml.createElement('value'); - value.setAttribute('name', 'VALUE'); - let shadow = Blockly.utils.xml.createElement('shadow'); - shadow.setAttribute("type", "math_number"); - value.appendChild(shadow); - let field = Blockly.utils.xml.createElement('field'); - field.setAttribute('name', 'NUM'); - field.appendChild(document.createTextNode("0")); - shadow.appendChild(field); - block.appendChild(value); - } - xmlList.unshift(block); - } - } - return xmlList; - }; // builtin variables_get const msg = Blockly.Msg; @@ -150,6 +67,7 @@ export function initVariables() { { "type": "input_value", "name": "VALUE", + "ariaLabelText": lf("value to set"), }, ], "previousStatement": null, @@ -182,7 +100,8 @@ export function initVariables() { { "type": "input_value", "name": "VALUE", - "check": "Number" + "check": "Number", + "ariaLabelText": lf("amount to change by") } ], "inputsInline": true, @@ -226,9 +145,7 @@ export function initVariables() { msg.RENAME_VARIABLE_TITLE = lf("Rename all '%1' variables to:"); } -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: false): Blockly.utils.toolbox.FlyoutItemInfo[]; -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: true): Element[]; -function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: boolean): Element[] | Blockly.utils.toolbox.FlyoutItemInfo[] { +export function createVariablesFlyoutCategory(workspace: Blockly.WorkspaceSvg): Element[] { let xmlList: HTMLElement[] = []; if (!pxt.appTarget.appTheme.hideFlyoutHeadings) { @@ -242,8 +159,6 @@ function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: boolean): Eleme const button = document.createElement('button') as HTMLElement; button.setAttribute('text', lf("Make a Variable...")); button.setAttribute('callbackKey', 'CREATE_VARIABLE'); - // This id is used to re-focus the create variable button after the dialog is closed. - button.setAttribute('id', CREATE_VAR_BTN_ID); workspace.registerButtonCallback('CREATE_VARIABLE', function (button) { Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace()); @@ -251,7 +166,86 @@ function flyoutCategory(workspace: Blockly.WorkspaceSvg, useXml: boolean): Eleme xmlList.push(button); - const blockList = Blockly.Variables.flyoutCategoryBlocks(workspace) as HTMLElement[]; - xmlList = xmlList.concat(blockList); + xmlList = xmlList.concat(flyoutCategoryBlocks(workspace)); + return xmlList; +} + +function flyoutCategoryBlocks(workspace: Blockly.WorkspaceSvg): HTMLElement[] { + const variableModelList = workspace.getVariableMap().getVariablesOfType(''); + + const xmlList: HTMLElement[] = []; + if (variableModelList.length > 0) { + const mostRecentVariable = variableModelList[variableModelList.length - 1]; + variableModelList.sort(Blockly.Variables.compareByName); + // variables getters first + for (let i = 0; i < variableModelList.length; i++) { + const variable = variableModelList[i]; + if (Blockly.Blocks['variables_get']) { + const block = mkVariableFieldBlock( + "variables_get", + variable.getId(), + variable.getType(), + variable.getName(), + false + ); + block.setAttribute("gap", "8"); + xmlList.push(block); + } + } + xmlList[xmlList.length - 1].setAttribute('gap', '24'); + + if (Blockly.Blocks['variables_change'] || Blockly.Blocks['variables_set']) { + xmlList.unshift(createFlyoutGroupLabel(lf("Your Variables"))); + } + + if (Blockly.Blocks['variables_change']) { + const gap = Blockly.Blocks['variables_get'] ? 20 : 8; + const block = mkVariableFieldBlock( + "variables_change", + mostRecentVariable.getId(), + mostRecentVariable.getType(), + mostRecentVariable.getName(), + false + ); + block.setAttribute("gap", gap + "") + { + const value = Blockly.utils.xml.createElement('value'); + value.setAttribute('name', 'VALUE'); + const shadow = Blockly.utils.xml.createElement('shadow'); + shadow.setAttribute("type", "math_number"); + value.appendChild(shadow); + const field = Blockly.utils.xml.createElement('field'); + field.setAttribute('name', 'NUM'); + field.appendChild(document.createTextNode("1")); + shadow.appendChild(field); + block.appendChild(value); + } + xmlList.unshift(block); + } + if (Blockly.Blocks['variables_set']) { + const gap = Blockly.Blocks['variables_change'] ? 8 : 24; + const block = mkVariableFieldBlock( + "variables_set", + mostRecentVariable.getId(), + mostRecentVariable.getType(), + mostRecentVariable.getName(), + false + ); + block.setAttribute("gap", gap + "") + { + const value = Blockly.utils.xml.createElement('value'); + value.setAttribute('name', 'VALUE'); + const shadow = Blockly.utils.xml.createElement('shadow'); + shadow.setAttribute("type", "math_number"); + value.appendChild(shadow); + const field = Blockly.utils.xml.createElement('field'); + field.setAttribute('name', 'NUM'); + field.appendChild(document.createTextNode("0")); + shadow.appendChild(field); + block.appendChild(value); + } + xmlList.unshift(block); + } + } return xmlList; -}; \ No newline at end of file +} \ No newline at end of file diff --git a/pxtblocks/compiler/compiler.ts b/pxtblocks/compiler/compiler.ts index c7905e63b492..70cbf34b95ea 100644 --- a/pxtblocks/compiler/compiler.ts +++ b/pxtblocks/compiler/compiler.ts @@ -12,6 +12,7 @@ import { FieldTilemap, FieldTextInput } from "../fields"; import { CommonFunctionBlock } from "../plugins/functions/commonFunctionMixin"; import { getContainingFunction } from "../plugins/duplicateOnDrag"; import { FUNCTION_DEFINITION_BLOCK_TYPE } from "../plugins/functions/constants"; +import { COLOR_NUMBER_BLOCK_TYPE, COLOR_PICKER_BLOCK_TYPE, COLOR_STRING_BLOCK_TYPE } from "../plugins/colorpicker"; interface Rect { @@ -436,8 +437,8 @@ export function compileExpression(e: Environment, b: Blockly.Block, comments: st case "math_number": case "math_integer": case "math_whole_number": - expr = compileNumber(e, b, comments); break; case "math_number_minmax": + case COLOR_NUMBER_BLOCK_TYPE: expr = compileNumber(e, b, comments); break; case "math_op2": expr = compileMathOp2(e, b, comments); break; @@ -457,6 +458,7 @@ export function compileExpression(e: Environment, b: Blockly.Block, comments: st case "variables_get_reporter": expr = compileVariableGet(e, b); break; case "text": + case COLOR_STRING_BLOCK_TYPE: expr = compileText(e, b, comments); break; case "text_join": expr = compileTextJoin(e, b, comments); break; @@ -480,6 +482,9 @@ export function compileExpression(e: Environment, b: Blockly.Block, comments: st break; case "function_call_output": expr = compileFunctionCall(e, b, comments, false); break; + case COLOR_PICKER_BLOCK_TYPE: + expr = compileColorPicker(e, b, comments); + break; default: let call = e.stdCallTable[b.type]; if (call) { @@ -804,7 +809,7 @@ function compileImage(e: Environment, b: Blockly.Block, frames: number, columns: for (let j = 0; j < columns; ++j) { if (j > 0) state += ' '; - state += (leds[(i * columns) + j] === '#') ? "#" : "."; + state += leds[(i * columns) + j]; } state += '\n'; } @@ -1338,13 +1343,13 @@ function compileWorkspaceComment(c: Blockly.comments.RenderedWorkspaceComment): } function isLiteral(e: Environment, b: Blockly.Block) { - return isNumericLiteral(e, b) || b.type === "logic_boolean" || b.type === "text"; + return isNumericLiteral(e, b) || b.type === "logic_boolean" || b.type === "text" || b.type === COLOR_STRING_BLOCK_TYPE; } function isNumericLiteral(e: Environment, b: Blockly.Block): boolean { if (!b) return false; - if (b.type === "math_number" || b.type === "math_integer" || b.type === "math_number_minmax" || b.type === "math_whole_number") { + if (b.type === "math_number" || b.type === "math_integer" || b.type === "math_number_minmax" || b.type === "math_whole_number" || b.type === COLOR_NUMBER_BLOCK_TYPE) { return true; } @@ -1388,6 +1393,35 @@ function compileNumber(e: Environment, b: Blockly.Block, comments: string[]): px return pxt.blocks.H.mkNumberLiteral(extractNumber(b)); } +function compileColorPicker(e: Environment, b: Blockly.Block, comments: string[]): pxt.blocks.JsNode { + const format = b.getFieldValue("FORMAT"); + + if (format === "hex") { + return pxt.blocks.H.namespaceCall( + "colorHelpers", + "hex", + [compileExpression(e, getInputTargetBlock(e, b, "HEX_INPUT"), comments)], + false + ); + } + else { + const inputs: pxt.blocks.JsNode[] = []; + for (let i = 0; i < 4; i++) { + const input = b.getInput("INPUT" + i); + if (input) { + inputs.push(compileExpression(e, getInputTargetBlock(e, b, input.name), comments)); + } + } + return pxt.blocks.H.namespaceCall( + "colorHelpers", + format, + inputs, + false + ); + } +} + + function throwBlockError(msg: string, block: Blockly.Block) { let e = new Error(msg); (e as any).block = block; diff --git a/pxtblocks/compiler/environment.ts b/pxtblocks/compiler/environment.ts index 26e9377d1155..7448aa8f6a30 100644 --- a/pxtblocks/compiler/environment.ts +++ b/pxtblocks/compiler/environment.ts @@ -203,7 +203,7 @@ export function mkEnv(w: Blockly.Workspace, blockInfo?: pxtc.BlocksInfo, options attrs: fn.attributes, isExtensionMethod: instance, isExpression: fn.retType && fn.retType !== "void", - imageLiteral: fn.attributes.imageLiteral || fn.attributes.gridLiteral, + imageLiteral: fn.attributes.imageLiteral || fn.attributes.gridLiteral || fn.attributes.colorGridLiteral, imageLiteralColumns: fn.attributes.imageLiteralColumns, imageLiteralRows: fn.attributes.imageLiteralRows, hasHandler: pxt.blocks.hasHandler(fn), diff --git a/pxtblocks/compiler/typeChecker.ts b/pxtblocks/compiler/typeChecker.ts index 42c772b9d90d..f7e3f378fa58 100644 --- a/pxtblocks/compiler/typeChecker.ts +++ b/pxtblocks/compiler/typeChecker.ts @@ -7,6 +7,7 @@ import { CommonFunctionBlock } from "../plugins/functions/commonFunctionMixin"; import { PXT_WARNING_ID } from "./compiler"; import { DRAGGABLE_PARAM_INPUT_PREFIX } from "../loader"; import { getContainingFunction } from "../plugins/duplicateOnDrag"; +import { COLOR_PICKER_BLOCK_TYPE } from ".."; interface DeclaredVariable { name: string; @@ -149,6 +150,22 @@ export function infer(allBlocks: Blockly.Block[], e: Environment, w: Blockly.Wor break; case pxtc.PAUSE_UNTIL_TYPE: unionParam(e, b, "PREDICATE", pBoolean); + break; + case COLOR_PICKER_BLOCK_TYPE: + const format = b.getFieldValue("FORMAT"); + + if (format === "hex") { + unionParam(e, b, "HEX_INPUT", ground("string")); + } + else { + for (let i = 0; i < 4; i++) { + const input = b.getInput("INPUT" + i); + if (input) { + unionParam(e, b, input.name, ground("number")); + } + } + } + break; default: if (b.type in e.stdCallTable) { diff --git a/pxtblocks/composableMutations.ts b/pxtblocks/composableMutations.ts index dd57d9519ae0..d30eaa8c6912 100644 --- a/pxtblocks/composableMutations.ts +++ b/pxtblocks/composableMutations.ts @@ -9,6 +9,7 @@ import { DRAGGABLE_PARAM_INPUT_PREFIX, getBlocklyCheckForType, setVarFieldValue import { UpdateBeforeRenderMixin } from "./plugins/renderer"; import { FieldImageNoText } from "./fields/field_imagenotext"; import { setDuplicateOnDrag } from "./plugins/duplicateOnDrag"; +import { maybeMoveFocusFromButton } from "./utils"; export interface ComposableMutation { // Set to save mutations. Should return an XML element @@ -41,7 +42,8 @@ export function initVariableArgsBlock(b: Blockly.Block, handlerArgs: pxt.blocks. let actuallyVisible = 0; let i = b.appendDummyInput(); - let updateShape = () => { + let updateShape = (userTriggered?: boolean) => { + let fieldToFocus: null | FieldArgumentVariable = null; if (currentlyVisible === actuallyVisible) { return; } @@ -50,7 +52,8 @@ export function initVariableArgsBlock(b: Blockly.Block, handlerArgs: pxt.blocks. const diff = currentlyVisible - actuallyVisible; for (let j = 0; j < diff; j++) { const arg = handlerArgs[actuallyVisible + j]; - i.insertFieldAt(i.fieldRow.length - 1, new FieldArgumentVariable(arg.name), "HANDLER_" + arg.name); + fieldToFocus = new FieldArgumentVariable(arg.name); + i.insertFieldAt(i.fieldRow.length - 1, fieldToFocus, "HANDLER_" + arg.name); const blockSvg = b as Blockly.BlockSvg; if (blockSvg?.initSvg) blockSvg.initSvg(); // call initSvg on block to initialize new fields } @@ -65,6 +68,9 @@ export function initVariableArgsBlock(b: Blockly.Block, handlerArgs: pxt.blocks. if (currentlyVisible >= handlerArgs.length) { i.removeField("_HANDLER_ADD"); + if (userTriggered) { + maybeMoveFocusFromButton(fieldToFocus); + } } else if (actuallyVisible >= handlerArgs.length) { addPlusButton(); @@ -108,7 +114,7 @@ export function initVariableArgsBlock(b: Blockly.Block, handlerArgs: pxt.blocks. i.appendField(new FieldImageNoText((b as any).ADD_IMAGE_DATAURI, 24, 24, lf("Add argument"), () => { currentlyVisible = Math.min(currentlyVisible + 1, handlerArgs.length); - updateShape(); + updateShape(true); }, false), "_HANDLER_ADD"); } } @@ -121,6 +127,7 @@ export function initExpandableBlock(info: pxtc.BlocksInfo, b: Blockly.Block, def const buttonAddRemName = "0_add_rem_button"; const numVisibleAttr = "_expanded"; const inputInitAttr = "_input_init"; + let buttonToFocus: null | Blockly.Input = null; const optionNames = def.parameters.map(p => p.name); const totalOptions = def.parameters.length; @@ -219,7 +226,7 @@ export function initExpandableBlock(info: pxtc.BlocksInfo, b: Blockly.Block, def // Set skipRender to true if the block is still initializing. Otherwise // the inputs will render before their shadow blocks are created and // leave behind annoying artifacts - function updateShape(delta: number, skipRender = false, force = false) { + function updateShape(delta: number, skipRender = false, force = false, userTriggered = false) { const newValue = addDelta(delta); if (!force && !skipRender && newValue === state.getNumber(numVisibleAttr)) return; @@ -255,12 +262,23 @@ export function initExpandableBlock(info: pxtc.BlocksInfo, b: Blockly.Block, def updateButtons(); if (variableInlineInputs) b.setInputsInline(visibleOptions < inlineInputModeLimit); - if (!skipRender) (b as Blockly.BlockSvg).queueRender(); + if (!skipRender) { + (b as Blockly.BlockSvg).queueRender().then(() => { + if (userTriggered && buttonToFocus) { + let field = buttonToFocus.fieldRow[0]; + if (buttonToFocus.fieldRow.length > 1) { + field = delta < 0 ? field : buttonToFocus.fieldRow[1]; + } + maybeMoveFocusFromButton(field); + buttonToFocus = null; + } + }); + } } function addButton(name: string, uri: string, alt: string, delta: number) { - b.appendDummyInput(name) - .appendField(new FieldImageNoText(uri, 24, 24, alt, () => updateShape(delta), false)); + return b.appendDummyInput(name) + .appendField(new FieldImageNoText(uri, 24, 24, alt, () => updateShape(delta, false, false, true), false)); } function updateButtons() { @@ -274,28 +292,28 @@ export function initExpandableBlock(info: pxtc.BlocksInfo, b: Blockly.Block, def if (b.inputList.some(i => i.name === buttonAddRemName)) b.removeInput(buttonAddRemName, true); if (showPlus && showMinus) { - addPlusAndMinusButtons(); + buttonToFocus = addPlusAndMinusButtons(); } else if (showPlus) { - addPlusButton(); + buttonToFocus = addPlusButton(); } else if (showMinus) { - addMinusButton(); + buttonToFocus = addMinusButton(); } } function addPlusAndMinusButtons() { - b.appendDummyInput(buttonAddRemName) - .appendField(new FieldImageNoText((b as any).REMOVE_IMAGE_DATAURI, 24, 24, lf("Hide optional arguments"), () => updateShape(-1 * buttonDelta), false)) - .appendField(new FieldImageNoText((b as any).ADD_IMAGE_DATAURI, 24, 24, lf("Reveal optional arguments"), () => updateShape(buttonDelta), false)) + return b.appendDummyInput(buttonAddRemName) + .appendField(new FieldImageNoText((b as any).REMOVE_IMAGE_DATAURI, 24, 24, lf("Hide optional arguments"), () => updateShape(-1 * buttonDelta, false, false, true), false)) + .appendField(new FieldImageNoText((b as any).ADD_IMAGE_DATAURI, 24, 24, lf("Reveal optional arguments"), () => updateShape(buttonDelta, false, false, true), false)) } - function addPlusButton() { - addButton(buttonAddName, (b as any).ADD_IMAGE_DATAURI, lf("Reveal optional arguments"), buttonDelta); + function addPlusButton(): Blockly.Input { + return addButton(buttonAddName, (b as any).ADD_IMAGE_DATAURI, lf("Reveal optional arguments"), buttonDelta); } - function addMinusButton() { - addButton(buttonRemName, (b as any).REMOVE_IMAGE_DATAURI, lf("Hide optional arguments"), -1 * buttonDelta); + function addMinusButton(): Blockly.Input { + return addButton(buttonRemName, (b as any).REMOVE_IMAGE_DATAURI, lf("Hide optional arguments"), -1 * buttonDelta); } function initOptionalInputs() { @@ -425,7 +443,8 @@ export function initVariableReporterArgs(b: Blockly.Block, handlerArgs: pxt.bloc } } - const updateShape = () => { + const updateShape = (userTriggered?: boolean) => { + let inputToFocus: null | Blockly.Input = null; const existingInputs = b.inputList.filter( i => i.name.startsWith(DRAGGABLE_PARAM_INPUT_PREFIX) ).length; @@ -436,16 +455,20 @@ export function initVariableReporterArgs(b: Blockly.Block, handlerArgs: pxt.bloc for (let i = existingInputs; i < state.getNumber(numVisibleAttr); i++) { const arg = handlerArgs[i]; if (arg) { - const input = b.appendValueInput(DRAGGABLE_PARAM_INPUT_PREFIX + arg.name); - input.setCheck(getBlocklyCheckForType(arg.type, info)); + inputToFocus = b.appendValueInput(DRAGGABLE_PARAM_INPUT_PREFIX + arg.name); + inputToFocus.setCheck(getBlocklyCheckForType(arg.type, info)); + + // Use zero width space character. Empty strings and null are falsey + // which results in the default value being used by Blockly "input i". + inputToFocus.setAriaLabelProvider("\u200b"); - setDuplicateOnDrag(b.type, input.name); + setDuplicateOnDrag(b.type, inputToFocus.name); if (buttonExists) { - b.moveInputBefore(input.name, buttonAddName); + b.moveInputBefore(inputToFocus.name, buttonAddName); } else { - b.moveInputBefore(input.name, "HANDLER"); + b.moveInputBefore(inputToFocus.name, "HANDLER"); } } } @@ -472,7 +495,7 @@ export function initVariableReporterArgs(b: Blockly.Block, handlerArgs: pxt.bloc .appendField(new FieldImageNoText((b as any).ADD_IMAGE_DATAURI, 24, 24, lf("Add argument"), () => { state.setValue(numVisibleAttr, state.getNumber(numVisibleAttr) + 1); - updateShape(); + updateShape(true); }, false)); b.moveInputBefore(buttonAddName, "HANDLER"); } @@ -481,7 +504,12 @@ export function initVariableReporterArgs(b: Blockly.Block, handlerArgs: pxt.bloc b.removeInput(buttonAddName, true); } - setTimeout(populateArguments); + setTimeout(() => { + populateArguments(); + if (userTriggered && handlerArgs.length === state.getNumber(numVisibleAttr)) { + maybeMoveFocusFromButton(inputToFocus.connection?.targetBlock() as Blockly.BlockSvg) + } + }, 0); } updateShape(); @@ -552,4 +580,4 @@ class MutationState { setEventsEnabled(enabled: boolean) { this.fireEvents = enabled; } -} \ No newline at end of file +} diff --git a/pxtblocks/contextMenu/blockItems.ts b/pxtblocks/contextMenu/blockItems.ts index 024daedb5c6e..4cd8ce9c725d 100644 --- a/pxtblocks/contextMenu/blockItems.ts +++ b/pxtblocks/contextMenu/blockItems.ts @@ -147,6 +147,7 @@ function registerDuplicate() { scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK, id: 'blockDuplicate', weight: BlockContextWeight.Duplicate, + associatedKeyboardShortcut: Blockly.ShortcutItems.names.DUPLICATE, }; Blockly.ContextMenuRegistry.registry.register(duplicateOption); -} \ No newline at end of file +} diff --git a/pxtblocks/contextMenu/workspaceItems.ts b/pxtblocks/contextMenu/workspaceItems.ts index e65f26d4e37c..5560263a18b2 100644 --- a/pxtblocks/contextMenu/workspaceItems.ts +++ b/pxtblocks/contextMenu/workspaceItems.ts @@ -54,6 +54,8 @@ function registerFormatCode() { scopeType: Blockly.ContextMenuRegistry.ScopeType.WORKSPACE, id: 'pxtFormatCode', weight: WorkspaceContextWeight.FormatCode, + // Re-registered with key F by webapp blocks.tsx initKeyboardControls. + associatedKeyboardShortcut: Blockly.ShortcutItems.names.CLEANUP, }; Blockly.ContextMenuRegistry.registry.register(formatOption); } @@ -290,4 +292,4 @@ function registerFind() { weight: WorkspaceContextWeight.Find, }; Blockly.ContextMenuRegistry.registry.register(findOption); -} \ No newline at end of file +} diff --git a/pxtblocks/copyPaste.ts b/pxtblocks/copyPaste.ts index 05a8333b8ef9..4f78a40e5a3e 100644 --- a/pxtblocks/copyPaste.ts +++ b/pxtblocks/copyPaste.ts @@ -8,7 +8,7 @@ let oldCopy: Blockly.ShortcutRegistry.KeyboardShortcut; let oldCut: Blockly.ShortcutRegistry.KeyboardShortcut; let oldPaste: Blockly.ShortcutRegistry.KeyboardShortcut; -export function initCopyPaste(accessibleBlocksEnabled: boolean, forceRefresh: boolean = false) { +export function initCopyPaste(forceRefresh: boolean = false) { if (!getCopyPasteHandlers()) return; if (oldCopy && !forceRefresh) return; @@ -27,65 +27,8 @@ export function initCopyPaste(accessibleBlocksEnabled: boolean, forceRefresh: bo registerCut(); registerPaste(); - if (!accessibleBlocksEnabled) { - registerCopyContextMenu(); - registerPasteContextMenu(); - } -} - -export function initAccessibleBlocksCopyPasteContextMenu() { - overridePasteContextMenuItem(); - overrideCutContextMenuItem(); -} - -function overridePasteContextMenuItem() { - const oldPasteOption = Blockly.ContextMenuRegistry.registry.getItem("blockPasteFromContextMenu"); - - if ("separator" in oldPasteOption) { - throw new Error(`RegistryItem ${oldPasteOption.id} is not of type ActionRegistryItem`); - }; - - const pasteOption: Blockly.ContextMenuRegistry.RegistryItem = { - ...oldPasteOption, - preconditionFn: pasteContextMenuPreconditionFn, - }; - - Blockly.ContextMenuRegistry.registry.unregister("blockPasteFromContextMenu"); - Blockly.ContextMenuRegistry.registry.register(pasteOption); -} - -function overrideCutContextMenuItem() { - const oldCutOption = Blockly.ContextMenuRegistry.registry.getItem("blockCutFromContextMenu"); - - if ("separator" in oldCutOption) { - throw new Error(`RegistryItem ${oldCutOption.id} is not of type ActionRegistryItem`); - }; - - const cutOption: Blockly.ContextMenuRegistry.RegistryItem = { - ...oldCutOption, - preconditionFn: (scope: Blockly.ContextMenuRegistry.Scope) => { - const focused = scope.focusedNode; - if (!focused || !Blockly.isCopyable(focused)) return "hidden"; - - const workspace = focused.workspace; - - if (focused.workspace.isFlyout) - return "hidden"; - - if (!(workspace instanceof Blockly.WorkspaceSvg)) return 'hidden'; - - if ( - oldCut.preconditionFn(workspace, scope) - ) { - return 'enabled'; - } - - return "hidden"; - }, - }; - - Blockly.ContextMenuRegistry.registry.unregister("blockCutFromContextMenu"); - Blockly.ContextMenuRegistry.registry.register(cutOption); + registerCopyContextMenu(); + registerPasteContextMenu(); } function registerCopy() { @@ -167,7 +110,8 @@ function registerCopyContextMenu() { }, scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK, weight: BlockContextWeight.Copy, - id: "makecode-copy-block" + id: "makecode-copy-block", + associatedKeyboardShortcut: Blockly.ShortcutItems.names.COPY, }; const copyCommentOption: Blockly.ContextMenuRegistry.RegistryItem = { @@ -196,7 +140,8 @@ function registerCopyContextMenu() { }, scopeType: Blockly.ContextMenuRegistry.ScopeType.COMMENT, weight: BlockContextWeight.Copy, - id: "makecode-copy-comment" + id: "makecode-copy-comment", + associatedKeyboardShortcut: Blockly.ShortcutItems.names.COPY, }; if (Blockly.ContextMenuRegistry.registry.getItem(copyOption.id)) { @@ -222,7 +167,8 @@ function registerPasteContextMenu() { }, scopeType: Blockly.ContextMenuRegistry.ScopeType.WORKSPACE, weight: WorkspaceContextWeight.Paste, - id: "makecode-paste" + id: "makecode-paste", + associatedKeyboardShortcut: Blockly.ShortcutItems.names.PASTE, }; if (Blockly.ContextMenuRegistry.registry.getItem(pasteOption.id)) { @@ -286,4 +232,4 @@ function runCopyPreconditionFunction( updateDuplicateOnDragState(toCopy as Blockly.BlockSvg); return result; -} \ No newline at end of file +} diff --git a/pxtblocks/fields/fieldEditorRegistry.ts b/pxtblocks/fields/fieldEditorRegistry.ts index ce463a52bfe2..5a2b76fbf4cd 100644 --- a/pxtblocks/fields/fieldEditorRegistry.ts +++ b/pxtblocks/fields/fieldEditorRegistry.ts @@ -31,6 +31,7 @@ import { FieldSoundEffect } from "./field_sound_effect"; import { FieldAutoComplete } from "./field_autocomplete"; import { FieldColorWheel } from "./field_colorwheel"; import { FieldScopedValueSelector } from "./field_scopedvalueselector"; +import { FieldPianoRoll } from "./field_piano_roll"; interface FieldEditorOptions { field: FieldCustomConstructor; @@ -70,6 +71,7 @@ export function initFieldEditors() { registerFieldEditor('scopedvalueselector', FieldScopedValueSelector); if (pxt.appTarget.appTheme?.songEditor) { registerFieldEditor('musiceditor', FieldMusicEditor); + registerFieldEditor('pianoroll', FieldPianoRoll); } } diff --git a/pxtblocks/fields/field_asset.ts b/pxtblocks/fields/field_asset.ts index e4f07e51b85e..230600eb9cd0 100644 --- a/pxtblocks/fields/field_asset.ts +++ b/pxtblocks/fields/field_asset.ts @@ -96,21 +96,18 @@ export abstract class FieldAssetEditor injectDivBounds.width - toolboxWidth) { widgetDiv.style.width = ""; @@ -245,16 +255,16 @@ export abstract class FieldAssetEditor workspaceLeft) { + if (blockLeft.x - divBounds.width - 20 > toolboxWidth) { widgetDiv.style.left = (blockLeft.x - divBounds.width - 20) + "px" } else { // As a last resort, just center on the inject div - widgetDiv.style.left = (workspaceLeft + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px"; + widgetDiv.style.left = (toolboxWidth + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px"; } } else if (divBounds.left < injectDivBounds.left) { - widgetDiv.style.left = workspaceLeft + "px" + widgetDiv.style.left = toolboxWidth + "px" } } @@ -277,6 +287,8 @@ export abstract class FieldAssetEditor typeof option[0] === 'object'); } protected setFocusedItem_(_gridItemContainer: HTMLElement) { @@ -102,7 +105,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { } private createTooltip_() { - if (this.gridTooltip_) return; + if (this.gridTooltip_ || !this.hasImageOptions) return; // Create tooltip this.gridTooltip_ = document.createElement('div'); @@ -123,9 +126,6 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { this.activeDescendantIndex = 0; pxsim.U.removeChildren(tableContainer); - if (options.length == 0) { - this.firstItem_ = undefined - } for (let i = 0; i < options.length / this.columns_; i++) { let row = this.populateRow(i, options, tableContainer); @@ -144,6 +144,8 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { const rowContent = document.createElement('div'); rowContent.className = 'blocklyGridPickerRow'; + rowContent.setAttribute('role', 'row'); + rowContent.id = `${this.sourceBlock_.id}:row-${row}`; for (let i = (columns * row); i < Math.min((columns * row) + columns, options.length); i++) { let content = (options[i] as any)[0]; // Human-readable text or image. @@ -151,7 +153,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { const menuItem = document.createElement('div'); menuItem.className = 'gridpicker-menuitem gridpicker-option'; - menuItem.setAttribute('id', ':' + i); // For aria-activedescendant + menuItem.setAttribute('id', `${this.sourceBlock_.id}:${i}`); // For aria-activedescendant menuItem.setAttribute('role', 'gridcell'); menuItem.setAttribute('aria-selected', 'false'); menuItem.style.userSelect = 'none'; @@ -163,7 +165,6 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { menuItemContent.title = content['alt'] || content; menuItemContent.setAttribute('data-value', value); - const hasImages = typeof content == 'object'; // Set colour let backgroundColour = this.backgroundColour_; @@ -172,12 +173,13 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { menuItem.setAttribute('aria-selected', 'true'); this.activeDescendantIndex = i; pxt.BrowserUtils.addClass(menuItem, `gridpicker-option-selected ${!this.openingPointerCoords ? 'gridpicker-option-focused' : '' }`); + tableContainer.setAttribute('aria-activedescendant', menuItem.id); backgroundColour = (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary(); // Save so we can scroll to it later this.selectedItemDom = menuItem; - if (hasImages && !this.shouldShowTooltips()) { + if (this.hasImageOptions && !this.shouldShowTooltips()) { this.updateSelectedBar_(content, value); } } @@ -186,7 +188,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { menuItem.style.borderColor = this.borderColour_; - if (hasImages) { + if (this.hasImageOptions) { // An image, not text. const buttonImg = new Image(content['width'], content['height']); buttonImg.setAttribute('draggable', 'false'); @@ -217,7 +219,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { if (this.pointerMoveTriggeredByUser()) { this.gridItems.forEach(item => item.classList.remove('gridpicker-option-focused')) this.activeDescendantIndex = i; - if (hasImages) { + if (this.gridTooltip_ && this.hasImageOptions) { this.gridTooltip_.style.top = `${e.clientY + yOffset}px`; this.gridTooltip_.style.left = `${e.clientX + xOffset}px`; // Set tooltip text @@ -237,7 +239,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { Blockly.browserEvents.bind(menuItem, 'pointerout', this, (e: PointerEvent) => { if (this.pointerOutTriggeredByUser()) { this.gridItems.forEach(item => item.classList.remove('gridpicker-option-focused')) - if (hasImages) { + if (this.gridTooltip_ && this.hasImageOptions) { // Hide the tooltip this.gridTooltip_.style.visibility = 'hidden'; this.gridTooltip_.style.display = 'none'; @@ -249,7 +251,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { } }); } else { - if (hasImages) { + if (this.hasImageOptions) { // Show the selected bar this.selectedBar_.style.display = ''; @@ -278,10 +280,6 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { menuItem.appendChild(menuItemContent); this.gridItems.push(menuItem); rowContent.appendChild(menuItem); - - if (i == 0) { - this.firstItem_ = menuItem; - } } return rowContent; @@ -378,6 +376,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { if (!e) { this.addKeyboardNavigableClass(); } + this.getFocusableElement().ariaExpanded = 'true'; } private positionMenu_(tableContainer: HTMLElement) { @@ -430,7 +429,6 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, containerSize, this.sourceBlock_.RTL); -// (scrollContainer).focus(); this.highlightAndScrollSelected(tableContainer, scrollContainer) }; @@ -548,8 +546,10 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { this.highlightAndScrollSelected(tableContainer, scrollContainer) } // Hide the tooltip - this.gridTooltip_.style.visibility = 'hidden'; - this.gridTooltip_.style.display = 'none'; + if (this.gridTooltip_) { + this.gridTooltip_.style.visibility = 'hidden'; + this.gridTooltip_.style.display = 'none'; + } }, 300, false)); // Select the first item if the enter key is pressed @@ -691,6 +691,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom { private onClose_() { this.disposeTooltip(); this.disposeGrid(); + this.getFocusableElement().ariaExpanded = 'false'; } // Used for focus trap diff --git a/pxtblocks/fields/field_imagedropdown.ts b/pxtblocks/fields/field_imagedropdown.ts index 03be4ffa2bef..1ddf1be2ae5a 100644 --- a/pxtblocks/fields/field_imagedropdown.ts +++ b/pxtblocks/fields/field_imagedropdown.ts @@ -45,9 +45,10 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom } } - protected createRow() { + protected createRow(rowIndex: number) { const row = document.createElement('div'); row.setAttribute('role', 'row'); + row.id = `${this.sourceBlock_.id}:row-${rowIndex}`; return row; } @@ -121,8 +122,8 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom let descendantIndex = 0; // now create the actual row elements - for (const row of rows) { - const rowDiv = this.createRow(); + for (const [rowIndex, row] of rows.entries()) { + const rowDiv = this.createRow(rowIndex); rowDiv.style.width = row.width + "px"; rowDiv.style.height = row.height + "px"; contentDiv.appendChild(rowDiv); @@ -144,11 +145,10 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom const buttonContainer = document.createElement('div'); buttonContainer.setAttribute('class', 'blocklyDropDownButtonContainer') const button = document.createElement('div'); - button.setAttribute('id', ':' + localDescendantIndex); // For aria-activedescendant + button.setAttribute('id', `${this.sourceBlock_.id}:${localDescendantIndex}`); // For aria-activedescendant button.setAttribute('role', 'gridcell'); button.setAttribute('aria-selected', 'false'); button.classList.add('blocklyDropDownButton'); - button.title = content.alt; button.style.width = (columnButtonSize || content.width) + 'px'; button.style.height = (columnButtonSize || content.height) + 'px'; @@ -181,6 +181,10 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom this.activeDescendantIndex = undefined; } }); + const buttonText = document.createElement("span"); + buttonText.classList.add("sr-only"); + buttonText.textContent = content.alt; + button.appendChild(buttonText); let buttonImg = document.createElement('img'); buttonImg.src = content.src; //buttonImg.alt = icon.alt; @@ -188,6 +192,8 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom // Store a data attribute on all possible click targets so we can match it to the icon. button.setAttribute('data-value', value); buttonImg.setAttribute('data-value', value); + buttonImg.setAttribute('aria-hidden', 'true'); + button.title = content.alt; button.appendChild(buttonImg); this.gridItems.push(button); buttonContainer.appendChild(button); @@ -232,6 +238,7 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom } else if (this.borderRect_) { this.borderRect_.setAttribute('fill', source.getColourTertiary()); } + this.getFocusableElement().ariaExpanded = 'true'; } doValueUpdate_(newValue: any): void { @@ -267,6 +274,7 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom } else if (this.borderRect_) { this.borderRect_.setAttribute('fill', this.savedPrimary_); } + this.getFocusableElement().ariaExpanded = 'false'; }; } diff --git a/pxtblocks/fields/field_imagenotext.ts b/pxtblocks/fields/field_imagenotext.ts index 749543cad11d..0b14ec17f8af 100644 --- a/pxtblocks/fields/field_imagenotext.ts +++ b/pxtblocks/fields/field_imagenotext.ts @@ -1,5 +1,6 @@ import * as Blockly from "blockly"; +import { WorkspaceSvg } from "blockly"; import { FieldCustom } from "./field_utils"; /** @@ -17,11 +18,13 @@ export class FieldImageNoText extends Blockly.FieldImage implements FieldCustom return undefined; } - protected override showEditor_() { + protected override showEditor_(e?: Event) { super.showEditor_(); - const sourceBlock = this.getSourceBlock(); - if (sourceBlock instanceof Blockly.BlockSvg) { - Blockly.getFocusManager().focusNode(this.getSourceBlock() as Blockly.BlockSvg); + const keyboardTriggered = !e; + if (keyboardTriggered) { + return; } + const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg; + Blockly.getFocusManager().focusNode(sourceBlock); } } \ No newline at end of file diff --git a/pxtblocks/fields/field_images.ts b/pxtblocks/fields/field_images.ts index fe3a2a31a3c8..fe0da97da636 100644 --- a/pxtblocks/fields/field_images.ts +++ b/pxtblocks/fields/field_images.ts @@ -46,7 +46,8 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { this.addKeyDownHandler(contentDiv) const options = this.getOptions(); if (this.shouldSort_) options.sort(); - let row = this.createRow(); + let rowNum = 0; + let row = this.createRow(rowNum); for (let i = 0; i < options.length; i++) { const content = (options[i] as any)[0]; // Human-readable text or image. const value = (options[i] as any)[1]; // Language-neutral value. @@ -63,11 +64,10 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { const buttonContainer = document.createElement('div'); buttonContainer.setAttribute('class', 'blocklyDropDownButtonContainer') let button = document.createElement('div'); - button.setAttribute('id', ':' + i); // For aria-activedescendant + button.setAttribute('id', `${this.sourceBlock_.id}:${i}`); // For aria-activedescendant button.setAttribute('role', 'gridcell'); button.setAttribute('aria-selected', 'false'); button.setAttribute('class', 'blocklyDropDownButton'); - button.title = content.alt; if ((this as any).columns_) { button.style.width = (((this as any).width_ / (this as any).columns_) - 8) + 'px'; //button.style.height = ((this.width_ / this.columns_) - 8) + 'px'; @@ -109,6 +109,8 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { // Store a data attribute on all possible click targets so we can match it to the icon. button.setAttribute('data-value', value); buttonImg.setAttribute('data-value', value); + buttonImg.setAttribute('aria-hidden', 'true'); + button.title = content.alt; button.appendChild(buttonImg); if (this.addLabel_) { const buttonText = this.createTextNode_(content.alt); @@ -120,7 +122,7 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { row.append(buttonContainer) if (row.childElementCount === this.columns_) { contentDiv.appendChild(row); - row = this.createRow(); + row = this.createRow(++rowNum); } } if (row.childElementCount) { @@ -143,6 +145,7 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { } else if (this.borderRect_) { this.borderRect_.setAttribute('fill', sourceBlock.style.colourTertiary); } + this.getFocusableElement().ariaExpanded = 'true'; } // Update color (deselect) on dropdown hide @@ -157,6 +160,7 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { } else if (this.borderRect_) { this.borderRect_.setAttribute('fill', this.savedPrimary_); } + this.getFocusableElement().ariaExpanded = 'false'; } protected createTextNode_(text: string) { diff --git a/pxtblocks/fields/field_kind.ts b/pxtblocks/fields/field_kind.ts index 910cdf6a36e2..6256eed21ac0 100644 --- a/pxtblocks/fields/field_kind.ts +++ b/pxtblocks/fields/field_kind.ts @@ -121,7 +121,7 @@ export class FieldKind extends FieldDropdown { function createMenuGenerator(opts: pxtc.KindInfo): Blockly.MenuGeneratorFunction { return function() { const that = this as FieldKind; - const res: [string, string][] = []; + const res: Blockly.MenuOption[] = []; const sourceBlock = that.getSourceBlock(); @@ -137,7 +137,7 @@ function createMenuGenerator(opts: pxtc.KindInfo): Blockly.MenuGeneratorFunction res.push([lf("Add a new {0}...", opts.memberName), "CREATE"]); - res.push([undefined, "SEPARATOR"]); + res.push(Blockly.FieldDropdown.SEPARATOR); res.push([lf("Rename {0}...", opts.memberName), "RENAME"]); res.push([lf("Delete {0}...", opts.memberName), "DELETE"]); diff --git a/pxtblocks/fields/field_ledmatrix.ts b/pxtblocks/fields/field_ledmatrix.ts index 8b908a44b9b0..27c04736c042 100644 --- a/pxtblocks/fields/field_ledmatrix.ts +++ b/pxtblocks/fields/field_ledmatrix.ts @@ -2,6 +2,7 @@ /// import * as Blockly from "blockly"; +import { DEFAULT_LED_COLORS } from "./field_ledmatrix_colorPicker"; import { FieldMatrix } from "./field_matrix"; import { FieldCustom } from "./field_utils"; @@ -27,9 +28,11 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { public SERIALIZABLE = true; private params: any; - private onColor = "#FFFFFF"; - private offColor: string; + + private palette: string[]; + private static DEFAULT_OFF_COLOR = "#000000"; + private offOpacity = 0.2; private scale = 1; @@ -39,13 +42,18 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { private yAxisLabel: LabelMode = LabelMode.None; private xAxisLabel: LabelMode = LabelMode.None; - private cellState: boolean[][] = []; + private cellState: number[][] = []; private currentDragState_: boolean; protected clearSelectionOnBlur = true; protected forceFocusVisible = true; + protected isColorMatrix = false; + protected colorNames: string[]; + + private activeColor = 1; + constructor(text: string, params: any, validator?: Blockly.FieldValidator) { super(text, validator); this.params = params; @@ -64,12 +72,37 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { } } - if (this.params.onColor !== undefined) { - this.onColor = this.params.onColor; + this.isColorMatrix = !!this.params.isColorMatrix; + + if (this.params.colors) { + this.palette = this.params.colors; + } + else { + this.palette = [ + FieldLedMatrix.DEFAULT_OFF_COLOR, + ...DEFAULT_LED_COLORS + ]; + } + + if (this.params.colorNames) { + this.colorNames = this.params.colorNames; + } + else { + this.colorNames = [ + lf("off"), + ...DEFAULT_LED_COLORS + ]; } - if (this.params.offColor !== undefined) { - this.offColor = this.params.offColor; + if (this.params.hasOffColor) { + this.offOpacity = 1.0; + } + + if (this.params.offOpacity) { + const val = parseFloat(this.params.offOpacity); + if (!isNaN(val) && val >= 0 && val <= 1) { + this.offOpacity = val; + } } if (this.params.scale !== undefined) @@ -79,18 +112,49 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { else if (Math.max(this.numMatrixCols, this.numMatrixRows) > 10) this.scale = 0.9; - this.size_.height = this.scale * Number(this.numMatrixRows) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_VERTICAL_MARGIN) + FieldLedMatrix.CELL_VERTICAL_MARGIN * 2 + FieldLedMatrix.BOTTOM_MARGIN + this.getXAxisHeight() - this.size_.width = this.scale * Number(this.numMatrixCols) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_HORIZONTAL_MARGIN) + FieldLedMatrix.CELL_HORIZONTAL_MARGIN + this.getYAxisWidth(); + const verticalMargin = isNaN(this.params.verticalSpacing) ? FieldLedMatrix.CELL_VERTICAL_MARGIN : this.params.verticalSpacing; + const horizontalMargin = isNaN(this.params.horizontalSpacing) ? FieldLedMatrix.CELL_HORIZONTAL_MARGIN : this.params.horizontalSpacing; + + this.size_.height = this.scale * Number(this.numMatrixRows) * (FieldLedMatrix.CELL_WIDTH + verticalMargin) + verticalMargin * 2 + FieldLedMatrix.BOTTOM_MARGIN + this.getXAxisHeight() + this.size_.width = this.scale * Number(this.numMatrixCols) * (FieldLedMatrix.CELL_WIDTH + horizontalMargin) + horizontalMargin + this.getYAxisWidth(); } protected getCellToggled(x: number, y: number): boolean { - return this.cellState[x][y]; + return !!this.cellState[x][y]; } protected useTwoToneFocusIndicator(x: number, y: number): boolean { return this.getCellToggled(x, y); } + setActiveColorIndex(index: number) { + if (index >= 0 && index < this.palette.length) { + this.activeColor = index; + } + } + + computeAriaLabel(includeTypeInfo?: boolean) { + const numLedsOn = this.cellState.reduce((total, column) => total + column.filter(Boolean).length, 0); + if (includeTypeInfo) { + return numLedsOn === 1 ? lf("dropdown: LED, {0} LEDs on", numLedsOn) : lf("dropdown: LEDs, {0} LEDs on", numLedsOn); + } + return numLedsOn === 1 ? lf("{0} LED on", numLedsOn) : lf("{0} LEDs on", numLedsOn); + } + + recomputeAriaContext() { + const result = super.recomputeAriaContext(); + if (!this.fieldGroup_) return false; // There's no element to set currently. + const element = this.getFocusableElement(); + const isInFlyout = this.getSourceBlock()?.workspace?.isFlyout || false; + if (!isInFlyout) { + element.ariaHasPopup = "grid"; + element.setAttribute("role", "button"); + element.ariaLabel = lf("dropdown: LEDs"); + element.ariaExpanded = "false"; + } + return result; + } + /** * Show the inline free-text editor on top of the text. * @private @@ -99,13 +163,14 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { this.selected = [0, 0]; const matrixRect = this.matrixSvg.getBoundingClientRect(); + const injectDivBounds = (this.getSourceBlock().workspace as Blockly.WorkspaceSvg).getInjectionDiv().getBoundingClientRect(); const widgetDiv = Blockly.WidgetDiv.getDiv(); widgetDiv.append(this.matrixSvg); this.addKeyboardFocusHandlers(); - widgetDiv.style.left = matrixRect.left + "px"; - widgetDiv.style.top = matrixRect.top + "px"; + widgetDiv.style.left = matrixRect.left - injectDivBounds.left + "px"; + widgetDiv.style.top = matrixRect.top - injectDivBounds.top + "px"; widgetDiv.style.transform = `scale(${(Blockly.getMainWorkspace() as Blockly.WorkspaceSvg).getScale()})`; widgetDiv.style.transformOrigin = "0 0"; @@ -117,15 +182,17 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { widgetDiv.style.top = ""; widgetDiv.style.transform = ""; widgetDiv.style.transformOrigin = ""; + this.getFocusableElement().ariaExpanded = "false"; }); this.matrixSvg.focus(); this.focusCell(0, 0); + this.getFocusableElement().ariaExpanded = "true"; } private initMatrix() { if (!this.sourceBlock_.isInsertionMarker()) { - this.matrixSvg = pxsim.svg.parseString(``); + this.matrixSvg = pxsim.svg.parseString(``); this.matrixSvg.ariaLabel = lf("LED grid"); const workspace = Blockly.getMainWorkspace() as Blockly.WorkspaceSvg this.matrixSvg.style.boxShadow = `rgba(255, 255, 255, 0.3) 0 0 0 ${4 * workspace.getAbsoluteScale()}px`; @@ -136,20 +203,23 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { for (let i = 0; i < this.numMatrixCols; i++) { this.cellState.push([]) for (let j = 0; j < this.numMatrixRows; j++) { - this.cellState[i].push(false); + this.cellState[i].push(0); } } this.restoreStateFromString(); + const verticalMargin = isNaN(this.params.verticalSpacing) ? FieldLedMatrix.CELL_VERTICAL_MARGIN : this.params.verticalSpacing; + const horizontalMargin = isNaN(this.params.horizontalSpacing) ? FieldLedMatrix.CELL_HORIZONTAL_MARGIN : this.params.horizontalSpacing; + this.createMatrixDisplay({ cellWidth: FieldLedMatrix.CELL_WIDTH, cellHeight: FieldLedMatrix.CELL_WIDTH, cellLabel: lf("LED"), - cellHorizontalMargin: FieldLedMatrix.CELL_HORIZONTAL_MARGIN, - cellVerticalMargin: FieldLedMatrix.CELL_VERTICAL_MARGIN, - cornerRadius: FieldLedMatrix.CELL_CORNER_RADIUS, - cellFill: this.offColor, + cellHorizontalMargin: horizontalMargin, + cellVerticalMargin: verticalMargin, + cornerRadius: isNaN(this.params.borderRadius) ? FieldLedMatrix.CELL_CORNER_RADIUS : this.params.borderRadius, + cellFill: this.palette[0], padLeft: this.getYAxisWidth(), scale: this.scale }); @@ -157,10 +227,10 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { this.updateValue(); if (this.xAxisLabel !== LabelMode.None) { - const y = this.scale * this.numMatrixRows * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_VERTICAL_MARGIN) + FieldLedMatrix.CELL_VERTICAL_MARGIN * 2 + FieldLedMatrix.BOTTOM_MARGIN + const y = this.scale * this.numMatrixRows * (FieldLedMatrix.CELL_WIDTH + verticalMargin) + verticalMargin * 2 + FieldLedMatrix.BOTTOM_MARGIN const xAxis = pxsim.svg.child(this.matrixSvg, "g", { transform: `translate(${0} ${y})` }); for (let i = 0; i < this.numMatrixCols; i++) { - const x = this.getYAxisWidth() + this.scale * i * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_HORIZONTAL_MARGIN) + FieldLedMatrix.CELL_WIDTH / 2 + FieldLedMatrix.CELL_HORIZONTAL_MARGIN / 2; + const x = this.getYAxisWidth() + this.scale * i * (FieldLedMatrix.CELL_WIDTH + horizontalMargin) + FieldLedMatrix.CELL_WIDTH / 2 + horizontalMargin / 2; const lbl = pxsim.svg.child(xAxis, "text", { x, class: "blocklyText" }) lbl.textContent = this.getLabel(i, this.xAxisLabel); } @@ -169,7 +239,7 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { if (this.yAxisLabel !== LabelMode.None) { const yAxis = pxsim.svg.child(this.matrixSvg, "g", {}); for (let i = 0; i < this.numMatrixRows; i++) { - const y = this.scale * i * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_VERTICAL_MARGIN) + FieldLedMatrix.CELL_WIDTH / 2 + FieldLedMatrix.CELL_VERTICAL_MARGIN * 2; + const y = this.scale * i * (FieldLedMatrix.CELL_WIDTH + verticalMargin) + FieldLedMatrix.CELL_WIDTH / 2 + verticalMargin * 2; const lbl = pxsim.svg.child(yAxis, "text", { x: 0, y, class: "blocklyText" }) lbl.textContent = this.getLabel(i, this.yAxisLabel); } @@ -265,7 +335,7 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { } protected toggleCell = (x: number, y: number, value?: boolean) => { - this.cellState[x][y] = value ?? this.currentDragState_; + this.cellState[x][y] = (value ?? this.currentDragState_) ? this.activeColor : 0; this.updateValue(); } @@ -293,20 +363,37 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { } private getColor(x: number, y: number) { - return this.cellState[x][y] ? this.onColor : (this.offColor || FieldLedMatrix.DEFAULT_OFF_COLOR); + return this.palette[this.cellState[x][y]]; } private getOpacity(x: number, y: number) { - const offOpacity = this.offColor ? '1.0': '0.2'; + const offOpacity = this.offOpacity + ""; return this.cellState[x][y] ? '1.0' : offOpacity; } private updateCell(x: number, y: number) { - const cellRect = this.cells[x][y]; + const cellGroup = this.cells[x][y]; + const cellRect = getChildElementOfTag(cellGroup, "rect"); + if (!cellRect) return; cellRect.setAttribute("fill", this.getColor(x, y)); cellRect.setAttribute("fill-opacity", this.getOpacity(x, y)); cellRect.setAttribute('class', `blocklyLed${this.cellState[x][y] ? 'On' : 'Off'}`); - cellRect.setAttribute("aria-checked", this.cellState[x][y].toString()); + cellRect.setAttribute("aria-checked", (!!this.cellState[x][y]).toString()); + this.updateCellLabel(x, y); + } + + private updateCellLabel(x: number, y: number) { + const cellGroup = this.cells[x][y]; + const cellLabel = getChildElementOfTag(cellGroup, "text"); + if (cellLabel) { + if (this.isColorMatrix) { + const colorIndex = this.cellState[x][y]; + const colorName = this.colorNames[colorIndex] || this.palette[colorIndex] || lf("color {0}", colorIndex); + cellLabel.textContent = colorIndex ? lf("{0} LED on", colorName) : lf("{0} LED off", colorName); + } else { + cellLabel.textContent = this.cellState[x][y] ? lf("LED on") : lf("LED off"); + } + } } setValue(newValue: string | number, restoreState = true) { @@ -333,6 +420,7 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { this.initMatrix(); } + this.recomputeAriaContext(); } // The return value of this function is inserted in the code @@ -357,12 +445,10 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { const row = rows[y]; for (let j = 0; j < row.length && x < this.numMatrixCols; j++) { - if (isNegativeCharacter(row[j])) { - this.cellState[x][y] = false; - x++; - } - else if (isPositiveCharacter(row[j])) { - this.cellState[x][y] = true; + const val = parseCharacter(row[j]); + + if (val !== -1) { + this.cellState[x][y] = val; x++; } } @@ -372,12 +458,13 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { // Composes the state into a string an updates the field's state private updateValue() { + const chars = ".#23456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let res = ""; for (let y = 0; y < this.numMatrixRows; y++) { for (let x = 0; x < this.numMatrixCols; x++) { - res += (this.cellState[x][y] ? "#" : ".") + " " + res += chars.charAt(this.cellState[x][y]) + " "; } - res += "\n" + FieldLedMatrix.TAB + res += "\n" + FieldLedMatrix.TAB; } // Blockly stores the state of the field as a string @@ -393,12 +480,20 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom { } } -function isPositiveCharacter(c: string) { - return c === "#" || c === "*" || c === "1"; -} - -function isNegativeCharacter(c: string) { - return c === "." || c === "_" || c === "0"; +function parseCharacter(c: string): number { + const chars = ".#23456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + switch (c) { + case "#": + case "*": + case "1": + return 1; + case ".": + case "_": + case "0": + return 0; + default: + return chars.indexOf(c.toUpperCase()); + } } @@ -413,6 +508,18 @@ function removeQuotes(str: string) { return str; } +function getChildElementOfTag(element: Element, tagName: string): Element | null { + if (element.tagName.toLowerCase() === tagName.toLowerCase()) { + return element; + } + for (const child of element.children) { + if (child.tagName.toLowerCase() === tagName.toLowerCase()) { + return child; + } + } + return null; +} + // Override the hover stroke which doesn't make sense here. // Restate the keyboard nav stroke more specifically than the field hover override. Blockly.Css.register(` @@ -430,4 +537,4 @@ Blockly.Css.register(` } .blocklyFieldLedMatrixGroup > .blocklyFieldRect { fill: none !important; -}`); \ No newline at end of file +}`); diff --git a/pxtblocks/fields/field_ledmatrix_colorPicker.ts b/pxtblocks/fields/field_ledmatrix_colorPicker.ts new file mode 100644 index 000000000000..f6e541f24231 --- /dev/null +++ b/pxtblocks/fields/field_ledmatrix_colorPicker.ts @@ -0,0 +1,115 @@ +import * as Blockly from "blockly"; +import { FieldImageDropdown } from "./field_imagedropdown"; +import { FieldLedMatrix } from "./field_ledmatrix"; +import { mkTransparentTileImage } from "./field_tileset"; + +const TRANSPARENT_OPTION_KEY = "$transparent"; + +export const DEFAULT_LED_COLORS = [ + "#FFFFFF", + "#ED1C23", + "#B97858", + "#FF7D27", + "#FFCA0C", + "#FFF200", + "#EEE5B2", + "#22B14D", + "#B4E61D", + "#00A2E8", + "#99D9EB", + "#3E47CB", + "#7092BE", + "#A249A4", + "#880014", + "#FFAEC9" +] + +export function getDefaultColorNames() { + return [ + lf("{id:color}white"), + lf("{id:color}red"), + lf("{id:color}brown"), + lf("{id:color}orange"), + lf("{id:color}yellow"), + lf("{id:color}light yellow"), + lf("{id:color}cream"), + lf("{id:color}green"), + lf("{id:color}light green"), + lf("{id:color}blue"), + lf("{id:color}light blue"), + lf("{id:color}dark blue"), + lf("{id:color}gray"), + lf("{id:color}purple"), + lf("{id:color}dark red"), + lf("{id:color}pink") + ] +} + +export class FieldLEDMatrixColorPicker extends FieldImageDropdown { + constructor(blocksInfo: pxtc.BlocksInfo, colors?: string[], colorNames?: string[], protected includeTransparency = false) { + super((colors || DEFAULT_LED_COLORS)[0], { + blocksInfo, + columns: "4", + data: generateOptions(colors, colorNames, includeTransparency) + }); + } + + onColorSelected(index: number) { + if (!this.sourceBlock_) return; + const field = this.sourceBlock_.getField("LEDS") as FieldLedMatrix; + + field.setActiveColorIndex(index); + } + + doValueUpdate_(newValue: string) { + super.doValueUpdate_(newValue); + + const options = this.getOptions(); + const index = options.findIndex(([_, value]) => value === newValue); + if (index === -1) return; + + if (this.includeTransparency) { + this.onColorSelected(index); + } + else { + this.onColorSelected(index + 1); // +1 to account for the off color at index 0 + } + } +} + +function generateOptions(colors: string[], colorNames: string[], includeTransparency: boolean): [Blockly.ImageProperties, string][] { + if (!colors) colors = DEFAULT_LED_COLORS; + if (!colorNames) colorNames = getDefaultColorNames(); + + const options: [Blockly.ImageProperties, string][] = []; + + if (includeTransparency) { + options.push([{ + src: mkTransparentTileImage(16), + width: 16, + height: 16, + alt: lf("{id:color}transparency") + }, TRANSPARENT_OPTION_KEY]); + } + + for (let i = 0; i < colors.length; i++) { + options.push([{ + src: generateImageData(colors[i]), + width: 16, + height: 16, + alt: colorNames[i] || colors[i] + }, colors[i]]); + } + + return options; +} + +function generateImageData(color: string) { + const canvas = document.createElement("canvas"); + canvas.width = 16; + canvas.height = 16; + const ctx = canvas.getContext("2d")!; + ctx.fillStyle = color; + ctx.fillRect(0, 0, 16, 16); + return canvas.toDataURL(); +} \ No newline at end of file diff --git a/pxtblocks/fields/field_matrix.ts b/pxtblocks/fields/field_matrix.ts index 0f98ccb8ec60..fa3b0e9d4b39 100644 --- a/pxtblocks/fields/field_matrix.ts +++ b/pxtblocks/fields/field_matrix.ts @@ -1,9 +1,11 @@ import * as Blockly from "blockly"; +const twoToneDataAttr = "data-two-tone-focus-rect"; + interface MatrixDisplayProps { cellWidth: number; cellHeight: number; - cellLabel: string; + cellLabel: string | ((rowNum: number, value: boolean) => string); cellHorizontalMargin: number; cellVerticalMargin: number; cornerRadius: number; @@ -14,7 +16,7 @@ interface MatrixDisplayProps { } export abstract class FieldMatrix extends Blockly.Field { - protected cells: SVGRectElement[][] = []; + protected cells: SVGElement[][] = []; protected matrixSvg: SVGSVGElement; private keyDownBinding: Blockly.browserEvents.Data | null = null; private blurBinding: Blockly.browserEvents.Data | null = null; @@ -45,27 +47,33 @@ export abstract class FieldMatrix extends Blockly.Field { // Create the cells of the matrix that is displayed for (let y = 0; y < this.numMatrixRows; y++) { - const row = pxsim.svg.child(this.matrixSvg, "g", { 'role': 'row' }); + const row = pxsim.svg.child(this.matrixSvg, "g", { 'role': 'row', 'id': this.getRowId(y) }); for (let x = 0; x < this.numMatrixCols; x++) { const tx = scale * x * (cellWidth + cellHorizontalMargin) + cellHorizontalMargin + padLeft; const ty = scale * y * (cellHeight + cellVerticalMargin) + cellVerticalMargin; - const cellG = pxsim.svg.child(row, "g", { transform: `translate(${tx} ${ty})`, 'role': 'gridcell' }); - const rectOptions = { + const cellOptions = { 'id': this.getCellId(x,y), // For aria-activedescendant - 'aria-label': cellLabel, - 'role': 'switch', - 'aria-checked': "false", + 'transform': `translate(${tx} ${ty})`, + 'role': 'gridcell', + }; + const cellG = pxsim.svg.child(row, "g", cellOptions); + + const textEl = pxsim.svg.child(cellG, "text", {"font-size": 0}); + textEl.textContent = typeof cellLabel === 'string' ? cellLabel : cellLabel(y, false); + + const rectOptions = { + 'aria-hidden': 'true', 'width': scale * cellWidth, 'height': scale * cellHeight, 'fill': cellFill ?? "none", 'stroke': cellStroke, 'data-x': x, 'data-y': y, - 'rx': Math.max(2, scale * cornerRadius) + 'rx': Math.max(0, scale * cornerRadius) }; - const cellRect = pxsim.svg.child(cellG, "rect", rectOptions) as SVGRectElement; - this.cells[x][y] = cellRect; + pxsim.svg.child(cellG, "rect", rectOptions) as SVGRectElement; + this.cells[x][y] = cellG; } } } @@ -141,7 +149,10 @@ export abstract class FieldMatrix extends Blockly.Field { case "Enter": case "Space": { this.toggleCell(x, y, !this.getCellToggled(x, y)); - break; + this.updateFocusIndicator(this.cells[x][y], this.useTwoToneFocusIndicator(x, y)) + e.preventDefault(); + e.stopPropagation(); + return; } case "Escape": { (this.sourceBlock_.workspace as Blockly.WorkspaceSvg).markFocused(); @@ -187,40 +198,74 @@ export abstract class FieldMatrix extends Blockly.Field { this.matrixSvg.removeAttribute('aria-activedescendant'); } - private setFocusIndicator(cell: SVGRectElement, useTwoToneFocusIndicator: boolean) { + private setFocusIndicator(cell: SVGElement, useTwoToneFocusIndicator: boolean) { this.clearFocusIndicator(); const focusVisible = this.matrixSvg.matches(":focus-visible"); if (!focusVisible && !this.forceFocusVisible) return; - const cellG = cell.parentNode as SVGRectElement; - const cellWidth = parseInt(cell.getAttribute("width")) - const cornerRadius = parseInt(cell.getAttribute("rx")); + const cellRect = cell.children[1]; + const cellWidth = parseInt(cellRect.getAttribute("width")) + const cornerRadius = parseInt(cellRect.getAttribute("rx")); - pxsim.svg.child(cellG, "rect", { + pxsim.svg.child(cell, "rect", { transform: 'translate(-2, -2)', width: cellWidth + 4, height: cellWidth + 4, rx: `${Math.max(2, cornerRadius)}px`, stroke: "#fff", "stroke-width": 4, - fill: "none" + fill: "none", + "aria-hidden": "true" }); if (useTwoToneFocusIndicator) { - pxsim.svg.child(cellG, "rect", { + pxsim.svg.child(cell, "rect", { + transform: 'translate(-1, -1)', + width: cellWidth + 2, + height: cellWidth + 2, + rx: `${Math.max(2, cornerRadius)}px`, + stroke: "#000", + "stroke-width": 2, + fill: "none", + "aria-hidden": "true", + [twoToneDataAttr]: "true" + }); + } + const cellTextEl = cell.firstElementChild; + // Don't take effect for initial gridcell focus. + // Only announce gridcells being toggled on/off, not navigated to. + setTimeout(() => cellTextEl.setAttribute("aria-live", "polite"), 0); + } + + private updateFocusIndicator(cell: SVGElement, useTwoToneFocusIndicator: boolean) { + const focusVisible = this.matrixSvg.matches(":focus-visible"); + if (!focusVisible && !this.forceFocusVisible) return; + const cellRect = cell.children[1]; + const cellWidth = parseInt(cellRect.getAttribute("width")) + const cornerRadius = parseInt(cellRect.getAttribute("rx")); + const twoToneRect = Array.from(cell.children).find(c => c.hasAttribute(twoToneDataAttr)); + if (useTwoToneFocusIndicator && !twoToneRect) { + pxsim.svg.child(cell, "rect", { transform: 'translate(-1, -1)', width: cellWidth + 2, height: cellWidth + 2, rx: `${Math.max(2, cornerRadius)}px`, stroke: "#000", "stroke-width": 2, - fill: "none" + fill: "none", + "aria-hidden": "true", + [twoToneDataAttr]: "true" }); + } else if (!useTwoToneFocusIndicator && twoToneRect) { + twoToneRect.remove(); } } protected clearFocusIndicator() { this.cells.forEach(cell => cell.forEach(cell => { - while (cell.nextElementSibling) { - cell.nextElementSibling.remove(); + const cellTextEl = cell.firstElementChild; + cellTextEl.removeAttribute("aria-live"); + const cellRect = cell.children[1]; + while (cellRect.nextElementSibling) { + cellRect.nextElementSibling.remove(); } })); } @@ -264,7 +309,12 @@ export abstract class FieldMatrix extends Blockly.Field { } } - protected getCellId = (x: number, y: number) => `${this.sourceBlock_.id}:${x}-${y}`; + // sourceBlock._id can clash between flyout and main workspace + protected domId = Blockly.utils.idGenerator.getNextUniqueId(); + + protected getCellId = (x: number, y: number) => `${this.domId}:${x}-${y}`; + + protected getRowId = (index: number) => `${this.domId}:row-${index}`; protected abstract attachPointerEventHandlersToCell(x: number, y: number, cellRect: SVGElement): void; diff --git a/pxtblocks/fields/field_melodySandbox.ts b/pxtblocks/fields/field_melodySandbox.ts index 7e7bc36f6b96..aac65c1d7c30 100644 --- a/pxtblocks/fields/field_melodySandbox.ts +++ b/pxtblocks/fields/field_melodySandbox.ts @@ -5,8 +5,12 @@ import * as Blockly from "blockly"; import svg = pxt.svgUtil; import { clearDropDownDiv, FieldCustom, FieldCustomOptions, setMelodyEditorOpen } from "./field_utils"; import { FieldMatrix } from "./field_matrix"; + export const HEADER_HEIGHT = 50; export const TOTAL_WIDTH = 300; +const melodyContentDivId = "melody-content-div"; +const melodyEditorDivId = "melody-editor-div"; +const melodyGalleryDivId = "melody-editor-gallery"; export class FieldCustomMelody extends FieldMatrix implements FieldCustom { public isFieldCustom_ = true; @@ -31,6 +35,7 @@ export class FieldCustomMelody extends FieldMatrix private bottomDiv: HTMLDivElement; private doneButton: HTMLButtonElement; private playButton: HTMLButtonElement; + private playButtonAriaText: HTMLSpanElement; private playIcon: HTMLElement; private tempoInput: HTMLInputElement; private firstFocusableElement: HTMLElement | SVGElement; @@ -58,6 +63,7 @@ export class FieldCustomMelody extends FieldMatrix private gallery: pxtmelody.MelodyGallery; protected clearSelectionOnBlur = false; private matrixFocusBind: Blockly.browserEvents.Data | null = null; + private matrixKeydownBind: Blockly.browserEvents.Data | null = null; private tabKeyBind: Blockly.browserEvents.Data | null = null; constructor(value: string, params: U, validator?: Blockly.FieldValidator) { @@ -79,15 +85,19 @@ export class FieldCustomMelody extends FieldMatrix Blockly.DropDownDiv.setColour(this.getDropdownBackgroundColour(), this.getDropdownBorderColour()); let contentDiv = Blockly.DropDownDiv.getContentDiv() as HTMLDivElement; + contentDiv.id = melodyContentDivId; + contentDiv.setAttribute("role", "dialog"); + contentDiv.ariaLabel = lf("Melody editor"); pxt.BrowserUtils.addClass(contentDiv, "melody-content-div"); pxt.BrowserUtils.addClass(contentDiv.parentElement, "melody-editor-dropdown"); - this.gallery = new pxtmelody.MelodyGallery(); + this.gallery = new pxtmelody.MelodyGallery(melodyGalleryDivId); this.renderEditor(contentDiv); this.addKeyboardFocusHandlers(); this.attachEventHandlersToMatrix(); this.matrixFocusBind = Blockly.browserEvents.bind(this.matrixSvg, 'focus', this, this.handleMatrixFocus.bind(this)); + this.matrixKeydownBind = Blockly.browserEvents.bind(this.matrixSvg, 'keydown', this, this.handleMatrixKeydown.bind(this)); this.tabKeyBind = Blockly.browserEvents.bind(contentDiv, 'keydown', this, this.handleTabKey.bind(this)); this.prevString = this.getValue(); @@ -106,8 +116,9 @@ export class FieldCustomMelody extends FieldMatrix }); if (keyboardTriggered) { - this.toggle.getRootElement().focus(); + this.toggle.getFirstFocusableElement().focus(); } + (this.sourceBlock_ as Blockly.BlockSvg).getFocusableElement().ariaExpanded = 'true'; } getValue() { @@ -151,6 +162,16 @@ export class FieldCustomMelody extends FieldMatrix (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().appendChild(this.fieldGroup_); this.updateFieldLabel(); } + this.addAriaAtributes(); + } + + private addAriaAtributes() { + // ariaLabel is set in this.updateFieldLabel() as it is content dependent. + const el = (this.sourceBlock_ as Blockly.BlockSvg).getFocusableElement(); + el.ariaHasPopup = 'dialog'; + el.ariaExpanded = 'false'; + el.setAttribute('role', 'button'); + el.setAttribute('aria-controls', melodyContentDivId); } render_() { @@ -172,6 +193,7 @@ export class FieldCustomMelody extends FieldMatrix // Same toggle set up as sprite editor this.root = new svg.SVG(this.topDiv).id("melody-editor-header-controls"); + this.root.setAttribute("role", "presentation"); this.toggle = new Toggle(this.root, { leftText: lf("Editor"), rightText: lf("Gallery"), baseColor: color }); this.toggle.onStateChange(isLeft => { if (isLeft) { @@ -181,7 +203,7 @@ export class FieldCustomMelody extends FieldMatrix this.showGallery(); } }); - this.firstFocusableElement = this.toggle.getRootElement(); + this.firstFocusableElement = this.toggle.getFirstFocusableElement(); this.toggle.layout(); this.toggle.translate((TOTAL_WIDTH - this.toggle.width()) / 2, TOGGLE_PADDING_TOP); @@ -191,6 +213,9 @@ export class FieldCustomMelody extends FieldMatrix this.editorDiv = document.createElement("div"); pxt.BrowserUtils.addClass(this.editorDiv, "melody-editor-div"); + this.editorDiv.setAttribute("role", "tabpanel"); + this.editorDiv.setAttribute("aria-labelledby", `${melodyEditorDivId}-control`); + this.editorDiv.id = melodyEditorDivId; this.editorDiv.style.setProperty("background-color", secondaryColor); this.gridDiv = this.createGridDisplay(); @@ -208,12 +233,17 @@ export class FieldCustomMelody extends FieldMatrix this.playButton = document.createElement("button"); this.playButton.id = "melody-play-button"; + this.playButtonAriaText = document.createElement("span"); + this.playButtonAriaText.classList.add("sr-only"); + this.playButtonAriaText.textContent = lf("Play melody"); this.playButton.addEventListener("click", () => this.togglePlay()); this.playIcon = document.createElement("i"); this.playIcon.id = "melody-play-icon"; + this.playIcon.ariaHidden = "true"; pxt.BrowserUtils.addClass(this.playIcon, "play icon"); this.playButton.appendChild(this.playIcon); + this.playButton.appendChild(this.playButtonAriaText); this.tempoInput = document.createElement("input"); pxt.BrowserUtils.addClass(this.tempoInput, "ui input"); @@ -241,6 +271,10 @@ export class FieldCustomMelody extends FieldMatrix Blockly.browserEvents.unbind(this.matrixFocusBind); this.matrixFocusBind = undefined; } + if (this.matrixKeydownBind) { + Blockly.browserEvents.unbind(this.matrixKeydownBind); + this.matrixKeydownBind = undefined; + } if (this.tabKeyBind) { Blockly.browserEvents.unbind(this.tabKeyBind); this.tabKeyBind = undefined; @@ -256,6 +290,7 @@ export class FieldCustomMelody extends FieldMatrix } this.prevString = undefined; + (this.sourceBlock_ as Blockly.BlockSvg).getFocusableElement().ariaExpanded = 'false'; } // when click done @@ -297,14 +332,35 @@ export class FieldCustomMelody extends FieldMatrix let oldValue: string = value; try { value = value.slice(1, -1); // remove the boundary quotes - value = value.trim(); // remove boundary white space - this.createMelodyIfDoesntExist(); - let notes: string[] = value.split(" "); + const reader = new MelodyStringReader(value, true); + + const notes: string[] = []; + const validNotes = [48, 50, 52, 53, 55, 57, 59, 60]; - notes.forEach(n => { - if (!this.isValidNote(n)) throw new Error(lf("Invalid note '{0}'. Notes can be C D E F G A B C5", n)); - }); + while (reader.hasNextNote()) { + reader.readNote(); + if (reader.currentDuration !== 4) throw new Error(lf("Only quarter notes are supported")); + + if (reader.currentNote === REST) { + notes.push("-"); + continue; + } + + const absoluteNote = reader.currentOctave * 12 + reader.currentNote; + + if (!validNotes.includes(absoluteNote)) { + throw new Error(lf("Invalid note '{0}'. Notes can be C D E F G A B C5", absoluteNote)); + } + const noteName = pxtmelody.rowToNote(7 - validNotes.indexOf(absoluteNote)); + notes.push(noteName); + } + + if (notes.length > this.numMatrixCols) { + throw new Error(lf("Too many notes. Maximum is {0}", this.numMatrixCols)); + } + + this.createMelodyIfDoesntExist(); this.melody.resetMelody(); for (let j = 0; j < notes.length; j++) { @@ -314,27 +370,13 @@ export class FieldCustomMelody extends FieldMatrix } } this.updateFieldLabel(); - } catch (e) { + } + catch (e) { pxt.log(e) this.invalidString = oldValue; } } - private isValidNote(note: string): boolean { - switch (note) { - case "C": - case "D": - case "E": - case "F": - case "G": - case "A": - case "B": - case "C5": - case "-": return true; - } - return false; - } - // The width of the preview on the block itself protected getPreviewWidth(): number { this.updateSize_(); @@ -387,6 +429,17 @@ export class FieldCustomMelody extends FieldMatrix pxt.BrowserUtils.addClass(cb.el, className); this.fieldGroup_.appendChild(cb.el); } + (this.sourceBlock_ as Blockly.BlockSvg).getFocusableElement().ariaLabel = this.getAriaValue(); + } + + override getAriaValue(): string { + const notes = this.melody.getStringRepresentation().trim().split(" "); + return notes.every(n => n === "-") ? lf("empty melody") : lf("melody"); + } + + override computeAriaLabel(_verbose?: boolean): string { + const notes = this.melody.getStringRepresentation().trim().split(" "); + return notes.every(n => n === "-") ? lf("empty") : lf("notes"); } private setTempo(tempo: number): void { @@ -480,14 +533,18 @@ export class FieldCustomMelody extends FieldMatrix for (let col = 0; col < this.numMatrixCols; col++) { const cell = this.cells[col][row]; + const cellRect = cell.children[1] as SVGRectElement; + const cellTextEl = cell.firstElementChild as SVGTextElement; if (this.melody.getValue(row, col)) { - pxt.BrowserUtils.removeClass(cell, "melody-default"); - pxt.BrowserUtils.addClass(cell, rowClass); + pxt.BrowserUtils.removeClass(cellRect, "melody-default"); + pxt.BrowserUtils.addClass(cellRect, rowClass); + cellTextEl.textContent = this.getCellLabel(row, true) } else { - pxt.BrowserUtils.addClass(cell, "melody-default"); - pxt.BrowserUtils.removeClass(cell, rowClass); + pxt.BrowserUtils.addClass(cellRect, "melody-default"); + pxt.BrowserUtils.removeClass(cellRect, rowClass); + cellTextEl.textContent = this.getCellLabel(row, false) } } } @@ -559,8 +616,9 @@ export class FieldCustomMelody extends FieldMatrix const cells = this.cells[col]; cells.forEach(cell => { - if (on) pxt.BrowserUtils.addClass(cell, "playing") - else pxt.BrowserUtils.removeClass(cell, "playing") + const cellRect = cell.children[1] as SVGRectElement; + if (on) pxt.BrowserUtils.addClass(cellRect, "playing") + else pxt.BrowserUtils.removeClass(cellRect, "playing") }); } @@ -569,12 +627,12 @@ export class FieldCustomMelody extends FieldMatrix if (pxt.BrowserUtils.isEdge()) FieldCustomMelody.VIEWBOX_WIDTH += 37; FieldCustomMelody.VIEWBOX_HEIGHT = (FieldCustomMelody.CELL_WIDTH + FieldCustomMelody.CELL_VERTICAL_MARGIN) * this.numMatrixRows + FieldCustomMelody.CELL_VERTICAL_MARGIN; this.matrixSvg = pxsim.svg.parseString(``); - this.matrixSvg.ariaLabel = lf("Melody grid"); + this.matrixSvg.ariaLabel = lf("Melody of eight notes. Use the left and right arrows to select the previous or next note in the sequence. Use the up and down arrows to select the note pitch. Use Enter or Space to toggle the note on or off. Press P to play the note."); this.createMatrixDisplay({ cellWidth: FieldCustomMelody.CELL_WIDTH, cellHeight: FieldCustomMelody.CELL_WIDTH, - cellLabel: lf("Note"), + cellLabel: this.getCellLabel, cellStroke: "white", cellHorizontalMargin: FieldCustomMelody.CELL_HORIZONTAL_MARGIN, cellVerticalMargin: FieldCustomMelody.CELL_VERTICAL_MARGIN, @@ -585,6 +643,13 @@ export class FieldCustomMelody extends FieldMatrix return this.matrixSvg; } + private getCellLabel(rowNum: number, value: boolean) { + if (value) { + return lf("Note {0}, on", pxtmelody.rowToNote(rowNum)) + } + return lf("Note {0}, off", pxtmelody.rowToNote(rowNum)) + } + private handleMatrixFocus(_e: FocusEvent) { if (!this.selected) { const startNote = this.getMelodyNote(0) ?? 0; @@ -592,6 +657,17 @@ export class FieldCustomMelody extends FieldMatrix } const [x, y] = this.selected; this.focusCell(x, y); + const focusVisible = this.matrixSvg.matches(":focus-visible"); + if (!focusVisible && !this.forceFocusVisible) return; + if (this.hasMelodyNote(x)) { + this.playNote(y, x); + } + } + + private handleMatrixKeydown(e: KeyboardEvent) { + if (e.key.toLowerCase() === "p") { + this.playNote(this.selected[1], this.selected[0]); + } } // Used for focus trap @@ -617,30 +693,40 @@ export class FieldCustomMelody extends FieldMatrix } protected override handleArrowUp(x: number, y: number) { - const hasNote = this.getMelodyNote(x) !== undefined; this.selected = [x, y - 1] - if (hasNote) { + if (this.hasMelodyNote(x)) { this.toggleCell(this.selected[0], this.selected[1]); } } protected override handleArrowDown(x: number, y: number) { - const hasNote = this.getMelodyNote(x) !== undefined; this.selected = [x, y + 1] - if (hasNote) { + if (this.hasMelodyNote(x)) { this.toggleCell(this.selected[0], this.selected[1]); } } protected override handleArrowLeft(x: number, y: number) { - const newX = (x + this.numMatrixCols - 1) % this.numMatrixCols; + if (x === 0) { + return; + } + const newX = x - 1; const existingY = this.getMelodyNote(newX) ?? y; - this.selected = [newX, existingY] + this.selected = [newX, existingY]; + if (this.hasMelodyNote(newX)) { + this.playNote(this.selected[1], this.selected[0]); + } } protected override handleArrowRight(x: number, y: number) { - const newX = (x + this.numMatrixCols + 1) % this.numMatrixCols; + if (x === this.numMatrixCols - 1) { + return; + } + const newX = x + 1; const existingY = this.getMelodyNote(newX) ?? y; - this.selected = [newX, existingY] + this.selected = [newX, existingY]; + if (this.hasMelodyNote(newX)) { + this.playNote(this.selected[1], this.selected[0]); + } } private getMelodyNote(col: number) { @@ -652,6 +738,10 @@ export class FieldCustomMelody extends FieldMatrix return undefined; } + private hasMelodyNote(col: number): boolean { + return typeof this.getMelodyNote(col) === "number"; + } + private togglePlay() { if (!this.isPlaying) { this.isPlaying = true; @@ -667,10 +757,12 @@ export class FieldCustomMelody extends FieldMatrix if (this.isPlaying) { pxt.BrowserUtils.removeClass(this.playIcon, "play icon"); pxt.BrowserUtils.addClass(this.playIcon, "stop icon"); + this.playButtonAriaText.textContent = lf("Stop melody"); } else { pxt.BrowserUtils.removeClass(this.playIcon, "stop icon"); pxt.BrowserUtils.addClass(this.playIcon, "play icon"); + this.playButtonAriaText.textContent = lf("Play melody"); } } @@ -692,7 +784,7 @@ export class FieldCustomMelody extends FieldMatrix pxt.AudioContextManager.stop(); this.isPlaying = false; - this.cells.forEach(row => row.forEach(cell => pxt.BrowserUtils.removeClass(cell, "playing"))); + this.cells.forEach(row => row.forEach(cell => pxt.BrowserUtils.removeClass(cell.children[1] as SVGRectElement, "playing"))); } } @@ -703,18 +795,23 @@ export class FieldCustomMelody extends FieldMatrix if (result) { this.melody.parseNotes(result); this.toggle.toggle(); - this.toggle.getRootElement().focus(); this.updateFieldLabel(); this.updateGrid(); + // Clear the selected grid cell. This ensures that focus is not returned to the previously + // focused grid cell. This can result in the focus of a note that is switched off in a column that + // has a different note switched on. This can result in unpredictable behavior. + this.selected = undefined; } }); + this.firstFocusableElement = this.toggle.getFirstFocusableElement(); this.lastFocusableElement = this.gallery.getLastFocusableElement(); } private hideGallery() { this.gallery.hide(); + this.firstFocusableElement = this.toggle.getFirstFocusableElement(); this.lastFocusableElement = this.doneButton; } @@ -838,20 +935,33 @@ class Toggle { // Draw the left option this.leftElement = this.root.group(); + this.leftElement.setAttribute("aria-label", this.props.leftText); + this.leftElement.el.tabIndex = 0; + this.leftElement.el.ariaSelected = "true"; + this.leftElement.setAttribute("role", "tab"); + this.leftElement.el.id = `${melodyEditorDivId}-control`; + this.leftElement.el.setAttribute("aria-controls", melodyEditorDivId); this.leftText = mkText(this.props.leftText) .appendClass("sprite-editor-text") .fill(this.props.selectedTextColor); + this.leftText.setAttribute("aria-hidden", "true"); this.leftElement.appendChild(this.leftText); // Draw the right option this.rightElement = this.root.group(); + this.rightElement.el.ariaLabel = this.props.rightText + this.rightElement.el.tabIndex = -1; + this.rightElement.el.ariaSelected = "false"; + this.rightElement.setAttribute("role", "tab"); + this.rightElement.el.id = `${melodyGalleryDivId}-control`; + this.rightElement.el.setAttribute("aria-controls", `${melodyGalleryDivId}-outer`); this.rightText = mkText(this.props.rightText) .appendClass("sprite-editor-text") .fill(this.props.unselectedTextColor); + this.rightText.setAttribute("aria-hidden", "true"); this.rightElement.appendChild(this.rightText); this.root.onClick(() => this.toggle()); - this.root.el.tabIndex = 0; this.root.el.classList.add("melody-editor-toggle-buttons"); this.root.el.addEventListener("keydown", (e) => { if (["Space", "ArrowLeft", "ArrowRight", "Enter"].includes(e.code)) { @@ -867,12 +977,22 @@ class Toggle { this.switch.appendClass("toggle-right"); this.leftText.fill(this.props.unselectedTextColor); this.rightText.fill(this.props.selectedTextColor); + this.leftElement.el.tabIndex = -1 + this.leftElement.el.ariaSelected = "false"; + this.rightElement.el.tabIndex = 0 + this.rightElement.el.ariaSelected = "true"; + this.rightElement.el.focus(); } else { this.switch.removeClass("toggle-right"); this.switch.appendClass("toggle-left"); this.leftText.fill(this.props.selectedTextColor); this.rightText.fill(this.props.unselectedTextColor); + this.rightElement.el.tabIndex = -1 + this.rightElement.el.ariaSelected = "false"; + this.leftElement.el.tabIndex = 0 + this.leftElement.el.ariaSelected = "true"; + this.leftElement.el.focus(); } this.isLeft = !this.isLeft; @@ -903,8 +1023,11 @@ class Toggle { return TOGGLE_WIDTH; } - getRootElement() { - return this.root.el; + getFirstFocusableElement() { + if (this.leftElement.el.tabIndex === 0) { + return this.leftElement.el + } + return this.rightElement.el } } @@ -944,3 +1067,119 @@ function getPlaceholderColor(row: number): string { } return "#DCDCDC"; } + +const offsetLookup = [0x09, 0x0b, 0x00, 0x02, 0x04, 0x05, 0x07]; +export const REST = -0xffff; + +// copied from pxt-microbit/libs/core/music.ts +export class MelodyStringReader { + currentOctave: number; + currentNote: number; + currentDuration: number; + melodyStringIndex: number; + + constructor(public melody: string, public resetOctave: boolean) { + this.melodyStringIndex = 0; + this.currentOctave = 4; + this.currentDuration = 4; + this.currentNote = REST; + } + + readNote() { + this.eatWhitespace(); + if (this.resetOctave) { + this.currentOctave = 4; + } + let note: number = undefined; + let modifier = 0; + + while (this.melodyStringIndex < this.melody.length) { + const c = this.melody.charCodeAt(this.melodyStringIndex++); + if (c == 32 /* space */) { + break; + } + + else if (c === 35 /* # */) { + modifier++; + } + else if (c === 45 /* - */ || c === 114 /* r */ || c === 82 /* R */) { + if (note !== undefined) { + this.melodyStringIndex--; + break; + } + note = -1; + } + else if (c === 98 /* b */) { + if (note === undefined) { + note = 11; + } + else { + modifier--; + } + } + else if (c >= 48 && c <= 57) { + // number + if (note === undefined) { + // invalid if we haven't seen a note yet, ignore the number + continue; + } + else { + this.melodyStringIndex--; + this.currentOctave = this.readNumber(); + } + } + else if (c >= 65 && c <= 71) { + // A-G + if (note !== undefined) { + this.melodyStringIndex--; + break; + } + note = offsetLookup[c - 65]; + } + else if (c >= 97 && c <= 103) { + // a-g + if (note !== undefined) { + this.melodyStringIndex--; + break; + } + note = offsetLookup[c - 97]; + } + else if (c === 58 /* : */) { + this.currentDuration = Math.max(1, this.readNumber()); + break; + } + } + + if (note === undefined || note < 0) { + // invalid note, treat as rest + this.currentNote = REST; + } + else { + this.currentNote = note + modifier; + } + + this.eatWhitespace(); + } + + readNumber() { + let result = 0; + while (this.melodyStringIndex < this.melody.length) { + const c = this.melody.charCodeAt(this.melodyStringIndex); + if (c < 48 || c > 57) break; + result = result * 10 + (c - 48); + this.melodyStringIndex++; + } + return result; + } + + eatWhitespace() { + while (this.melodyStringIndex < this.melody.length && this.melody.charAt(this.melodyStringIndex) == " ") { + this.melodyStringIndex++; + } + } + + hasNextNote(): boolean { + this.eatWhitespace(); + return this.melodyStringIndex < this.melody.length; + } +} \ No newline at end of file diff --git a/pxtblocks/fields/field_note.ts b/pxtblocks/fields/field_note.ts index 3483c541c3fa..b9cbba7fc605 100644 --- a/pxtblocks/fields/field_note.ts +++ b/pxtblocks/fields/field_note.ts @@ -175,13 +175,21 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { return this.value_ + ""; } + override getAriaValue(): string { + return this.getNoteString(); + } + + override getAriaTypeName(): string { + return lf("tone"); + } + /** * Called by setValue if the text input is valid. Updates the value of the * field, and updates the text of the field if it is not currently being * edited (i.e. handled by the htmlInput_). * @param {string} note The new note in string format. */ - doValueUpdate_(note: string) { + override doValueUpdate_(note: string) { if (isNaN(Number(note)) || Number(note) < 0) return; @@ -199,6 +207,7 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { this.value_ = note; this.refreshText(); + this.recomputeAriaContext(); } /** @@ -250,7 +259,9 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { }; protected widgetDispose_(): void { - this.htmlInput_.removeEventListener("keydown", this.keyHandler); + if (this.htmlInput_) { + this.htmlInput_.removeEventListener("keydown", this.keyHandler); + } super.widgetDispose_(); } @@ -265,9 +276,14 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { Blockly.DropDownDiv.hideWithoutAnimation(); clearDropDownDiv(); - const isMobile = pxt.BrowserUtils.isMobile() || pxt.BrowserUtils.isIOS(); - // invoke FieldTextInputs showeditor, so we can set quiet explicitly / not have a pop up dialogue - super.showEditor_(e, isMobile); + const quietInput = pxt.BrowserUtils.isMobile() + || pxt.BrowserUtils.isIOS() + || pxt.BrowserUtils.isAndroid() + || Blockly.utils.userAgent.MOBILE + || Blockly.utils.userAgent.ANDROID + || Blockly.utils.userAgent.IPAD; + // invoke FieldTextInput's showEditor, so we can set quiet explicitly / not have a pop up dialogue + super.showEditor_(e, quietInput); this.refreshText(); // save all changes in the same group of events @@ -305,6 +321,7 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { ); pianoDiv.appendChild(this.noteLabel); this.noteLabel.textContent = "-"; + this.noteLabel.ariaLive = "polite"; let startingPage = 0; for (let i = 0; i < this.nKeys_; i++) { @@ -336,8 +353,10 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { Blockly.DropDownDiv.setColour(this.primaryColour, this.borderColour); Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_ as Blockly.BlockSvg, () => this.onHide(), undefined, false); - - this.htmlInput_.addEventListener("keydown", this.keyHandler); + if (this.htmlInput_) { + this.htmlInput_.ariaLabel = lf("Press the up and down arrow keys to select the next or previous note, or enter a value in hertz"); + this.htmlInput_.addEventListener("keydown", this.keyHandler); + } } protected keyHandler = (ev: KeyboardEvent) => { @@ -371,7 +390,9 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { * do not show up on the block itself until after the fieldeditor is closed, * as it is currently in an editable state. **/ - (this as any).htmlInput_.value = this.getText(); + if (this.htmlInput_) { + this.htmlInput_.value = this.getText(); + } pxt.AudioContextManager.tone(frequency); setTimeout(() => { @@ -641,55 +662,55 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom { if (!FieldNote.Notes) { FieldNote.Notes = { 28: { name: lf("{id:note}C"), prefixedName: lf("Low C"), freq: 131 }, - 29: { name: lf("C#"), prefixedName: lf("Low C#"), freq: 139 }, + 29: { name: lf("C♯"), prefixedName: lf("Low C♯"), freq: 139 }, 30: { name: lf("{id:note}D"), prefixedName: lf("Low D"), freq: 147 }, - 31: { name: lf("D#"), prefixedName: lf("Low D#"), freq: 156 }, + 31: { name: lf("D♯"), prefixedName: lf("Low D♯"), freq: 156 }, 32: { name: lf("{id:note}E"), prefixedName: lf("Low E"), freq: 165 }, 33: { name: lf("{id:note}F"), prefixedName: lf("Low F"), freq: 175 }, - 34: { name: lf("F#"), prefixedName: lf("Low F#"), freq: 185 }, + 34: { name: lf("F♯"), prefixedName: lf("Low F♯"), freq: 185 }, 35: { name: lf("{id:note}G"), prefixedName: lf("Low G"), freq: 196 }, - 36: { name: lf("G#"), prefixedName: lf("Low G#"), freq: 208 }, + 36: { name: lf("G♯"), prefixedName: lf("Low G♯"), freq: 208 }, 37: { name: lf("{id:note}A"), prefixedName: lf("Low A"), freq: 220 }, - 38: { name: lf("A#"), prefixedName: lf("Low A#"), freq: 233 }, + 38: { name: lf("A♯"), prefixedName: lf("Low A♯"), freq: 233 }, 39: { name: lf("{id:note}B"), prefixedName: lf("Low B"), freq: 247 }, 40: { name: lf("{id:note}C"), prefixedName: lf("Middle C"), freq: 262 }, - 41: { name: lf("C#"), prefixedName: lf("Middle C#"), freq: 277 }, + 41: { name: lf("C♯"), prefixedName: lf("Middle C♯"), freq: 277 }, 42: { name: lf("{id:note}D"), prefixedName: lf("Middle D"), freq: 294 }, - 43: { name: lf("D#"), prefixedName: lf("Middle D#"), freq: 311 }, + 43: { name: lf("D♯"), prefixedName: lf("Middle D♯"), freq: 311 }, 44: { name: lf("{id:note}E"), prefixedName: lf("Middle E"), freq: 330 }, 45: { name: lf("{id:note}F"), prefixedName: lf("Middle F"), freq: 349 }, - 46: { name: lf("F#"), prefixedName: lf("Middle F#"), freq: 370 }, + 46: { name: lf("F♯"), prefixedName: lf("Middle F♯"), freq: 370 }, 47: { name: lf("{id:note}G"), prefixedName: lf("Middle G"), freq: 392 }, - 48: { name: lf("G#"), prefixedName: lf("Middle G#"), freq: 415 }, + 48: { name: lf("G♯"), prefixedName: lf("Middle G♯"), freq: 415 }, 49: { name: lf("{id:note}A"), prefixedName: lf("Middle A"), freq: 440 }, - 50: { name: lf("A#"), prefixedName: lf("Middle A#"), freq: 466 }, + 50: { name: lf("A♯"), prefixedName: lf("Middle A♯"), freq: 466 }, 51: { name: lf("{id:note}B"), prefixedName: lf("Middle B"), freq: 494 }, 52: { name: lf("{id:note}C"), prefixedName: lf("Tenor C"), altPrefixedName: lf("High C"), freq: 523 }, - 53: { name: lf("C#"), prefixedName: lf("Tenor C#"), altPrefixedName: lf("High C#"), freq: 554 }, + 53: { name: lf("C♯"), prefixedName: lf("Tenor C♯"), altPrefixedName: lf("High C♯"), freq: 554 }, 54: { name: lf("{id:note}D"), prefixedName: lf("Tenor D"), altPrefixedName: lf("High D"), freq: 587 }, - 55: { name: lf("D#"), prefixedName: lf("Tenor D#"), altPrefixedName: lf("High D#"), freq: 622 }, + 55: { name: lf("D♯"), prefixedName: lf("Tenor D♯"), altPrefixedName: lf("High D♯"), freq: 622 }, 56: { name: lf("{id:note}E"), prefixedName: lf("Tenor E"), altPrefixedName: lf("High E"), freq: 659 }, 57: { name: lf("{id:note}F"), prefixedName: lf("Tenor F"), altPrefixedName: lf("High F"), freq: 698 }, - 58: { name: lf("F#"), prefixedName: lf("Tenor F#"), altPrefixedName: lf("High F#"), freq: 740 }, + 58: { name: lf("F♯"), prefixedName: lf("Tenor F♯"), altPrefixedName: lf("High F♯"), freq: 740 }, 59: { name: lf("{id:note}G"), prefixedName: lf("Tenor G"), altPrefixedName: lf("High G"), freq: 784 }, - 60: { name: lf("G#"), prefixedName: lf("Tenor G#"), altPrefixedName: lf("High G#"), freq: 831 }, + 60: { name: lf("G♯"), prefixedName: lf("Tenor G♯"), altPrefixedName: lf("High G♯"), freq: 831 }, 61: { name: lf("{id:note}A"), prefixedName: lf("Tenor A"), altPrefixedName: lf("High A"), freq: 880 }, - 62: { name: lf("A#"), prefixedName: lf("Tenor A#"), altPrefixedName: lf("High A#"), freq: 932 }, + 62: { name: lf("A♯"), prefixedName: lf("Tenor A♯"), altPrefixedName: lf("High A♯"), freq: 932 }, 63: { name: lf("{id:note}B"), prefixedName: lf("Tenor B"), altPrefixedName: lf("High B"), freq: 988 }, 64: { name: lf("{id:note}C"), prefixedName: lf("High C"), freq: 1046 }, - 65: { name: lf("C#"), prefixedName: lf("High C#"), freq: 1109 }, + 65: { name: lf("C♯"), prefixedName: lf("High C♯"), freq: 1109 }, 66: { name: lf("{id:note}D"), prefixedName: lf("High D"), freq: 1175 }, - 67: { name: lf("D#"), prefixedName: lf("High D#"), freq: 1245 }, + 67: { name: lf("D♯"), prefixedName: lf("High D♯"), freq: 1245 }, 68: { name: lf("{id:note}E"), prefixedName: lf("High E"), freq: 1319 }, 69: { name: lf("{id:note}F"), prefixedName: lf("High F"), freq: 1397 }, - 70: { name: lf("F#"), prefixedName: lf("High F#"), freq: 1478 }, + 70: { name: lf("F♯"), prefixedName: lf("High F♯"), freq: 1478 }, 71: { name: lf("{id:note}G"), prefixedName: lf("High G"), freq: 1568 }, - 72: { name: lf("G#"), prefixedName: lf("High G#"), freq: 1661 }, + 72: { name: lf("G♯"), prefixedName: lf("High G♯"), freq: 1661 }, 73: { name: lf("{id:note}A"), prefixedName: lf("High A"), freq: 1760 }, - 74: { name: lf("A#"), prefixedName: lf("High A#"), freq: 1865 }, + 74: { name: lf("A♯"), prefixedName: lf("High A♯"), freq: 1865 }, 75: { name: lf("{id:note}B"), prefixedName: lf("High B"), freq: 1976 } } } diff --git a/pxtblocks/fields/field_piano_roll.ts b/pxtblocks/fields/field_piano_roll.ts new file mode 100644 index 000000000000..f4649184ea4c --- /dev/null +++ b/pxtblocks/fields/field_piano_roll.ts @@ -0,0 +1,241 @@ +import { MelodyStringReader, REST } from "./field_melodySandbox"; +import { FieldMusicEditor, FieldMusicEditorOptions } from "./field_musiceditor"; +import { isTrue } from "./field_utils"; +import * as Blockly from "blockly"; + +interface FieldPianoRollOptions extends FieldMusicEditorOptions { + maxPolyphony?: number; + hideHeader?: boolean; + borderColor?: string; + encodeAsMelody?: boolean; + minOctave?: number; + maxOctave?: number; +} + +export class FieldPianoRoll extends FieldMusicEditor { + protected showInWidgetDiv: boolean; + protected encodeAsMelody: boolean; + + override showEditor_() { + if (this.asset && this.encodeAsMelody) { + const field = this.getTempoField(); + if (field) { + const bpm = parseInt(field.getValue() as string); + + if (!isNaN(bpm)) { + (this.asset as pxt.Song).song.beatsPerMinute = bpm; + } + } + } + super.showEditor_(); + } + + protected override getEditorKind() { + return "piano-roll-editor"; + } + + protected override isFullscreen() { + return !this.showInWidgetDiv; + } + + protected override getValueText(): string { + if (!this.encodeAsMelody) return super.getValueText(); + + const song = (this.asset as pxt.Song)?.song; + + if (!song) return this.valueText || ""; + + let result = ""; + const ticksPerSixteenth = song.ticksPerBeat / 4; + let currentTick = 0; + + for (const noteEvent of song.tracks[0].notes) { + if (noteEvent.startTick > currentTick) { + const restDuration = Math.round((noteEvent.startTick - currentTick) / ticksPerSixteenth); + result += `r:${restDuration} `; + } + const note = noteEvent.notes[0].note - 1; + const duration = Math.round((noteEvent.endTick - noteEvent.startTick) / ticksPerSixteenth); + + const notes = "CCDDEFFGGAAB"; + const noteInOctave = note % 12; + const octave = Math.floor(note / 12) + 1; + const accidental = isBlackKey(note) ? "#" : ""; + result += `${notes.charAt(noteInOctave)}${accidental}${octave}:${duration} `; + + currentTick = noteEvent.endTick; + } + + const maxTick = song.measures * song.ticksPerBeat * song.beatsPerMeasure; + + if (currentTick < maxTick) { + const restDuration = Math.round((maxTick - currentTick) / ticksPerSixteenth); + result += `r:${restDuration} `; + } + + return `"${result.trim()}"`; + } + + protected override createNewAsset(text?: string): pxt.Asset { + if (!this.encodeAsMelody) return super.createNewAsset(text); + + const song = createEmptyMelodySong(this.temporaryAssetId()); + + if (!text) return song; + + text = text.replace(/"/g, "").trim(); + + const reader = new MelodyStringReader(text, true); + let currentTick = 0; + + // melody duration is in 1/16 notes + const ticksPerSixteenth = song.song.ticksPerBeat / 4; + + while (reader.hasNextNote()) { + reader.readNote(); + + const duration = reader.currentDuration * ticksPerSixteenth; + + if (reader.currentNote !== REST) { + song.song.tracks[0].notes.push({ + startTick: currentTick, + endTick: currentTick + duration, + notes: [ + { + note: reader.currentNote + 1 + (reader.currentOctave - 1) * 12, + enharmonicSpelling: isBlackKey(reader.currentNote) ? "sharp" : "normal" + } + ] + }); + } + + currentTick += duration; + } + + const measures = Math.ceil(currentTick / (song.song.ticksPerBeat * song.song.beatsPerMeasure)); + song.song.measures = measures; + + return song; + } + + protected override parseFieldOptions(opts: any): FieldPianoRollOptions { + const result = super.parseFieldOptions(opts) as FieldPianoRollOptions; + + this.showInWidgetDiv = isTrue(opts.showInWidgetDiv); + + if (opts.maxPolyphony) { + const maxPolyphony = parseInt(opts.maxPolyphony); + if (!isNaN(maxPolyphony) && maxPolyphony > 0) { + result.maxPolyphony = maxPolyphony; + } + } + + if (opts.minOctave) { + const minOctave = parseInt(opts.minOctave); + if (!isNaN(minOctave)) { + result.minOctave = minOctave; + } + } + + if (opts.maxOctave) { + const maxOctave = parseInt(opts.maxOctave); + if (!isNaN(maxOctave)) { + result.maxOctave = maxOctave; + } + } + + if (opts.hideHeader) { + result.hideHeader = isTrue(opts.hideHeader); + } + + if (opts.borderColor) { + result.borderColor = opts.borderColor; + } + + if (opts.encodeAsMelody) { + result.encodeAsMelody = isTrue(opts.encodeAsMelody); + this.encodeAsMelody = result.encodeAsMelody; + if (result.encodeAsMelody) { + result.maxPolyphony = 1; + } + } + + + return result; + } + + protected override onEditorClose(newValue: pxt.Asset) { + super.onEditorClose(newValue); + + if (this.encodeAsMelody) { + this.syncTempoField((newValue as pxt.Song).song.beatsPerMinute); + } + } + + protected syncTempoField(bpm: number): void { + const field = this.getTempoField(); + if (field) { + field.setValue(bpm); + } + } + + protected getTempoField(): Blockly.Field { + const s = this.sourceBlock_; + if (s) { + for (const input of s.inputList) { + if (input.name === "tempo" || input.name === "bpm") { + const tempoBlock = input.connection.targetBlock(); + if (tempoBlock) { + if (tempoBlock.type === "math_number_minmax") { + return tempoBlock.getField("SLIDER"); + } + else { + return tempoBlock.getField("NUM"); + } + } + break; + } + } + } + return null; + } +} + +function melodyInstrument(): pxt.assets.music.Instrument { + return { + waveform: 1, + ampEnvelope: { + attack: 10, + decay: 50, + sustain: 1024, + release: 10, + amplitude: 1024 + } + }; +} + +function createEmptyMelodySong(assetId: string): pxt.Song { + const song = pxt.assets.music.getEmptySong(2); + song.tracks = [ + { + name: "Melody", + id: 0xff, + instrument: melodyInstrument(), + notes: [] + } + ]; + + return { + internalID: -1, + id: assetId, + type: pxt.AssetType.Song, + meta: { + }, + song + } +} + +function isBlackKey(note: number) { + const noteInOctave = note % 12; + return [1, 3, 6, 8, 10].includes(noteInOctave); +} \ No newline at end of file diff --git a/pxtblocks/fields/field_roundMatrix.ts b/pxtblocks/fields/field_roundMatrix.ts deleted file mode 100644 index 81f95b61c16e..000000000000 --- a/pxtblocks/fields/field_roundMatrix.ts +++ /dev/null @@ -1,351 +0,0 @@ -/// - -import * as Blockly from "blockly"; -import { FieldCustom } from "./field_utils"; - -namespace pxtblockly { - - const rowRegex = /^.*[\.#].*$/; - - enum LabelMode { - None, - Number, - Letter - } - - export class FieldRoundMatrix extends Blockly.Field implements FieldCustom { - private static CELL_WIDTH = 25; - private static CELL_HORIZONTAL_MARGIN = 7; - private static CELL_VERTICAL_MARGIN = 5; - private static CELL_CORNER_RADIUS = 5; - private static BOTTOM_MARGIN = 9; - private static Y_AXIS_WIDTH = 7; - private static X_AXIS_HEIGHT = 7; - private static TAB = " "; - - public isFieldCustom_ = true; - - private params: any; - private onColor = "#FFFFFF"; - private offColor: string; - private static DEFAULT_OFF_COLOR = "#000000"; - - // The number of columns - private matrixWidth: number = 5; - - // The number of rows - private matrixHeight: number = 5; - - private yAxisLabel: LabelMode = LabelMode.None; - private xAxisLabel: LabelMode = LabelMode.None; - - private cellState: boolean[][] = []; - private cells: SVGRectElement[][] = []; - private elt: SVGSVGElement; - - private currentDragState_: boolean; - - constructor(text: string, params: any, validator?: Blockly.FieldValidator) { - super(text, validator); - this.params = params; - - if (this.params.rows !== undefined) { - let val = parseInt(this.params.rows); - if (!isNaN(val)) { - this.matrixHeight = val; - } - } - - if (this.params.columns !== undefined) { - let val = parseInt(this.params.columns); - if (!isNaN(val)) { - this.matrixWidth = val; - } - } - - if (this.params.onColor !== undefined) { - this.onColor = this.params.onColor; - } - - if (this.params.offColor !== undefined) { - this.offColor = this.params.offColor; - } - } - - /** - * Show the inline free-text editor on top of the text. - * @private - */ - showEditor_() { - // Intentionally left empty - } - - private initMatrix() { - this.elt = pxsim.svg.parseString(``); - - // Initialize the matrix that holds the state - for (let i = 0; i < this.matrixWidth; i++) { - this.cellState.push([]) - this.cells.push([]); - for (let j = 0; j < this.matrixHeight; j++) { - this.cellState[i].push(false); - } - } - - this.restoreStateFromString(); - - // Create the cells of the matrix that is displayed - for (let i = 0; i < this.matrixWidth; i++) { - for (let j = 0; j < this.matrixHeight; j++) { - this.createCell(i, j); - } - } - - this.updateValue(); - - if (this.xAxisLabel !== LabelMode.None) { - const y = this.matrixHeight * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_VERTICAL_MARGIN) + FieldRoundMatrix.CELL_VERTICAL_MARGIN * 2 + FieldRoundMatrix.BOTTOM_MARGIN - const xAxis = pxsim.svg.child(this.elt, "g", { transform: `translate(${0} ${y})` }); - for (let i = 0; i < this.matrixWidth; i++) { - const x = this.getYAxisWidth() + i * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_HORIZONTAL_MARGIN) + FieldRoundMatrix.CELL_WIDTH / 2 + FieldRoundMatrix.CELL_HORIZONTAL_MARGIN / 2; - const lbl = pxsim.svg.child(xAxis, "text", { x, class: "blocklyText" }) - lbl.textContent = this.getLabel(i, this.xAxisLabel); - } - } - - if (this.yAxisLabel !== LabelMode.None) { - const yAxis = pxsim.svg.child(this.elt, "g", {}); - for (let i = 0; i < this.matrixHeight; i++) { - const y = i * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_VERTICAL_MARGIN) + FieldRoundMatrix.CELL_WIDTH / 2 + FieldRoundMatrix.CELL_VERTICAL_MARGIN * 2; - const lbl = pxsim.svg.child(yAxis, "text", { x: 0, y, class: "blocklyText" }) - lbl.textContent = this.getLabel(i, this.yAxisLabel); - } - } - - this.fieldGroup_.appendChild(this.elt); - } - - private getLabel(index: number, mode: LabelMode) { - switch (mode) { - case LabelMode.Letter: - return String.fromCharCode(index + /*char code for A*/ 65); - default: - return (index + 1).toString(); - } - } - - private dontHandleMouseEvent_ = (ev: MouseEvent) => { - ev.stopPropagation(); - ev.preventDefault(); - } - - private clearLedDragHandler = (ev: MouseEvent) => { - const svgRoot = (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot(); - pxsim.pointerEvents.down.forEach(evid => svgRoot.removeEventListener(evid, this.dontHandleMouseEvent_)); - svgRoot.removeEventListener(pxsim.pointerEvents.move, this.dontHandleMouseEvent_); - document.removeEventListener(pxsim.pointerEvents.up, this.clearLedDragHandler); - document.removeEventListener(pxsim.pointerEvents.leave, this.clearLedDragHandler); - - (Blockly as any).Touch.clearTouchIdentifier(); - - this.elt.removeEventListener(pxsim.pointerEvents.move, this.handleRootMouseMoveListener); - - ev.stopPropagation(); - ev.preventDefault(); - } - - private createCell(x: number, y: number) { - const tx = x * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_HORIZONTAL_MARGIN) + FieldRoundMatrix.CELL_HORIZONTAL_MARGIN + this.getYAxisWidth(); - const ty = y * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_VERTICAL_MARGIN) + FieldRoundMatrix.CELL_VERTICAL_MARGIN; - - const isDeadCell = (x ===0 && (y===0 || y ===6) || x ===6 && (y===0 || y ===6)) - const cellG = pxsim.svg.child(this.elt, "g", { transform: `translate(${tx} ${ty})` }) as SVGGElement; - const cellRect = pxsim.svg.child(cellG, "rect", { - 'class': `blocklyLed${this.cellState[x][y] ? 'On' : 'Off'}`, - 'cursor': 'pointer', - width: isDeadCell ? 0 : FieldRoundMatrix.CELL_WIDTH , - height: isDeadCell ? 0 : FieldRoundMatrix.CELL_WIDTH, - fill: this.getColor(x, y), - 'data-x': x, - 'data-y': y, - rx: FieldRoundMatrix.CELL_CORNER_RADIUS }) as SVGRectElement; - this.cells[x][y] = cellRect; - - - if ((this.sourceBlock_.workspace as any).isFlyout) return; - - if (!isDeadCell) { - pxsim.pointerEvents.down.forEach(evid => cellRect.addEventListener(evid, (ev: MouseEvent) => { - const svgRoot = (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot(); - this.currentDragState_ = !this.cellState[x][y]; - - // select and hide chaff - Blockly.hideChaff(); - (this.sourceBlock_ as Blockly.BlockSvg).select(); - - this.toggleRect(x, y); - pxsim.pointerEvents.down.forEach(evid => svgRoot.addEventListener(evid, this.dontHandleMouseEvent_)); - svgRoot.addEventListener(pxsim.pointerEvents.move, this.dontHandleMouseEvent_); - - document.addEventListener(pxsim.pointerEvents.up, this.clearLedDragHandler); - document.addEventListener(pxsim.pointerEvents.leave, this.clearLedDragHandler); - - // Begin listening on the canvas and toggle any matches - this.elt.addEventListener(pxsim.pointerEvents.move, this.handleRootMouseMoveListener); - - ev.stopPropagation(); - ev.preventDefault(); - }, false)); - } - } - - private toggleRect = (x: number, y: number) => { - this.cellState[x][y] = this.currentDragState_; - this.updateValue(); - } - - private handleRootMouseMoveListener = (ev: MouseEvent) => { - let clientX; - let clientY; - if ((ev as any).changedTouches && (ev as any).changedTouches.length == 1) { - // Handle touch events - clientX = (ev as any).changedTouches[0].clientX; - clientY = (ev as any).changedTouches[0].clientY; - } else { - // All other events (pointer + mouse) - clientX = ev.clientX; - clientY = ev.clientY; - } - const target = document.elementFromPoint(clientX, clientY); - if (!target) return; - const x = target.getAttribute('data-x'); - const y = target.getAttribute('data-y'); - if (x != null && y != null) { - this.toggleRect(parseInt(x), parseInt(y)); - } - } - - private getColor(x: number, y: number) { - return this.cellState[x][y] ? this.onColor : (this.offColor || FieldRoundMatrix.DEFAULT_OFF_COLOR); - } - - private getOpacity(x: number, y: number) { - return this.cellState[x][y] ? '1.0' : '0.2'; - } - - private updateCell(x: number, y: number) { - const cellRect = this.cells[x][y]; - cellRect.setAttribute("fill", this.getColor(x, y)); - cellRect.setAttribute("fill-opacity", this.getOpacity(x, y)); - cellRect.setAttribute('class', `blocklyLed${this.cellState[x][y] ? 'On' : 'Off'}`); - } - - setValue(newValue: string | number, restoreState = true) { - super.setValue(String(newValue)); - if (this.elt) { - if (restoreState) this.restoreStateFromString(); - - for (let x = 0; x < this.matrixWidth; x++) { - for (let y = 0; y < this.matrixHeight; y++) { - this.updateCell(x, y); - } - } - } - } - - render_() { - if (!this.visible_) { - this.size_.width = 0; - return; - } - - if (!this.elt) { - this.initMatrix(); - } - - - // The height and width must be set by the render function - this.size_.height = Number(this.matrixHeight) * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_VERTICAL_MARGIN) + FieldRoundMatrix.CELL_VERTICAL_MARGIN * 2 + FieldRoundMatrix.BOTTOM_MARGIN + this.getXAxisHeight() - this.size_.width = Number(this.matrixWidth) * (FieldRoundMatrix.CELL_WIDTH + FieldRoundMatrix.CELL_HORIZONTAL_MARGIN) + this.getYAxisWidth(); - } - - // The return value of this function is inserted in the code - getValue() { - // getText() returns the value that is set by calls to setValue() - let text = removeQuotes(this.getText()); - return `\`\n${FieldRoundMatrix.TAB}${text}\n${FieldRoundMatrix.TAB}\``; - } - - // Restores the block state from the text value of the field - private restoreStateFromString() { - let r = this.getText(); - if (r) { - const rows = r.split("\n").filter(r => rowRegex.test(r)); - - for (let y = 0; y < rows.length && y < this.matrixHeight; y++) { - let x = 0; - const row = rows[y]; - - for (let j = 0; j < row.length && x < this.matrixWidth; j++) { - if (isNegativeCharacter(row[j])) { - this.cellState[x][y] = false; - x++; - } - else if (isPositiveCharacter(row[j])) { - this.cellState[x][y] = true; - x++; - } - } - } - } - } - - // Composes the state into a string an updates the field's state - private updateValue() { - let res = ""; - for (let y = 0; y < this.matrixHeight; y++) { - for (let x = 0; x < this.matrixWidth; x++) { - const isDeadCell = (x ===0 && (y===0 || y ===6) || x ===6 && (y===0 || y ===6)) - if (isDeadCell) { - res += "_" + " " - } else { - res += (this.cellState[x][y] ? "#" : ".") + " " - } - } - res += "\n" + FieldRoundMatrix.TAB - } - - // Blockly stores the state of the field as a string - this.setValue(res, false); - } - - private getYAxisWidth() { - return this.yAxisLabel === LabelMode.None ? 0 : FieldRoundMatrix.Y_AXIS_WIDTH; - } - - private getXAxisHeight() { - return this.xAxisLabel === LabelMode.None ? 0 : FieldRoundMatrix.X_AXIS_HEIGHT; - } - } - - function isPositiveCharacter(c: string) { - return c === "#" || c === "*" || c === "1"; - } - - function isNegativeCharacter(c: string) { - return c === "." || c === "_" || c === "0"; - } - - - const allQuotes = ["'", '"', "`"]; - - function removeQuotes(str: string) { - str = str.trim(); - const start = str.charAt(0); - if (start === str.charAt(str.length - 1) && allQuotes.indexOf(start) !== -1) { - return str.substr(1, str.length - 2).trim(); - } - return str; - } - -} diff --git a/pxtblocks/fields/field_roundMatrixSmall.ts b/pxtblocks/fields/field_roundMatrixSmall.ts deleted file mode 100644 index 2e1d2d8614d8..000000000000 --- a/pxtblocks/fields/field_roundMatrixSmall.ts +++ /dev/null @@ -1,329 +0,0 @@ -/// - -import * as Blockly from "blockly"; -import { FieldCustom } from "./field_utils"; -import { FieldSpriteEditorOptions } from "./field_sprite"; - -namespace pxtblockly { - import svg = pxt.svgUtil; - - const rowRegex = /^.*[\.#].*$/; - - enum LabelMode { - None, - Number, - Letter - } - - interface ParsedSpriteEditorOptions { - sizes: [number, number][]; - initColor: number; - initWidth: number; - initHeight: number; - } - - // 32 is specifically chosen so that we can scale the images for the default - // sprite sizes without getting browser anti-aliasing - const PREVIEW_WIDTH = 64; - const PADDING = 5; - const BG_PADDING = 4; - const BG_WIDTH = BG_PADDING * 2 + PREVIEW_WIDTH; - const TOTAL_WIDTH = PADDING * 2 + BG_PADDING * 2 + PREVIEW_WIDTH; - const DEFAULT_COLOR = "#AAA4AE"; - - export class FieldRoundMatrixSmall extends Blockly.Field implements FieldCustom { - public isFieldCustom_ = true; - - private params: ParsedSpriteEditorOptions; - private blocksInfo: pxtc.BlocksInfo; - private editor: pxtmatrix.SpriteEditor; - private state: pxtmatrix.Bitmap; - private lightMode: boolean; - private undoStack: pxtmatrix.CanvasState[]; - private redoStack: pxtmatrix.CanvasState[]; - private colors: string[]; - - constructor(text: string, params: any, validator?: Blockly.FieldValidator) { - super(text, validator); - this.colors = [ - '#8E07BA','#FF8A00', '#FFC200', - '#FFFF00', '#B50000', '#FF0000', - '#FF8981', '#FEFFB0', '#6473FE', - '#C51973', '#F051A2', '#FFB3FC', - '#003E96', '#003EFE', '#00E0FF', - '#AEFFFF', '#B9FFB9', '#02FFA9', - '#37B800', '#37FF00', '#00ABBF', - '#C7C7C7'] - } - - /** - * Initalize values - */ - init() { - if (this.fieldGroup_) { - // Field has already been initialized once. - return; - } - // Build the DOM. - this.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); - if (!this.visible_) { - (this.fieldGroup_ as any).style.display = 'none'; - } - - if (!this.state) { - this.state = new pxtmatrix.Bitmap(7, 7); - } - - this.redrawPreview(); - - this.updateEditable(); - (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().appendChild(this.fieldGroup_); - - // Force a render. - this.render_(); - (this as any).mouseDownWrapper_ = Blockly.browserEvents.bind((this as any).getClickTarget_(), "mousedown", this, (this as any).onMouseDown_) - } - /** - * Show the inline free-text editor on top of the text. - * @private - */ - showEditor_() { - const windowSize = { - width: window.innerWidth, - height: window.innerHeight - }; - const scrollOffset = { - x: document.documentElement.scrollLeft || document.body.scrollLeft, - y: document.documentElement.scrollTop || document.body.scrollTop - }; - - // If there is an existing drop-down someone else owns, hide it immediately and clear it. - Blockly.DropDownDiv.hideWithoutAnimation(); - Blockly.DropDownDiv.clearContent(); - - let contentDiv = Blockly.DropDownDiv.getContentDiv() as HTMLDivElement; - - this.editor = new pxtmatrix.SpriteEditor(this.state, this.blocksInfo, this.lightMode, this.colors); - this.editor.initializeUndoRedo(this.undoStack, this.redoStack); - - this.editor.render(contentDiv); - this.editor.rePaint(); - - this.editor.onClose(() => { - this.undoStack = this.editor.getUndoStack(); - this.redoStack = this.editor.getRedoStack(); - Blockly.DropDownDiv.hideIfOwner(this); - }); - - this.editor.setActiveColor(1, true); - // if (!this.params.sizes.some(s => s[0] === this.state.width && s[1] === this.state.height)) { - // this.params.sizes.push([this.state.width, this.state.height]); - //} - this.editor.setSizePresets([[7,7]]); - - function setHeight(element: HTMLElement, height: number | string): void { - element.style.height = typeof height === 'number' ? height + 'px' : height; - } - function setWidth(element: HTMLElement, width: number | string): void { - element.style.width = typeof width === 'number' ? width + 'px' : width; - } - function setStyle(element: HTMLElement, property: string, value: string | null): void { - element.style[property as any] = value; - } - - setHeight(contentDiv, this.editor.outerHeight() + 1); - setWidth(contentDiv, this.editor.outerWidth() + 1); - setStyle(contentDiv, "overflow", "hidden"); - setStyle(contentDiv, "max-height", "500px"); - pxt.BrowserUtils.addClass(contentDiv.parentElement, "sprite-editor-dropdown") - - Blockly.DropDownDiv.setColour("#2c3e50", "#2c3e50"); - Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_ as Blockly.BlockSvg, () => { - this.editor.closeEditor(); - this.state = this.editor.bitmap().image; - this.redrawPreview(); - if (this.sourceBlock_ && Blockly.Events.isEnabled()) { - Blockly.Events.fire(new Blockly.Events.BlockChange( - this.sourceBlock_, 'field', this.name, this.getValue(), this.getText())); - } - - setHeight(contentDiv, null); - setWidth(contentDiv, null); - setStyle(contentDiv, "overflow", null); - setStyle(contentDiv, "max-height", null); - pxt.BrowserUtils.removeClass(contentDiv.parentElement, "sprite-editor-dropdown"); - this.editor.removeKeyListeners(); - }); - this.editor.addKeyListeners(); - this.editor.layout(); - } - private isInFlyout() { - return ((this.sourceBlock_.workspace as Blockly.WorkspaceSvg).getParentSvg() as SVGElement).className.baseVal == "blocklyFlyout"; - } - - render_() { - super.render_(); - this.size_.height = TOTAL_WIDTH - this.size_.width = TOTAL_WIDTH; - } - - getText() { - return pxtmatrix.bitmapToImageLiteral(this.state, pxt.editor.FileType.TypeScript); - } - - setValue(newText: string) { - if (newText == null) { - return; - } - this.parseBitmap(newText); - this.redrawPreview(); - - super.setValue(newText); - } - - private redrawPreview() { - if (!this.fieldGroup_) return; - pxsim.U.clear(this.fieldGroup_); - - const bg = new svg.Rect() - .at(PADDING * 2, PADDING * 2) - .size(PREVIEW_WIDTH, PREVIEW_WIDTH) - .fill("#000000") - .stroke("#898989", 1) - .corner(8); - - this.fieldGroup_.appendChild(bg.el); - - const cellSize = 64 / 8 - - for (let i = 0; i < 7; i++) { - for (let j = 0; j< 7 ; j++) { - if ( (i==0 && (j==0 || j==6)) || (i==6 && (j==0||j==6))) { - continue - } - const fillColor = this.getColor(this.state.get(i,j)) - const rect = new svg.Rect() - .at((cellSize*i) + PADDING*3, (cellSize*j)+PADDING*3) - .size(cellSize - 1, cellSize - 1) - .fill(fillColor, 1) - .corner(2) - this.fieldGroup_.appendChild(rect.el) - } - } - - if (this.state) { - const data = this.renderPreview(); - const img = new svg.Image() - .src(data) - .at(PADDING + BG_PADDING, PADDING + BG_PADDING) - .size(PREVIEW_WIDTH, PREVIEW_WIDTH); - //this.fieldGroup_.appendChild(img.el); - } - } - - private parseBitmap(newText: string) { - const bmp = pxtmatrix.imageLiteralToBitmap(newText); - - // Ignore invalid bitmaps - if (bmp && bmp.width && bmp.height) { - this.state = bmp; - } - } - - /** - * Scales the image to 32x32 and returns a data uri. In light mode the preview - * is drawn with no transparency (alpha is filled with background color) - */ - private renderPreview() { - //const colors = pxt.appTarget.runtime.palette.slice(1); - const canvas = document.createElement("canvas"); - canvas.width = PREVIEW_WIDTH; - canvas.height = PREVIEW_WIDTH; - - // Works well for all of our default sizes, does not work well if the size is not - // a multiple of 2 or is greater than 32 (i.e. from the decompiler) - const cellSize = Math.min(PREVIEW_WIDTH / this.state.width, PREVIEW_WIDTH / this.state.height); - - // Center the image if it isn't square - const xOffset = Math.max(Math.floor((PREVIEW_WIDTH * (1 - (this.state.width / this.state.height))) / 2), 0); - const yOffset = Math.max(Math.floor((PREVIEW_WIDTH * (1 - (this.state.height / this.state.width))) / 2), 0); - - let context: CanvasRenderingContext2D; - context = canvas.getContext("2d", { alpha: true }); - context.fillStyle = "#ff0000"; - context.beginPath() - context.arc(32, 32, 32, 0, 2 * Math.PI, false) - context.fill() - - return canvas.toDataURL(); - } - - private getColor(val: number) { - if(val - 1 >= 0 && val - 1 < this.colors.length) { - return this.colors[val-1] - } else { - return DEFAULT_COLOR; - } - } - } - - function parseFieldOptions(opts: FieldSpriteEditorOptions) { - const parsed: ParsedSpriteEditorOptions = { - sizes: [ - [8, 8], - ], - initColor: 1, - initWidth: 8, - initHeight: 8, - }; - - if (!opts) { - return parsed; - } - - if (opts.sizes != null) { - const pairs = opts.sizes.split(";"); - const sizes: [number, number][] = []; - for (let i = 0; i < pairs.length; i++) { - const pair = pairs[i].split(","); - if (pair.length !== 2) { - continue; - } - - let width = parseInt(pair[0]); - let height = parseInt(pair[1]); - - if (isNaN(width) || isNaN(height)) { - continue; - } - - const screenSize = pxt.appTarget.runtime && pxt.appTarget.runtime.screenSize; - if (width < 0 && screenSize) - width = screenSize.width; - if (height < 0 && screenSize) - height = screenSize.height; - - sizes.push([width, height]); - } - if (sizes.length > 0) { - parsed.sizes = sizes; - parsed.initWidth = sizes[0][0]; - parsed.initHeight = sizes[0][1]; - } - } - - parsed.initColor = withDefault(opts.initColor, parsed.initColor); - parsed.initWidth = withDefault(opts.initWidth, parsed.initWidth); - parsed.initHeight = withDefault(opts.initHeight, parsed.initHeight); - - return parsed; - - function withDefault(raw: string, def: number) { - const res = parseInt(raw); - if (isNaN(res)) { - return def; - } - return res; - } - } -} diff --git a/pxtblocks/fields/field_sound_effect.ts b/pxtblocks/fields/field_sound_effect.ts index a03bbe80c9a9..4c0462f7ef88 100644 --- a/pxtblocks/fields/field_sound_effect.ts +++ b/pxtblocks/fields/field_sound_effect.ts @@ -4,7 +4,7 @@ import * as Blockly from "blockly"; import svg = pxt.svgUtil; import { FieldBase } from "./field_base"; -import { FieldCustomOptions, workspaceToScreenCoordinates } from "./field_utils"; +import { FieldCustomOptions, isTrue, workspaceToScreenCoordinates } from "./field_utils"; export interface FieldSoundEffectParams extends FieldCustomOptions { durationInputName: string; @@ -52,6 +52,16 @@ export class FieldSoundEffect extends FieldBase { this.workspace.addChangeListener(this.onWorkspaceChange); } } + + this.fieldGroup_.ariaHasPopup = "dialog"; + this.fieldGroup_.ariaExpanded = "false"; + this.fieldGroup_.setAttribute("role", "button"); + this.fieldGroup_.setAttribute("aria-controls", "sound-effect-editor"); + this.fieldGroup_.ariaLabel = this.getAriaValue(); + } + + override getAriaValue() { + return lf("sound effect"); } protected onDispose(): void { @@ -156,6 +166,7 @@ export class FieldSoundEffect extends FieldBase { widgetDiv.style.opacity = ""; widgetDiv.style.transition = ""; widgetDiv.style.alignItems = ""; + this.fieldGroup_.ariaExpanded = "false"; Blockly.Events.enable(); Blockly.Events.setGroup(true); @@ -209,6 +220,7 @@ export class FieldSoundEffect extends FieldBase { widgetDiv.style.alignItems = "center"; widgetDiv.style.transition = "transform 0.25s ease 0s, opacity 0.25s ease 0s"; widgetDiv.style.borderRadius = ""; + this.fieldGroup_.ariaExpanded = "true"; fv.onHide(() => { // do nothing @@ -245,14 +257,13 @@ export class FieldSoundEffect extends FieldBase { const blockLeft = workspaceToScreenCoordinates(block.workspace as Blockly.WorkspaceSvg, new Blockly.utils.Coordinate(bounds.left, bounds.top)); - const workspaceLeft = injectDivBounds.left + toolboxWidth; - if (blockLeft.x - divBounds.width - 20 > workspaceLeft) { + if (blockLeft.x - divBounds.width - 20 > toolboxWidth) { widgetDiv.style.left = (blockLeft.x - divBounds.width - 20) + "px" } else { // As a last resort, just center on the inject div - widgetDiv.style.left = (workspaceLeft + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px"; + widgetDiv.style.left = (toolboxWidth + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px"; } } } @@ -425,21 +436,3 @@ function reverseLookup(map: {[index: string]: string}, value: string) { return Object.keys(map).find(k => map[k] === value); } -function isTrue(value: any) { - if (!value) return false; - - if (typeof value === "string") { - switch (value.toLowerCase().trim()) { - case "1": - case "yes": - case "y": - case "on": - case "true": - return true; - default: - return false; - } - } - - return !!value; -} \ No newline at end of file diff --git a/pxtblocks/fields/field_textdropdown.ts b/pxtblocks/fields/field_textdropdown.ts index 857d21d58480..82b59e6ceb45 100644 --- a/pxtblocks/fields/field_textdropdown.ts +++ b/pxtblocks/fields/field_textdropdown.ts @@ -79,9 +79,12 @@ export class BaseFieldTextDropdown extends Blockly.FieldTextInput { this.inputKeydownHandler = this.inputKeydownListener.bind(this); this.htmlInput_.addEventListener('keydown', this.inputKeydownHandler); + this.htmlInput_.setAttribute("role", "combobox"); + this.htmlInput_.ariaExpanded = "true"; if (!quietInput) { this.htmlInput_.focus(); + this.htmlInput_.select(); } } @@ -272,13 +275,13 @@ export class BaseFieldTextDropdown extends Blockly.FieldTextInput { } private handleMenuActionEvent(menuItem: Blockly.MenuItem) { - Blockly.DropDownDiv.hideIfOwner(this, true); this.onItemSelected_(this.menu_ as Blockly.Menu, menuItem); } protected onItemSelected_(menu: Blockly.Menu, menuItem: Blockly.MenuItem) { this.setValue(menuItem.getValue()); - + this.htmlInput_.focus(); + Blockly.DropDownDiv.hideIfOwner(this, true); Blockly.WidgetDiv.hideIfOwner(this); } } diff --git a/pxtblocks/fields/field_tileset.ts b/pxtblocks/fields/field_tileset.ts index 5e76235e3a97..00febf7ee56e 100644 --- a/pxtblocks/fields/field_tileset.ts +++ b/pxtblocks/fields/field_tileset.ts @@ -352,7 +352,7 @@ function constructTransparentTile(): TilesetDropdownOption { }, tile.id, tile]; } -function mkTransparentTileImage(sideLength: number) { +export function mkTransparentTileImage(sideLength: number) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); canvas.width = sideLength; diff --git a/pxtblocks/fields/field_toggle.ts b/pxtblocks/fields/field_toggle.ts index b41dbc21e7bd..b890e9dcd1a5 100644 --- a/pxtblocks/fields/field_toggle.ts +++ b/pxtblocks/fields/field_toggle.ts @@ -18,6 +18,10 @@ export class BaseFieldToggle extends Blockly.FieldNumber implements FieldCustom private type_: string; + private focusBinding: Blockly.browserEvents.Data | null = null; + private blurBinding: Blockly.browserEvents.Data | null = null; + private ariaLabelElement_: HTMLElement | null = null; + constructor(state: string, params: FieldCustomOptions, protected trueText: string, protected falseText: string, opt_validator?: Blockly.FieldValidator) { super(state, undefined, undefined, undefined, opt_validator); this.params = params; @@ -62,6 +66,7 @@ export class BaseFieldToggle extends Blockly.FieldNumber implements FieldCustom { 'class': `blocklyToggle ${this.state_ ? 'blocklyToggleOn' : 'blocklyToggleOff'}`, 'transform': `translate(8, ${size.height / 2})`, + 'aria-hidden': 'true', }, this.fieldGroup_); switch (this.getOutputShape()) { case provider.SHAPES.HEXAGONAL: @@ -116,6 +121,8 @@ export class BaseFieldToggle extends Blockly.FieldNumber implements FieldCustom // Force a render. this.markDirty(); + this.recomputeAriaContext(); + this.attachAriaLiveHandlers(); } getDisplayText_() { @@ -134,6 +141,52 @@ export class BaseFieldToggle extends Blockly.FieldNumber implements FieldCustom return this.getDisplayText_(); } + override recomputeAriaContext(): boolean { + const result = super.recomputeAriaContext(); + if (!this.fieldGroup_) return false; + const element = this.getFocusableElement(); + element.setAttribute("role", "button"); + // Move aria-label to inner element that is also read when its value changes + // via aria-live. + const label = element.getAttribute("aria-label") || this.computeAriaLabel(true); + element.removeAttribute("aria-label"); + if (!this.ariaLabelElement_) { + this.ariaLabelElement_ = document.createElement("span"); + this.ariaLabelElement_.classList.add("sr-only"); + element.appendChild(this.ariaLabelElement_); + } + this.ariaLabelElement_.textContent = label; + this.textElement_?.setAttribute("aria-hidden", "true"); + return result; + } + + override getAriaTypeName(): string { + return lf("toggle"); + } + + override getAriaValue(): string { + return this.getDisplayText_(); + } + + private attachAriaLiveHandlers() { + if (this.sourceBlock_.isInFlyout) return; + const element = this.getFocusableElement(); + if (this.focusBinding) Blockly.browserEvents.unbind(this.focusBinding); + if (this.blurBinding) Blockly.browserEvents.unbind(this.blurBinding); + this.focusBinding = Blockly.browserEvents.bind(element, "focus", this, () => { + setTimeout(() => element.setAttribute("aria-live", "polite"), 0); + }); + this.blurBinding = Blockly.browserEvents.bind(element, "blur", this, () => { + element.removeAttribute("aria-live"); + }); + } + + dispose() { + if (this.focusBinding) Blockly.browserEvents.unbind(this.focusBinding); + if (this.blurBinding) Blockly.browserEvents.unbind(this.blurBinding); + super.dispose(); + } + updateSize_() { switch (this.getOutputShape()) { case provider.SHAPES.ROUND: @@ -194,6 +247,7 @@ export class BaseFieldToggle extends Blockly.FieldNumber implements FieldCustom this.switchToggle(this.state_); this.isDirty_ = true; + this.recomputeAriaContext(); } } diff --git a/pxtblocks/fields/field_utils.ts b/pxtblocks/fields/field_utils.ts index 227252fff44d..55278d25761c 100644 --- a/pxtblocks/fields/field_utils.ts +++ b/pxtblocks/fields/field_utils.ts @@ -582,16 +582,8 @@ export function workspaceToScreenCoordinates(ws: Blockly.WorkspaceSvg, wsCoordin const clientOffsetPixels = Blockly.utils.Coordinate.sum( scaledWS, mainOffsetPixels); - - const injectionDiv = ws.getInjectionDiv(); - - // Bounding rect coordinates are in client coordinates, meaning that they - // are in pixels relative to the upper left corner of the visible browser - // window. These coordinates change when you scroll the browser window. - const boundingRect = injectionDiv.getBoundingClientRect(); - - return new Blockly.utils.Coordinate(clientOffsetPixels.x + boundingRect.left, - clientOffsetPixels.y + boundingRect.top) + return new Blockly.utils.Coordinate(clientOffsetPixels.x, + clientOffsetPixels.y) } export function getBlockData(block: Blockly.Block): PXTBlockData { @@ -720,4 +712,23 @@ export function isImageProperties(obj: any): obj is Blockly.ImageProperties { 'height' in obj && typeof obj.height === 'number' ); +} + +export function isTrue(value: any) { + if (!value) return false; + + if (typeof value === "string") { + switch (value.toLowerCase().trim()) { + case "1": + case "yes": + case "y": + case "on": + case "true": + return true; + default: + return false; + } + } + + return !!value; } \ No newline at end of file diff --git a/pxtblocks/importer.ts b/pxtblocks/importer.ts index 54419c002691..5a911d5982a1 100644 --- a/pxtblocks/importer.ts +++ b/pxtblocks/importer.ts @@ -202,60 +202,6 @@ export function loadWorkspaceXml(xml: string, skipReport = false, opts?: DomToWo } } -function patchFloatingBlocks(dom: Element, info: pxtc.BlocksInfo) { - const onstarts = getBlocksWithType(dom, ts.pxtc.ON_START_TYPE); - let onstart = onstarts.length ? onstarts[0] : undefined; - if (onstart) { // nothing to do - onstart.removeAttribute("deletable"); - return; - } - - let newnodes: Element[] = []; - - const blocks: pxt.Map = info.blocksById; - - // walk top level blocks - let node = dom.firstElementChild; - let insertNode: Element = undefined; - while (node) { - const nextNode = node.nextElementSibling; - // does this block is disable or have s nested statement block? - const nodeType = node.getAttribute("type"); - if (!node.getAttribute("disabled") && !node.getElementsByTagName("statement").length - && (buildinBlockStatements[nodeType] || - (blocks[nodeType] && blocks[nodeType].retType == "void" && !hasArrowFunction(blocks[nodeType]))) - ) { - // old block, needs to be wrapped in onstart - if (!insertNode) { - insertNode = dom.ownerDocument.createElement("statement"); - insertNode.setAttribute("name", "HANDLER"); - if (!onstart) { - onstart = dom.ownerDocument.createElement("block"); - onstart.setAttribute("type", ts.pxtc.ON_START_TYPE); - newnodes.push(onstart); - } - onstart.appendChild(insertNode); - insertNode.appendChild(node); - - node.removeAttribute("x"); - node.removeAttribute("y"); - insertNode = node; - } else { - // event, add nested statement - const next = dom.ownerDocument.createElement("next"); - next.appendChild(node); - insertNode.appendChild(next); - node.removeAttribute("x"); - node.removeAttribute("y"); - insertNode = node; - } - } - node = nextNode; - } - - newnodes.forEach(n => dom.appendChild(n)); -} - /** * Patch to transform old function blocks to new ones, and rename child nodes */ @@ -347,9 +293,6 @@ export function importXml(pkgTargetVersion: string, xml: string, info: pxtc.Bloc for (let i = 0; i < blocks.length; ++i) patchBlock(info, enums, blocks[i]); - // patch floating blocks - patchFloatingBlocks(doc.documentElement, info); - // patch function blocks patchFunctionBlocks(doc.documentElement, info) diff --git a/pxtblocks/index.ts b/pxtblocks/index.ts index 675816eed2b8..5b191417aa94 100644 --- a/pxtblocks/index.ts +++ b/pxtblocks/index.ts @@ -7,6 +7,7 @@ export * from "./plugins/renderer"; export * from "./plugins/flyout"; export * from "./plugins/newVariableField"; export * from "./plugins/comments"; +export * from "./plugins/colorpicker"; export * from "./compiler/compiler"; export * from "./compiler/environment"; export * from "./loader"; @@ -27,6 +28,7 @@ import * as contextMenu from "./contextMenu"; import * as external from "./external"; export * from "./breakpointIcon"; +export { createVariablesFlyoutCategory } from "./builtins/variables"; export { contextMenu, diff --git a/pxtblocks/layout.ts b/pxtblocks/layout.ts index e4eab62fed22..e3af974fc44e 100644 --- a/pxtblocks/layout.ts +++ b/pxtblocks/layout.ts @@ -24,7 +24,7 @@ export function patchBlocksFromOldWorkspace(blockInfo: ts.pxtc.BlocksInfo, oldWs if ( !pxt.BrowserUtils.isElement(child) || child.localName !== "block" || - child.getAttribute("disabled") !== "true" + !isDisabledBlocklyElement(child) ) { continue; } @@ -274,8 +274,9 @@ export function toSvgAsync(ws: Blockly.WorkspaceSvg, pixelDensity: number): Prom return Promise.resolve<{ width: number; height: number; xml: string; }>(undefined); const viewbox = ws.getBlocksBoundingBox(); - const sg = ws.getParentSvg().cloneNode(true) as SVGElement; - cleanUpBlocklySvg(sg); + const sourceSvg = ws.getParentSvg(); + const sg = sourceSvg.cloneNode(true) as SVGElement; + cleanUpBlocklySvg(sg, sourceSvg); // getBlocksBoundingBox doesn't include any expanded blocks comments, so // do a pass to expand the bounding box if any are present @@ -328,7 +329,13 @@ export interface BlockSvg { width: number; height: number; svg: string; xml: string; css: string; } -export function cleanUpBlocklySvg(svg: SVGElement): SVGElement { +// Blockly sets --blocklyDisabledPattern on the injection div to reference an +// SVG pattern for disabled blocks. Exported SVGs lose access to this CSS +// variable, so we copy it explicitly. +// See: blockly/core/renderers/common/constants.ts (createDom) +const DISABLED_PATTERN_PROP = '--blocklyDisabledPattern'; + +export function cleanUpBlocklySvg(svg: SVGElement, sourceSvg: SVGElement): SVGElement { pxt.BrowserUtils.removeClass(svg, "blocklySvg"); pxt.BrowserUtils.addClass(svg, "blocklyPreview pxt-renderer classic-theme"); @@ -350,6 +357,11 @@ export function cleanUpBlocklySvg(svg: SVGElement): SVGElement { el.removeAttribute("tabindex"); }); + const disabledPattern = window.getComputedStyle(sourceSvg).getPropertyValue(DISABLED_PATTERN_PROP); + if (disabledPattern) { + svg.style.setProperty(DISABLED_PATTERN_PROP, disabledPattern); + } + // In order to get the Blockly comment's text area to serialize properly they have to have names const parser = new DOMParser(); pxt.U.toArray(svg.querySelectorAll('.blocklyTextarea')) @@ -395,13 +407,20 @@ export async function blocklyToSvgAsync(sg: SVGElement, x: number, y: number, wi const blocklySvg = pxt.Util.toArray(document.head.querySelectorAll("style")) .filter((el: HTMLStyleElement) => /\.blocklySvg/.test(el.innerText))[0] as HTMLStyleElement; // Custom CSS injected directly into the DOM by Blockly - customCss.unshift((document.getElementById(`blockly-common-style`) as HTMLLinkElement)?.innerText || ""); - customCss.unshift((document.getElementById(`blockly-renderer-style-pxt-classic`) as HTMLLinkElement)?.innerText || ""); + customCss.unshift((document.getElementById(`blockly-common-style`) as HTMLStyleElement)?.innerText || ""); + // Blockly injects renderer styles with className="blockly-renderer-style", not an id + const rendererStyle = document.querySelector(`style.blockly-renderer-style`) as HTMLStyleElement; + customCss.unshift(rendererStyle?.innerText || ""); // CSS may contain <, > which need to be stored in CDATA section const cssString = (blocklySvg ? blocklySvg.innerText : "") + '\n\n' + customCss.map(el => el + '\n\n'); cssLink.appendChild(xsg.createCDATASection(cssString)); xsg.documentElement.insertBefore(cssLink, xsg.documentElement.firstElementChild); + const disabledPattern = sg.style.getPropertyValue(DISABLED_PATTERN_PROP); + if (disabledPattern) { + (xsg.documentElement as unknown as SVGElement).style.setProperty(DISABLED_PATTERN_PROP, disabledPattern); + } + await expandImagesAsync(xsg); await convertIconsToPngAsync(xsg); @@ -687,4 +706,14 @@ function flowBlocks(comments: Blockly.comments.RenderedWorkspaceComment[], block function formattable(entity: Blockly.BlockSvg | Blockly.comments.RenderedWorkspaceComment): Formattable { const hw = entity instanceof Blockly.BlockSvg ? entity.getHeightWidth() : entity.getSize(); return { value: entity, height: hw.height, width: hw.width } +} + +export function isDisabledBlocklyElement(element: Element): boolean { + if (element.hasAttribute("disabled-reasons")) { + return !!element.getAttribute("disabled-reasons"); + } + else if (element.hasAttribute("disabled")) { + return element.getAttribute("disabled") === "true"; + } + return false; } \ No newline at end of file diff --git a/pxtblocks/loader.ts b/pxtblocks/loader.ts index 7b31b4044812..4b040a501c8f 100644 --- a/pxtblocks/loader.ts +++ b/pxtblocks/loader.ts @@ -24,13 +24,14 @@ import { initContextMenu } from "./contextMenu"; import { renderCodeCard } from "./codecardRenderer"; import { FieldDropdown } from "./fields/field_dropdown"; import { setDraggableShadowBlocks, setDuplicateOnDrag, setDuplicateOnDragStrategy } from "./plugins/duplicateOnDrag"; -import { initAccessibleBlocksCopyPasteContextMenu, initCopyPaste } from "./copyPaste"; +import { initCopyPaste } from "./copyPaste"; export { initCopyPaste } from "./copyPaste"; import { FieldVariable } from "./plugins/newVariableField/fieldVariable"; import { ArgumentReporterBlock, FieldArgumentReporter, setArgumentReporterLocalizeFunction } from "./plugins/functions"; import { getArgumentReporterParent } from "./plugins/functions/utils"; import { isFunctionDefinition } from "./compiler/util"; import { AUTO_DISABLED_REASON } from "./compiler/compiler"; +import { DEFAULT_LED_COLORS, FieldLEDMatrixColorPicker, getDefaultColorNames } from "./fields/field_ledmatrix_colorPicker"; export const DRAGGABLE_PARAM_INPUT_PREFIX = "HANDLER_DRAG_PARAM_"; @@ -279,7 +280,9 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI } else { i.setCheck("Variable"); } - + // Use zero width space character. Empty strings and null are falsey + // which results in the default value being used by Blockly "input i". + i.setAriaLabelProvider("\u200b"); }); comp.handlerArgs.forEach(arg => { @@ -322,15 +325,76 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI } }); - const gridTemplateString = fn.attributes.imageLiteral || fn.attributes.gridLiteral; + const gridTemplateString = fn.attributes.imageLiteral || fn.attributes.gridLiteral || fn.attributes.colorGridLiteral; if (gridTemplateString) { const columns = (fn.attributes.imageLiteralColumns || 5) * gridTemplateString; const rows = fn.attributes.imageLiteralRows || 5; const scale = fn.attributes.imageLiteralScale; - const onColor = fn.attributes.gridLiteralOnColor; - const offColor = fn.attributes.gridLiteralOffColor; + + let colors: string[]; + let colorNames: string[] = []; + + if (fn.attributes.gridLiteralUseProjectPalette) { + colors = pxt.appTarget.runtime.palette!; + colorNames = colors.map((c, i) => i === 0 ? lf("{id:color}transparency") : pxt.U.lf("{id:color}color {0}", i)); + } + else if (fn.attributes.gridLiteralPalette) { + colors = fn.attributes.gridLiteralPalette.split(",").map(c => c.trim()); + } + else if (fn.attributes.gridLiteralOnColor || fn.attributes.gridLiteralOffColor) { + colors = [ + fn.attributes.gridLiteralOffColor || "#000000", + fn.attributes.gridLiteralOnColor || "#ffffff" + ]; + colorNames = [lf("off"), lf("on")]; + } + else { + colors = ["#000000", ...DEFAULT_LED_COLORS]; + colorNames = [lf("off"), ...getDefaultColorNames()]; + } + + if (fn.attributes.gridLiteralPaletteNames) { + colorNames = fn.attributes.gridLiteralPaletteNames.split(",").map(c => pxt.U.rlf(`{id:color}${c.trim()}`)); + } + + for (let i = 0; i < colors.length; i++) { + if (!colorNames[i]) { + colorNames[i] = colors[i]; + } + } + + + const topInput = block.inputList[block.inputList.length - 1]; + + if (fn.attributes.colorGridLiteral) { + // color 0 is the off color, so we don't need it to be in the color picker + topInput.appendField( + new FieldLEDMatrixColorPicker( + info, + colors?.slice(1), + colorNames?.slice(1), + !!fn.attributes.gridLiteralUseProjectPalette + ), + "ON_COLOR" + ); + } + let ri = block.appendDummyInput(); - ri.appendField(new FieldLedMatrix("", { columns, rows, scale, onColor, offColor }), "LEDS"); + ri.appendField( + new FieldLedMatrix("", { + columns, + rows, + scale, + colors, + colorNames, + verticalSpacing: fn.attributes.gridLiteralVerticalSpacing, + horizontalSpacing: fn.attributes.gridLiteralHorizontalSpacing, + borderRadius: fn.attributes.gridLiteralBorderRadius, + hasOffColor: !!fn.attributes.gridLiteralOffColor, + isColorMatrix: !!fn.attributes.colorGridLiteral + }), + "LEDS" + ); } if (fn.attributes.inlineInputMode === "external") { @@ -386,6 +450,7 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI let inputName: string; let inputCheck: string | string[]; let hasParameter = false; + let inputParameter: pxt.blocks.BlockParameter; inputParts.forEach(part => { if (part.kind !== "param") { @@ -428,6 +493,7 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI let typeInfo = pxt.Util.lookup(info.apis.byQName, pr.type) hasParameter = true; + inputParameter = pr; const defName = pr.definitionName; const actName = pr.actualName; @@ -474,7 +540,8 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI height: 36, value: v.name } : k, - v.namespace + "." + v.name + v.namespace + "." + v.name, + v.attributes.ariaLabel ]; }); // if a value is provided, move it first @@ -542,6 +609,7 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI input = block.appendValueInput(inputName); input.setAlign(Blockly.inputs.Align.LEFT); + if (inputParameter) applyInputLabel(input, inputParameter); } else if (expanded) { const prefix = hasParameter ? optionalInputWithFieldPrefix : optionalDummyInputPrefix; @@ -633,6 +701,7 @@ function init(blockInfo: pxtc.BlocksInfo) { initText(); initComments(); initTooltip(); + initAccessibilityMessages(); // in safari on ios, Blockly isn't always great at clearing touch // identifiers. for most browsers this doesn't matter because the @@ -650,10 +719,6 @@ function init(blockInfo: pxtc.BlocksInfo) { } } -export function initAccessibleBlocksContextMenuItems() { - initAccessibleBlocksCopyPasteContextMenu() -} - /** * Converts a TypeScript type into an array of type checks for Blockly inputs/outputs. Use @@ -722,7 +787,143 @@ export function setOutputCheck(block: Blockly.Block, retType: string, info: pxtc } function initComments() { - Blockly.Msg.WORKSPACE_COMMENT_DEFAULT_TEXT = ''; + // Exposed to screen readers as placeholder text, but hidden from sighted users via + // the .blocklyCommentText::placeholder rule in blockly-core.less (no visual change). + Blockly.Msg.WORKSPACE_COMMENT_DEFAULT_TEXT = lf("Add a comment"); +} + +function initAccessibilityMessages() { + // Translatable overrides for Blockly's built-in keyboard-navigation strings. + // Excludes text used only in the shortcut dialog that we don't use. + Object.assign(Blockly.Msg, { + // Modifier and key names — read by Blockly's shortcut formatter when + // rendering shortcut hints (e.g. in the move/copy hint toasts). + CONTROL_KEY: lf("{id:keyboard symbol}Control"), + COMMAND_KEY: lf("{id:keyboard symbol}Command"), + OPTION_KEY: lf("{id:keyboard symbol}Option"), + ALT_KEY: lf("{id:keyboard symbol}Alt"), + ENTER_KEY: lf("{id:keyboard symbol}Enter"), + BACKSPACE_KEY: lf("{id:keyboard symbol}Backspace"), + DELETE_KEY: lf("{id:keyboard symbol}Delete"), + ESCAPE: lf("{id:keyboard symbol}Escape"), + TAB_KEY: lf("{id:keyboard symbol}Tab"), + SHIFT_KEY: lf("{id:keyboard symbol}Shift"), + CAPS_LOCK_KEY: lf("{id:keyboard symbol}Caps Lock"), + SPACE_KEY: lf("{id:keyboard symbol}Space"), + PAGE_UP_KEY: lf("{id:keyboard symbol}Page Up"), + PAGE_DOWN_KEY: lf("{id:keyboard symbol}Page Down"), + END_KEY: lf("{id:keyboard symbol}End"), + HOME_KEY: lf("{id:keyboard symbol}Home"), + INSERT_KEY: lf("{id:keyboard symbol}Insert"), + PAUSE_KEY: lf("{id:keyboard symbol}Pause"), + CONTEXT_MENU_KEY: lf("{id:keyboard symbol}≣ Menu"), + UNNAMED_KEY: lf("{id:keyboard symbol}unnamed"), + // Keyboard nav hints (toasts). + HELP_PROMPT: lf("Press %1 for help on keyboard controls."), + KEYBOARD_NAV_UNCONSTRAINED_MOVE_HINT: lf("Hold %1 and use arrow keys to move freely, then %2 to accept the position."), + KEYBOARD_NAV_CONSTRAINED_MOVE_HINT: lf("Use the arrow keys to move, then %1 to accept the position."), + KEYBOARD_NAV_COPIED_HINT: lf("Copied. Press %1 to paste."), + KEYBOARD_NAV_CUT_HINT: lf("Cut. Press %1 to paste."), + KEYBOARD_NAV_BLOCK_NAVIGATION_HINT: lf("Use %1 to navigate inside of blocks."), + KEYBOARD_NAV_WORKSPACE_NAVIGATION_HINT: lf("Use the arrow keys to navigate."), + KEYBOARD_NAV_FLYOUT_LABEL_HINT: lf("Use the arrow keys to navigate to a block, or press %1 to go to the next heading."), + SCREENREADER_HINT: lf("Use the arrow keys to navigate. Press %1 to toggle screenreader accessibility mode."), + // Aria labels for the workspace tree. + WORKSPACE_LABEL_PLAIN: lf("Blocks workspace."), + WORKSPACE_ROLEDESCRIPTION: lf("workspace"), + WORKSPACE_LABEL_1_STACK: lf("1 stack of blocks"), + WORKSPACE_LABEL_MANY_STACKS: lf("%1 stacks of blocks"), + WORKSPACE_LABEL_MUTATOR_WORKSPACE: lf("Block editor workspace"), + WORKSPACE_LABEL_FLYOUT_WORKSPACE: lf("%1 blocks"), + // Workspace contents announcement (the 'I' announce-info shortcut). + WORKSPACE_CONTENTS_BLOCKS_ZERO: lf("No blocks%2 in workspace."), + WORKSPACE_CONTENTS_BLOCKS_ONE: lf("One stack of blocks%2 in workspace."), + WORKSPACE_CONTENTS_BLOCKS_MANY: lf("%1 stacks of blocks%2 in workspace."), + WORKSPACE_CONTENTS_COMMENTS_ONE: lf(" and one comment"), + WORKSPACE_CONTENTS_COMMENTS_MANY: lf(" and %1 comments"), + // Aria labels for blocks. + BLOCK_LABEL_BEGIN_STACK: lf("Begin stack"), + BLOCK_LABEL_BEGIN_PREFIX: lf("Begin %1"), + BLOCK_LABEL_TOOLBOX_CATEGORY: lf("%1 category"), + BLOCK_LABEL_DISABLED: lf("{id:block state}disabled"), + BLOCK_LABEL_COLLAPSED: lf("{id:block state}collapsed"), + BLOCK_LABEL_REPLACEABLE: lf("{id:block state}replaceable"), + BLOCK_LABEL_HAS_INPUT: lf("has input"), + BLOCK_LABEL_HAS_INPUTS: lf("has inputs"), + BLOCK_LABEL_HAS_BRANCHES: lf("has %1 branches"), + BLOCK_LABEL_STATEMENT: lf("{id:block role}statement"), + BLOCK_LABEL_CONTAINER: lf("{id:block role}container"), + BLOCK_LABEL_VALUE: lf("{id:block role}value"), + BLOCK_LABEL_STACK_BLOCKS: lf("%1 stack blocks"), + // Aria labels for inputs. Only keys read by Blockly's own block code + // (for blocks PXT exposes unchanged) belong here; PXT-custom blocks + // set aria labels directly via setAriaLabelProvider / ariaLabelText. + INPUT_LABEL_INDEX: lf("input %1"), + INPUT_LABEL_VALUE: lf("{id:block position}value position"), + INPUT_LABEL_STATEMENT: lf("{id:block position}statement position"), + INPUT_LABEL_END_STATEMENT: lf("End %1"), + INPUT_LABEL_EMPTY: lf("Empty"), + INPUT_LABEL_VALUE_A: lf("first value"), // logic_compare + INPUT_LABEL_VALUE_B: lf("second value"), // logic_compare + INPUT_LABEL_CONDITION_A: lf("first condition"), // logic_operation + INPUT_LABEL_CONDITION_B: lf("second condition"), // logic_operation + INPUT_LABEL_NUMBER_A: lf("first value"), // math_arithmetic + INPUT_LABEL_NUMBER_B: lf("second value"), // math_arithmetic + INPUT_LABEL_MATH_DIVIDEND: lf("dividend"), // math_modulo + INPUT_LABEL_MATH_DIVISOR: lf("divisor"), // math_modulo + INPUT_LABEL_LOOP_TIMES: lf("number of times to repeat"), // controls_repeat_ext + INPUT_LABEL_TEXT_JOIN_ITEM: lf("value %1"), // text_join + // Generic aria labels. + ARIA_LABEL_BUTTON: lf("button"), + ARIA_LABEL_COMMENT: lf("Comment"), + ARIA_LABEL_COMMENT_COLLAPSE: lf("Collapse Comment"), + ARIA_LABEL_COMMENT_EXPAND: lf("Expand Comment"), + ARIA_LABEL_HEADING: lf("heading"), + // Field type labels for screen readers. + ARIA_TYPE_FIELD_CHECKBOX: lf("checkbox"), + ARIA_TYPE_FIELD_DROPDOWN: lf("dropdown"), + ARIA_TYPE_FIELD_GRID: lf("grid dropdown"), + ARIA_TYPE_FIELD_IMAGE: lf("image"), + ARIA_TYPE_FIELD_INPUT: lf("{id:field type}input"), + ARIA_TYPE_FIELD_NUMBER: lf("{id:field type}number"), + ARIA_TYPE_FIELD_TEXT_INPUT: lf("{id:field type}text"), + // Field state labels. + FIELD_LABEL_CHECKBOX_CHECKED: lf("{id:checkbox}Checked"), + FIELD_LABEL_CHECKBOX_UNCHECKED: lf("{id:checkbox}Not checked"), + FIELD_LABEL_EDIT_PREFIX: lf("Edit %1"), + FIELD_LABEL_EMPTY: lf("empty"), + FIELD_LABEL_OPTION_INDEX: lf("{id:dropdown}Option %1"), + FIELD_LABEL_VARIABLE: lf("Variable '%1'"), + // Bubble labels. + BUBBLE_LABEL_COMMENT: lf("Comment: %1"), + BUBBLE_LABEL_WARNING: lf("Warning: %1"), + // Icon labels. + ICON_LABEL_COMMENT_CLOSED: lf("Open Comment"), + ICON_LABEL_COMMENT_OPEN: lf("Close Comment"), + ICON_LABEL_DEFAULT: lf("Icon"), + ICON_LABEL_MUTATOR_CLOSED: lf("Edit this block"), + ICON_LABEL_MUTATOR_OPEN: lf("Close block editor"), + ICON_LABEL_WARNING_CLOSED: lf("Open Warning"), + ICON_LABEL_WARNING_OPEN: lf("Close Warning"), + // Move-mode announcements. + ANNOUNCE_MOVE_WORKSPACE: lf("Moving %1 on workspace."), + ANNOUNCE_MOVE_BEFORE: lf("Moving %1 before %2."), + ANNOUNCE_MOVE_AFTER: lf("Moving %1 after %2."), + ANNOUNCE_MOVE_INSIDE: lf("Moving %1 inside %2."), + ANNOUNCE_MOVE_AROUND: lf("Moving %1 around %2."), + ANNOUNCE_MOVE_TO: lf("Moving %1 to %2."), + ANNOUNCE_MOVE_OF: lf("%1 of %2"), + ANNOUNCE_MOVE_CANCELED: lf("Canceled movement."), + // Block info announcements (the 'I' / Shift+I shortcuts). + CURRENT_BLOCK_ANNOUNCEMENT: lf("Current block: %1"), + PARENT_BLOCKS_ANNOUNCEMENT: lf("Parent blocks: %1"), + NO_PARENT_ANNOUNCEMENT: lf("Current block has no parent"), + // Screenreader mode toggle (Alt/Option+Shift+A). + SCREENREADER_MODE_ENABLED: lf("Screenreader mode is on, press %1 to turn it off"), + SCREENREADER_MODE_DISABLED: lf("Screenreader mode is off, press %1 to turn it on"), + // Used for Blockly's toast close aria label. + CLOSE: lf("Close"), + }); } function initTooltip() { @@ -822,6 +1023,13 @@ function namedField(field: Blockly.Field, name: string): NamedField { return { field, name }; } +function applyInputLabel(input: Blockly.Input, parameter: pxt.blocks.BlockParameter) { + const label = (parameter.labelLocalizationKey && pxtc.getBlockTranslationsCacheKey(parameter.labelLocalizationKey)) || parameter.label; + if (!label) return; + + input.setAriaLabelProvider(label); +} + function getEnumDropdownValues(apis: pxtc.ApisInfo, enumName: string) { return pxt.Util.values(apis.byQName).filter(sym => sym.namespace === enumName && !sym.attributes.blockHidden); } @@ -924,4 +1132,4 @@ function localizeArgumentReporter(blocksInfo: pxtc.BlocksInfo, field: FieldArgum } return result; -} \ No newline at end of file +} diff --git a/pxtblocks/monkeyPatches/blockSvg.ts b/pxtblocks/monkeyPatches/blockSvg.ts index 56c4cc00e41e..76aacacd2c3d 100644 --- a/pxtblocks/monkeyPatches/blockSvg.ts +++ b/pxtblocks/monkeyPatches/blockSvg.ts @@ -1,6 +1,7 @@ import * as Blockly from "blockly"; import { FieldImageNoText } from "../fields/field_imagenotext"; import { ConstantProvider } from "../plugins/renderer/constants"; +import { maybeMoveFocusFromButton } from "../utils"; export function monkeyPatchBlockSvg() { const oldSetCollapsed = Blockly.BlockSvg.prototype.setCollapsed; @@ -14,8 +15,12 @@ export function monkeyPatchBlockSvg() { const image = ConstantProvider.EXPAND_IMAGE_DATAURI; if (image) { - input.appendField(new FieldImageNoText(image, 24, 24, "", () => { - this.setCollapsed(false) + input.appendField(new FieldImageNoText(image, 24, 24, lf("Expand block"), () => { + this.setCollapsed(false); + // Functions keep focus on their collapse button; other blocks + // have no such button so focus the block itself instead. + const collapseBtn = this.inputList.find(i => i.name === "function_collapse")?.fieldRow[0]; + maybeMoveFocusFromButton(collapseBtn ?? this); }, false)); } } @@ -95,4 +100,4 @@ export function monkeyPatchBlockSvg() { Blockly.Block.prototype.dispose.call(this, !!healStack); Blockly.utils.dom.removeNode(this.getSvgRoot()); } -} \ No newline at end of file +} diff --git a/pxtblocks/monkeyPatches/connection.ts b/pxtblocks/monkeyPatches/connection.ts new file mode 100644 index 000000000000..01afdac45f87 --- /dev/null +++ b/pxtblocks/monkeyPatches/connection.ts @@ -0,0 +1,20 @@ +import * as Blockly from "blockly"; + +export function monkeyPatchConnection() { + const oldConnectionForOrphanedConnection = Blockly.Connection.getConnectionForOrphanedConnection; + Blockly.Connection.getConnectionForOrphanedConnection = function (startBlock: Blockly.Block, orphanConnection: Blockly.Connection) { + // When a block is dragged into an input that already has a non-shadow block connected, Blockly has + // some logic that checks to see if the block you just dragged has a single input and, if so, connects + // the previously connected block to the input of the block you just dragged. Presumably this is to make + // it easier to wrap blocks with a new block (for example, dragging an absolute value block onto a number + // in an equation will wrap it theoretically saving you an extra drag). However, nobody ever expects this + // behavior and only the most powerful of power users would use it to their advantage. It also can cause + // type errors when the displaced block is a variable since variables can be connected to any input regardless + // of what type they actually hold. It's better to just disable it entirely. + if (orphanConnection.type === Blockly.ConnectionType.OUTPUT_VALUE) { + return null; + } + + return oldConnectionForOrphanedConnection(startBlock, orphanConnection); + } +} \ No newline at end of file diff --git a/pxtblocks/monkeyPatches/fullBlockField.ts b/pxtblocks/monkeyPatches/fullBlockField.ts new file mode 100644 index 000000000000..a26e9de3797f --- /dev/null +++ b/pxtblocks/monkeyPatches/fullBlockField.ts @@ -0,0 +1,28 @@ +import * as Blockly from "blockly"; +import { assertMethod } from "./util"; + +/** + * Blockly only treats a simple reporter as a "full block field" block when its + * very first field (inputList[0].fieldRow[0]) is itself a full block field. So + * a reporter with a leading label, e.g. "melody $melody", is never recognised, + * and is announced as just a value by screen readers with no indication that + * it's interactive. Contrast "$fraction beat", where the dropdown is first, + * which works. + * + * Workaround until Blockly's getFullBlockField considers fields beyond the first. + * In future it would be good to include the "melody" and "beat" text in the + * readout. + */ +export function monkeyPatchFullBlockField() { + assertMethod(Blockly.BlockSvg.prototype, "getFullBlockField"); + + Blockly.BlockSvg.prototype.getFullBlockField = function (this: Blockly.BlockSvg) { + if (!this.isSimpleReporter()) return null; + for (const input of this.inputList) { + for (const field of input.fieldRow) { + if (field.isFullBlockField()) return field; + } + } + return null; + }; +} diff --git a/pxtblocks/monkeyPatches/gesture.ts b/pxtblocks/monkeyPatches/gesture.ts index 5a5d7ab46775..e7c138be3379 100644 --- a/pxtblocks/monkeyPatches/gesture.ts +++ b/pxtblocks/monkeyPatches/gesture.ts @@ -1,10 +1,33 @@ import * as Blockly from "blockly"; +import { isAllowlistedShadow } from "../plugins/duplicateOnDrag/duplicateOnDrag"; +import { assertMethod } from "./util"; interface PatchedGesture extends Blockly.Gesture { id: number | undefined boundEvents_: Blockly.browserEvents.Data[]; } +/** + * Make allowlisted shadow blocks (marked `duplicateShadowOnDrag`) the drag + * target rather than their parent. Blockly's default walks up to the nearest + * non-shadow ancestor; we want the shadow itself so the duplicate-on-drag + * strategy can extract it and refill the parent slot via setShadowDom. + */ +export function monkeyPatchShadowDragTargetBlock() { + const proto = Blockly.Gesture.prototype as any; + assertMethod(proto, "setTargetBlock"); + const origSetTargetBlock = proto.setTargetBlock; + proto.setTargetBlock = function (block: Blockly.BlockSvg) { + if (block.isShadow() && isAllowlistedShadow(block)) { + this.targetBlock = block; + block.bringToFront(); + Blockly.getFocusManager().focusNode(block); + return; + } + return origSetTargetBlock.call(this, block); + }; +} + export function monkeyPatchGesture() { // This monkey patch is only required for the in-game experience of Minecraft on ChromeOS. // For some reason, events are occasionally dropped by the Android webview when multitouch @@ -111,4 +134,4 @@ export function monkeyPatchGesture() { this.boundEvents_.length = 0; } } -} \ No newline at end of file +} diff --git a/pxtblocks/monkeyPatches/index.ts b/pxtblocks/monkeyPatches/index.ts index e03d650cc939..6c0f5028904d 100644 --- a/pxtblocks/monkeyPatches/index.ts +++ b/pxtblocks/monkeyPatches/index.ts @@ -1,5 +1,7 @@ import { monkeyPatchBlockSvg } from "./blockSvg"; -import { monkeyPatchGesture } from "./gesture"; +import { monkeyPatchConnection } from "./connection"; +import { monkeyPatchFullBlockField } from "./fullBlockField"; +import { monkeyPatchGesture, monkeyPatchShadowDragTargetBlock } from "./gesture"; import { monkeyPatchGrid } from "./grid"; import { monkeyPatchAddKeyMapping } from "./shortcut_registry"; @@ -7,5 +9,8 @@ export function applyMonkeyPatches() { monkeyPatchBlockSvg(); monkeyPatchGrid(); monkeyPatchGesture(); + monkeyPatchShadowDragTargetBlock(); monkeyPatchAddKeyMapping(); -} \ No newline at end of file + monkeyPatchConnection(); + monkeyPatchFullBlockField(); +} diff --git a/pxtblocks/monkeyPatches/util.ts b/pxtblocks/monkeyPatches/util.ts new file mode 100644 index 000000000000..4480d568bd12 --- /dev/null +++ b/pxtblocks/monkeyPatches/util.ts @@ -0,0 +1,6 @@ +// Asserts a method exists on the target before we monkey patch it. +export function assertMethod(target: any, key: string) { + if (typeof target?.[key] !== "function") { + throw new Error(`Blockly monkey patch target missing method: ${key}`); + } +} diff --git a/pxtblocks/plugins/arrays/createList.ts b/pxtblocks/plugins/arrays/createList.ts index 574a5e5ba14d..bee9fbb7d823 100644 --- a/pxtblocks/plugins/arrays/createList.ts +++ b/pxtblocks/plugins/arrays/createList.ts @@ -3,6 +3,7 @@ import { FUNCTION_CALL_OUTPUT_BLOCK_TYPE } from "../functions/constants"; import { CommonFunctionBlock } from "../functions/commonFunctionMixin"; import { InlineSvgsExtensionBlock } from "../functions"; import { FieldImageNoText } from "../../fields/field_imagenotext"; +import { maybeMoveFocusFromButton } from "../../utils"; type ListCreateMixinType = typeof LIST_CREATE_MIXIN; @@ -14,6 +15,8 @@ const LIST_CREATE_MIXIN = { valueConnections_: [] as Blockly.Connection[], horizontalAfter_: 3, itemCount_: 3, + buttons: null as Blockly.Input | null, + delta: 0, /** * Create XML to represent list inputs. * @return {!Element} XML storage element. @@ -57,6 +60,7 @@ const LIST_CREATE_MIXIN = { const update = () => { this.itemCount_++; }; + this.delta = 1; this.update_(update); this.restoreConnections_(); // Add shadow block @@ -147,6 +151,7 @@ const LIST_CREATE_MIXIN = { const update = () => { this.itemCount_--; }; + this.delta = -1; this.update_(update); this.restoreConnections_(); }, @@ -177,7 +182,17 @@ const LIST_CREATE_MIXIN = { }, Blockly.config.bumpDelay); } if (block.rendered && block instanceof Blockly.BlockSvg) { - block.queueRender(); + block.queueRender().then(() => { + if (this.buttons) { + let field = this.buttons.fieldRow[0]; + if (this.buttons.fieldRow.length > 1) { + field = this.delta < 0 ? field : this.buttons.fieldRow[1]; + } + maybeMoveFocusFromButton(field); + this.buttons = null; + this.delta = 0; + } + }); } Blockly.Events.setGroup(false); }, @@ -210,7 +225,8 @@ const LIST_CREATE_MIXIN = { // Add new inputs. for (i = 0; i < this.itemCount_; i++) { if (!this.getInput('ADD' + i)) { - this.appendValueInput('ADD' + i); + this.appendValueInput('ADD' + i) + .setAriaLabelProvider(lf("value {0}", i + 1)); } } // Remove deleted inputs. @@ -219,11 +235,11 @@ const LIST_CREATE_MIXIN = { i++; } if (this.getInput('BUTTONS')) this.removeInput('BUTTONS'); - const buttons = this.appendDummyInput('BUTTONS'); + this.buttons = this.appendDummyInput('BUTTONS'); if (this.itemCount_ > 0) { - buttons.appendField(new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, "*", remove, false)); + this.buttons.appendField(new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, lf("remove argument"), remove, false)); } - buttons.appendField(new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, "*", add, false)); + this.buttons.appendField(new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, lf("add argument"), add, false)); /* Switch to vertical list when the list is too long */ const showHorizontalList = this.itemCount_ <= this.horizontalAfter_; @@ -252,4 +268,4 @@ Blockly.Blocks["lists_create_with"] = { this.setInputsInline(true); this.setTooltip(Blockly.Msg['LISTS_CREATE_WITH_TOOLTIP']); } -} \ No newline at end of file +} diff --git a/pxtblocks/plugins/colorpicker/colorPickerBlock.ts b/pxtblocks/plugins/colorpicker/colorPickerBlock.ts new file mode 100644 index 000000000000..1937c9bf3256 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerBlock.ts @@ -0,0 +1,213 @@ +import * as Blockly from "blockly"; +import { ColorDropdownField } from "./colorPickerDropdown"; +import { ColorPickerNumberBlock, COLOR_NUMBER_BLOCK_TYPE, generateColorPickerNumberShadowDom } from "./colorPickerNumberBlock"; +import { COLOR_STRING_BLOCK_TYPE, generateColorPickerStringShadowDom } from "./colorPickerStringBlock"; +import { FieldColorPickerNumberType, fromFormatToHex, fromFormatToHSV, fromHexToFormat, fromHSVToFormat, getFieldTypesForFormat } from "./util"; + +export interface ColorPickerBlock extends Blockly.Block { + colorHSVLoaded: boolean; + colorHSV: number[]; + updateShape: (format: string) => void; + setColorHSV: (hsv: number[]) => void; + setFormat: (format: string, prevFormat?: string) => void; + readColorFromInputs: () => void; +} + +const HEX_INPUT_NAME = "HEX_INPUT"; + +export const COLOR_PICKER_BLOCK_TYPE = "makecode_color_picker"; + + +export function initColorPickerBlock() { + Blockly.Blocks[COLOR_PICKER_BLOCK_TYPE] = { + // store the color as HSV because converting to RGB causes us to lose + // the hue value for some colors (e.g. grayscale colors) + colorHSVLoaded: false, + colorHSV: [0, 0, 0], + + init: function (this: ColorPickerBlock) { + this.setOutput(true, "Number"); + this.setColour(Blockly.Msg["COLOUR_HUE"] || 20); + this.setInputsInline(true); + + this.appendDummyInput() + .appendField(new ColorDropdownField("rgb"), "FORMAT"); + + this.updateShape(this.getFieldValue("FORMAT")); + this.setColorHSV(this.colorHSV); + }, + + domToMutation: function (this: ColorPickerBlock, xmlElement: Element) { + if (xmlElement.hasAttribute("hue") && xmlElement.hasAttribute("saturation") && xmlElement.hasAttribute("value")) { + this.colorHSVLoaded = true; + this.colorHSV = [ + parseFloat(xmlElement.getAttribute("hue")) || 0, + parseFloat(xmlElement.getAttribute("saturation")) || 0, + parseFloat(xmlElement.getAttribute("value")) || 0 + ]; + + this.setFormat(this.getFieldValue("FORMAT")); + } + + if (xmlElement.hasAttribute("color")) { + const color = xmlElement.getAttribute("color"); + if (color) { + this.setColour(color); + } + } + }, + + mutationToDom: function () { + const container = document.createElement("mutation"); + if (this.colorHSVLoaded) { + container.setAttribute("hue", this.colorHSV[0].toString()); + container.setAttribute("saturation", this.colorHSV[1].toString()); + container.setAttribute("value", this.colorHSV[2].toString()); + } + container.setAttribute("color", this.getColour()); + + return container; + }, + + updateShape: function (this: ColorPickerBlock, format: string) { + let numericalInputs: FieldColorPickerNumberType[] = []; + const hexInput = this.getInput(HEX_INPUT_NAME); + + if (format === "hex") { + if (!hexInput) { + this.appendValueInput(HEX_INPUT_NAME) + .setCheck("String") + .setShadowDom(generateColorPickerStringShadowDom(fromFormatToHex("hsv", this.colorHSV))) + } + } + else { + if (hexInput) { + const target = hexInput.connection.targetBlock(); + if (target?.isShadow()) { + target.dispose(); + } + else { + target?.unplug(); + } + this.removeInput(HEX_INPUT_NAME); + } + + numericalInputs = getFieldTypesForFormat(format); + } + + for (let i = 0; i < 4; i++) { + const existing = this.getInput("INPUT" + i); + const shouldRemove = i >= numericalInputs.length; + const format = numericalInputs[i]; + + if (existing) { + const target = existing.connection.targetBlock(); + + if (shouldRemove) { + if (target?.isShadow()) { + target.dispose(); + } + else { + target?.unplug(); + } + + this.removeInput(existing.name); + } + else if (target) { + if (target.type === COLOR_NUMBER_BLOCK_TYPE) { + (target as ColorPickerNumberBlock).setFormat(format); + } + } + else { + existing.connection.setShadowDom(generateColorPickerNumberShadowDom(format, 0)); + } + } + else if (shouldRemove) { + continue; + } + else { + this.appendValueInput("INPUT" + i) + .setCheck("Number") + .setShadowDom(generateColorPickerNumberShadowDom(format, 0)); + } + } + }, + + setColorHSV: function (this: ColorPickerBlock, hsv: number[]) { + if (this.getFieldValue("FORMAT") === "hex") { + const color = fromFormatToHex("hsv", hsv); + + const hexInput = this.getInput(HEX_INPUT_NAME); + const target = hexInput?.connection.targetBlock(); + + if (target?.type === "text" || target?.type === COLOR_STRING_BLOCK_TYPE) { + const field = target.getField("TEXT"); + field.setValue(color); + } + return; + } + + const values = fromHSVToFormat(this.getFieldValue("FORMAT"), hsv); + + for (let i = 0; i < values.length; i++) { + const input = this.getInput("INPUT" + i); + const target = input?.connection.targetBlock(); + + if (target?.type === COLOR_NUMBER_BLOCK_TYPE) { + const field = target.getField("NUM"); + field.setValue(Math.round(values[i]).toString()); + } + } + + this.colorHSV = hsv; + }, + + setFormat: function (this: ColorPickerBlock, format: string, prevFormat = format) { + const hsv = this.colorHSV; + if (format !== prevFormat) { + this.updateShape(format); + + const field = this.getField("FORMAT") as ColorDropdownField; + + if (field.getValue() !== format) { + field.setValue(format); + } + + this.setColorHSV(hsv); + } + }, + + readColorFromInputs: function (this: ColorPickerBlock) { + this.colorHSVLoaded = true; + if (this.getFieldValue("FORMAT") === "hex") { + // TODO: verify the target is a color picker string + const hexInput = this.getInput(HEX_INPUT_NAME); + const target = hexInput?.connection.targetBlock(); + + if (target?.type === "text" || target?.type === COLOR_STRING_BLOCK_TYPE) { + const hex = target.getField("TEXT").getValue(); + this.colorHSV = fromHexToFormat("hsv", hex); + } + return; + } + + const currentValues = fromHSVToFormat(this.getFieldValue("FORMAT"), this.colorHSV); + const newValues: number[] = []; + + for (let i = 0; i < currentValues.length; i++) { + const input = this.getInput("INPUT" + i); + const target = input?.connection.targetBlock(); + + if (target?.type === COLOR_NUMBER_BLOCK_TYPE) { + const field = target.getField("NUM"); + newValues.push(parseFloat(field.getValue())); + } + else { + newValues.push(currentValues[i]); + } + } + + this.colorHSV = fromFormatToHSV(this.getFieldValue("FORMAT"), newValues); + } + } +} \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/colorPickerDropdown.ts b/pxtblocks/plugins/colorpicker/colorPickerDropdown.ts new file mode 100644 index 000000000000..12f5da5a9543 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerDropdown.ts @@ -0,0 +1,39 @@ +import * as Blockly from "blockly"; +import { FieldDropdown } from "../../fields/field_dropdown"; +import { ColorPickerBlock, COLOR_PICKER_BLOCK_TYPE } from "./colorPickerBlock"; + +const COLOR_FORMATS: [string, string][] = [ + ["RGB", "rgb"], + ["HSL", "hsl"], + ["HSV", "hsv"], + ["CMYK", "cmyk"], + ["Hex", "hex"] +] + +export class ColorDropdownField extends FieldDropdown { + constructor(value: string) { + super(COLOR_FORMATS); + + this.setValue(value); + } + + override onItemSelected_(menu: Blockly.Menu, menuItem: Blockly.MenuItem) { + if (this.sourceBlock_?.type === COLOR_PICKER_BLOCK_TYPE) { + const colorPicker = this.sourceBlock_ as ColorPickerBlock; + if (!colorPicker.colorHSVLoaded) { + colorPicker.readColorFromInputs(); + } + } + + super.onItemSelected_(menu, menuItem); + } + + override doValueUpdate_(newValue: string) { + const prevValue = this.getValue(); + super.doValueUpdate_(newValue); + if (this.sourceBlock_?.type === COLOR_PICKER_BLOCK_TYPE) { + const colorPicker = this.sourceBlock_ as ColorPickerBlock; + colorPicker.setFormat(newValue, prevValue); + } + } +} diff --git a/pxtblocks/plugins/colorpicker/colorPickerNumberBlock.ts b/pxtblocks/plugins/colorpicker/colorPickerNumberBlock.ts new file mode 100644 index 000000000000..b1cdfa6f942d --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerNumberBlock.ts @@ -0,0 +1,55 @@ +import * as Blockly from "blockly"; +import { FieldColorPickerNumber } from "./colorPickerNumberField"; +import { FieldColorPickerNumberType } from "./util"; + +export const COLOR_NUMBER_BLOCK_TYPE = "makecode_color_picker_number"; + +export interface ColorPickerNumberBlock extends Blockly.Block { + format: FieldColorPickerNumberType; + setFormat: (format: FieldColorPickerNumberType) => void; +} + +export function initColorPickerNumberBlock() { + Blockly.Blocks[COLOR_NUMBER_BLOCK_TYPE] = { + format: FieldColorPickerNumberType.Degrees, + init: function () { + this.appendDummyInput() + .appendField(new FieldColorPickerNumber(0, FieldColorPickerNumberType.Degrees), "NUM"); + this.setOutput(true, "Number"); + this.setColour(Blockly.Msg["COLOUR_HUE"] || 20); + }, + domToMutation: function (this: ColorPickerNumberBlock, xmlElement: Element) { + const format = parseInt(xmlElement.getAttribute("format")); + + this.setFormat(format); + }, + mutationToDom: function (this: ColorPickerNumberBlock) { + const container = document.createElement("mutation"); + container.setAttribute("format", this.format.toString()); + return container; + }, + setFormat: function (this: ColorPickerNumberBlock, format: FieldColorPickerNumberType) { + if (format !== this.format) { + this.format = format; + const field = this.getField("NUM") as FieldColorPickerNumber; + field.setType(format); + } + } + } +} + +export function generateColorPickerNumberShadowDom(format: FieldColorPickerNumberType, value: number) { + const container = document.createElement("shadow"); + container.setAttribute("type", COLOR_NUMBER_BLOCK_TYPE); + + const mutation = document.createElement("mutation"); + mutation.setAttribute("format", format.toString()); + container.appendChild(mutation); + + const fieldValue = document.createElement("field"); + fieldValue.setAttribute("name", "NUM"); + fieldValue.textContent = value.toString(); + container.appendChild(fieldValue); + + return container; +} \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/colorPickerNumberField.ts b/pxtblocks/plugins/colorpicker/colorPickerNumberField.ts new file mode 100644 index 000000000000..5ec1eac3d182 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerNumberField.ts @@ -0,0 +1,152 @@ +import { COLOR_PICKER_BLOCK_TYPE, ColorPickerBlock } from "./colorPickerBlock"; +import { FieldColorPickerNumberType } from "./util"; + +import * as Blockly from "blockly"; +import { ColorPickerWidget } from "./colorPickerWidget"; + + +export class FieldColorPickerNumber extends Blockly.FieldNumber { + private inputKeydownHandler: (e: KeyboardEvent) => {} | undefined; + protected keyboardControlActive = false; + protected colorPicker: ColorPickerWidget | undefined; + + constructor( + value?: string | number | typeof Blockly.Field.SKIP_SETUP, + type: FieldColorPickerNumberType = FieldColorPickerNumberType.Degrees, + ) { + super(value, 0, getMaxForType(type)); + } + + getFieldDescription(): string { + return this.getValue() + ""; + } + + setType(type: FieldColorPickerNumberType) { + this.setMax(getMaxForType(type)); + } + + protected widgetDispose_(): void { + this.removeEventListeners(); + super.widgetDispose_(); + } + + private addEventListeners() { + this.inputKeydownHandler = this.inputKeydownListener.bind(this); + this.htmlInput_.addEventListener("keydown", this.inputKeydownHandler); + this.htmlInput_.addEventListener("keyup", this.inputKeyupListener); + } + + private removeEventListeners() { + this.htmlInput_.removeEventListener("keydown", this.inputKeydownHandler); + this.htmlInput_.removeEventListener("keyup", this.inputKeyupListener); + this.colorPicker?.dispose(); + this.colorPicker = undefined; + } + + private inputKeydownListener(e: KeyboardEvent) { + if (e.key === "ArrowDown") { + e.preventDefault(); + this.keyboardControlActive = true; + if (this.colorPicker) { + this.colorPicker.focusSlider(); + } + } + } + + private inputKeyupListener = (e: KeyboardEvent) => { + const colorPickerBlock = this.sourceBlock_?.getParent() as ColorPickerBlock; + const newValue = Math.max(0, Math.min(this.max_, parseInt(this.htmlInput_.value))); + + if (!Number.isNaN(newValue)) { + if (colorPickerBlock?.type === COLOR_PICKER_BLOCK_TYPE && this.colorPicker) { + const channel = parseInt(this.sourceBlock_.outputConnection.targetConnection.getParentInput().name.slice(-1)); + + colorPickerBlock.setColorHSV(this.colorPicker.updateColorChannel(colorPickerBlock.getFieldValue("FORMAT"), channel, newValue)); + } + } + } + + protected showEditor_(_e?: Event, quietInput?: boolean): void { + // Align with Blockly's approach in https://github.com/google/blockly-samples/blob/master/plugins/field-slider/src/field_slider.ts + // Always quiet the input for the super constructor, as we don't want to + // focus on the text field, and we don't want to display the modal + // editor on mobile devices. + super.showEditor_(_e, true); + + if (typeof this.min_ === "number" && typeof this.max_ === "number") { + this.htmlInput_.ariaLabel = lf("Enter a value between {0} and {1}", this.min_, this.max_); + } + + Blockly.DropDownDiv.hideWithoutAnimation(); + Blockly.DropDownDiv.clearContent(); + Blockly.DropDownDiv.getContentDiv().style.height = ""; + + const contentDiv = Blockly.DropDownDiv.getContentDiv(); + + // Accessibility properties + contentDiv.setAttribute('role', 'menu'); + contentDiv.setAttribute('aria-haspopup', 'true'); + + const colorPickerBlock = this.sourceBlock_?.getParent() as ColorPickerBlock; + + if (!colorPickerBlock) { + return; + } + + if (!colorPickerBlock.colorHSVLoaded) { + colorPickerBlock.readColorFromInputs(); + } + + let coorHSV = [0, 0, 0]; + + if (colorPickerBlock?.type === COLOR_PICKER_BLOCK_TYPE) { + coorHSV = colorPickerBlock.colorHSV; + } + + this.colorPicker = new ColorPickerWidget( + active => { this.keyboardControlActive = active; }, + () => this.keyboardControlActive, + () => { if (this.htmlInput_) this.htmlInput_.focus(); }, + hsv => this.onColorChanged(hsv), + ); + + this.colorPicker.createDom(contentDiv, coorHSV); + + // Set colour and size of drop-down + const positionBlock = colorPickerBlock || this.sourceBlock_; + Blockly.DropDownDiv.setColour('#ffffff', '#dddddd'); + Blockly.DropDownDiv.showPositionedByBlock(this, positionBlock as Blockly.BlockSvg, undefined, undefined, false); + + this.addEventListeners(); + + if (!quietInput) { + this.htmlInput_.focus(); + this.htmlInput_.select(); + } + } + + protected onColorChanged(hsv: number[]) { + const parent = this.sourceBlock_?.getParent() as ColorPickerBlock | undefined; + + if (parent?.type !== COLOR_PICKER_BLOCK_TYPE) { + return; + } + + parent.setColorHSV(hsv); + + if (this.htmlInput_) { + this.htmlInput_.value = this.getValue() + ""; + } + } +} + +function getMaxForType(type: FieldColorPickerNumberType) { + switch (type) { + case FieldColorPickerNumberType.Degrees: + return 360; + case FieldColorPickerNumberType.Percentage: + return 100; + case FieldColorPickerNumberType.RGB: + return 255; + } +} \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/colorPickerStringBlock.ts b/pxtblocks/plugins/colorpicker/colorPickerStringBlock.ts new file mode 100644 index 000000000000..8b08ccc799c6 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerStringBlock.ts @@ -0,0 +1,32 @@ +import * as Blockly from "blockly"; +import { FieldColorPickerString } from "./colorPickerStringField"; +import { FieldColorPickerNumberType } from "./util"; + +export const COLOR_STRING_BLOCK_TYPE = "makecode_color_picker_string"; + +export interface ColorPickerStringBlock extends Blockly.Block { +} + +export function initColorPickerStringBlock() { + Blockly.Blocks[COLOR_STRING_BLOCK_TYPE] = { + format: FieldColorPickerNumberType.Degrees, + init: function () { + this.appendDummyInput() + .appendField(new FieldColorPickerString(), "TEXT"); + this.setOutput(true, "String"); + this.setColour(Blockly.Msg["COLOUR_HUE"] || 20); + } + } +} + +export function generateColorPickerStringShadowDom(value: string) { + const container = document.createElement("shadow"); + container.setAttribute("type", COLOR_STRING_BLOCK_TYPE); + + const fieldValue = document.createElement("field"); + fieldValue.setAttribute("name", "TEXT"); + fieldValue.textContent = value.toString(); + container.appendChild(fieldValue); + + return container; +} \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/colorPickerStringField.ts b/pxtblocks/plugins/colorpicker/colorPickerStringField.ts new file mode 100644 index 000000000000..9abd38c0545d --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerStringField.ts @@ -0,0 +1,99 @@ +import { FieldString } from "../text/fieldString"; + +import * as Blockly from "blockly"; +import { ColorPickerWidget } from "./colorPickerWidget"; +import { COLOR_PICKER_BLOCK_TYPE, ColorPickerBlock } from "./colorPickerBlock"; + + +export class FieldColorPickerString extends FieldString { + private inputKeydownHandler: (e: KeyboardEvent) => {} | undefined; + protected keyboardControlActive = false; + protected colorPicker: ColorPickerWidget | undefined; + + protected widgetDispose_(): void { + this.removeEventListeners(); + super.widgetDispose_(); + } + + private addEventListeners() { + this.inputKeydownHandler = this.inputKeydownListener.bind(this); + this.htmlInput_.addEventListener("keydown", this.inputKeydownHandler); + } + + private removeEventListeners() { + this.htmlInput_.removeEventListener("keydown", this.inputKeydownHandler); + this.colorPicker?.dispose(); + this.colorPicker = undefined; + } + + private inputKeydownListener(e: KeyboardEvent) { + if (e.key === "ArrowDown") { + e.preventDefault(); + this.keyboardControlActive = true; + if (this.colorPicker) { + this.colorPicker.focusSlider(); + } + } + } + + protected showEditor_(_e?: Event, quietInput?: boolean): void { + // Align with Blockly's approach in https://github.com/google/blockly-samples/blob/master/plugins/field-slider/src/field_slider.ts + // Always quiet the input for the super constructor, as we don't want to + // focus on the text field, and we don't want to display the modal + // editor on mobile devices. + super.showEditor_(_e, true); + + Blockly.DropDownDiv.hideWithoutAnimation(); + Blockly.DropDownDiv.clearContent(); + Blockly.DropDownDiv.getContentDiv().style.height = ""; + + const contentDiv = Blockly.DropDownDiv.getContentDiv(); + + // Accessibility properties + contentDiv.setAttribute('role', 'menu'); + contentDiv.setAttribute('aria-haspopup', 'true'); + + const colorPickerBlock = this.sourceBlock_?.getParent() as ColorPickerBlock; + + let colorHSV = [0, 0, 0]; + + if (colorPickerBlock?.type === COLOR_PICKER_BLOCK_TYPE) { + colorHSV = colorPickerBlock.colorHSV; + } + + this.colorPicker = new ColorPickerWidget( + active => { this.keyboardControlActive = active; }, + () => this.keyboardControlActive, + () => { if (this.htmlInput_) this.htmlInput_.focus(); }, + hsv => this.onColorChanged(hsv), + ); + + this.colorPicker.createDom(contentDiv, colorHSV); + + // Set colour and size of drop-down + const positionBlock = colorPickerBlock || this.sourceBlock_; + Blockly.DropDownDiv.setColour('#ffffff', '#dddddd'); + Blockly.DropDownDiv.showPositionedByBlock(this, positionBlock as Blockly.BlockSvg, undefined, undefined, false); + + this.addEventListeners(); + + if (!quietInput) { + this.htmlInput_.focus(); + this.htmlInput_.select(); + } + } + + protected onColorChanged(hsv: number[]) { + const parent = this.sourceBlock_?.getParent() as ColorPickerBlock | undefined; + + if (parent?.type !== COLOR_PICKER_BLOCK_TYPE) { + return; + } + + parent.setColorHSV(hsv); + + if (this.htmlInput_) { + this.htmlInput_.value = this.getValue() + ""; + } + } +} diff --git a/pxtblocks/plugins/colorpicker/colorPickerWidget.ts b/pxtblocks/plugins/colorpicker/colorPickerWidget.ts new file mode 100644 index 000000000000..eafcee19576d --- /dev/null +++ b/pxtblocks/plugins/colorpicker/colorPickerWidget.ts @@ -0,0 +1,436 @@ +import { fromFormatToHex, fromFormatToHSV, fromHexToFormat, fromHSVToFormat } from "./util"; +import * as Blockly from "blockly"; + +const thumbStylePrefix = `--blocklyFieldSliderBackgroundColor: ${createSliderGradient()}; --blocklyFieldSliderThumbBorderColor: #ffffff; ` + +export class ColorPickerWidget { + private hueSlider: HTMLInputElement; + private saturationSlider: HTMLInputElement; + private valueSlider: HTMLInputElement; + + private colorPreview: HTMLDivElement + private canvas: HTMLCanvasElement; + private canvasContainer: HTMLDivElement; + private saturationValueHandle: HTMLDivElement; + + private hsv: number[] = [0, 100, 100]; + + private animFrameRequest: number | undefined; + + + constructor( + private setKeyboardControlActive: (active: boolean) => void, + private isKeyboardControlActive: () => boolean, + private focusHtmlInput: () => void, + private onColorChanged: (hsv: number[]) => void, + ) { + } + + createDom(container: HTMLDivElement, hsv: number[]) { + if (this.hueSlider) return; + + this.hsv = hsv; + + this.hueSlider = document.createElement("input"); + this.hueSlider.classList.add("blocklyFieldSlider"); + this.hueSlider.classList.add("hueSlider"); + this.hueSlider.type = "range"; + this.hueSlider.min = "0"; + this.hueSlider.max = "359"; + this.hueSlider.value = hsv[0] + ""; + this.hueSlider.step = "1"; + this.hueSlider.setAttribute("style", thumbStylePrefix + `--blocklyFieldSliderThumbColor: hsl(${this.hsv[0]}, 100%, 50%)`); + this.hueSlider.setAttribute("aria-label", lf("Hue")); + container.appendChild(this.hueSlider); + + this.saturationSlider = document.createElement("input"); + this.saturationSlider.classList.add("screen-reader-only"); + this.saturationSlider.type = "range"; + this.saturationSlider.min = "0"; + this.saturationSlider.max = "100"; + this.saturationSlider.value = hsv[1] + ""; + this.saturationSlider.step = "1"; + this.saturationSlider.setAttribute("aria-label", lf("Saturation")); + container.appendChild(this.saturationSlider); + + this.valueSlider = document.createElement("input"); + this.valueSlider.classList.add("screen-reader-only"); + this.valueSlider.type = "range"; + this.valueSlider.min = "0"; + this.valueSlider.max = "100"; + this.valueSlider.value = hsv[2] + ""; + this.valueSlider.step = "1"; + this.valueSlider.setAttribute("aria-label", lf("Value")); + container.appendChild(this.valueSlider); + + const row = document.createElement("div"); + row.style.display = "flex"; + row.style.flexDirection = "row"; + container.appendChild(row); + + this.colorPreview = document.createElement("div"); + this.colorPreview.style.width = "100px"; + this.colorPreview.style.height = "100px"; + this.colorPreview.style.backgroundColor = fromFormatToHex("hsv", this.hsv); + row.appendChild(this.colorPreview); + + this.canvasContainer = document.createElement("div"); + this.canvasContainer.style.position = "relative"; + this.canvasContainer.style.width = "200px"; + this.canvasContainer.style.height = "100px"; + row.appendChild(this.canvasContainer); + + this.canvas = document.createElement("canvas"); + this.canvas.width = 200; + this.canvas.height = 100; + this.canvasContainer.appendChild(this.canvas); + + renderCanvas(this.canvas); + + this.saturationValueHandle = document.createElement("div"); + this.saturationValueHandle.classList.add("saturation-value-handle"); + + this.canvasContainer.appendChild(this.saturationValueHandle); + + container.style.width = "308px"; + container.style.overflowX = "hidden"; + container.style.overflowY = "hidden"; + + const focus = () => { + // In firefox, stealing focus from the range input interrupts + // the dragging of the slider + if (!pxt.BrowserUtils.isFirefox()) { + if (!this.isKeyboardControlActive()) { + this.focusHtmlInput(); + } + } + }; + + // Configure event handler. + for (let i = 0; i < 3; i++) { + const slider = [this.hueSlider, this.saturationSlider, this.valueSlider][i]; + Blockly.browserEvents.bind(slider, "focus", this, (event: FocusEvent) => { + focus(); + }); + Blockly.browserEvents.bind(slider, "input", this, (event: InputEvent) => { + const val = parseFloat(slider.value) || 0; + if (val !== null && val !== this.hsv[i]) { + this.hsv[i] = Math.round(val); + + const newColor = fromFormatToHex("hsv", this.hsv); + + this.updateBackgroundColor(newColor); + this.onColorChanged(this.hsv); + focus(); + } + }); + } + + let pointerDown = false; + + const updateSaturationValue = (e: PointerEvent) => { + if (!pointerDown) return; + e.preventDefault(); + + const rect = this.canvas.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const saturation = Math.round(Math.max(0, Math.min(100, (x / this.canvas.width) * 100))); + const value = Math.round(Math.max(0, Math.min(100, (1 - (y / this.canvas.height)) * 100))); + + this.hsv[1] = saturation; + this.hsv[2] = value; + this.saturationSlider.value = saturation + ""; + this.valueSlider.value = value + ""; + + const newColor = fromFormatToHex("hsv", this.hsv); + + this.updateBackgroundColor(newColor); + this.onColorChanged(this.hsv); + focus(); + }; + + this.canvasContainer.addEventListener("pointerdown", (e: PointerEvent) => { + pointerDown = true; + updateSaturationValue(e); + }); + + this.canvasContainer.addEventListener("pointermove", updateSaturationValue); + + const onPointerUp = (e: PointerEvent) => { + updateSaturationValue(e); + pointerDown = false; + } + + for (const ev of ["pointerup", "pointercancel", "pointerleave"]) { + this.canvasContainer.addEventListener(ev, onPointerUp); + } + + this.updateBackgroundColor(fromFormatToHex("hsv", this.hsv)); + this.addEventListeners(); + } + + updateColorChannel(format: string, channel: number, value: number) { + if (format === "hsv") { + this.hsv[channel] = value; + } + else if (format === "hsl" && channel === 0) { + this.hsv[0] = value; + } + else { + const values = fromHSVToFormat(format, this.hsv); + values[channel] = value; + this.hsv = fromFormatToHSV(format, values); + } + + this.updateBackgroundColor(fromFormatToHex("hsv", this.hsv)); + + return this.hsv.slice(); + } + + protected updateBackgroundColor(color: string) { + if (this.hueSlider) { + this.hueSlider.value = this.hsv[0] + ""; + } + + if (this.animFrameRequest) { + cancelAnimationFrame(this.animFrameRequest); + } + this.animFrameRequest = requestAnimationFrame(() => { + if (this.hueSlider) { + this.hueSlider.setAttribute("style", thumbStylePrefix + `--blocklyFieldSliderThumbColor: hsl(${this.hsv[0]}, 100%, 50%)`); + } + + if (this.colorPreview) { + this.colorPreview.style.backgroundColor = color; + } + + if (this.canvas) { + this.canvas.style.backgroundColor = `hsl(${this.hsv[0]}, 100%, 50%)`; + } + + if (this.saturationValueHandle) { + this.saturationValueHandle.style.left = `${(this.hsv[1] / 100) * this.canvas.width - this.saturationValueHandle.offsetWidth / 2}px`; + this.saturationValueHandle.style.top = `${((100 - this.hsv[2]) / 100) * this.canvas.height - this.saturationValueHandle.offsetHeight / 2}px`; + this.saturationValueHandle.style.backgroundColor = color; + } + this.animFrameRequest = undefined; + }); + } + + dispose() { + this.removeEventListeners(); + + if (this.animFrameRequest) { + cancelAnimationFrame(this.animFrameRequest); + this.animFrameRequest = undefined; + } + + if (this.hueSlider) { + this.hueSlider.remove(); + this.hueSlider = undefined; + } + + if (this.saturationSlider) { + this.saturationSlider.remove(); + this.saturationSlider = undefined; + } + + if (this.valueSlider) { + this.valueSlider.remove(); + this.valueSlider = undefined; + } + + if (this.colorPreview) { + this.colorPreview.remove(); + this.colorPreview = undefined; + } + + if (this.canvas) { + this.canvas.remove(); + this.canvas = undefined; + } + } + + focusSlider() { + if (this.hueSlider) { + this.hueSlider.focus(); + } + } + + private sliderPointerdownListener = (e: PointerEvent) => { + this.setKeyboardControlActive(false); + } + + private sliderKeydownListener = (e: KeyboardEvent) => { + switch (e.key) { + case 'ArrowUp': { + e.preventDefault(); + if (e.target === this.valueSlider) { + this.saturationSlider.focus(); + } + else if (e.target === this.saturationSlider) { + this.hueSlider.focus(); + } + else { + this.focusHtmlInput(); + } + break; + } + case 'Enter': + case ' ': { + e.preventDefault(); + e.stopPropagation(); + Blockly.hideChaff(); + break; + } + case "ArrowDown": { + e.preventDefault(); + e.stopPropagation(); + if (e.target === this.hueSlider) { + this.saturationSlider.focus(); + } + else if (e.target === this.saturationSlider) { + this.valueSlider.focus(); + } + break; + } + } + } + + private sliderBlurListener = (e: FocusEvent) => { + if (e.relatedTarget === this.hueSlider || + e.relatedTarget === this.saturationSlider || + e.relatedTarget === this.valueSlider) { + return; + } + this.setKeyboardControlActive(false); + } + + private addEventListeners() { + this.hueSlider.addEventListener('keydown', this.sliderKeydownListener); + this.hueSlider.addEventListener('blur', this.sliderBlurListener); + this.hueSlider.addEventListener("pointerdown", this.sliderPointerdownListener); + this.saturationSlider.addEventListener('keydown', this.sliderKeydownListener); + this.saturationSlider.addEventListener('blur', this.sliderBlurListener); + this.saturationSlider.addEventListener("pointerdown", this.sliderPointerdownListener); + this.valueSlider.addEventListener('keydown', this.sliderKeydownListener); + this.valueSlider.addEventListener('blur', this.sliderBlurListener); + this.valueSlider.addEventListener("pointerdown", this.sliderPointerdownListener); + } + + private removeEventListeners() { + this.hueSlider.removeEventListener('keydown', this.sliderKeydownListener); + this.hueSlider.removeEventListener('blur', this.sliderBlurListener); + this.hueSlider.removeEventListener('pointerdown', this.sliderPointerdownListener); + this.saturationSlider.removeEventListener('keydown', this.sliderKeydownListener); + this.saturationSlider.removeEventListener('blur', this.sliderBlurListener); + this.saturationSlider.removeEventListener('pointerdown', this.sliderPointerdownListener); + this.valueSlider.removeEventListener('keydown', this.sliderKeydownListener); + this.valueSlider.removeEventListener('blur', this.sliderBlurListener); + this.valueSlider.removeEventListener('pointerdown', this.sliderPointerdownListener); + } +} + +// this renders a canvas with a transparent grayscale HSV map that can +// be placed over a solid color backgroud to create a saturation/value picker. +// we do it this was instead of re-rendering it from scratch for each hue +// because it's way more performant to just change the background color of the +// canvas element +function renderCanvas(canvas: HTMLCanvasElement) { + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const width = canvas.width; + const height = canvas.height; + + // render a saturation/value map for a red hue + for (let x = 0; x < width; x++) { + for (let y = 0; y < height; y++) { + const saturation = x / canvas.width; + const value = 1 - (y / canvas.height); + + ctx.fillStyle = fromFormatToHex("hsv", [0, saturation * 100, value * 100]) + ctx.fillRect(x, y, 1, 1); + } + } + + const imageData = ctx.getImageData(0, 0, width, height); + + // now loop over each pixel and convert the red channel to transparency + for (let i = 0; i < imageData.data.length; i += 4) { + const r = imageData.data[i]; + const g = imageData.data[i + 1]; + + // because the hue we rendered was pure red, we can figure out how transparent the pixel + // should be by looking at difference between the red value and one of the other channels, + // which will be the same. green is an arbitrary choice, blue would also work + const diff = r - g; + imageData.data[i + 3] = 255 - diff; + + // make the map grayscale by copying over one of the other channels to red + imageData.data[i] = g; + } + + ctx.putImageData(imageData, 0, 0); +} + +export function createSliderGradient() { + const slices = 10; + const colors: string[] = []; + + for (let i = 0; i < slices; i++) { + const hue = (360 / slices) * i; + colors.push(`hsl(${hue}, 100%, 50%)`) + } + colors.push(`hsl(0, 100%, 50%)`) + + return `linear-gradient(to right, ${colors.join(", ")})` +} + + +Blockly.Css.register(` +.saturation-value-handle { + position: absolute; + width: 26px; + height: 26px; + border-radius: 13px; + border: 2px solid white; +} +input[type=range].blocklyFieldSlider.hueSlider { + height: 35px; +} +input[type=range].blocklyFieldSlider.hueSlider::-webkit-slider-runnable-track { + margin-top: 10px; + height: 11px; +} +input[type=range].blocklyFieldSlider.hueSlider::-webkit-slider-thumb { + margin-top: -7px; + -webkit-box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); + -moz-box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); + box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); +} +input[type=range].blocklyFieldSlider.hueSlider::-moz-range-track { + margin-top: 10px; + height: 11px; +} +input[type=range].blocklyFieldSlider.hueSlider::-moz-range-thumb { + margin-top: -7px; + -webkit-box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); + -moz-box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); + box-shadow: 0 0 0 2px var(--blocklyFieldSliderThumbBorderColor); +} +input.screen-reader-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + white-space: nowrap; + border-width: 0; +} +`) \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/conversions.ts b/pxtblocks/plugins/colorpicker/conversions.ts new file mode 100644 index 000000000000..4f45e3867359 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/conversions.ts @@ -0,0 +1,290 @@ +// Converted to TS from https://github.com/Qix-/color-convert/blob/5c106a633b5cd2de554d9c287ad31f9eeca7a271/conversions.js + +// Copyright (c) 2011-2016 Heather Arthur . +// Copyright (c) 2016-2021 Josh Junon . +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +export function hexToRgb(hex: string): number[] { + const match = hex.match(/[a-f\d]{6}|[a-f\d]{3}/i); + if (!match) { + return [0, 0, 0]; + } + + let colorString = match[0]; + + if (match[0].length === 3) { + colorString = [...colorString].map(char => char + char).join(''); + } + + const integer = Number.parseInt(colorString, 16); + const r = (integer >> 16) & 0xFF; + const g = (integer >> 8) & 0xFF; + const b = integer & 0xFF; + + return [r, g, b]; +} + +export function rgbToHex(rgb: number[]): string { + const integer = ((Math.round(rgb[0]) & 0xFF) << 16) + + ((Math.round(rgb[1]) & 0xFF) << 8) + + (Math.round(rgb[2]) & 0xFF); + + const string = integer.toString(16).toUpperCase(); + return "#" + ("000000".slice(string.length) + string); +} + +export function rgbToHsl(rgb: number[]): number[] { + const r = rgb[0] / 255; + const g = rgb[1] / 255; + const b = rgb[2] / 255; + const min = Math.min(r, g, b); + const max = Math.max(r, g, b); + const delta = max - min; + let h; + let s; + + switch (max) { + case min: + h = 0; + break; + case r: + h = (g - b) / delta; + break; + case g: + h = 2 + (b - r) / delta; + break; + case b: + h = 4 + (r - g) / delta; + break; + // No default + } + + h = Math.min(h * 60, 360); + + if (h < 0) { + h += 360; + } + + const l = (min + max) / 2; + + if (max === min) { + s = 0; + } + else if (l <= 0.5) { + s = delta / (max + min); + } + else { + s = delta / (2 - max - min); + } + + return [h, s * 100, l * 100]; +} + +export function hslToRgb(hsl: number[]): number[] { + const h = hsl[0] / 360; + const s = hsl[1] / 100; + const l = hsl[2] / 100; + let t3; + let value; + + if (s === 0) { + value = l * 255; + return [value, value, value]; + } + + const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s; + + const t1 = 2 * l - t2; + + const rgb = [0, 0, 0]; + for (let i = 0; i < 3; i++) { + t3 = h + 1 / 3 * -(i - 1); + if (t3 < 0) { + t3++; + } + + if (t3 > 1) { + t3--; + } + + if (6 * t3 < 1) { + value = t1 + (t2 - t1) * 6 * t3; + } + else if (2 * t3 < 1) { + value = t2; + } + else if (3 * t3 < 2) { + value = t1 + (t2 - t1) * (2 / 3 - t3) * 6; + } + else { + value = t1; + } + + rgb[i] = value * 255; + } + + return rgb; +} + +export function rgbToHsv(rgb: number[]): number[] { + let rdif; + let gdif; + let bdif; + let h; + let s; + + const r = rgb[0] / 255; + const g = rgb[1] / 255; + const b = rgb[2] / 255; + const v = Math.max(r, g, b); + const diff = v - Math.min(r, g, b); + const diffc = function (c: number) { + return (v - c) / 6 / diff + 1 / 2; + }; + + if (diff === 0) { + h = 0; + s = 0; + } + else { + s = diff / v; + rdif = diffc(r); + gdif = diffc(g); + bdif = diffc(b); + + switch (v) { + case r: + h = bdif - gdif; + break; + case g: + h = (1 / 3) + rdif - bdif; + break; + case b: + h = (2 / 3) + gdif - rdif; + break; + // No default + } + + if (h < 0) { + h += 1; + } + else if (h > 1) { + h -= 1; + } + } + + return [ + h * 360, + s * 100, + v * 100, + ]; +} + +export function hsvToRgb(hsv: number[]): number[] { + const h = hsv[0] / 60; + const s = hsv[1] / 100; + let v = hsv[2] / 100; + const hi = Math.floor(h) % 6; + + const f = h - Math.floor(h); + const p = 255 * v * (1 - s); + const q = 255 * v * (1 - (s * f)); + const t = 255 * v * (1 - (s * (1 - f))); + v *= 255; + + switch (hi) { + case 0: + return [v, t, p]; + case 1: + return [q, v, p]; + case 2: + return [p, v, t]; + case 3: + return [p, q, v]; + case 4: + return [t, p, v]; + case 5: + return [v, p, q]; + } + + // never + return []; +} + +export function rgbToCmyk(rgb: number[]): number[] { + const r = rgb[0] / 255; + const g = rgb[1] / 255; + const b = rgb[2] / 255; + + const k = Math.min(1 - r, 1 - g, 1 - b); + const c = (1 - r - k) / (1 - k) || 0; + const m = (1 - g - k) / (1 - k) || 0; + const y = (1 - b - k) / (1 - k) || 0; + + return [c * 100, m * 100, y * 100, k * 100]; +} + +export function cmykToRgb(cmyk: number[]): number[] { + const c = cmyk[0] / 100; + const m = cmyk[1] / 100; + const y = cmyk[2] / 100; + const k = cmyk[3] / 100; + + const r = 1 - Math.min(1, c * (1 - k) + k); + const g = 1 - Math.min(1, m * (1 - k) + k); + const b = 1 - Math.min(1, y * (1 - k) + k); + + return [r * 255, g * 255, b * 255]; +} + +export function hsvToHsl(hsv: number[]): number[] { + const h = hsv[0]; + const s = hsv[1] / 100; + const v = hsv[2] / 100; + const vmin = Math.max(v, 0.01); + let sl; + let l; + + l = (2 - s) * v; + const lmin = (2 - s) * vmin; + sl = s * vmin; + sl /= (lmin <= 1) ? lmin : 2 - lmin; + sl = sl || 0; + l /= 2; + + return [h, sl * 100, l * 100]; +} + +export function hslToHsv(hsl: number[]): number[] { + const h = hsl[0]; + let s = hsl[1] / 100; + let l = hsl[2] / 100; + let smin = s; + const lmin = Math.max(l, 0.01); + + l *= 2; + s *= (l <= 1) ? l : 2 - l; + smin *= lmin <= 1 ? lmin : 2 - lmin; + const v = (l + s) / 2; + const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s); + + return [h, sv * 100, v * 100]; +} \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/index.ts b/pxtblocks/plugins/colorpicker/index.ts new file mode 100644 index 000000000000..c09458794f36 --- /dev/null +++ b/pxtblocks/plugins/colorpicker/index.ts @@ -0,0 +1,12 @@ +import { initColorPickerBlock } from "./colorPickerBlock"; +import { initColorPickerNumberBlock } from "./colorPickerNumberBlock"; +import { initColorPickerStringBlock } from "./colorPickerStringBlock"; + +export * from "./colorPickerBlock"; +export * from "./colorPickerNumberBlock"; +export * from "./colorPickerStringBlock"; +export * from "./util"; + +initColorPickerBlock(); +initColorPickerNumberBlock(); +initColorPickerStringBlock(); \ No newline at end of file diff --git a/pxtblocks/plugins/colorpicker/util.ts b/pxtblocks/plugins/colorpicker/util.ts new file mode 100644 index 000000000000..2d286e3df04d --- /dev/null +++ b/pxtblocks/plugins/colorpicker/util.ts @@ -0,0 +1,84 @@ +import { rgbToHex, cmykToRgb, hslToRgb, hsvToRgb, rgbToCmyk, hexToRgb, rgbToHsl, rgbToHsv, hsvToHsl, hslToHsv } from "./conversions"; + +export enum FieldColorPickerNumberType { + Degrees, + Percentage, + RGB +} + +export function fromFormatToHex(format: string, color: number[]) { + switch (format.toLowerCase()) { + case "cmyk": + return rgbToHex(cmykToRgb(color)); + case "hsl": + return rgbToHex(hslToRgb(color)); + case "hsv": + return rgbToHex(hsvToRgb(color)); + case "rgb": + return rgbToHex(color); + default: + throw new Error(`Unsupported color format: ${format}`); + } +} + +export function fromHexToFormat(format: string, hex: string): number[] { + switch (format.toLowerCase()) { + case "cmyk": + return rgbToCmyk(hexToRgb(hex)); + case "hsl": + return rgbToHsl(hexToRgb(hex)); + case "hsv": + return rgbToHsv(hexToRgb(hex)); + case "rgb": + return hexToRgb(hex); + default: + throw new Error(`Unsupported color format: ${format}`); + } +} + +export function fromHSVToFormat(format: string, hsv: number[]): number[] { + switch (format.toLowerCase()) { + case "cmyk": + return rgbToCmyk(hsvToRgb(hsv)); + case "hsl": + return hsvToHsl(hsv); + case "hsv": + return hsv; + case "rgb": + return hsvToRgb(hsv); + default: + throw new Error(`Unsupported color format: ${format}`); + } +} + +export function fromFormatToHSV(format: string, color: number[]): number[] { + switch (format.toLowerCase()) { + case "cmyk": + return rgbToHsv(cmykToRgb(color)); + case "hsl": + return hslToHsv(color); + case "hsv": + return color; + case "rgb": + return rgbToHsv(color); + default: + throw new Error(`Unsupported color format: ${format}`); + } +} + +export function getFieldTypesForFormat(format: string): FieldColorPickerNumberType[] { + switch (format.toLowerCase()) { + case "cmyk": + return [FieldColorPickerNumberType.Percentage, FieldColorPickerNumberType.Percentage, FieldColorPickerNumberType.Percentage, FieldColorPickerNumberType.Percentage]; + case "hsl": + case "hsv": + return [FieldColorPickerNumberType.Degrees, FieldColorPickerNumberType.Percentage, FieldColorPickerNumberType.Percentage]; + case "rgb": + return [FieldColorPickerNumberType.RGB, FieldColorPickerNumberType.RGB, FieldColorPickerNumberType.RGB]; + default: + throw new Error(`Unsupported color format: ${format}`); + } +} + + + diff --git a/pxtblocks/plugins/comments/blockComment.ts b/pxtblocks/plugins/comments/blockComment.ts index a1e2959555ec..ea973713d283 100644 --- a/pxtblocks/plugins/comments/blockComment.ts +++ b/pxtblocks/plugins/comments/blockComment.ts @@ -59,6 +59,10 @@ export class CommentIcon extends Blockly.icons.Icon implements Blockly.IHasBubbl return CommentIcon.TYPE; } + protected override getAriaLabel(): string | null { + return Blockly.Msg.ICON_LABEL_COMMENT_CLOSED; + } + override initView(pointerdownListener: (e: PointerEvent) => void): void { if (this.svgRoot) return; // Already initialized. diff --git a/pxtblocks/plugins/comments/bubble.ts b/pxtblocks/plugins/comments/bubble.ts index de34f6222ce6..16e66d64bc5b 100644 --- a/pxtblocks/plugins/comments/bubble.ts +++ b/pxtblocks/plugins/comments/bubble.ts @@ -7,7 +7,7 @@ import dom = Blockly.utils.dom; * bubble, where it has a "tail" that points to the block, and a "head" that * displays arbitrary svg elements. */ -export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blockly.ISelectable { +export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blockly.ISelectable, Blockly.IFocusableNode { /** The width of the border around the bubble. */ static readonly BORDER_WIDTH = 0; @@ -51,7 +51,7 @@ export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blo /** The position of the left of the bubble realtive to its anchor. */ private relativeLeft = 0; - private dragStrategy = new Blockly.dragging.BubbleDragStrategy(this, this.workspace); + private dragStrategy: Blockly.dragging.BubbleDragStrategy = new Blockly.dragging.BubbleDragStrategy(this, this.workspace); private focusableElement: SVGElement | HTMLElement; @@ -296,6 +296,18 @@ export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blo this.svgRoot.setAttribute('transform', `translate(${x}, ${y})`); } + /** + * Moves the bubble by the given amounts in the x and y directions. + * + * @param dx The distance to move along the x axis. + * @param dy The distance to move along the y axis. + * @param _reason A description of why this move is happening. + */ + moveBy(dx: number, dy: number, _reason?: string[]) { + const origin = this.getRelativeToSurfaceXY(); + this.moveTo(origin.x + dx, origin.y + dy); + } + /** * Positions the bubble "optimally" so that the most of it is visible and * it does not overlap the rect (if provided). @@ -566,6 +578,21 @@ export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blo ); } + /** + * Returns the bounds of this bubble. + * + * @returns A bounding box for this bubble. + */ + getBoundingRectangle(): Blockly.utils.Rect { + const origin = this.getRelativeToSurfaceXY(); + return new Blockly.utils.Rect( + origin.y, + origin.y + this.size.height, + origin.x, + origin.x + this.size.width, + ); + } + /** @internal */ getSvgRoot(): SVGElement { return this.svgRoot; @@ -618,8 +645,8 @@ export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blo } /** Starts a drag on the bubble. */ - startDrag(): void { - this.dragStrategy.startDrag(); + startDrag() { + return this.dragStrategy.startDrag(); } /** Drags the bubble to the given location. */ @@ -756,4 +783,4 @@ Blockly.Css.register(` .blocklyBubble .blocklyTextarea.blocklyText { color: #575E75; } -`); \ No newline at end of file +`); diff --git a/pxtblocks/plugins/comments/textinput_bubble.ts b/pxtblocks/plugins/comments/textinput_bubble.ts index d4b76f397882..5ca3b684aa53 100644 --- a/pxtblocks/plugins/comments/textinput_bubble.ts +++ b/pxtblocks/plugins/comments/textinput_bubble.ts @@ -123,6 +123,7 @@ export class TextInputBubble extends Bubble { 'textarea', ) as HTMLTextAreaElement; textArea.className = 'blocklyTextarea blocklyText'; + textArea.setAttribute('aria-label', Blockly.Msg.ARIA_LABEL_COMMENT); return textArea; } diff --git a/pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts b/pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts index d59b3dc0f6b7..8038ff605273 100644 --- a/pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts +++ b/pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts @@ -5,485 +5,78 @@ */ import * as Blockly from "blockly"; - import { isAllowlistedShadow, shouldDuplicateOnDrag, updateDuplicateOnDragState } from "./duplicateOnDrag"; -import eventUtils = Blockly.Events; -import Coordinate = Blockly.utils.Coordinate; -import dom = Blockly.utils.dom; - -const BLOCK_LAYER = 50; // not exported by blockly - -/** Represents a nearby valid connection. */ -interface ConnectionCandidate { - /** A connection on the dragging stack that is compatible with neighbour. */ - local: Blockly.RenderedConnection; - /** A nearby connection that is compatible with local. */ - neighbour: Blockly.RenderedConnection; - - /** The distance between the local connection and the neighbour connection. */ - distance: number; +interface DragStrategyInternals { + block: Blockly.BlockSvg; + startChildConn: Blockly.Connection | null; } -export class DuplicateOnDragStrategy implements Blockly.IDragStrategy { - private workspace: Blockly.WorkspaceSvg; - - /** The parent block at the start of the drag. */ - private startParentConn: Blockly.RenderedConnection | null = null; - - /** - * The child block at the start of the drag. Only gets set if - * `healStack` is true. - */ - private startChildConn: Blockly.RenderedConnection | null = null; - - private startLoc: Coordinate | null = null; - - private connectionCandidate: ConnectionCandidate | null = null; - - private connectionPreviewer: Blockly.IConnectionPreviewer | null = null; - - private dragging = false; - - /** Used to persist an event group when snapping is done async. */ - private originalEventGroup = ''; - - /** - * If this is a shadow block, the offset between this block and the parent - * block, to add to the drag location. In workspace units. - */ - private dragOffset = new Coordinate(0, 0); - - constructor(private block: Blockly.BlockSvg) { - this.workspace = block.workspace; +// @ts-expect-error overriding private method +export class DuplicateOnDragStrategy extends Blockly.dragging.BlockDragStrategy { + protected getTargetBlock(): Blockly.BlockSvg { + const self = this as unknown as DragStrategyInternals; + // Keep the drag on an allowlisted shadow so disconnectBlock can extract + // it; otherwise Blockly's default would delegate the drag to the parent. + if (self.block.isShadow() && isAllowlistedShadow(self.block)) { + return self.block; } + return super.getTargetBlock(); + } - /** Returns true if the block is currently movable. False otherwise. */ - isMovable(): boolean { - if (this.block.isShadow()) { - return this.block.getParent()?.isMovable() ?? false; - } - - return ( - this.block.isOwnMovable() && - !this.block.isDeadOrDying() && - !this.workspace.options.readOnly && - // We never drag blocks in the flyout, only create new blocks that are - // dragged. - !this.block.isInFlyout - ); + override drag(newLoc: Blockly.utils.Coordinate, e?: PointerEvent | KeyboardEvent): void { + super.drag(newLoc, e); + // Workaround for https://github.com/RaspberryPiFoundation/blockly/issues/9898 + if (!e || e instanceof PointerEvent) { + const self = this as unknown as DragStrategyInternals; + self.block.moveDuringDrag(newLoc); } + } - /** - * Handles any setup for starting the drag, including disconnecting the block - * from any parent blocks. - */ - startDrag(e?: PointerEvent): void { - if (this.block.isShadow() && !isAllowlistedShadow(this.block)) { - this.startDraggingShadow(e); - return; - } + private disconnectBlock(healStack: boolean) { + const self = this as unknown as DragStrategyInternals; - this.dragging = true; - if (!eventUtils.getGroup()) { - eventUtils.setGroup(true); - } - this.fireDragStartEvent(); + let clone: Blockly.Block; + let target: Blockly.Connection; + let xml: Element; + const isShadow = self.block.isShadow(); - this.startLoc = this.block.getRelativeToSurfaceXY(); - - const previewerConstructor = Blockly.registry.getClassFromOptions( - Blockly.registry.Type.CONNECTION_PREVIEWER, - this.workspace.options, - ); - this.connectionPreviewer = new previewerConstructor!(this.block); - - // During a drag there may be a lot of rerenders, but not field changes. - // Turn the cache on so we don't do spurious remeasures during the drag. - dom.startTextWidthCache(); - this.workspace.setResizesEnabled(false); - Blockly.blockAnimations.disconnectUiStop(); - - const healStack = !!e && (e.altKey || e.ctrlKey || e.metaKey); - - if (this.shouldDisconnect(healStack)) { - this.disconnectBlock(healStack); - } - this.block.setDragging(true); - this.workspace.getLayerManager()?.moveToDragLayer(this.block); + if (isShadow) { + self.block.setShadow(false); } - /** Starts a drag on a shadow, recording the drag offset. */ - private startDraggingShadow(e?: PointerEvent) { - const parent = this.block.getParent(); - if (!parent) { - throw new Error( - 'Tried to drag a shadow block with no parent. ' + - 'Shadow blocks should always have parents.', - ); - } - this.dragOffset = Coordinate.difference( - parent.getRelativeToSurfaceXY(), - this.block.getRelativeToSurfaceXY(), - ); - parent.startDrag(e); - } + if (shouldDuplicateOnDrag(self.block)) { + const output = self.block.outputConnection; - /** - * Whether or not we should disconnect the block when a drag is started. - * - * @param healStack Whether or not to heal the stack after disconnecting. - * @returns True to disconnect the block, false otherwise. - */ - private shouldDisconnect(healStack: boolean): boolean { - return !!( - this.block.getParent() || - (healStack && - this.block.nextConnection && - this.block.nextConnection.targetBlock()) - ); - } + if (!output?.targetConnection) return; - /** - * Disconnects the block from any parents. If `healStack` is true and this is - * a stack block, we also disconnect from any next blocks and attempt to - * attach them to any parent. - * - * @param healStack Whether or not to heal the stack after disconnecting. - */ - private disconnectBlock(healStack: boolean) { - let clone: Blockly.Block; - let target: Blockly.Connection; - let xml: Element; - const isShadow = this.block.isShadow(); + xml = Blockly.Xml.blockToDom(self.block, true) as Element; - if (isShadow) { - this.block.setShadow(false); + if (!isShadow) { + clone = Blockly.Xml.domToBlock(xml, self.block.workspace); } - - if (shouldDuplicateOnDrag(this.block)) { - const output = this.block.outputConnection; - - if (!output?.targetConnection) return; - - xml = Blockly.Xml.blockToDom(this.block, true) as Element; - - if (!isShadow) { - clone = Blockly.Xml.domToBlock(xml, this.block.workspace); - } - target = output.targetConnection; - } - - this.startParentConn = - this.block.outputConnection?.targetConnection ?? - this.block.previousConnection?.targetConnection; - if (healStack) { - this.startChildConn = this.block.nextConnection?.targetConnection; - } - - if (target && isShadow) { - target.setShadowDom(xml) - } - - this.block.unplug(healStack); - Blockly.blockAnimations.disconnectUiEffect(this.block); - updateDuplicateOnDragState(this.block); - - if (target && clone) { - target.connect(clone.outputConnection); - } - } - - /** Fire a UI event at the start of a block drag. */ - private fireDragStartEvent() { - const event = new (eventUtils.get(eventUtils.BLOCK_DRAG))( - this.block, - true, - this.block.getDescendants(false), - ); - eventUtils.fire(event); + target = output.targetConnection; } - /** Fire a UI event at the end of a block drag. */ - private fireDragEndEvent() { - const event = new (eventUtils.get(eventUtils.BLOCK_DRAG))( - this.block, - false, - this.block.getDescendants(false), - ); - eventUtils.fire(event); + // Store startChildConn so revertDrag can rebuild [parent → block → next]; + // the base class only stores it when the block has no parent. + if (healStack) { + self.startChildConn = self.block.nextConnection?.targetConnection; } - /** Fire a move event at the end of a block drag. */ - private fireMoveEvent() { - if (this.block.isDeadOrDying()) return; - const event = new (eventUtils.get(eventUtils.BLOCK_MOVE))( - this.block, - ) as Blockly.Events.BlockMove; - event.setReason(['drag']); - event.oldCoordinate = this.startLoc!; - event.recordNew(); - eventUtils.fire(event); + if (target && isShadow) { + target.setShadowDom(xml) } + self.block.unplug(healStack); + Blockly.blockAnimations.disconnectUiEffect(self.block); + updateDuplicateOnDragState(self.block); - /** Moves the block and updates any connection previews. */ - drag(newLoc: Coordinate): void { - if (this.block.isShadow()) { - this.block.getParent()?.drag(Coordinate.sum(newLoc, this.dragOffset)); - return; - } - - this.block.moveDuringDrag(newLoc); - this.updateConnectionPreview( - this.block, - Coordinate.difference(newLoc, this.startLoc!), - ); - } - - /** - * @param draggingBlock The block being dragged. - * @param delta How far the pointer has moved from the position - * at the start of the drag, in workspace units. - */ - private updateConnectionPreview(draggingBlock: Blockly.BlockSvg, delta: Coordinate) { - const currCandidate = this.connectionCandidate; - const newCandidate = this.getConnectionCandidate(draggingBlock, delta); - if (!newCandidate) { - this.connectionPreviewer!.hidePreview(); - this.connectionCandidate = null; - return; - } - const candidate = - currCandidate && - this.currCandidateIsBetter(currCandidate, delta, newCandidate) - ? currCandidate - : newCandidate; - this.connectionCandidate = candidate; - - const { local, neighbour } = candidate; - const localIsOutputOrPrevious = - local.type === Blockly.ConnectionType.OUTPUT_VALUE || - local.type === Blockly.ConnectionType.PREVIOUS_STATEMENT; - const neighbourIsConnectedToRealBlock = - neighbour.isConnected() && !neighbour.targetBlock()!.isInsertionMarker(); - if ( - localIsOutputOrPrevious && - neighbourIsConnectedToRealBlock && - !this.orphanCanConnectAtEnd( - draggingBlock, - neighbour.targetBlock()!, - local.type, - ) - ) { - this.connectionPreviewer!.previewReplacement( - local, - neighbour, - neighbour.targetBlock()!, - ); - return; - } - this.connectionPreviewer!.previewConnection(local, neighbour); - } - - /** - * Returns true if the given orphan block can connect at the end of the - * top block's stack or row, false otherwise. - */ - private orphanCanConnectAtEnd( - topBlock: Blockly.BlockSvg, - orphanBlock: Blockly.BlockSvg, - localType: number, - ): boolean { - const orphanConnection = - localType === Blockly.ConnectionType.OUTPUT_VALUE - ? orphanBlock.outputConnection - : orphanBlock.previousConnection; - return !!Blockly.Connection.getConnectionForOrphanedConnection( - topBlock as Blockly.Block, - orphanConnection as Blockly.Connection, - ); - } - - /** - * Returns true if the current candidate is better than the new candidate. - * - * We slightly prefer the current candidate even if it is farther away. - */ - private currCandidateIsBetter( - currCandiate: ConnectionCandidate, - delta: Coordinate, - newCandidate: ConnectionCandidate, - ): boolean { - const { local: currLocal, neighbour: currNeighbour } = currCandiate; - const localPos = new Coordinate(currLocal.x, currLocal.y); - const neighbourPos = new Coordinate(currNeighbour.x, currNeighbour.y); - const currDistance = Coordinate.distance( - Coordinate.sum(localPos, delta), - neighbourPos, - ); - return ( - newCandidate.distance > currDistance - Blockly.config.currentConnectionPreference - ); - } - - /** - * Returns the closest valid candidate connection, if one can be found. - * - * Valid neighbour connections are within the configured start radius, with a - * compatible type (input, output, etc) and connection check. - */ - private getConnectionCandidate( - draggingBlock: Blockly.BlockSvg, - delta: Coordinate, - ): ConnectionCandidate | null { - const localConns = this.getLocalConnections(draggingBlock); - let radius = this.connectionCandidate - ? Blockly.config.connectingSnapRadius - : Blockly.config.snapRadius; - let candidate = null; - - for (const conn of localConns) { - const { connection: neighbour, radius: rad } = conn.closest(radius, delta); - if (neighbour) { - candidate = { - local: conn, - neighbour: neighbour, - distance: rad, - }; - radius = rad; - } - } - - return candidate; - } - - /** - * Returns all of the connections we might connect to blocks on the workspace. - * - * Includes any connections on the dragging block, and any last next - * connection on the stack (if one exists). - */ - private getLocalConnections(draggingBlock: Blockly.BlockSvg): Blockly.RenderedConnection[] { - const available = draggingBlock.getConnections_(false); - const lastOnStack = draggingBlock.lastConnectionInStack(true); - if (lastOnStack && lastOnStack !== draggingBlock.nextConnection) { - available.push(lastOnStack); - } - return available; - } - - /** - * Cleans up any state at the end of the drag. Applies any pending - * connections. - */ - endDrag(e?: PointerEvent): void { - if (this.block.isShadow()) { - this.block.getParent()?.endDrag(e); - return; - } - this.originalEventGroup = eventUtils.getGroup(); - - this.fireDragEndEvent(); - this.fireMoveEvent(); - - dom.stopTextWidthCache(); - - Blockly.blockAnimations.disconnectUiStop(); - this.connectionPreviewer!.hidePreview(); - - if (!this.block.isDeadOrDying() && this.dragging) { - // These are expensive and don't need to be done if we're deleting, or - // if we've already stopped dragging because we moved back to the start. - this.workspace - .getLayerManager() - ?.moveOffDragLayer(this.block, Blockly.layers.BLOCK); - this.block.setDragging(false); - } - - if (this.connectionCandidate) { - // Applying connections also rerenders the relevant blocks. - this.applyConnections(this.connectionCandidate); - this.disposeStep(); - } else { - this.block.queueRender().then(() => this.disposeStep()); - } - } - - /** Disposes of any state at the end of the drag. */ - private disposeStep() { - const newGroup = eventUtils.getGroup(); - eventUtils.setGroup(this.originalEventGroup); - this.block.snapToGrid(); - - // Must dispose after connections are applied to not break the dynamic - // connections plugin. See #7859 - this.connectionPreviewer!.dispose(); - this.workspace.setResizesEnabled(true); - eventUtils.setGroup(newGroup); - } - - /** Connects the given candidate connections. */ - private applyConnections(candidate: ConnectionCandidate) { - const { local, neighbour } = candidate; - local.connect(neighbour); - - const inferiorConnection = local.isSuperior() ? neighbour : local; - const rootBlock = this.block.getRootBlock(); - - Blockly.renderManagement.finishQueuedRenders().then(() => { - Blockly.blockAnimations.connectionUiEffect(inferiorConnection.getSourceBlock()); - // bringToFront is incredibly expensive. Delay until the next frame. - setTimeout(() => { - rootBlock.bringToFront(); - }, 0); - }); - } - - /** - * Moves the block back to where it was at the beginning of the drag, - * including reconnecting connections. - */ - revertDrag(): void { - if (this.block.isShadow()) { - this.block.getParent()?.revertDrag(); - return; - } - - this.startChildConn?.connect(this.block.nextConnection); - if (this.startParentConn) { - switch (this.startParentConn.type) { - case Blockly.ConnectionType.INPUT_VALUE: - this.startParentConn.connect(this.block.outputConnection); - break; - case Blockly.ConnectionType.NEXT_STATEMENT: - this.startParentConn.connect(this.block.previousConnection); - } - } else { - this.block.moveTo(this.startLoc!, ['drag']); - this.workspace - .getLayerManager() - ?.moveOffDragLayer(this.block, BLOCK_LAYER); - // Blocks dragged directly from a flyout may need to be bumped into - // bounds. - Blockly.bumpObjects.bumpIntoBounds( - this.workspace, - this.workspace.getMetricsManager().getScrollMetrics(true), - this.block, - ); - } - - this.startChildConn = null; - this.startParentConn = null; - - this.connectionPreviewer!.hidePreview(); - this.connectionCandidate = null; - - this.block.setDragging(false); - this.dragging = false; + if (target && clone) { + target.connect(clone.outputConnection); } + } } - export function setDuplicateOnDragStrategy(block: Blockly.Block | Blockly.BlockSvg) { (block as Blockly.BlockSvg).setDragStrategy?.(new DuplicateOnDragStrategy(block as Blockly.BlockSvg)); -} \ No newline at end of file +} diff --git a/pxtblocks/plugins/flyout/blockInflater.ts b/pxtblocks/plugins/flyout/blockInflater.ts index 2656ff06dbf3..9eb9e323ca24 100644 --- a/pxtblocks/plugins/flyout/blockInflater.ts +++ b/pxtblocks/plugins/flyout/blockInflater.ts @@ -37,12 +37,16 @@ export class MultiFlyoutRecyclableBlockInflater extends Blockly.BlockFlyoutInfla if (this.keyToBlock.has(key)) { block = this.keyToBlock.get(key); this.keyToBlock.delete(key); + // Re-attach the SVG we detached in recycleBlock(). The flyout positions + // the block during layout, after createBlock() returns. + workspace.getCanvas().appendChild(block.getSvgRoot()); } block = block ?? super.createBlock(blockDefinition, workspace); this.blockToKey.set(block, key); block.removeClass(HIDDEN_CLASS_NAME); + block.getFocusableElement().ariaHidden = "false"; block.setDisabledReason(false, HIDDEN_CLASS_NAME); return block; } @@ -73,7 +77,13 @@ export class MultiFlyoutRecyclableBlockInflater extends Blockly.BlockFlyoutInfla const xy = block.getRelativeToSurfaceXY(); block.moveBy(-xy.x, -xy.y); block.addClass(HIDDEN_CLASS_NAME); + block.getFocusableElement().ariaHidden = "true"; block.setDisabledReason(true, HIDDEN_CLASS_NAME); + // Detach the SVG from the flyout canvas while the block sits in the pool. + // Leaving recycled blocks in place interacts poorly with the flyout's use + // of aria-owns with VoiceOver/Safari. Reopening a closed flyout can then + // take 10s of seconds. See microsoft/pxt-microbit#6946. + block.getSvgRoot().remove(); const key = this.blockToKey.get(block); this.keyToBlock.set(key, block); this.removeListeners(block.id); diff --git a/pxtblocks/plugins/flyout/buttonFlyoutInflater.ts b/pxtblocks/plugins/flyout/buttonFlyoutInflater.ts index 9513ae7b92d3..6d6ced90efbd 100644 --- a/pxtblocks/plugins/flyout/buttonFlyoutInflater.ts +++ b/pxtblocks/plugins/flyout/buttonFlyoutInflater.ts @@ -14,17 +14,12 @@ export class ButtonFlyoutInflater extends Blockly.ButtonFlyoutInflater { } load(state: object, flyout: Blockly.IFlyout): Blockly.FlyoutItem { - const modifiedState = state as Blockly.utils.toolbox.ButtonOrLabelInfo & {id?: string}; const button = new FlyoutButton( flyout.getWorkspace(), flyout.targetWorkspace!, - modifiedState, + state as Blockly.utils.toolbox.ButtonOrLabelInfo, false, ); - if (modifiedState.id) { - // This id is used to manage focus after dialog interactions. - button.getSvgRoot().setAttribute("id", modifiedState.id) - } button.show(); return new Blockly.FlyoutItem(button, BUTTON_TYPE); diff --git a/pxtblocks/plugins/flyout/flyoutButton.ts b/pxtblocks/plugins/flyout/flyoutButton.ts index a69cac8bbf89..b1c11c0d30e9 100644 --- a/pxtblocks/plugins/flyout/flyoutButton.ts +++ b/pxtblocks/plugins/flyout/flyoutButton.ts @@ -6,6 +6,7 @@ export interface ExtendedButtonInfo extends Blockly.utils.toolbox.LabelInfo { "web-icon": string; "web-icon-class": string; "web-icon-color": string; + "web-icon-image": string; "web-line": string; "web-line-width": string; } @@ -66,8 +67,39 @@ export class FlyoutButton extends Blockly.FlyoutButton { const icon = def["web-icon"]; const iconClass = def["web-icon-class"]; const iconColor = def["web-icon-color"]; + const iconImage = def["web-icon-image"]; - if (icon || iconClass) { + if (iconImage) { + const iconSize = 20; + const ws = this.getTargetWorkspace(); + const svgImage = Blockly.utils.dom.createSvgElement( + 'image', + { + 'height': String(iconSize), + 'width': String(iconSize), + 'x': String(ws.RTL ? this.width + Blockly.FlyoutButton.TEXT_MARGIN_X : Blockly.FlyoutButton.TEXT_MARGIN_X), + 'y': String((this.height / 2 + Blockly.FlyoutButton.TEXT_MARGIN_Y) - iconSize / 2), + }, + svgGroup + ) as SVGImageElement; + svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconImage); + + const iconWidth = iconSize + 2 * Blockly.FlyoutButton.TEXT_MARGIN_X; + this.width += iconWidth; + + const rect = svgGroup.getElementsByClassName("blocklyFlyoutLabelBackground").item(0) as SVGRectElement; + rect.setAttribute('width', String(this.width)); + + for (let i = 0; i < svgGroup.children.length; i++) { + const el = svgGroup.children.item(i); + + if (el !== svgImage && el !== rect) { + const x = Number(el.getAttribute("x")); + el.setAttribute("x", (x + iconWidth) + "") + } + } + } + else if (icon || iconClass) { const extraIconClass = Object.keys(brandIcons).includes(icon) ? 'brandIcon' : '' const svgIcon = Blockly.utils.dom.createSvgElement( 'text', diff --git a/pxtblocks/plugins/functions/blocks/functionDefinitionBlock.ts b/pxtblocks/plugins/functions/blocks/functionDefinitionBlock.ts index b7386151028e..5f1d2ddb8192 100644 --- a/pxtblocks/plugins/functions/blocks/functionDefinitionBlock.ts +++ b/pxtblocks/plugins/functions/blocks/functionDefinitionBlock.ts @@ -23,6 +23,7 @@ import { COLLAPSE_IMAGE_DATAURI } from "../svgs"; import { ArgumentReporterBlock } from "./argumentReporterBlocks"; import { setDuplicateOnDrag } from "../../duplicateOnDrag"; import { FieldImageNoText } from "../../../fields/field_imagenotext"; +import { maybeMoveFocusFromButton } from "../../../utils"; interface FunctionDefinitionMixin extends CommonFunctionMixin { createArgumentReporter_(arg: FunctionArgument): ArgumentReporterBlock; @@ -198,9 +199,11 @@ Blockly.Blocks[FUNCTION_DEFINITION_BLOCK_TYPE] = { image, 24, 24, - "", + lf("Collapse block"), () => { this.setCollapsed(true); + const expandBtn = this.inputList.find(i => i.name === Blockly.constants.COLLAPSED_INPUT_NAME)?.fieldRow[1]; + maybeMoveFocusFromButton(expandBtn); }, false ) diff --git a/pxtblocks/plugins/functions/utils.ts b/pxtblocks/plugins/functions/utils.ts index 906420c33e53..b121a69d1c7a 100644 --- a/pxtblocks/plugins/functions/utils.ts +++ b/pxtblocks/plugins/functions/utils.ts @@ -518,6 +518,7 @@ function createFunctionCallbackFactory_(workspace: Blockly.WorkspaceSvg) { if ((block as (FunctionDefinitionBlock & Blockly.BlockSvg)).afterWorkspaceLoad) { (block as (FunctionDefinitionBlock & Blockly.BlockSvg)).afterWorkspaceLoad(); } + Blockly.getFocusManager().focusNode(block); }); } }; diff --git a/pxtblocks/plugins/logic/ifElse.ts b/pxtblocks/plugins/logic/ifElse.ts index 882b869e1511..fad58b3fd6ff 100644 --- a/pxtblocks/plugins/logic/ifElse.ts +++ b/pxtblocks/plugins/logic/ifElse.ts @@ -1,6 +1,7 @@ import * as Blockly from "blockly"; import { InlineSvgsExtensionBlock } from "../functions"; import { FieldImageNoText } from "../../fields/field_imagenotext"; +import { maybeMoveFocusFromButton } from "../../utils"; type IfElseMixinType = typeof IF_ELSE_MIXIN; @@ -71,6 +72,7 @@ const IF_ELSE_MIXIN = { if (this.getInput('ELSE')) this.elseStatementConnection_?.reconnect(this, 'ELSE'); }, addElse_: function (this: IfElseBlock) { + Blockly.utils.aria.announceDynamicAriaState(pxt.Util.lf("Else branch added.")); const update = () => { this.elseCount_++; }; @@ -78,22 +80,33 @@ const IF_ELSE_MIXIN = { }, removeElse_: function (this: IfElseBlock) { + Blockly.utils.aria.announceDynamicAriaState(pxt.Util.lf("Else branch removed.")); const update = () => { this.elseCount_--; }; this.update_(update); + // Focus the condition of the last elseif branch, fallback to the condition of the if. + const focusIndex = this.elseifCount_; + const inputName = 'IF' + focusIndex; + maybeMoveFocusFromButton(this.getInput(inputName)?.connection?.targetBlock() as Blockly.BlockSvg); }, addElseIf_: function (this: IfElseBlock) { + Blockly.utils.aria.announceDynamicAriaState(pxt.Util.lf("Else if branch added.")); const update = () => { this.elseifCount_++; }; this.update_(update); }, removeElseIf_: function (this: IfElseBlock, arg: number) { + Blockly.utils.aria.announceDynamicAriaState(pxt.Util.lf("Else if branch removed.")); const update = () => { this.elseifCount_--; }; this.update_(update, arg); + // Focus the condition of the branch before the one just removed. + const prevIndex = arg - 1; + const inputName = 'IF' + prevIndex; + maybeMoveFocusFromButton(this.getInput(inputName)?.connection?.targetBlock() as Blockly.BlockSvg); }, update_: function (this: IfElseBlock, update: () => void, arg?: number) { Blockly.Events.setGroup(true); @@ -163,7 +176,7 @@ const IF_ELSE_MIXIN = { .appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN); this.appendDummyInput('IFBUTTONS' + i) .appendField( - new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, "*", removeElseIf, false)) + new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, pxt.Util.lf("remove else if branch"), removeElseIf, false)) .setAlign(Blockly.inputs.Align.RIGHT); this.appendStatementInput('DO' + i); } @@ -173,7 +186,7 @@ const IF_ELSE_MIXIN = { this.appendDummyInput('ELSEBUTTONS') .setAlign(Blockly.inputs.Align.RIGHT) .appendField( - new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, "*", this.removeElse_.bind(this), false)); + new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, pxt.Util.lf("remove else branch"), this.removeElse_.bind(this), false)); this.appendStatementInput('ELSE'); } if (this.getInput('ADDBUTTON')) this.removeInput('ADDBUTTON'); @@ -182,15 +195,21 @@ const IF_ELSE_MIXIN = { return function () { if (that.elseCount_ == 0) { that.addElse_(); + // Focus the else 'remove branch' button (keyboard users only). + maybeMoveFocusFromButton(that.getInput('ELSEBUTTONS')?.fieldRow[0]); } else { if (!that.elseifCount_) that.elseifCount_ = 0; that.addElseIf_(); + // Focus the else if boolean (keyboard users only). + const focusManager = Blockly.getFocusManager(); + const node = (that.getInput('IF' + that.elseifCount_)?.connection?.targetBlock() as Blockly.BlockSvg); + focusManager.focusNode(node); } }; }(); this.appendDummyInput('ADDBUTTON') .appendField( - new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, "*", addElseIf, false)); + new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, this.elseCount_ ? pxt.Util.lf("add else if branch") : pxt.Util.lf("add else branch"), addElseIf, false)); }, /** * Reconstructs the block with all child blocks attached. diff --git a/pxtblocks/plugins/math/fieldSlider.ts b/pxtblocks/plugins/math/fieldSlider.ts index 69860a1d4b36..7ce7cb1a50e7 100644 --- a/pxtblocks/plugins/math/fieldSlider.ts +++ b/pxtblocks/plugins/math/fieldSlider.ts @@ -9,7 +9,7 @@ export class FieldSlider extends Blockly.FieldNumber { private sliderKeydownHandler: (e: KeyboardEvent) => {} | undefined; private sliderBlurHandler: (e: FocusEvent) => {} | undefined; private sliderPointerdownHandler: (e: PointerEvent) => {} | undefined; - private keyboardControlActive = false; + protected keyboardControlActive = false; constructor( value?: string | number | typeof Blockly.Field.SKIP_SETUP, @@ -167,6 +167,11 @@ export class FieldSlider extends Blockly.FieldNumber { Blockly.hideChaff(); break; } + case "ArrowDown": { + e.preventDefault(); + e.stopPropagation(); + break; + } } } @@ -181,15 +186,19 @@ export class FieldSlider extends Blockly.FieldNumber { // editor on mobile devices. super.showEditor_(_e, true); + if (typeof this.min_ === "number" && typeof this.max_ === "number") { + this.htmlInput_.ariaLabel = lf("Enter a value between {0} and {1}", this.min_, this.max_); + } + Blockly.DropDownDiv.hideWithoutAnimation(); Blockly.DropDownDiv.clearContent(); - Blockly.DropDownDiv.getContentDiv().style.height = ""; + const contentDiv = Blockly.DropDownDiv.getContentDiv(); + contentDiv.style.height = ""; - // Accessibility properties - contentDiv.setAttribute('role', 'menu'); - contentDiv.setAttribute('aria-haspopup', 'true'); + // Used for high contrast styling + contentDiv.parentElement.classList.add("blocklyFieldSliderDropdown"); this.addSlider_(contentDiv); @@ -312,11 +321,13 @@ Blockly.fieldRegistry.register('field_slider', FieldSlider); Blockly.Css.register(` :root { --blocklyFieldSliderBackgroundColor: #547AB2; + --blocklyFieldSliderThumbColor: #ffffff; + --blocklyFieldSliderThumbBorderColor: rgba(0, 0, 0, 0.15); } .blocklyFieldSliderLabel { font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif; font-size: 0.65rem; - color: $colour_toolboxText; + color: #000000; margin: 8px; } .blocklyFieldSliderLabelText { @@ -348,15 +359,15 @@ input[type=range].blocklyFieldSlider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -1px; - background-color: white; + background-color: var(--blocklyFieldSliderThumbColor); border-radius: 100%; - -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); + -moz-box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); + box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); cursor: pointer; } input[type=range].blocklyFieldSlider:focus-visible::-webkit-slider-thumb { - outline: 2px solid white; + outline: 2px solid white; outline-offset: 3px; -webkit-box-shadow: 0 0 0 3px var(--pxt-focus-border); -moz-box-shadow: 0 0 0 3px var(--pxt-focus-border); @@ -369,17 +380,17 @@ input[type=range].blocklyFieldSlider::-moz-range-track { outline: none; border-radius: 11px; margin-bottom: 20px; - background: #547AB2; + background: var(--blocklyFieldSliderBackgroundColor); } input[type=range].blocklyFieldSlider::-moz-range-thumb { width: 26px; height: 26px; margin-top: -1px; - background-color: white; + background-color: var(--blocklyFieldSliderThumbColor); border-radius: 100%; - -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); + -moz-box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); + box-shadow: 0 0 0 4px var(--blocklyFieldSliderThumbBorderColor); cursor: pointer; } `) diff --git a/pxtblocks/plugins/math/numberBlocks.ts b/pxtblocks/plugins/math/numberBlocks.ts index ffb73d9ffb26..a64b397ed35f 100644 --- a/pxtblocks/plugins/math/numberBlocks.ts +++ b/pxtblocks/plugins/math/numberBlocks.ts @@ -11,7 +11,8 @@ Blockly.defineBlocksWithJsonArray([ "args0": [{ "type": "field_number", "name": "NUM", - "precision": 1 + "precision": 1, + "ariaTypeName": lf("value") }], "output": "Number", "outputShape": provider.SHAPES.ROUND, @@ -29,7 +30,8 @@ Blockly.defineBlocksWithJsonArray([ "type": "field_number", "name": "NUM", "min": 0, - "precision": 1 + "precision": 1, + "ariaTypeName": lf("value") }], "output": "Number", "outputShape": provider.SHAPES.ROUND, @@ -46,7 +48,8 @@ Blockly.defineBlocksWithJsonArray([ "args0": [{ "type": "field_number", "name": "NUM", - "min": 0 + "min": 0, + "ariaTypeName": lf("value") }], "output": "Number", "outputShape": provider.SHAPES.ROUND, diff --git a/pxtblocks/plugins/newVariableField/fieldDropdownMixin.ts b/pxtblocks/plugins/newVariableField/fieldDropdownMixin.ts deleted file mode 100644 index 78772242a00b..000000000000 --- a/pxtblocks/plugins/newVariableField/fieldDropdownMixin.ts +++ /dev/null @@ -1,123 +0,0 @@ -import * as Blockly from "blockly"; -import { isImageProperties } from "../../fields"; - -// This is the same as showEditor_ and dropdownCreate in field_dropdown -// except that it supports separators between dropdown menu items -export function showEditorMixin(this: Blockly.FieldDropdown, e?: MouseEvent) { - const block = this.getSourceBlock(); - if (!block) { - throw new Blockly.UnattachedFieldError(); - } - - const menu = new Blockly.Menu(); - menu.setRole(Blockly.utils.aria.Role.LISTBOX); - this.menu_ = menu; - - const options = this.getOptions(false); - let selectedMenuItem = null; - - const handleMenuActionEvent = (menuItem: Blockly.MenuItem) => { - Blockly.DropDownDiv.hideIfOwner(this, true); - this.onItemSelected_(this.menu_ as Blockly.Menu, menuItem); - } - - for (let i = 0; i < options.length; i++) { - const [label, value] = options[i]; - - if (value === "SEPARATOR") { - const menuItem = new HorizontalRuleMenuItem(""); - menu.addChild(menuItem); - continue; - } - - const content = (() => { - if (isImageProperties(label)) { - // Convert ImageProperties to an HTMLImageElement. - const image = new Image(label.width, label.height); - image.src = label.src; - image.alt = label.alt || ''; - return image; - } - return label; - })(); - - const menuItem = new Blockly.MenuItem(content, value as string); - menuItem.setRole(Blockly.utils.aria.Role.OPTION); - menuItem.setRightToLeft(block.RTL); - menuItem.setCheckable(true); - menu.addChild(menuItem); - menuItem.setChecked(value === this.value_); - menuItem.onAction(handleMenuActionEvent, this); - if (value === this.value_) { - selectedMenuItem = menuItem; - } - } - - if (e && typeof e.clientX === 'number') { - this.menu_!.openingCoords = new Blockly.utils.Coordinate(e.clientX, e.clientY); - } else { - this.menu_!.openingCoords = null; - } - - Blockly.DropDownDiv.clearContent(); - Blockly.DropDownDiv.getContentDiv().style.height = ""; - const menuElement = this.menu_!.render(Blockly.DropDownDiv.getContentDiv()); - Blockly.utils.dom.addClass(menuElement, 'blocklyDropdownMenu'); - - - if (this.getConstants()!.FIELD_DROPDOWN_COLOURED_DIV) { - const primaryColour = block.getColour(); - const borderColour = (this.sourceBlock_ as Blockly.BlockSvg).style.colourTertiary; - Blockly.DropDownDiv.setColour(primaryColour, borderColour); - } - - Blockly.DropDownDiv.showPositionedByField(this, this.dropdownDispose_.bind(this)); - Blockly.DropDownDiv.getContentDiv().style.height = `${this.menu_.getSize().height}px`; - - // Focusing needs to be handled after the menu is rendered and positioned. - // Otherwise it will cause a page scroll to get the misplaced menu in - // view. See issue #1329. - this.menu_!.focus(); - - if (selectedMenuItem) { - this.menu_.setHighlighted(selectedMenuItem); - } - - this.applyColour(); -} - - -class HorizontalRuleMenuItem extends Blockly.MenuItem { - element_: Element; - - createDom(): Element { - const element = document.createElement('div'); - element.id = Blockly.utils.idGenerator.getNextUniqueId(); - this.element_ = element; - - element.className = "blockly-menuseparator"; - element.setAttribute("role", "separator"); - - return element; - } - - getElement(): Element { - return this.element_; - } - - getId(): string { - return this.element_.id; - } - - isEnabled(): boolean { - return false; - } -} - -Blockly.Css.register(` -.blockly-menuseparator { - border-top: 1px solid rgba(0, 0, 0, 0.2); - margin: 4px 0; - padding: 0; -} -`); \ No newline at end of file diff --git a/pxtblocks/plugins/newVariableField/fieldVariable.ts b/pxtblocks/plugins/newVariableField/fieldVariable.ts index bdbae9f58c63..89d3f5226cbe 100644 --- a/pxtblocks/plugins/newVariableField/fieldVariable.ts +++ b/pxtblocks/plugins/newVariableField/fieldVariable.ts @@ -1,5 +1,4 @@ import * as Blockly from "blockly"; -import { showEditorMixin } from "./fieldDropdownMixin"; /** * This is the same as the Blockly variable field but with the addition @@ -17,7 +16,7 @@ export class FieldVariable extends Blockly.FieldVariable { insertIndex, 0, [Blockly.Msg['NEW_VARIABLE_DROPDOWN'], FieldVariable.CREATE_VARIABLE_ID], - [undefined, 'SEPARATOR'] + Blockly.FieldDropdown.SEPARATOR ); return options; @@ -39,7 +38,7 @@ export class FieldVariable extends Blockly.FieldVariable { if (this.sourceBlock_ && !this.sourceBlock_.isDeadOrDying()) { const id = menuItem.getValue(); if (id === FieldVariable.CREATE_VARIABLE_ID) { - Blockly.Variables.createVariableButtonHandler(this.sourceBlock_.workspace, name => { + Blockly.Variables.createVariableButtonHandler(this.sourceBlock_.workspace as Blockly.WorkspaceSvg, name => { const newVar = this.sourceBlock_.workspace.getVariableMap().getVariable(name); if (newVar) { @@ -169,10 +168,6 @@ export class FieldVariable extends Blockly.FieldVariable { ); } - protected showEditor_(e?: MouseEvent): void { - showEditorMixin.call(this, e); - } - getValue(): string | null { const id = super.getValue(); diff --git a/pxtblocks/plugins/renderer/connectionPreviewer.ts b/pxtblocks/plugins/renderer/connectionPreviewer.ts index daca2b6905c3..dc3c259815ae 100644 --- a/pxtblocks/plugins/renderer/connectionPreviewer.ts +++ b/pxtblocks/plugins/renderer/connectionPreviewer.ts @@ -37,38 +37,70 @@ export class ConnectionPreviewer extends Blockly.InsertionMarkerPreviewer { const staticIndicatorParent = staticConn.sourceBlock_.getSvgRoot().querySelector(":scope>.blocklyConnectionIndicatorParent") as SVGElement; this.staticConnectionIndicator = this.createConnectionIndicator(staticIndicatorParent, staticConn); } - this.staticConnectionIndicator.parentElement.appendChild(this.staticConnectionIndicator); + this.raiseIndicators(); + this.updateLineCoords(draggedConn, staticConn); + // Refresh after the in-flight render queue drains. Covers two cases: + // - base.startDrag for keyboard events nudges the block after firing + // the preview, leaving our line endpoints stale. + // - disconnecting from a parent can queue a re-render of the static + // block (size change when a child slot collapses), shifting its + // connection positions. + Blockly.renderManagement.finishQueuedRenders().then(() => { + if (this.connectionLine) { + this.raiseIndicators(); + this.updateLineCoords(draggedConn, staticConn); + } + }); + } + + private raiseIndicators() { + // Dragged side: keep the dragged dot last in the dragged block's + // svgRoot so it paints over the line and the dragged block's path. + this.draggedConnectionIndicator.parentElement?.appendChild(this.draggedConnectionIndicator); + // Static side: ensure the indicator group ends up at the end of the + // static block's svgRoot so the connection-highlight path that + // RenderedConnection.highlight re-appends doesn't sit on top of it. + const staticParent = this.staticConnectionIndicator.parentElement; + staticParent.appendChild(this.staticConnectionIndicator); + staticParent.parentElement?.appendChild(staticParent); + } + private updateLineCoords(draggedConn: Blockly.RenderedConnection, staticConn: Blockly.RenderedConnection) { const radius = ConnectionPreviewer.CONNECTION_INDICATOR_RADIUS; - const offset = draggedConn.getOffsetInBlock(); + const dragOffset = draggedConn.getOffsetInBlock(); + const staticOffset = staticConn.getOffsetInBlock(); + // Connection offsets can shift when the host block re-renders (e.g. + // a static block whose input slot collapses on disconnect), so keep + // each indicator's transform in sync with the current offset. + this.draggedConnectionIndicator.setAttribute( + "transform", `translate(${dragOffset.x}, ${dragOffset.y})`); + this.staticConnectionIndicator.setAttribute( + "transform", `translate(${staticOffset.x}, ${staticOffset.y})`); const absDrag = Blockly.utils.Coordinate.sum( draggedConn.sourceBlock_.getRelativeToSurfaceXY(), - offset + dragOffset, ); const absStatic = Blockly.utils.Coordinate.sum( staticConn.sourceBlock_.getRelativeToSurfaceXY(), - staticConn.getOffsetInBlock() + staticOffset, ); - const dx = absStatic.x - absDrag.x; const dy = absStatic.y - absDrag.y; - // Offset the line by the radius of the indicator to prevent overlap - const atan = Math.atan2(dy, dx); - const len = Math.sqrt(dx * dx + dy * dy); - const isMouseDrag = Blockly.Gesture.inProgress(); - // When the indicators are overlapping, or if the drag is keyboard driven, we hide the line - if (len < radius * 2 + 1 || !isMouseDrag) { + // Hide when the indicators are close enough to overlap; the line + // endpoints would otherwise land inside the dots and look wrong. + if (len < radius * 2 + 1) { Blockly.utils.dom.addClass(this.connectionLine, "hidden"); - } else if (isMouseDrag) { - Blockly.utils.dom.removeClass(this.connectionLine, "hidden"); - this.connectionLine.setAttribute("x1", String(offset.x + Math.cos(atan) * radius)); - this.connectionLine.setAttribute("y1", String(offset.y + Math.sin(atan) * radius)); - - this.connectionLine.setAttribute("x2", String(offset.x + dx - Math.cos(atan) * radius)); - this.connectionLine.setAttribute("y2", String(offset.y + dy - Math.sin(atan) * radius)); + return; } + Blockly.utils.dom.removeClass(this.connectionLine, "hidden"); + // Stop each endpoint at the dot's edge so the line visually meets it. + const atan = Math.atan2(dy, dx); + this.connectionLine.setAttribute("x1", String(dragOffset.x + Math.cos(atan) * radius)); + this.connectionLine.setAttribute("y1", String(dragOffset.y + Math.sin(atan) * radius)); + this.connectionLine.setAttribute("x2", String(dragOffset.x + dx - Math.cos(atan) * radius)); + this.connectionLine.setAttribute("y2", String(dragOffset.y + dy - Math.sin(atan) * radius)); } hidePreview(): void { @@ -95,4 +127,4 @@ export class ConnectionPreviewer extends Blockly.InsertionMarkerPreviewer { 'translate(' + offset.x + ',' + offset.y + ')'); return result; } -} \ No newline at end of file +} diff --git a/pxtblocks/plugins/renderer/constants.ts b/pxtblocks/plugins/renderer/constants.ts index ec3dc122f552..2f459630eeec 100644 --- a/pxtblocks/plugins/renderer/constants.ts +++ b/pxtblocks/plugins/renderer/constants.ts @@ -49,8 +49,8 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider { ellipses = this.makeEllipses(); - override createDom(svg: SVGElement, tagName: string, selector: string, injectionDivIfIsParent?: HTMLElement,): void { - super.createDom(svg, tagName, selector, injectionDivIfIsParent); + override createDom(svg: SVGElement, selector: string, injectionDivIfIsParent?: HTMLElement,): void { + super.createDom(svg, selector, injectionDivIfIsParent); const defs = Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.DEFS, {}, svg); @@ -316,4 +316,4 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider { throw Error('Unknown type'); } } -} \ No newline at end of file +} diff --git a/pxtblocks/plugins/text/fieldString.ts b/pxtblocks/plugins/text/fieldString.ts index ec6a20281441..f0a0db6f2405 100644 --- a/pxtblocks/plugins/text/fieldString.ts +++ b/pxtblocks/plugins/text/fieldString.ts @@ -21,7 +21,8 @@ export class FieldString extends Blockly.FieldTextInput { if (this.quoteLeft_) this.quoteLeft_.parentNode.removeChild(this.quoteLeft_); this.quoteLeft_ = Blockly.utils.dom.createSvgElement('text', { 'font-size': this.quoteSize_ + 'px', - 'class': 'field-text-quote' + 'class': 'field-text-quote', + 'aria-hidden': 'true' }, this.fieldGroup_); @@ -30,7 +31,8 @@ export class FieldString extends Blockly.FieldTextInput { if (this.quoteRight_) this.quoteRight_.parentNode.removeChild(this.quoteRight_); this.quoteRight_ = Blockly.utils.dom.createSvgElement('text', { 'font-size': this.quoteSize_ + 'px', - 'class': 'field-text-quote' + 'class': 'field-text-quote', + 'aria-hidden': 'true' }, this.fieldGroup_); this.quoteLeft_.appendChild(document.createTextNode('"')); this.quoteRight_.appendChild(document.createTextNode('"')); diff --git a/pxtblocks/plugins/text/join.ts b/pxtblocks/plugins/text/join.ts index 4cde989ea0c8..e8a901851d8a 100644 --- a/pxtblocks/plugins/text/join.ts +++ b/pxtblocks/plugins/text/join.ts @@ -1,6 +1,7 @@ import * as Blockly from "blockly"; import { InlineSvgsExtensionBlock } from "../functions"; import { FieldImageNoText } from "../../fields/field_imagenotext"; +import { maybeMoveFocusFromButton } from "../../utils"; type TextJoinMixinType = typeof TEXT_JOIN_MUTATOR_MIXIN; @@ -12,6 +13,8 @@ export type TextJoinBlock = InlineSvgsExtensionBlock & TextJoinMixin; const TEXT_JOIN_MUTATOR_MIXIN = { itemCount_: 0, valueConnections_: [] as Blockly.Connection[], + buttons: null as Blockly.Input | null, + delta: 0, mutationToDom: function (this: TextJoinBlock) { const container = Blockly.utils.xml.createElement('mutation'); @@ -38,6 +41,7 @@ const TEXT_JOIN_MUTATOR_MIXIN = { const update = () => { this.itemCount_++; }; + this.delta = 1; this.update_(update); this.restoreValueConnections_(); // Add shadow block @@ -67,6 +71,7 @@ const TEXT_JOIN_MUTATOR_MIXIN = { const update = () => { this.itemCount_--; }; + this.delta = -1; this.update_(update); this.restoreValueConnections_(); }, @@ -97,7 +102,17 @@ const TEXT_JOIN_MUTATOR_MIXIN = { }, Blockly.config.bumpDelay); } if (block.rendered && block instanceof Blockly.BlockSvg) { - block.queueRender(); + block.queueRender().then(() => { + if (this.buttons) { + let field = this.buttons.fieldRow[0]; + if (this.buttons.fieldRow.length > 1) { + field = this.delta < 0 ? field : this.buttons.fieldRow[1]; + } + maybeMoveFocusFromButton(field); + this.buttons = null; + this.delta = 0; + } + }); } Blockly.Events.setGroup(false); }, @@ -128,7 +143,9 @@ const TEXT_JOIN_MUTATOR_MIXIN = { if (!this.getInput('ADD' + i)) { const input = this.appendValueInput('ADD' + i) // pxt-blockly: pxt-blockly/pull/112 - .setAlign(Blockly.inputs.Align.LEFT); + .setAlign(Blockly.inputs.Align.LEFT) + .setAriaLabelProvider( + Blockly.Msg['INPUT_LABEL_TEXT_JOIN_ITEM'].replace('%1', (i + 1).toString())); // if (i == 0) { // input.appendField(Blockly.Msg['TEXT_JOIN_TITLE_CREATEWITH']); // } @@ -142,11 +159,11 @@ const TEXT_JOIN_MUTATOR_MIXIN = { // pxt-blockly: Use +/- buttons for mutation if (this.getInput('BUTTONS')) this.removeInput('BUTTONS'); - const buttons = this.appendDummyInput('BUTTONS'); + this.buttons = this.appendDummyInput('BUTTONS'); if (this.itemCount_ > 1) { - buttons.appendField(new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, "*", remove, false)); + this.buttons.appendField(new FieldImageNoText(this.REMOVE_IMAGE_DATAURI, 24, 24, lf("remove argument"), remove, false)); } - buttons.appendField(new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, "*", add, false)); + this.buttons.appendField(new FieldImageNoText(this.ADD_IMAGE_DATAURI, 24, 24, lf("add argument"), add, false)); // Switch to vertical list when there are too many items const horizontalLayout = this.itemCount_ <= 4; @@ -188,4 +205,4 @@ Blockly.defineBlocksWithJsonArray([ "tooltip": "%{BKY_TEXT_JOIN_TOOLTIP}", "mutator": "pxt_text_join_mutator" }, -]) \ No newline at end of file +]) diff --git a/pxtblocks/render.ts b/pxtblocks/render.ts index 1ee549d6deff..fc6f9051553c 100644 --- a/pxtblocks/render.ts +++ b/pxtblocks/render.ts @@ -72,8 +72,9 @@ export function renderWorkspace(options: BlocksRenderOptions = { emPixels: 18, l let metrics = workspace.getMetrics(); - const svg = blocklyDiv.querySelectorAll('svg')[0].cloneNode(true) as SVGSVGElement; - cleanUpBlocklySvg(svg); + const sourceSvg = blocklyDiv.querySelectorAll('svg')[0]; + const svg = sourceSvg.cloneNode(true) as SVGSVGElement; + cleanUpBlocklySvg(svg, sourceSvg); pxt.U.toArray(svg.querySelectorAll('.blocklyBlockCanvas,.blocklyBubbleCanvas')) .forEach(el => el.setAttribute('transform', `translate(${-metrics.contentLeft}, ${-metrics.contentTop}) scale(1)`)); diff --git a/pxtblocks/toolbox.ts b/pxtblocks/toolbox.ts index 5640ac11acc7..d1544a7ae212 100644 --- a/pxtblocks/toolbox.ts +++ b/pxtblocks/toolbox.ts @@ -189,19 +189,19 @@ export function createShadowValue(info: pxtc.BlocksInfo, p: pxt.blocks.BlockPara let mut: HTMLElement; if (p.range) { - mut = document.createElement('mutation'); - mut.setAttribute('min', p.range.min.toString()); - mut.setAttribute('max', p.range.max.toString()); - mut.setAttribute('label', p.actualName.charAt(0).toUpperCase() + p.actualName.slice(1)); + mut = document.createElement("mutation"); + mut.setAttribute("min", p.range.min.toString()); + mut.setAttribute("max", p.range.max.toString()); + mut.setAttribute("label", p.actualName.charAt(0).toUpperCase() + p.actualName.slice(1)); if (p.fieldOptions) { - if (p.fieldOptions['step']) mut.setAttribute('step', p.fieldOptions['step']); - if (p.fieldOptions['color']) mut.setAttribute('color', p.fieldOptions['color']); - if (p.fieldOptions['precision']) mut.setAttribute('precision', p.fieldOptions['precision']); + if (p.fieldOptions["step"]) mut.setAttribute("step", p.fieldOptions["step"]); + if (p.fieldOptions["color"]) mut.setAttribute("color", p.fieldOptions["color"]); + if (p.fieldOptions["precision"]) mut.setAttribute("precision", p.fieldOptions["precision"]); } } if (p.fieldOptions) { - if (!mut) mut = document.createElement('mutation'); + if (!mut) mut = document.createElement("mutation"); mut.setAttribute(`customfield`, JSON.stringify(p.fieldOptions)); } @@ -285,6 +285,9 @@ function createFlyoutLabel(name: string, color?: string, icon?: string, iconClas } else { headingLabel.setAttribute('web-icon-class', `blocklyFlyoutIcon${name}`); + if (pxt.toolbox.isImageIcon(icon)) { + headingLabel.setAttribute('web-icon-image', pxt.Util.pathJoin(pxt.webConfig.commitCdnUrl, encodeURI(icon))); + } } } return headingLabel; @@ -307,6 +310,10 @@ export function createToolboxBlock(info: pxtc.BlocksInfo, fn: pxtc.SymbolInfo, c let parent: HTMLElement; let parentInput: HTMLElement; + if (fn.attributes.builtinBlockId) { + return createBuiltinBlock(fn); + } + if (fn.attributes.toolboxParent) { const parentFn = info.blocksById[fn.attributes.toolboxParent]; @@ -575,4 +582,62 @@ export function createFunctionsFlyoutCategory(workspace: Blockly.WorkspaceSvg) { } return res; -}; \ No newline at end of file +}; + +function createBuiltinBlock(fn: pxtc.SymbolInfo) { + const id = fn.attributes.builtinBlockId; + + const blockColor = fn.attributes.color; + + if (id === "makecode_color_picker") { + // + // rgb + // + // + // 255 + // + // + // + // + // 255 + // + // + // + // + // 0 + // + // + // + const block = document.createElement("block"); + block.setAttribute("type", "makecode_color_picker"); + + const field = document.createElement("field"); + field.setAttribute("name", "FORMAT"); + field.textContent = "rgb"; + block.appendChild(field); + + for (let i = 0; i < 3; i++) { + const value = document.createElement("value"); + value.setAttribute("name", `INPUT${i}`); + const shadow = document.createElement("shadow"); + shadow.setAttribute("type", "makecode_color_picker_number"); + const numField = document.createElement("field"); + numField.setAttribute("name", "NUM"); + numField.textContent = "0"; + shadow.appendChild(numField); + value.appendChild(shadow); + block.appendChild(value); + } + + if (blockColor) { + const mutation = document.createElement("mutation"); + mutation.setAttribute("color", blockColor); + block.appendChild(mutation); + } + + return block; + } + + pxt.warn(`Unsupported builtin block id: ${id}`); + return undefined; +} \ No newline at end of file diff --git a/pxtblocks/utils.ts b/pxtblocks/utils.ts new file mode 100644 index 000000000000..dc99c3f786c0 --- /dev/null +++ b/pxtblocks/utils.ts @@ -0,0 +1,17 @@ +import * as Blockly from "blockly"; +import { FieldImageNoText } from "./fields/field_imagenotext"; + +// Moves focus to the given node, but only when focus currently sits on one of +// our FieldImageNoText buttons (the +/-/expand/collapse icons) or nowhere. This +// keeps focus sensible after such a button re-renders away the element that had +// focus, without stealing focus if it has moved elsewhere. +export const maybeMoveFocusFromButton = (node: Blockly.IFocusableNode | undefined): void => { + const focusManager = Blockly.getFocusManager(); + const currentlyFocusedNode = focusManager.getFocusedNode(); + if ( + node && + (currentlyFocusedNode instanceof FieldImageNoText || !currentlyFocusedNode) + ) { + focusManager.focusNode(node); + } +} diff --git a/pxtcompiler/emitter/backthumb.ts b/pxtcompiler/emitter/backthumb.ts index af08bcdedae3..6edbdbdf793b 100644 --- a/pxtcompiler/emitter/backthumb.ts +++ b/pxtcompiler/emitter/backthumb.ts @@ -25,6 +25,7 @@ namespace ts.pxtc { "numops::lsrs": "_numops_lsrs", "pxt::toInt": "_numops_toInt", "pxt::fromInt": "_numops_fromInt", + "pxt::switch_eq": "_pxt_switch_eq", } // snippets for ARM Thumb assembly @@ -355,6 +356,70 @@ _cmp_${op}: cmp r0, #0`) } + // switch(x){case k:} compiles to equality tests via pxt::switch_eq. + // Fast-path the common case of two tagged ints; defer anything boxed + // (low bit clear) to the C++ helper. + r += ` +.section code +.object _pxt_helper_switch_eq +_pxt_switch_eq: + @scope _pxt_switch_eq + lsls r2, r0, #31 ; arg0 a tagged int? (low bit set) + beq .boxed + lsls r2, r1, #31 ; arg1 a tagged int? + beq .boxed + cmp r0, r1 ; tagged ints compare equal iff identical + beq .true +.false: + movs r0, #0 + bx lr +.true: + movs r0, #1 + bx lr +` + r += boxedOp(`bl pxt::switch_eq`) + + // Array .length on a known RefCollection: read the length field and + // tag it inline, skipping the call into C++ Array_::length + fromInt. + // Anything that isn't a plain RefCollection pointer defers to C++. + // + // This depends on the C++ runtime object layout (pxt-common-packages + // pxtbase.h). If those structs are reordered, update the offsets here: + // * object[0] = RefObject.vtable (RefObject: vtable is field 0) + // * vtable[8] = VTable.classNo (u16) (struct VTable, non-VM build: + // numbytes@0, objectType/magic@2-3, ifaceTable@4-7, + // classNo@8) -- same layout this compiler emits in + // vtableToAsm(), so read and write stay in sync + // * object[8] = RefCollection.head.length (RefCollection : RefObject + // {vtable@0} + Segment head@4; Segment {data@0, length@4}) + // The length is read with ldrh; ramint_t may be u16 or u32 (pxtbase.h + // #if), but little-endian makes the low halfword correct for any array + // that fits in device RAM (< 65536 elements). The classNo guard ensures + // only genuine RefCollections take this path. + r += ` +.section code +.object _pxt_helper_array_length_tagged +_pxt_array_length_tagged: + @scope _pxt_array_length_tagged + lsls r1, r0, #30 ; pointer? (low 2 bits 00) + bne .boxed + cmp r0, #0 ; non-null? + beq .boxed + ldr r2, [r0, #0] ; load vtable + ldrh r2, [r2, #8] ; vtable class id + cmp r2, #${pxt.BuiltInType.RefCollection} + bne .boxed + ldrh r0, [r0, #8] ; length field + lsls r0, r0, #1 ; tag as int: (n<<1)|1 + adds r0, r0, #1 + bx lr +.boxed: + ${this.pushLR()} + ${this.callCPP("Array_::length")} + bl _numops_fromInt + ${this.popPC()} +` + return r } diff --git a/pxtcompiler/emitter/decompiler.ts b/pxtcompiler/emitter/decompiler.ts index 7d8c0ab7ff50..ecb86c56cba0 100644 --- a/pxtcompiler/emitter/decompiler.ts +++ b/pxtcompiler/emitter/decompiler.ts @@ -105,6 +105,9 @@ namespace ts.pxtc.decompiler { const stringType = "text"; const booleanType = "logic_boolean"; + const colorPickerNumber = "makecode_color_picker_number"; + const colorPickerString = "makecode_color_picker_string"; + const ops: pxt.Map<{ type: string; op?: string; leftName?: string; rightName?: string }> = { "+": { type: "math_arithmetic", op: "ADD" }, "-": { type: "math_arithmetic", op: "MINUS" }, @@ -779,7 +782,7 @@ ${output}`; function emitValueNode(n: ValueNode) { write(``) - if (shouldEmitShadowOnly(n)) { + if (shouldEmitShadowOnly(n, blocksInfo)) { emitOutputNode(n.value, true); } else { @@ -789,6 +792,7 @@ ${output}`; case numberType: case integerNumberType: case wholeNumberType: + case colorPickerNumber: write(`0`) break; case minmaxNumberType: @@ -802,7 +806,8 @@ ${output}`; write(`TRUE`) break; case stringType: - write(``) + case colorPickerString: + write(``) break; default: write(``) @@ -1608,6 +1613,8 @@ ${output}`; } function getImageLiteralStatement(node: ts.CallExpression, info: pxtc.CallInfo) { + const chars = ".#23456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + let arg = node.arguments[0]; if (arg.kind != SK.StringLiteral && arg.kind != SK.NoSubstitutionTemplateLiteral) { error(node) @@ -1619,17 +1626,23 @@ ${output}`; res.fields = []; const leds = ((arg as ts.StringLiteral).text || '').replace(/\s+/g, ''); - const nc = (attributes.imageLiteralColumns || 5) * (attributes.imageLiteral || attributes.gridLiteral); + const nc = (attributes.imageLiteralColumns || 5) * gridLiteralValue(attributes); const nr = attributes.imageLiteralRows || 5; const nleds = nc * nr; if (nleds != leds.length) { error(node, Util.lf("Invalid image pattern ({0} expected vs {1} actual)", nleds, leds.length)); return undefined; } + const isColor = attributes.colorGridLiteral; let ledString = ''; for (let r = 0; r < nr; ++r) { for (let c = 0; c < nc; ++c) { - ledString += /[#*1]/.test(leds[r * nc + c]) ? '#' : '.'; + if (isColor) { + ledString += chars.charAt(parseCharacter(leds[r * nc + c])); + } + else { + ledString += /[#*1]/.test(leds[r * nc + c]) ? '#' : '.'; + } } ledString += '\n'; } @@ -1638,6 +1651,22 @@ ${output}`; return res; } + function parseCharacter(c: string): number { + const chars = ".#23456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + switch (c) { + case "#": + case "*": + case "1": + return 1; + case ".": + case "_": + case "0": + return 0; + default: + return Math.max(0, chars.indexOf(c.toUpperCase())); + } + } + function getBinaryExpressionStatement(n: ts.BinaryExpression): StatementNode { const name = (n.left as ts.Identifier).text; @@ -1972,6 +2001,29 @@ ${output}`; r.fields = [getField("OP", "POWER")]; return r; } + else if (isColorPickerFunction(info)) { + const r = mkExpr("makecode_color_picker", node); + + if (info.qName === "colorHelpers.hex") { + r.inputs = [ + mkValue("HEX_INPUT", getOutputBlock(node.arguments[0]), colorPickerString) + ] + } + else { + r.inputs = node.arguments.map((arg, index) => + mkValue("INPUT" + index, getOutputBlock(arg), colorPickerNumber) + ) + } + + r.fields = [getField("FORMAT", info.qName.substring(info.qName.lastIndexOf(".") + 1))]; + + const blockDef = blocksInfo.blocks.find(b => b.attributes.builtinBlockId === "makecode_color_picker"); + if (blockDef && blockDef.attributes.color) { + r.mutation = { color: blockDef.attributes.color }; + } + + return r; + } else if (pxt.Util.startsWith(info.qName, "Math.")) { const op = info.qName.substring(5); if (isSupportedMathFunction(op)) { @@ -2061,7 +2113,7 @@ ${output}`; attributes.blockId = builtin.blockId; } - if (attributes.imageLiteral || attributes.gridLiteral) { + if (gridLiteralValue(attributes)) { return getImageLiteralStatement(node, info); } @@ -2100,9 +2152,9 @@ ${output}`; const paramComp = comp.parameters[comp.thisParameter ? i - 1 : i]; const paramRange = paramComp && paramComp.range; if (paramRange) { - const min = paramRange['min']; - const max = paramRange['max']; - shadowMutation = { 'min': min.toString(), 'max': max.toString() }; + const min = paramRange["min"]; + const max = paramRange["max"]; + shadowMutation = { "min": min.toString(), "max": max.toString(), "label": paramComp.actualName.charAt(0).toUpperCase() + paramComp.actualName.slice(1) }; } if (i === 0 && attributes.defaultInstance) { @@ -2305,7 +2357,7 @@ ${output}`; if (!arg.param.isOptional) { nonOptional++; } - else if (input && !shouldEmitShadowOnly(input)) { + else if (input && !shouldEmitShadowOnly(input, blocksInfo)) { expandCount = Math.max(arg.param.definitionIndex - nonOptional + 1, expandCount) } } @@ -2761,7 +2813,7 @@ ${output}`; return Util.lf("Function with forceStatement cannot be used as an expression.") } - if (info.qName == "Math.pow") { + if (info.qName == "Math.pow" || isColorPickerFunction(info)) { return undefined; } else if (pxt.Util.startsWith(info.qName, "Math.")) { @@ -2803,7 +2855,7 @@ ${output}`; const comp = env.compInfo(info); const totalDecompilableArgs = comp.parameters.length + (comp.thisParameter ? 1 : 0); - if (attributes.imageLiteral || attributes.gridLiteral) { + if (gridLiteralValue(attributes)) { // Image literals do not show up in the block string, so it won't be in comp if (info.args.length - totalDecompilableArgs > 1) { return Util.lf("Function call has more arguments than are supported by its block"); @@ -2815,7 +2867,7 @@ ${output}`; } const leds = ((arg as ts.StringLiteral).text || '').replace(/\s+/g, ''); const nr = attributes.imageLiteralRows || 5; - const nc = (attributes.imageLiteralColumns || 5) * (attributes.imageLiteral || attributes.gridLiteral); + const nc = (attributes.imageLiteralColumns || 5) * gridLiteralValue(attributes); const nleds = nc * nr; if (nc * nr != leds.length) { return Util.lf("Invalid image pattern ({0} expected vs {1} actual)", nleds, leds.length); @@ -3944,7 +3996,7 @@ ${output}`; } } - function shouldEmitShadowOnly(n: ValueNode) { + function shouldEmitShadowOnly(n: ValueNode, blocksInfo: BlocksInfo) { if (n.emitShadowOnly !== undefined) { return n.emitShadowOnly; } @@ -3952,29 +4004,55 @@ ${output}`; let emitShadowOnly = false; if (n.value.kind === "expr") { + if (n.value.type !== n.shadowType) { + const shadowBlockInfo = blocksInfo.blocksById[n.shadowType]; + let shadowBlockShimType: string; + let shadowFieldName: string; + + if (shadowBlockInfo?.attributes?.shim === "TD_ID") { + const argType = shadowBlockInfo.parameters[0]?.type; + const blockInfo = pxt.blocks.compileInfo(shadowBlockInfo); + + if (argType === shadowBlockInfo.retType) { + shadowBlockShimType = argType; + shadowFieldName = blockInfo.parameters[0].definitionName; + } + } + + if ( + shadowBlockShimType === "boolean" && isBooleanBlockType(n.value.type) || + shadowBlockShimType === "number" && isNumberBlockType(n.value.type) || + shadowBlockShimType === "string" && isStringBlockType(n.value.type) + ) { + n.value.type = n.shadowType; + n.value.fields[0].name = shadowFieldName; + n.value.mutation = n.shadowMutation; + } + } + const value = n.value as ExpressionNode; if (value.type === numberType && n.shadowType === minmaxNumberType) { value.type = minmaxNumberType; value.fields[0].name = 'SLIDER'; value.mutation = n.shadowMutation; } + else if (value.type === numberType && n.shadowType === colorPickerNumber) { + value.type = colorPickerNumber; + } + else if (value.type === stringType && n.shadowType === colorPickerString) { + value.type = colorPickerString; + } + emitShadowOnly = value.type === n.shadowType; if (!emitShadowOnly) { - switch (value.type) { - case "math_number": - case "math_number_minmax": - case "math_integer": - case "math_whole_number": - case "logic_boolean": - case "text": - emitShadowOnly = !n.shadowType; - break; + if (isNumberBlockType(value.type) || isBooleanBlockType(value.type) || isStringBlockType(value.type)) { + emitShadowOnly = !n.shadowType } } if (emitShadowOnly && value.inputs) { for (const input of value.inputs) { - if (!shouldEmitShadowOnly(input)) { + if (!shouldEmitShadowOnly(input, blocksInfo)) { emitShadowOnly = false; break; } @@ -3986,4 +4064,43 @@ ${output}`; return emitShadowOnly; } + + function isNumberBlockType(type: string) { + switch (type) { + case numberType: + case minmaxNumberType: + case integerNumberType: + case wholeNumberType: + case colorPickerNumber: + return true; + default: + return false; + } + } + + function isBooleanBlockType(type: string) { + return type === booleanType; + } + + function isStringBlockType(type: string) { + return type === stringType || type === colorPickerString; + } + + function gridLiteralValue(attrs: CommentAttrs) { + return attrs.gridLiteral || attrs.imageLiteral || attrs.colorGridLiteral; + + } + + function isColorPickerFunction(info: DecompilerCallInfo) { + switch (info?.qName) { + case "colorHelpers.rgb": + case "colorHelpers.hsv": + case "colorHelpers.hsl": + case "colorHelpers.hex": + case "colorHelpers.cmyk": + return true; + } + + return false; + } } diff --git a/pxtcompiler/emitter/driver.ts b/pxtcompiler/emitter/driver.ts index 849dfeb8d53a..61d00083504f 100644 --- a/pxtcompiler/emitter/driver.ts +++ b/pxtcompiler/emitter/driver.ts @@ -92,6 +92,14 @@ namespace ts.pxtc { }) } + export function hasErrorDiagnostics(diags: ReadonlyArray<{ category: DiagnosticCategory }>) { + return diags.some(d => d.category == DiagnosticCategory.Error) + } + + export function hasBlockingDiagnostics(opts: CompileOptions, diags: ReadonlyArray<{ category: DiagnosticCategory }>) { + return opts.enhancedErrors ? hasErrorDiagnostics(diags) : diags.length > 0 + } + export function py2tsIfNecessary(opts: CompileOptions): transpile.TranspileResult | undefined { if (opts.target.preferredEditor == pxt.PYTHON_PROJECT_NAME) { let res = pxtc.transpile.pyToTs(opts) @@ -237,7 +245,7 @@ namespace ts.pxtc { program = service.getProgram() } else { runConversionsAndStoreResults(opts, res) - if (res.diagnostics.length > 0) + if (hasBlockingDiagnostics(opts, res.diagnostics)) return res; program = buildProgram(opts, res) } @@ -245,8 +253,8 @@ namespace ts.pxtc { const entryPoint = opts.sourceFiles.filter(f => U.endsWith(f, ".ts")).pop().replace(/.*\//, "") // First get and report any syntactic errors. - res.diagnostics = patchUpDiagnostics(program.getSyntacticDiagnostics(), opts.ignoreFileResolutionErrors); - if (res.diagnostics.length > 0) { + res.diagnostics = res.diagnostics.concat(patchUpDiagnostics(program.getSyntacticDiagnostics(), opts.ignoreFileResolutionErrors)); + if (hasBlockingDiagnostics(opts, res.diagnostics)) { if (opts.forceEmit) { pxt.debug('syntactic errors, forcing emit') compileBinary(program, opts, res, entryPoint); @@ -254,14 +262,14 @@ namespace ts.pxtc { return res; } - // If we didn't have any syntactic errors, then also try getting the global and + // If we didn't have any blocking syntactic errors, then also try getting the global and // semantic errors. - res.diagnostics = patchUpDiagnostics(program.getOptionsDiagnostics().concat(Util.toArray(program.getGlobalDiagnostics())), opts.ignoreFileResolutionErrors); + res.diagnostics = res.diagnostics.concat(patchUpDiagnostics(program.getOptionsDiagnostics().concat(Util.toArray(program.getGlobalDiagnostics())), opts.ignoreFileResolutionErrors)); const semStart = U.cpuUs() - if (res.diagnostics.length == 0) { - res.diagnostics = patchUpDiagnostics(program.getSemanticDiagnostics(), opts.ignoreFileResolutionErrors); + if (!hasBlockingDiagnostics(opts, res.diagnostics)) { + res.diagnostics = res.diagnostics.concat(patchUpDiagnostics(program.getSemanticDiagnostics(), opts.ignoreFileResolutionErrors)); } const emitStart = U.cpuUs() @@ -273,13 +281,13 @@ namespace ts.pxtc { res.ast = program } - if (opts.ast || opts.forceEmit || res.diagnostics.length == 0) { + if (opts.ast || opts.forceEmit || !hasBlockingDiagnostics(opts, res.diagnostics)) { const binOutput = compileBinary(program, opts, res, entryPoint); res.times["compilebinary"] = U.cpuUs() - emitStart res.diagnostics = res.diagnostics.concat(patchUpDiagnostics(binOutput.diagnostics)) } - if (res.diagnostics.length == 0) + if (!hasBlockingDiagnostics(opts, res.diagnostics)) res.success = true for (let f of opts.sourceFiles) { diff --git a/pxtcompiler/emitter/emitter.ts b/pxtcompiler/emitter/emitter.ts index 461125dda37f..83fecb00a587 100644 --- a/pxtcompiler/emitter/emitter.ts +++ b/pxtcompiler/emitter/emitter.ts @@ -247,7 +247,7 @@ namespace ts.pxtc { pxt.log(stringKind(n)) } - // next free error 9284 + // next free error 9285 function userError(code: number, msg: string, secondary = false): Error { let e = new Error(msg); (e).ksEmitterUserError = true; @@ -3866,11 +3866,19 @@ ${lbl}: .short 0xffff throw U.oops("invalid format specifier: " + f) } }) + // Native Array_.length has a thumb fast path that returns an + // already-tagged int, so route to it and skip the fromInt return + // conversion the general path would otherwise add. + let skipNativeReturnConversion = false + if (opts.target.isNative && isThumb() && name == "Array_::length" && fmt[0] == "I") { + name = "_pxt_array_length_tagged" + skipNativeReturnConversion = true + } let r = ir.rtcallMask(name, mask, attrs ? attrs.callingConvention : ir.CallingConvention.Plain, args2) if (!r.mask) r.mask = { refMask: 0 } r.mask.conversions = convInfos - if (opts.target.isNative) { + if (opts.target.isNative && !skipNativeReturnConversion) { let f0 = fmt[0] if (f0 == "I") r = fromInt(r) @@ -4233,8 +4241,41 @@ ${lbl}: .short 0xffff return v } + function maybeWarnOnBareFunctionReference(node: Expression) { + if (!opts.enhancedErrors) + return + + if (!node || node.kind !== SK.Identifier) + return + + if (hasPrecedingTsIgnoreComment(node)) + return + + const exprType = typeOf(node) + const signatures = exprType && !(exprType.flags & TypeFlags.Any) + && checker.getSignaturesOfType(exprType, SignatureKind.Call) + if (signatures && signatures.length) + warning(node, 9284, lf("Function reference used as a statement; did you mean to call it with '()'?")) + } + + function hasPrecedingTsIgnoreComment(node: Node) { + const src = node.getSourceFile() + const line = ts.getLineAndCharacterOfPosition(src, node.getStart(src)).line + if (line <= 0) + return false + + const lineStarts = src.getLineStarts() + const previousLineStart = lineStarts[line - 1] + const previousLineEnd = lineStarts[line] + const previousLine = src.text.slice(previousLineStart, previousLineEnd) + return /^\s*\/\/\s*@ts-ignore\b/.test(previousLine) + } + function emitExprAsStmt(node: Expression) { - if (isNoopExpr(node)) return + if (isNoopExpr(node)) { + maybeWarnOnBareFunctionReference(node) + return + } emitBrk(node) let v = emitIgnored(node) proc.emitExpr(v) diff --git a/pxtcompiler/emitter/hexfile.ts b/pxtcompiler/emitter/hexfile.ts index c59313d43cc7..09556d043b47 100644 --- a/pxtcompiler/emitter/hexfile.ts +++ b/pxtcompiler/emitter/hexfile.ts @@ -737,14 +737,6 @@ ${lbl}: ${snippets.obj_header("pxt::number_vt")} return 4 + 4 + 1 } - const primes = [ - 21078089, 22513679, 15655169, 18636881, 19658081, 21486649, 21919277, 20041213, 20548751, - 16180187, 18361627, 19338023, 19772677, 16506547, 23530697, 22998697, 21225203, 19815283, - 23679599, 19822889, 21136133, 19540043, 21837031, 18095489, 23924267, 23434627, 22582379, - 21584111, 22615171, 23403001, 19640683, 19998031, 18460439, 20105387, 17595791, 16482043, - 23199959, 18881641, 21578371, 22765747, 20170273, 16547639, 16434589, 21435019, 20226751, - 19506731, 21454393, 23224541, 23431973, 23745511, - ] export const vtLookups = 3 export function computeHashMultiplier(nums: number[]) { @@ -781,7 +773,10 @@ ${lbl}: ${snippets.obj_header("pxt::number_vt")} } } - if (minColl == -1 || minColl > numColl) { + // numColl == -1 means this multiplier failed to place all + // members at this size; only consider multipliers that + // succeeded, and keep the one with the fewest collisions. + if (numColl >= 0 && (minColl < 0 || numColl < minColl)) { minColl = numColl minMult = mult minArr = arr diff --git a/pxtcompiler/emitter/primes.ts b/pxtcompiler/emitter/primes.ts new file mode 100644 index 000000000000..f41571c62b2f --- /dev/null +++ b/pxtcompiler/emitter/primes.ts @@ -0,0 +1,71 @@ +namespace ts.pxtc { + // Candidate multipliers for the per-class interface-table hash search in + // computeHashMultiplier (see hexfile.ts). This is a compile-time-only + // search space: only the single chosen multiplier per class is emitted, so + // the size of this pool has no effect on output size - more candidates just + // give the search more chances to pack a class's table into a smaller + // power-of-two. + // + // 512 primes spread across the ~15M-24M range used by the original seeds; + // the high bits drive the hash, so an even spread matters. The first 50 are + // the historical hand-picked seeds; the rest are evenly spaced primes. + export const primes: number[] = [ + 21078089, 22513679, 15655169, 18636881, 19658081, 21486649, 21919277, 20041213, 20548751, + 16180187, 18361627, 19338023, 19772677, 16506547, 23530697, 22998697, 21225203, 19815283, + 23679599, 19822889, 21136133, 19540043, 21837031, 18095489, 23924267, 23434627, 22582379, + 21584111, 22615171, 23403001, 19640683, 19998031, 18460439, 20105387, 17595791, 16482043, + 23199959, 18881641, 21578371, 22765747, 20170273, 16547639, 16434589, 21435019, 20226751, + 19506731, 21454393, 23224541, 23431973, 23745511, 15000017, 15019493, 15038963, 15058457, + 15077947, 15097427, 15116891, 15136393, 15155849, 15175333, 15194819, 15214291, 15233791, + 15253253, 15272729, 15292213, 15311689, 15331187, 15350653, 15370129, 15389617, 15409099, + 15428573, 15448057, 15467533, 15487019, 15506497, 15526001, 15545459, 15564937, 15584417, + 15603901, 15623383, 15642881, 15662357, 15681823, 15701311, 15720779, 15740261, 15759763, + 15779221, 15798743, 15818197, 15837671, 15857161, 15876629, 15896113, 15915607, 15935077, + 15954563, 15974039, 15993521, 16012987, 16032469, 16051949, 16071437, 16090931, 16110401, + 16129873, 16149409, 16168861, 16188313, 16207843, 16227287, 16246753, 16266251, 16285729, + 16305203, 16324691, 16344179, 16363651, 16383137, 16402609, 16422079, 16441583, 16461043, + 16480537, 16500007, 16519487, 16538969, 16558453, 16577927, 16597433, 16616903, 16636369, + 16655851, 16675333, 16694809, 16714303, 16733767, 16753249, 16772741, 16792229, 16811699, + 16831201, 16850657, 16870129, 16889617, 16909091, 16928579, 16948073, 16967539, 16987049, + 17006519, 17025977, 17045459, 17064941, 17084443, 17103901, 17123383, 17142859, 17162363, + 17181821, 17201323, 17220781, 17240263, 17259773, 17279243, 17298733, 17318201, 17337673, + 17357143, 17376629, 17396107, 17415613, 17435083, 17454587, 17474029, 17493521, 17512991, + 17532467, 17551979, 17571431, 17590931, 17610401, 17629897, 17649353, 17668877, 17688317, + 17707819, 17727299, 17746801, 17766239, 17785717, 17805209, 17824753, 17844157, 17863639, + 17883119, 17902597, 17922089, 17941571, 17961043, 17980519, 18000041, 18019489, 18038963, + 18058459, 18077951, 18097411, 18116911, 18136369, 18155873, 18175349, 18194809, 18214297, + 18233783, 18253259, 18272731, 18292237, 18311693, 18331177, 18350653, 18370133, 18389617, + 18409109, 18428581, 18448051, 18467549, 18487037, 18506503, 18525989, 18545467, 18564941, + 18584431, 18603931, 18623377, 18642859, 18662353, 18681833, 18701341, 18720787, 18740279, + 18759749, 18779221, 18798707, 18818207, 18837673, 18857149, 18876631, 18896113, 18915599, + 18935089, 18954557, 18974029, 18993523, 19013017, 19032499, 19051961, 19071431, 19090909, + 19110407, 19129889, 19149353, 19168847, 19188313, 19207801, 19227281, 19246783, 19266239, + 19285729, 19305229, 19324681, 19344167, 19363637, 19383127, 19402601, 19422113, 19441573, + 19461041, 19480543, 19500017, 19519481, 19538963, 19558447, 19577927, 19597421, 19616899, + 19636373, 19655879, 19675333, 19694809, 19714297, 19733797, 19753247, 19772789, 19792207, + 19811719, 19831181, 19850657, 19870129, 19889629, 19909103, 19928581, 19948057, 19967569, + 19987013, 20006507, 20025989, 20045461, 20064953, 20084419, 20103917, 20123377, 20142887, + 20162339, 20181823, 20201303, 20220791, 20240261, 20259749, 20279227, 20298701, 20318189, + 20337677, 20357147, 20376637, 20396113, 20415599, 20435099, 20454547, 20474053, 20493521, + 20512991, 20532511, 20551961, 20571431, 20590919, 20610391, 20629883, 20649353, 20668831, + 20688329, 20707801, 20727281, 20746777, 20766241, 20785733, 20805199, 20824691, 20844167, + 20863637, 20883143, 20902633, 20922091, 20941573, 20961041, 20980537, 21000037, 21019487, + 21038971, 21058447, 21077929, 21097421, 21116911, 21136369, 21155861, 21175331, 21194819, + 21214309, 21233813, 21253277, 21272731, 21292231, 21311701, 21331181, 21350677, 21370133, + 21389629, 21409117, 21428579, 21448051, 21467609, 21487051, 21506519, 21525979, 21545471, + 21564941, 21584417, 21603899, 21623389, 21642857, 21662339, 21681833, 21701371, 21720779, + 21740281, 21759757, 21779231, 21798703, 21818201, 21837677, 21857161, 21876623, 21896167, + 21915611, 21935071, 21954547, 21974033, 21993527, 22013021, 22032487, 22051949, 22071431, + 22090931, 22110401, 22129901, 22149353, 22168831, 22188317, 22207793, 22227277, 22246769, + 22266247, 22285721, 22305251, 22324699, 22344163, 22363643, 22383143, 22402619, 22422089, + 22441567, 22461067, 22480537, 22500011, 22519481, 22538963, 22558447, 22577923, 22597423, + 22616903, 22636363, 22655861, 22675343, 22694809, 22714327, 22733797, 22753253, 22772731, + 22792271, 22811689, 22831169, 22850657, 22870139, 22889617, 22909097, 22928579, 22948127, + 22967557, 22987037, 23006497, 23025997, 23045467, 23064941, 23084417, 23103907, 23123381, + 23142859, 23162393, 23181883, 23201317, 23220781, 23240279, 23259749, 23279231, 23298713, + 23318201, 23337667, 23357149, 23376623, 23396119, 23415631, 23435077, 23454553, 23474029, + 23493539, 23513003, 23532493, 23551949, 23571463, 23590933, 23610413, 23629873, 23649377, + 23668837, 23688311, 23707807, 23727287, 23746769, 23766241, 23785721, 23805203, 23824679, + 23844173, 23863643, 23883121, 23902633, 23922079, 23941573, 23961053, 23980547, + ] +} diff --git a/pxtcompiler/emitter/service.ts b/pxtcompiler/emitter/service.ts index 98f3c5bf3b7e..0d584fc4cca4 100644 --- a/pxtcompiler/emitter/service.ts +++ b/pxtcompiler/emitter/service.ts @@ -348,12 +348,28 @@ namespace ts.pxtc { if (si.attributes.block) { locStrings[`${si.qName}|block`] = si.attributes.block; const comp = pxt.blocks.compileInfo(si); + const paramsWithLabels = comp.thisParameter ? [comp.thisParameter, ...comp.parameters] : comp.parameters; + for (const param of paramsWithLabels) { + if (param.labelLocalizationKey && param.label) { + locStrings[param.labelLocalizationKey] = param.label; + } + + const defaultString = pxt.blocks.parameterDefaultToLocalizationString(param.defaultValue, param.type); + const defaultLocalizationKey = pxt.blocks.parameterDefaultLocalizationKey(si.qName, param.actualName); + if (defaultLocalizationKey && defaultString !== undefined) { + locStrings[defaultLocalizationKey] = defaultString; + } + } if (comp.handlerArgs?.length) { for (const arg of comp.handlerArgs) { locStrings[arg.localizationKey] = arg.name; } } } + + if (si.attributes.ariaLabel) { + locStrings[`${si.qName}|ariaLabel`] = si.attributes.ariaLabel; + } } const mapLocs = (m: pxt.Map, name: string) => { if (!options.locs) return; @@ -373,6 +389,7 @@ namespace ts.pxtc { if (options.locs) enumMembers.forEach(em => { if (em.attributes.block) locStrings[`${em.qName}|block`] = em.attributes.block; + if (em.attributes.ariaLabel) locStrings[`${em.qName}|ariaLabel`] = em.attributes.ariaLabel; if (em.attributes.jsDoc) locStrings[em.qName] = em.attributes.jsDoc; }); mapLocs(locStrings, ""); @@ -723,6 +740,8 @@ namespace ts.pxtc.service { // don't export, fuse is internal only let lastFuse: Fuse; let lastProjectFuse: Fuse; + let lastHomeFuse: Fuse; + let lastHomeFuseKey: string; export let builtinItems: SearchInfo[]; export let blockDefinitions: pxt.Map; export let tbSubset: pxt.Map; @@ -771,6 +790,23 @@ namespace ts.pxtc.service { return newOpts } + export interface HomeSearchInfo { + id: string; + name: string; + description?: string; + tags?: string; + searchTerms?: string; + } + + export interface HomeSearchOptions { + term: string; + entries: HomeSearchInfo[]; + } + + export interface OpArg { + homeSearch?: HomeSearchOptions; + } + export interface ServiceOps { reset: () => void; setOptions: (v: OpArg) => void; @@ -796,6 +832,8 @@ namespace ts.pxtc.service { apiSearch: (v: OpArg) => SearchInfo[]; projectSearch: (v: OpArg) => ProjectSearchInfo[]; projectSearchClear: () => void; + homeSearch: (v: OpArg) => HomeSearchInfo[]; + homeSearchClear: () => void; }; export type OpRes = @@ -804,7 +842,7 @@ namespace ts.pxtc.service { | { words: number[]; } | KsDiagnostic[] | { formatted: string; pos: number; } - | ApisInfo | BlocksInfo | ProjectSearchInfo[] + | ApisInfo | BlocksInfo | ProjectSearchInfo[] | HomeSearchInfo[] | {}; export type OpError = { errorMessage: string }; @@ -1362,6 +1400,38 @@ namespace ts.pxtc.service { }, projectSearchClear: () => { lastProjectFuse = undefined; + }, + homeSearch: v => { + const search = v.homeSearch; + const searchSet = search.entries; + const searchKey = searchSet.map((h: HomeSearchInfo) => h.id).join("\n"); + + if (!lastHomeFuse || lastHomeFuseKey !== searchKey) { + const fuseOptions = { + shouldSort: true, + threshold: 0.4, + location: 0, + distance: 1000, + maxPatternLength: 16, + minMatchCharLength: 2, + findAllMatches: false, + caseSensitive: false, + keys: [ + { name: 'name', weight: 0.45 }, + { name: 'description', weight: 0.35 }, + { name: 'searchTerms', weight: 0.35 }, + { name: 'tags', weight: 0.15 }, + ] + }; + lastHomeFuse = new Fuse(searchSet, fuseOptions); + lastHomeFuseKey = searchKey; + } + + return lastHomeFuse.search(search.term); + }, + homeSearchClear: () => { + lastHomeFuse = undefined; + lastHomeFuseKey = undefined; } } @@ -1377,7 +1447,8 @@ namespace ts.pxtc.service { for (let k of Object.keys(newFS)) host.setFile(k, newFS[k]) // update version numbers res.fileSystem = U.flatClone(newFS) - if (res.diagnostics.length == 0) { + if (!hasBlockingDiagnostics(host.opts, res.diagnostics)) { + const conversionDiagnostics = res.diagnostics host.opts.skipPxtModulesEmit = false host.opts.skipPxtModulesTSC = false const currKey = host.opts.target.isNative ? "native" : "js" @@ -1396,8 +1467,9 @@ namespace ts.pxtc.service { sourceMap: res.sourceMap, fileSystem: res.fileSystem, ...ts2asm, + diagnostics: conversionDiagnostics.concat(ts2asm.diagnostics), } - if (res.needsFullRecompile || ((!res.success || res.diagnostics.length) && host.opts.clearIncrBuildAndRetryOnError)) { + if (res.needsFullRecompile || ((!res.success || hasBlockingDiagnostics(host.opts, res.diagnostics)) && host.opts.clearIncrBuildAndRetryOnError)) { pxt.debug("triggering full recompile") pxt.tickEvent("compile.fullrecompile") host.opts.skipPxtModulesEmit = false; @@ -1405,6 +1477,7 @@ namespace ts.pxtc.service { res = { sourceMap: res.sourceMap, ...ts2asm, + diagnostics: conversionDiagnostics.concat(ts2asm.diagnostics), } } if (res.diagnostics.every(d => !isPxtModulesFilename(d.fileName))) diff --git a/pxtcompiler/simpledriver.ts b/pxtcompiler/simpledriver.ts index 17cba6698094..b8e2537d44bc 100644 --- a/pxtcompiler/simpledriver.ts +++ b/pxtcompiler/simpledriver.ts @@ -52,8 +52,8 @@ namespace pxt { return this.loadAsync(repopath, tag, "pxt", (r, t) => this.db.loadConfigAsync(r, t)); } - loadPackageAsync(repopath: string, tag: string): Promise { - return this.loadAsync(repopath, tag, "pkg", (r, t) => this.db.loadPackageAsync(r, t)); + loadPackageAsync(repopath: string, tag: string, fallbackPackageFiles?: pxt.Map): Promise { + return this.loadAsync(repopath, tag, "pkg", (r, t) => this.db.loadPackageAsync(r, t, fallbackPackageFiles)); } loadTutorialMarkdown(repopath: string, tag?: string): Promise { diff --git a/pxteditor/editorcontroller.ts b/pxteditor/editorcontroller.ts index 55524047f6a6..9ba696d08f3f 100644 --- a/pxteditor/editorcontroller.ts +++ b/pxteditor/editorcontroller.ts @@ -267,8 +267,8 @@ export function bindEditorMessages(getEditorAsync: () => Promise) .then(() => projectView.toggleGreenScreen()); } case "togglekeyboardcontrols": { - return Promise.resolve() - .then(() => projectView.toggleAccessibleBlocks("editormessage")); + // Keyboard controls are always on; message kept for API compatibility. + return Promise.resolve(); } case "print": { return Promise.resolve() @@ -284,7 +284,7 @@ export function bindEditorMessages(getEditorAsync: () => Promise) versions: pxt.appTarget.versions, locale: ts.pxtc.Util.userLanguage(), availableLocales: pxt.appTarget.appTheme.availableLocales, - keyboardControls: projectView.isAccessibleBlocks() + keyboardControls: true } as pxt.editor.InfoMessage; }); } diff --git a/pxtlib/auth.ts b/pxtlib/auth.ts index 5e9987c01c29..a234d859e8d6 100644 --- a/pxtlib/auth.ts +++ b/pxtlib/auth.ts @@ -62,7 +62,7 @@ namespace pxt.auth { export type UserPreferences = { language?: string; highContrast?: boolean; - accessibleBlocks?: boolean; + screenReaderMode?: boolean; colorThemeIds?: ColorThemeIdsState; reader?: string; skillmap?: UserSkillmapState; @@ -73,7 +73,7 @@ namespace pxt.auth { export const DEFAULT_USER_PREFERENCES: () => UserPreferences = () => ({ language: pxt.appTarget.appTheme.defaultLocale, highContrast: false, - accessibleBlocks: false, + screenReaderMode: false, colorThemeIds: {}, // Will lookup pxt.appTarget.appTheme.defaultColorTheme for active target reader: "", skillmap: { mapProgress: {}, completedTags: {} }, diff --git a/pxtlib/blocks.ts b/pxtlib/blocks.ts index 172ebfd46aea..751d45484ebd 100644 --- a/pxtlib/blocks.ts +++ b/pxtlib/blocks.ts @@ -67,6 +67,10 @@ namespace pxt.blocks { // For example: parameterName.shadowOptions.columns=5 shadowOptions?: Map; + // User-friendly label for screen reader descriptions of this parameter. + label?: string; + labelLocalizationKey?: string; + // The max and min for numerical inputs (if specified) range?: { min: number, max: number }; } @@ -87,6 +91,28 @@ namespace pxt.blocks { localizationKey: string; } + export function parameterDefaultLocalizationKey(qName: string, actualName: string) { + return qName ? `${qName}|param|${actualName}|defl` : undefined; + } + + export function parameterDefaultToLocalizationString(defaultValue: string, type?: string) { + if (!defaultValue) return undefined; + if (type === "string" && defaultValue.charAt(0) !== "\"") return defaultValue; + if (defaultValue.charAt(0) !== "\"") return undefined; + + try { + const value = JSON.parse(defaultValue); + return typeof value === "string" ? value : undefined; + } + catch (e) { + return undefined; + } + } + + export function localizationStringToParameterDefault(value: string) { + return JSON.stringify(value); + } + // Information for blocks that compile to function calls but are defined by vanilla Blockly // and not dynamically by BlocklyLoader export const builtinFunctionInfo: pxt.Map<{ params: string[]; blockId: string; }> = { @@ -152,6 +178,7 @@ namespace pxt.blocks { const def = refMap[THIS_NAME] || defParameters[0]; const defName = def.name; const isVar = !def.shadowBlockId || def.shadowBlockId === "variables_get"; + const label = parameterLabel(defName, THIS_NAME); let defaultValue = fn.attributes.paramDefl[defName] || fn.attributes.paramDefl["this"]; @@ -171,6 +198,8 @@ namespace pxt.blocks { fieldEditor: fieldEditor(defName, THIS_NAME), fieldOptions: fieldOptions(defName, THIS_NAME), shadowOptions: shadowOptions(defName, THIS_NAME), + label, + labelLocalizationKey: parameterLabelLocalizationKey(THIS_NAME, label), }; } @@ -195,6 +224,7 @@ namespace pxt.blocks { const defName = def ? def.name : (bInfo ? bInfo.params[defIndex++] : p.name); const isVarOrArray = def && (def.shadowBlockId === "variables_get" || def.shadowBlockId == "lists_create_with"); + const label = parameterLabel(defName, p.name); (res.parameters as BlockParameter[]).push({ actualName: p.name, @@ -207,6 +237,8 @@ namespace pxt.blocks { fieldEditor: fieldEditor(defName, p.name), fieldOptions: fieldOptions(defName, p.name), shadowOptions: shadowOptions(defName, p.name), + label, + labelLocalizationKey: parameterLabelLocalizationKey(p.name, label), range }); } @@ -245,6 +277,15 @@ namespace pxt.blocks { return fn.attributes.paramShadowOptions && (fn.attributes.paramShadowOptions[defName] || fn.attributes.paramShadowOptions[actualName]); } + + function parameterLabel(defName: string, actualName: string) { + const labels = fn.attributes.paramLabels; + return labels && (labels[actualName] !== undefined ? labels[actualName] : labels[defName]); + } + + function parameterLabelLocalizationKey(actualName: string, label: string) { + return label && fn.qName ? `${fn.qName}|param|${actualName}|label` : undefined; + } } export function hasHandler(fn: pxtc.SymbolInfo) { diff --git a/pxtlib/browserutils.ts b/pxtlib/browserutils.ts index 2d4be765ed0a..58f81b2a0db1 100644 --- a/pxtlib/browserutils.ts +++ b/pxtlib/browserutils.ts @@ -136,6 +136,11 @@ namespace pxt.BrowserUtils { return typeof window != "undefined" && !!(window as any).pxtElectron; } + export function isPxtElectronWebUSBDeployEnabled(): boolean { + const pxtElectron = typeof window != "undefined" && (window as any).pxtElectron as pxt.electron.PxtElectron; + return !!pxtElectron?.capabilities?.webUSBDeploy; + } + export function isIpcRenderer(): boolean { return typeof window != "undefined" && !!(window as any).ipcRenderer; } @@ -1451,6 +1456,21 @@ namespace pxt.BrowserUtils { return url; } + export function getCopilotServerParam(): "ppe" | "prod" | undefined { + if (typeof window === "undefined") return undefined; + const query = pxt.Util.parseQueryString(window.location.search || ""); + const value = (query["useCopilotServer"] || "").toLowerCase(); + return value === "ppe" || value === "prod" ? value : undefined; + } + + export function appendCopilotServerQueryParam(url: string): string { + const value = getCopilotServerParam(); + if (!value) return url; + const params = new URLSearchParams(); + params.set("useCopilotServer", value); + return appendUrlQueryParams(url, params); + } + export function legacyCopyText(element: HTMLInputElement | HTMLTextAreaElement) { element.focus(); element.setSelectionRange(0, 9999); diff --git a/pxtlib/cpp.ts b/pxtlib/cpp.ts index c01c39ee6bbb..9da5f6212d39 100644 --- a/pxtlib/cpp.ts +++ b/pxtlib/cpp.ts @@ -164,6 +164,8 @@ namespace pxt.cpp { let disabledDeps = "" let mainDeps: Package[] = [] + mainPkg.loadConfig(true); + // order shouldn't matter for c++ compilation, // so use a stable order to prevent order changes from fetching a new hex file const mainPkgDeps = mainPkg.sortedDeps(true) @@ -1514,6 +1516,16 @@ namespace pxt.hexloader { }) } + export function stringifyHexInfoForCache(hexInfo: pxtc.HexInfo) { + if (!hexInfo?.hex) return undefined; + + const cachedMeta = { + ...hexInfo, + hex: compressHex(hexInfo.hex) + }; + return JSON.stringify(cachedMeta); + } + export function getHexInfoAsync(host: Host, extInfo: pxtc.ExtensionInfo, cloudModule?: any): Promise { if (!extInfo.sha) return Promise.resolve(null) @@ -1543,10 +1555,7 @@ namespace pxt.hexloader { else { return downloadHexInfoAsync(extInfo) .then(meta => { - let origHex = meta.hex - meta.hex = compressHex(meta.hex) - let store = JSON.stringify(meta) - meta.hex = origHex + let store = stringifyHexInfoForCache(meta) return storeWithLimitAsync(host, "hex-keys", key, store) .then(() => meta) }).catch(e => { diff --git a/pxtlib/github.ts b/pxtlib/github.ts index a10778b0f383..88d0887aa430 100644 --- a/pxtlib/github.ts +++ b/pxtlib/github.ts @@ -147,11 +147,24 @@ namespace pxt.github { files: Map; } + function copyCachedPackage(cachedPackage: CachedPackage): CachedPackage { + return { + files: { ...cachedPackage.files } + }; + } + + function cachedPackageFromFallback(fallbackPackageFiles?: pxt.Map): CachedPackage { + if (!fallbackPackageFiles) return undefined; + return { + files: { ...fallbackPackageFiles } + }; + } + // caching export interface IGithubDb { latestVersionAsync(repopath: string, config: PackagesConfig): Promise; loadConfigAsync(repopath: string, tag: string): Promise; - loadPackageAsync(repopath: string, tag: string): Promise; + loadPackageAsync(repopath: string, tag: string, fallbackPackageFiles?: pxt.Map): Promise; loadTutorialMarkdown(repopath: string, tag?: string): Promise; cacheReposAsync(response: GHTutorialResponse): Promise; } @@ -273,7 +286,7 @@ namespace pxt.github { return resolved } - async loadPackageAsync(repopath: string, tag: string): Promise { + async loadPackageAsync(repopath: string, tag: string, fallbackPackageFiles?: pxt.Map): Promise { if (!tag) { pxt.debug(`load pkg: default to master branch`) tag = "master"; @@ -282,48 +295,49 @@ namespace pxt.github { // try using github proxy first if (hasProxy()) { try { - return await this.proxyWithCdnLoadPackageAsync(repopath, tag).then(v => U.clone(v)); + return await this.proxyWithCdnLoadPackageAsync(repopath, tag).then(copyCachedPackage); } catch (e) { ghProxyHandleException(e); } } // try using github apis - return await this.githubLoadPackageAsync(repopath, tag); + return await this.githubLoadPackageAsync(repopath, tag, fallbackPackageFiles); } - private githubLoadPackageAsync(repopath: string, tag: string): Promise { - return tagToShaAsync(repopath, tag) - .then(sha => { - // cache lookup - const key = `${repopath}/${sha}`; - let res = this.packages[key]; - if (res) { - pxt.debug(`github cache ${repopath}/${tag}/text`); - return Promise.resolve(U.clone(res)); - } + private async githubLoadPackageAsync(repopath: string, tag: string, fallbackPackageFiles?: pxt.Map): Promise { + try { + const sha = await tagToShaAsync(repopath, tag); + + // cache lookup + const key = `${repopath}/${sha}`; + let res = this.packages[key]; + if (res) { + pxt.debug(`github cache ${repopath}/${tag}/text`); + return copyCachedPackage(res); + } - // load and cache - pxt.log(`Downloading ${repopath}/${tag} -> ${sha}`) - return downloadTextAsync(repopath, sha, pxt.CONFIG_NAME) - .then(pkg => { - const current: CachedPackage = { - files: {} - } - current.files[pxt.CONFIG_NAME] = pkg - const cfg: pxt.PackageConfig = JSON.parse(pkg) - return U.promiseMapAll(pxt.allPkgFiles(cfg).slice(1), - fn => downloadTextAsync(repopath, sha, fn) - .then(text => { - current.files[fn] = text - })) - .then(() => { - // cache! - this.packages[key] = current; - return U.clone(current); - }) - }) - }) + // load and cache + pxt.log(`Downloading ${repopath}/${tag} -> ${sha}`) + const pkg = await downloadTextAsync(repopath, sha, pxt.CONFIG_NAME); + const current: CachedPackage = { + files: {} + } + current.files[pxt.CONFIG_NAME] = pkg + const cfg: pxt.PackageConfig = JSON.parse(pkg) + await U.promiseMapAll(pxt.allPkgFiles(cfg).slice(1), async fn => { + current.files[fn] = await downloadTextAsync(repopath, sha, fn); + }); + + // cache! + this.packages[key] = current; + return copyCachedPackage(current); + } + catch (e) { + const fallbackPackage = cachedPackageFromFallback(fallbackPackageFiles); + if (fallbackPackage) return fallbackPackage; + throw e; + } } async loadTutorialMarkdown(repopath: string, tag?: string) { @@ -731,7 +745,7 @@ namespace pxt.github { return await db.loadConfigAsync(repopath, tag) } - export async function downloadPackageAsync(repoWithTag: string, config: pxt.PackagesConfig): Promise { + export async function downloadPackageAsync(repoWithTag: string, config: pxt.PackagesConfig, fallbackPackageFiles?: pxt.Map): Promise { const p = parseRepoId(repoWithTag) if (!p) { pxt.log('Unknown GitHub syntax'); @@ -746,9 +760,16 @@ namespace pxt.github { // always try to upgrade unbound versions if (!p.tag) { - p.tag = await db.latestVersionAsync(p.slug, config) + try { + p.tag = await db.latestVersionAsync(p.slug, config) + } + catch (e) { + const fallbackPackage = cachedPackageFromFallback(fallbackPackageFiles); + if (fallbackPackage) return fallbackPackage; + throw e; + } } - const cached = await db.loadPackageAsync(p.fullName, p.tag) + const cached = await db.loadPackageAsync(p.fullName, p.tag, fallbackPackageFiles) const dv = upgradedDisablesVariants(config, repoWithTag) if (dv) { const cfg = Package.parseAndValidConfig(cached.files[pxt.CONFIG_NAME]) @@ -775,7 +796,11 @@ namespace pxt.github { return { version, config }; } - export async function cacheProjectDependenciesAsync(cfg: pxt.PackageConfig): Promise { + export async function cacheProjectDependenciesAsync(cfg: pxt.PackageConfig, fallbackPackageFilesById?: pxt.Map>): Promise { + await cacheProjectDependenciesCoreAsync(cfg, {}, fallbackPackageFilesById); + } + + async function cacheProjectDependenciesCoreAsync(cfg: pxt.PackageConfig, checked: pxt.Map, fallbackPackageFilesById?: pxt.Map>): Promise { const ghExtensions = Object.keys(cfg.dependencies) ?.filter(dep => isGithubId(cfg.dependencies[dep])); @@ -786,10 +811,15 @@ namespace pxt.github { ghExtensions.map( async ext => { const extSrc = cfg.dependencies[ext]; - const ghPkg = await downloadPackageAsync(extSrc, pkgConfig); + if (checked[extSrc]) return; + checked[extSrc] = true; + + const ghPkg = await downloadPackageAsync(extSrc, pkgConfig, fallbackPackageFilesById?.[extSrc]); if (!ghPkg) { throw new Error(lf("Cannot load extension {0} from {1}", ext, extSrc)); } + const ghPkgCfg = Package.parseAndValidConfig(ghPkg.files[pxt.CONFIG_NAME]); + if (ghPkgCfg) await cacheProjectDependenciesCoreAsync(ghPkgCfg, checked, fallbackPackageFilesById); } ) ); @@ -1208,12 +1238,12 @@ namespace pxt.github { return p ? "github:" + (ignoreCase ? p.fullName : p.fullName.toLowerCase()) + (p.tag ? `#${p.tag}` : '') : undefined; } - export function normalizeRepoId(id: string, defaultTag?: string) { + export function normalizeRepoId(id: string, defaultTag?: string, ignoreCase = false) { const gid = parseRepoId(id); if (!gid) return undefined; if (!gid.tag && defaultTag) gid.tag = defaultTag - return stringifyRepo(gid); + return stringifyRepo(gid, ignoreCase); } export function join(...parts: string[]) { diff --git a/pxtlib/main.ts b/pxtlib/main.ts index c43fa9e77506..e1566fa2d63a 100644 --- a/pxtlib/main.ts +++ b/pxtlib/main.ts @@ -321,6 +321,24 @@ namespace pxt { pxt.debug(`hwVariant: ${hwVariant} (${hwName})`) } + /** + * Whether the current target compiles user code to a file the user can + * download (hex, PNG or UF2). + */ + function compilesToDownloadableFile(): boolean { + const compile = pxt.appTarget.compile; + return !!(compile?.hasHex || compile?.saveAsPNG || compile?.useUF2); + } + + /** + * Whether a download action is available, either because the target + * produces a downloadable file or an extension overrides the download + * button. + */ + export function canDownload(): boolean { + return compilesToDownloadableFile() || !!pxt.commands.onDownloadButtonClick; + } + export function hasHwVariants(): boolean { return !!pxt.appTarget.variants && Object.keys(pxt.appTarget.bundledpkgs).some(pkg => /^hw---/.test(pkg)); @@ -523,6 +541,7 @@ namespace pxt { export const TUTORIAL_CODE_STOP = "_onCodeStop.ts"; export const TUTORIAL_INFO_FILE = "tutorial-info-cache.json"; export const TUTORIAL_CUSTOM_TS = "tutorial.custom.ts"; + export const PACKAGED_EXTENSIONS = "_packaged-extensions.json"; export const BREAKPOINT_TABLET = 991; // TODO (shakao) revisit when tutorial stuff is more settled export const PALETTES_FILE = "_palettes.json"; export const HISTORY_FILE = "_history"; diff --git a/pxtlib/melody-editor/melodyArray.ts b/pxtlib/melody-editor/melodyArray.ts index 25edac572480..9d92801e68de 100644 --- a/pxtlib/melody-editor/melodyArray.ts +++ b/pxtlib/melody-editor/melodyArray.ts @@ -143,7 +143,7 @@ namespace pxtmelody { export function noteToRow(note: string): number { let rowNum: number = -1; - switch (note) { + switch (note.toUpperCase()) { case "C5": rowNum = 0; break; case "B": rowNum = 1; break; case "A": rowNum = 2; break; diff --git a/pxtlib/melody-editor/melodyGallery.ts b/pxtlib/melody-editor/melodyGallery.ts index eb4a8c4418aa..066f5d95cc73 100644 --- a/pxtlib/melody-editor/melodyGallery.ts +++ b/pxtlib/melody-editor/melodyGallery.ts @@ -24,12 +24,15 @@ namespace pxtmelody { private focusHandler: (e: FocusEvent) => {} | undefined; private blurHandler: (e: FocusEvent) => {} | undefined; - constructor() { + + constructor(melodyGalleryDivId: string) { this.containerDiv = document.createElement("div"); - this.containerDiv.setAttribute("id", "melody-editor-gallery-outer"); + this.containerDiv.setAttribute("id", `${melodyGalleryDivId}-outer`); + this.containerDiv.setAttribute("role", "tabpanel"); + this.containerDiv.setAttribute("aria-labelledby", `${melodyGalleryDivId}-control`); this.contentDiv = document.createElement("div"); - this.contentDiv.setAttribute("id", "melody-editor-gallery"); - this.contentDiv.setAttribute("role", "menu"); + this.contentDiv.setAttribute("id", melodyGalleryDivId); + this.contentDiv.setAttribute("role", "grid"); this.contentDiv.setAttribute("tabindex", "0"); this.keyDownHandler = this.keyDownListener.bind(this); @@ -234,15 +237,18 @@ namespace pxtmelody { protected mkButton(sample: pxtmelody.MelodyInfo, i: number, width: string, height: string) { const outer = mkElement("div", { className: "melody-gallery-button melody-editor-card", - id: `:${i}` + id: `melody-gallery:row-${i}`, + role: "row" }); const icon = mkElement("i", { className: "music icon melody-icon" }); + addAriaHidden(icon); const label = mkElement("div", { - className: "melody-editor-text" + className: "melody-editor-text", + "aria-hidden": "true", }); label.innerText = sample.name; @@ -251,12 +257,17 @@ namespace pxtmelody { const leftButton = mkElement("div", { className: "melody-editor-button left-button", - role: "menuitem", - title: sample.name, + role: "gridcell", tabIndex: -1, - id: getCellId(i, 0) - }, () => this.handleSelection(sample)) + id: getCellId(0, i) + }, () => this.handleSelection(sample)); + + const leftButtonAriaText = mkElement("p", { + className: "sr-only" + }) + leftButtonAriaText.textContent = lf("Select {0} melody", sample.name) + leftButton.appendChild(leftButtonAriaText); leftButton.appendChild(icon); leftButton.appendChild(label); leftButton.appendChild(preview); @@ -267,18 +278,24 @@ namespace pxtmelody { const rightButton = mkElement("div", { className: "melody-editor-button right-button", - role: "menuitem", - title: lf("Preview {0}", sample.name), + role: "gridcell", tabIndex: -1, - id: getCellId(i,1) + id: getCellId(1, i) }, () => this.togglePlay(sample, i)); const playIcon = mkElement("i", { className: "play icon" }); + addAriaHidden(playIcon); this.playIcons[i] = playIcon; + const rightButtonAriaText = mkElement("p", { + className: "sr-only" + }) + rightButtonAriaText.textContent = lf("Preview {0} melody", sample.name) + + rightButton.appendChild(rightButtonAriaText); rightButton.appendChild(playIcon); outer.appendChild(rightButton); @@ -415,4 +432,6 @@ namespace pxtmelody { } } -const getCellId = (x: number, y: number) => `:${x}-${y === 0 ? "selection" : "preview"}`; +const getCellId = (x: number, y: number) => `melody-gallery-cell:${y}-${x === 0 ? "selection" : "preview"}`; + +const addAriaHidden = (el: HTMLElement) => el.ariaHidden = "true"; diff --git a/pxtlib/music.ts b/pxtlib/music.ts index eb2db98cc1a2..6a3f4045f26c 100644 --- a/pxtlib/music.ts +++ b/pxtlib/music.ts @@ -32,6 +32,7 @@ namespace pxt.assets.music { * 5 measures * 6 number of tracks * ...tracks + * ...track velocities * * track(6 + instrument length + note length bytes) * 0 id @@ -83,13 +84,24 @@ namespace pxt.assets.music { * 0 = normal * 1 = flat * 2 = sharp + * + * track velocity + * 0 track id + * 1...velocities + * + * velocty + * 1 byte */ function encodeSong(song: Song) { const encodedTracks = song.tracks .filter((track) => track.notes.length > 0) .map(encodeTrack); - const trackLength = encodedTracks.reduce((d, c) => c.length + d, 0); + const encodedTrackVelocities = song.tracks + .map(encodeTrackVelocity) + .filter((v): v is Uint8Array => !!v); + + const trackLength = (encodedTracks.concat(encodedTrackVelocities)).reduce((d, c) => c.length + d, 0); const out = new Uint8Array(7 + trackLength); out[0] = 0; // encoding version @@ -105,6 +117,10 @@ namespace pxt.assets.music { current += track.length; } + for (const trackVelocity of encodedTrackVelocities) { + out.set(trackVelocity, current); + current += trackVelocity.length; + } return out; } @@ -181,6 +197,17 @@ namespace pxt.assets.music { return encodeMelodicTrack(track); } + function encodeTrackVelocity(track: Track) { + if (!track.notes.some(note => note.velocity !== undefined && note.velocity < 128)) return undefined; + + const out = new Uint8Array(1 + track.notes.length); + out[0] = track.id; + for (let i = 0; i < track.notes.length; i++) { + out[1 + i] = track.notes[i].velocity || 0; + } + return out; + } + function encodeMelodicTrack(track: Track) { const encodedInstrument = encodeInstrument(track.instrument); const encodedNotes = track.notes.map(note => encodeNoteEvent(note, track.instrument.octave, false)); @@ -248,14 +275,19 @@ namespace pxt.assets.music { tracks: [] }; + const numTracks = buf[6]; let current = 7; - while (current < buf.length) { + for (let i = 0; i < numTracks; i++) { const [track, pointer] = decodeTrack(buf, current); current = pointer; res.tracks.push(track); } + while (current < buf.length) { + current = decodeTrackVelocity(buf, res.tracks, current); + } + return res; } @@ -278,11 +310,11 @@ namespace pxt.assets.music { }, ampLFO: { frequency: buf[offset + 21], - amplitude: get16BitNumber(buf, 22) + amplitude: get16BitNumber(buf, offset + 22) }, pitchLFO: { frequency: buf[offset + 24], - amplitude: get16BitNumber(buf, 25) + amplitude: get16BitNumber(buf, offset + 25) }, octave: buf[offset + 27] } @@ -296,6 +328,16 @@ namespace pxt.assets.music { return decodeMelodicTrack(buf, offset); } + function decodeTrackVelocity(buf: Uint8Array, tracks: Track[], offset: number): number { + const trackId = buf[offset]; + const track = tracks.find(t => t.id === trackId); + if (!track) throw new Error(`Track with id ${trackId} not found`); + for (let i = 0; i < track.notes.length; i++) { + track.notes[i].velocity = buf[offset + i + 1]; + } + return offset + track.notes.length + 1; + } + function decodeDrumInstrument(buf: Uint8Array, offset: number): DrumInstrument { const res: DrumInstrument = { startFrequency: get16BitNumber(buf, offset + 1), @@ -460,7 +502,12 @@ namespace pxt.assets.music { song.tracks = base.tracks.map((track, index) => { const existing = song.tracks.find(t => t.id === index); - if (existing) track.notes = existing.notes; + if (existing) { + track.notes = existing.notes; + if (track.instrument) { + track.instrument.octave = existing.instrument?.octave || track.instrument.octave; + } + } return track; }) } @@ -709,7 +756,7 @@ namespace pxt.assets.music { }, drums: [ { - /* neutral kick */ + name: lf("neutral kick"), startFrequency: 100, startVolume: 1024, steps: [ @@ -728,7 +775,7 @@ namespace pxt.assets.music { ] }, { - /* punchy kick */ + name: lf("punchy kick"), startFrequency: 200, startVolume: 1024, steps: [{ @@ -740,7 +787,7 @@ namespace pxt.assets.music { }, { - /* booming kick */ + name: lf("booming kick"), startFrequency: 100, startVolume: 1024, steps: [{ @@ -753,7 +800,7 @@ namespace pxt.assets.music { { - /* snare 1 */ + name: lf("snare 1"), startFrequency: 175, startVolume: 1024, steps: [ @@ -785,7 +832,7 @@ namespace pxt.assets.music { }, { - /* snare 2 */ + name: lf("snare 2"), startFrequency: 220, startVolume: 1024, steps: [ @@ -818,7 +865,7 @@ namespace pxt.assets.music { { - /* hat 1 */ + name: lf("hat 1"), startFrequency: 400, startVolume: 500, steps: [ @@ -838,7 +885,7 @@ namespace pxt.assets.music { }, { - /* hat 2 */ + name: lf("hat 2"), startFrequency: 400, startVolume: 0, steps: [ @@ -865,7 +912,7 @@ namespace pxt.assets.music { { - /* hat 3 */ + name: lf("hat 3"), startFrequency: 400, startVolume: 0, steps: [ @@ -897,7 +944,7 @@ namespace pxt.assets.music { }, { - /* hat 4 */ + name: lf("hat 4"), startFrequency: 400, startVolume: 0, steps: [ @@ -929,7 +976,7 @@ namespace pxt.assets.music { }, { - /* double hat */ + name: lf("double hat"), startFrequency: 3500, startVolume: 1024, steps: [ @@ -967,7 +1014,7 @@ namespace pxt.assets.music { }, { - /* metallic */ + name: lf("metallic"), startFrequency: 2000, startVolume: 1024, steps: [ @@ -987,7 +1034,7 @@ namespace pxt.assets.music { }, { - /* low tom */ + name: lf("low tom"), startFrequency: 200, startVolume: 200, steps: [ @@ -1013,7 +1060,7 @@ namespace pxt.assets.music { }, { - /* mid tom */ + name: lf("mid tom"), startFrequency: 300, startVolume: 200, steps: [ @@ -1039,7 +1086,7 @@ namespace pxt.assets.music { }, { - /* hi tom */ + name: lf("hi tom"), startFrequency: 500, startVolume: 200, steps: [ @@ -1064,7 +1111,7 @@ namespace pxt.assets.music { ] }, { - /* lo tom 2 */ + name: lf("lo tom 2"), startFrequency: 200, startVolume: 1024, steps: [ @@ -1077,7 +1124,7 @@ namespace pxt.assets.music { ] }, { - /* mid tom 2 */ + name: lf("mid tom 2"), startFrequency: 300, startVolume: 1024, steps: [ @@ -1092,7 +1139,7 @@ namespace pxt.assets.music { { - /* hi tom 2 */ + name: lf("hi tom 2"), startFrequency: 400, startVolume: 1024, steps: [ @@ -1107,7 +1154,7 @@ namespace pxt.assets.music { { - /* thump 1 */ + name: lf("thump 1"), startFrequency: 200, startVolume: 1024, steps: [ @@ -1127,7 +1174,7 @@ namespace pxt.assets.music { }, { - /* thump 2 */ + name: lf("thump 2"), startFrequency: 450, startVolume: 1024, steps: [ @@ -1147,7 +1194,7 @@ namespace pxt.assets.music { }, { - /* cymbal */ + name: lf("cymbal"), startFrequency: 2500, startVolume: 1024, steps: [ @@ -1167,7 +1214,7 @@ namespace pxt.assets.music { }, { - /* crash 1 */ + name: lf("crash 1"), startFrequency: 3000, startVolume: 1024, steps: [ @@ -1187,7 +1234,7 @@ namespace pxt.assets.music { }, { - /* crash 2 */ + name: lf("crash 2"), startFrequency: 800, startVolume: 0, steps: [ @@ -1207,7 +1254,7 @@ namespace pxt.assets.music { }, { - /* crash 3 */ + name: lf("crash 3"), startFrequency: 400, startVolume: 0, steps: [ @@ -1227,7 +1274,7 @@ namespace pxt.assets.music { }, { - /* buzzer */ + name: lf("buzzer"), startFrequency: 2000, startVolume: 1024, steps: [ @@ -1244,7 +1291,8 @@ namespace pxt.assets.music { waveform: 16 } ] - },] + }, + ] } ] } diff --git a/pxtlib/package.ts b/pxtlib/package.ts index 7acf69aa5c1c..d89a7bac22a7 100644 --- a/pxtlib/package.ts +++ b/pxtlib/package.ts @@ -330,7 +330,7 @@ namespace pxt { }) } - loadConfig() { + loadConfig(skipSave = false) { if (this.level != 0 && this.invalid()) return; // don't try load invalid dependency @@ -340,7 +340,9 @@ namespace pxt { this.parseConfig(confStr); if (this.level != 0) this.installedVersion = this.version() - this.saveConfig() + if (!skipSave) { + this.saveConfig() + } } protected validateConfig() { @@ -1070,18 +1072,7 @@ namespace pxt { }) }))) .then(() => { - // Subcategories and groups are translated in their respective package, but are not really APIs so - // there's no way for the translation to be saved with a block. To work around this, we copy the - // translations to the editor translations. - const strings = U.getLocalizedStrings(); - Object.keys(loc).forEach((l) => { - if (U.startsWith(l, "{id:subcategory}") || U.startsWith(l, "{id:group}")) { - if (!strings[l]) { - strings[l] = loc[l]; - } - } - }); - U.setLocalizedStrings(strings); + U.copySubcategoryStrings(loc); return Promise.resolve(loc); }); @@ -1290,7 +1281,7 @@ namespace pxt { !opts.target.isNative if (!noFileEmbed) { - const files = await this.filesToBePublishedAsync(true) + const files = await this.filesToBePublishedAsync(true, !appTarget.compile.useUF2) const headerString = JSON.stringify({ name: this.config.name, comment: this.config.description, @@ -1366,24 +1357,66 @@ namespace pxt { return cfg; } - filesToBePublishedAsync(allowPrivate = false) { + async filesToBePublishedAsync(allowPrivate = false, packExternalExtensions = false): Promise> { const files: Map = {}; - return this.loadAsync() - .then(() => { - if (!allowPrivate && !this.config.public) - U.userError('Only packages with "public":true can be published') - const cfg = this.prepareConfigToBePublished(); - files[pxt.CONFIG_NAME] = pxt.Package.stringifyConfig(cfg); - for (let f of this.getFiles()) { - // already stored - if (f === pxt.CONFIG_NAME || f === HISTORY_FILE) continue; - let str = this.readFile(f) - if (str == null) - U.userError("referenced file missing: " + f) - files[f] = str + await this.loadAsync(); + + if (!allowPrivate && !this.config.public) + U.userError('Only packages with "public":true can be published') + + const cfg = this.prepareConfigToBePublished(); + files[pxt.CONFIG_NAME] = pxt.Package.stringifyConfig(cfg); + for (let f of this.getFiles()) { + // already stored + if (f === pxt.CONFIG_NAME || f === HISTORY_FILE) continue; + let str = this.readFile(f) + if (str == null) + U.userError("referenced file missing: " + f) + files[f] = str + } + + if (packExternalExtensions) { + const packagedExtensions = this.packagedExternalExtensions(); + if (Object.keys(packagedExtensions).length) + files[pxt.PACKAGED_EXTENSIONS] = JSON.stringify(packagedExtensions); + } + + return U.sortObjectFields(files) + } + + private packagedExternalExtensions(): pxt.Map> { + const packaged: pxt.Map> = {}; + const seen: pxt.Map = {}; + + const packDeps = (pkg: Package) => { + for (const dep of pkg.resolvedDependencies()) { + if (!dep) continue; + + const seenKey = `${dep.id}:${dep.version()}`; + if (seen[seenKey]) continue; + seen[seenKey] = true; + + if (dep.verProtocol() === "github" || dep.verProtocol() === "pub") { + const depFiles: pxt.Map = {}; + for (const fn of dep.getFiles()) { + if (fn === pxt.CONFIG_NAME || fn === HISTORY_FILE) continue; + const content = dep.readFile(fn); + if (content != null) depFiles[fn] = content; + } + depFiles[pxt.CONFIG_NAME] = pxt.Package.stringifyConfig(dep.config); + packaged[dep._verspec] = depFiles; + if (dep.version() !== dep._verspec) + packaged[dep.version()] = depFiles; + if (dep.verProtocol() === "pub") + packaged[dep.verArgument()] = depFiles; } - return U.sortObjectFields(files) - }) + + packDeps(dep); + } + } + + packDeps(this); + return packaged; } saveToJsonAsync(): Promise { diff --git a/pxtlib/round-matrix-editor/bitmap.ts b/pxtlib/round-matrix-editor/bitmap.ts deleted file mode 100644 index 6af04d7f6160..000000000000 --- a/pxtlib/round-matrix-editor/bitmap.ts +++ /dev/null @@ -1,204 +0,0 @@ -namespace pxtmatrix { - // These are the characters used to output literals (but we support aliases for some of these) - const hexChars = [".", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; - - export interface Coord { - x: number, - y: number - } - - /** - * 16-color sprite - */ - export class Bitmap { - protected buf: Uint8Array; - - constructor(public width: number, public height: number, public x0 = 0, public y0 = 0) { - this.buf = new Uint8Array(Math.ceil(width * height / 2)); - } - - set(col: number, row: number, value: number) { - if (col < this.width && row < this.height && col >= 0 && row >= 0) { - const index = this.coordToIndex(col, row); - this.setCore(index, value); - } - } - - get(col: number, row: number) { - if (col < this.width && row < this.height && col >= 0 && row >= 0) { - const index = this.coordToIndex(col, row); - return this.getCore(index); - } - return 0; - } - - copy(col = 0, row = 0, width = this.width, height = this.height): Bitmap { - const sub = new Bitmap(width, height); - sub.x0 = col; - sub.y0 = row; - for (let c = 0; c < width; c++) { - for (let r = 0; r < height; r++) { - sub.set(c, r, this.get(col + c, row + r)); - } - } - return sub; - } - - apply(change: Bitmap, transparent = false) { - let current: number; - for (let c = 0; c < change.width; c++) { - for (let r = 0; r < change.height; r++) { - current = change.get(c, r); - - if (!current && transparent) continue; - this.set(change.x0 + c, change.y0 + r, current); - } - } - } - - equals(other: Bitmap) { - if (this.width === other.width && this.height === other.height && this.x0 === other.x0 && this.y0 === other.y0 && this.buf.length === other.buf.length) { - for (let i = 0; i < this.buf.length; i++) { - if (this.buf[i] !== other.buf[i]) return false; - } - return true; - } - - return false; - } - - protected coordToIndex(col: number, row: number) { - return col + row * this.width; - } - - protected getCore(index: number) { - const cell = Math.floor(index / 2); - if (index % 2 === 0) { - return this.buf[cell] & 0xf; - } - else { - return (this.buf[cell] & 0xf0) >> 4; - } - } - - protected setCore(index: number, value: number) { - const cell = Math.floor(index / 2); - if (index % 2 === 0) { - this.buf[cell] = (this.buf[cell] & 0xf0) | (value & 0xf); - } - else { - this.buf[cell] = (this.buf[cell] & 0x0f) | ((value & 0xf) << 4); - } - } - } - - export class Bitmask { - protected mask: Uint8Array; - - constructor(public width: number, public height: number) { - this.mask = new Uint8Array(Math.ceil(width * height / 8)); - } - - set(col: number, row: number) { - const cellIndex = col + this.width * row; - const index = cellIndex >> 3; - const offset = cellIndex & 7; - this.mask[index] |= (1 << offset); - } - - get(col: number, row: number) { - const cellIndex = col + this.width * row; - const index = cellIndex >> 3; - const offset = cellIndex & 7; - return (this.mask[index] >> offset) & 1; - } - } - - export function resizeBitmap(img: Bitmap, width: number, height: number) { - const result = new Bitmap(width, height); - result.apply(img); - return result; - } - - export function imageLiteralToBitmap(text: string, defaultPattern?: string): Bitmap { - // Strip the tagged template string business and the whitespace. We don't have to exhaustively - // replace encoded characters because the compiler will catch any disallowed characters and throw - // an error before the decompilation happens. 96 is backtick and 9 is tab - text = text.replace(/[ `]|(?:`)|(?: )|(?:img)/g, "").trim(); - text = text.replace(/^["`\(\)]*/, '').replace(/["`\(\)]*$/, ''); - text = text.replace(/ /g, "\n"); - - if (!text && defaultPattern) - text = defaultPattern; - const rows = text.split("\\n"); - - // We support "ragged" sprites so not all rows will be the same length - const sprite: number[][] = []; - let spriteWidth = 0; - - for (let r = 0; r < rows.length; r++) { - const row = rows[r]; - const rowValues: number[] = []; - for (let c = 0; c < row.length; c++) { - // This list comes from libs/screen/targetOverrides.ts in pxt-arcade - // Technically, this could change per target. - switch (row[c]) { - case "0": case ".": rowValues.push(0); break; - case "1": case "#": rowValues.push(1); break; - case "2": case "T": rowValues.push(2); break; - case "3": case "t": rowValues.push(3); break; - case "4": case "N": rowValues.push(4); break; - case "5": case "n": rowValues.push(5); break; - case "6": case "G": rowValues.push(6); break; - case "7": case "g": rowValues.push(7); break; - case "8": rowValues.push(8); break; - case "9": rowValues.push(9); break; - case "a": case "A": case "R": rowValues.push(10); break; - case "b": case "B": case "P": rowValues.push(11); break; - case "c": case "C": case "p": rowValues.push(12); break; - case "d": case "D": case "O": rowValues.push(13); break; - case "e": case "E": case "Y": rowValues.push(14); break; - case "f": case "F": case "W": rowValues.push(15); break; - } - } - - if (rowValues.length) { - sprite.push(rowValues); - spriteWidth = Math.max(spriteWidth, rowValues.length); - } - } - - const spriteHeight = sprite.length; - - const result = new pxtmatrix.Bitmap(spriteWidth, spriteHeight) - - for (let r = 0; r < spriteHeight; r++) { - const row = sprite[r]; - for (let c = 0; c < spriteWidth; c++) { - if (c < row.length) { - result.set(c, r, row[c]); - } - else { - result.set(c, r, 0); - } - } - } - - return result; - } - - export function bitmapToImageLiteral(bitmap: Bitmap, fileType: pxt.editor.FileType): string { - let res = '`'; - if (bitmap) { - for (let r = 0; r < bitmap.height; r++) { - res += "\n" - for (let c = 0; c < bitmap.width; c++) { - res += hexChars[bitmap.get(c, r)] + " "; - } - } - } - - res += "`\n"; - return res; - } -} diff --git a/pxtlib/round-matrix-editor/buttons.ts b/pxtlib/round-matrix-editor/buttons.ts deleted file mode 100644 index 05ebf012a3c8..000000000000 --- a/pxtlib/round-matrix-editor/buttons.ts +++ /dev/null @@ -1,613 +0,0 @@ -namespace pxtmatrix { - import svg = pxt.svgUtil; - - export interface ButtonGroup { - root: svg.Group; - cx: number; - cy: number; - } - - const TOGGLE_WIDTH = 200; - const TOGGLE_HEIGHT = 40; - const TOGGLE_BORDER_WIDTH = 2; - const TOGGLE_CORNER_RADIUS = 4; - - const BUTTON_CORNER_RADIUS = 2; - const BUTTON_BORDER_WIDTH = 1; - const BUTTON_BOTTOM_BORDER_WIDTH = 2; - - export interface ToggleProps { - baseColor: string; - borderColor: string; - backgroundColor: string; - switchColor: string; - unselectedTextColor: string; - selectedTextColor: string; - - leftText: string; - leftIcon: string; - - rightText: string; - rightIcon: string; - } - - export class Toggle { - protected leftElement: svg.Group; - protected leftText: svg.Text; - protected rightElement: svg.Group; - protected rightText: svg.Text; - - protected switch: svg.Rect; - protected root: svg.Group; - protected props: ToggleProps; - - protected isLeft: boolean; - protected changeHandler: (left: boolean) => void; - - constructor(parent: svg.SVG, props: Partial) { - this.props = defaultColors(props); - this.root = parent.group(); - this.buildDom(); - this.isLeft = true; - } - - protected buildDom() { - // Our css minifier mangles animation names so they need to be injected manually - this.root.style().content(` - .toggle-left { - transform: translateX(0px); - animation: mvleft 0.2s 0s ease; - } - - .toggle-right { - transform: translateX(100px); - animation: mvright 0.2s 0s ease; - } - - @keyframes mvright { - 0% { - transform: translateX(0px); - } - 100% { - transform: translateX(100px); - } - } - - @keyframes mvleft { - 0% { - transform: translateX(100px); - } - 100% { - transform: translateX(0px); - } - } - `); - - - // The outer border has an inner-stroke so we need to clip out the outer part - // because SVG's don't support "inner borders" - const clip = this.root.def().create("clipPath", "sprite-editor-toggle-border") - .clipPathUnits(true); - - clip.draw("rect") - .at(0, 0) - .corners(TOGGLE_CORNER_RADIUS / TOGGLE_WIDTH, TOGGLE_CORNER_RADIUS / TOGGLE_HEIGHT) - .size(1, 1); - - // Draw the outer border - this.root.draw("rect") - .size(TOGGLE_WIDTH, TOGGLE_HEIGHT) - .fill(this.props.baseColor) - .stroke(this.props.borderColor, TOGGLE_BORDER_WIDTH * 2) - .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS) - .clipPath("url(#sprite-editor-toggle-border)"); - - - // Draw the background - this.root.draw("rect") - .at(TOGGLE_BORDER_WIDTH, TOGGLE_BORDER_WIDTH) - .size(TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH * 2, TOGGLE_HEIGHT - TOGGLE_BORDER_WIDTH * 2) - .fill(this.props.backgroundColor) - .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS); - - // Draw the switch - this.switch = this.root.draw("rect") - .at(TOGGLE_BORDER_WIDTH, TOGGLE_BORDER_WIDTH) - .size((TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH * 2) / 2, TOGGLE_HEIGHT - TOGGLE_BORDER_WIDTH * 2) - .fill(this.props.switchColor) - .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS); - - // Draw the left option - this.leftElement = this.root.group(); - this.leftText = mkText(this.props.leftText) - .appendClass("sprite-editor-text") - .fill(this.props.selectedTextColor); - this.leftElement.appendChild(this.leftText); - - // Draw the right option - this.rightElement = this.root.group(); - this.rightText = mkText(this.props.rightText) - .appendClass("sprite-editor-text") - .fill(this.props.unselectedTextColor); - this.rightElement.appendChild(this.rightText); - - this.root.onClick(() => this.toggle()); - } - - toggle(quiet = false) { - if (this.isLeft) { - this.switch.removeClass("toggle-left"); - this.switch.appendClass("toggle-right"); - this.leftText.fill(this.props.unselectedTextColor); - this.rightText.fill(this.props.selectedTextColor); - } - else { - this.switch.removeClass("toggle-right"); - this.switch.appendClass("toggle-left"); - this.leftText.fill(this.props.selectedTextColor); - this.rightText.fill(this.props.unselectedTextColor); - } - this.isLeft = !this.isLeft; - - if (!quiet && this.changeHandler) { - this.changeHandler(this.isLeft); - } - } - - onStateChange(handler: (left: boolean) => void) { - this.changeHandler = handler; - } - - layout() { - const centerOffset = (TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH * 2) / 4; - this.leftText.moveTo(centerOffset + TOGGLE_BORDER_WIDTH, TOGGLE_HEIGHT / 2); - this.rightText.moveTo(TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH - centerOffset, TOGGLE_HEIGHT / 2) - } - - translate(x: number, y: number) { - this.root.translate(x, y); - } - - height() { - return TOGGLE_HEIGHT; - } - - width() { - return TOGGLE_WIDTH; - } - } - - export class Button { - cx: number; - cy: number; - root: svg.Group; - clickHandler: () => void; - private _title: string; - private _shortcut: string; - - constructor(root: svg.Group, cx: number, cy: number) { - this.root = root; - this.cx = cx; - this.cy = cy; - this.root.onClick(() => this.clickHandler && this.clickHandler()); - this.root.appendClass("sprite-editor-button"); - } - - public getElement() { - return this.root; - } - - public addClass(className: string) { - this.root.appendClass(className); - } - - public removeClass(className: string) { - this.root.removeClass(className); - } - - public onClick(clickHandler: () => void) { - this.clickHandler = clickHandler; - } - - public translate(x: number, y: number) { - this.root.translate(x, y); - } - - public title(text: string) { - this._title = text; - this.setRootTitle(); - } - - public shortcut(text: string) { - this._shortcut = text; - this.setRootTitle(); - } - - private setRootTitle() { - this.root.title(this._title + (this._shortcut ? " (" + this._shortcut + ")" : "")); - } - - public setDisabled(disabled: boolean) { - this.editClass("disabled", disabled); - } - - public setSelected(selected: boolean) { - this.editClass("selected", selected); - } - - protected layout() { /* subclass */ } - - protected editClass(className: string, add: boolean) { - if (add) { - this.root.appendClass(className); - } - else { - this.root.removeClass(className); - } - } - } - - export class TextButton extends Button { - protected textEl: svg.Text; - - constructor(button: ButtonGroup, text: string, className: string) { - super(button.root, button.cx, button.cy); - - this.textEl = mkText(text) - .appendClass(className); - - this.textEl.moveTo(this.cx, this.cy); - - this.root.appendChild(this.textEl); - } - - setText(text: string) { - this.textEl.text(text); - this.textEl.moveTo(this.cx, this.cy); - } - - getComputedTextLength() { - try { - return this.textEl.el.getComputedTextLength(); - } - catch (e) { - // Internet Explorer and Microsoft Edge throw if the element - // is not visible. The best we can do is approximate - return this.textEl.el.textContent.length * 8; - } - } - } - - export class StandaloneTextButton extends TextButton { - protected padding = 30; - - constructor(text: string, readonly height: number) { - super(drawSingleButton(65, height), text, "sprite-editor-text"); - this.addClass("sprite-editor-label"); - } - - layout() { - const newBG = drawSingleButton(this.width(), this.height); - - while (this.root.el.hasChildNodes()) { - this.root.el.removeChild(this.root.el.firstChild); - } - - while (newBG.root.el.hasChildNodes()) { - const el = newBG.root.el.firstChild; - newBG.root.el.removeChild(el); - this.root.el.appendChild(el); - } - - this.cx = newBG.cx; - this.cy = newBG.cy; - - this.root.appendChild(this.textEl); - this.textEl.moveTo(this.cx, this.cy); - } - - width() { - return this.getComputedTextLength() + this.padding * 2; - } - } - - export class CursorButton extends Button { - constructor(root: svg.Group, cx: number, cy: number, width: number) { - super(root, cx, cy); - - this.root.draw("rect") - .fill("white") - .size(width, width) - .at(Math.floor(this.cx - width / 2), Math.floor(this.cy - width / 2)) - } - } - - export function mkIconButton(icon: string, width: number, height = width + BUTTON_BOTTOM_BORDER_WIDTH - BUTTON_BORDER_WIDTH) { - const g = drawSingleButton(width, height); - return new TextButton(g, icon, "sprite-editor-icon"); - } - - export function mkXIconButton(icon: string, width: number, height = width + BUTTON_BOTTOM_BORDER_WIDTH - BUTTON_BORDER_WIDTH) { - const g = drawSingleButton(width, height); - return new TextButton(g, icon, "sprite-editor-xicon"); - } - - export function mkTextButton(text: string, width: number, height: number) { - const g = drawSingleButton(width, height); - const t = new TextButton(g, text, "sprite-editor-text"); - t.addClass("sprite-editor-label"); - return t; - } - - /** - * Draws a button suitable for the left end of a button group. - * - * @param width The total width of the result (including border) - * @param height The total height of the resul (including border and lip) - * @param lip The width of the bottom border - * @param border The width of the outer border (except bottom) - * @param r The corner radius - */ - function drawLeftButton(width: number, height: number, lip: number, border: number, r: number): ButtonGroup { - const root = new svg.Group().appendClass("sprite-editor-button"); - const bg = root.draw("path") - .appendClass("sprite-editor-button-bg"); - bg.d.moveTo(r, 0) - .lineBy(width - r, 0) - .lineBy(0, height) - .lineBy(-(width - r), 0) - .arcBy(r, r, 0, false, true, -r, -r) - .lineBy(0, -(height - (r << 1))) - .arcBy(r, r, 0, false, true, r, -r) - .close(); - bg.update(); - - const fg = root.draw("path") - .appendClass("sprite-editor-button-fg"); - fg.d.moveTo(border + r, border) - .lineBy(width - border - r, 0) - .lineBy(0, height - lip - border) - .lineBy(-(width - border - r), 0) - .arcBy(r, r, 0, false, true, -r, -r) - .lineBy(0, -(height - lip - border - (r << 1))) - .arcBy(r, r, 0, false, true, r, -r) - .close(); - fg.update(); - - return { - root, - cx: border + (width - border) / 2, - cy: border + (height - lip) / 2 - }; - } - - export class CursorMultiButton { - root: svg.Group; - selected: number; - buttons: Button[]; - - indexHandler: (index: number) => void; - - constructor(parent: svg.Group, width: number) { - this.root = parent.group(); - const widths = [4, 7, 10] - - this.buttons = buttonGroup(65, 21, 3).map((b, i) => new CursorButton(b.root, b.cx, b.cy, widths[i])); - this.buttons.forEach((button, index) => { - button.onClick(() => this.handleClick(index)); - button.title(sizeAdjective(index)); - this.root.appendChild(button.getElement()); - }); - } - - protected handleClick(index: number) { - if (index === this.selected) return; - - if (this.selected != undefined) { - this.buttons[this.selected].setSelected(false); - } - - this.selected = index; - - if (this.selected != undefined) { - this.buttons[this.selected].setSelected(true); - } - - if (this.indexHandler) this.indexHandler(index); - } - - onSelected(cb: (index: number) => void) { - this.indexHandler = cb; - } - } - - export interface UndoRedoHost { - undo(): void; - redo(): void; - } - - export class UndoRedoGroup { - root: svg.Group; - undo: TextButton; - redo: TextButton; - - host: UndoRedoHost; - - constructor(parent: svg.Group, host: UndoRedoHost, width: number, height: number) { - this.root = parent.group(); - this.host = host; - const [undo, redo] = buttonGroup(width, height, 2); - - this.undo = new TextButton(undo, "\uf118", "sprite-editor-xicon"); - this.undo.onClick(() => this.host.undo()); - this.root.appendChild(this.undo.getElement()); - - - this.redo = new TextButton(redo, "\uf111", "sprite-editor-xicon"); - this.redo.onClick(() => this.host.redo()); - this.root.appendChild(this.redo.getElement()); - } - - translate(x: number, y: number) { - this.root.translate(x, y); - } - - updateState(undo: boolean, redo: boolean) { - this.undo.setDisabled(undo); - this.redo.setDisabled(redo); - } - } - - - function defaultColors(props: Partial): ToggleProps { - if (!props.baseColor) props.baseColor = "#e95153"; - if (!props.backgroundColor) props.backgroundColor = "rgba(52,73,94,.2)"; - if (!props.borderColor) props.borderColor = "rgba(52,73,94,.4)"; - if (!props.selectedTextColor) props.selectedTextColor = props.baseColor; - if (!props.unselectedTextColor) props.unselectedTextColor = "hsla(0,0%,100%,.9)"; - if (!props.switchColor) props.switchColor = "#ffffff"; - - return props as ToggleProps; - } - - function sizeAdjective(cursorIndex: number) { - switch (cursorIndex) { - case 0: return lf("Small Cursor"); - case 1: return lf("Medium Cursor"); - case 2: return lf("Large Cursor"); - } - - return undefined; - } - - /** - * Draws a button suitable for the interior of a button group. - * - * @param width The total width of the result (including border) - * @param height The total height of the resul (including border and lip) - * @param lip The width of the bottom border - * @param border The width of the outer border (except bottom) - */ - function drawMidButton(width: number, height: number, lip: number, border: number): ButtonGroup { - const root = new svg.Group().appendClass("sprite-editor-button"); - const bg = root.draw("rect") - .appendClass("sprite-editor-button-bg") - .size(width, height) - - const fg = root.draw("rect") - .appendClass("sprite-editor-button-fg") - .size(width - border, height - lip - border) - .at(border, border); - - return { - root, - cx: border + (width - border) / 2, - cy: border + (height - lip) / 2 - }; - } - - /** - * Draws a button suitable for the right end of a button group. - * - * @param width The total width of the result (including border) - * @param height The total height of the resul (including border and lip) - * @param lip The width of the bottom border - * @param border The width of the outer border (except bottom) - * @param r The corner radius - */ - function drawRightButton(width: number, height: number, lip: number, border: number, r: number): ButtonGroup { - const root = new svg.Group().appendClass("sprite-editor-button"); - const bg = root.draw("path") - .appendClass("sprite-editor-button-bg"); - bg.d.moveTo(0, 0) - .lineBy(width - r, 0) - .arcBy(r, r, 0, false, true, r, r) - .lineBy(0, height - (r << 1)) - .arcBy(r, r, 0, false, true, -r, r) - .lineBy(-(width - r), 0) - .lineBy(0, -height) - .close(); - bg.update(); - - const fg = root.draw("path") - .appendClass("sprite-editor-button-fg"); - fg.d.moveTo(border, border) - .lineBy(width - border - r, 0) - .arcBy(r, r, 0, false, true, r, r) - .lineBy(0, height - border - lip - (r << 1)) - .arcBy(r, r, 0, false, true, -r, r) - .lineBy(-(width - border - r), 0) - .lineBy(0, -(height - border - lip)) - .close(); - fg.update(); - - const content = root.group().id("sprite-editor-button-content"); - content.translate(border + (width - (border << 1)) >> 1, (height - lip - border) >> 1); - - return { - root, - cx: width / 2, - cy: border + (height - lip) / 2 - }; - } - - /** - * Draws a standalone button. - * - * @param width The total width of the result (including border) - * @param height The total height of the resul (including border and lip) - * @param lip The width of the bottom border - * @param border The width of the outer border (except bottom) - * @param r The corner radius - */ - function drawSingleButton(width: number, height: number, lip = BUTTON_BOTTOM_BORDER_WIDTH, border = BUTTON_BORDER_WIDTH, r = BUTTON_CORNER_RADIUS): ButtonGroup { - const root = new svg.Group().appendClass("sprite-editor-button"); - root.draw("rect") - .size(width, height) - .corners(r, r) - .appendClass("sprite-editor-button-bg"); - - root.draw("rect") - .at(border, border) - .size(width - (border << 1), height - lip - border) - .corners(r, r) - .appendClass("sprite-editor-button-fg"); - - return { - root, - cx: width / 2, - cy: border + (height - lip) / 2 - }; - } - - function buttonGroup(width: number, height: number, segments: number, lip = BUTTON_BOTTOM_BORDER_WIDTH, border = BUTTON_BORDER_WIDTH, r = BUTTON_CORNER_RADIUS): ButtonGroup[] { - const available = width - (segments + 1) * border; - const segmentWidth = Math.floor(available / segments); - - const result: ButtonGroup[] = []; - for (let i = 0; i < segments; i++) { - if (i === 0) { - result.push(drawLeftButton(segmentWidth + border, height, lip, border, r)); - } - else if (i === segments - 1) { - const b = drawRightButton(segmentWidth + (border << 1), height, lip, border, r); - b.root.translate((border + segmentWidth) * i, 0); - result.push(b); - } - else { - const b = drawMidButton(segmentWidth + border, height, lip, border); - b.root.translate((border + segmentWidth) * i, 0); - result.push(b); - } - } - - return result; - } - - export function mkText(text: string) { - return new svg.Text(text) - .anchor("middle") - .setAttribute("dominant-baseline", "middle") - .setAttribute("dy", (pxt.BrowserUtils.isIE() || pxt.BrowserUtils.isEdge()) ? "0.3em" : "0.1em") - } -} diff --git a/pxtlib/round-matrix-editor/canvasGrid.ts b/pxtlib/round-matrix-editor/canvasGrid.ts deleted file mode 100644 index ac4f0bc4637c..000000000000 --- a/pxtlib/round-matrix-editor/canvasGrid.ts +++ /dev/null @@ -1,635 +0,0 @@ -namespace pxtmatrix { - const alphaCellWidth = 5; - const dropdownPaddding = 4; - const lightModeBackground = "#dedede"; - - export class CanvasGrid { - protected cellWidth: number = 16; - protected cellHeight: number = 16; - - private gesture: GestureState; - private context: CanvasRenderingContext2D; - private fadeAnimation: Fade; - private selectAnimation: number; - - protected backgroundLayer: HTMLCanvasElement; - protected paintLayer: HTMLCanvasElement; - protected overlayLayer: HTMLCanvasElement; - - mouseCol: number; - mouseRow: number; - - constructor(protected palette: string[], public state: CanvasState, protected lightMode = false) { - this.paintLayer = document.createElement("canvas"); - this.paintLayer.setAttribute("class", "sprite-editor-canvas"); - this.overlayLayer = document.createElement("canvas") - this.overlayLayer.setAttribute("class", "sprite-editor-canvas") - - if (!this.lightMode) { - this.backgroundLayer = document.createElement("canvas"); - this.backgroundLayer.setAttribute("class", "sprite-editor-canvas") - this.context = this.paintLayer.getContext("2d"); - } - else { - this.context = this.paintLayer.getContext("2d", { alpha: false }); - this.context.fillStyle = lightModeBackground; - this.context.fill(); - } - - this.hideOverlay(); - } - - - get image() { - return this.state.image; - } - - setEyedropperMouse(on: boolean) { - const eyedropperClass = "sprite-editor-eyedropper"; - - const toApply = on ? pxt.BrowserUtils.addClass : pxt.BrowserUtils.removeClass; - toApply(this.paintLayer, eyedropperClass); - toApply(this.overlayLayer, eyedropperClass); - if (!this.lightMode) { - toApply(this.backgroundLayer, eyedropperClass); - } - } - - repaint(): void { - this.clearContext(this.context); - this.drawImage(); - if (this.state.floatingLayer) this.drawFloatingLayer(); - else this.hideOverlay(); - } - - applyEdit(edit: Edit, cursorCol: number, cursorRow: number, gestureEnd = false) { - edit.doEdit(this.state); - this.drawCursor(edit, cursorCol, cursorRow); - } - - drawCursor(edit: Edit, col: number, row: number) { - const cursor = edit.getCursor(); - - if (cursor) { - this.repaint(); - if (edit.showPreview) { - edit.drawCursor(col, row, (c, r) => { - this.drawColor(c, r, edit.color); - }); - } - this.context.strokeStyle = "#898989"; - this.context.strokeRect((col + cursor.offsetX) * this.cellWidth, (row + cursor.offsetY) * this.cellHeight, cursor.width * this.cellWidth, cursor.height * this.cellHeight); - } - else if (edit.isStarted) { - this.repaint(); - } - } - - bitmap() { - return this.image; - } - - outerWidth(): number { - return this.paintLayer.getBoundingClientRect().width; - } - - outerHeight(): number { - return this.paintLayer.getBoundingClientRect().height; - } - - writeColor(col: number, row: number, color: number) { - this.image.set(col, row, color); - this.drawColor(col, row, color); - } - - drawColor(col: number, row: number, color: number, context = this.context, transparency = !this.lightMode) { - const x = col * this.cellWidth; - const y = row * this.cellHeight; - - if (color) { - context.fillStyle = this.palette[color - 1]; - context.fillRect(x, y, this.cellWidth, this.cellHeight); - } - else if (!transparency) { - context.fillStyle = lightModeBackground; - context.fillRect(x, y, this.cellWidth, this.cellHeight); - } - } - - restore(state: CanvasState, repaint = false) { - if (state.height != this.image.height || state.width != this.image.width) { - this.state = state.copy(); - this.resizeGrid(state.width, state.width * state.height); - } - else { - this.state = state.copy(); - } - - if (repaint) { - this.repaint(); - } - } - - showResizeOverlay(): void { - if (this.lightMode) return; - - if (this.fadeAnimation) { - this.fadeAnimation.kill(); - } - this.showOverlay(); - this.stopSelectAnimation(); - - const w = this.overlayLayer.width; - const h = this.overlayLayer.height; - const context = this.overlayLayer.getContext("2d"); - const toastWidth = 100; - const toastHeight = 40; - const toastLeft = w / 2 - toastWidth / 2; - const toastTop = h / 2 - toastWidth / 4; - - this.fadeAnimation = new Fade((opacity, dead) => { - if (dead) { - this.drawFloatingLayer(); - return; - } - - this.clearContext(context); - context.globalAlpha = opacity; - context.fillStyle = "#898989"; - - // After 32x32 the grid isn't easy to see anymore so skip it - if (this.image.width <= 32 && this.image.height <= 32) { - for (let c = 1; c < this.image.width; c++) { - context.fillRect(c * this.cellWidth, 0, 1, h); - } - for (let r = 1; r < this.image.height; r++) { - context.fillRect(0, r * this.cellHeight, w, 1); - } - } - - context.fillRect(toastLeft, toastTop, toastWidth, toastHeight); - context.fillStyle = "#ffffff"; - context.font = "30px sans-serif"; - context.textBaseline = "middle"; - context.textAlign = "center"; - - context.fillText(this.image.width.toString(), toastLeft + toastWidth / 2 - 25, toastTop + toastHeight / 2); - context.fillText("x", toastLeft + 50, toastTop + toastHeight / 2, 10); - context.fillText(this.image.height.toString(), toastLeft + toastWidth / 2 + 25, toastTop + toastHeight / 2); - }, 750, 500); - } - - showOverlay() { - this.overlayLayer.style.visibility = "visible"; - } - - hideOverlay() { - this.stopSelectAnimation(); - - this.overlayLayer.style.visibility = "hidden"; - - if (this.fadeAnimation) { - this.fadeAnimation.kill(); - } - } - - resizeGrid(rowLength: number, numCells: number): void { - this.repaint(); - } - - setCellDimensions(width: number, height: number): void { - this.cellWidth = width | 0; - this.cellHeight = height | 0; - - const canvasWidth = this.cellWidth * this.image.width; - const canvasHeight = this.cellHeight * this.image.height; - - this.paintLayer.width = canvasWidth; - this.paintLayer.height = canvasHeight; - this.overlayLayer.width = canvasWidth; - this.overlayLayer.height = canvasHeight; - - if (!this.lightMode) { - this.backgroundLayer.width = canvasWidth; - this.backgroundLayer.height = canvasHeight; - } - } - - setGridDimensions(width: number, height = width, lockAspectRatio = true): void { - const maxCellWidth = width / this.image.width; - const maxCellHeight = height / this.image.height; - - if (lockAspectRatio) { - const aspectRatio = this.cellWidth / this.cellHeight; - - if (aspectRatio >= 1) { - const w = Math.min(maxCellWidth, maxCellHeight * aspectRatio); - this.setCellDimensions(w, w * aspectRatio); - } - else { - const h = Math.min(maxCellHeight, maxCellWidth / aspectRatio) - this.setCellDimensions(h / aspectRatio, h); - } - } - else { - this.setCellDimensions(maxCellWidth, maxCellHeight); - } - } - - down(handler: (col: number, row: number) => void): void { - this.initDragSurface(); - this.gesture.subscribe(GestureType.Down, handler); - } - - up(handler: (col: number, row: number) => void): void { - this.initDragSurface(); - this.gesture.subscribe(GestureType.Up, handler); - } - - drag(handler: (col: number, row: number) => void): void { - this.initDragSurface(); - this.gesture.subscribe(GestureType.Drag, handler); - } - - move(handler: (col: number, row: number) => void): void { - this.initDragSurface(); - this.gesture.subscribe(GestureType.Move, handler); - } - - leave(handler: () => void): void { - this.initDragSurface(); - this.gesture.subscribe(GestureType.Leave, handler); - } - - updateBounds(top: number, left: number, width: number, height: number) { - this.layoutCanvas(this.paintLayer, top, left, width, height); - this.layoutCanvas(this.overlayLayer, top, left, width, height); - - if (!this.lightMode) { - this.layoutCanvas(this.backgroundLayer, top, left, width, height); - } - - this.drawImage(); - this.drawBackground(); - } - - render(parent: HTMLDivElement) { - if (!this.lightMode) { - parent.appendChild(this.backgroundLayer); - } - - parent.appendChild(this.paintLayer); - parent.appendChild(this.overlayLayer); - } - - removeMouseListeners() { - this.stopSelectAnimation(); - if (this.fadeAnimation) this.fadeAnimation.kill(); - - this.endDrag(); - } - - onEditStart(col: number, row: number, edit: Edit) { - edit.start(col, row, this.state); - } - - onEditEnd(col: number, row: number, edit: Edit) { - edit.end(col, row, this.state); - this.drawFloatingLayer(); - } - - protected drawImage(image = this.image, context = this.context, left = 0, top = 0, transparency = !this.lightMode) { - for (let c = 0; c < image.width; c++) { - for (let r = 0; r < image.height; r++) { - this.drawColor(left + c, top + r, image.get(c, r), context, transparency); - } - } - } - - protected drawBackground() { - if (this.lightMode) return; - const context = this.backgroundLayer.getContext("2d", { alpha: false }); - const alphaCols = Math.ceil(this.paintLayer.width / alphaCellWidth); - const alphaRows = Math.ceil(this.paintLayer.height / alphaCellWidth); - context.fillStyle = "#ffffff"; - context.fillRect(0, 0, this.paintLayer.width, this.paintLayer.height); - - context.fillStyle = "#dedede"; - for (let ac = 0; ac < alphaCols; ac++) { - for (let ar = 0; ar < alphaRows; ar++) { - if ((ac + ar) % 2) { - context.fillRect(ac * alphaCellWidth, ar * alphaCellWidth, alphaCellWidth, alphaCellWidth); - } - } - } - } - - /** - * This calls getBoundingClientRect() so don't call it in a loop! - */ - protected clientEventToCell(ev: MouseEvent) { - const coord = clientCoord(ev); - const bounds = this.paintLayer.getBoundingClientRect(); - const left = bounds.left + (window.scrollX !== null ? window.scrollX : window.pageXOffset); - const top = bounds.top + (window.scrollY !== null ? window.scrollY : window.pageYOffset); - - this.mouseCol = Math.floor((coord.clientX - left) / this.cellWidth); - this.mouseRow = Math.floor((coord.clientY - top) / this.cellHeight); - - return [ - this.mouseCol, - this.mouseRow - ]; - } - protected drawFloatingLayer() { - if (!this.state.floatingLayer) { - return; - } - this.drawImage(this.state.floatingLayer, this.context, this.state.layerOffsetX, this.state.layerOffsetY, true); - - this.drawSelectionAnimation(); - } - - protected drawSelectionAnimation(dashOffset = 0) { - if (!this.state.floatingLayer) { - this.hideOverlay(); - return; - } - this.showOverlay(); - const context = this.overlayLayer.getContext("2d"); - this.clearContext(context); - context.globalAlpha = 1; - context.strokeStyle = "#303030"; - context.lineWidth = 2; - context.setLineDash([5, 3]); - context.lineDashOffset = dashOffset; - context.strokeRect(this.state.layerOffsetX * this.cellWidth, this.state.layerOffsetY * this.cellHeight, this.state.floatingLayer.width * this.cellWidth, this.state.floatingLayer.height * this.cellHeight); - - - if (!this.lightMode && !this.selectAnimation && (!this.fadeAnimation || this.fadeAnimation.dead)) { - let drawLayer = () => { - dashOffset++ - requestAnimationFrame(() => this.drawSelectionAnimation(dashOffset)); - }; - - this.selectAnimation = setInterval(drawLayer, 40) - } - } - - private clearContext(context: CanvasRenderingContext2D) { - // Paint Layer has the same dimensions as all other contexts - context.clearRect(0, 0, this.paintLayer.width, this.paintLayer.height); - } - - private initDragSurface() { - if (!this.gesture) { - this.gesture = new GestureState(); - - this.bindEvents(this.paintLayer); - this.bindEvents(this.overlayLayer); - - document.addEventListener(pxt.BrowserUtils.pointerEvents.move, this.hoverHandler); - } - } - - private bindEvents(surface: HTMLElement) { - pxt.BrowserUtils.pointerEvents.down.forEach(evId => { - surface.addEventListener(evId, (ev: MouseEvent) => { - this.startDrag(); - const [col, row] = this.clientEventToCell(ev); - this.gesture.handle(InputEvent.Down, col, row); - }); - }) - - // surface.addEventListener("click", (ev: MouseEvent) => { - // const [col, row] = this.clientEventToCell(ev); - // this.gesture.handle(InputEvent.Down, col, row); - // this.gesture.handle(InputEvent.Up, col, row); - // }); - } - - private upHandler = (ev: MouseEvent) => { - this.endDrag(); - const [col, row] = this.clientEventToCell(ev); - this.gesture.handle(InputEvent.Up, col, row); - - ev.stopPropagation(); - ev.preventDefault(); - } - - private leaveHandler = (ev: MouseEvent) => { - this.endDrag(); - const [col, row] = this.clientEventToCell(ev); - this.gesture.handle(InputEvent.Leave, col, row); - - ev.stopPropagation(); - ev.preventDefault(); - }; - - private moveHandler = (ev: MouseEvent) => { - const [col, row] = this.clientEventToCell(ev); - if (col >= 0 && row >= 0 && col < this.image.width && row < this.image.height) { - if (ev.buttons & 1) { - this.gesture.handle(InputEvent.Down, col, row); - } - this.gesture.handle(InputEvent.Move, col, row); - } - - ev.stopPropagation(); - ev.preventDefault(); - } - - private hoverHandler = (ev: MouseEvent) => { - const [col, row] = this.clientEventToCell(ev); - if (col >= 0 && row >= 0 && col < this.image.width && row < this.image.height) { - this.gesture.handle(InputEvent.Move, col, row); - this.gesture.isHover = true; - } - else if (this.gesture.isHover) { - this.gesture.isHover = false; - this.gesture.handle(InputEvent.Leave, -1, -1); - } - } - - private startDrag() { - document.removeEventListener(pxt.BrowserUtils.pointerEvents.move, this.hoverHandler); - document.addEventListener(pxt.BrowserUtils.pointerEvents.move, this.moveHandler); - document.addEventListener(pxt.BrowserUtils.pointerEvents.up, this.upHandler); - - if (pxt.BrowserUtils.isTouchEnabled() && !pxt.BrowserUtils.hasPointerEvents()) { - document.addEventListener("touchend", this.upHandler); - document.addEventListener("touchcancel", this.leaveHandler); - } - else { - document.addEventListener(pxt.BrowserUtils.pointerEvents.leave, this.leaveHandler); - } - } - - private endDrag() { - document.addEventListener(pxt.BrowserUtils.pointerEvents.move, this.hoverHandler); - document.removeEventListener(pxt.BrowserUtils.pointerEvents.move, this.moveHandler); - document.removeEventListener(pxt.BrowserUtils.pointerEvents.up, this.upHandler); - document.removeEventListener(pxt.BrowserUtils.pointerEvents.leave, this.leaveHandler); - - if (pxt.BrowserUtils.isTouchEnabled() && !pxt.BrowserUtils.hasPointerEvents()) { - document.removeEventListener("touchend", this.upHandler); - document.removeEventListener("touchcancel", this.leaveHandler); - } - else { - document.removeEventListener(pxt.BrowserUtils.pointerEvents.leave, this.leaveHandler); - } - } - - private layoutCanvas(canvas: HTMLCanvasElement, top: number, left: number, width: number, height: number) { - canvas.style.position = "absolute"; - - if (this.image.width === this.image.height) { - canvas.style.top = top + "px"; - canvas.style.left = left + "px"; - } - else if (this.image.width > this.image.height) { - canvas.style.top = (top + dropdownPaddding + (height - canvas.height) / 2) + "px"; - canvas.style.left = left + "px"; - } - else { - canvas.style.top = top + "px"; - canvas.style.left = (left + dropdownPaddding + (width - canvas.width) / 2) + "px"; - } - } - - private stopSelectAnimation() { - if (this.selectAnimation) { - clearInterval(this.selectAnimation); - this.selectAnimation = undefined; - } - - } - } - - enum InputEvent { - Up, - Down, - Move, - Leave - } - - enum GestureType { - Up, - Down, - Move, - Drag, - Leave - } - - type GestureHandler = (col: number, row: number) => void; - - class GestureState { - lastCol: number; - lastRow: number; - - isDown = false; - isHover = false; - - handlers: {[index: number]: GestureHandler} = {}; - - handle(event: InputEvent, col: number, row: number) { - switch (event) { - case InputEvent.Up: - this.update(col, row); - this.isDown = false; - this.fire(GestureType.Up); - break; - case InputEvent.Down: - if (!this.isDown) { - this.update(col, row); - this.isDown = true; - this.fire(GestureType.Down); - } - break; - case InputEvent.Move: - if (col === this.lastCol && row === this.lastRow) return; - this.update(col, row); - if (this.isDown) { - this.fire(GestureType.Drag); - } - else { - this.fire(GestureType.Move); - } - break; - - case InputEvent.Leave: - this.update(col, row); - this.isDown = false; - this.fire(GestureType.Leave); - break; - } - } - - subscribe(type: GestureType, handler: GestureHandler) { - this.handlers[type] = handler; - } - - protected update(col: number, row: number) { - this.lastCol = col; - this.lastRow = row; - } - - protected fire(type: GestureType) { - if (this.handlers[type]) { - this.handlers[type](this.lastCol, this.lastRow); - } - } - } - - class Fade { - start: number; - end: number; - slope: number; - dead: boolean; - - constructor (protected draw: (opacity: number, dead: boolean) => void, delay: number, duration: number) { - this.start = Date.now() + delay; - this.end = this.start + duration; - this.slope = 1 / duration; - this.dead = false; - - draw(1, false); - - setTimeout(() => requestAnimationFrame(() => this.frame()), delay); - } - - frame() { - if (this.dead) return; - const now = Date.now(); - if (now < this.end) { - const v = 1 - (this.slope * (now - this.start)); - this.draw(v, false); - requestAnimationFrame(() => this.frame()); - } - else { - this.kill(); - this.draw(0, true); - } - } - - kill() { - this.dead = true; - } - } - - export interface ClientCoordinates { - clientX: number; - clientY: number; - } - - function clientCoord(ev: PointerEvent | MouseEvent | TouchEvent): ClientCoordinates { - if ((ev as TouchEvent).touches) { - const te = ev as TouchEvent; - if (te.touches.length) { - return te.touches[0]; - } - return te.changedTouches[0]; - } - return (ev as PointerEvent | MouseEvent); - } -} diff --git a/pxtlib/round-matrix-editor/canvasState.ts b/pxtlib/round-matrix-editor/canvasState.ts deleted file mode 100644 index 3378399abc93..000000000000 --- a/pxtlib/round-matrix-editor/canvasState.ts +++ /dev/null @@ -1,90 +0,0 @@ -namespace pxtmatrix { - export class CanvasState { - image: Bitmap; - floatingLayer: Bitmap; - layerOffsetX: number; - layerOffsetY: number; - - constructor(bitmap?: Bitmap) { - this.image = bitmap; - this.layerOffsetX = 0; - this.layerOffsetY = 0; - } - - get width() { - return this.image.width; - } - - get height() { - return this.image.height; - } - - copy() { - const res = new CanvasState(); - res.image = this.image.copy(); - - if (this.floatingLayer) { - res.floatingLayer = this.floatingLayer.copy(); - res.floatingLayer.x0 = this.layerOffsetX; - res.floatingLayer.y0 = this.layerOffsetY; - } - res.layerOffsetX = this.layerOffsetX; - res.layerOffsetY = this.layerOffsetY; - - return res; - } - - equals(other: CanvasState) { - if (!this.image.equals(other.image) || (this.floatingLayer && !other.floatingLayer) || (!this.floatingLayer && other.floatingLayer)) return false; - - if (this.floatingLayer) return this.floatingLayer.equals(other.floatingLayer) && this.layerOffsetX === other.layerOffsetX && this.layerOffsetY === other.layerOffsetY; - - return true; - } - - mergeFloatingLayer() { - if (!this.floatingLayer) return; - - this.floatingLayer.x0 = this.layerOffsetX; - this.floatingLayer.y0 = this.layerOffsetY; - - this.image.apply(this.floatingLayer, true); - this.floatingLayer = undefined; - } - - copyToLayer(left: number, top: number, width: number, height: number, cut = false) { - if (width === 0 || height === 0) return; - - if (width < 0) { - left += width; - width = -width; - } - - if (height < 0) { - top += height; - height = -height; - } - - this.floatingLayer = this.image.copy(left, top, width, height); - this.layerOffsetX = this.floatingLayer.x0; - this.layerOffsetY = this.floatingLayer.y0; - - if (cut) { - for (let c = 0; c < width; c++) { - for (let r = 0; r < height; r++) { - this.image.set(left + c, top + r, 0); - } - } - } - } - - inFloatingLayer(col: number, row: number) { - if (!this.floatingLayer) return false; - - col = col - this.layerOffsetX; - row = row - this.layerOffsetY; - - return col >= 0 && col < this.floatingLayer.width && row >= 0 && row < this.floatingLayer.height; - } - } -} diff --git a/pxtlib/round-matrix-editor/gallery.ts b/pxtlib/round-matrix-editor/gallery.ts deleted file mode 100644 index 457585f8f634..000000000000 --- a/pxtlib/round-matrix-editor/gallery.ts +++ /dev/null @@ -1,256 +0,0 @@ -namespace pxtmatrix { - export interface GalleryItem { - qName: string; - src: string; - alt: string; - } - - const COLUMNS = 4; - - export class Gallery { - protected info: pxtc.BlocksInfo; - protected contentDiv: HTMLDivElement; - protected containerDiv: HTMLDivElement; - - protected itemBorderColor: string; - protected itemBackgroundColor: string; - - protected visible = false; - - protected pending: (res: Bitmap, err?: string) => void; - - constructor(info: pxtc.BlocksInfo) { - this.info = info; - - this.containerDiv = document.createElement("div"); - this.containerDiv.setAttribute("id", "sprite-editor-gallery-outer"); - this.contentDiv = document.createElement("div"); - this.contentDiv.setAttribute("id", "sprite-editor-gallery"); - - this.itemBackgroundColor = "#ffffff"; - this.itemBorderColor = "#000000"; - - this.initStyles(); - this.containerDiv.appendChild(this.contentDiv); - - this.containerDiv.style.display = "none"; - this.contentDiv.addEventListener("animationend", () => { - if (!this.visible) { - this.containerDiv.style.display = "none"; - } - }); - - this.contentDiv.addEventListener('wheel', e => { - e.stopPropagation(); - }, true) - } - - getElement() { - return this.containerDiv; - } - - show(cb: (res: Bitmap, err?: string) => void) { - if (this.pending) { - this.reject("Error: multiple calls"); - } - this.pending = cb; - - this.containerDiv.style.display = "block"; - this.buildDom(); - this.visible = true; - this.contentDiv.setAttribute("class", "shown"); - } - - hide() { - if (this.pending) { - this.reject("cancelled"); - } - this.visible = false; - this.contentDiv.setAttribute("class", "hidden-above"); - } - - layout(left: number, top: number, height: number) { - this.containerDiv.style.left = left + "px"; - this.containerDiv.style.top = top + "px"; - this.containerDiv.style.height = height + "px"; - } - - protected buildDom() { - while (this.contentDiv.firstChild) this.contentDiv.removeChild(this.contentDiv.firstChild); - const totalWidth = this.containerDiv.clientWidth - 17; - const buttonWidth = (Math.floor(totalWidth / COLUMNS) - 8) + "px"; - this.getGalleryItems("Image").forEach((item, i) => this.mkButton(item.src, item.alt, item.qName, i, buttonWidth)); - } - - protected initStyles() { - const style = document.createElement("style"); - style.textContent = ` - #sprite-editor-gallery { - margin-top: -100%; - } - - #sprite-editor-gallery.hidden-above { - margin-top: -100%; - animation: slide-up 0.2s 0s ease; - } - - #sprite-editor-gallery.shown { - margin-top: 0px; - animation: slide-down 0.2s 0s ease; - } - - @keyframes slide-down { - 0% { - margin-top: -100%; - } - 100% { - margin-top: 0px; - } - } - - @keyframes slide-up { - 0% { - margin-top: 0px; - } - 100% { - margin-top: -100%; - } - } - `; - this.containerDiv.appendChild(style); - } - - protected mkButton(src: string, alt: string, value: string, i: number, width: string) { - let button = document.createElement('button'); - button.setAttribute('id', ':' + i); // For aria-activedescendant - button.setAttribute('role', 'menuitem'); - button.setAttribute('class', 'sprite-gallery-button sprite-editor-card'); - button.title = alt; - button.style.width = width; - button.style.height = width; - let backgroundColor = this.itemBackgroundColor; - - button.style.backgroundColor = backgroundColor; - button.style.borderColor = this.itemBorderColor; - - const parentDiv = this.contentDiv; - - button.addEventListener("click", () => this.handleSelection(value)); - button.addEventListener(pxt.BrowserUtils.pointerEvents.move, () => { - button.setAttribute('class', 'sprite-gallery-button sprite-gallery-button-hover sprite-editor-card'); - parentDiv.setAttribute('aria-activedescendant', button.id); - }); - button.addEventListener(pxt.BrowserUtils.pointerEvents.leave, () => { - button.setAttribute('class', 'sprite-gallery-button sprite-editor-card'); - parentDiv.removeAttribute('aria-activedescendant'); - }); - - let buttonImg = document.createElement('img'); - buttonImg.src = src; - button.setAttribute('data-value', value); - buttonImg.setAttribute('data-value', value); - button.appendChild(buttonImg); - this.contentDiv.appendChild(button); - } - - protected resolve(bitmap: Bitmap) { - if (this.pending) { - const cb = this.pending; - this.pending = undefined; - cb(bitmap); - } - } - - protected reject(reason: string) { - if (this.pending) { - const cb = this.pending; - this.pending = undefined; - cb(undefined, reason); - } - } - - protected handleSelection(value: string) { - this.resolve(this.getBitmap(value)); - } - - protected getBitmap(qName: string) { - const sym = this.info.apis.byQName[qName]; - const jresURL = sym.attributes.jresURL; - const data = atob(jresURL.slice(jresURL.indexOf(",") + 1)) - const magic = data.charCodeAt(0); - const w = data.charCodeAt(1); - const h = data.charCodeAt(2); - - const out = new Bitmap(w, h); - - let index = 4 - if (magic === 0xe1) { - // Monochrome - let mask = 0x01 - let v = data.charCodeAt(index++) - for (let x = 0; x < w; ++x) { - for (let y = 0; y < h; ++y) { - out.set(x, y, (v & mask) ? 1 : 0); - mask <<= 1 - if (mask == 0x100) { - mask = 0x01 - v = data.charCodeAt(index++) - } - } - } - } - else { - // Color - for (let x = 0; x < w; x++) { - for (let y = 0; y < h; y += 2) { - let v = data.charCodeAt(index++) - out.set(x, y, v & 0xf); - if (y != h - 1) { - out.set(x, y + 1, (v >> 4) & 0xf); - } - } - while (index & 3) index++ - } - } - - return out; - } - - - protected getGalleryItems(qName: string): GalleryItem[] { - const syms = getFixedInstanceDropdownValues(this.info.apis, qName); - generateIcons(syms); - - return syms.map(sym => { - return { - qName: sym.qName, - src: sym.attributes.iconURL, - alt: sym.qName - }; - }); - } - } - - function getFixedInstanceDropdownValues(apis: pxtc.ApisInfo, qName: string) { - return pxt.Util.values(apis.byQName).filter(sym => sym.kind === pxtc.SymbolKind.Variable - && sym.attributes.fixedInstance - && isSubtype(apis, sym.retType, qName)); - } - - function isSubtype(apis: pxtc.ApisInfo, specific: string, general: string) { - if (specific == general) return true - let inf = apis.byQName[specific] - if (inf && inf.extendsTypes) - return inf.extendsTypes.indexOf(general) >= 0 - return false - } - - function generateIcons(instanceSymbols: pxtc.SymbolInfo[]) { - const imgConv = new pxt.ImageConverter(); - instanceSymbols.forEach(v => { - if (v.attributes.jresURL && !v.attributes.iconURL && v.attributes.jresURL.indexOf("data:image/x-mkcd-f") == 0) { - v.attributes.iconURL = imgConv.convert(v.attributes.jresURL) - } - }); - } -} diff --git a/pxtlib/round-matrix-editor/header.ts b/pxtlib/round-matrix-editor/header.ts deleted file mode 100644 index 9d976d1a7d03..000000000000 --- a/pxtlib/round-matrix-editor/header.ts +++ /dev/null @@ -1,42 +0,0 @@ -/// -namespace pxtmatrix { - import svg = pxt.svgUtil; - - export interface SpriteHeaderHost { - showGallery(): void; - hideGallery(): void; - } - - export class SpriteHeader { - div: HTMLDivElement; - root: svg.SVG; - toggle: Toggle; - undoButton: Button; - redoButton: Button; - - constructor(protected host: SpriteHeaderHost) { - this.div = document.createElement("div"); - this.div.setAttribute("id", "sprite-editor-header"); - - this.root = new svg.SVG(this.div).id("sprite-editor-header-controls"); - this.toggle = new Toggle(this.root, { leftText: "Editor", rightText: "Gallery", baseColor: "#4B7BEC" }); - this.toggle.onStateChange(isLeft => { - if (isLeft) { - this.host.hideGallery(); - } - else { - this.host.showGallery(); - } - }); - } - - getElement() { - return this.div; - } - - layout() { - this.toggle.layout(); - this.toggle.translate((TOTAL_HEIGHT - this.toggle.width()) / 2, (HEADER_HEIGHT - this.toggle.height()) / 2); - } - } -} diff --git a/pxtlib/round-matrix-editor/reporterBar.ts b/pxtlib/round-matrix-editor/reporterBar.ts deleted file mode 100644 index e7ade4160a8b..000000000000 --- a/pxtlib/round-matrix-editor/reporterBar.ts +++ /dev/null @@ -1,107 +0,0 @@ -/// -namespace pxtmatrix { - import svg = pxt.svgUtil; - - const UNDO_REDO_WIDTH = 65; - const SIZE_BUTTON_WIDTH = 65; - const SIZE_CURSOR_MARGIN = 10; - - export interface ReporterHost extends UndoRedoHost { - resize(width: number, height: number): void; - closeEditor(): void; - } - - export class ReporterBar { - root: svg.Group; - cursorText: svg.Text; - - sizeButton: TextButton; - doneButton: StandaloneTextButton; - undoRedo: UndoRedoGroup; - - protected sizePresets: [number, number][]; - protected sizeIndex: number; - - constructor(parent: svg.Group, protected host: ReporterHost, protected height: number) { - this.root = parent.group().id("sprite-editor-reporter-bar"); - this.undoRedo = new UndoRedoGroup(this.root, host, UNDO_REDO_WIDTH, height); - - this.sizeButton = mkTextButton("16x16", SIZE_BUTTON_WIDTH, height); - this.sizeButton.onClick(() => { - this.nextSize(); - }); - - //this.root.appendChild(this.sizeButton.getElement()); - - this.doneButton = new StandaloneTextButton(lf("Done"), height); - this.doneButton.addClass("sprite-editor-confirm-button"); - this.doneButton.onClick(() => this.host.closeEditor()); - - this.root.appendChild(this.doneButton.getElement()); - - this.sizePresets = [ - [7, 7] - ]; - - this.cursorText = this.root.draw("text") - .appendClass("sprite-editor-text") - .appendClass("sprite-editor-label") - .setAttribute("dominant-baseline", "middle") - .setAttribute("dy", 2.5); - } - - updateDimensions(width: number, height: number) { - this.sizeButton.setText(`${width}x${height}`); - } - - hideCursor() { - this.cursorText.text(""); - } - - updateCursor(col: number, row: number) { - this.cursorText.text(`${col},${row}`); - } - - updateUndoRedo(undo: boolean, redo: boolean) { - this.undoRedo.updateState(undo, redo); - } - - layout(top: number, left: number, width: number) { - this.root.translate(left, top); - - this.doneButton.layout(); - - const doneWidth = this.doneButton.width(); - - this.undoRedo.translate(width - UNDO_REDO_WIDTH - SIZE_CURSOR_MARGIN - doneWidth, 0); - this.doneButton.getElement().translate(width - doneWidth, 0); - this.cursorText.moveTo(SIZE_BUTTON_WIDTH + SIZE_CURSOR_MARGIN, this.height / 2); - } - - setSizePresets(presets: [number, number][], currentWidth: number, currentHeight: number) { - this.sizePresets = presets; - this.sizeIndex = undefined; - for (let i = 0; i < presets.length; i++) { - const [w, h] = presets[i]; - if (w === currentWidth && h === currentHeight) { - this.sizeIndex = i; - break; - } - } - - this.updateDimensions(currentWidth, currentHeight); - } - - protected nextSize() { - if (this.sizeIndex == undefined) { - this.sizeIndex = 0; - } - else { - this.sizeIndex = (this.sizeIndex + 1) % this.sizePresets.length; - } - - const [w, h] = this.sizePresets[this.sizeIndex]; - this.host.resize(w, h); - } - } -} diff --git a/pxtlib/round-matrix-editor/sidebar.ts b/pxtlib/round-matrix-editor/sidebar.ts deleted file mode 100644 index e44e5a8dff67..000000000000 --- a/pxtlib/round-matrix-editor/sidebar.ts +++ /dev/null @@ -1,210 +0,0 @@ -/// -namespace pxtmatrix { - import svg = pxt.svgUtil; - import lf = pxt.Util.lf; - - export interface SideBarHost { - setActiveTool(tool: PaintTool): void; - setActiveColor(color: number): void; - setToolWidth(width: number): void; - setIconsToDefault(): void; - } - - const TOOLBAR_WIDTH = 65; - const INNER_BUTTON_MARGIN = 3; - const PALETTE_BORDER_WIDTH = 1; - const BUTTON_GROUP_SPACING = 3; - const SELECTED_BORDER_WIDTH = 2; - const COLOR_PREVIEW_HEIGHT = 30; - const COLOR_MARGIN = 7; - - const TOOL_BUTTON_WIDTH = (TOOLBAR_WIDTH - INNER_BUTTON_MARGIN) / 2; - const PALLETTE_SWATCH_WIDTH = (TOOLBAR_WIDTH - PALETTE_BORDER_WIDTH * 3) / 2; - const TOOL_BUTTON_TOP = TOOLBAR_WIDTH / 3 + BUTTON_GROUP_SPACING; - const PALETTE_TOP = TOOL_BUTTON_TOP + TOOL_BUTTON_WIDTH * 3 + INNER_BUTTON_MARGIN + COLOR_MARGIN; - - export class SideBar { - root: svg.Group; - host: SideBarHost; - palette: string[]; - - protected colorSwatches: svg.Rect[]; - protected pencilTool: Button; - protected eraseTool: Button; - protected rectangleTool: Button; - protected fillTool: Button; - protected marqueeTool: Button; - - protected sizeGroup: svg.Group; - protected buttonGroup: svg.Group; - protected paletteGroup: svg.Group; - - protected selectedTool: Button; - protected selectedSwatch: svg.Rect; - protected colorPreview: svg.Rect; - - constructor(palette: string[], host: SideBarHost, parent: svg.Group) { - this.palette = palette; - this.host = host; - this.root = parent.group().id("sprite-editor-sidebar"); - - this.initSizes(); - this.initTools(); - this.initPalette(); - } - - public setTool(tool: PaintTool) { - this.host.setActiveTool(tool); - - if (this.selectedTool) { - this.selectedTool.removeClass("selected"); - } - - this.selectedTool = this.getButtonForTool(tool); - - if (this.selectedTool) { - this.selectedTool.addClass("selected"); - } - } - - public setColor(color: number) { - this.host.setActiveColor(color); - - if (this.selectedSwatch) { - this.selectedSwatch.stroke("none"); - } - - this.selectedSwatch = this.colorSwatches[color]; - - if (this.selectedSwatch) { - // Border is multiplied by 2 and the excess is clipped away - this.selectedSwatch.stroke("orange", SELECTED_BORDER_WIDTH * 2); - this.colorPreview.fill(this.palette[color]); - } - - // FIXME: Switch the tool to pencil - } - - public setCursorSize(size: number) { - this.host.setToolWidth(size); - } - - public setWidth(width: number) { - this.root.scale(width / TOOLBAR_WIDTH); - } - - public translate(left: number, top: number) { - this.root.translate(left, top); - } - - protected initSizes() { - this.sizeGroup = this.root.group().id("sprite-editor-cursor-buttons"); - const buttonGroup = new CursorMultiButton(this.sizeGroup, TOOLBAR_WIDTH); - buttonGroup.onSelected(index => { - this.setCursorSize(1 + (index * 2)); - }); - // Sets the first button to show as selected - buttonGroup.selected = 0; - buttonGroup.buttons[0].setSelected(true); - } - - protected initTools() { - this.buttonGroup = this.root.group() - .id("sprite-editor-tools") - .translate(0, TOOL_BUTTON_TOP); - - this.pencilTool = this.initButton(lf("Pencil"), "\uf040", PaintTool.Normal); - - this.eraseTool = this.initButton(lf("Erase"), "\uf12d", PaintTool.Erase); - this.eraseTool.translate(1 + TOOL_BUTTON_WIDTH + INNER_BUTTON_MARGIN, 0); - - this.fillTool = this.initButton(lf("Fill"), "\uf102", PaintTool.Fill, true); - this.fillTool.translate(0, TOOL_BUTTON_WIDTH + INNER_BUTTON_MARGIN); - - this.rectangleTool = this.initButton(lf("Rectangle"), "\uf096", PaintTool.Rectangle); - this.rectangleTool.translate(1 + TOOL_BUTTON_WIDTH + INNER_BUTTON_MARGIN, TOOL_BUTTON_WIDTH + INNER_BUTTON_MARGIN); - - this.marqueeTool = this.initButton(lf("Marquee"), "\uf113", PaintTool.Marquee, true); - this.marqueeTool.translate(0, (TOOL_BUTTON_WIDTH + INNER_BUTTON_MARGIN) << 1); - - this.setTool(PaintTool.Normal); - } - - protected initPalette() { - this.paletteGroup = this.root.group().id("sprite-editor-palette") - .translate(0, PALETTE_TOP); - - // Draw the background/borders for the entire palette - const bgHeight = COLOR_PREVIEW_HEIGHT + PALETTE_BORDER_WIDTH * 2; - this.paletteGroup.draw("rect") - .fill("#000000") - .size(TOOLBAR_WIDTH, bgHeight); - - this.paletteGroup.draw("rect") - .fill("#000000") - .at(0, bgHeight + COLOR_MARGIN) - .size(TOOLBAR_WIDTH, PALETTE_BORDER_WIDTH + (this.palette.length >> 1) * (PALLETTE_SWATCH_WIDTH + PALETTE_BORDER_WIDTH)); - - // The highlighted swatch has an inner border. The only way to do that in SVG - // is to set the stroke to double the border width and clip the excess away - const clip = this.paletteGroup.def().create("clipPath", "sprite-editor-selected-color") - .clipPathUnits(true); - - clip.draw("rect") - .at(0, 0) - .size(1, 1); - - // Draw a preview of the current color - this.colorPreview = this.paletteGroup.draw("rect") - .at(PALETTE_BORDER_WIDTH, PALETTE_BORDER_WIDTH) - .size(TOOLBAR_WIDTH - PALETTE_BORDER_WIDTH * 2, COLOR_PREVIEW_HEIGHT); - - // Draw the swatches for each color - this.colorSwatches = [] - for (let i = 0; i < this.palette.length; i++) { - const col = i % 2; - const row = Math.floor(i / 2); - - const swatch = this.paletteGroup - .draw("rect") - .size(PALLETTE_SWATCH_WIDTH, PALLETTE_SWATCH_WIDTH) - .at(col ? PALETTE_BORDER_WIDTH * 2 + PALLETTE_SWATCH_WIDTH : PALETTE_BORDER_WIDTH, bgHeight + COLOR_MARGIN + PALETTE_BORDER_WIDTH + row * (PALETTE_BORDER_WIDTH + PALLETTE_SWATCH_WIDTH)) - .fill(this.palette[i]) - .clipPath("url(#sprite-editor-selected-color)") - .onClick(() => this.setColor(i)); - swatch.title(`${i}`) - - this.colorSwatches.push(swatch); - } - - this.setColor(0); - } - - protected initButton(title: string, icon: string, tool: PaintTool, xicon = false) { - const btn = xicon ? mkXIconButton(icon, TOOL_BUTTON_WIDTH) : mkIconButton(icon, TOOL_BUTTON_WIDTH); - const shortcut = getPaintToolShortcut(tool); - if (shortcut) btn.shortcut(shortcut); - btn.title(title); - - btn.onClick(() => { - this.host.setIconsToDefault(); - this.setTool(tool); - }); - this.buttonGroup.appendChild(btn.getElement()); - return btn; - } - - getButtonForTool(tool: PaintTool) { - switch (tool) { - case PaintTool.Normal: - case PaintTool.Line: return this.pencilTool; - case PaintTool.Erase: return this.eraseTool; - case PaintTool.Fill: return this.fillTool; - case PaintTool.Rectangle: - case PaintTool.Circle: return this.rectangleTool; - case PaintTool.Marquee: return this.marqueeTool; - default: return undefined; - } - } - } -} diff --git a/pxtlib/round-matrix-editor/spriteEditor.ts b/pxtlib/round-matrix-editor/spriteEditor.ts deleted file mode 100644 index d0830c305074..000000000000 --- a/pxtlib/round-matrix-editor/spriteEditor.ts +++ /dev/null @@ -1,667 +0,0 @@ -/// -/// -/// -/// -/// -/// - -namespace pxtmatrix { - import svg = pxt.svgUtil; - import lf = pxt.Util.lf; - - export const TOTAL_HEIGHT = 500; - - const PADDING = 10; - - const DROP_DOWN_PADDING = 4; - - // Height of toolbar (the buttons above the canvas) - export const HEADER_HEIGHT = 50; - - // Spacing between the toolbar and the canvas - const HEADER_CANVAS_MARGIN = 10; - - // Height of the bar that displays editor size and info below the canvas - const REPORTER_BAR_HEIGHT = 31; - - // Spacing between the canvas and reporter bar - const REPORTER_BAR_CANVAS_MARGIN = 5; - - // Spacing between palette and paint surface - const SIDEBAR_CANVAS_MARGIN = 10; - - const SIDEBAR_WIDTH = 65; - - // Total allowed height of paint surface - const CANVAS_HEIGHT = TOTAL_HEIGHT - HEADER_HEIGHT - HEADER_CANVAS_MARGIN - - REPORTER_BAR_HEIGHT - REPORTER_BAR_CANVAS_MARGIN - PADDING + DROP_DOWN_PADDING * 2; - - const WIDTH = PADDING + SIDEBAR_WIDTH + SIDEBAR_CANVAS_MARGIN + CANVAS_HEIGHT + PADDING - DROP_DOWN_PADDING * 2; - - export class SpriteEditor implements SideBarHost, SpriteHeaderHost { - private group: svg.Group; - private root: svg.SVG; - - private paintSurface: CanvasGrid; - private sidebar: SideBar; - private header: SpriteHeader; - private bottomBar: ReporterBar; - private gallery: Gallery; - - private state: CanvasState; - - // When changing the size, keep the old bitmap around so that we can restore it - private cachedState: CanvasState; - - private edit: Edit; - private activeTool: PaintTool = PaintTool.Normal; - private toolWidth = 1; - private color = 1; - - private cursorCol = 0; - private cursorRow = 0; - - private undoStack: CanvasState[] = []; - private redoStack: CanvasState[] = []; - - private columns: number = 16; - private rows: number = 16; - private colors: string[]; - - private shiftDown: boolean = false; - private altDown: boolean = false; - private mouseDown: boolean = false; - - private closeHandler: () => void; - - constructor(bitmap: Bitmap, blocksInfo: pxtc.BlocksInfo, protected lightMode = false, colors: string[] = []) { - this.colors = colors - //pxt.appTarget.runtime.palette.slice(1); - - // this.columns = bitmap.width; - // this.rows = bitmap.height; - this.rows = 7 - this.columns = 7 - - this.state = new CanvasState(bitmap.copy()) - - this.root = new svg.SVG(); - this.root.setClass("sprite-canvas-controls"); - this.group = this.root.group(); - this.createDefs(); - - this.paintSurface = new CanvasGrid(this.colors, this.state.copy(), this.lightMode); - - this.paintSurface.drag((col, row) => { - this.debug("gesture (" + PaintTool[this.activeTool] + ")"); - if (!this.altDown) { - this.setCell(col, row, this.color, false); - } - this.bottomBar.updateCursor(col, row); - }); - - this.paintSurface.up((col, row) => { - this.debug("gesture end (" + PaintTool[this.activeTool] + ")"); - if (this.altDown) { - const color = this.state.image.get(col, row); - this.sidebar.setColor(color); - } else { - this.paintSurface.onEditEnd(col, row, this.edit); - if (this.state.floatingLayer && !this.paintSurface.state.floatingLayer) { - this.pushState(true); - this.state = this.paintSurface.state.copy(); - this.rePaint(); - } - this.commit(); - this.shiftAction(); - } - - this.mouseDown = false; - }); - - this.paintSurface.down((col, row) => { - if (!this.altDown) { - this.setCell(col, row, this.color, false); - } - this.mouseDown = true; - }); - - this.paintSurface.move((col, row) => { - this.drawCursor(col, row); - this.shiftAction() - this.bottomBar.updateCursor(col, row); - }); - - this.paintSurface.leave(() => { - if (this.edit) { - this.rePaint(); - if (this.edit.isStarted && !this.shiftDown) { - this.commit(); - } - } - this.bottomBar.hideCursor(); - }); - - this.sidebar = new SideBar(['url("#alpha-background")'].concat(this.colors), this, this.group); - this.sidebar.setColor(this.colors.length >= 3 ? 3 : 1); // colors omits 0 - - this.header = new SpriteHeader(this); - this.gallery = new Gallery(blocksInfo); - this.bottomBar = new ReporterBar(this.group, this, REPORTER_BAR_HEIGHT); - - this.updateUndoRedo(); - } - - setCell(col: number, row: number, color: number, commit: boolean): void { - if (commit) { - this.state.image.set(col, row, color); - this.paintCell(col, row, color); - } - else if (this.edit) { - if (!this.edit.isStarted) { - this.paintSurface.onEditStart(col, row, this.edit); - - if (this.state.floatingLayer && !this.paintSurface.state.floatingLayer) { - this.pushState(true); - this.state = this.paintSurface.state.copy(); - } - } - this.edit.update(col, row); - this.cursorCol = col; - this.cursorRow = row; - this.paintEdit(this.edit, col, row); - } - } - - render(el: HTMLDivElement): void { - el.appendChild(this.header.getElement()); - el.appendChild(this.gallery.getElement()); - this.paintSurface.render(el); - el.appendChild(this.root.el); - this.layout(); - this.root.attr({ "width": this.outerWidth() + "px", "height": this.outerHeight() + "px" }); - this.root.el.style.position = "absolute"; - this.root.el.style.top = "0px"; - this.root.el.style.left = "0px"; - } - - layout(): void { - if (!this.root) { - return; - } - - this.paintSurface.setGridDimensions(CANVAS_HEIGHT); - - // The width of the palette + editor - const paintAreaTop = HEADER_HEIGHT + HEADER_CANVAS_MARGIN; - const paintAreaLeft = PADDING + SIDEBAR_WIDTH + SIDEBAR_CANVAS_MARGIN; - - this.sidebar.translate(PADDING, paintAreaTop); - this.paintSurface.updateBounds(paintAreaTop, paintAreaLeft, CANVAS_HEIGHT, CANVAS_HEIGHT); - this.bottomBar.layout(paintAreaTop + CANVAS_HEIGHT + REPORTER_BAR_CANVAS_MARGIN, paintAreaLeft, CANVAS_HEIGHT); - - this.gallery.layout(0, HEADER_HEIGHT, TOTAL_HEIGHT - HEADER_HEIGHT); - this.header.layout(); - } - - rePaint() { - this.paintSurface.repaint(); - } - - setActiveColor(color: number, setPalette = false) { - if (setPalette) { - } - else if (this.color != color) { - this.color = color; - - // If the user is erasing, go back to pencil - if (this.activeTool === PaintTool.Erase) { - this.sidebar.setTool(PaintTool.Normal); - } else { - this.updateEdit(); - } - } - } - - setActiveTool(tool: PaintTool) { - if (this.activeTool != tool) { - this.activeTool = tool; - this.updateEdit() - } - } - - setToolWidth(width: number) { - if (this.toolWidth != width) { - this.toolWidth = width; - this.updateEdit(); - } - } - - initializeUndoRedo(undoStack: CanvasState[], redoStack: CanvasState[]) { - if (undoStack) { - this.undoStack = undoStack; - } - if (redoStack) { - this.redoStack = redoStack; - } - this.updateUndoRedo(); - } - - getUndoStack() { - return this.undoStack.slice(); - } - - getRedoStack() { - return this.redoStack.slice(); - } - - undo() { - if (this.undoStack.length) { - this.debug("undo"); - const todo = this.undoStack.pop(); - this.pushState(false); - - // The current state is at the top of the stack unless the user has pressed redo, so - // we need to discard it - if (todo.equals(this.state)) { - this.undo(); - return; - } - this.restore(todo); - } - this.updateUndoRedo(); - } - - redo() { - if (this.redoStack.length) { - this.debug("redo"); - const todo = this.redoStack.pop(); - this.pushState(true); - this.restore(todo); - } - this.updateUndoRedo(); - } - - resize(width: number, height: number) { - if (!this.cachedState) { - this.cachedState = this.state.copy(); - this.undoStack.push(this.cachedState) - this.redoStack = []; - } - this.state.image = resizeBitmap(this.cachedState.image, width, height); - this.afterResize(true); - } - - setSizePresets(presets: [number, number][]) { - this.bottomBar.setSizePresets(presets, this.columns, this.rows); - } - - canvasWidth() { - return this.columns; - } - - canvasHeight() { - return this.rows; - } - - outerWidth() { - return WIDTH; - } - - outerHeight() { - return TOTAL_HEIGHT; - } - - bitmap() { - return this.state; - } - - showGallery() { - this.gallery.show((result: Bitmap, err?: string) => { - if (err && err !== "cancelled") { - console.error(err); - } - else if (result) { - this.redoStack = []; - this.pushState(true); - this.restore(new CanvasState(result)); - this.hideGallery(); - this.header.toggle.toggle(true); - } - }); - } - - hideGallery() { - this.gallery.hide(); - } - - closeEditor() { - if (this.closeHandler) { - const ch = this.closeHandler; - this.closeHandler = undefined; - ch(); - } - if (this.state.floatingLayer) { - this.state.mergeFloatingLayer(); - this.pushState(true); - } - } - - onClose(handler: () => void) { - this.closeHandler = handler; - } - - switchIconTo(tool: PaintTool) { - if (this.activeTool === tool) return; - - const btn = this.sidebar.getButtonForTool(tool) as TextButton; - - switch (tool) { - case PaintTool.Rectangle: - updateIcon(btn, "\uf096", lf("Rectangle")); - break; - case PaintTool.Circle: - updateIcon(btn, "\uf10c", lf("Circle")); - break; - case PaintTool.Normal: - updateIcon(btn, "\uf040", lf("Pencil")); - break; - case PaintTool.Line: - updateIcon(btn, "\uf07e", lf("Line")); - break; - default: // no alternate icon, do not change - return; - } - - btn.onClick(() => { - if (tool != PaintTool.Circle && tool != PaintTool.Line) { - this.setIconsToDefault(); - this.sidebar.setTool(tool); - } - }); - - function updateIcon(button: TextButton, text: string, title: string) { - const shortcut = getPaintToolShortcut(tool); - - button.setText(text); - button.title(title); - button.shortcut(shortcut); - } - } - - setIconsToDefault() { - this.switchIconTo(PaintTool.Rectangle); - this.switchIconTo(PaintTool.Normal); - } - - private keyDown = (event: KeyboardEvent) => { - if (event.keyCode == 16) { // Shift - this.shiftDown = true; - this.shiftAction(); - } - - if (event.keyCode === 18) { // Alt - this.discardEdit(); - this.paintSurface.setEyedropperMouse(true); - this.altDown = true; - } - - if (this.state.floatingLayer) { - let didSomething = true; - - switch (event.keyCode) { - case 8: // backspace - case 46: // delete - event.preventDefault(); - event.stopPropagation(); - this.state.floatingLayer = undefined; - break; - case 37: // Left arrow - this.state.layerOffsetX--; - break; - case 38: // Up arrow - this.state.layerOffsetY--; - break; - case 39: // Right arrow - this.state.layerOffsetX++; - break; - case 40: // Down arrow - this.state.layerOffsetY++; - break; - default: - didSomething = false; - } - - if (didSomething) { - this.updateEdit(); - this.pushState(true); - this.paintSurface.restore(this.state, true); - } - } - - const tools = [ - PaintTool.Fill, - PaintTool.Normal, - PaintTool.Rectangle, - PaintTool.Erase, - PaintTool.Circle, - PaintTool.Line, - PaintTool.Marquee - ] - - tools.forEach(tool => { - if (event.key === getPaintToolShortcut(tool)) { - this.setIconsToDefault(); - this.switchIconTo(tool); - this.sidebar.setTool(tool); - } - }); - - const zeroKeyCode = 48; - const nineKeyCode = 57; - - if (event.keyCode >= zeroKeyCode && event.keyCode <= nineKeyCode) { - let color = event.keyCode - zeroKeyCode; - if (this.shiftDown) { - color += 9; - } - if (color <= this.colors.length) { // colors omits 0 - this.sidebar.setColor(color); - } - } - } - - private keyUp = (event: KeyboardEvent) => { - // If not drawing a circle, switch back to Rectangle and Pencil - if (event.keyCode === 16) { // Shift - this.shiftDown = false; - this.clearShiftAction(); - } else if (event.keyCode === 18) { // Alt - this.altDown = false; - this.paintSurface.setEyedropperMouse(false); - this.updateEdit(); - } - } - - private undoRedoEvent = (event: KeyboardEvent) => { - const controlOrMeta = event.ctrlKey || event.metaKey; // ctrl on windows, meta on mac - if (event.key === "Undo" || (controlOrMeta && event.key === "z")) { - this.undo(); - event.preventDefault(); - event.stopPropagation(); - } else if (event.key === "Redo" || (controlOrMeta && event.key === "y")) { - this.redo(); - event.preventDefault(); - event.stopPropagation(); - } - } - - addKeyListeners() { - document.addEventListener("keydown", this.keyDown); - document.addEventListener("keyup", this.keyUp); - document.addEventListener("keydown", this.undoRedoEvent, true); - } - - removeKeyListeners() { - document.removeEventListener("keydown", this.keyDown); - document.removeEventListener("keyup", this.keyUp); - document.removeEventListener("keydown", this.undoRedoEvent, true); - this.paintSurface.removeMouseListeners(); - } - - private afterResize(showOverlay: boolean) { - this.columns = this.state.width; - this.rows = this.state.height; - this.paintSurface.restore(this.state, true); - this.bottomBar.updateDimensions(this.columns, this.rows); - this.layout(); - - if (showOverlay) this.paintSurface.showResizeOverlay(); - - // Canvas size changed and some edits rely on that (like paint) - this.updateEdit(); - } - - private drawCursor(col: number, row: number) { - if (this.edit) { - this.paintSurface.drawCursor(this.edit, col, row); - } - } - - private paintEdit(edit: Edit, col: number, row: number, gestureEnd = false) { - this.paintSurface.restore(this.state); - this.paintSurface.applyEdit(edit, col, row, gestureEnd); - } - - private commit() { - if (this.edit) { - if (this.cachedState) { - this.cachedState = undefined; - } - this.pushState(true); - this.paintEdit(this.edit, this.cursorCol, this.cursorRow, true); - this.state = this.paintSurface.state.copy(); - this.updateEdit(); - this.redoStack = []; - } - } - - private pushState(undo: boolean) { - const stack = undo ? this.undoStack : this.redoStack; - if (stack.length && this.state.equals(stack[stack.length - 1])) { - // Don't push empty commits - return; - } - - stack.push(this.state.copy()); - this.updateUndoRedo(); - } - - private discardEdit() { - if (this.edit) { - this.edit = undefined; - this.rePaint(); - } - } - - private updateEdit() { - if (!this.altDown) { - this.edit = this.newEdit(); - } - } - - private restore(state: CanvasState) { - if (state.width !== this.state.width || state.height !== this.state.height) { - this.state = state; - this.afterResize(false); - } - else { - this.state = state.copy(); - this.paintSurface.restore(state, true); - } - } - - private updateUndoRedo() { - this.bottomBar.updateUndoRedo(this.undoStack.length === 0, this.redoStack.length === 0) - } - - private paintCell(col: number, row: number, color: number) { - this.paintSurface.writeColor(col, row, color); - } - - private newEdit() { - switch (this.activeTool) { - case PaintTool.Normal: - return new PaintEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Rectangle: - return new OutlineEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Outline: - return new OutlineEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Line: - return new LineEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Circle: - return new CircleEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Erase: - return new PaintEdit(this.columns, this.rows, 0, this.toolWidth); - case PaintTool.Fill: - return new FillEdit(this.columns, this.rows, this.color, this.toolWidth); - case PaintTool.Marquee: - return new MarqueeEdit(this.columns, this.rows, this.color, this.toolWidth); - } - } - - private shiftAction() { - if (!this.shiftDown || this.altDown) - return; - - switch (this.activeTool) { - case PaintTool.Line: - case PaintTool.Rectangle: - case PaintTool.Circle: - this.setCell(this.paintSurface.mouseCol, this.paintSurface.mouseRow, this.color, false); - break; - } - } - - private clearShiftAction() { - if (this.mouseDown) - return; - - switch (this.activeTool) { - case PaintTool.Line: - case PaintTool.Rectangle: - case PaintTool.Circle: - this.updateEdit(); - this.paintSurface.restore(this.state, true); - break; - } - } - - private debug(msg: string) { - // if (this.debugText) { - // this.debugText.text("DEBUG: " + msg); - // } - } - - private createDefs() { - this.root.define(defs => { - const p = defs.create("pattern", "alpha-background") - .size(10, 10) - .units(svg.PatternUnits.userSpaceOnUse); - - p.draw("rect") - .at(0, 0) - .size(10, 10) - .fill("white"); - p.draw("rect") - .at(0, 0) - .size(5, 5) - .fill("#dedede"); - p.draw("rect") - .at(5, 5) - .size(5, 5) - .fill("#dedede"); - }) - } - } -} diff --git a/pxtlib/round-matrix-editor/tools.ts b/pxtlib/round-matrix-editor/tools.ts deleted file mode 100644 index 0f1a0b919c07..000000000000 --- a/pxtlib/round-matrix-editor/tools.ts +++ /dev/null @@ -1,483 +0,0 @@ -/// - -namespace pxtmatrix { - export enum PaintTool { - Normal = 0, - Rectangle = 1, - Outline = 2, - Circle = 3, - Fill = 4, - Line = 5, - Erase = 6, - Marquee = 7, - } - - export function getPaintToolShortcut(tool: PaintTool) { - switch (tool) { - case PaintTool.Normal: - return "p"; - case PaintTool.Rectangle: - return "r"; - case PaintTool.Circle: - return "c"; - case PaintTool.Fill: - return "b"; - case PaintTool.Line: - return "l"; - case PaintTool.Erase: - return "e"; - case PaintTool.Marquee: - return "s"; - default: - return undefined; - } - } - - export class Cursor { - offsetX: number; - offsetY: number; - constructor(public readonly width: number, public readonly height: number) { - this.offsetX = -(width >> 1); - this.offsetY = -(height >> 1); - } - } - - export abstract class Edit { - protected startCol: number; - protected startRow: number; - isStarted: boolean; - showPreview: boolean; - - constructor (protected canvasWidth: number, protected canvasHeight: number, public color: number, protected toolWidth: number) { - } - - public abstract update(col: number, row: number): void; - protected abstract doEditCore(state: CanvasState): void; - - public doEdit(state: CanvasState): void { - if (this.isStarted) { - this.doEditCore(state); - } - } - - - start(cursorCol: number, cursorRow: number, state: CanvasState) { - this.isStarted = true; - this.startCol = cursorCol; - this.startRow = cursorRow; - - state.mergeFloatingLayer(); - } - - - end(col: number, row: number, state: CanvasState): void { - - } - - - getCursor(): Cursor { - return new Cursor(this.toolWidth, this.toolWidth); - } - - drawCursor(col: number, row: number, draw: (c: number, r: number) => void) { - draw(col, row); - } - } - - export abstract class SelectionEdit extends Edit { - protected endCol: number; - protected endRow: number; - protected isDragged: boolean; - - update(col: number, row: number) { - this.endCol = col; - this.endRow = row; - - if (!this.isDragged && !(col == this.startCol && row == this.startRow)) { - this.isDragged = true; - } - } - - protected topLeft(): Coord { - return { - x: Math.min(this.startCol, this.endCol), - y: Math.min(this.startRow, this.endRow) - }; - } - - protected bottomRight(): Coord { - return { - x: Math.max(this.startCol, this.endCol), - y: Math.max(this.startRow, this.endRow) - }; - } - } - - /** - * Regular old drawing tool - */ - export class PaintEdit extends Edit { - protected mask: Bitmask; - showPreview = true; - - constructor (canvasWidth: number, canvasHeight: number, color: number, toolWidth: number) { - super(canvasWidth, canvasHeight, color, toolWidth); - this.mask = new Bitmask(canvasWidth, canvasHeight); - } - - update(col: number, row: number) { - // Interpolate (Draw a line) from startCol, startRow to col, row - this.interpolate(this.startCol, this.startRow, col, row); - - this.startCol = col; - this.startRow = row; - } - - // https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm - protected interpolate(x0: number, y0: number, x1: number, y1: number) { - const dx = x1 - x0; - const dy = y1 - y0; - const draw = (c: number, r: number) => this.mask.set(c, r); - if (dx === 0) { - const startY = dy >= 0 ? y0 : y1; - const endY = dy >= 0 ? y1 : y0; - for (let y = startY; y <= endY; y++) { - this.drawCore(x0, y, draw); - } - return; - } - - const xStep = dx > 0 ? 1 : -1; - const yStep = dy > 0 ? 1 : -1; - const dErr = Math.abs(dy / dx); - - let err = 0; - let y = y0; - for (let x = x0; xStep > 0 ? x <= x1 : x >= x1; x += xStep) { - this.drawCore(x, y, draw); - err += dErr; - while (err >= 0.5) { - if (yStep > 0 ? y <= y1 : y >= y1) { - this.drawCore(x, y, draw); - } - y += yStep; - err -= 1; - } - } - } - - protected doEditCore(state: CanvasState) { - for (let c = 0; c < state.width; c++) { - for (let r = 0; r < state.height; r++) { - if (this.mask.get(c, r)) { - state.image.set(c, r, this.color); - } - } - } - } - - drawCursor(col: number, row: number, draw: (c: number, r: number) => void) { - this.drawCore(col, row, draw); - } - - protected drawCore(col: number, row: number, setPixel: (col: number, row: number) => void) { - col = col - Math.floor(this.toolWidth / 2); - row = row - Math.floor(this.toolWidth / 2); - for (let i = 0; i < this.toolWidth; i++) { - for (let j = 0; j < this.toolWidth; j++) { - const c = col + i; - const r = row + j; - - if (c >= 0 && c < this.canvasWidth && r >= 0 && r < this.canvasHeight) { - setPixel(col + i, row + j); - } - } - } - } - } - - /** - * Tool for drawing filled rectangles - */ - export class RectangleEdit extends SelectionEdit { - showPreview = true; - - protected doEditCore(state: CanvasState) { - const tl = this.topLeft(); - const br = this.bottomRight(); - for (let c = tl.x; c <= br.x; c++) { - for (let r = tl.y; r <= br.y; r++) { - state.image.set(c, r, this.color); - } - } - } - } - - /** - * Tool for drawing empty rectangles - */ - export class OutlineEdit extends SelectionEdit { - showPreview = true; - - protected doEditCore(state: CanvasState) { - let tl = this.topLeft(); - tl.x -= this.toolWidth >> 1; - tl.y -= this.toolWidth >> 1; - - let br = this.bottomRight(); - br.x += this.toolWidth >> 1; - br.y += this.toolWidth >> 1; - - for (let i = 0; i < this.toolWidth; i++) { - this.drawRectangle(state, - {x: tl.x + i, y: tl.y + i}, - {x: br.x - i, y: br.y - i} - ); - } - } - - protected drawRectangle(state: CanvasState, tl: Coord, br: Coord) { - if (tl.x > br.x || tl.y > br.y) return; - - for (let c = tl.x; c <= br.x; c++) { - state.image.set(c, tl.y, this.color); - state.image.set(c, br.y, this.color); - } - for (let r = tl.y; r <= br.y; r++) { - state.image.set(tl.x, r, this.color); - state.image.set(br.x, r, this.color); - } - } - - drawCursor(col: number, row: number, draw: (c: number, r: number) => void) { - this.drawCore(col, row, draw); - } - - protected drawCore(col: number, row: number, setPixel: (col: number, row: number) => void) { - col = col - Math.floor(this.toolWidth / 2); - row = row - Math.floor(this.toolWidth / 2); - for (let i = 0; i < this.toolWidth; i++) { - for (let j = 0; j < this.toolWidth; j++) { - const c = col + i; - const r = row + j; - - if (c >= 0 && c < this.canvasWidth && r >= 0 && r < this.canvasHeight) { - setPixel(col + i, row + j); - } - } - } - } - - } - - /** - * Tool for drawing straight lines - */ - export class LineEdit extends SelectionEdit { - showPreview = true; - - protected doEditCore(state: CanvasState) { - this.bresenham(this.startCol, this.startRow, this.endCol, this.endRow, state); - } - - // https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm - protected bresenham(x0: number, y0: number, x1: number, y1: number, state: CanvasState) { - const dx = x1 - x0; - const dy = y1 - y0; - const draw = (c: number, r: number) => state.image.set(c, r, this.color); - if (dx === 0) { - const startY = dy >= 0 ? y0 : y1; - const endY = dy >= 0 ? y1 : y0; - for (let y = startY; y <= endY; y++) { - this.drawCore(x0, y, draw); - } - return; - } - - const xStep = dx > 0 ? 1 : -1; - const yStep = dy > 0 ? 1 : -1; - const dErr = Math.abs(dy / dx); - - let err = 0; - let y = y0; - for (let x = x0; xStep > 0 ? x <= x1 : x >= x1; x += xStep) { - this.drawCore(x, y, draw); - err += dErr; - while (err >= 0.5) { - if (yStep > 0 ? y <= y1 : y >= y1) { - this.drawCore(x, y, draw); - } - y += yStep; - err -= 1; - } - } - } - - drawCursor(col: number, row: number, draw: (c: number, r: number) => void) { - this.drawCore(col, row, draw); - } - - // This is surely not the most efficient approach for drawing thick lines... - protected drawCore(col: number, row: number, draw: (c: number, r: number) => void) { - col = col - Math.floor(this.toolWidth / 2); - row = row - Math.floor(this.toolWidth / 2); - for (let i = 0; i < this.toolWidth; i++) { - for (let j = 0; j < this.toolWidth; j++) { - const c = col + i; - const r = row + j; - - draw(c, r); - } - } - } - } - - /** - * Tool for circular outlines - */ - export class CircleEdit extends SelectionEdit { - showPreview = true; - - protected doEditCore(state: CanvasState) { - const tl = this.topLeft(); - const br = this.bottomRight(); - const dx = br.x - tl.x; - const dy = br.y - tl.y; - - const radius = Math.floor(Math.hypot(dx, dy)); - const cx = this.startCol; - const cy = this.startRow; - - this.midpoint(cx, cy, radius, state); - } - - // https://en.wikipedia.org/wiki/Midpoint_circle_algorithm - midpoint(cx: number, cy: number, radius: number, state: CanvasState) { - let x = radius - 1; - let y = 0; - let dx = 1; - let dy = 1; - let err = dx - (radius * 2); - while (x >= y) { - state.image.set(cx + x, cy + y, this.color); - state.image.set(cx + x, cy - y, this.color); - state.image.set(cx + y, cy + x, this.color); - state.image.set(cx + y, cy - x, this.color); - state.image.set(cx - y, cy + x, this.color); - state.image.set(cx - y, cy - x, this.color); - state.image.set(cx - x, cy + y, this.color); - state.image.set(cx - x, cy - y, this.color); - if (err <= 0) { - y++; - err += dy; - dy += 2; - } - if (err > 0) { - x--; - dx += 2; - err += dx - (radius * 2); - } - } - } - - getCursor(): Cursor { - return new Cursor(1, 1); - } - } - - - export class FillEdit extends Edit { - protected col: number; - protected row: number; - showPreview = true; - - start(col: number, row: number, state: CanvasState) { - this.isStarted = true; - this.col = col; - this.row = row; - - state.mergeFloatingLayer(); - } - - update(col: number, row: number) { - this.col = col; - this.row = row; - } - - protected doEditCore(state: CanvasState) { - const replColor = state.image.get(this.col, this.row); - if (replColor === this.color) { - return; - } - - const mask = new Bitmask(state.width, state.height); - mask.set(this.col, this.row); - const q: Coord[] = [{x: this.col, y: this.row}]; - while (q.length) { - const curr = q.pop(); - if (state.image.get(curr.x, curr.y) === replColor) { - state.image.set(curr.x, curr.y, this.color); - tryPush(curr.x + 1, curr.y); - tryPush(curr.x - 1, curr.y); - tryPush(curr.x, curr.y + 1); - tryPush(curr.x, curr.y - 1); - } - } - - function tryPush(x: number, y: number) { - if (x >= 0 && x < mask.width && y >= 0 && y < mask.height && !mask.get(x, y)) { - mask.set(x, y); - q.push({x: x, y: y}); - } - } - } - - getCursor(): Cursor { - return new Cursor(1, 1); - } - } - - - export class MarqueeEdit extends SelectionEdit { - protected isMove = false; - showPreview = false; - - start(cursorCol: number, cursorRow: number, state: CanvasState) { - this.isStarted = true; - this.startCol = cursorCol; - this.startRow = cursorRow; - if (state.floatingLayer) { - if (state.inFloatingLayer(cursorCol, cursorRow)) { - this.isMove = true; - } else { - state.mergeFloatingLayer(); - } - } - } - - end(cursorCol: number, cursorRow: number, state: CanvasState) { - if (!this.isDragged && state.floatingLayer) { - state.mergeFloatingLayer(); - } - } - - protected doEditCore(state: CanvasState): void { - const tl = this.topLeft(); - const br = this.bottomRight(); - - if (this.isDragged) { - if (this.isMove) { - state.layerOffsetX = state.floatingLayer.x0 + this.endCol - this.startCol; - state.layerOffsetY = state.floatingLayer.y0 + this.endRow - this.startRow; - } - else { - state.copyToLayer(tl.x, tl.y, br.x - tl.x + 1, br.y - tl.y + 1, true); - } - } - } - - getCursor(): Cursor { - return undefined; - } - } -} diff --git a/pxtlib/service.ts b/pxtlib/service.ts index 19fd9fb262c6..2d5a2e060d6d 100644 --- a/pxtlib/service.ts +++ b/pxtlib/service.ts @@ -706,6 +706,7 @@ namespace ts.pxtc { const langLower = lang.toLowerCase(); const attrJsLocsKey = langLower + "|jsdoc"; const attrBlockLocsKey = langLower + "|block"; + const attrAriaLabelLocsKey = langLower + "|ariaLabel"; const loc = await mainPkg.localizationStringsAsync(lang); if (apiLocalizationStrings) @@ -717,7 +718,12 @@ namespace ts.pxtc { const altLocSrcFn = altLocSrc && apis.byQName[altLocSrc]; if (fn.attributes._untranslatedJsDoc) fn.attributes.jsDoc = fn.attributes._untranslatedJsDoc; - if (fn.attributes._untranslatedBlock) fn.attributes.jsDoc = fn.attributes._untranslatedBlock; + if (fn.attributes._untranslatedBlock) fn.attributes.block = fn.attributes._untranslatedBlock; + if (fn.attributes._untranslatedAriaLabel) fn.attributes.ariaLabel = fn.attributes._untranslatedAriaLabel; + if (fn.attributes._untranslatedParamDefl) { + fn.attributes.paramDefl = U.clone(fn.attributes._untranslatedParamDefl); + syncParameterDefaults(fn); + } const lookupLoc = (locSuff: string, attrKey: string) => { return loc[fn.qName + locSuff] || fn.attributes.locs?.[attrKey] @@ -743,6 +749,7 @@ namespace ts.pxtc { const nsDoc = loc['{id:category}' + Util.capitalize(fn.qName)]; let locBlock = loc[`${fn.qName}|block`] || fn.attributes.locs?.[attrBlockLocsKey]; + const locAriaLabel = loc[`${fn.qName}|ariaLabel`] || fn.attributes.locs?.[attrAriaLabelLocsKey]; if (fn.attributes.block) { const comp = pxt.blocks.compileInfo(fn); @@ -756,6 +763,34 @@ namespace ts.pxtc { } } } + const paramsWithLabels = comp.thisParameter ? [comp.thisParameter, ...comp.parameters] : comp.parameters; + for (const param of paramsWithLabels) { + if (param.labelLocalizationKey) { + const locSuff = param.labelLocalizationKey.slice(fn.qName.length); + const paramLabel = lookupLoc(locSuff, langLower + locSuff); + if (paramLabel) { + setBlockTranslationCacheKey(param.labelLocalizationKey, paramLabel); + } + else { + clearBlockTranslationCacheKey(param.labelLocalizationKey); + } + } + + const defaultString = pxt.blocks.parameterDefaultToLocalizationString(param.defaultValue, param.type); + const defaultLocalizationKey = pxt.blocks.parameterDefaultLocalizationKey(fn.qName, param.actualName); + if (defaultLocalizationKey && defaultString !== undefined) { + const locSuff = defaultLocalizationKey.slice(fn.qName.length); + const paramDefault = lookupLoc(locSuff, langLower + locSuff); + if (paramDefault !== undefined) { + if (!fn.attributes._untranslatedParamDefl) { + fn.attributes._untranslatedParamDefl = U.clone(fn.attributes.paramDefl || {}); + } + if (!fn.attributes.paramDefl) fn.attributes.paramDefl = {}; + fn.attributes.paramDefl[param.actualName] = pxt.blocks.localizationStringToParameterDefault(paramDefault); + syncParameterDefaults(fn); + } + } + } } if (!locBlock && altLocSrcFn) { @@ -816,12 +851,27 @@ namespace ts.pxtc { } else { updateBlockDef(fn.attributes); } + + if (locAriaLabel) { + if (!fn.attributes._untranslatedAriaLabel) { + fn.attributes._untranslatedAriaLabel = fn.attributes.ariaLabel; + } + fn.attributes.ariaLabel = locAriaLabel; + } fn.attributes._translatedLanguageCode = lang; }); return cleanLocalizations(apis); } + function syncParameterDefaults(fn: SymbolInfo) { + if (!fn.parameters) return; + + for (const param of fn.parameters) { + param.default = fn.attributes.paramDefl && fn.attributes.paramDefl[param.name]; + } + } + function cleanLocalizations(apis: ApisInfo) { Util.values(apis.byQName) .filter(fb => fb.attributes.block && /^{[^:]+:[^}]+}/.test(fb.attributes.block)) @@ -901,8 +951,12 @@ namespace ts.pxtc { "weight", "imageLiteral", "gridLiteral", + "colorGridLiteral", "topblockWeight", - "inlineInputModeLimit" + "inlineInputModeLimit", + "gridLiteralVerticalSpacing", + "gridLiteralHorizontalSpacing", + "gridLiteralBorderRadius", ]; const booleanAttributes: (keyof CommentAttrs)[] = [ @@ -923,6 +977,7 @@ namespace ts.pxtc { "argsNullable", "compileHiddenArguments", "expandArgumentsInToolbox", + "gridLiteralUseProjectPalette" ]; export function parseCommentString(cmt: string): CommentAttrs { @@ -945,6 +1000,9 @@ namespace ts.pxtc { } else if (U.startsWith(n, "jsdoc.loc.")) { if (!res.locs) res.locs = {}; res.locs[n.slice("jsdoc.loc.".length).toLowerCase() + "|jsdoc"] = v; + } else if (U.startsWith(n, "ariaLabel.loc.")) { + if (!res.locs) res.locs = {}; + res.locs[n.slice("ariaLabel.loc.".length).toLowerCase() + "|ariaLabel"] = v; } else if (U.contains(n, ".loc.")) { if (!res.locs) res.locs = {}; const p = n.slice(0, n.indexOf('.loc.')); @@ -986,6 +1044,9 @@ namespace ts.pxtc { const key = n.slice(n.indexOf('.shadowOptions.') + 15, n.length); if (!res.paramShadowOptions[field]) res.paramShadowOptions[field] = {}; res.paramShadowOptions[field][key] = v + } else if (U.endsWith(n, ".label")) { + if (!res.paramLabels) res.paramLabels = {}; + res.paramLabels[n.slice(0, n.length - 6)] = v; } else if (U.endsWith(n, ".min")) { if (!res.paramMin) res.paramMin = {} res.paramMin[n.slice(0, n.length - 4)] = v @@ -1740,6 +1801,7 @@ namespace ts.pxtc.service { blocks?: BlocksOptions; extensions?: ExtensionsOptions; projectSearch?: ProjectSearchOptions; + homeSearch?: HomeSearchOptions; snippet?: SnippetOptions; runtime?: pxt.RuntimeOptions; light?: boolean; // in light mode? @@ -1777,6 +1839,7 @@ namespace ts.pxtc.service { imageUrl?: string; type?: ExtensionType; learnMoreUrl?: string; + installed?: boolean; pkgConfig?: pxt.PackageConfig; // Added if the type is Bundled repo?: pxt.github.GitRepo; //Added if the type is Github VVN TODO ADD THIS @@ -1807,6 +1870,19 @@ namespace ts.pxtc.service { id?: string; } + export interface HomeSearchOptions { + term: string; + entries: HomeSearchInfo[]; + } + + export interface HomeSearchInfo { + id: string; + name: string; + description?: string; + tags?: string; + searchTerms?: string; + } + export interface BlocksOptions { bannedCategories?: string[]; } diff --git a/pxtlib/toolbox.ts b/pxtlib/toolbox.ts index d49bac0e586d..6a4d60367a67 100644 --- a/pxtlib/toolbox.ts +++ b/pxtlib/toolbox.ts @@ -91,6 +91,10 @@ namespace pxt.toolbox { return ""; } + export function isImageIcon(icon: string): boolean { + return icon.length > 1 && /[/.]/.test(icon); + } + export function advancedTitle() { return Util.lf("{id:category}Advanced"); } export function addPackageTitle() { return Util.lf("{id:category}Extensions"); } export function recipesTitle() { return Util.lf("{id:category}Tutorials"); } diff --git a/pxtlib/tutorial.ts b/pxtlib/tutorial.ts index edf671a77736..0f706e5ea5e9 100644 --- a/pxtlib/tutorial.ts +++ b/pxtlib/tutorial.ts @@ -619,4 +619,17 @@ ${code} if (!metadata) return false; return !!(metadata.hideFromProjects || metadata.hideIteration); } + + export function mergeTutorialDependencies(projectDependencies: pxt.Map, tutorialDependencies: pxt.Map): pxt.Map { + const merged: pxt.Map = { ...projectDependencies }; + for (const dep of Object.keys(tutorialDependencies)) { + const ver = tutorialDependencies[dep]; + if (ver.toLowerCase() === "remove") { + delete merged[dep]; + } else { + merged[dep] = ver; + } + } + return merged; + } } diff --git a/pxtlib/util.ts b/pxtlib/util.ts index 2fe16e941fa4..37812719ef1f 100644 --- a/pxtlib/util.ts +++ b/pxtlib/util.ts @@ -593,7 +593,7 @@ namespace ts.pxtc.Util { }, ms); }); - return Promise.race([ promise, timeoutPromise ]) + return Promise.race([promise, timeoutPromise]) .then(output => { // clear any dangling timeout if (res) { @@ -1253,7 +1253,7 @@ namespace ts.pxtc.Util { "eu": { englishName: "Basque", localizedName: "Euskara" }, "fa": { englishName: "Persian", localizedName: "فارسی" }, "fi": { englishName: "Finnish", localizedName: "Suomi" }, - "fil": {englishName: "Filipino", localizedName: "Filipino"}, + "fil": { englishName: "Filipino", localizedName: "Filipino" }, "fo": { englishName: "Faroese", localizedName: "føroyskt" }, "fr": { englishName: "French", localizedName: "Français" }, "fr-CA": { englishName: "French (Canada)", localizedName: "Français (Canada)" }, @@ -1279,6 +1279,7 @@ namespace ts.pxtc.Util { "kmr": { englishName: "Kurmanji (Kurdish)", localizedName: "کورمانجی‎" }, "kn": { englishName: "Kannada", localizedName: "ಕನ್ನಡ" }, "ko": { englishName: "Korean", localizedName: "한국어" }, + "lo": { englishName: "Lao", localizedName: "ພາສາລາວ" }, "lt": { englishName: "Lithuanian", localizedName: "Lietuvių" }, "lv": { englishName: "Latvian", localizedName: "Latviešu" }, "ml-IN": { englishName: "Malayalam", localizedName: "മലയാളം" }, @@ -1363,7 +1364,7 @@ namespace ts.pxtc.Util { .then((translations) => { if (translations) { setUserLanguage(code); - pxt.analytics?.addDefaultProperties({lang: code}); //set the new language in analytics. + pxt.analytics?.addDefaultProperties({ lang: code }); //set the new language in analytics. setLocalizedStrings(translations); } @@ -1372,8 +1373,10 @@ namespace ts.pxtc.Util { targetId, baseUrl, code, liveUpdateStrings, ts.pxtc.Util.TranslationsKind.Apis) .then(trs => { - if (trs) + if (trs) { ts.pxtc.apiLocalizationStrings = trs; + copySubcategoryStrings(trs); + } }); }); } @@ -1467,6 +1470,23 @@ namespace ts.pxtc.Util { } } + export function copySubcategoryStrings(apis: pxt.Map) { + const t = getLocalizedStrings(); + + if (apis) { + // Subcategories and groups are translated in their respective package, but are not really APIs so + // there's no way for the translation to be saved with a block. To work around this, we copy the + // translations to the editor translations. + for (const key of Object.keys(apis)) { + if (U.startsWith(key, "{id:group}") || U.startsWith(key, "{id:subcategory}")) { + t[key] = apis[key]; + } + } + + setLocalizedStrings(t); + } + } + export let httpRequestCoreAsync: (options: HttpRequestOptions) => Promise; export let sha256: (hashData: string) => string; export let getRandomBuf: (buf: Uint8Array) => void; @@ -1977,7 +1997,7 @@ namespace ts.pxtc.Util { * Attempts to remove commonly leaked PII * @param property The property which will be removed if it contains user data * @returns The new value for the property - * + * * Taken from https://github.com/microsoft/vscode/blob/main/src/vs/platform/telemetry/common/telemetryUtils.ts */ function removePropertiesWithPossibleUserInfo(property: string): string { diff --git a/pxtlib/webusb.ts b/pxtlib/webusb.ts index 6ff2d0ba9ebc..1b2a47dda608 100644 --- a/pxtlib/webusb.ts +++ b/pxtlib/webusb.ts @@ -601,7 +601,7 @@ namespace pxt.usb { } export async function getReasonUnavailable(): Promise<"electron" | "notimpl" | "oldwindows" | "security" | undefined> { - if (pxt.BrowserUtils.isElectron()) { + if (pxt.BrowserUtils.isElectron() && !pxt.BrowserUtils.isPxtElectronWebUSBDeployEnabled()) { return "electron"; } diff --git a/pxtpy/converter.ts b/pxtpy/converter.ts index a121e120d36e..46fc0dc76be3 100644 --- a/pxtpy/converter.ts +++ b/pxtpy/converter.ts @@ -1882,7 +1882,7 @@ namespace pxt.py { } let lExp: B.JsNode | undefined = undefined; - if (annotation && annotAsType) { + if (annotation && annotAsType && target.kind === "Name" && (target as py.Name).isdef) { // if we have a type annotation, emit it in these cases if the r-value is: // - null / undefined // - empty list diff --git a/pxtsim/accessibility.ts b/pxtsim/accessibility.ts index 065548cb3d04..e6684073966c 100644 --- a/pxtsim/accessibility.ts +++ b/pxtsim/accessibility.ts @@ -1,8 +1,8 @@ // Helpers designed to help to make a simulator accessible. namespace pxsim.accessibility { - let liveRegion: HTMLDivElement; let keydownListenerAdded = false; + let zeroWidthSpace = false; export function makeFocusable(elem: SVGElement): void { elem.setAttribute("focusable", "true"); @@ -18,7 +18,7 @@ namespace pxsim.accessibility { } else if (e.key === "/" && meta) { e.preventDefault(); return "togglekeyboardcontrolshelp"; - } else if (e.key === "b" && meta) { + } else if (e.key.toLowerCase() === "b" && meta) { e.preventDefault(); return "toggleareamenu" } @@ -73,27 +73,26 @@ namespace pxsim.accessibility { } export function setLiveContent(value: string): void { + let liveRegion = document.getElementById("sim-live-region"); if (!liveRegion) { - let style = "position: absolute !important;" + - "display: block;" + - "visibility: visible;" + - "overflow: hidden;" + - "width: 1px;" + + let style = "border: 0;" + + "clip: rect(0, 0, 0, 0);" + "height: 1px;" + "margin: -1px;" + - "border: 0;" + + "overflow: hidden;" + "padding: 0;" + - "clip: rect(0 0 0 0);"; + "position: absolute;" + + "width: 1px;"; liveRegion = document.createElement("div"); - liveRegion.setAttribute("role", "status"); + liveRegion.id = "sim-live-region"; liveRegion.setAttribute("aria-live", "polite"); - liveRegion.setAttribute("aria-hidden", "false"); liveRegion.setAttribute("style", style); document.body.appendChild(liveRegion); } - if (liveRegion.textContent !== value) { - liveRegion.textContent = value; + if (value) { + liveRegion.textContent = `${value}${zeroWidthSpace ? '\u200B': ''}`; + zeroWidthSpace = !zeroWidthSpace; } } } \ No newline at end of file diff --git a/pxtsim/sound/audioContextManager.ts b/pxtsim/sound/audioContextManager.ts index 80f44d22ba0a..c07b8ddb983b 100644 --- a/pxtsim/sound/audioContextManager.ts +++ b/pxtsim/sound/audioContextManager.ts @@ -73,7 +73,7 @@ namespace pxsim.AudioContextManager { } function stopTone() { - AudioToneSource.dispose(); + AudioToneSource.setCurrentToneGain(0, context().currentTime); if (audio) { audio.pause(); @@ -348,9 +348,15 @@ namespace pxsim.AudioContextManager { export function setListenerPosition(x: number, y: number, z: number) { const ctx = context(); if (ctx) { - ctx.listener.positionX.setTargetAtTime(x, 0, 0.02); - ctx.listener.positionY.setTargetAtTime(y, 0, 0.02); - ctx.listener.positionZ.setTargetAtTime(z, 0, 0.02); + // Firefox does not support AudioParam-based positionX/Y/Z on AudioListener. + // Fall back to the deprecated setPosition() method. + if (ctx.listener.positionX) { + ctx.listener.positionX.setTargetAtTime(x, 0, 0.02); + ctx.listener.positionY.setTargetAtTime(y, 0, 0.02); + ctx.listener.positionZ.setTargetAtTime(z, 0, 0.02); + } else { + ctx.listener.setPosition(x, y, z); + } } } } \ No newline at end of file diff --git a/pxtsim/sound/audioToneSource.ts b/pxtsim/sound/audioToneSource.ts index c035d1ec61c5..b2164281e1ff 100644 --- a/pxtsim/sound/audioToneSource.ts +++ b/pxtsim/sound/audioToneSource.ts @@ -38,6 +38,8 @@ namespace pxsim.AudioContextManager { protected constructor(context: AudioContext, destination: AudioNode) { super(context, destination); + this.vca.gain.value = 0; + this.oscillator = context.createOscillator(); this.oscillator.type = "triangle"; this.oscillator.frequency.value = 0; diff --git a/pxtsim/sound/sequencer.ts b/pxtsim/sound/sequencer.ts index 34f794a92785..682364262d6f 100644 --- a/pxtsim/sound/sequencer.ts +++ b/pxtsim/sound/sequencer.ts @@ -160,17 +160,17 @@ namespace pxsim.music { this.spatialAudioPlayer = player; } - protected getMelodicTrackVolume(trackIndex: number) { + protected getMelodicTrackVolume(trackIndex: number, velocity: number) { let trackVolume = 1024; if (trackIndex < this.trackVolumes.length) { trackVolume = this.trackVolumes[trackIndex]; } - return this.globalVolume * (trackVolume / 1024); + return this.globalVolume * (trackVolume / 1024) * (velocity / 128); } - protected getDrumTrackVolume(trackIndex: number, drumIndex: number) { - const trackVolume = this.getMelodicTrackVolume(trackIndex); + protected getDrumTrackVolume(trackIndex: number, drumIndex: number, velocity: number) { + const trackVolume = this.getMelodicTrackVolume(trackIndex, velocity); let drumVolume = 1024; if (trackIndex < this.drumTrackVolumes.length && drumIndex < this.drumTrackVolumes[trackIndex].length) { @@ -200,12 +200,14 @@ namespace pxsim.music { for (const noteEvent of track.notes) { if (noteEvent.startTick === this._currentTick) { for (const note of noteEvent.notes) { + const velocity = noteEvent.velocity ?? 128; + if (this.spatialAudioPlayer) { if (track.drums) { playDrumAtSpatialAudioPlayerAsync( this.spatialAudioPlayer, track.drums[note.note], - this.getDrumTrackVolume(i, note.note) + this.getDrumTrackVolume(i, note.note, velocity) ); } else { @@ -214,16 +216,16 @@ namespace pxsim.music { note.note, track.instrument, tickToMs(this.currentlyPlaying.beatsPerMinute, this.currentlyPlaying.ticksPerBeat, noteEvent.endTick - noteEvent.startTick), - this.getMelodicTrackVolume(i) + this.getMelodicTrackVolume(i, velocity) ); } } else { if (track.drums) { - playDrumAsync(track.drums[note.note], () => currentToken.cancelled, this.getDrumTrackVolume(i, note.note)); + playDrumAsync(track.drums[note.note], () => currentToken.cancelled, this.getDrumTrackVolume(i, note.note, velocity)); } else { - playNoteAsync(note.note, track.instrument, tickToMs(this.currentlyPlaying.beatsPerMinute, this.currentlyPlaying.ticksPerBeat, noteEvent.endTick - noteEvent.startTick), () => currentToken.cancelled, this.getMelodicTrackVolume(i)); + playNoteAsync(note.note, track.instrument, tickToMs(this.currentlyPlaying.beatsPerMinute, this.currentlyPlaying.ticksPerBeat, noteEvent.endTick - noteEvent.startTick), () => currentToken.cancelled, this.getMelodicTrackVolume(i, velocity)); } } } diff --git a/pxtsim/sound/song.ts b/pxtsim/sound/song.ts index 2fff953692d8..ec3a428863ed 100644 --- a/pxtsim/sound/song.ts +++ b/pxtsim/sound/song.ts @@ -58,6 +58,14 @@ namespace pxsim.music { timePoints.push(nextALTime); nextALTime += ampLFOInterval; } + else if (time < gateLength) { + time = gateLength; + timePoints.push(gateLength); + } + else { + time = totalDuration; + timePoints.push(totalDuration); + } if (time >= totalDuration) { @@ -104,18 +112,19 @@ namespace pxsim.music { let nextAmp: number; let nextPitch: number; + const out = new Uint8Array(BUFFER_SIZE * (timePoints.length + 1)); + let ptr = 0; for (let i = 1; i < timePoints.length; i++) { if (timePoints[i] - prevTime < 5) { - prevTime = timePoints[i]; continue; } nextAmp = instrumentVolumeAtTime(instrument, gateLength, timePoints[i], volume) | 0; nextPitch = instrumentPitchAtTime(instrument, noteFrequency, gateLength, timePoints[i]) | 0 - addNote( + ptr = addNote( out, - (i - 1) * 12, + ptr, (timePoints[i] - prevTime) | 0, prevAmp, nextAmp, @@ -128,16 +137,20 @@ namespace pxsim.music { prevPitch = nextPitch; prevTime = timePoints[i]; } - addNote( - out, - timePoints.length * 12, - 10, - prevAmp, - 0, - instrument.waveform, - prevPitch, - prevPitch - ) + + // if the amp is still open, roll it off to prevent clipping + if (prevAmp) { + ptr = addNote( + out, + ptr, + 10, + prevAmp, + 0, + instrument.waveform, + prevPitch, + prevPitch + ) + } return out; } @@ -200,32 +213,23 @@ namespace pxsim.music { return ((Math.max(Math.min(mod, instrument.ampEnvelope.amplitude), 0) / 1024) * maxVolume) | 0; } - function envelopeValueAtTime(envelope: pxt.assets.music.Envelope, time: number, gateLength: number) { - const adjustedSustain = (envelope.sustain / 1024) * envelope.amplitude; - + function envelopeValueAtTime(envelope: pxt.assets.music.Envelope, time: number, gateLength: number): number { if (time > gateLength) { - if (time - gateLength > envelope.release) return 0; + const releaseStartLevel = envelopeValueAtTime(envelope, gateLength, gateLength); - else if (time < envelope.attack) { - const height = (envelope.amplitude / envelope.attack) * gateLength; - return height - ((height / envelope.release) * (time - gateLength)) - } - else if (time < envelope.attack + envelope.decay) { - const height2 = envelope.amplitude - ((envelope.amplitude - adjustedSustain) / envelope.decay) * (gateLength - envelope.attack); - return height2 - ((height2 / envelope.release) * (time - gateLength)) - } + if (time - gateLength > envelope.release) return 0; else { - return adjustedSustain - (adjustedSustain / envelope.release) * (time - gateLength) + return releaseStartLevel - (releaseStartLevel / envelope.release) * (time - gateLength) } } else if (time < envelope.attack) { return (envelope.amplitude / envelope.attack) * time } else if (time < envelope.attack + envelope.decay) { - return envelope.amplitude - ((envelope.amplitude - adjustedSustain) / envelope.decay) * (time - envelope.attack) + return envelope.amplitude - ((envelope.amplitude - ((envelope.sustain / 1024) * envelope.amplitude)) / envelope.decay) * (time - envelope.attack) } else { - return adjustedSustain; + return (envelope.sustain / 1024) * envelope.amplitude; } } @@ -272,14 +276,19 @@ namespace pxsim.music { tracks: [] }; + const numTracks = buf[6]; let current = 7; - while (current < buf.length) { + for (let i = 0; i < numTracks; i++) { const [track, pointer] = decodeTrack(buf, current); current = pointer; res.tracks.push(track); } + while (current < buf.length) { + current = decodeTrackVelocity(buf, res.tracks, current); + } + return res; } @@ -320,6 +329,17 @@ namespace pxsim.music { return decodeMelodicTrack(buf, offset); } + function decodeTrackVelocity(buf: Uint8Array, tracks: pxt.assets.music.Track[], offset: number): number { + const trackId = buf[offset]; + const track = tracks.find(t => t.id === trackId); + if (!track) return buf.length; + + for (let i = 0; i < track.notes.length; i++) { + track.notes[i].velocity = buf[offset + i + 1]; + } + return offset + track.notes.length + 1; + } + function decodeDrumInstrument(buf: Uint8Array, offset: number): pxt.assets.music.DrumInstrument { const res: pxt.assets.music.DrumInstrument = { startFrequency: get16BitNumber(buf, offset + 1), diff --git a/pxtsim/sound/spatialAudioPlayer.ts b/pxtsim/sound/spatialAudioPlayer.ts index 5cca0eff1d15..e83ac427001f 100644 --- a/pxtsim/sound/spatialAudioPlayer.ts +++ b/pxtsim/sound/spatialAudioPlayer.ts @@ -35,26 +35,20 @@ namespace pxsim.AudioContextManager { this.panner = new PannerNode(context, { panningModel: 'HRTF', distanceModel: "linear", - positionX: 0, - positionY: 0, - positionZ: 0, - orientationX: 0, - orientationY: 0, - orientationZ: -1, }); + // Set initial position/orientation using the compat helpers + // (Firefox doesn't support AudioParam-based position/orientation properties) + setPannerPosition(this.panner, 0, 0, 0); + setPannerOrientation(this.panner, 0, 0, -1); this.panner.connect(destination); } setPosition(x: number, y: number, z: number) { - this.panner.positionX.setTargetAtTime(x, 0, 0.02); - this.panner.positionY.setTargetAtTime(y, 0, 0.02); - this.panner.positionZ.setTargetAtTime(z, 0, 0.02); + setPannerPosition(this.panner, x, y, z); } setOrientation(x: number, y: number, z: number) { - this.panner.orientationX.setTargetAtTime(x, 0, 0.02); - this.panner.orientationY.setTargetAtTime(y, 0, 0.02); - this.panner.orientationZ.setTargetAtTime(z, 0, 0.02); + setPannerOrientation(this.panner, x, y, z); } setCone(innerAngle: number, outerAngle: number, outerGain: number) { @@ -83,9 +77,9 @@ namespace pxsim.AudioContextManager { } } - get x(): number { return this.panner.positionX.value; } - get y(): number { return this.panner.positionY.value; } - get z(): number { return this.panner.positionZ.value; } + get x(): number { return this.panner.positionX?.value ?? 0; } + get y(): number { return this.panner.positionY?.value ?? 0; } + get z(): number { return this.panner.positionZ?.value ?? 0; } dispose() { this.panner.disconnect(); @@ -110,4 +104,26 @@ namespace pxsim.AudioContextManager { await this.audioWorkletSource.playInstructionsAsync(b); } } + + // Firefox does not support AudioParam-based positionX/Y/Z and orientationX/Y/Z + // on PannerNode or AudioListener. Fall back to the deprecated setPosition()/setOrientation() methods. + function setPannerPosition(panner: PannerNode, x: number, y: number, z: number) { + if (panner.positionX) { + panner.positionX.setTargetAtTime(x, 0, 0.02); + panner.positionY.setTargetAtTime(y, 0, 0.02); + panner.positionZ.setTargetAtTime(z, 0, 0.02); + } else { + panner.setPosition(x, y, z); + } + } + + function setPannerOrientation(panner: PannerNode, x: number, y: number, z: number) { + if (panner.orientationX) { + panner.orientationX.setTargetAtTime(x, 0, 0.02); + panner.orientationY.setTargetAtTime(y, 0, 0.02); + panner.orientationZ.setTargetAtTime(z, 0, 0.02); + } else { + panner.setOrientation(x, y, z); + } + } } \ No newline at end of file diff --git a/react-common/components/controls/Button.tsx b/react-common/components/controls/Button.tsx index 46cf95b82643..181285e71592 100644 --- a/react-common/components/controls/Button.tsx +++ b/react-common/components/controls/Button.tsx @@ -2,16 +2,14 @@ import * as React from "react"; import { classList, ContainerProps, fireClickOnEnter } from "../util"; export interface ButtonViewProps extends ContainerProps { - buttonRef?: (ref: HTMLElement) => void; title: string; label?: string | JSX.Element; labelClassName?: string; leftIcon?: string; rightIcon?: string; + autoFocus?: boolean; disabled?: boolean; // Disables the button in an accessible-friendly way. hardDisabled?: boolean; // Disables the button and prevents clicks. Not recommended. Use `disabled` instead. - href?: string; - target?: string; tabIndex?: number; style?: React.CSSProperties; @@ -27,11 +25,16 @@ export interface ButtonViewProps extends ContainerProps { export interface ButtonProps extends ButtonViewProps { + buttonRef?: (ref: HTMLElement) => void; + href?: string; + target?: string; onClick: () => void; + onClickEvent?: (e: React.MouseEvent) => void; onRightClick?: () => void; onBlur?: () => void; onFocus?: () => void; onKeydown?: (e: React.KeyboardEvent) => void; + onMouseDown?: (e: React.MouseEvent) => void; } export const Button = (props: ButtonProps) => { @@ -69,6 +72,55 @@ export const ButtonBody = (props: ButtonViewProps) => { } export function inflateButtonProps(props: ButtonProps) { + const { + onClick, + onClickEvent, + onRightClick, + onKeydown, + onBlur, + onFocus, + onMouseDown, + buttonRef, + target, + href, + hardDisabled + } = props; + + let { + disabled + } = props; + + disabled = disabled || hardDisabled; + + const clickHandler = (ev: React.MouseEvent) => { + if (onClickEvent) onClickEvent(ev); + if (onClick) onClick(); + if (href) window.open(href, target || "_blank", "noopener,noreferrer") + ev.stopPropagation(); + ev.preventDefault(); + } + + const rightClickHandler = (ev: React.MouseEvent) => { + if (onRightClick) { + onRightClick(); + ev.stopPropagation(); + ev.preventDefault(); + } + } + + return { + ...inflateButtonViewProps(props), + "ref": buttonRef, + "onClick": !disabled ? clickHandler : undefined, + "onContextMenu": rightClickHandler, + "onKeyDown": onKeydown || fireClickOnEnter, + "onBlur": onBlur, + "onFocus": onFocus, + "onMouseDown": onMouseDown, + }; +} + +export function inflateButtonViewProps(props: ButtonViewProps) { const { id, className, @@ -84,17 +136,10 @@ export function inflateButtonProps(props: ButtonProps) { ariaSelected, ariaPressed, role, - onClick, - onRightClick, - onKeydown, - onBlur, - onFocus, - buttonRef, title, hardDisabled, - href, - target, tabIndex, + autoFocus, } = props; let { @@ -109,34 +154,14 @@ export function inflateButtonProps(props: ButtonProps) { disabled && "disabled" ); - let clickHandler = (ev: React.MouseEvent) => { - if (onClick) onClick(); - if (href) window.open(href, target || "_blank", "noopener,noreferrer") - ev.stopPropagation(); - ev.preventDefault(); - } - - let rightClickHandler = (ev: React.MouseEvent) => { - if (onRightClick) { - onRightClick(); - ev.stopPropagation(); - ev.preventDefault(); - } - } - return { "id": id, "className": classes, "style": style, "title": title, - "ref": buttonRef, - "onClick": !disabled ? clickHandler : undefined, - "onContextMenu": rightClickHandler, - "onKeyDown": onKeydown || fireClickOnEnter, - "onBlur": onBlur, - "onFocus": onFocus, "role": role || "button", "tabIndex": tabIndex || (disabled ? -1 : 0), + "autoFocus": autoFocus, "disabled": hardDisabled, "aria-label": ariaLabel, "aria-hidden": ariaHidden, diff --git a/react-common/components/controls/Card.tsx b/react-common/components/controls/Card.tsx index 47b01888dcfc..51055595f639 100644 --- a/react-common/components/controls/Card.tsx +++ b/react-common/components/controls/Card.tsx @@ -25,38 +25,22 @@ export const Card = (props: CardProps) => { tabIndex } = props; - - const handleLinkOrTriggerClick = (e: React.MouseEvent | React.KeyboardEvent) => { - if (e.target && (e.target as HTMLElement).tagName == "A") { - return; - } - e.preventDefault(); - onClick(); - } - - const handleClick = (e: React.MouseEvent) => { - handleLinkOrTriggerClick(e); - } - - const handleKeyDown = (e: React.KeyboardEvent) => { - const charCode = (typeof e.which == "number") ? e.which : e.keyCode; - if (charCode === /*enter*/13 || charCode === /*space*/32) { - handleLinkOrTriggerClick(e); - } - } - return - , parentElement || document.getElementById("root") || document.body) + , parentElement || document.body) } diff --git a/react-common/components/controls/ProgressBar.tsx b/react-common/components/controls/ProgressBar.tsx index f02423770413..3d5f5799f7c7 100644 --- a/react-common/components/controls/ProgressBar.tsx +++ b/react-common/components/controls/ProgressBar.tsx @@ -3,7 +3,7 @@ import { classList, ControlProps } from "../util"; export interface ProgressBarProps extends ControlProps { value: number; - max?: number; // default: 1 + max?: number; // default: 100 title?: string; label?: string; @@ -34,7 +34,7 @@ export const ProgressBar = (props: ProgressBarProps) => { className="common-progressbar" value={value} aria-valuetext={ariaValueText} - max={max || 1.0} + max={max || 100} id={id} role={role || "progressbar"} title={title} diff --git a/react-common/components/controls/RadioButtonGroup.tsx b/react-common/components/controls/RadioButtonGroup.tsx index 56b61f7472d0..ac186ffdaf50 100644 --- a/react-common/components/controls/RadioButtonGroup.tsx +++ b/react-common/components/controls/RadioButtonGroup.tsx @@ -7,6 +7,7 @@ export interface RadioButtonGroupProps extends ControlProps { choices: RadioGroupChoice[]; selectedId: string; onChoiceSelected: (id: string) => void; + ariaLabelledby?: string; } export interface RadioGroupChoice { @@ -23,10 +24,11 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { className, ariaHidden, ariaLabel, + ariaLabelledby, role, choices, selectedId, - onChoiceSelected + onChoiceSelected, } = props; const onChoiceClick = (id: string) => { @@ -39,7 +41,9 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { ariaHidden={ariaHidden} ariaLabel={ariaLabel} role={role || "radiogroup"} - childTabStopId={selectedId}> + childTabStopId={selectedId} + ariaLabelledby={ariaLabelledby} + > {choices.map(choice =>
diff --git a/react-common/components/controls/TabList.tsx b/react-common/components/controls/TabList.tsx new file mode 100644 index 000000000000..7d7b0f9c2174 --- /dev/null +++ b/react-common/components/controls/TabList.tsx @@ -0,0 +1,88 @@ +import { classList } from "../util"; +import { Button, ButtonViewProps } from "./Button"; + +export interface TabListProps { + className?: string; + manualActivation?: boolean; + orientation: "horizontal" | "vertical"; + selectedId: string; + onTabSelected: (id: string) => void; + tabs: (ButtonViewProps & {id: string, ariaControls: string})[]; +} + +export const TabList = (props: TabListProps) => { + const { className, manualActivation, orientation, selectedId, onTabSelected, tabs } = props; + + const onKeyDown = (e: React.KeyboardEvent) => { + const currentIndex = tabs.findIndex(t => t.id === document.activeElement?.id); + + if (currentIndex === -1) return; + + let newIndex: number | null = null; + + let handled = true; + const nextKey = pxt.Util.isUserLanguageRtl() ? "ArrowLeft" : "ArrowRight"; + const prevKey = pxt.Util.isUserLanguageRtl() ? "ArrowRight" : "ArrowLeft"; + + switch (e.key) { + case nextKey: + newIndex = (currentIndex + 1) % tabs.length; + break; + case prevKey: + newIndex = (currentIndex - 1 + tabs.length) % tabs.length; + break; + case "Home": + newIndex = 0; + break; + case "End": + newIndex = tabs.length - 1; + break; + case "Enter": + case " ": + if (manualActivation) { + onTabSelected(tabs[currentIndex].id); + } + break; + default: + handled = false; + } + + if (handled) { + e.preventDefault(); + e.stopPropagation(); + } + + if (newIndex !== null) { + const newTab = tabs[newIndex]; + + if (newTab) { + document.getElementById(newTab.id)?.focus(); + + if (!manualActivation) { + onTabSelected(newTab.id); + } + } + } + } + + return ( +
+ {tabs.map(tab => +
+ ) +} \ No newline at end of file diff --git a/react-common/components/controls/Tree.tsx b/react-common/components/controls/Tree.tsx index 9b39a5b28f0e..8777a7db76c5 100644 --- a/react-common/components/controls/Tree.tsx +++ b/react-common/components/controls/Tree.tsx @@ -1,155 +1,228 @@ import * as React from "react"; -import { ContainerProps, classList } from "../util"; -import { FocusList } from "./FocusList"; +import { ContainerProps, classList, getFocusableDescendants, findNextFocusableElement } from "../util"; +import { ButtonBody, ButtonViewProps, inflateButtonViewProps } from "./Button"; export interface TreeProps extends ContainerProps { role?: "tree" | "group"; + title?: string; + ariaLabelledby?: string; + initialSelectedId?: string; } -export interface TreeItemProps extends ContainerProps { +export interface TreeItemProps extends React.PropsWithChildren { role?: "treeitem"; - onClick?: () => void; initiallyExpanded?: boolean; - title?: string; + id: string; + + onClick?: () => void; } export interface TreeItemBodyProps extends ContainerProps { } +const handleKeydown = (setSelected: (id: string) => void): React.KeyboardEventHandler => { + return (e: React.KeyboardEvent) => { + const root = getParentWithRole(e.currentTarget, "tree"); + const focusable = getFocusableDescendants(root as HTMLElement); + + const focusElement = (el: HTMLElement) => { + if (el) { + el.focus(); + setSelected(el.getAttribute("id")); + } + } + + switch (e.key) { + case "Enter": + case " ": + e.preventDefault(); + e.stopPropagation(); + e.currentTarget.click(); + break; + case "ArrowRight": + e.preventDefault(); + e.stopPropagation(); + if (e.currentTarget.getAttribute("aria-expanded") === "false") { + e.currentTarget.click(); + } + else if (e.currentTarget.getAttribute("aria-expanded") === "true") { + const group = e.currentTarget.querySelector('[role="group"]'); + if (group) { + const firstChild = group.querySelector('[role="treeitem"]'); + if (firstChild) { + focusElement(firstChild as HTMLElement); + } + } + } + break; + case "ArrowLeft": + e.preventDefault(); + e.stopPropagation(); + if (e.currentTarget.getAttribute("aria-expanded") === "true") { + e.currentTarget.click(); + } + else { + focusElement(getParentWithRole(e.currentTarget, "treeitem") as HTMLElement); + } + break; + case "ArrowDown": + e.preventDefault(); + e.stopPropagation(); + const index = focusable.indexOf(e.currentTarget); + const next = findNextFocusableElement(focusable as HTMLElement[], index, index + 1, true, el => el.getAttribute("role") === "treeitem", false); + + focusElement(next); + break; + case "ArrowUp": + e.preventDefault(); + e.stopPropagation(); + const indexUp = focusable.indexOf(e.currentTarget); + const prev = findNextFocusableElement(focusable as HTMLElement[], indexUp, indexUp - 1, false, el => el.getAttribute("role") === "treeitem", false); + focusElement(prev); + break; + case "Home": + e.preventDefault(); + e.stopPropagation(); + const first = findNextFocusableElement(focusable as HTMLElement[], 0, 0, true, el => el.getAttribute("role") === "treeitem", false); + focusElement(first); + break; + case "End": + e.preventDefault(); + e.stopPropagation(); + const last = findNextFocusableElement(focusable as HTMLElement[], focusable.length - 1, focusable.length - 1, false, el => el.getAttribute("role") === "treeitem", false); + focusElement(last); + break; + } + } +} + + +const selectedContext = React.createContext(undefined); +const dispatchContext = React.createContext | undefined>(undefined); + +const useSelectedId = () => { + return React.useContext(selectedContext); +} + +const useDispatch = () => { + return React.useContext(dispatchContext); +} + +const TreeProvider = ({ children, initialSelectedId }: React.PropsWithChildren<{initialSelectedId?: string}>) => { + const [state, dispatch] = React.useReducer((state: string | undefined, action: string) => { + return action; + }, initialSelectedId); + + return ( + + + {children} + + + ); +} + +function getParentWithRole(element: HTMLElement, role: string): HTMLElement | null { + let parent: HTMLElement | null = element.parentElement; + while (parent) { + if (parent.getAttribute("role") === role) { + return parent; + } + parent = parent.parentElement; + } + return null; +} + export const Tree = (props: TreeProps) => { const { children, id, className, ariaLabel, + ariaLabelledby, ariaHidden, ariaDescribedBy, role, + title, + initialSelectedId } = props; - if (!role || role === "tree") { - return ( - +
{children} - - ) - } - - return ( -
- {children} -
- ) +
+ + ); }; export const TreeItem = (props: TreeItemProps) => { const { children, - id, - className, - ariaLabel, - ariaHidden, - ariaDescribedBy, - role, initiallyExpanded, onClick, + label, + labelClassName, + rightIcon, title } = props; const [expanded, setExpanded] = React.useState(initiallyExpanded); - const mappedChildren = React.Children.toArray(children); - const hasSubtree = mappedChildren.length > 1; + const hasSubtree = React.Children.count(children) >= 1; + const selectedId = useSelectedId(); + const dispatch = useDispatch(); - const subtreeContainer = React.useRef() - - React.useEffect(() => { - if (!hasSubtree) return; - - if (expanded) { - const focusable = subtreeContainer.current.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`); - focusable.forEach(f => f.setAttribute("data-isfocusable", "true")); - } - else { - const focusable = subtreeContainer.current.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`); - focusable.forEach(f => f.setAttribute("data-isfocusable", "false")); - } - }, [expanded, hasSubtree]); - - const onTreeItemClick = React.useCallback(() => { + const onTreeItemClick = React.useCallback((e: React.MouseEvent) => { if (hasSubtree) { setExpanded(!expanded); } if (onClick) { onClick(); } - }, [hasSubtree, expanded]) - - return ( -
-
- {hasSubtree && - - } - {mappedChildren[0]} -
-
- {hasSubtree ? mappedChildren[1] : undefined} -
-
- ); -} + dispatch(props.id); + if (e) { + e.stopPropagation(); + e.preventDefault(); + } + }, [hasSubtree, expanded, onClick, props.id, dispatch]); -export const TreeItemBody = (props: TreeItemBodyProps) => { - const { - children, - id, - className, - ariaLabel, - ariaHidden, - ariaDescribedBy, - role, - } = props; + const buttonViewProps = inflateButtonViewProps(props); + const isSelected = selectedId === props.id; return (
- {children} +
+ +
+ {hasSubtree && +
+ {children} +
+ }
); } \ No newline at end of file diff --git a/react-common/components/extensions/ExtensionCard.tsx b/react-common/components/extensions/ExtensionCard.tsx index 2ee26b478b5c..ab2ccc82206c 100644 --- a/react-common/components/extensions/ExtensionCard.tsx +++ b/react-common/components/extensions/ExtensionCard.tsx @@ -10,9 +10,11 @@ export interface ExtensionCardProps { imageUrl?: string; learnMoreUrl?: string; label?: string; + labelClass?: string; onClick?: (value: U) => void; extension?: U; loading?: boolean; + installed?: boolean; showDisclaimer?: boolean } @@ -23,9 +25,11 @@ export const ExtensionCard = (props: ExtensionCardProps) => { imageUrl, learnMoreUrl, label, + labelClass, onClick, extension, loading, + installed, showDisclaimer } = props; @@ -34,15 +38,20 @@ export const ExtensionCard = (props: ExtensionCardProps) => { } const id = pxt.Util.guidGen(); + const cardLabel = installed ? lf("Installed") : label; + const cardLabelClass = installed ? classList("installed", labelClass) : labelClass; + const descriptionId = id + "-description"; + const statusId = cardLabel ? id + "-status" : undefined; return <> + label={cardLabel} + labelClass={cardLabelClass}>
{!loading && <> {imageUrl && } @@ -50,10 +59,11 @@ export const ExtensionCard = (props: ExtensionCardProps) => { {title}
-
+
{description}
+ {cardLabel &&
{cardLabel}
} {(showDisclaimer || learnMoreUrl) &&
{showDisclaimer && lf("User-provided extension, not endorsed by Microsoft.")} diff --git a/react-common/components/profile/SignInModal.tsx b/react-common/components/profile/SignInModal.tsx index 19735000e9a4..23f59c7c3d62 100644 --- a/react-common/components/profile/SignInModal.tsx +++ b/react-common/components/profile/SignInModal.tsx @@ -17,10 +17,11 @@ export interface SignInModalProps { } resolvePath?: (path: string) => string mode?: "signin" | "signup" + lastUsedIdentityProvider?: pxt.IdentityProviderId } export const SignInModal = (props: SignInModalProps) => { - const { onSignIn, onClose, appMessage, dialogMessages, hideDismissButton } = props + const { onSignIn, onClose, appMessage, dialogMessages, hideDismissButton, lastUsedIdentityProvider } = props const { signInMessage, signUpMessage } = dialogMessages || { signInMessage: lf("Sign in to save your progress and access your work anytime, anywhere."), signUpMessage: lf("Join now to save your progress and access your work anytime, anywhere.") @@ -70,19 +71,24 @@ export const SignInModal = (props: SignInModalProps) => {
{pxt.auth.identityProviders().map((provider, index) => { + const isLastUsedProvider = provider.id === lastUsedIdentityProvider const title = mode === "signin" ? lf("Continue with {0}", provider.name) : lf("Sign up with {0}", provider.name) + const ariaLabel = isLastUsedProvider + ? lf("{0}. You last used this option.", title) + : title return (
+ aria-label={ariaLabel}>
+ {onClick && +
{label && diff --git a/react-common/components/controls/DraggableGraph.tsx b/react-common/components/controls/DraggableGraph.tsx index 01cbecc216ea..eb513c2f87be 100644 --- a/react-common/components/controls/DraggableGraph.tsx +++ b/react-common/components/controls/DraggableGraph.tsx @@ -16,6 +16,12 @@ export interface DraggableGraphProps extends ControlProps { handleStartAnimationRef?: (startAnimation: (duration: number) => void) => void; } +const getSliderStepValue = (min: number, max: number) => { + const range = max - min; + // Assumes slider values are always integers. + return Math.max(1, Math.floor(range / 10)); +} + export const DraggableGraph = (props: DraggableGraphProps) => { const { interpolation, @@ -27,9 +33,6 @@ export const DraggableGraph = (props: DraggableGraphProps) => { id, className, ariaLabel, - ariaHidden, - ariaDescribedBy, - role, aspectRatio, squiggly, valueUnits @@ -113,16 +116,37 @@ export const DraggableGraph = (props: DraggableGraphProps) => { }; ref.onkeydown = ev => { - const step = (max - min) / 100; - if (ev.code === "ArrowDown" || ev.code === "ArrowLeft") { - onPointChange(index, Math.max(min, points[index] - step)); - ev.stopPropagation(); - ev.preventDefault(); - } else if (ev.code === "ArrowUp" || ev.code === "ArrowRight") { - onPointChange(index, Math.min(max, points[index] + step)); - ev.stopPropagation(); + const key = ev.key; + if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(key)) { ev.preventDefault(); - } + } + const currentValue = points[index] + switch(key) { + case "ArrowDown": + case "ArrowLeft": { + return onPointChange(index, Math.max(min, currentValue - 1)); + } + case "ArrowUp": + case "ArrowRight": { + return onPointChange(index, Math.min(max, currentValue + 1)); + } + case "Home": { + return onPointChange(index, min); + } + case "End": { + return onPointChange(index, max); + } + case "PageDown": { + const step = getSliderStepValue(min, max); + const value = currentValue - step; + return onPointChange(index, Math.max(min, value)); + } + case "PageUp": { + const step = getSliderStepValue(min, max); + const value = currentValue + step; + return onPointChange(index, Math.min(max, value)); + } + } } }); }, [dragIndex, onPointChange]) @@ -143,11 +167,7 @@ export const DraggableGraph = (props: DraggableGraphProps) => { return
+ className={classList("common-draggable-graph", className)}> @@ -232,7 +252,7 @@ export const DraggableGraph = (props: DraggableGraphProps) => { opacity={0} tabIndex={0} role="slider" - aria-label={lf("{0}, position {1}", ariaLabel, index)} + aria-label={index === 0 ? lf("{0}, start", ariaLabel) : lf("{0}, end", ariaLabel)} aria-valuemin={min} aria-valuemax={max} aria-valuenow={getValue(index)} diff --git a/react-common/components/controls/Dropdown.tsx b/react-common/components/controls/Dropdown.tsx index 0f93af931fa8..72aee8f4ec35 100644 --- a/react-common/components/controls/Dropdown.tsx +++ b/react-common/components/controls/Dropdown.tsx @@ -12,6 +12,7 @@ export interface DropdownProps extends ControlProps { id: string; selectedId: string; items: DropdownItem[]; + getAriaLabel?: (value: string) => string; onItemSelected: (id: string) => void; tabIndex?: number; } @@ -22,6 +23,7 @@ export const Dropdown = (props: DropdownProps) => { className, ariaHidden, ariaLabel, + getAriaLabel, role, items, tabIndex, @@ -98,7 +100,7 @@ export const Dropdown = (props: DropdownProps) => { onKeydown={onKeyDown} ariaHasPopup="listbox" ariaExpanded={expanded} - ariaLabel={ariaLabel} + ariaLabel={ariaLabel ?? getAriaLabel?.(selected.title) ?? selected.title} ariaHidden={ariaHidden} /> {expanded && @@ -107,6 +109,10 @@ export const Dropdown = (props: DropdownProps) => { childTabStopId={selectedId} aria-labelledby={id} useUpAndDownArrowKeys={true} + onClose={() => { + setExpanded(false); + dropdownButton.current.focus(); + }} onItemReceivedFocus={onItemFocused}>
    { items.map(item => diff --git a/react-common/components/controls/FocusList.tsx b/react-common/components/controls/FocusList.tsx index e2130f725d5e..a2c2aa5a0d17 100644 --- a/react-common/components/controls/FocusList.tsx +++ b/react-common/components/controls/FocusList.tsx @@ -6,7 +6,11 @@ export interface FocusListProps extends ContainerProps { childTabStopId?: string; focusSelectsItem?: boolean; useUpAndDownArrowKeys?: boolean; + ariaDescribedby?: string; + ariaLabelledby?: string; + title?: string; onItemReceivedFocus?: (item: HTMLElement) => void; + onClose?: () => void; } /** @@ -24,11 +28,15 @@ export const FocusList = (props: FocusListProps) => { role, ariaHidden, ariaLabel, + ariaLabelledby, + ariaDescribedBy, childTabStopId, children, focusSelectsItem, onItemReceivedFocus, - useUpAndDownArrowKeys + useUpAndDownArrowKeys, + title, + onClose } = props; let focusableElements: HTMLElement[]; @@ -140,6 +148,13 @@ export const FocusList = (props: FocusListProps) => { e.preventDefault(); e.stopPropagation(); } + else if (e.key === "Escape") { + if (onClose) { + onClose(); + e.preventDefault(); + e.stopPropagation(); + } + } } return ( @@ -150,7 +165,10 @@ export const FocusList = (props: FocusListProps) => { onKeyDown={onKeyDown} ref={handleRef} aria-hidden={ariaHidden} - aria-label={ariaLabel}> + aria-label={ariaLabel} + aria-labelledby={ariaLabelledby} + aria-describedby={ariaDescribedBy} + title={title}> {children}
); diff --git a/react-common/components/controls/FocusTrap/FocusTrap.tsx b/react-common/components/controls/FocusTrap/FocusTrap.tsx index de6edf108efe..d3b7475dd926 100644 --- a/react-common/components/controls/FocusTrap/FocusTrap.tsx +++ b/react-common/components/controls/FocusTrap/FocusTrap.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { classList, nodeListToArray, findNextFocusableElement, focusLastActive, ContainerProps } from "../../util"; +import { classList, nodeListToArray, findNextFocusableElement, focusLastActive, ContainerProps, getFocusableDescendants, getTabbableDescendants } from "../../util"; import { addRegion, FocusTrapProvider, removeRegion, useFocusTrapDispatch, useFocusTrapState } from "./context"; import { useId } from "../../../hooks/useId"; @@ -59,10 +59,7 @@ const FocusTrapInner = (props: FocusTrapProps) => { }, []) const getElements = React.useCallback(() => { - let all = nodeListToArray( - includeOutsideTabOrder ? containerRef.current?.querySelectorAll(`[tabindex]`) : - containerRef.current?.querySelectorAll(`[tabindex]:not([tabindex="-1"])`) - ); + let all = includeOutsideTabOrder ? getFocusableDescendants(containerRef.current!) : getTabbableDescendants(containerRef.current!); if (regions.length) { const regionElements: pxt.Map = {}; diff --git a/react-common/components/controls/Input.tsx b/react-common/components/controls/Input.tsx index 3634b9596fd8..c983c1f4ff81 100644 --- a/react-common/components/controls/Input.tsx +++ b/react-common/components/controls/Input.tsx @@ -16,6 +16,7 @@ export interface InputProps extends ControlProps { disabled?: boolean; type?: string; readOnly?: boolean; + autoFocus?: boolean; autoComplete?: boolean; selectOnClick?: boolean; treatSpaceAsEnter?: boolean; @@ -24,6 +25,7 @@ export interface InputProps extends ControlProps { options?: pxt.Map; filter?: string; + validator?: (value: string, prevValue: string) => string; onChange?: (newValue: string) => void; onEnterKey?: (value: string) => void; onIconClick?: (value: string) => void; @@ -59,6 +61,7 @@ export const Input = (props: InputProps) => { disabled, type, readOnly, + autoFocus, autoComplete, selectOnClick, onChange, @@ -69,7 +72,8 @@ export const Input = (props: InputProps) => { onOptionSelected, handleInputRef, preserveValueOnBlur = true, - options + options, + validator, } = props; const [value, setValue] = React.useState(initialValue || ""); @@ -114,15 +118,23 @@ export const Input = (props: InputProps) => { const keyDownHandler = (e: React.KeyboardEvent) => { const charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode === /*enter*/13 || props.treatSpaceAsEnter && charCode === /*space*/32) { + let validatedValue = value; + if (validator) { + validatedValue = validator(value, initialValue || ""); + setValue(validatedValue); + } if (onEnterKey) { e.preventDefault(); - onEnterKey(value); + onEnterKey(validatedValue); } } else if (options && e.key === "ArrowDown") { if (expanded) { document.getElementById(getDropdownOptionId(optionValues[0]))?.focus(); } else { expandButtonClickHandler(); + setTimeout(() => { + document.getElementById(getDropdownOptionId(optionValues[0]))?.focus(); + }, 0); } e.preventDefault(); e.stopPropagation(); @@ -159,8 +171,13 @@ export const Input = (props: InputProps) => { } const blurHandler = () => { + let validatedValue = value; + if (validator) { + validatedValue = validator(value, initialValue || ""); + setValue(validatedValue); + } if (onBlur) { - onBlur(value); + onBlur(validatedValue); } if (!preserveValueOnBlur) { setValue(""); @@ -217,6 +234,7 @@ export const Input = (props: InputProps) => { placeholder={placeholder} value={value} readOnly={!!readOnly} + autoFocus={autoFocus} onClick={clickHandler} onChange={changeHandler} onKeyDown={keyDownHandler} diff --git a/react-common/components/controls/Link.tsx b/react-common/components/controls/Link.tsx index 5a26164b2dfe..2d251eeab564 100644 --- a/react-common/components/controls/Link.tsx +++ b/react-common/components/controls/Link.tsx @@ -8,7 +8,7 @@ export interface LinkProps extends ContainerProps { title?: string; } -export const Link = (props: LinkProps) => { +export const Link = React.forwardRef((props, ref) => { const { id, className, @@ -29,6 +29,7 @@ export const Link = (props: LinkProps) => { { {children} ); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/react-common/components/controls/MenuDropdown.tsx b/react-common/components/controls/MenuDropdown.tsx index 7e4cb8d4b1eb..1aee6f0bb575 100644 --- a/react-common/components/controls/MenuDropdown.tsx +++ b/react-common/components/controls/MenuDropdown.tsx @@ -58,6 +58,28 @@ export const MenuDropdown = (props: MenuDropdownProps) => { const [expanded, setExpanded] = React.useState(false); + const openedByKeyboard = React.useRef(false); + + React.useEffect(() => { + // Focus the first visible menuitem, menuitemcheckbox or menuitemradio when opened via keyboard. + if (expanded && container && openedByKeyboard.current) { + const menu = container.querySelector("[role=menu]"); + if (!menu) { + return; + } + const nodes = menu.querySelectorAll( + "[role=menuitem], [role=menuitemcheckbox], [role=menuitemradio]" + ) + for (const node of nodes) { + const el = node as HTMLElement; + if (el.offsetParent !== null) { + el.focus(); + break; + } + } + } + }, [expanded]) + let container: HTMLDivElement; let expandButton: HTMLButtonElement; @@ -71,7 +93,8 @@ export const MenuDropdown = (props: MenuDropdownProps) => { expandButton = ref; } - const onMenuButtonClick = () => { + const onMenuButtonClick = (e: React.MouseEvent) => { + openedByKeyboard.current = e.detail === 0; setExpanded(!expanded); } @@ -87,10 +110,16 @@ export const MenuDropdown = (props: MenuDropdownProps) => { const onKeydown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" && !expanded) { + openedByKeyboard.current = true; setExpanded(true); } } + const closeOnItemClick = () => { + setExpanded(false); + if (expandButton) expandButton.focus(); + } + const classes = classList("common-menu-dropdown", className); const menuId = id + "-menu"; @@ -104,9 +133,10 @@ export const MenuDropdown = (props: MenuDropdownProps) => { buttonRef={handleButtonRef} title={title} leftIcon={icon} - role={role || "menuitem"} + role={role || "button"} className={classList("menu-button", expanded && "expanded")} - onClick={onMenuButtonClick} + onClick={null} + onClickEvent={onMenuButtonClick} ariaHasPopup="true" ariaExpanded={expanded} ariaControls={expanded ? menuId : undefined} @@ -131,51 +161,47 @@ export const MenuDropdown = (props: MenuDropdownProps) => { > {menuGroups.map((group, groupIndex) => -
  • -
      - {group.items.map( - (item, itemIndex) => { - const key = `${groupIndex}-${itemIndex}`; - if (item.role === "menuitem") { - return ( - { - setExpanded(false); - item.onClick?.(); - }} - /> - ) - } - else if (item.role === "link") { - return ( - { - setExpanded(false); - item.onClick?.(); - }} - /> - ) - } - else { - return ( - { - setExpanded(false); - item.onChange?.(newValue); - }} - /> - ); - } - } - )} -
    -
    • + {group.items.map( + (item, itemIndex) => { + const key = `${groupIndex}-${itemIndex}`; + if (item.role === "menuitem") { + return ( + { + closeOnItemClick(); + item.onClick?.(); + }} + /> + ) + } + else if (item.role === "link") { + return ( + { + closeOnItemClick(); + item.onClick?.(); + }} + /> + ) + } + else { + return ( + { + closeOnItemClick(); + item.onChange?.(newValue); + }} + /> + ); + } + } + )} {groupIndex < menuGroups.length - 1 &&
  • void }) } = props; return ( - - {label} - +
  • + + {label} + +
    • ); } diff --git a/react-common/components/controls/Modal.tsx b/react-common/components/controls/Modal.tsx index b5955a193962..b40de569354c 100644 --- a/react-common/components/controls/Modal.tsx +++ b/react-common/components/controls/Modal.tsx @@ -61,9 +61,34 @@ export const Modal = (props: ModalProps) => { className ); + const modalRef = React.useRef(null); + + React.useEffect(() => { + const root = parentElement || document.body; + const parent = modalRef.current?.parentElement; + + const hiddenSiblings: Element[] = []; + + for (const child of root.children) { + if (child !== parent) { + if (!child.hasAttribute("aria-hidden") || child.getAttribute("aria-hidden") === "false") { + (child as HTMLElement).setAttribute("aria-hidden", "true"); + hiddenSiblings.push(child); + } + } + } + + return () => { + for (const child of hiddenSiblings) { + (child as HTMLElement).removeAttribute("aria-hidden"); + } + }; + }, [parentElement]) + return ReactDOM.createPortal(
    {
    }