Allow customizing the Events sheet indent scale (#6671)

Co-authored-by: Dennis Fehr <dennis.james.fehr@gmail.com> @cyraid
4ian · Jun 18, 2024 · 482fb3b · 482fb3b
1 parent 9a4a84d
commit 482fb3b
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git a/newIDE/app/src/EventsSheet/EventsTree/index.js b/newIDE/app/src/EventsSheet/EventsTree/index.js
@@ -336,6 +336,7 @@ type EventsTreeProps = {|
   windowSize: WindowSizeType,
   eventsSheetHeight: number,
   fontSize?: number,
+  indentScale: number,
 
   preferences: Preferences,
   tutorials: ?Array<Tutorial>,
@@ -827,7 +828,11 @@ export default class ThemableEventsTree extends Component<
                 key={event.ptr}
                 eventsHeightsCache={this.eventsHeightsCache}
                 selection={this.props.selection}
-                leftIndentWidth={depth * getIndentWidth(this.props.windowSize)}
+                leftIndentWidth={
+                  depth *
+                  (getIndentWidth(this.props.windowSize) *
+                    this.props.indentScale)
+                }
                 onAddNewInstruction={instructionsListContext =>
                   this.props.onAddNewInstruction(
                     eventContext,
@@ -1018,7 +1023,9 @@ export default class ThemableEventsTree extends Component<
         )}
         <SortableTree
           treeData={treeData}
-          scaffoldBlockPxWidth={getIndentWidth(this.props.windowSize)}
+          scaffoldBlockPxWidth={
+            getIndentWidth(this.props.windowSize) * this.props.indentScale
+          }
           onChange={noop}
           onVisibilityToggle={this._onVisibilityToggle}
           canDrag={false}

diff --git a/newIDE/app/src/EventsSheet/index.js b/newIDE/app/src/EventsSheet/index.js
@@ -1927,6 +1927,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
                 <EventsTree
                   ref={eventsTree => (this._eventsTree = eventsTree)}
                   key={events.ptr}
+                  indentScale={preferences.values.eventsSheetIndentScale}
                   onScroll={this._ensureFocused}
                   events={events}
                   project={project}

diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js b/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js
@@ -194,6 +194,7 @@ export type PreferencesValues = {|
   autosaveOnPreview: boolean,
   useGDJSDevelopmentWatcher: boolean,
   eventsSheetUseAssignmentOperators: boolean,
+  eventsSheetIndentScale: number,
   eventsSheetZoomLevel: number,
   showEffectParameterNames: boolean,
   projectLastUsedPaths: { [string]: { [ResourceKind]: string } },
@@ -250,6 +251,7 @@ export type Preferences = {|
   setAutosaveOnPreview: (enabled: boolean) => void,
   setUseGDJSDevelopmentWatcher: (enabled: boolean) => void,
   setEventsSheetUseAssignmentOperators: (enabled: boolean) => void,
+  setEventsSheetIndentScale: (scale: number) => void,
   setEventsSheetZoomLevel: (zoomLevel: number) => void,
   setShowEffectParameterNames: (enabled: boolean) => void,
   getLastUsedPath: (project: gdProject, kind: ResourceKind) => string,
@@ -345,6 +347,7 @@ export const initialPreferences = {
     useGDJSDevelopmentWatcher: true,
     eventsSheetUseAssignmentOperators: false,
     eventsSheetZoomLevel: 14,
+    eventsSheetIndentScale: 1,
     showEffectParameterNames: false,
     projectLastUsedPaths: {},
     defaultEditorMosaicNodes: {},
@@ -392,6 +395,7 @@ export const initialPreferences = {
   setAutosaveOnPreview: () => {},
   setUseGDJSDevelopmentWatcher: (enabled: boolean) => {},
   setEventsSheetUseAssignmentOperators: (enabled: boolean) => {},
+  setEventsSheetIndentScale: (scale: number) => {},
   setEventsSheetZoomLevel: (zoomLevel: number) => {},
   setShowEffectParameterNames: (enabled: boolean) => {},
   getLastUsedPath: (project: gdProject, kind: ResourceKind) => '',

diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js b/newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js
@@ -54,6 +54,7 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
     setAutosaveOnPreview,
     setUseGDJSDevelopmentWatcher,
     setEventsSheetUseAssignmentOperators,
+    setEventsSheetIndentScale,
     getDefaultEditorMosaicNode,
     setDefaultEditorMosaicNode,
     setAutoOpenMostRecentProject,
@@ -289,6 +290,23 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
             labelPosition="right"
             label={<Trans>Display assignment operators in Events Sheets</Trans>}
           />
+          <SelectField
+            floatingLabelText={<Trans>Indent Scale in Events Sheet</Trans>}
+            fullWidth
+            value={values.eventsSheetIndentScale.toString()}
+            onChange={(e, i, value) => {
+              setEventsSheetIndentScale(parseInt(value, 10));
+            }}
+          >
+            <SelectOption value="1" label={t`100% (Default)`} />
+            <SelectOption value="2" label={t`200%`} />
+            <SelectOption value="3" label={t`300%`} />
+            <SelectOption value="4" label={t`400%`} />
+            <SelectOption value="5" label={t`500%`} />
+            <SelectOption value="6" label={t`600%`} />
+            <SelectOption value="7" label={t`700%`} />
+            <SelectOption value="8" label={t`800%`} />
+          </SelectField>
           <SelectField
             floatingLabelText={
               <Trans>

diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js b/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
@@ -115,6 +115,7 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     setEventsSheetUseAssignmentOperators: this._setEventsSheetUseAssignmentOperators.bind(
       this
     ),
+    setEventsSheetIndentScale: this._setEventsSheetIndentScale.bind(this),
     setEventsSheetZoomLevel: this._setEventsSheetZoomLevel.bind(this),
     setShowEffectParameterNames: this._setShowEffectParameterNames.bind(this),
     getLastUsedPath: this._getLastUsedPath.bind(this),
@@ -310,6 +311,18 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
+  _setEventsSheetIndentScale(eventsSheetIndentScale: number) {
+    this.setState(
+      state => ({
+        values: {
+          ...state.values,
+          eventsSheetIndentScale,
+        },
+      }),
+      () => this._persistValuesToLocalStorage(this.state)
+    );
+  }
+
   _setEventsSheetZoomLevel(eventsSheetZoomLevel: number) {
     this.setState(
       state => ({