Merge pull request #756 from remap-keys/support-qmk-0-19

Support the key code structure of QMK Firmware 0.22

src/actions/hid.action.ts

@@ -296,6 +296,20 @@ export const hidActionsThunk = {
         return;
       }
       const viaProtocolVersion = viaProtocolVersionResult.viaProtocolVersion!;
+
+      // If the VIA protocol version of the connected keyboard is less than 0x0C,
+      // show warning message and close the keyboard.
+      if (viaProtocolVersion < 0x0c) {
+        dispatch(
+          NotificationActions.addWarn(
+            `The VIA protocol version of the connected keyboard is ${viaProtocolVersion}. Use "Remap for QMK 0.18" to customize the keyboard.`
+          )
+        );
+        await dispatch(hidActionsThunk.closeOpenedKeyboard());
+        dispatch(AppActions.updateSetupPhase(SetupPhase.keyboardNotSelected));
+        return;
+      }
+
       dispatch(HidActions.updateViaProtocolVersion(viaProtocolVersion));
       const layerResult = await keyboard.fetchLayerCount();
       if (!layerResult.success) {
@@ -496,15 +510,16 @@ export const hidActionsThunk = {
       const { app, entities } = getState();
       const keyboard: IKeyboard = entities.keyboard!;
 
-      const result = await keyboard.fetchSwitchMatrixState();
+      const rows = entities.keyboardDefinition!.matrix.rows;
+      const cols = entities.keyboardDefinition!.matrix.cols;
+
+      const result = await keyboard.fetchSwitchMatrixState(rows, cols);
       if (!result.success) {
         console.error(result.cause);
         dispatch(NotificationActions.addError(result.error!, result.cause));
         return;
       }
 
-      const rows = entities.keyboardDefinition!.matrix.rows;
-      const cols = entities.keyboardDefinition!.matrix.cols;
       const state = result.state!;
 
       let i = 0;

src/actions/macro.action.ts

@@ -10,6 +10,7 @@ import {
 import { NotificationActions } from './actions';
 import { HidActions } from './hid.action';
 import { sendEventToGoogleAnalytics } from '../utils/GoogleAnalytics';
+import { QK_MACRO_MIN } from '../services/hid/compositions/MacroComposition';
 
 export const MACRO_EDITOR_ACTIONS = '@MacroEditor';
 export const MACRO_EDITOR_UPDATE_KEY = `${MACRO_EDITOR_ACTIONS}/UpdateMacroKey`;
@@ -50,7 +51,7 @@ export const MacroEditorActions = {
   },
 };
 
-const M0_KEY_CODE = 24338;
+const M0_KEY_CODE = QK_MACRO_MIN;
 
 type ActionTypes = ReturnType<
   | typeof MacroEditorActions[keyof typeof MacroEditorActions]

src/components/catalog/Catalog.tsx

@@ -44,7 +44,8 @@ function Catalog(props: CatalogProps) {
       props.enqueueSnackbar(item.message, {
         key: item.key,
         variant: item.type,
-        autoHideDuration: 5000,
+        // autoHideDuration: 5000,
+        persist: true,
         onExited: (event, key: React.ReactText) => {
           props.removeNotification!(key as string);
           removeDisplayedNotification(key as string);

src/components/catalog/keyboard/keymap/Catalogkeymap.tsx

@@ -7,7 +7,6 @@ import {
 import KeyboardModel from '../../../../models/KeyboardModel';
 import KeyModel from '../../../../models/KeyModel';
 import { IKeymap } from '../../../../services/hid/Hid';
-import { MOD_LEFT } from '../../../../services/hid/Composition';
 import Keycap from '../../../configure/keycap/Keycap.container';
 import { Grid, IconButton, Paper, Tooltip, Typography } from '@mui/material';
 import { AbstractKeymapData } from '../../../../services/storage/Storage';
@@ -20,6 +19,7 @@ import { KeymapPdfGenerator } from '../../../../services/pdf/KeymapPdfGenerator'
 import { sendEventToGoogleAnalytics } from '../../../../utils/GoogleAnalytics';
 import LayerPagination from '../../../common/layer/LayerPagination';
 import { useNavigate } from 'react-router-dom';
+import { MOD_LEFT } from '../../../../services/hid/Constraints';
 
 type OwnProps = {};
 type CatalogKeymapProps = OwnProps &

src/components/common/footer/Footer.tsx

@@ -34,6 +34,9 @@ export default class Footer extends React.Component<
           </a>
         </div>
         <div className="footer-contents">
+          <span className="footer-content">
+            <a href="https://qmk018.remap-keys.app">Remap for QMK 0.18</a>
+          </span>
           <span className="footer-content">
             <a href="/docs/terms_of_use">Terms of Use</a>
           </span>

src/components/configure/Configure.tsx

@@ -51,7 +51,8 @@ class Configure extends React.Component<ConfigureProps, OwnState> {
       this.props.enqueueSnackbar(item.message, {
         key: item.key,
         variant: item.type,
-        autoHideDuration: 5000,
+        // autoHideDuration: 8000,
+        persist: true,
         onExited: (event, key: React.ReactText) => {
           this.props.removeNotification!(key as string);
           this.removeDisplayedNotification(key as string);

src/components/configure/customkey/CustomKey.stories.tsx

@@ -5,7 +5,7 @@ import CustomKey from './CustomKey';
 import Keycap from '../keycap/Keycap';
 import KeyModel from '../../../models/KeyModel';
 import { Key } from '../keycodekey/KeyGen';
-import { MOD_LEFT } from '../../../services/hid/Composition';
+import { MOD_LEFT } from '../../../services/hid/Constraints';
 
 export default {
   title: 'CustomKey',

src/components/configure/customkey/CustomKey.tsx

@@ -7,12 +7,7 @@ import { Key } from '../keycodekey/KeyGen';
 import TabKey from './TabKey.container';
 import {
   DIRECTION_LABELS,
-  LayerTapComposition,
-  ModsComposition,
-  ModTapComposition,
   MOD_LABELS,
-  MOD_LEFT,
-  SwapHandsComposition,
 } from '../../../services/hid/Composition';
 import TabHoldTapKey, { buildHoldKeyLabel } from './TabHoldTapKey';
 import { ICustomKeycode, IKeymap } from '../../../services/hid/Hid';
@@ -23,6 +18,11 @@ import {
   KeyLabelLangs,
 } from '../../../services/labellang/KeyLabelLangs';
 import { getMetaLabel } from '../../../services/labellang/KeyLabel';
+import { ModsComposition } from '../../../services/hid/compositions/ModsComposition';
+import { LayerTapComposition } from '../../../services/hid/compositions/LayerTapComposition';
+import { SwapHandsComposition } from '../../../services/hid/compositions/SwapHandsComposition';
+import { ModTapComposition } from '../../../services/hid/compositions/ModTapComposition';
+import { MOD_LEFT } from '../../../services/hid/Constraints';
 
 export const CUSTOMKEY_POPOVER_WIDTH = 400;
 export const CUSTOMKEY_POPOVER_HEIGHT = 240;

src/components/configure/customkey/Modifiers.tsx

@@ -14,10 +14,9 @@ import {
   MOD_ALT,
   MOD_CTL,
   MOD_GUI,
-  MOD_LEFT,
-  MOD_RIGHT,
   MOD_SFT,
 } from '../../../services/hid/Composition';
+import { MOD_LEFT, MOD_RIGHT } from '../../../services/hid/Constraints';
 
 type OwnProps = {
   mods: IMod[];

src/components/configure/customkey/TabHoldTapKey.tsx

@@ -3,16 +3,14 @@ import React from 'react';
 import './TabHoldTapKey.scss';
 import AutocompleteKeys from './AutocompleteKeys';
 import { IKeymap } from '../../../services/hid/Hid';
-import {
-  BasicComposition,
-  KeycodeCompositionFactory,
-  LayerTapComposition,
-  ModTapComposition,
-  SwapHandsComposition,
-} from '../../../services/hid/Composition';
+import { KeycodeCompositionFactory } from '../../../services/hid/Composition';
 import { buildModLabel } from './Modifiers';
 import { hexadecimal } from '../../../utils/StringUtils';
 import { KeyboardLabelLang } from '../../../services/labellang/KeyLabelLangs';
+import { BasicComposition } from '../../../services/hid/compositions/BasicComposition';
+import { LayerTapComposition } from '../../../services/hid/compositions/LayerTapComposition';
+import { SwapHandsComposition } from '../../../services/hid/compositions/SwapHandsComposition';
+import { ModTapComposition } from '../../../services/hid/compositions/ModTapComposition';
 
 type OwnProps = {
   holdKey: IKeymap | null;

src/components/configure/customkey/TabKey.tsx

@@ -4,11 +4,6 @@ import {
   IMod,
   IModDirection,
   KeycodeCompositionFactory,
-  LayerModComposition,
-  ModsComposition,
-  MOD_LEFT,
-  OneShotModComposition,
-  SwapHandsComposition,
 } from '../../../services/hid/Composition';
 
 import AutocompleteKeys from './AutocompleteKeys';
@@ -18,6 +13,11 @@ import { KeyCategory } from '../../../services/hid/KeyCategoryList';
 import { KeyboardLabelLang } from '../../../services/labellang/KeyLabelLangs';
 import { TabKeyActionsType, TabKeyStateType } from './TabKey.container';
 import { IMacroBuffer, MacroBuffer } from '../../../services/macro/Macro';
+import { ModsComposition } from '../../../services/hid/compositions/ModsComposition';
+import { OneShotModComposition } from '../../../services/hid/compositions/OneShotModComposition';
+import { SwapHandsComposition } from '../../../services/hid/compositions/SwapHandsComposition';
+import { LayerModComposition } from '../../../services/hid/compositions/LayerModComposition';
+import { MOD_LEFT } from '../../../services/hid/Constraints';
 
 type OwnProps = {
   autoFocus: boolean;
@@ -49,7 +49,6 @@ export default class TabKey extends React.Component<TabKeyProps, OwnState> {
     return (
       f.isBasic() ||
       f.isMods() ||
-      f.isFunction() ||
       f.isTo() ||
       f.isMomentary() ||
       f.isDefLayer() ||
@@ -86,7 +85,7 @@ export default class TabKey extends React.Component<TabKeyProps, OwnState> {
     function isAvailableModifiers(code: number) {
       const factory = new KeycodeCompositionFactory(code, 'en-us');
       const flag =
-        (factory.isBasic() && !factory.isBasicFunc()) ||
+        factory.isBasic() ||
         factory.isMods() ||
         factory.isLayerMod() ||
         factory.isOneShotMod();
@@ -127,7 +126,6 @@ export default class TabKey extends React.Component<TabKeyProps, OwnState> {
     const macroBuffer = this.createMacroBuffer();
     const keymaps = [
       ...KeyCategory.basic(labelLang),
-      ...KeyCategory.symbol(labelLang),
       ...KeyCategory.functions(
         labelLang,
         this.props.keyboardDefinition!.customKeycodes

src/components/configure/keycodekey/KeyGen.ts

@@ -1,20 +1,15 @@
 import { getMetaLabel, KeyLabel } from '../../../services/labellang/KeyLabel';
-import {
-  IMod,
-  MOD_ALT,
-  MOD_LEFT,
-  MOD_RIGHT,
-  MOD_SFT,
-} from '../../../services/hid/Composition';
+import { IMod, MOD_ALT, MOD_SFT } from '../../../services/hid/Composition';
 import { IKeymap } from '../../../services/hid/Hid';
 import { hexadecimal } from '../../../utils/StringUtils';
 import {
+  KEY_LABEL_LANGS,
   KeyboardLabelLang,
   KeyLabelLangs,
-  KEY_LABEL_LANGS,
 } from '../../../services/labellang/KeyLabelLangs';
 import { mods2Number } from '../customkey/Modifiers';
 import _ from 'lodash';
+import { MOD_LEFT, MOD_RIGHT } from '../../../services/hid/Constraints';
 
 export type Key = {
   label: string;

src/components/configure/keycodes/Keycodes.tsx

@@ -155,9 +155,6 @@ export default class Keycodes extends React.Component<KeycodesProps, OwnState> {
     const basic = macroEditMode
       ? macroCodeFilter(KeyCategory.basic(labelLang))
       : KeyCategory.basic(labelLang);
-    const symbol = macroEditMode
-      ? macroCodeFilter(KeyCategory.symbol(labelLang))
-      : KeyCategory.symbol(labelLang);
     const functions = [
       ...(macroEditMode
         ? macroCodeFilter(
@@ -191,15 +188,21 @@ export default class Keycodes extends React.Component<KeycodesProps, OwnState> {
       ? macroCodeFilter(KeyCategory.midi())
       : KeyCategory.midi();
 
+    const Basic = genKeys(basic, this.props.labelLang!);
+    const Functions = genKeys(functions, this.props.labelLang!);
+    const Layer = genKeys(layers, this.props.labelLang!);
+    const Device = genKeys(device, this.props.labelLang!);
+    const Special = genKeys(special, this.props.labelLang!);
+    const Midi = genKeys(midi, this.props.labelLang!);
+
     const categoryKeys: { [category: string]: Key[] } = {
-      Basic: genKeys(basic, this.props.labelLang!),
-      Symbol: genKeys(symbol, this.props.labelLang!),
-      Functions: genKeys(functions, this.props.labelLang!),
-      Layer: genKeys(layers, this.props.labelLang!),
-      Device: genKeys(device, this.props.labelLang!),
+      Basic,
+      Functions,
+      Layer,
+      Device,
       // Macro: genKeys(KeyCategory.macro()),
-      Special: genKeys(special, this.props.labelLang!),
-      Midi: genKeys(midi, this.props.labelLang!),
+      Special,
+      Midi,
     };
     if (this.props.bleMicroPro && !macroEditMode) {
       this.addBmpCategory(categoryKeys, macroEditMode);

src/components/configure/keymap/Keymap.stories.tsx

@@ -20,7 +20,6 @@ import { OptionChoice2Keymap } from '../../../assets/keymaps/OptionChoice2Keymap
 import { CrkbdKeymap } from '../../../assets/keymaps/CrkbdKeymap';
 import { Jisplit89Keymap } from '../../../assets/keymaps/Jisplit89Keymap';
 import { Naked64SFKeymap } from '../../../assets/keymaps/Naked64SFKeymap';
-import { MOD_LEFT } from '../../../services/hid/Composition';
 import { HotdoxKeymap } from '../../../assets/keymaps/HotdoxKeymap';
 import { BigAssEnterKeymap } from '../../../assets/keymaps/BigAssEnterKeymap';
 import { VerticalSplitKeymap } from '../../../assets/keymaps/VerticalSplit';
@@ -30,6 +29,7 @@ import { GK6Keymap } from '../../../assets/keymaps/GK6Keymap';
 import { CtMacropadKeymap } from '../../../assets/keymaps/CtMacropadKeymap';
 import { CtMacropadWithoutDefaultOptionKeymap } from '../../../assets/keymaps/CtMacropadWithoutDefaultOptionKeymap';
 import { GiabalanaiKeymap } from '../../../assets/keymaps/GiabalanaiKeymap';
+import { MOD_LEFT } from '../../../services/hid/Constraints';
 
 export default {
   title: 'Keyboards',

src/components/configure/keymap/Keymap.tsx

@@ -18,14 +18,14 @@ import CustomKey, {
   PopoverPosition,
 } from '../customkey/CustomKey';
 import { Key } from '../keycodekey/KeyGen';
-import { ModsComposition } from '../../../services/hid/Composition';
 import {
   KeyboardLabelLang,
   KeyLabelLangs,
 } from '../../../services/labellang/KeyLabelLangs';
 import KeymapToolbar from '../keymapToolbar/KeymapToolbar.container';
 import LayerPagination from '../../common/layer/LayerPagination';
 import KeyEventCapture from '../keyeventcapture/KeyEventCapture.container';
+import { ModsComposition } from '../../../services/hid/compositions/ModsComposition';
 
 export type LayoutOption = {
   option: number;

src/components/configure/keymapToolbar/KeymapToolbar.tsx

@@ -339,6 +339,7 @@ export default class KeymapMenu extends React.Component<
         <LightingDialog
           open={this.state.openLightingDialog}
           keyboard={this.props.keyboard!}
+          definition={this.props.keyboardDefinition!}
           lightingDef={this.props.keyboardDefinition!.lighting}
           onClose={() => {
             this.setState({ openLightingDialog: false });