Rename ResolutionSelect

components/ExportSizeSelect.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { COLORS } from '../lib/constants'
 import Checkmark from './svg/Checkmark'
-import { RESOLUTIONS } from '../lib/constants'
+import { EXPORT_SIZES } from '../lib/constants'
 
 export default class extends React.Component {
   constructor(props) {
@@ -11,9 +11,9 @@ export default class extends React.Component {
     this.toggle = this.toggle.bind(this)
   }
 
-  select(resolution) {
+  select(exportSize) {
-    if (this.props.selected !== resolution) {
+    if (this.props.selected !== exportSize) {
-      this.props.onChange(resolution)
+      this.props.onChange(exportSize)
     }
   }
 
@@ -21,12 +21,12 @@ export default class extends React.Component {
     this.setState({ isVisible: !this.state.isVisible })
   }
 
-  renderResolutions() {
+  renderExportSizes() {
-    return RESOLUTIONS.map((resolution, i) => {
+    return EXPORT_SIZES.map((exportSize, i) => {
       return (
-        <div className="list-item" key={i} onClick={this.select.bind(null, resolution.id)}>
+        <div className="list-item" key={i} onClick={this.select.bind(null, exportSize.id)}>
-          <span style={{ Resolution: resolution.id }}>{resolution.name}</span>
+          <span style={{ ExportSize: exportSize.id }}>{exportSize.name}</span>
-          {this.props.selected === resolution.id ? <Checkmark /> : null}
+          {this.props.selected === exportSize.id ? <Checkmark /> : null}
           <style jsx>{`
             .list-item {
               display: flex;
@@ -51,18 +51,18 @@ export default class extends React.Component {
   }
 
   render() {
-    const selectedResolution =
+    const selectedExportSize =
-      RESOLUTIONS.filter(resolution => resolution.id === this.props.selected)[0] || {}
+      EXPORT_SIZES.filter(exportSize => exportSize.id === this.props.selected)[0] || {}
     return (
-      <div className="resolution-select-container">
+      <div className="export-size-select-container">
         <div
           onClick={this.toggle}
           className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
         >
-          <span className="label">Resolution</span>
+          <span className="label">Export Size</span>
-          <span style={{ resolution: selectedResolution.id }}>{selectedResolution.name}</span>
+          <span style={{ exportSize: selectedExportSize.id }}>{selectedExportSize.name}</span>
         </div>
-        <div className="list">{this.renderResolutions()}</div>
+        <div className="list">{this.renderExportSizes()}</div>
         <style jsx>{`
           .display {
             display: flex;

components/Settings.js

@@ -3,7 +3,7 @@ import enhanceWithClickOutside from 'react-click-outside'
 import SettingsIcon from './svg/Settings'
 import ThemeSelect from './ThemeSelect'
 import FontSelect from './FontSelect'
-import ResolutionSelect from './ResolutionSelect'
+import ExportSizeSelect from './ExportSizeSelect'
 import Slider from './Slider'
 import Toggle from './Toggle'
 import WindowPointer from './WindowPointer'
@@ -100,9 +100,9 @@ class Settings extends React.Component {
               enabled={this.props.enabled.squaredImage}
               onChange={this.props.onChange.bind(null, 'squaredImage')}
             />
-            <ResolutionSelect
+            <ExportSizeSelect
-              selected={this.props.enabled.resolution || '2x'}
+              selected={this.props.enabled.exportSize || '2x'}
-              onChange={this.props.onChange.bind(null, 'resolution')}
+              onChange={this.props.onChange.bind(null, 'exportSize')}
             />
             <Toggle
               label="Reset settings"

lib/constants.js

@@ -386,13 +386,13 @@ export const LANGUAGES = [
   }
 ]
 
-export const RESOLUTIONS = [
+export const EXPORT_SIZES = [
-  { id: '4x', name: '4x', value: '4' },
+  { id: '1x', name: '1x', value: '1' },
   { id: '2x', name: '2x', value: '2' },
-  { id: '1x', name: '1x', value: '1' }
+  { id: '4x', name: '4x', value: '4' }
 ]
 
-export const RESOLUTIONS_HASH = toHash(RESOLUTIONS)
+export const EXPORT_SIZES_HASH = toHash(EXPORT_SIZES)
 
 export const LANGUAGE_MIME_HASH = toHash(LANGUAGES, 'mime')
 export const LANGUAGE_MODE_HASH = toHash(LANGUAGES, 'mode')
@@ -401,7 +401,7 @@ export const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short')
 export const DEFAULT_LANGUAGE = 'auto'
 export const DEFAULT_THEME = THEMES_HASH.seti
 export const DEFAULT_BG_COLOR = 'rgba(171, 184, 195, 1)'
-export const DEFAULT_RESOLUTION = RESOLUTIONS_HASH['2x']
+export const DEFAULT_EXPORT_SIZE = EXPORT_SIZES_HASH['2x']
 
 export const COLORS = {
   BLACK: '#121212',
@@ -458,5 +458,5 @@ export const DEFAULT_SETTINGS = {
   windowControls: true,
   widthAdjustment: true,
   lineNumbers: false,
-  resolution: '2x'
+  exportSize: '2x'
 }

lib/routing.js

@@ -34,7 +34,7 @@ const mappings = [
   { field: 'fs:fontSize' },
   { field: 'si:squaredImage', type: 'bool' },
   { field: 'code:code' },
-  { field: 'rs:resolution' }
+  { field: 'es:exportSize' }
 ]
 
 const reverseMappings = mappings.map(mapping =>

pages/editor.js

@@ -24,10 +24,10 @@ import {
   LANGUAGE_NAME_HASH,
   DEFAULT_LANGUAGE,
   DEFAULT_THEME,
-  DEFAULT_RESOLUTION,
+  DEFAULT_EXPORT_SIZE,
   COLORS,
-  RESOLUTIONS,
+  EXPORT_SIZES,
-  RESOLUTIONS_HASH,
+  EXPORT_SIZES_HASH,
   DEFAULT_CODE,
   DEFAULT_BG_COLOR,
   DEFAULT_SETTINGS
@@ -102,18 +102,18 @@ class Editor extends React.Component {
   getCarbonImage() {
     const node = document.getElementById('export-container')
 
-    const resolutionRatio = (RESOLUTIONS_HASH[this.state.resolution] || DEFAULT_RESOLUTION).value
+    const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value
     const config = {
       style: {
-        transform: `scale(${resolutionRatio})`,
+        transform: `scale(${exportSize})`,
         'transform-origin': 'center',
         background: this.state.squaredImage ? this.state.backgroundColor : 'none'
       },
       filter: n => (n.className ? String(n.className).indexOf('eliminateOnRender') < 0 : true),
-      width: node.offsetWidth * resolutionRatio,
+      width: node.offsetWidth * exportSize,
       height: this.state.squaredImage
-        ? node.offsetWidth * resolutionRatio
+        ? node.offsetWidth * exportSize
-        : node.offsetHeight * resolutionRatio
+        : node.offsetHeight * exportSize
     }
 
     return domtoimage.toPng(node, config)