Last active
May 27, 2019 20:49
-
-
Save vidaaudrey/f4acfa418bdefa9700513b0912732589 to your computer and use it in GitHub Desktop.
Visual Studio Code Settings Sync Gist [vscode]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"lastUpload":"2019-05-27T19:47:59.784Z","extensionVersion":"v3.2.9"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "metadata": { | |
| "id": "6e440e71-8ed9-4f25-bb78-4b13096b8a03", | |
| "publisherId": "formulahendry.auto-rename-tag", | |
| "publisherDisplayName": "formulahendry" | |
| }, | |
| "name": "auto-rename-tag", | |
| "publisher": "formulahendry", | |
| "version": "0.0.15" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "70378119-1d85-4935-9733-0298c7a369a2", | |
| "publisherId": "steoates.autoimport", | |
| "publisherDisplayName": "steoates" | |
| }, | |
| "name": "autoimport", | |
| "publisher": "steoates", | |
| "version": "1.5.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f583eafd-aa0d-4ccb-8f44-d1e610389660", | |
| "publisherId": "CoenraadS.bracket-pair-colorizer", | |
| "publisherDisplayName": "CoenraadS" | |
| }, | |
| "name": "bracket-pair-colorizer", | |
| "publisher": "CoenraadS", | |
| "version": "1.0.61" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "2aa040bf-c73a-455d-8946-5c6cc83b8019", | |
| "publisherId": "wmaurer.change-case", | |
| "publisherDisplayName": "wmaurer" | |
| }, | |
| "name": "change-case", | |
| "publisher": "wmaurer", | |
| "version": "1.0.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "2be7cf14-2603-402e-9771-fd79df83cdf8", | |
| "publisherId": "twxs.cmake", | |
| "publisherDisplayName": "twxs" | |
| }, | |
| "name": "cmake", | |
| "publisher": "twxs", | |
| "version": "0.0.17" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "7c889349-8749-43d4-8b5e-08939936d7f4", | |
| "publisherId": "vector-of-bool.cmake-tools", | |
| "publisherDisplayName": "vector-of-bool" | |
| }, | |
| "name": "cmake-tools", | |
| "publisher": "vector-of-bool", | |
| "version": "1.1.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "e337c67b-55c2-4fef-8949-eb260e7fb7fd", | |
| "publisherId": "Shan.code-settings-sync", | |
| "publisherDisplayName": "Shan" | |
| }, | |
| "name": "code-settings-sync", | |
| "publisher": "Shan", | |
| "version": "3.2.9" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f6dbd813-b0a0-42c1-90ea-10dde9d925a7", | |
| "publisherId": "streetsidesoftware.code-spell-checker", | |
| "publisherDisplayName": "streetsidesoftware" | |
| }, | |
| "name": "code-spell-checker", | |
| "publisher": "streetsidesoftware", | |
| "version": "1.7.12" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f60a60a6-95ba-42d4-b41c-3d24c1b89588", | |
| "publisherId": "EditorConfig.EditorConfig", | |
| "publisherDisplayName": "EditorConfig" | |
| }, | |
| "name": "EditorConfig", | |
| "publisher": "EditorConfig", | |
| "version": "0.13.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "19804510-b475-4dae-b0f7-6ca08fd1af0c", | |
| "publisherId": "dsznajder.es7-react-js-snippets", | |
| "publisherDisplayName": "dsznajder" | |
| }, | |
| "name": "es7-react-js-snippets", | |
| "publisher": "dsznajder", | |
| "version": "2.3.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "1b625615-bded-4797-9806-079abcacfcc1", | |
| "publisherId": "letrieu.expand-region", | |
| "publisherDisplayName": "letrieu" | |
| }, | |
| "name": "expand-region", | |
| "publisher": "letrieu", | |
| "version": "0.1.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "43335a8d-5929-408b-874a-65f08362642c", | |
| "publisherId": "file-icons.file-icons", | |
| "publisherDisplayName": "file-icons" | |
| }, | |
| "name": "file-icons", | |
| "publisher": "file-icons", | |
| "version": "1.0.17" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "b3917e4f-5086-4def-a82b-2ae6b708db16", | |
| "publisherId": "flowtype.flow-for-vscode", | |
| "publisherDisplayName": "flowtype" | |
| }, | |
| "name": "flow-for-vscode", | |
| "publisher": "flowtype", | |
| "version": "1.1.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "438221f8-1107-4ccd-a6fe-f3b7fe0856b7", | |
| "publisherId": "mhutchie.git-graph", | |
| "publisherDisplayName": "mhutchie" | |
| }, | |
| "name": "git-graph", | |
| "publisher": "mhutchie", | |
| "version": "1.6.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "2335b326-c334-4e81-bc51-c408fcec6e7c", | |
| "publisherId": "waderyan.gitblame", | |
| "publisherDisplayName": "waderyan" | |
| }, | |
| "name": "gitblame", | |
| "publisher": "waderyan", | |
| "version": "2.7.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "5960f38e-0bbe-4644-8f9c-9c8824e82511", | |
| "publisherId": "donjayamanne.githistory", | |
| "publisherDisplayName": "donjayamanne" | |
| }, | |
| "name": "githistory", | |
| "publisher": "donjayamanne", | |
| "version": "0.4.6" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "4de763bd-505d-4978-9575-2b7696ecf94e", | |
| "publisherId": "eamodio.gitlens", | |
| "publisherDisplayName": "eamodio" | |
| }, | |
| "name": "gitlens", | |
| "publisher": "eamodio", | |
| "version": "9.8.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "b2afde1a-6cef-4f77-971f-24e66ff2ae38", | |
| "publisherId": "wix.glean", | |
| "publisherDisplayName": "wix" | |
| }, | |
| "name": "glean", | |
| "publisher": "wix", | |
| "version": "4.11.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "3e8a391a-f3f0-44b2-8631-7847b0c8839a", | |
| "publisherId": "kumar-harsh.graphql-for-vscode", | |
| "publisherDisplayName": "kumar-harsh" | |
| }, | |
| "name": "graphql-for-vscode", | |
| "publisher": "kumar-harsh", | |
| "version": "1.13.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "c16f95f6-9b42-4a24-9bf4-245d4ea54fc5", | |
| "publisherId": "bradgashler.htmltagwrap", | |
| "publisherDisplayName": "bradgashler" | |
| }, | |
| "name": "htmltagwrap", | |
| "publisher": "bradgashler", | |
| "version": "0.0.7" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "0e4a80b3-71f6-4711-9058-cfb60e9cb7d7", | |
| "publisherId": "maximetinu.identical-sublime-monokai-csharp-theme-colorizer", | |
| "publisherDisplayName": "maximetinu" | |
| }, | |
| "name": "identical-sublime-monokai-csharp-theme-colorizer", | |
| "publisher": "maximetinu", | |
| "version": "0.11.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "98790d67-10fa-497c-9113-f6c7489207b2", | |
| "publisherId": "yzhang.markdown-all-in-one", | |
| "publisherDisplayName": "yzhang" | |
| }, | |
| "name": "markdown-all-in-one", | |
| "publisher": "yzhang", | |
| "version": "2.3.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "9f47c6a1-da06-41ce-ba18-5e281296aa0a", | |
| "publisherId": "stringham.move-ts", | |
| "publisherDisplayName": "stringham" | |
| }, | |
| "name": "move-ts", | |
| "publisher": "stringham", | |
| "version": "1.11.5" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "dff6b801-247e-40e9-82e8-8c9b1d19d1b8", | |
| "publisherId": "christian-kohler.npm-intellisense", | |
| "publisherDisplayName": "christian-kohler" | |
| }, | |
| "name": "npm-intellisense", | |
| "publisher": "christian-kohler", | |
| "version": "1.3.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "a41c1549-4053-44d4-bf30-60fc809b4a86", | |
| "publisherId": "christian-kohler.path-intellisense", | |
| "publisherDisplayName": "christian-kohler" | |
| }, | |
| "name": "path-intellisense", | |
| "publisher": "christian-kohler", | |
| "version": "1.4.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "96fa4707-6983-4489-b7c5-d5ffdfdcce90", | |
| "publisherId": "esbenp.prettier-vscode", | |
| "publisherDisplayName": "esbenp" | |
| }, | |
| "name": "prettier-vscode", | |
| "publisher": "esbenp", | |
| "version": "1.9.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "1b747f06-3789-4ebd-ac99-f1fe430c3347", | |
| "publisherId": "alefragnani.project-manager", | |
| "publisherDisplayName": "alefragnani" | |
| }, | |
| "name": "project-manager", | |
| "publisher": "alefragnani", | |
| "version": "10.5.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "00cfa340-31e6-4b15-a019-d5d7337b4391", | |
| "publisherId": "vilicvane.sensitive-replace", | |
| "publisherDisplayName": "vilicvane" | |
| }, | |
| "name": "sensitive-replace", | |
| "publisher": "vilicvane", | |
| "version": "0.1.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "00518570-772b-4ccb-8b06-d056f3f556e0", | |
| "publisherId": "Tyriar.sort-lines", | |
| "publisherDisplayName": "Tyriar" | |
| }, | |
| "name": "sort-lines", | |
| "publisher": "Tyriar", | |
| "version": "1.8.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "4e44877c-1c8d-4f9c-ba86-1372d0fbeeb1", | |
| "publisherId": "dracula-theme.theme-dracula", | |
| "publisherDisplayName": "dracula-theme" | |
| }, | |
| "name": "theme-dracula", | |
| "publisher": "dracula-theme", | |
| "version": "2.18.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "043cbe69-59a0-4952-a548-2366587a1226", | |
| "publisherId": "thomaspink.theme-github", | |
| "publisherDisplayName": "thomaspink" | |
| }, | |
| "name": "theme-github", | |
| "publisher": "thomaspink", | |
| "version": "1.0.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "e96f7482-8e97-4155-8a7c-ad5fab4d8b2d", | |
| "publisherId": "jprestidge.theme-material-theme", | |
| "publisherDisplayName": "jprestidge" | |
| }, | |
| "name": "theme-material-theme", | |
| "publisher": "jprestidge", | |
| "version": "1.0.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "6bc1e3ad-c0e2-46b6-bbad-246c5f59215b", | |
| "publisherId": "pmneo.tsimporter", | |
| "publisherDisplayName": "pmneo" | |
| }, | |
| "name": "tsimporter", | |
| "publisher": "pmneo", | |
| "version": "2.0.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "38583aca-2ba1-417f-80fc-68ca8d717fb4", | |
| "publisherId": "rbbit.typescript-hero", | |
| "publisherDisplayName": "rbbit" | |
| }, | |
| "name": "typescript-hero", | |
| "publisher": "rbbit", | |
| "version": "3.0.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "8d912f11-39d6-4200-92dc-95714358a0d1", | |
| "publisherId": "ms-vscode.typescript-javascript-grammar", | |
| "publisherDisplayName": "ms-vscode" | |
| }, | |
| "name": "typescript-javascript-grammar", | |
| "publisher": "ms-vscode", | |
| "version": "0.0.50" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "dffaf5a1-2219-434b-9d87-cb586fd59260", | |
| "publisherId": "Equinusocio.vsc-material-theme", | |
| "publisherDisplayName": "Equinusocio" | |
| }, | |
| "name": "vsc-material-theme", | |
| "publisher": "Equinusocio", | |
| "version": "2.9.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "0479fc1c-3d67-49f9-b087-fb9069afe48f", | |
| "publisherId": "PeterJausovec.vscode-docker", | |
| "publisherDisplayName": "PeterJausovec" | |
| }, | |
| "name": "vscode-docker", | |
| "publisher": "PeterJausovec", | |
| "version": "0.6.2" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "583b2b34-2c1e-4634-8c0b-0b82e283ea3a", | |
| "publisherId": "dbaeumer.vscode-eslint", | |
| "publisherDisplayName": "dbaeumer" | |
| }, | |
| "name": "vscode-eslint", | |
| "publisher": "dbaeumer", | |
| "version": "1.9.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "c727ab43-8d12-4f26-9648-f1d91035c9b6", | |
| "publisherId": "NuclleaR.vscode-extension-auto-import", | |
| "publisherDisplayName": "NuclleaR" | |
| }, | |
| "name": "vscode-extension-auto-import", | |
| "publisher": "NuclleaR", | |
| "version": "1.4.3" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "f00faeee-e939-4900-aaa5-3bf3f62440a3", | |
| "publisherId": "DSKWRK.vscode-generate-getter-setter", | |
| "publisherDisplayName": "DSKWRK" | |
| }, | |
| "name": "vscode-generate-getter-setter", | |
| "publisher": "DSKWRK", | |
| "version": "0.5.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "55ef6448-487b-49a0-a66e-4d2d9bb82229", | |
| "publisherId": "Prisma.vscode-graphql", | |
| "publisherDisplayName": "Prisma" | |
| }, | |
| "name": "vscode-graphql", | |
| "publisher": "Prisma", | |
| "version": "0.1.8" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "e0ee11e7-aa20-4e86-a3b9-2cd7d14fed93", | |
| "publisherId": "be5invis.vscode-icontheme-nomo-dark", | |
| "publisherDisplayName": "be5invis" | |
| }, | |
| "name": "vscode-icontheme-nomo-dark", | |
| "publisher": "be5invis", | |
| "version": "1.3.6" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "c46b0018-f317-4b6c-a785-d2039b27338f", | |
| "publisherId": "wix.vscode-import-cost", | |
| "publisherDisplayName": "wix" | |
| }, | |
| "name": "vscode-import-cost", | |
| "publisher": "wix", | |
| "version": "2.12.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "032ccf0d-9c21-43a5-8073-ae28e453ecef", | |
| "publisherId": "whtouche.vscode-js-console-utils", | |
| "publisherDisplayName": "whtouche" | |
| }, | |
| "name": "vscode-js-console-utils", | |
| "publisher": "whtouche", | |
| "version": "0.7.0" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "ae9e3eb0-3357-4cc0-90ee-598d2d384757", | |
| "publisherId": "eg2.vscode-npm-script", | |
| "publisherDisplayName": "eg2" | |
| }, | |
| "name": "vscode-npm-script", | |
| "publisher": "eg2", | |
| "version": "0.3.7" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "128aec08-5c3d-473f-a233-67d15cbd42ee", | |
| "publisherId": "infeng.vscode-react-typescript", | |
| "publisherDisplayName": "infeng" | |
| }, | |
| "name": "vscode-react-typescript", | |
| "publisher": "infeng", | |
| "version": "1.2.1" | |
| }, | |
| { | |
| "metadata": { | |
| "id": "ec2271c0-9d6d-44c5-93e5-7e8cda744f21", | |
| "publisherId": "rokoroku.vscode-theme-darcula", | |
| "publisherDisplayName": "rokoroku" | |
| }, | |
| "name": "vscode-theme-darcula", | |
| "publisher": "rokoroku", | |
| "version": "1.2.0" | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Empty |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Place your key bindings in this file to override the defaultsauto[] | |
| [ | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "-copyRelativeFilePath", | |
| "when": "!editorFocus" | |
| }, | |
| { | |
| "key": "ctrl+shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.openNativeConsole", | |
| "when": "!terminalFocus" | |
| }, | |
| { | |
| "key": "shift+cmd+c", | |
| "command": "-workbench.action.terminal.openNativeConsole", | |
| "when": "!terminalFocus" | |
| }, | |
| { | |
| "key": "shift+cmd+c", | |
| "command": "copyRelativeFilePath" | |
| }, | |
| { | |
| "key": "cmd+s", | |
| "command": "workbench.action.files.saveAll" | |
| }, | |
| { | |
| "key": "alt+cmd+s", | |
| "command": "-workbench.action.files.saveAll" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+s", | |
| "command": "workbench.action.files.save" | |
| }, | |
| { | |
| "key": "cmd+s", | |
| "command": "-workbench.action.files.save" | |
| }, | |
| { | |
| "key": "cmd+enter", | |
| "command": "extension.miramac.node.exec" | |
| }, | |
| { | |
| "key": "f8", | |
| "command": "-extension.miramac.node.exec" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.toggleFindCaseSensitive", | |
| "when": "terminalFindWidgetFocused" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-workbench.action.terminal.toggleFindCaseSensitive", | |
| "when": "terminalFindWidgetFocused" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "toggleFindCaseSensitive", | |
| "when": "editorFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-toggleFindCaseSensitive", | |
| "when": "editorFocus" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "workbench.action.terminal.toggleFindCaseSensitiveTerminalFocus", | |
| "when": "terminalFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-workbench.action.terminal.toggleFindCaseSensitiveTerminalFocus", | |
| "when": "terminalFocus" | |
| }, | |
| { | |
| "key": "shift+alt+cmd+c", | |
| "command": "toggleSearchCaseSensitive", | |
| "when": "searchViewletFocus && searchViewletVisible && !fileMatchOrFolderMatchFocus" | |
| }, | |
| { | |
| "key": "alt+cmd+c", | |
| "command": "-toggleSearchCaseSensitive", | |
| "when": "searchViewletFocus && searchViewletVisible && !fileMatchOrFolderMatchFocus" | |
| }, | |
| { | |
| "key": "ctrl+alt+c", | |
| "command": "turboConsoleLog.commentAllLogMessages" | |
| }, | |
| { | |
| "key": "shift+alt+c", | |
| "command": "-turboConsoleLog.commentAllLogMessages" | |
| }, | |
| { | |
| "key": "alt+cmd+e", | |
| "command": "workbench.files.action.showActiveFileInExplorer" | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "editor.codeActionsOnSave": { | |
| "source.organizeImports": false | |
| }, | |
| "editor.minimap.enabled": false, | |
| "editor.fontSize": 12, | |
| "editor.fontWeight": "600", | |
| "editor.letterSpacing": -0.2, | |
| "editor.renderLineHighlight": "gutter", | |
| "flow.useNPMPackagedFlow": true, | |
| "editor.formatOnSave": true, | |
| "workbench.iconTheme": "vs-nomo-dark", | |
| "prettier.eslintIntegration": true, | |
| "eslint.autoFixOnSave": true, | |
| "eslint.packageManager": "yarn", | |
| "cSpell.ignoreWords": [ | |
| "webviz", | |
| "frameless", | |
| "overfade", | |
| "liveshare", | |
| "gitlens", | |
| "datatypes", | |
| "nsec", | |
| "contentful", | |
| "promisify", | |
| "datadog", | |
| "Kubernetes", | |
| "kubectl", | |
| "rmfr", | |
| "AIRAVATA", | |
| "workspace", | |
| "workspaces", | |
| "Raycast", | |
| "pointclouds", | |
| "lerna" | |
| ], | |
| "cSpell.enabledLanguageIds": [ | |
| "asciidoc", | |
| "c", | |
| "cpp", | |
| "csharp", | |
| "css", | |
| "go", | |
| "handlebars", | |
| "html", | |
| "jade", | |
| "java", | |
| "javascript", | |
| "javascriptreact", | |
| "json", | |
| "jsonc", | |
| "latex", | |
| "less", | |
| "markdown", | |
| "php", | |
| "plaintext", | |
| "pug", | |
| "python", | |
| "restructuredtext", | |
| "rust", | |
| "scala", | |
| "scss", | |
| "text", | |
| "typescript", | |
| "typescriptreact", | |
| "yaml", | |
| "yml" | |
| ], | |
| "prettier.disableLanguages": ["yaml"], | |
| "files.associations": { | |
| "*.BUILD": "python", | |
| "Dockerfile.*": "dockerfile", | |
| "*.mdx": "markdown", | |
| //"*.tsx": "typescript", | |
| //"*.ts": "typescript", | |
| "*.js": "javascript" | |
| }, | |
| "typescript.updateImportsOnFileMove.enabled": "always", | |
| "breadcrumbs.enabled": true, | |
| "extensions.autoUpdate": true, | |
| "todo-tree.tags": [ | |
| "TODO", | |
| "FIXME", | |
| "extract the component into separate file" | |
| ], | |
| "terminal.external.osxExec": "iTerm.app", | |
| "terminal.explorerKind": "external", | |
| "terminal.integrated.shell.osx": "/bin/zsh", | |
| "cSpell.userWords": [ | |
| "font", | |
| "mixins", | |
| "monospace", | |
| "rosbag", | |
| "timestep", | |
| "timesteps" | |
| ], | |
| "workbench.colorTheme": "Sublime Monokai", | |
| "window.zoomLevel": 0 | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| /* | |
| // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| "Print to console": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| } | |
| */ | |
| /************Latest version************************/ | |
| /**************************************************/ | |
| /**************************************************/ | |
| /************Require************************/ | |
| "imChassisTopic": { | |
| "prefix": "imChassisTopic", | |
| "body": ["import { CHASSIS_TOPIC } from 'client/util/cruiseConstants';"], | |
| "description": "imChassisTopic" | |
| }, | |
| "sobstacleMarkers": { | |
| "prefix": "sobstacleMarkers", | |
| "body": [ | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );" | |
| ], | |
| "description": "sobstacleMarkers" | |
| }, | |
| "sspeed": { | |
| "prefix": "sspeed", | |
| "body": [ | |
| "const speed = 1 / 50;" | |
| ], | |
| "description": "sspeed" | |
| }, | |
| "s1Example": { | |
| "prefix": "s1Example", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return <Worldview>{/* MORE CODE... */}</Worldview>;", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Example" | |
| }, | |
| "sonclickCubes1": { | |
| "prefix": "sonclickCubes1", | |
| "body": [ | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}" | |
| ], | |
| "description": "sonclickCubes1" | |
| }, | |
| "sonclickSphere1": { | |
| "prefix": "sonclickSphere1", | |
| "body": [ | |
| " onClick={(ev, { objectId }) => {", | |
| " setClickedObjectIds([...clickedObjectIds, objectId]);", | |
| " }}" | |
| ], | |
| "description": "sonclickSphere1" | |
| }, | |
| "sClickedObjectIds": { | |
| "prefix": "sClickedObjectIds", | |
| "body": [ | |
| "const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);" | |
| ], | |
| "description": "sClickedObjectIds" | |
| }, | |
| "starget": { | |
| "prefix": "starget", | |
| "body": [ | |
| "target: [duckPosition.x, duckPosition.y, duckPosition.z]" | |
| ], | |
| "description": "starget" | |
| }, | |
| "sscale": { | |
| "prefix": "sscale", | |
| "body": [ | |
| "scale: { x: 1, y: 1, z: 1 }," | |
| ], | |
| "description": "sscale" | |
| }, | |
| "s100vw": { | |
| "prefix": "s100vw", | |
| "body": [ | |
| "style={{ width: \"100vw\", height: \"100vh\" }}" | |
| ], | |
| "description": "s100vw" | |
| }, | |
| "s1Triangle": { | |
| "prefix": "s1Triangle", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Triangles, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Triangle" | |
| }, | |
| "s2CubeAndText": { | |
| "prefix": "s2CubeAndText", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s2CubeAndText" | |
| }, | |
| "s3ColorfulKnot": { | |
| "prefix": "s3ColorfulKnot", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{sphereMarkers}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s3ColorfulKnot" | |
| }, | |
| "s4InstancedRendering": { | |
| "prefix": "s4InstancedRendering", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s4InstancedRendering" | |
| }, | |
| "s5MoveCamera": { | |
| "prefix": "s5MoveCamera", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const speed = 1 / 50;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count * speed,", | |
| " phi: count * speed", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s5MoveCamera" | |
| }, | |
| "s6FollowObject": { | |
| "prefix": "s6FollowObject", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s6FollowObject" | |
| }, | |
| "s7.1MeetObstacles": { | |
| "prefix": "s7.1MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [count, setCount] = React.useState(0);", | |
| "", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 4, y: 4, z: 4 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| "", | |
| " // make the duck stop???", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.1MeetObstacles" | |
| }, | |
| "s7.2MeetObstacles": { | |
| "prefix": "s7.2MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [shouldStopDuck, setShouldStopDuck] = React.useState(false);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " shouldStopDuck,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 120", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " setShouldStopDuck(false);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 5, y: 5, z: 5 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.2MeetObstacles" | |
| }, | |
| "sstopDuck": { | |
| "prefix": "sstopDuck", | |
| "body": [ | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);" | |
| ], | |
| "description": "sstopDuck" | |
| }, | |
| "suseAnim1": { | |
| "prefix": "suseAnim1", | |
| "body": [ | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );" | |
| ], | |
| "description": "suseAnim1" | |
| }, | |
| "scameraStateTarget ": { | |
| "prefix": "scameraStateTarget", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}" | |
| ], | |
| "description": "scameraStateTarget " | |
| }, | |
| "scameraState": { | |
| "prefix": "scameraState", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count,", | |
| " phi: count", | |
| " }}" | |
| ], | |
| "description": "scameraState" | |
| }, | |
| "suseAnimation": { | |
| "prefix": "suseAnimation", | |
| "body": [ | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "" | |
| ], | |
| "description": "suseAnimation" | |
| }, | |
| "sduck": { | |
| "prefix": "sduck", | |
| "body": [ | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 }", | |
| " }}", | |
| " </GLTFScene>" | |
| ], | |
| "description": "sduck" | |
| }, | |
| "ssphereMarkersInstanced": { | |
| "prefix": "ssphereMarkersInstanced", | |
| "body": [ | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });" | |
| ], | |
| "description": "ssphereMarkersInstanced" | |
| }, | |
| "ssphereMarkers": { | |
| "prefix": "ssphereMarkers", | |
| "body": [ | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));" | |
| ], | |
| "description": "ssphereMarkers" | |
| }, | |
| "snumberToColor": { | |
| "prefix": "snumberToColor", | |
| "body": [ | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }" | |
| ], | |
| "description": "snumberToColor" | |
| }, | |
| "imreact": { | |
| "prefix": "imreact", | |
| "body": [ | |
| "import React from \"react\";" | |
| ], | |
| "description": "imreact" | |
| }, | |
| "striangle": { | |
| "prefix": "striangle", | |
| "body": [ | |
| "<Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>" | |
| ], | |
| "description": "striangle" | |
| }, | |
| "imworld": { | |
| "prefix": "imworld", | |
| "body": [ | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";" | |
| ], | |
| "description": "imworld" | |
| }, | |
| "stext": { | |
| "prefix": "stext", | |
| "body": [ | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>" | |
| ], | |
| "description": "stext" | |
| }, | |
| "scubes": { | |
| "prefix": "scubes", | |
| "body": [ | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>" | |
| ], | |
| "description": "scubes" | |
| }, | |
| "pose...": { | |
| "prefix": "pose...", | |
| "body": [ | |
| "pose: { position: { x: 0, y: 0, z: 0 }, orientation: { x: 0, y: 0, z: 0, w: 1 },}," | |
| ], | |
| "description": "pose..." | |
| }, | |
| "re-compose": { | |
| "prefix": "re-compose", | |
| "body": [ | |
| "import { compose } from 'recompose';" | |
| ], | |
| "description": "re-compose" | |
| }, | |
| "ex-withXDPData": { | |
| "prefix": "ex-withXDPData", | |
| "body": [ | |
| " withXDPData(({apiData: { name }}) => ({name}))," | |
| ], | |
| "description": "ex-withXDPData" | |
| }, | |
| "re-withXDPData": { | |
| "prefix": "re-withXDPData", | |
| "body": [ | |
| "import withXDPData from 'src/components/shared/withXDPData';" | |
| ], | |
| "description": "re-withXDPData" | |
| }, | |
| "re-prop-types": { | |
| "prefix": "re-prop-types", | |
| "body": [ | |
| "import PropTypes from 'prop-types';" | |
| ], | |
| "description": "re-prop-types" | |
| }, | |
| "rcn": { | |
| "prefix": "rcn", | |
| "body": [ | |
| "rootClassName=\"${1:m-b-2}\"" | |
| ], | |
| "description": "rcn" | |
| }, | |
| "re-apiStatusType": { | |
| "prefix": "re-apiStatusType", | |
| "body": [ | |
| "import type { ApiStatus as ApiStatusType } from '@coursera/coursera-ui/constants/sharedType';" | |
| ], | |
| "description": "re-apiStatusType" | |
| }, | |
| "re-Jsuri": { | |
| "prefix": "re-Jsuri", | |
| "body": [ | |
| "import Uri from 'jsuri';" | |
| ], | |
| "description": "re-Jsuri" | |
| }, | |
| "re-connectRedux": { | |
| "prefix": "re-connectRedux", | |
| "body": [ | |
| "import { connect } from 'react-redux';" | |
| ], | |
| "description": "re-connectRedux" | |
| }, | |
| "re-react": { | |
| "prefix": "re-react", | |
| "body": [ | |
| "import * as React from 'react';" | |
| ], | |
| "description": "re-react" | |
| }, | |
| "re-info": { | |
| "prefix": "re-info", | |
| "body": [ | |
| "import { withInfo } from '@storybook/addon-info';" | |
| ], | |
| "description": "re-info" | |
| }, | |
| "re-Modal-phoenix": { | |
| "prefix": "re-Modal-phoenix", | |
| "body": [ | |
| "import Modal from 'bundles/phoenix/components/Modal';" | |
| ], | |
| "description": "re-Modal-phoenix" | |
| }, | |
| "re-under": { | |
| "prefix": "re-under", | |
| "body": [ | |
| "import _ from 'underscore';" | |
| ], | |
| "description": "re-under" | |
| }, | |
| "recui": { | |
| "prefix": "recui", | |
| "body": [ | |
| "import { ${1:Box} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "recui" | |
| }, | |
| "resharedTypes": { | |
| "prefix": "resharedTypes", | |
| "body": [ | |
| "import type { RootClassNameProp, HtmlAttributesProp, StyleProp } from 'src/constants/sharedTypes';", | |
| "type Props = {", | |
| "htmlAttributes?: HtmlAttributesProp,", | |
| "rootClassName?: RootClassNameProp,", | |
| "style?: StyleProp,", | |
| "children?: React.Node,", | |
| "};" | |
| ], | |
| "description": "resharedTypes" | |
| }, | |
| "reLoading": { | |
| "prefix": "reLoading", | |
| "body": [ | |
| "import Loading from 'bundles/coursera-ui/components/coursera/Loading';" | |
| ], | |
| "description": "reLoading" | |
| }, | |
| "reWithApiHandler": { | |
| "prefix": "reWithApiHandler", | |
| "body": [ | |
| "import withApiHandler from 'bundles/coursera-ui/components/hocs/withApiHandler';" | |
| ], | |
| "description": "reWithApiHandler" | |
| }, | |
| "re-recompose": { | |
| "prefix": "re-recompose", | |
| "body": [ | |
| "import { pure, compose, withState, withProps, withHandlers } from 'recompose';" | |
| ], | |
| "description": "re-recompose" | |
| }, | |
| "re-gql-recompose": { | |
| "prefix": "re-gql-recompose", | |
| "body": [ | |
| "import{ compose, withState, withHandlers} from 'recompose';", | |
| "import{ graphql, withApollo } from 'react-apollo';", | |
| "import gql from 'graphql-tag';" | |
| ], | |
| "description": "re-gql-recompose" | |
| }, | |
| "recui-validationUtil": { | |
| "prefix": "recui-validationUtil", | |
| "body": [ | |
| "import { required, minLength, maxLength } from '@coursera/coursera-ui/lib/utils/validation';" | |
| ], | |
| "description": "recui-validationUtil" | |
| }, | |
| "re-styled": { | |
| "prefix": "re-styled", | |
| "body": [ | |
| "import styled from 'styled-components';" | |
| ], | |
| "description": "re-styled" | |
| }, | |
| "recui-apiStatus": { | |
| "prefix": "recui-apiStatus", | |
| "body": [ | |
| "import {API_BEFORE_SEND} from 'bundles/coursera-ui/constants/apiNotificationConstants'" | |
| ], | |
| "description": "recui-apiStatus" | |
| }, | |
| "re-deferToClientSideRender": { | |
| "prefix": "re-deferToClientSideRender", | |
| "body": [ | |
| "import deferToClientSideRender from 'js/lib/deferToClientSideRender';" | |
| ], | |
| "description": "re-deferToClientSideRender" | |
| }, | |
| "re-redirect": { | |
| "prefix": "re-redirect", | |
| "body": [ | |
| "import redirect from 'js/lib/coursera.redirect';", | |
| "redirect.setLocation('/${1}')" | |
| ], | |
| "description": "re-redirect" | |
| }, | |
| "re-TypeApiStatus": { | |
| "prefix": "re-TypeApiStatus", | |
| "body": [ | |
| "import type { ApiStatus } from 'bundles/program-common/flowTypes/programCommon';" | |
| ], | |
| "description": "re-TypeApiStatus" | |
| }, | |
| "re-trans": { | |
| "prefix": "re-trans", | |
| "body": [ | |
| "import _t from 'i18n!nls/${1:admin-dashboard}';" | |
| ], | |
| "description": "re-trans" | |
| }, | |
| "re-demoblocks": { | |
| "prefix": "re-demoblocks", | |
| "body": [ | |
| " import {", | |
| " DemoCodeBlock,", | |
| " DemoBlock,", | |
| " DemoHowBlock,", | |
| " DemoThemeContainer,", | |
| " DemoStoryContainer,", | |
| " } from 'src/stories/support/DemoBlocks';" | |
| ], | |
| "description": "re-demoblocks" | |
| }, | |
| "re-cui": { | |
| "prefix": "re-cui", | |
| "body": [ | |
| "import { ${1:Stylesheet, css} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-cui" | |
| }, | |
| "re-cui-simple": { | |
| "prefix": "re-cui-simple", | |
| "body": [ | |
| "import { css, StyleSheet, Container } from '@coursera/coursera-ui';", | |
| "", | |
| "const styles = StyleSheet.create({", | |
| " ${1:ProgramAvailableList}: {},", | |
| "});" | |
| ], | |
| "description": "re-cui-simple" | |
| }, | |
| "re-routerLink": { | |
| "prefix": "re-routerLink", | |
| "body": [ | |
| "import { Link } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerLink" | |
| }, | |
| "re-routerDom": { | |
| "prefix": "re-routerDom", | |
| "body": [ | |
| " import {", | |
| " BrowserRouter as Router,", | |
| " Route,", | |
| " Link", | |
| " } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerDom" | |
| }, | |
| "re-imgix": { | |
| "prefix": "re-imgix", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " imgParams={imgixParams.fillWithWhiteBackground}" | |
| ], | |
| "description": "re-imgix" | |
| }, | |
| "re-imgix-full": { | |
| "prefix": "re-imgix-full", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " <Imgix", | |
| " src={imgSrc}", | |
| " alt={Imgix.DECORATIVE}", | |
| " width={80}", | |
| " height={80}", | |
| " imgParams={imgixParams.fillWithWhiteBackground}", | |
| " />" | |
| ], | |
| "description": "re-imgix-full" | |
| }, | |
| "req-config-asset": { | |
| "prefix": "req-config-asset", | |
| "body": [ | |
| " import config from 'js/app/config';", | |
| " const imagePath = `${config.url.assets}images/program-home/`;" | |
| ], | |
| "description": "req-config-asset" | |
| }, | |
| "re-user": { | |
| "prefix": "re-user", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id" | |
| ], | |
| "description": "re-user" | |
| }, | |
| "re-user-full": { | |
| "prefix": "re-user-full", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id", | |
| "user.get().email_address", | |
| "user.isAuthenticatedUser()", | |
| "user.isSuperuser()" | |
| ], | |
| "description": "re-user-full" | |
| }, | |
| "reBranching-full": { | |
| "prefix": "reBranching-full", | |
| "body": [ | |
| " import { withSSRPlaceholder } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| " import withIsMounted from 'bundles/coursera-ui/components/hocs/withIsMounted';", | |
| " const CourseCard = () => <div><h1>Dummy Course Card</h1></div>;", | |
| " const CourseCardPlaceholder = () => <div><h1>Course Card SSR Placeholder</h1></div>;", | |
| " const CourseCardWithSSRPlaceholderBranch = _.compose(", | |
| " withIsMounted,", | |
| " withSSRPlaceholder(CourseCardPlaceholder),", | |
| " )(CourseCard);", | |
| "", | |
| " <CourseCardWithSSRPlaceholderBranch isCSROnly />" | |
| ], | |
| "description": "reBranching-full" | |
| }, | |
| "re-button": { | |
| "prefix": "re-button", | |
| "body": [ | |
| "import { Button } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-button" | |
| }, | |
| "re-tupleToStringKey": { | |
| "prefix": "re-tupleToStringKey", | |
| "body": [ | |
| "import { tupleToStringKey } from 'js/lib/stringKeyTuple';" | |
| ], | |
| "description": "re-tupleToStringKey" | |
| }, | |
| "re-withRenderNothing": { | |
| "prefix": "re-withRenderNothing", | |
| "body": [ | |
| "import { withRenderNothing } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| "" | |
| ], | |
| "description": "re-withRenderNothing" | |
| }, | |
| "re-ApiButton": { | |
| "prefix": "re-ApiButton", | |
| "body": [ | |
| "import ApiButton, { apiStatusPropType, errorPropType } from", | |
| " 'bundles/coursera-ui/components/basic/ApiButton';" | |
| ], | |
| "description": "re-ApiButton" | |
| }, | |
| "re-svg": { | |
| "prefix": "re-svg", | |
| "body": [ | |
| "import {${1:SvgEdit}} from 'src/svg'" | |
| ], | |
| "description": "re-svg" | |
| }, | |
| "re-ErrorMessage": { | |
| "prefix": "re-ErrorMessage", | |
| "body": [ | |
| "import ErrorMessage from 'bundles/coursera-ui/components/extended/ErrorMessage';" | |
| ], | |
| "description": "re-ErrorMessage" | |
| }, | |
| "re-formattedMessage": { | |
| "prefix": "re-formattedMessage", | |
| "body": [ | |
| "import { FormattedMessage } from 'js/lib/coursera.react-intl';" | |
| ], | |
| "description": "re-formattedMessage" | |
| }, | |
| "re-graphql-all": { | |
| "prefix": "re-graphql-all", | |
| "body": [ | |
| "import gql from 'graphql-tag';", | |
| "import { graphql } from 'react-apollo';", | |
| "import { naptime } from '@coursera/graphql-utils';" | |
| ], | |
| "description": "re-graphql-all" | |
| }, | |
| "re-recompose-common": { | |
| "prefix": "re-recompose-common", | |
| "body": [ | |
| "import { compose, withState, withHandlers, setDisplayName } from 'recompose';" | |
| ], | |
| "description": "re-recompose-common" | |
| }, | |
| /************Common************************/ | |
| "getTrans": { | |
| "prefix": "getTrans", | |
| "body": [ | |
| "function getTranslations(){", | |
| "return {${1}};", | |
| "}" | |
| ], | |
| "description": "getTrans" | |
| }, | |
| "getTransT": { | |
| "prefix": "getTransT", | |
| "body": [ | |
| "const _T = getTranslations():" | |
| ], | |
| "description": "getTransT" | |
| }, | |
| "stylesAphrodite": { | |
| "prefix": "stylesAphrodite", | |
| "body": [ | |
| "const styles = StyleSheet.create({});" | |
| ], | |
| "description": "stylesAphrodite" | |
| }, | |
| "style-bgImage": { | |
| "prefix": "style-bgImage", | |
| "body": [ | |
| "style={{ backgroundImage: `url(\"${image}\")` }}" | |
| ], | |
| "description": "style-bgImage" | |
| }, | |
| "style-media": { | |
| "prefix": "style-media", | |
| "body": [ | |
| "[`@media (max-width: ${breakPoint.sm}px)`]: {", | |
| " marginBottom: spacing.md,", | |
| " }," | |
| ], | |
| "description": "style-media" | |
| }, | |
| "lorem-pixel": { | |
| "prefix": "lorem-pixel", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "lorem-pixel" | |
| }, | |
| "placeholderit": { | |
| "prefix": "placeholderit", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "placeholderit" | |
| }, | |
| "e.preventDefault_window": { | |
| "prefix": "e.preventDefault_window", | |
| "body": [ | |
| "if (e && e.stopPropagation){", | |
| "e.stopPropagation();", | |
| "} else if (window.event){", | |
| "window.event.cancelBubble = true;", | |
| "}" | |
| ], | |
| "description": "e.preventDefault" | |
| }, | |
| "img-placeholderit": { | |
| "prefix": "img-placeholderit", | |
| "body": [ | |
| "<img src=\" //placehold.it/${1:600x400}/A66506/FFFFFF\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit" | |
| }, | |
| "img-placeholderit-avatar": { | |
| "prefix": "img-placeholderit-avatar", | |
| "body": [ | |
| "<img src=\"https://s3.amazonaws.com/uifaces/faces/twitter/aiiaiiaii/128.jpg\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit-avatar" | |
| }, | |
| "img-lorem": { | |
| "prefix": "img-lorem", | |
| "body": [ | |
| " <img src=\"http://lorempixel.com/${1:400}/${2:200}/${3:city/}\" alt=\"${4:CourseraAlt}\" />" | |
| ], | |
| "description": "img-lorem" | |
| }, | |
| /******CUI************************/ | |
| "cuii": { | |
| "prefix": "cuii", | |
| "body": [ | |
| "\"@coursera/coursera-ui\"" | |
| ], | |
| "description": "cuii" | |
| }, | |
| "cuiisvg": { | |
| "prefix": "cuiisvg", | |
| "body": [ | |
| "\"@coursera/coursera-ui/svg\"" | |
| ], | |
| "description": "cuiisvg" | |
| }, | |
| "cui-ApiButton": { | |
| "prefix": "cui-ApiButton", | |
| "body": [ | |
| "<ApiButton", | |
| " type=\"primary\"", | |
| " onClick={onClick}", | |
| " apiStatus={apiStatus}", | |
| " apiStatusAttributesConfig={{", | |
| " label: {", | |
| " API_BEFORE_SEND: _t('Enroll'),", | |
| " API_IN_PROGRESS: _t('Enrolling...'),", | |
| " API_SUCCESS: _t('Enrolled'),", | |
| " API_ERROR: _t('Failed'),", | |
| " }", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-ApiButton" | |
| }, | |
| "cui-ErrorMessage": { | |
| "prefix": "cui-ErrorMessage", | |
| "body": [ | |
| " const DEFAULT_ERROR_MSG = _t('Error ${1:sending email}, please try again later');", | |
| " {error && <ErrorMessage error={error} defaultErrorMsg={DEFAULT_ERROR_MSG} />}" | |
| ], | |
| "description": "cui-ErrorMessage" | |
| }, | |
| "cui-button-link": { | |
| "prefix": "cui-button-link", | |
| "body": [ | |
| " <Button", | |
| " type=\"secondary\"", | |
| " tag=\"a\"", | |
| " size=\"sm\"", | |
| " label={_t('Preview')}", | |
| " style={{marginRight: spacing.md}}", | |
| " htmlAttributes={{", | |
| " href: this._programHomeLink,", | |
| " target: '_blank',", | |
| " rel: 'noopener noreferrer'", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-button-link" | |
| }, | |
| "cui-button": { | |
| "prefix": "cui-button", | |
| "body": [ | |
| "<Button type=\"primary\" label={${1:_t('Preview')}} onClick={onClick}" | |
| ], | |
| "description": "cui-button" | |
| }, | |
| "storySimple": { | |
| "prefix": "storySimple", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import{ storiesOf } from '@storybook/react';", | |
| "import{ withInfo } from '@storybook/addon-info';", | |
| "", | |
| "import{ Pill } from 'src';", | |
| "import PillDemo from 'src/stories/support/PillDemo';", | |
| "", | |
| "storiesOf('basic.Pill', module).add('Pill', withInfo({ propTables: [Pill]})(() => <PillDemo />));" | |
| ], | |
| "description": "storySimple" | |
| }, | |
| "storyPrototype": { | |
| "prefix": "storyPrototype", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import { storiesOf } from '@storybook/react';", | |
| "import Scholarships from 'src/components/prototypes/scholarships/Scholarships';", | |
| "storiesOf('prototypes', module).add('Scholarships', () => <Scholarships />);" | |
| ], | |
| "description": "storyPrototype" | |
| }, | |
| /*************React***********************/ | |
| "divCss": { | |
| "prefix": "divCss", | |
| "body": [ | |
| " <div {...css(styles.${1:selectizeContainer})}>", | |
| " ${2:}", | |
| " </div>" | |
| ], | |
| "description": "divCss" | |
| }, | |
| "formattedMessage-dataSize": { | |
| "prefix": "formattedMessage-dataSize", | |
| "body": [ | |
| "<FormattedMessage", | |
| " message={_t(`Delete {dataSize}", | |
| " {dataSize, plural, =1 {person} other {people}}?", | |
| " `)}", | |
| " dataSize={dataSize}", | |
| " />" | |
| ], | |
| "description": "formattedMessage-dataSize" | |
| }, | |
| "formattedHTMLMessage": { | |
| "prefix": "formattedHTMLMessage", | |
| "body": [ | |
| " <FormattedHTMLMessage", | |
| " message={_t(`", | |
| " We have not yet launched in your country. Please", | |
| " <a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\">fill this form</a>", | |
| " to contact sales.", | |
| " `)}", | |
| " link={REQUEST_DEMO_LINK}", | |
| " />" | |
| ], | |
| "description": "formattedHTMLMessage" | |
| }, | |
| "propRootClassName": { | |
| "prefix": "propRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "propRootClassName" | |
| }, | |
| "constructor-r": { | |
| "prefix": "constructor-r", | |
| "body": [ | |
| " constructor(props, context) {", | |
| " super(props, context);", | |
| " this.state = {", | |
| "", | |
| " };", | |
| " }" | |
| ], | |
| "description": "constructor-r" | |
| }, | |
| "setStateFn": { | |
| "prefix": "setStateFn", | |
| "body": [ | |
| "this.setState(() => ({{1:isDirty: false}}));" | |
| ], | |
| "description": "setStateFn" | |
| }, | |
| "rcc-stateless": { | |
| "prefix": "rcc-stateless", | |
| "body": [ | |
| "// @flow", | |
| "import React from 'react';", | |
| "", | |
| "type Props = {", | |
| " message: string,", | |
| "};", | |
| "// ToImplement(Audrey):", | |
| "export default function StepSelectPrograms(", | |
| " {", | |
| " message,", | |
| " }: Props", | |
| ") {", | |
| " return (", | |
| " <div>", | |
| " StepSelectPrograms{message}", | |
| " </div>", | |
| " );", | |
| "}" | |
| ], | |
| "description": "rcc-stateless" | |
| }, | |
| "ptHtmlAttributes": { | |
| "prefix": "ptHtmlAttributes", | |
| "body": [ | |
| "htmlAttributes?: { [htmlAttr: string]: string | number }," | |
| ], | |
| "description": "ptHtmlAttributes" | |
| }, | |
| "ptStyle": { | |
| "prefix": "ptStyle", | |
| "body": [ | |
| "style?: { [styleAttr: string]: string | number }," | |
| ], | |
| "description": "ptStyle" | |
| }, | |
| "ptRootClassName": { | |
| "prefix": "ptRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "ptRootClassName" | |
| }, | |
| "ptTag": { | |
| "prefix": "ptTag", | |
| "body": [ | |
| "tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])," | |
| ], | |
| "description": "ptTag" | |
| }, | |
| "demothemecontainer": { | |
| "prefix": "demothemecontainer", | |
| "body": [ | |
| "<DemoThemeContainer isThemeDark={isThemeDark}>", | |
| " ${1: ''}", | |
| "</DemoThemeContainer>" | |
| ], | |
| "description": "demothemecontainer" | |
| }, | |
| "demostorycontainer": { | |
| "prefix": "demostorycontainer", | |
| "body": [ | |
| "<DemoStoryContainer title=\"${1:Radio}\" description=\"${1:Radio} is used to...\">", | |
| " ${2:<GradientSelector />}", | |
| " </DemoStoryContainer>" | |
| ], | |
| "description": "demostorycontainer" | |
| }, | |
| "demoblock": { | |
| "prefix": "demoblock", | |
| "body": [ | |
| "<DemoBlock", | |
| " title=\"${1:RadioGroup}\"", | |
| " description=\"${2:Radio components wrapped inside RadioGroup}\"", | |
| " >", | |
| " ${3:}", | |
| " </DemoBlock>" | |
| ], | |
| "description": "demoblock" | |
| }, | |
| "demoCodeBlock": { | |
| "prefix": "demoCodeBlock", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlock" | |
| }, | |
| "demoCodeBlockNoExpanding": { | |
| "prefix": "demoCodeBlockNoExpanding", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " noExpanding", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlockNoExpanding" | |
| }, | |
| "export-compose": { | |
| "prefix": "export-compose", | |
| "body": [ | |
| " export default compose(", | |
| " graphql(${1:ABCQuery}),", | |
| " mapProps((props) => {", | |
| " return props;", | |
| " })", | |
| " )(${2:CollectionItemSlider});" | |
| ], | |
| "description": "export-compose" | |
| }, | |
| /*************Flow***********************/ | |
| "flInputEvent": { | |
| "prefix": "flInputEvent", | |
| "body": [ | |
| "onChange?: SyntheticInputEvent => void," | |
| ], | |
| "description": "flInputEvent" | |
| }, | |
| "flFixMe": { | |
| "prefix": "flFixMe", | |
| "body": [ | |
| "// $FlowFixMe" | |
| ], | |
| "description": "flFixMe" | |
| }, | |
| /*************ESLint***********************/ | |
| "es-no-undef": { | |
| "prefix": "es-no-undef", | |
| "body": [ | |
| "/* eslint-disable no-undef */" | |
| ], | |
| "description": "es-no-undef" | |
| }, | |
| "es-max-len": { | |
| "prefix": "es-max-len", | |
| "body": [ | |
| "// eslint-disable-line max-len" | |
| ], | |
| "description": "es-max-len" | |
| }, | |
| "es-param-reassign": { | |
| "prefix": "es-param-reassign", | |
| "body": [ | |
| "// eslint-disable-line no-param-reassign" | |
| ], | |
| "description": "es-param-reassign" | |
| }, | |
| /*************Test***********************/ | |
| "beforeEach": { | |
| "prefix": "beforeEach", | |
| "body": [ | |
| "beforeEach(() => {", | |
| " wrapper = shallow(<${1:S12nCourseCard} {...propMock} />${2:, {context}});", | |
| "});" | |
| ], | |
| "description": "beforeEach" | |
| }, | |
| /*************Other Utils***********************/ | |
| // Logging | |
| "console.log": { | |
| "prefix": "clo", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| }, | |
| "console.warn": { | |
| "prefix": "cwarn", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Console warn output to console" | |
| }, | |
| "clo-propstate": { | |
| "prefix": "clo-propstate", | |
| "body": [ | |
| "console.log('-- ${1:Component} --', this.props, this.state);" | |
| ], | |
| "description": "clo-propstate" | |
| }, | |
| "clo-rest": { | |
| "prefix": "clo-rest", | |
| "body": [ | |
| "console.warn('---', rest);" | |
| ], | |
| "description": "clo-rest" | |
| }, | |
| "clo-prop": { | |
| "prefix": "clo-prop", | |
| "body": [ | |
| "console.warn('---', this.props);" | |
| ], | |
| "description": "clo-prop" | |
| }, | |
| "clo-state": { | |
| "prefix": "clo-state", | |
| "body": [ | |
| "console.warn('---', this.state);" | |
| ], | |
| "description": "clo-state" | |
| }, | |
| "comment.todo": { | |
| "prefix": "comment.todo", | |
| "body": [ | |
| "// TODO(Audrey):$1 " | |
| ], | |
| "description": "comment.todo" | |
| }, | |
| "comment.toImplement": { | |
| "prefix": "comment.toImplement", | |
| "body": [ | |
| "// ToImplement(Audrey):$1 " | |
| ], | |
| "description": "comment.toImplement" | |
| }, | |
| "comment.toTest": { | |
| "prefix": "comment.toTest", | |
| "body": [ | |
| "// ToTest(Audrey):$1 " | |
| ], | |
| "description": "comment.toTest" | |
| }, | |
| // Test | |
| "test.ui": { | |
| "prefix": "test-ui", | |
| "body": [ | |
| "import ${1:CourseEnrolledDefaultCard} from '../${1:CourseEnrolledDefaultCard}'; \n \n describe('${1:CourseEnrolledDefaultCard}', () =>{ \n let wrapper; \n const propMock={ course: { id: 'c1',name: 'cname', photoUrl: 'http: //photourl',slug: 'cslug',description: 'cdescription',workload: 'cworkload',homeLink: 'learn/clink',partnerIds: [1],isOnDemand: true,},}; \n describe('UI Render', () =>{ \n test('basic elements', () =>{ \n wrapper = shallow( \n <${1:CourseEnrolledDefaultCard} {...propMock \n } />); \n expect(toJson(wrapper)).toMatchSnapshot(); \n});});});" | |
| ], | |
| "description": "Test UI" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| /* | |
| // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and | |
| // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
| // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
| // same ids are connected. | |
| // Example: | |
| "Print to console": { | |
| "prefix": "log", | |
| "body": [ | |
| "console.log('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| } | |
| */ | |
| /************Latest version************************/ | |
| /**************************************************/ | |
| /**************************************************/ | |
| /************Require************************/ | |
| "imChassisTopic": { | |
| "prefix": "imChassisTopic", | |
| "body": ["import { CHASSIS_TOPIC } from 'client/util/cruiseConstants';"], | |
| "description": "imChassisTopic" | |
| }, | |
| "sobstacleMarkers": { | |
| "prefix": "sobstacleMarkers", | |
| "body": [ | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );" | |
| ], | |
| "description": "sobstacleMarkers" | |
| }, | |
| "sspeed": { | |
| "prefix": "sspeed", | |
| "body": [ | |
| "const speed = 1 / 50;" | |
| ], | |
| "description": "sspeed" | |
| }, | |
| "s1Example": { | |
| "prefix": "s1Example", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return <Worldview>{/* MORE CODE... */}</Worldview>;", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Example" | |
| }, | |
| "sonclickCubes1": { | |
| "prefix": "sonclickCubes1", | |
| "body": [ | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}" | |
| ], | |
| "description": "sonclickCubes1" | |
| }, | |
| "sonclickSphere1": { | |
| "prefix": "sonclickSphere1", | |
| "body": [ | |
| " onClick={(ev, { objectId }) => {", | |
| " setClickedObjectIds([...clickedObjectIds, objectId]);", | |
| " }}" | |
| ], | |
| "description": "sonclickSphere1" | |
| }, | |
| "sClickedObjectIds": { | |
| "prefix": "sClickedObjectIds", | |
| "body": [ | |
| "const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);" | |
| ], | |
| "description": "sClickedObjectIds" | |
| }, | |
| "starget": { | |
| "prefix": "starget", | |
| "body": [ | |
| "target: [duckPosition.x, duckPosition.y, duckPosition.z]" | |
| ], | |
| "description": "starget" | |
| }, | |
| "sscale": { | |
| "prefix": "sscale", | |
| "body": [ | |
| "scale: { x: 1, y: 1, z: 1 }," | |
| ], | |
| "description": "sscale" | |
| }, | |
| "s100vw": { | |
| "prefix": "s100vw", | |
| "body": [ | |
| "style={{ width: \"100vw\", height: \"100vh\" }}" | |
| ], | |
| "description": "s100vw" | |
| }, | |
| "s1Triangle": { | |
| "prefix": "s1Triangle", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Triangles, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s1Triangle" | |
| }, | |
| "s2CubeAndText": { | |
| "prefix": "s2CubeAndText", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " return (", | |
| " <Worldview>", | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s2CubeAndText" | |
| }, | |
| "s3ColorfulKnot": { | |
| "prefix": "s3ColorfulKnot", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{sphereMarkers}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s3ColorfulKnot" | |
| }, | |
| "s4InstancedRendering": { | |
| "prefix": "s4InstancedRendering", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import { Axes, Spheres, Worldview } from \"regl-worldview\";", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview>", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s4InstancedRendering" | |
| }, | |
| "s5MoveCamera": { | |
| "prefix": "s5MoveCamera", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const speed = 1 / 50;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count * speed,", | |
| " phi: count * speed", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s5MoveCamera" | |
| }, | |
| "s6FollowObject": { | |
| "prefix": "s6FollowObject", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| "", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}", | |
| " >", | |
| " <Spheres>{[sphereMarker]}</Spheres>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s6FollowObject" | |
| }, | |
| "s7.1MeetObstacles": { | |
| "prefix": "s7.1MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [count, setCount] = React.useState(0);", | |
| "", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 4, y: 4, z: 4 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| "", | |
| " // make the duck stop???", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.1MeetObstacles" | |
| }, | |
| "s7.2MeetObstacles": { | |
| "prefix": "s7.2MeetObstacles", | |
| "body": [ | |
| "import React from \"react\";", | |
| "import {", | |
| " Axes,", | |
| " Cubes,", | |
| " DEFAULT_CAMERA_STATE,", | |
| " GLTFScene,", | |
| " Spheres,", | |
| " Worldview", | |
| "} from \"regl-worldview\";", | |
| "import duckModel from \"./Duck.glb\";", | |
| "", | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "", | |
| "export default function Example() {", | |
| " const steps = 500;", | |
| " const [count, setCount] = React.useState(0);", | |
| " const [clickedObjectIds, setClickedObjectIds] = React.useState([1001]);", | |
| " const [shouldStopDuck, setShouldStopDuck] = React.useState(false);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " shouldStopDuck,", | |
| " []", | |
| " );", | |
| "", | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }", | |
| "", | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarker = {", | |
| " id: 1001,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 2, y: 2, z: 2 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });", | |
| " const duckPosition = sphereMarker.points[count];", | |
| "", | |
| " const obstacleMarkers = Array.from(clickedObjectIds).map(", | |
| " (clickedObjectId, index) => {", | |
| " const pointIdx = clickedObjectId - sphereMarker.id;", | |
| " const position = sphereMarker.points[pointIdx];", | |
| " return {", | |
| " id: sphereMarker.id + steps + index,", | |
| " // remember the original clickedObjectId so when the obstacle is clicked, we can", | |
| " // remove the obstacle quickly by updating clickedObjectIds", | |
| " clickedObjectId,", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: position", | |
| " },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }, // red", | |
| " scale: { x: 8, y: 8, z: 8 } // scale up a little so it's bigger than the spheres", | |
| " };", | |
| " }", | |
| " );", | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);", | |
| "", | |
| " return (", | |
| " <Worldview", | |
| " defaultCameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 120", | |
| " }}", | |
| " >", | |
| " <Spheres", | |
| " onClick={(ev, { objectId }) =>", | |
| " setClickedObjectIds([...clickedObjectIds, objectId])", | |
| " }", | |
| " >", | |
| " {[sphereMarker]}", | |
| " </Spheres>", | |
| " <Cubes", | |
| " onClick={(ev, { object }) => {", | |
| " const newClickedObjectIds = clickedObjectIds.filter(", | |
| " id => id !== object.clickedObjectId", | |
| " );", | |
| " setClickedObjectIds(newClickedObjectIds);", | |
| " setShouldStopDuck(false);", | |
| " }}", | |
| " >", | |
| " {obstacleMarkers}", | |
| " </Cubes>", | |
| " <Axes />", | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: duckPosition,", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 5, y: 5, z: 5 }", | |
| " }}", | |
| " </GLTFScene>", | |
| " </Worldview>", | |
| " );", | |
| "}", | |
| "" | |
| ], | |
| "description": "s7.2MeetObstacles" | |
| }, | |
| "sstopDuck": { | |
| "prefix": "sstopDuck", | |
| "body": [ | |
| " // make the duck stop", | |
| " React.useEffect(() => {", | |
| " const duckPositionId = sphereMarker.id + count;", | |
| " if (!shouldStopDuck && clickedObjectIds.includes(duckPositionId)) {", | |
| " setShouldStopDuck(true);", | |
| " }", | |
| " }, [clickedObjectIds, shouldStopDuck, count, sphereMarker.id]);" | |
| ], | |
| "description": "sstopDuck" | |
| }, | |
| "suseAnim1": { | |
| "prefix": "suseAnim1", | |
| "body": [ | |
| " const [count, setCount] = React.useState(0);", | |
| " useAnimation(", | |
| " () => {", | |
| " const newCount = (count + 1) % steps;", | |
| " setCount(newCount);", | |
| " },", | |
| " false,", | |
| " []", | |
| " );" | |
| ], | |
| "description": "suseAnim1" | |
| }, | |
| "scameraStateTarget ": { | |
| "prefix": "scameraStateTarget", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " distance: 160,", | |
| " target: [duckPosition.x, duckPosition.y, duckPosition.z]", | |
| " }}" | |
| ], | |
| "description": "scameraStateTarget " | |
| }, | |
| "scameraState": { | |
| "prefix": "scameraState", | |
| "body": [ | |
| " cameraState={{", | |
| " ...DEFAULT_CAMERA_STATE,", | |
| " thetaOffset: count,", | |
| " phi: count", | |
| " }}" | |
| ], | |
| "description": "scameraState" | |
| }, | |
| "suseAnimation": { | |
| "prefix": "suseAnimation", | |
| "body": [ | |
| "// a react hook that accepts a callback function which will be called before each browser repaint", | |
| "function useAnimation(callback, disable, dependencies) {", | |
| " // persist the requestAnimationFrameId so the last refresh callback can be cancelled when component unmounts", | |
| " const rafId = React.useRef();", | |
| " // start the loop when the component mounts and cancel the animation frame when unmounts", | |
| " // or related dependency changes", | |
| " React.useEffect(() => {", | |
| " if (!disable) {", | |
| " function createAnimationFrame() {", | |
| " rafId.current = requestAnimationFrame(timestamp => {", | |
| " callback(timestamp);", | |
| " createAnimationFrame();", | |
| " });", | |
| " }", | |
| " createAnimationFrame();", | |
| " }", | |
| " return function cleanup() {", | |
| " cancelAnimationFrame(rafId.current);", | |
| " };", | |
| " }, [disable, callback, ...dependencies]);", | |
| "}", | |
| "" | |
| ], | |
| "description": "suseAnimation" | |
| }, | |
| "sduck": { | |
| "prefix": "sduck", | |
| "body": [ | |
| " {/* Download model: https://github.com/cruise-automation/webviz/blob/master/docs/src/jsx/utils/Duck.glb */}", | |
| " <GLTFScene model={duckModel}>", | |
| " {{", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 }", | |
| " }}", | |
| " </GLTFScene>" | |
| ], | |
| "description": "sduck" | |
| }, | |
| "ssphereMarkersInstanced": { | |
| "prefix": "ssphereMarkersInstanced", | |
| "body": [ | |
| " const sphereMarker = {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " // leave colors and points empty so we can fill up later", | |
| " colors: [],", | |
| " points: []", | |
| " };", | |
| "", | |
| " new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .forEach(([x, y, z], idx) => {", | |
| " // add individual point and color to the single sphere object", | |
| " sphereMarker.colors.push(numberToColor(idx, steps));", | |
| " sphereMarker.points.push({ x: x * 20, y: y * 20, z: z * 20 });", | |
| " });" | |
| ], | |
| "description": "ssphereMarkersInstanced" | |
| }, | |
| "ssphereMarkers": { | |
| "prefix": "ssphereMarkers", | |
| "body": [ | |
| " const scale = (Math.PI * 2) / steps;", | |
| " const sphereMarkers = new Array(steps)", | |
| " .fill()", | |
| " .map((_, idx) => [", | |
| " // generate x, y, z coordinates based on trefoil equation", | |
| " Math.sin(idx * scale) + 2 * Math.sin(2 * idx * scale),", | |
| " Math.cos(idx * scale) - 2 * Math.cos(2 * idx * scale),", | |
| " -Math.sin(3 * idx * scale)", | |
| " ])", | |
| " .map(([x, y, z], idx) => ({", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 20 * x, y: 20 * y, z: 20 * z }", | |
| " },", | |
| " scale: { x: 1, y: 1, z: 1 },", | |
| " color: numberToColor(idx, steps)", | |
| " }));" | |
| ], | |
| "description": "ssphereMarkers" | |
| }, | |
| "snumberToColor": { | |
| "prefix": "snumberToColor", | |
| "body": [ | |
| " // map a number/index to a specific color", | |
| " function numberToColor(number, max, a = 1) {", | |
| " const i = (number * 255) / max;", | |
| " const r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128) / 255;", | |
| " const g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128) / 255;", | |
| " const b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128) / 255;", | |
| " return { r, g, b, a };", | |
| " }" | |
| ], | |
| "description": "snumberToColor" | |
| }, | |
| "imreact": { | |
| "prefix": "imreact", | |
| "body": [ | |
| "import React from \"react\";" | |
| ], | |
| "description": "imreact" | |
| }, | |
| "striangle": { | |
| "prefix": "striangle", | |
| "body": [ | |
| "<Triangles>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " position: { x: 0, y: 0, z: 0 },", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 }", | |
| " },", | |
| " points: [[0, 0, 0], [10, 20, 0], [-11, -20, 30]],", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " // colors: [[1, 0, 0.5, 1], [0, 1, 1, 1], [1, 1, 0, 1]]", | |
| " }", | |
| " ]}", | |
| " </Triangles>" | |
| ], | |
| "description": "striangle" | |
| }, | |
| "imworld": { | |
| "prefix": "imworld", | |
| "body": [ | |
| "import { Axes, Cubes, Text, Worldview } from \"regl-worldview\";" | |
| ], | |
| "description": "imworld" | |
| }, | |
| "stext": { | |
| "prefix": "stext", | |
| "body": [ | |
| " <Text>", | |
| " {[", | |
| " {", | |
| " text: \"Hello, Worldview! \",", | |
| " color: { r: 1, g: 1, b: 1, a: 1 },", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 5, z: 10 }", | |
| " },", | |
| " }", | |
| " ]}", | |
| " </Text>" | |
| ], | |
| "description": "stext" | |
| }, | |
| "scubes": { | |
| "prefix": "scubes", | |
| "body": [ | |
| " <Cubes>", | |
| " {[", | |
| " {", | |
| " pose: {", | |
| " orientation: { x: 0, y: 0, z: 0, w: 1 },", | |
| " position: { x: 0, y: 0, z: 0 }", | |
| " },", | |
| " scale: { x: 10, y: 10, z: 10 },", | |
| " color: { r: 1, g: 0, b: 0, a: 1 }", | |
| " }", | |
| " ]}", | |
| " </Cubes>" | |
| ], | |
| "description": "scubes" | |
| }, | |
| "pose...": { | |
| "prefix": "pose...", | |
| "body": [ | |
| "pose: { position: { x: 0, y: 0, z: 0 }, orientation: { x: 0, y: 0, z: 0, w: 1 },}," | |
| ], | |
| "description": "pose..." | |
| }, | |
| "re-compose": { | |
| "prefix": "re-compose", | |
| "body": [ | |
| "import { compose } from 'recompose';" | |
| ], | |
| "description": "re-compose" | |
| }, | |
| "ex-withXDPData": { | |
| "prefix": "ex-withXDPData", | |
| "body": [ | |
| " withXDPData(({apiData: { name }}) => ({name}))," | |
| ], | |
| "description": "ex-withXDPData" | |
| }, | |
| "re-withXDPData": { | |
| "prefix": "re-withXDPData", | |
| "body": [ | |
| "import withXDPData from 'src/components/shared/withXDPData';" | |
| ], | |
| "description": "re-withXDPData" | |
| }, | |
| "re-prop-types": { | |
| "prefix": "re-prop-types", | |
| "body": [ | |
| "import PropTypes from 'prop-types';" | |
| ], | |
| "description": "re-prop-types" | |
| }, | |
| "rcn": { | |
| "prefix": "rcn", | |
| "body": [ | |
| "rootClassName=\"${1:m-b-2}\"" | |
| ], | |
| "description": "rcn" | |
| }, | |
| "re-apiStatusType": { | |
| "prefix": "re-apiStatusType", | |
| "body": [ | |
| "import type { ApiStatus as ApiStatusType } from '@coursera/coursera-ui/constants/sharedType';" | |
| ], | |
| "description": "re-apiStatusType" | |
| }, | |
| "re-Jsuri": { | |
| "prefix": "re-Jsuri", | |
| "body": [ | |
| "import Uri from 'jsuri';" | |
| ], | |
| "description": "re-Jsuri" | |
| }, | |
| "re-connectRedux": { | |
| "prefix": "re-connectRedux", | |
| "body": [ | |
| "import { connect } from 'react-redux';" | |
| ], | |
| "description": "re-connectRedux" | |
| }, | |
| "re-react": { | |
| "prefix": "re-react", | |
| "body": [ | |
| "import * as React from 'react';" | |
| ], | |
| "description": "re-react" | |
| }, | |
| "re-info": { | |
| "prefix": "re-info", | |
| "body": [ | |
| "import { withInfo } from '@storybook/addon-info';" | |
| ], | |
| "description": "re-info" | |
| }, | |
| "re-Modal-phoenix": { | |
| "prefix": "re-Modal-phoenix", | |
| "body": [ | |
| "import Modal from 'bundles/phoenix/components/Modal';" | |
| ], | |
| "description": "re-Modal-phoenix" | |
| }, | |
| "re-under": { | |
| "prefix": "re-under", | |
| "body": [ | |
| "import _ from 'underscore';" | |
| ], | |
| "description": "re-under" | |
| }, | |
| "recui": { | |
| "prefix": "recui", | |
| "body": [ | |
| "import { ${1:Box} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "recui" | |
| }, | |
| "resharedTypes": { | |
| "prefix": "resharedTypes", | |
| "body": [ | |
| "import type { RootClassNameProp, HtmlAttributesProp, StyleProp } from 'src/constants/sharedTypes';", | |
| "type Props = {", | |
| "htmlAttributes?: HtmlAttributesProp,", | |
| "rootClassName?: RootClassNameProp,", | |
| "style?: StyleProp,", | |
| "children?: React.Node,", | |
| "};" | |
| ], | |
| "description": "resharedTypes" | |
| }, | |
| "reLoading": { | |
| "prefix": "reLoading", | |
| "body": [ | |
| "import Loading from 'bundles/coursera-ui/components/coursera/Loading';" | |
| ], | |
| "description": "reLoading" | |
| }, | |
| "reWithApiHandler": { | |
| "prefix": "reWithApiHandler", | |
| "body": [ | |
| "import withApiHandler from 'bundles/coursera-ui/components/hocs/withApiHandler';" | |
| ], | |
| "description": "reWithApiHandler" | |
| }, | |
| "re-recompose": { | |
| "prefix": "re-recompose", | |
| "body": [ | |
| "import { pure, compose, withState, withProps, withHandlers } from 'recompose';" | |
| ], | |
| "description": "re-recompose" | |
| }, | |
| "re-gql-recompose": { | |
| "prefix": "re-gql-recompose", | |
| "body": [ | |
| "import{ compose, withState, withHandlers} from 'recompose';", | |
| "import{ graphql, withApollo } from 'react-apollo';", | |
| "import gql from 'graphql-tag';" | |
| ], | |
| "description": "re-gql-recompose" | |
| }, | |
| "recui-validationUtil": { | |
| "prefix": "recui-validationUtil", | |
| "body": [ | |
| "import { required, minLength, maxLength } from '@coursera/coursera-ui/lib/utils/validation';" | |
| ], | |
| "description": "recui-validationUtil" | |
| }, | |
| "re-styled": { | |
| "prefix": "re-styled", | |
| "body": [ | |
| "import styled from 'styled-components';" | |
| ], | |
| "description": "re-styled" | |
| }, | |
| "recui-apiStatus": { | |
| "prefix": "recui-apiStatus", | |
| "body": [ | |
| "import {API_BEFORE_SEND} from 'bundles/coursera-ui/constants/apiNotificationConstants'" | |
| ], | |
| "description": "recui-apiStatus" | |
| }, | |
| "re-deferToClientSideRender": { | |
| "prefix": "re-deferToClientSideRender", | |
| "body": [ | |
| "import deferToClientSideRender from 'js/lib/deferToClientSideRender';" | |
| ], | |
| "description": "re-deferToClientSideRender" | |
| }, | |
| "re-redirect": { | |
| "prefix": "re-redirect", | |
| "body": [ | |
| "import redirect from 'js/lib/coursera.redirect';", | |
| "redirect.setLocation('/${1}')" | |
| ], | |
| "description": "re-redirect" | |
| }, | |
| "re-TypeApiStatus": { | |
| "prefix": "re-TypeApiStatus", | |
| "body": [ | |
| "import type { ApiStatus } from 'bundles/program-common/flowTypes/programCommon';" | |
| ], | |
| "description": "re-TypeApiStatus" | |
| }, | |
| "re-trans": { | |
| "prefix": "re-trans", | |
| "body": [ | |
| "import _t from 'i18n!nls/${1:admin-dashboard}';" | |
| ], | |
| "description": "re-trans" | |
| }, | |
| "re-demoblocks": { | |
| "prefix": "re-demoblocks", | |
| "body": [ | |
| " import {", | |
| " DemoCodeBlock,", | |
| " DemoBlock,", | |
| " DemoHowBlock,", | |
| " DemoThemeContainer,", | |
| " DemoStoryContainer,", | |
| " } from 'src/stories/support/DemoBlocks';" | |
| ], | |
| "description": "re-demoblocks" | |
| }, | |
| "re-cui": { | |
| "prefix": "re-cui", | |
| "body": [ | |
| "import { ${1:Stylesheet, css} } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-cui" | |
| }, | |
| "re-cui-simple": { | |
| "prefix": "re-cui-simple", | |
| "body": [ | |
| "import { css, StyleSheet, Container } from '@coursera/coursera-ui';", | |
| "", | |
| "const styles = StyleSheet.create({", | |
| " ${1:ProgramAvailableList}: {},", | |
| "});" | |
| ], | |
| "description": "re-cui-simple" | |
| }, | |
| "re-routerLink": { | |
| "prefix": "re-routerLink", | |
| "body": [ | |
| "import { Link } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerLink" | |
| }, | |
| "re-routerDom": { | |
| "prefix": "re-routerDom", | |
| "body": [ | |
| " import {", | |
| " BrowserRouter as Router,", | |
| " Route,", | |
| " Link", | |
| " } from 'react-router-dom';" | |
| ], | |
| "description": "re-routerDom" | |
| }, | |
| "re-imgix": { | |
| "prefix": "re-imgix", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " imgParams={imgixParams.fillWithWhiteBackground}" | |
| ], | |
| "description": "re-imgix" | |
| }, | |
| "re-imgix-full": { | |
| "prefix": "re-imgix-full", | |
| "body": [ | |
| " import Imgix from 'js/components/Imgix';", | |
| " import imgixParams from 'bundles/page/common/imgixParams';", | |
| " <Imgix", | |
| " src={imgSrc}", | |
| " alt={Imgix.DECORATIVE}", | |
| " width={80}", | |
| " height={80}", | |
| " imgParams={imgixParams.fillWithWhiteBackground}", | |
| " />" | |
| ], | |
| "description": "re-imgix-full" | |
| }, | |
| "req-config-asset": { | |
| "prefix": "req-config-asset", | |
| "body": [ | |
| " import config from 'js/app/config';", | |
| " const imagePath = `${config.url.assets}images/program-home/`;" | |
| ], | |
| "description": "req-config-asset" | |
| }, | |
| "re-user": { | |
| "prefix": "re-user", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id" | |
| ], | |
| "description": "re-user" | |
| }, | |
| "re-user-full": { | |
| "prefix": "re-user-full", | |
| "body": [ | |
| "import user from 'js/lib/user';", | |
| "user.get().id", | |
| "user.get().email_address", | |
| "user.isAuthenticatedUser()", | |
| "user.isSuperuser()" | |
| ], | |
| "description": "re-user-full" | |
| }, | |
| "reBranching-full": { | |
| "prefix": "reBranching-full", | |
| "body": [ | |
| " import { withSSRPlaceholder } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| " import withIsMounted from 'bundles/coursera-ui/components/hocs/withIsMounted';", | |
| " const CourseCard = () => <div><h1>Dummy Course Card</h1></div>;", | |
| " const CourseCardPlaceholder = () => <div><h1>Course Card SSR Placeholder</h1></div>;", | |
| " const CourseCardWithSSRPlaceholderBranch = _.compose(", | |
| " withIsMounted,", | |
| " withSSRPlaceholder(CourseCardPlaceholder),", | |
| " )(CourseCard);", | |
| "", | |
| " <CourseCardWithSSRPlaceholderBranch isCSROnly />" | |
| ], | |
| "description": "reBranching-full" | |
| }, | |
| "re-button": { | |
| "prefix": "re-button", | |
| "body": [ | |
| "import { Button } from '@coursera/coursera-ui';" | |
| ], | |
| "description": "re-button" | |
| }, | |
| "re-tupleToStringKey": { | |
| "prefix": "re-tupleToStringKey", | |
| "body": [ | |
| "import { tupleToStringKey } from 'js/lib/stringKeyTuple';" | |
| ], | |
| "description": "re-tupleToStringKey" | |
| }, | |
| "re-withRenderNothing": { | |
| "prefix": "re-withRenderNothing", | |
| "body": [ | |
| "import { withRenderNothing } from 'bundles/coursera-ui/components/hocs/withBranches';", | |
| "" | |
| ], | |
| "description": "re-withRenderNothing" | |
| }, | |
| "re-ApiButton": { | |
| "prefix": "re-ApiButton", | |
| "body": [ | |
| "import ApiButton, { apiStatusPropType, errorPropType } from", | |
| " 'bundles/coursera-ui/components/basic/ApiButton';" | |
| ], | |
| "description": "re-ApiButton" | |
| }, | |
| "re-svg": { | |
| "prefix": "re-svg", | |
| "body": [ | |
| "import {${1:SvgEdit}} from 'src/svg'" | |
| ], | |
| "description": "re-svg" | |
| }, | |
| "re-ErrorMessage": { | |
| "prefix": "re-ErrorMessage", | |
| "body": [ | |
| "import ErrorMessage from 'bundles/coursera-ui/components/extended/ErrorMessage';" | |
| ], | |
| "description": "re-ErrorMessage" | |
| }, | |
| "re-formattedMessage": { | |
| "prefix": "re-formattedMessage", | |
| "body": [ | |
| "import { FormattedMessage } from 'js/lib/coursera.react-intl';" | |
| ], | |
| "description": "re-formattedMessage" | |
| }, | |
| "re-graphql-all": { | |
| "prefix": "re-graphql-all", | |
| "body": [ | |
| "import gql from 'graphql-tag';", | |
| "import { graphql } from 'react-apollo';", | |
| "import { naptime } from '@coursera/graphql-utils';" | |
| ], | |
| "description": "re-graphql-all" | |
| }, | |
| "re-recompose-common": { | |
| "prefix": "re-recompose-common", | |
| "body": [ | |
| "import { compose, withState, withHandlers, setDisplayName } from 'recompose';" | |
| ], | |
| "description": "re-recompose-common" | |
| }, | |
| /************Common************************/ | |
| "getTrans": { | |
| "prefix": "getTrans", | |
| "body": [ | |
| "function getTranslations(){", | |
| "return {${1}};", | |
| "}" | |
| ], | |
| "description": "getTrans" | |
| }, | |
| "getTransT": { | |
| "prefix": "getTransT", | |
| "body": [ | |
| "const _T = getTranslations():" | |
| ], | |
| "description": "getTransT" | |
| }, | |
| "stylesAphrodite": { | |
| "prefix": "stylesAphrodite", | |
| "body": [ | |
| "const styles = StyleSheet.create({});" | |
| ], | |
| "description": "stylesAphrodite" | |
| }, | |
| "style-bgImage": { | |
| "prefix": "style-bgImage", | |
| "body": [ | |
| "style={{ backgroundImage: `url(\"${image}\")` }}" | |
| ], | |
| "description": "style-bgImage" | |
| }, | |
| "style-media": { | |
| "prefix": "style-media", | |
| "body": [ | |
| "[`@media (max-width: ${breakPoint.sm}px)`]: {", | |
| " marginBottom: spacing.md,", | |
| " }," | |
| ], | |
| "description": "style-media" | |
| }, | |
| "lorem-pixel": { | |
| "prefix": "lorem-pixel", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "lorem-pixel" | |
| }, | |
| "placeholderit": { | |
| "prefix": "placeholderit", | |
| "body": [ | |
| "http://placehold.it/${1:600x400}/A66506/FFFFFF" | |
| ], | |
| "description": "placeholderit" | |
| }, | |
| "e.preventDefault_window": { | |
| "prefix": "e.preventDefault_window", | |
| "body": [ | |
| "if (e && e.stopPropagation){", | |
| "e.stopPropagation();", | |
| "} else if (window.event){", | |
| "window.event.cancelBubble = true;", | |
| "}" | |
| ], | |
| "description": "e.preventDefault" | |
| }, | |
| "img-placeholderit": { | |
| "prefix": "img-placeholderit", | |
| "body": [ | |
| "<img src=\" //placehold.it/${1:600x400}/A66506/FFFFFF\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit" | |
| }, | |
| "img-placeholderit-avatar": { | |
| "prefix": "img-placeholderit-avatar", | |
| "body": [ | |
| "<img src=\"https://s3.amazonaws.com/uifaces/faces/twitter/aiiaiiaii/128.jpg\" alt=\"${2:CourseraAlt}\" />" | |
| ], | |
| "description": "img-placeholderit-avatar" | |
| }, | |
| "img-lorem": { | |
| "prefix": "img-lorem", | |
| "body": [ | |
| " <img src=\"http://lorempixel.com/${1:400}/${2:200}/${3:city/}\" alt=\"${4:CourseraAlt}\" />" | |
| ], | |
| "description": "img-lorem" | |
| }, | |
| /******CUI************************/ | |
| "cuii": { | |
| "prefix": "cuii", | |
| "body": [ | |
| "\"@coursera/coursera-ui\"" | |
| ], | |
| "description": "cuii" | |
| }, | |
| "cuiisvg": { | |
| "prefix": "cuiisvg", | |
| "body": [ | |
| "\"@coursera/coursera-ui/svg\"" | |
| ], | |
| "description": "cuiisvg" | |
| }, | |
| "cui-ApiButton": { | |
| "prefix": "cui-ApiButton", | |
| "body": [ | |
| "<ApiButton", | |
| " type=\"primary\"", | |
| " onClick={onClick}", | |
| " apiStatus={apiStatus}", | |
| " apiStatusAttributesConfig={{", | |
| " label: {", | |
| " API_BEFORE_SEND: _t('Enroll'),", | |
| " API_IN_PROGRESS: _t('Enrolling...'),", | |
| " API_SUCCESS: _t('Enrolled'),", | |
| " API_ERROR: _t('Failed'),", | |
| " }", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-ApiButton" | |
| }, | |
| "cui-ErrorMessage": { | |
| "prefix": "cui-ErrorMessage", | |
| "body": [ | |
| " const DEFAULT_ERROR_MSG = _t('Error ${1:sending email}, please try again later');", | |
| " {error && <ErrorMessage error={error} defaultErrorMsg={DEFAULT_ERROR_MSG} />}" | |
| ], | |
| "description": "cui-ErrorMessage" | |
| }, | |
| "cui-button-link": { | |
| "prefix": "cui-button-link", | |
| "body": [ | |
| " <Button", | |
| " type=\"secondary\"", | |
| " tag=\"a\"", | |
| " size=\"sm\"", | |
| " label={_t('Preview')}", | |
| " style={{marginRight: spacing.md}}", | |
| " htmlAttributes={{", | |
| " href: this._programHomeLink,", | |
| " target: '_blank',", | |
| " rel: 'noopener noreferrer'", | |
| " }}", | |
| " />" | |
| ], | |
| "description": "cui-button-link" | |
| }, | |
| "cui-button": { | |
| "prefix": "cui-button", | |
| "body": [ | |
| "<Button type=\"primary\" label={${1:_t('Preview')}} onClick={onClick}" | |
| ], | |
| "description": "cui-button" | |
| }, | |
| "storySimple": { | |
| "prefix": "storySimple", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import{ storiesOf } from '@storybook/react';", | |
| "import{ withInfo } from '@storybook/addon-info';", | |
| "", | |
| "import{ Pill } from 'src';", | |
| "import PillDemo from 'src/stories/support/PillDemo';", | |
| "", | |
| "storiesOf('basic.Pill', module).add('Pill', withInfo({ propTables: [Pill]})(() => <PillDemo />));" | |
| ], | |
| "description": "storySimple" | |
| }, | |
| "storyPrototype": { | |
| "prefix": "storyPrototype", | |
| "body": [ | |
| "import * as React from 'react';", | |
| "import { storiesOf } from '@storybook/react';", | |
| "import Scholarships from 'src/components/prototypes/scholarships/Scholarships';", | |
| "storiesOf('prototypes', module).add('Scholarships', () => <Scholarships />);" | |
| ], | |
| "description": "storyPrototype" | |
| }, | |
| /*************React***********************/ | |
| "divCss": { | |
| "prefix": "divCss", | |
| "body": [ | |
| " <div {...css(styles.${1:selectizeContainer})}>", | |
| " ${2:}", | |
| " </div>" | |
| ], | |
| "description": "divCss" | |
| }, | |
| "formattedMessage-dataSize": { | |
| "prefix": "formattedMessage-dataSize", | |
| "body": [ | |
| "<FormattedMessage", | |
| " message={_t(`Delete {dataSize}", | |
| " {dataSize, plural, =1 {person} other {people}}?", | |
| " `)}", | |
| " dataSize={dataSize}", | |
| " />" | |
| ], | |
| "description": "formattedMessage-dataSize" | |
| }, | |
| "formattedHTMLMessage": { | |
| "prefix": "formattedHTMLMessage", | |
| "body": [ | |
| " <FormattedHTMLMessage", | |
| " message={_t(`", | |
| " We have not yet launched in your country. Please", | |
| " <a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\">fill this form</a>", | |
| " to contact sales.", | |
| " `)}", | |
| " link={REQUEST_DEMO_LINK}", | |
| " />" | |
| ], | |
| "description": "formattedHTMLMessage" | |
| }, | |
| "propRootClassName": { | |
| "prefix": "propRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "propRootClassName" | |
| }, | |
| "constructor-r": { | |
| "prefix": "constructor-r", | |
| "body": [ | |
| " constructor(props, context) {", | |
| " super(props, context);", | |
| " this.state = {", | |
| "", | |
| " };", | |
| " }" | |
| ], | |
| "description": "constructor-r" | |
| }, | |
| "setStateFn": { | |
| "prefix": "setStateFn", | |
| "body": [ | |
| "this.setState(() => ({{1:isDirty: false}}));" | |
| ], | |
| "description": "setStateFn" | |
| }, | |
| "rcc-stateless": { | |
| "prefix": "rcc-stateless", | |
| "body": [ | |
| "// @flow", | |
| "import React from 'react';", | |
| "", | |
| "type Props = {", | |
| " message: string,", | |
| "};", | |
| "// ToImplement(Audrey):", | |
| "export default function StepSelectPrograms(", | |
| " {", | |
| " message,", | |
| " }: Props", | |
| ") {", | |
| " return (", | |
| " <div>", | |
| " StepSelectPrograms{message}", | |
| " </div>", | |
| " );", | |
| "}" | |
| ], | |
| "description": "rcc-stateless" | |
| }, | |
| "ptHtmlAttributes": { | |
| "prefix": "ptHtmlAttributes", | |
| "body": [ | |
| "htmlAttributes?: { [htmlAttr: string]: string | number }," | |
| ], | |
| "description": "ptHtmlAttributes" | |
| }, | |
| "ptStyle": { | |
| "prefix": "ptStyle", | |
| "body": [ | |
| "style?: { [styleAttr: string]: string | number }," | |
| ], | |
| "description": "ptStyle" | |
| }, | |
| "ptRootClassName": { | |
| "prefix": "ptRootClassName", | |
| "body": [ | |
| "rootClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object])," | |
| ], | |
| "description": "ptRootClassName" | |
| }, | |
| "ptTag": { | |
| "prefix": "ptTag", | |
| "body": [ | |
| "tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])," | |
| ], | |
| "description": "ptTag" | |
| }, | |
| "demothemecontainer": { | |
| "prefix": "demothemecontainer", | |
| "body": [ | |
| "<DemoThemeContainer isThemeDark={isThemeDark}>", | |
| " ${1: ''}", | |
| "</DemoThemeContainer>" | |
| ], | |
| "description": "demothemecontainer" | |
| }, | |
| "demostorycontainer": { | |
| "prefix": "demostorycontainer", | |
| "body": [ | |
| "<DemoStoryContainer title=\"${1:Radio}\" description=\"${1:Radio} is used to...\">", | |
| " ${2:<GradientSelector />}", | |
| " </DemoStoryContainer>" | |
| ], | |
| "description": "demostorycontainer" | |
| }, | |
| "demoblock": { | |
| "prefix": "demoblock", | |
| "body": [ | |
| "<DemoBlock", | |
| " title=\"${1:RadioGroup}\"", | |
| " description=\"${2:Radio components wrapped inside RadioGroup}\"", | |
| " >", | |
| " ${3:}", | |
| " </DemoBlock>" | |
| ], | |
| "description": "demoblock" | |
| }, | |
| "demoCodeBlock": { | |
| "prefix": "demoCodeBlock", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlock" | |
| }, | |
| "demoCodeBlockNoExpanding": { | |
| "prefix": "demoCodeBlockNoExpanding", | |
| "body": [ | |
| " <DemoCodeBlock", | |
| " noExpanding", | |
| " code={`", | |
| " ${1:}", | |
| " `}", | |
| " />" | |
| ], | |
| "description": "demoCodeBlockNoExpanding" | |
| }, | |
| "export-compose": { | |
| "prefix": "export-compose", | |
| "body": [ | |
| " export default compose(", | |
| " graphql(${1:ABCQuery}),", | |
| " mapProps((props) => {", | |
| " return props;", | |
| " })", | |
| " )(${2:CollectionItemSlider});" | |
| ], | |
| "description": "export-compose" | |
| }, | |
| /*************Flow***********************/ | |
| "flInputEvent": { | |
| "prefix": "flInputEvent", | |
| "body": [ | |
| "onChange?: SyntheticInputEvent => void," | |
| ], | |
| "description": "flInputEvent" | |
| }, | |
| "flFixMe": { | |
| "prefix": "flFixMe", | |
| "body": [ | |
| "// $FlowFixMe" | |
| ], | |
| "description": "flFixMe" | |
| }, | |
| /*************ESLint***********************/ | |
| "es-no-undef": { | |
| "prefix": "es-no-undef", | |
| "body": [ | |
| "/* eslint-disable no-undef */" | |
| ], | |
| "description": "es-no-undef" | |
| }, | |
| "es-max-len": { | |
| "prefix": "es-max-len", | |
| "body": [ | |
| "// eslint-disable-line max-len" | |
| ], | |
| "description": "es-max-len" | |
| }, | |
| "es-param-reassign": { | |
| "prefix": "es-param-reassign", | |
| "body": [ | |
| "// eslint-disable-line no-param-reassign" | |
| ], | |
| "description": "es-param-reassign" | |
| }, | |
| /*************Test***********************/ | |
| "beforeEach": { | |
| "prefix": "beforeEach", | |
| "body": [ | |
| "beforeEach(() => {", | |
| " wrapper = shallow(<${1:S12nCourseCard} {...propMock} />${2:, {context}});", | |
| "});" | |
| ], | |
| "description": "beforeEach" | |
| }, | |
| /*************Other Utils***********************/ | |
| // Logging | |
| "console.log": { | |
| "prefix": "clo", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Log output to console" | |
| }, | |
| "console.warn": { | |
| "prefix": "cwarn", | |
| "body": [ | |
| "console.warn('$1');", | |
| "$2" | |
| ], | |
| "description": "Console warn output to console" | |
| }, | |
| "clo-propstate": { | |
| "prefix": "clo-propstate", | |
| "body": [ | |
| "console.log('-- ${1:Component} --', this.props, this.state);" | |
| ], | |
| "description": "clo-propstate" | |
| }, | |
| "clo-rest": { | |
| "prefix": "clo-rest", | |
| "body": [ | |
| "console.warn('---', rest);" | |
| ], | |
| "description": "clo-rest" | |
| }, | |
| "clo-prop": { | |
| "prefix": "clo-prop", | |
| "body": [ | |
| "console.warn('---', this.props);" | |
| ], | |
| "description": "clo-prop" | |
| }, | |
| "clo-state": { | |
| "prefix": "clo-state", | |
| "body": [ | |
| "console.warn('---', this.state);" | |
| ], | |
| "description": "clo-state" | |
| }, | |
| "comment.todo": { | |
| "prefix": "comment.todo", | |
| "body": [ | |
| "// TODO(Audrey):$1 " | |
| ], | |
| "description": "comment.todo" | |
| }, | |
| "comment.toImplement": { | |
| "prefix": "comment.toImplement", | |
| "body": [ | |
| "// ToImplement(Audrey):$1 " | |
| ], | |
| "description": "comment.toImplement" | |
| }, | |
| "comment.toTest": { | |
| "prefix": "comment.toTest", | |
| "body": [ | |
| "// ToTest(Audrey):$1 " | |
| ], | |
| "description": "comment.toTest" | |
| }, | |
| // Test | |
| "test.ui": { | |
| "prefix": "test-ui", | |
| "body": [ | |
| "import ${1:CourseEnrolledDefaultCard} from '../${1:CourseEnrolledDefaultCard}'; \n \n describe('${1:CourseEnrolledDefaultCard}', () =>{ \n let wrapper; \n const propMock={ course: { id: 'c1',name: 'cname', photoUrl: 'http: //photourl',slug: 'cslug',description: 'cdescription',workload: 'cworkload',homeLink: 'learn/clink',partnerIds: [1],isOnDemand: true,},}; \n describe('UI Render', () =>{ \n test('basic elements', () =>{ \n wrapper = shallow( \n <${1:CourseEnrolledDefaultCard} {...propMock \n } />); \n expect(toJson(wrapper)).toMatchSnapshot(); \n});});});" | |
| ], | |
| "description": "Test UI" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment