UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 3.8 kB
{ "version": 3, "sources": ["../../../../src/lib/ui/components/InputModeMenu.tsx"], "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { useUiEvents } from '../context/events'\nimport { ToggleInvertZoomItem } from './menu-items'\nimport { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\nconst MODES = ['auto', 'trackpad', 'mouse'] as const\n\n/** @public @react */\nexport function InputModeMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\tconst inputMode = useValue('inputMode', () => editor.user.getUserPreferences().inputMode, [\n\t\teditor,\n\t])\n\tconst wheelBehavior = useValue('wheelBehavior', () => editor.getCameraOptions().wheelBehavior, [\n\t\teditor,\n\t])\n\n\tconst isModeChecked = (mode: string) => {\n\t\tif (mode === 'auto') {\n\t\t\treturn inputMode === null\n\t\t}\n\t\treturn inputMode === mode\n\t}\n\n\tconst getLabel = (mode: string, wheelBehavior: 'zoom' | 'pan' | 'none') => {\n\t\tif (mode === 'auto') {\n\t\t\treturn `action.toggle-auto-${wheelBehavior}`\n\t\t}\n\n\t\treturn mode === 'trackpad' ? 'action.toggle-trackpad' : 'action.toggle-mouse'\n\t}\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"help menu input-mode\" label=\"menu.input-device\">\n\t\t\t<TldrawUiMenuGroup id=\"peripheral-mode\">\n\t\t\t\t{MODES.map((mode) => (\n\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\tid={`peripheral-mode-${mode}`}\n\t\t\t\t\t\tkey={mode}\n\t\t\t\t\t\tlabel={getLabel(mode, wheelBehavior)}\n\t\t\t\t\t\tchecked={isModeChecked(mode)}\n\t\t\t\t\t\treadonlyOk\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\ttrackEvent('input-mode', { source: 'menu', value: mode })\n\t\t\t\t\t\t\tswitch (mode) {\n\t\t\t\t\t\t\t\tcase 'auto':\n\t\t\t\t\t\t\t\t\teditor.user.updateUserPreferences({ inputMode: null })\n\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\tcase 'trackpad':\n\t\t\t\t\t\t\t\t\teditor.user.updateUserPreferences({ inputMode: 'trackpad' })\n\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\tcase 'mouse':\n\t\t\t\t\t\t\t\t\teditor.user.updateUserPreferences({ inputMode: 'mouse' })\n\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"invert-zoom-group\">\n\t\t\t\t<ToggleInvertZoomItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n"], "mappings": "AAqCE,SAGG,KAHH;AArCF,SAAS,WAAW,gBAAgB;AACpC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAEpC,MAAM,QAAQ,CAAC,QAAQ,YAAY,OAAO;AAGnC,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAE/B,QAAM,YAAY,SAAS,aAAa,MAAM,OAAO,KAAK,mBAAmB,EAAE,WAAW;AAAA,IACzF;AAAA,EACD,CAAC;AACD,QAAM,gBAAgB,SAAS,iBAAiB,MAAM,OAAO,iBAAiB,EAAE,eAAe;AAAA,IAC9F;AAAA,EACD,CAAC;AAED,QAAM,gBAAgB,CAAC,SAAiB;AACvC,QAAI,SAAS,QAAQ;AACpB,aAAO,cAAc;AAAA,IACtB;AACA,WAAO,cAAc;AAAA,EACtB;AAEA,QAAM,WAAW,CAAC,MAAcA,mBAA2C;AAC1E,QAAI,SAAS,QAAQ;AACpB,aAAO,sBAAsBA,cAAa;AAAA,IAC3C;AAEA,WAAO,SAAS,aAAa,2BAA2B;AAAA,EACzD;AAEA,SACC,qBAAC,uBAAoB,IAAG,wBAAuB,OAAM,qBACpD;AAAA,wBAAC,qBAAkB,IAAG,mBACpB,gBAAM,IAAI,CAAC,SACX;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,mBAAmB,IAAI;AAAA,QAE3B,OAAO,SAAS,MAAM,aAAa;AAAA,QACnC,SAAS,cAAc,IAAI;AAAA,QAC3B,YAAU;AAAA,QACV,UAAU,MAAM;AACf,qBAAW,cAAc,EAAE,QAAQ,QAAQ,OAAO,KAAK,CAAC;AACxD,kBAAQ,MAAM;AAAA,YACb,KAAK;AACJ,qBAAO,KAAK,sBAAsB,EAAE,WAAW,KAAK,CAAC;AACrD;AAAA,YACD,KAAK;AACJ,qBAAO,KAAK,sBAAsB,EAAE,WAAW,WAAW,CAAC;AAC3D;AAAA,YACD,KAAK;AACJ,qBAAO,KAAK,sBAAsB,EAAE,WAAW,QAAQ,CAAC;AACxD;AAAA,UACF;AAAA,QACD;AAAA;AAAA,MAjBK;AAAA,IAkBN,CACA,GACF;AAAA,IACA,oBAAC,qBAAkB,IAAG,qBACrB,8BAAC,wBAAqB,GACvB;AAAA,KACD;AAEF;", "names": ["wheelBehavior"] }