Image smoothing as a setting

engine/src/ToolSettings.js

@@ -103,7 +103,7 @@ Wick.ToolSettings = class {
             type: 'color',
             name: 'forwardOnionSkinTint',
             default: new Wick.Color('rgba(0, 0, 255, .5)'),
-        },{
+        }, {
             type: "choice",
             name: 'brushMode',
             default: 'none',

engine/src/base/Project.js

@@ -28,6 +28,7 @@ Wick.Project = class extends Wick.Base {
      * @param {number} height - Project height in pixels. Default 480.
      * @param {number} framerate - Project framerate in frames-per-second. Default 12.
      * @param {Color} backgroundColor - Project background color in hex. Default #ffffff.
+     * @param {boolean} imageSmoothing - Whether to apply smoothing to project's images.
      */
     constructor(args) {
         if (!args) args = {};
@@ -38,6 +39,7 @@ Wick.Project = class extends Wick.Base {
         this._height = args.height || 480;
         this._framerate = args.framerate || 12;
         this._backgroundColor = args.backgroundColor || new Wick.Color('#ffffff');
+        this._imageSmoothing = (typeof args.imageSmoothing === 'boolean') ? args.imageSmoothing : true;
         this._hitTestOptions = this.getDefaultHitTestOptions();
 
         this.pan = { x: 0, y: 0 };
@@ -227,6 +229,7 @@ Wick.Project = class extends Wick.Base {
         this.height = data.height;
         this.framerate = data.framerate;
         this.backgroundColor = new Wick.Color(data.backgroundColor);
+        this.imageSmoothing = data.imageSmoothing;
 
         this._focus = data.focus;
 
@@ -248,6 +251,7 @@ Wick.Project = class extends Wick.Base {
         data.width = this.width;
         data.height = this.height;
         data.backgroundColor = this.backgroundColor.rgba;
+        data.imageSmoothing = this.imageSmoothing;
         data.framerate = this.framerate;
 
         data.onionSkinEnabled = this.onionSkinEnabled
@@ -347,6 +351,19 @@ Wick.Project = class extends Wick.Base {
         this._backgroundColor = backgroundColor;
     }
 
+    /**
+     * Whether to apply image smoothing to project's images.
+     * @type {boolean}
+     */
+    get imageSmoothing() {
+        return this._imageSmoothing;
+    }
+
+    set imageSmoothing(imageSmoothing) {
+        // Apply image smoothing for old projects
+        this._imageSmoothing = (typeof imageSmoothing === 'boolean') ? imageSmoothing : true;
+    }
+
     get hitTestOptions() {
         return this._hitTestOptions;
     }

engine/src/view/View.Path.js

@@ -49,6 +49,10 @@ Wick.View.Path = class extends Wick.View {
 
         this.importJSON(this.model.json);
 
+        if(this.item instanceof this.paper.Raster) {
+            this.item.smoothing = this.model.project.imageSmoothing;
+        };
+
         // Apply onion skin style if Needed
         // (This is done here in the Path code because we actually change the style of the path
         // if the current onion skin mode is set to "outlines" or "tint")

src/Editor/Modals/SettingsModal/ProjectSettings/ProjectSettings.jsx

@@ -67,6 +67,7 @@ class ProjectSettings extends Component {
       height: this.props.project.height,
       framerate: this.props.project.framerate,
       backgroundColor: this.props.project.backgroundColor.rgba,
+      imageSmoothing: this.props.project.imageSmoothing,
       preset: this.getPreset(this.props.project.width, this.props.project.height),
     }
   }
@@ -137,13 +138,20 @@ class ProjectSettings extends Component {
     });
   }
 
+  changeProjectImageSmoothing = () => {
+    this.setState({
+      imageSmoothing: !this.state.imageSmoothing,
+    });
+  }
+
   acceptProjectSettings = () => {
     let newSettings = {
       name: this.state.name === '' ? this.defaultName : this.state.name,
       width: this.state.width,
       height: this.state.height,
       backgroundColor: new window.Wick.Color(this.state.backgroundColor),
       framerate: this.state.framerate,
+      imageSmoothing: this.state.imageSmoothing,
     }
 
     this.props.updateProjectSettings(newSettings);
@@ -157,6 +165,7 @@ class ProjectSettings extends Component {
       height: this.props.project.height,
       framerate: this.props.project.framerate,
       backgroundColor: this.props.project.backgroundColor.rgba,
+      imageSmoothing: this.props.project.imageSmoothing,
       preset: this.getPreset(this.props.project.width, this.props.project.height)
     });
   }
@@ -293,6 +302,21 @@ class ProjectSettings extends Component {
     );
   }
 
+  renderImageSmoothingObject = () => {
+    return (
+      <div className={classNames("project-setting-element", this.props.isMobile && "mobile")}>
+        <div className="project-settings-property-container">
+          <WickInput
+            type="checkbox"
+            id="project-image-smoothing-toggle"
+            label="Image Smoothing"
+            checked={this.state.imageSmoothing}
+            onChange={this.changeProjectImageSmoothing} />
+        </div>
+      </div>
+    );
+  }
+
   selectPreset = (preset) => {
     this.setState({
       width: preset.width,
@@ -407,6 +431,9 @@ class ProjectSettings extends Component {
             <div className="project-settings-modal-row">
               {this.renderPresets()}
             </div>
+            <div className="project-settings-modal-row">
+              {this.renderImageSmoothingObject()}
+            </div>
           </div>
           {/* Footer */}
           <div id="project-settings-modal-footer">
@@ -451,9 +478,12 @@ class ProjectSettings extends Component {
           <div className="project-settings-modal-row">
             {this.renderSizeObjectMobile()}
           </div>
+          <div className="project-settings-modal-row">
+            {this.renderImageSmoothingObject()}
+          </div>
         </div>
         {/* Footer */}
-        <div id="project-settings-modal-footer">
+        <div id="project-settings-modal-footer" className="mobile">
           <div className="project-settings-modal-cancel mobile">
             <ActionButton
               className="project-settings-modal-button"

src/Editor/Modals/SettingsModal/ProjectSettings/_projectsettings.scss

@@ -70,14 +70,16 @@
    position: absolute;
    bottom: 18px;
    right: 18px;
-   width: calc(100% - 40px); 
    height: 28px;
    margin-top: 25px;
    display: flex;
    flex-direction: row; 
    align-items: right;
    justify-content: right;
  }
+ #project-settings-modal-footer.mobile {
+   width: calc(100% - 40px); 
+ }
 
  .project-settings-property-container {
   height: 30px; 
@@ -112,6 +114,15 @@
   flex-direction: row; 
 }
 
+#project-settings-interior-content {
+  height: 100%;
+}
+#project-settings-modal-body {
+  height: 100%;
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+
 .project-settings-modal-body {
   display: flex;
   flex-direction: column;
@@ -171,7 +182,6 @@
 }
 
 .project-settings-presets-container {
-  height: 50px;
   width: 100%;
 }