elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 05:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1025 from tidalcycles/sync-toggle

Browse Source 
add setting for sync flag
This commit is contained in:
Felix Roos 2024-03-28 17:06:44 +01:00 committed by GitHub
commit e2b4f6f5ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/repl/Repl.jsx
View File

@ -61,12 +61,12 @@ async function getModule(name) {
export function Repl({ embedded = false }) { export function Repl({ embedded = false }) {
const isEmbedded = embedded || isIframe; const isEmbedded = embedded || isIframe;
const { panelPosition, isZen } = useSettings(); const { panelPosition, isZen, isSyncEnabled } = useSettings();
const init = useCallback(() => { const init = useCallback(() => {
const drawTime = [-2, 2]; const drawTime = [-2, 2];
const drawContext = getDrawContext(); const drawContext = getDrawContext();
const editor = new StrudelMirror({ const editor = new StrudelMirror({
sync: false, sync: isSyncEnabled,
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,
getTime: () => getAudioContext().currentTime, getTime: () => getAudioContext().currentTime,
setInterval, setInterval,

11
website/src/repl/panel/SettingsTab.jsx
View File

@ -88,6 +88,7 @@ export function SettingsTab({ started }) {
isAutoCompletionEnabled, isAutoCompletionEnabled,
isTooltipEnabled, isTooltipEnabled,
isFlashEnabled, isFlashEnabled,
isSyncEnabled,
isLineWrappingEnabled, isLineWrappingEnabled,
fontSize, fontSize,
fontFamily, fontFamily,
@ -182,6 +183,16 @@ export function SettingsTab({ started }) {
onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)} onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
value={isFlashEnabled} value={isFlashEnabled}
/> />
<Checkbox
label="Sync across Browser Tabs / Windows"
onChange={(cbEvent) => {
if (confirm('Changing this setting requires the window to reload itself. OK?')) {
settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
window.location.reload();
}
}}
value={isSyncEnabled}
/>
</FormItem> </FormItem>
<FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem> <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
<FormItem label="Reset Settings"> <FormItem label="Reset Settings">

22
website/src/settings.mjs
View File

@ -13,6 +13,7 @@ export const defaultSettings = {
isAutoCompletionEnabled: false, isAutoCompletionEnabled: false,
isTooltipEnabled: false, isTooltipEnabled: false,
isFlashEnabled: true, isFlashEnabled: true,
isSyncEnabled: false,
isLineWrappingEnabled: false, isLineWrappingEnabled: false,
isPatternHighlightingEnabled: true, isPatternHighlightingEnabled: true,
theme: 'strudelTheme', theme: 'strudelTheme',
@ -29,6 +30,8 @@ export const defaultSettings = {
export const settingsMap = persistentMap('strudel-settings', defaultSettings); export const settingsMap = persistentMap('strudel-settings', defaultSettings);
const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
export function useSettings() { export function useSettings() {
const state = useStore(settingsMap); const state = useStore(settingsMap);
@ -40,15 +43,16 @@ export function useSettings() {
}); });
return { return {
...state, ...state,
isZen: [true, 'true'].includes(state.isZen) ? true : false, isZen: parseBoolean(state.isZen),
isBracketMatchingEnabled: [true, 'true'].includes(state.isBracketMatchingEnabled) ? true : false, isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false, isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false, isActiveLineHighlighted: parseBoolean(state.isActiveLineHighlighted),
isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false, isAutoCompletionEnabled: parseBoolean(state.isAutoCompletionEnabled),
isPatternHighlightingEnabled: [true, 'true'].includes(state.isPatternHighlightingEnabled) ? true : false, isPatternHighlightingEnabled: parseBoolean(state.isPatternHighlightingEnabled),
isTooltipEnabled: [true, 'true'].includes(state.isTooltipEnabled) ? true : false, isTooltipEnabled: parseBoolean(state.isTooltipEnabled),
isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false, isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled),
isFlashEnabled: [true, 'true'].includes(state.isFlashEnabled) ? true : false, isFlashEnabled: parseBoolean(state.isFlashEnabled),
isSyncEnabled: parseBoolean(state.isSyncEnabled),
fontSize: Number(state.fontSize), fontSize: Number(state.fontSize),
panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is! panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
userPatterns: userPatterns, userPatterns: userPatterns,