Break up the "Remove limits" setting into several smaller settings

src/components/tw-settings-modal/settings-modal.jsx

@@ -146,17 +146,56 @@ const Interpolation = props => (
     </WrappedBooleanSetting>
 );
 
+const InfiniteClones = props => (
+    <WrappedBooleanSetting {...props}>
+        <FormattedMessage
+            defaultMessage="Infinite Clones"
+            description="Infinite Clones setting"
+            id="tw.settingsModal.infiniteClones"
+        />
+        <div>
+            <p>
+                <FormattedMessage
+                    defaultMessage="Disables Scratch's 300 clone limit."
+                    description="Infinite Clones setting help"
+                    id="tw.settingsModal.infiniteClonesHelp"
+                />
+            </p>
+        </div>
+    </WrappedBooleanSetting>
+);
+
+const RemoveFencing = props => (
+    <WrappedBooleanSetting {...props}>
+        <FormattedMessage
+            defaultMessage="Remove Fencing"
+            description="Remove Fencing setting"
+            id="tw.settingsModal.removeFencing"
+        />
+        <div>
+            <p>
+                <FormattedMessage
+                    defaultMessage="Allows sprites to move offscreen."
+                    description="Remove Fencing setting help"
+                    id="tw.settingsModal.removeFencingHelp"
+                />
+            </p>
+        </div>
+    </WrappedBooleanSetting>
+);
+
 const RemoveLimits = props => (
     <WrappedBooleanSetting {...props}>
         <FormattedMessage
-            defaultMessage="Remove Limits (previously &quot;Infinite Clones&quot;)"
+            defaultMessage="Remove Limits"
             description="Remove Limits setting"
             id="tw.settingsModal.removeLimits"
         />
         <div>
             <p>
                 <FormattedMessage
-                    defaultMessage="Disables the following limits: Clone limit, sprite fencing, and sound effect limits"
+                    // eslint-disable-next-line max-len
+                    defaultMessage="Remove various limits that are unlikely to break projects: sound effect limits, etc."
                     description="Remove Limits setting help"
                     id="tw.settingsModal.removeLimitsHelp"
                 />
@@ -279,6 +318,14 @@ const SettingsModalComponent = props => (
                 value={props.interpolation}
                 onChange={props.onInterpolationChange}
             />
+            <InfiniteClones
+                value={props.infiniteClones}
+                onChange={props.onInfiniteClonesChange}
+            />
+            <RemoveFencing
+                value={props.removeFencing}
+                onChange={props.onRemoveFencingChange}
+            />
             <RemoveLimits
                 value={props.removeLimits}
                 onChange={props.onRemoveLimitsChange}
@@ -339,6 +386,10 @@ SettingsModalComponent.propTypes = {
     onHighQualityPenChange: PropTypes.func,
     interpolation: PropTypes.bool,
     onInterpolationChange: PropTypes.func,
+    infiniteClones: PropTypes.bool,
+    onInfiniteClonesChange: PropTypes.func,
+    removeFencing: PropTypes.bool,
+    onRemoveFencingChange: PropTypes.func,
     removeLimits: PropTypes.bool,
     onRemoveLimitsChange: PropTypes.func,
     warpTimer: PropTypes.bool,

src/containers/tw-settings-modal.jsx

@@ -24,6 +24,8 @@ class UsernameModal extends React.Component {
             'handleClose',
             'handleHighQualityPenChange',
             'handleInterpolationChange',
+            'handleInfiniteClonesChange',
+            'handleRemoveFencingChange',
             'handleRemoveLimitsChange',
             'handleWarpTimerChange',
             'handleStageWidthChange',
@@ -57,8 +59,20 @@ class UsernameModal extends React.Component {
     handleInterpolationChange (e) {
         this.props.vm.setInterpolation(e.target.checked);
     }
+    handleInfiniteClonesChange (e) {
+        this.props.vm.setRuntimeOptions({
+            maxClones: e.target.checked ? Infinity : 300
+        });
+    }
+    handleRemoveFencingChange (e) {
+        this.props.vm.setRuntimeOptions({
+            fencing: !e.target.checked
+        });
+    }
     handleRemoveLimitsChange (e) {
-        this.props.vm.setLimits(!e.target.checked);
+        this.props.vm.setRuntimeOptions({
+            effectLimits: !e.target.checked
+        });
     }
     handleWarpTimerChange (e) {
         this.props.vm.setCompilerOptions({
@@ -107,6 +121,8 @@ class UsernameModal extends React.Component {
                 reloadRequired={this.state.reloadRequired}
                 onHighQualityPenChange={this.handleHighQualityPenChange}
                 onInterpolationChange={this.handleInterpolationChange}
+                onInfiniteClonesChange={this.handleInfiniteClonesChange}
+                onRemoveFencingChange={this.handleRemoveFencingChange}
                 onRemoveLimitsChange={this.handleRemoveLimitsChange}
                 onWarpTimerChange={this.handleWarpTimerChange}
                 onStageWidthChange={this.handleStageWidthChange}
@@ -128,12 +144,14 @@ UsernameModal.propTypes = {
         renderer: PropTypes.shape({
             setUseHighQualityRender: PropTypes.func
         }),
+        setCompilerOptions: PropTypes.func,
         setInterpolation: PropTypes.func,
-        setLimits: PropTypes.func,
-        setCompilerOptions: PropTypes.func
+        setRuntimeOptions: PropTypes.func
     }),
     highQualityPen: PropTypes.bool,
     interpolation: PropTypes.bool,
+    infiniteClones: PropTypes.bool,
+    removeFencing: PropTypes.bool,
     removeLimits: PropTypes.bool,
     warpTimer: PropTypes.bool,
     disableCompiler: PropTypes.bool
@@ -143,7 +161,9 @@ const mapStateToProps = state => ({
     vm: state.scratchGui.vm,
     highQualityPen: state.scratchGui.tw.highQualityPen,
     interpolation: state.scratchGui.tw.interpolation,
-    removeLimits: !state.scratchGui.vm.hasLimits(),
+    infiniteClones: state.scratchGui.tw.runtimeOptions.maxClones === Infinity,
+    removeFencing: !state.scratchGui.tw.runtimeOptions.fencing,
+    removeLimits: !state.scratchGui.tw.runtimeOptions.effectLimits,
     warpTimer: state.scratchGui.tw.compilerOptions.warpTimer,
     disableCompiler: !state.scratchGui.tw.compilerOptions.enabled
 });

src/lib/tw-state-manager-hoc.jsx

@@ -470,11 +470,22 @@ const TWStateManager = function (WrappedComponent) {
                     // Leave ?stuck as-is when in editor
                 }
 
-                if (this.props.vm.hasLimits()) {
+                if (runtimeOptions.maxClones === 300) {
+                    searchParams.delete('clones');
+                } else {
+                    searchParams.set('clones', runtimeOptions.maxClones);
+                }
+
+                if (runtimeOptions.fencing) {
+                    searchParams.delete('offscreen');
+                } else {
+                    searchParams.set('offscreen', '');
+                }
+
+                if (runtimeOptions.effectLimits) {
                     searchParams.delete('limitless');
                 } else {
                     searchParams.set('limitless', '');
-                    searchParams.delete('clones');
                 }
 
                 let newSearch = searchParams.toString();

src/reducers/tw.js

@@ -26,7 +26,9 @@ export const initialState = {
         warpTimer: false
     },
     runtimeOptions: {
-        maxClones: 300
+        maxClones: 300,
+        effectLimits: true,
+        fencing: true
     },
     isWindowFullScreen: false,
     dimensions: [0, 0],