Merge branch 'develop' into update-eslint-smore

.circleci/config.yml

@@ -0,0 +1,142 @@
+version: 2.1
+aliases:
+  - &defaults
+      docker:
+        - image: cimg/node:12.22.11-browsers
+          auth:
+            username: $DOCKERHUB_USERNAME
+            password: $DOCKERHUB_PASSWORD
+      working_directory: ~/repo
+      environment:
+        NODE_ENV: production
+  - &setup
+    name: "setup"
+    command: |
+      npm --production=false ci
+      mkdir ./test/results
+  - &lint
+    name: "run lint tests"
+    command: npm run lint -- --format junit -o ./test/results/lint-results.xml
+  - &unit
+    name: "run unit tests"
+    command: JEST_JUNIT_OUTPUT_NAME=unit-jest-results.xml npm run unit -- --reporters=jest-junit
+  - &build
+    name: "run npm build"
+    command: |
+      NODE_ENV=production npm run build
+  - &tag-setup
+    name: "setup tags"
+    command: |
+      RELEASE_TIMESTAMP="$(date +'%Y%m%d%H%M%S')"
+      VPKG=$($(npm bin)/json -f package.json version)
+      echo export RELEASE_VERSION=${VPKG}-prerelease.${RELEASE_TIMESTAMP} >> $BASH_ENV
+      echo export NPM_TAG=latest >> $BASH_ENV
+      if [[ "$CIRCLE_BRANCH" == hotfix/* ]]; then # double brackets are important for matching the wildcard
+        echo export NPM_TAG=hotfix >> $BASH_ENV
+      fi
+  - &deploy-gh-pages
+    name: "deploy to gh pages"
+    command: |
+      git config --global user.email $(git log --pretty=format:"%ae" -n1)
+      git config --global user.name $(git log --pretty=format:"%an" -n1)
+      npm run deploy -- -e $CIRCLE_BRANCH
+  - &deploy-npm
+    name: "deploy to npm"
+    command: |
+      echo "npm tag: $NPM_TAG"
+      echo "release version: $RELEASE_VERSION"
+      npm version --no-git-tag-version $RELEASE_VERSION
+      npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
+      npm publish --tag $NPM_TAG
+  - &tag-commit
+    name: "tag commit in github"
+    command: |
+      echo $RELEASE_VERSION
+      git tag $RELEASE_VERSION
+      git push $CIRCLE_REPOSITORY_URL $RELEASE_VERSION
+
+jobs:
+  build-test:
+    <<: *defaults
+    steps:
+      - checkout
+      - run:
+          <<: *setup
+      - run:
+          <<: *lint
+      - run:
+          <<: *unit
+      - run:
+          <<: *build
+      - store_test_results:
+          path: test/results
+  build-test-deploy:
+    <<: *defaults
+    steps:
+      - checkout
+      - run:
+          <<: *setup
+      - run:
+          <<: *lint
+      - run:
+          <<: *unit
+      - run:
+          <<: *build
+      - store_test_results:
+          path: test/results
+      - run:
+          <<: *tag-setup
+      - run:
+          <<: *deploy-gh-pages
+      - run:
+          <<: *deploy-npm
+      - run:
+          <<: *tag-commit
+  push-translations:
+    <<: *defaults
+    steps:
+      - checkout
+      - run:
+          <<: *setup
+      - run:
+          name: "run i18n script"
+          command: |
+            npm run i18n:src
+            npm run i18n:push
+
+workflows:
+  build-test-no-deploy:
+    jobs:
+      - build-test:
+          context:
+            - dockerhub-credentials
+          filters:
+            branches:
+                ignore:
+                  - master
+                  - develop
+                  - /^hotfix\/.*/
+                  - gh-pages
+  build-test-deploy:
+    jobs:
+      - build-test-deploy:
+          context:
+            - dockerhub-credentials
+          filters:
+            branches:
+                only:
+                  - master
+                  - develop
+                  - /^hotfix\/.*/
+  push-translations:
+    triggers:
+      - schedule:
+          cron: 0 0 * * * # daily at 12 UTC, 8 ET
+          filters:
+            branches:
+              only:
+                - develop
+    jobs:
+      - push-translations:
+          context:
+            - dockerhub-credentials

.editorconfig

@@ -9,5 +9,5 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{yml,json}]
+[*.{yml,json,json5}]
 indent_size = 2

.gitattributes

@@ -16,6 +16,7 @@
 *.js text eol=lf
 *.js.map text eol=lf
 *.json text eol=lf
+*.json5 text eol=lf
 *.md text eol=lf
 *.vert text eol=lf
 *.xml text eol=lf

.gitignore

@@ -16,3 +16,6 @@ dist/*
 # generated translation files
 /translations
 /locale
+
+# tests
+/test/results/*

.travis.yml

@@ -1,80 +0,0 @@
-language: node_js
-node_js:
-- 12
-env:
-  global:
-  - NODE_ENV=production
-  - NPM_TAG=latest
-  - RELEASE_TIMESTAMP="$(date +'%Y%m%d%H%M%S')"
-  matrix:
-  - NPM_SCRIPT="unit"
-cache:
-  directories:
-  - node_modules
-install:
-- npm --production=false install
-- npm --production=false update
-script: npm run $NPM_SCRIPT
-jobs:
-    include:
-    - env: NPM_SCRIPT=lint
-    - env: NPM_SCRIPT=build
-      if: not (type != pull_request AND (branch =~ /^(develop|master|hotfix\/)/))
-    - stage: release
-      env: NPM_SCRIPT=build
-      before_deploy:
-      - >
-        if [ -z "$BEFORE_DEPLOY_RAN" ]; then
-          VPKG=$($(npm bin)/json -f package.json version)
-          export RELEASE_VERSION=${VPKG}-prerelease.${RELEASE_TIMESTAMP}
-          npm --no-git-tag-version version $RELEASE_VERSION
-          if [[ "$TRAVIS_BRANCH" == hotfix/* ]]; then # double brackets are important for matching the wildcard
-            export NPM_TAG=hotfix
-          fi
-          git config --global user.email "$(git log --pretty=format:"%ae" -n1)"
-          git config --global user.name "$(git log --pretty=format:"%an" -n1)"
-          export BEFORE_DEPLOY_RAN=true
-        fi
-      deploy:
-      - provider: script
-        on:
-          all_branches: true
-          condition: $TRAVIS_BRANCH != develop && $TRAVIS_EVENT_TYPE != cron
-        skip_cleanup: true
-        script: npm run deploy -- -x -e $TRAVIS_BRANCH -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
-      - provider: script
-        on:
-          branch: develop
-          condition: $TRAVIS_EVENT_TYPE != cron
-        skip_cleanup: true
-        script: npm run --silent deploy -- -x -a -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
-      - provider: npm
-        on:
-          branch:
-          - master
-          - develop
-          - hotfix/*
-          condition: $TRAVIS_EVENT_TYPE != cron
-        skip_cleanup: true
-        email: $NPM_EMAIL
-        api_key: $NPM_TOKEN
-        tag: $NPM_TAG
-      - provider: script
-        on:
-          branch:
-          - master
-          - develop
-          - hotfix/*
-          condition: $TRAVIS_EVENT_TYPE != cron
-        skip_cleanup: true
-        script: if npm info | grep -q $RELEASE_VERSION; then git tag $RELEASE_VERSION && git push https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git $RELEASE_VERSION; fi
-    - provider: script
-      on:
-        branch: develop
-        condition: $TRAVIS_EVENT_TYPE == cron
-      skip_cleanup: true
-      script: npm run i18n:src && npm run i18n:push
-stages:
-- test
-- name: release
-  if: type != pull_request AND (branch =~ /^(develop|master|hotfix\/)/)

package.json

@@ -7,13 +7,13 @@
   "scripts": {
     "build": "npm run clean && webpack --progress --colors --bail",
     "clean": "rimraf ./dist && mkdirp dist && rimraf ./playground && mkdirp playground",
-    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"[skip ci] Build for $(git log --pretty=format:%H -n1)\"",
     "i18n:push": "tx-push-src scratch-editor paint-editor ./translations/en.json",
     "i18n:src": "rimraf ./translations/messages && babel src > tmp.js && rimraf tmp.js && ./scripts/build-i18n-source.js ./translations/messages/ ./translations/",
     "lint": "eslint . --ext .js,.jsx",
     "start": "webpack-dev-server",
     "test": "npm run lint && npm run unit && NODE_ENV=production npm run build",
-    "unit": "jest",
+    "unit": "jest --reporters=default",
     "watch": "webpack --progress --colors --watch"
   },
   "author": "Massachusetts Institute of Technology",
@@ -31,8 +31,7 @@
     "lodash.omit": "4.5.0",
     "minilog": "3.1.0",
     "parse-color": "1.0.0",
-    "prop-types": "^15.5.10",
-    "scratch-render-fonts": "latest"
+    "prop-types": "^15.5.10"
   },
   "peerDependencies": {
     "react": "^16",
@@ -44,38 +43,40 @@
     "react-responsive": "^4",
     "react-style-proptype": "^3",
     "react-tooltip": "^3",
-    "redux": "^3"
+    "redux": "^3",
+    "scratch-render-fonts": "^1.0.0-prerelease.20210401210003"
   },
   "devDependencies": {
     "autoprefixer": "9.7.4",
     "babel-cli": "6.26.0",
-    "babel-core": "^6.23.1",
+    "babel-core": "6.26.3",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
+    "babel-jest": "23.6.0",
+    "babel-loader": "7.1.5",
     "babel-plugin-react-intl": "3.0.1",
-    "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.7.0",
+    "babel-preset-react": "6.24.1",
     "css-loader": "3.4.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "^7.13.0",
-    "eslint-config-import": "^0.13.0",
-    "eslint-config-scratch": "^6.0.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-import": "0.13.0",
+    "eslint-config-scratch": "7.0.0",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-react": "7.20.3",
-    "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
+    "gh-pages": "3.2.3",
     "html-webpack-plugin": "3.2.0",
-    "jest": "^22.2.2",
-    "jest-canvas-mock": "^2.2.0",
-    "json": "^9.0.6",
+    "jest": "22.4.4",
+    "jest-canvas-mock": "2.3.1",
+    "jest-junit": "13.0.0",
+    "json": "9.0.6",
     "lodash.defaultsdeep": "4.6.1",
-    "mkdirp": "^1.0.3",
-    "postcss-import": "^12.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-simple-vars": "^5.0.1",
-    "raf": "^3.4.0",
+    "mkdirp": "1.0.4",
+    "postcss-import": "12.0.1",
+    "postcss-loader": "3.0.0",
+    "postcss-simple-vars": "5.0.2",
+    "raf": "3.4.1",
     "react": "16.2.0",
     "react-dom": "16.4.0",
     "react-intl": "2.9.0",
@@ -87,19 +88,20 @@
     "react-test-renderer": "^16.0.0",
     "react-tooltip": "3.8.4",
     "redux": "3.7.2",
-    "redux-mock-store": "^1.2.3",
+    "redux-mock-store": "1.5.4",
     "redux-throttle": "0.1.1",
-    "regenerator-runtime": "^0.13.3",
-    "rimraf": "^2.6.1",
-    "scratch-l10n": "3.11.20210308031514",
-    "style-loader": "^1.0.0",
-    "svg-url-loader": "^3.0.0",
-    "tap": "^14.4.3",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "url-loader": "^2.1.0",
-    "webpack": "^4.8.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.9"
+    "regenerator-runtime": "0.13.9",
+    "rimraf": "2.7.1",
+    "scratch-l10n": "3.14.20220825031548",
+    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
+    "style-loader": "1.3.0",
+    "svg-url-loader": "3.0.3",
+    "tap": "14.11.0",
+    "uglifyjs-webpack-plugin": "2.2.0",
+    "url-loader": "2.3.0",
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.2"
   },
   "jest": {
     "setupFiles": [
@@ -112,5 +114,13 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }
-  }
+  },
+  "jest-junit": {
+    "outputDirectory": "./test/results"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Safari >= 8",
+    "iOS >= 8"
+  ]
 }

renovate.json5

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+
+  "extends": [
+    "github>LLK/scratch-renovate-config:conservative"
+  ]
+}

src/containers/paper-canvas.jsx

@@ -197,6 +197,7 @@ class PaperCanvas extends React.Component {
         const paperCanvas = this;
         // Pre-process SVG to prevent parsing errors (discussion from #213)
         // 1. Remove svg: namespace on elements.
+        // TODO: remove
         svg = svg.split(/<\s*svg:/).join('<');
         svg = svg.split(/<\/\s*svg:/).join('</');
         // 2. Add root svg namespace if it does not exist.

src/containers/stroke-width-indicator.jsx

@@ -7,8 +7,9 @@ import {changeStrokeColor, changeStrokeColor2, changeStrokeGradientType} from '.
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
 import {getSelectedLeafItems} from '../helper/selection';
-import {applyColorToSelection, applyStrokeWidthToSelection, getColorsFromSelection, MIXED}
-    from '../helper/style-path';
+import {
+    applyColorToSelection, applyStrokeWidthToSelection, getColorsFromSelection, MIXED
+} from '../helper/style-path';
 import GradientTypes from '../lib/gradient-types';
 import Modes from '../lib/modes';
 import Formats, {isBitmap} from '../lib/format';

src/helper/selection-tools/move-tool.js

@@ -4,8 +4,9 @@ import {isGroup} from '../group';
 import {isCompoundPathItem, getRootItem} from '../item';
 import {checkPointsClose, snapDeltaToAngle} from '../math';
 import {getActionBounds, CENTER} from '../view';
-import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
-    from '../selection';
+import {
+    clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection
+} from '../selection';
 import {getDragCrosshairLayer, CROSSHAIR_FULL_OPACITY} from '../layer';
 
 /** Snap to align selection center to rotation center within this distance */
@@ -127,7 +128,7 @@ class MoveTool {
 
         point.x = Math.max(actionBounds.left, Math.min(point.x, actionBounds.right));
         point.y = Math.max(actionBounds.top, Math.min(point.y, actionBounds.bottom));
-        
+
         const dragVector = point.subtract(event.downPoint);
         let snapVector;
 
@@ -167,7 +168,7 @@ class MoveTool {
                 bounds = item.bounds;
             }
         }
-        
+
         if (this.firstDrag) {
             // Show the center crosshair above the selected item while dragging.
             getDragCrosshairLayer().visible = true;

src/helper/tools/fill-tool.js

@@ -21,6 +21,7 @@ class FillTool extends paper.Tool {
 
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
+        this.onMouseDown = this.handleMouseDown;
         this.onMouseMove = this.handleMouseMove;
         this.onMouseUp = this.handleMouseUp;
 
@@ -91,7 +92,7 @@ class FillTool extends paper.Tool {
     setPrevHoveredItemId (prevHoveredItemId) {
         this.prevHoveredItemId = prevHoveredItemId;
     }
-    handleMouseMove (event) {
+    updateFillPreview (event) {
         const hoveredItem = getHoveredItem(event, this.getHitOptions(), true /* subselect */);
         if ((!hoveredItem && this.prevHoveredItemId) || // There is no longer a hovered item
                 (hoveredItem && !this.prevHoveredItemId) || // There is now a hovered item
@@ -152,6 +153,15 @@ class FillTool extends paper.Tool {
             this._setFillItemColor(this.fillColor, this.fillColor2, this.gradientType, event.point);
         }
     }
+    handleMouseDown (event) {
+        // on touch, the user might touch-and-hold to preview what the fill tool would do
+        // if they don't move their finger at all after the "mouse down" event
+        // then this might be our only chance to give them a good preview
+        this.updateFillPreview(event);
+    }
+    handleMouseMove (event) {
+        this.updateFillPreview(event);
+    }
     handleMouseUp (event) {
         if (event.event.button > 0) return; // only first mouse button
         if (this.fillItem) {

webpack.config.js

@@ -44,9 +44,7 @@ const base = {
                         return [
                             postcssImport,
                             postcssVars,
-                            autoprefixer({
-                                browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
-                            })
+                            autoprefixer()
                         ];
                     }
                 }