Skip to content

Commit 0baabd5

Browse files
antoninkrizantoninkriz
committed
Upgraded all packages, cleaned up code
1 parent 6bed48d commit 0baabd5

25 files changed

+3432
-5629
lines changed

‎.babelrc‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎.eslintrc.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
const prettierConfig = require('./.prettierrc.js');
1+
const prettierConfig = require('./.prettierrc')
22

33
module.exports = {
4-
parser: 'babel-eslint',
4+
parser: '@babel/eslint-parser',
55
parserOptions: {
66
ecmaVersion: 2017,
77
sourceType: 'module',
@@ -14,7 +14,12 @@ module.exports = {
1414
es6: true,
1515
node: true
1616
},
17-
extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
17+
extends: [
18+
'airbnb',
19+
'prettier',
20+
'plugin:storybook/recommended',
21+
'plugin:storybook/recommended'
22+
],
1823
plugins: ['prettier'],
1924
rules: {
2025
'prettier/prettier': [2, prettierConfig],
@@ -25,14 +30,17 @@ module.exports = {
2530
'import/prefer-default-export': 0,
2631
'react/prefer-stateless-function': 0,
2732
'react/destructuring-assignment': 0,
28-
'import/no-extraneous-dependencies': ['error', {
29-
devDependencies: ['stories/**/*']
30-
}],
33+
'import/no-extraneous-dependencies': [
34+
'error',
35+
{
36+
devDependencies: ['stories/**/*']
37+
}
38+
],
3139
'jsx-a11y/mouse-events-have-key-events': 0
3240
},
3341
settings: {
3442
react: {
3543
version: 'detect'
3644
}
3745
}
38-
};
46+
}

‎.storybook/main.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
module.exports = {
2-
"stories": [
3-
'../stories/**/*',
4-
],
5-
"addons": [
6-
"@storybook/addon-links",
7-
"@storybook/addon-essentials",
8-
"@storybook/addon-interactions"
9-
],
10-
"framework": "@storybook/react"
11-
}
2+
'stories': ['../stories/**/*'],
3+
'addons': ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
4+
'framework': {
5+
name: '@storybook/react-webpack5',
6+
options: {}
7+
},
8+
features: {
9+
storyStoreV7: false
10+
},
11+
core: {
12+
disableTelemetry: true
13+
},
14+
docs: {
15+
autodocs: 'tag'
16+
}
17+
}

‎babel.config.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"targets": {
7+
"browsers": ["last 2 versions and not dead"]
8+
}
9+
}
10+
],
11+
"@babel/preset-react"
12+
],
13+
"plugins": [
14+
"@babel/plugin-proposal-class-properties",
15+
"@babel/plugin-proposal-private-methods",
16+
"@babel/plugin-proposal-private-property-in-object"
17+
]
18+
}

‎package.json‎

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
{
22
"name": "react-canvas",
3-
"version": "1.7.0",
4-
"description": "High performance <canvas> rendering for React components",
3+
"version": "1.8.0",
4+
"description": "High performance <canvas> rendering for React components for React 18",
55
"main": "dist/index.js",
66
"files": [
77
"dist",
88
"src"
99
],
1010
"repository": {
1111
"type": "git",
12-
"url": "https://github.com/gfodor/react-canvas.git"
12+
"url": "https://github.com/antoninkriz/react-canvas.git"
1313
},
1414
"scripts": {
1515
"build": "rimraf dist && babel src --out-dir dist",
16-
"storybook": "start-storybook -p 6006",
17-
"build-storybook": "build-storybook",
16+
"storybook": "storybook dev -p 6006",
1817
"prepare": "yarn build",
1918
"prettier": "prettier {src,stories}/**/* --write",
2019
"lint": "eslint 'src/**/*' 'stories/**/*'"
@@ -23,43 +22,59 @@
2322
"react",
2423
"canvas"
2524
],
25+
"maintainers": [
26+
{
27+
"name": "Antonín Kříž",
28+
"url": "https://www.antoninkriz.eu"
29+
}
30+
],
31+
"contributors": [
32+
"Antonín Kříž (https://www.antoninkriz.eu)",
33+
"Jakub Kottnauer <jk@jakubkottnauer.com>",
34+
"Tomáš Vojtášek <tomas.vojtasek@quantlane.com>",
35+
"Vita Smid <hi@vitasmid.com>",
36+
"Greg Fodor <gfodor@gmail.com>",
37+
"Christopher Berger <contact@christopherberger.info>",
38+
"Brent Vatne <brent.vatne@madriska.com>"
39+
],
2640
"author": "Michael Johnston <mj@flipboard.com>",
2741
"license": "BSD-3-Clause",
28-
"homepage": "https://github.com/gfodor/react-canvas",
42+
"homepage": "https://github.com/antoninkriz/react-canvas",
2943
"bugs": {
30-
"url": "https://github.com/gfodor/react-canvas/issues"
44+
"url": "https://github.com/antoninkriz/react-canvas/issues"
3145
},
3246
"devDependencies": {
33-
"@babel/cli": "^7.18.9",
34-
"@babel/core": "^7.18.9",
47+
"@babel/cli": "^7.20.7",
48+
"@babel/core": "^7.20.12",
49+
"@babel/eslint-parser": "^7.19.1",
3550
"@babel/plugin-proposal-class-properties": "^7.18.6",
36-
"@babel/preset-env": "^7.18.9",
51+
"@babel/preset-env": "^7.20.2",
3752
"@babel/preset-react": "^7.18.6",
38-
"@storybook/addon-actions": "^6.5.9",
39-
"@storybook/addon-essentials": "^6.5.9",
40-
"@storybook/addon-interactions": "^6.5.9",
41-
"@storybook/addon-links": "^6.5.9",
42-
"@storybook/builder-webpack4": "^6.5.9",
43-
"@storybook/manager-webpack4": "^6.5.9",
44-
"@storybook/react": "^6.5.9",
45-
"@storybook/testing-library": "^0.0.13",
46-
"alea": "^0.0.9",
47-
"babel-eslint": "^10.0.1",
48-
"babel-loader": "^8.0.6",
49-
"d3-scale": "^1.0.7",
50-
"eslint": "5.3.0",
51-
"eslint-config-airbnb": "17.1.0",
52-
"eslint-config-prettier": "^4.3.0",
53-
"eslint-plugin-import": "^2.14.0",
54-
"eslint-plugin-jsx-a11y": "^6.1.1",
55-
"eslint-plugin-prettier": "^3.1.0",
56-
"eslint-plugin-react": "^7.11.0",
57-
"eslint-plugin-storybook": "^0.6.1",
53+
"@storybook/addon-actions": "^7.0.0-beta.25",
54+
"@storybook/addon-essentials": "^7.0.0-beta.25",
55+
"@storybook/addon-interactions": "^7.0.0-beta.25",
56+
"@storybook/addon-links": "^7.0.0-beta.25",
57+
"@storybook/react": "^7.0.0-beta.25",
58+
"@storybook/react-webpack5": "^7.0.0-beta.25",
59+
"@storybook/testing-library": "^0.0.14-next.1",
60+
"alea": "^1.0.1",
61+
"babel-loader": "^9.1.2",
62+
"d3-scale": "^4.0.2",
63+
"d3-scale-chromatic": "^3.0.0",
64+
"eslint": "^8.31.0",
65+
"eslint-config-airbnb": "^19.0.4",
66+
"eslint-config-prettier": "^8.6.0",
67+
"eslint-plugin-import": "^2.27.4",
68+
"eslint-plugin-jsx-a11y": "^6.7.1",
69+
"eslint-plugin-prettier": "^4.2.1",
70+
"eslint-plugin-react": "^7.32.0",
71+
"eslint-plugin-storybook": "^0.6.10",
5872
"lodash.range": "^3.2.0",
59-
"prettier": "^1.17.1",
73+
"prettier": "^2.8.2",
6074
"react": "^18.2.0",
6175
"react-dom": "^18.2.0",
62-
"rimraf": "^2.6.2"
76+
"rimraf": "^3.0.2",
77+
"storybook": "^7.0.0-beta.25"
6378
},
6479
"peerDependencies": {
6580
"react": "^18.2.0",

‎src/CanvasComponent.js‎

Lines changed: 69 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,74 @@ import { make } from './FrameUtils'
33
import * as EventTypes from './EventTypes'
44
import { emptyObject } from './utils'
55

6+
function setStyleFromProps(layer, props) {
7+
let style = emptyObject
8+
9+
if (props.style) {
10+
// eslint-disable-next-line prefer-destructuring
11+
style = props.style
12+
layer._originalStyle = style
13+
} else {
14+
layer._originalStyle = null
15+
}
16+
17+
if (!layer.frame) {
18+
layer.frame = make(0, 0, 0, 0)
19+
}
20+
21+
const { frame } = layer
22+
const l = style.left || 0
23+
const t = style.top || 0
24+
const w = style.width || 0
25+
const h = style.height || 0
26+
27+
if (frame.x !== l) frame.x = l
28+
if (frame.y !== t) frame.y = t
29+
if (frame.width !== w) frame.width = w
30+
if (frame.height !== h) frame.height = h
31+
32+
// Common layer properties
33+
if (layer.alpha !== style.alpha) layer.alpha = style.alpha
34+
35+
if (layer.backgroundColor !== style.backgroundColor)
36+
layer.backgroundColor = style.backgroundColor
37+
38+
if (layer.borderColor !== style.borderColor)
39+
layer.borderColor = style.borderColor
40+
41+
if (layer.borderWidth !== style.borderWidth)
42+
layer.borderWidth = style.borderWidth
43+
44+
if (layer.borderRadius !== style.borderRadius)
45+
layer.borderRadius = style.borderRadius
46+
47+
if (layer.clipRect !== style.clipRect) layer.clipRect = style.clipRect
48+
49+
if (layer.scale !== style.scale) layer.scale = style.scale
50+
51+
if (
52+
layer.translateX !== style.translateX ||
53+
layer.translateY !== style.translateY
54+
) {
55+
layer.translateX = style.translateX
56+
layer.translateY = style.translateY
57+
}
58+
59+
if (layer.zIndex !== style.zIndex) layer.zIndex = style.zIndex
60+
61+
// Shadow
62+
if (layer.shadowColor !== style.shadowColor)
63+
layer.shadowColor = style.shadowColor
64+
65+
if (layer.shadowBlur !== style.shadowBlur) layer.shadowBlur = style.shadowBlur
66+
67+
if (layer.shadowOffsetX !== style.shadowOffsetX)
68+
layer.shadowOffsetX = style.shadowOffsetX
69+
70+
if (layer.shadowOffsetY !== style.shadowOffsetY)
71+
layer.shadowOffsetY = style.shadowOffsetY
72+
}
73+
674
let LAYER_GUID = 1
775

876
export default class CanvasComponent {
@@ -45,75 +113,6 @@ export default class CanvasComponent {
45113
this.node.destroyEventListeners()
46114
}
47115

48-
setStyleFromProps = (layer, props) => {
49-
let style = emptyObject
50-
51-
if (props.style) {
52-
// eslint-disable-next-line prefer-destructuring
53-
style = props.style
54-
layer._originalStyle = style
55-
} else {
56-
layer._originalStyle = null
57-
}
58-
59-
if (!layer.frame) {
60-
layer.frame = make(0, 0, 0, 0)
61-
}
62-
63-
const { frame } = layer
64-
const l = style.left || 0
65-
const t = style.top || 0
66-
const w = style.width || 0
67-
const h = style.height || 0
68-
69-
if (frame.x !== l) frame.x = l
70-
if (frame.y !== t) frame.y = t
71-
if (frame.width !== w) frame.width = w
72-
if (frame.height !== h) frame.height = h
73-
74-
// Common layer properties
75-
if (layer.alpha !== style.alpha) layer.alpha = style.alpha
76-
77-
if (layer.backgroundColor !== style.backgroundColor)
78-
layer.backgroundColor = style.backgroundColor
79-
80-
if (layer.borderColor !== style.borderColor)
81-
layer.borderColor = style.borderColor
82-
83-
if (layer.borderWidth !== style.borderWidth)
84-
layer.borderWidth = style.borderWidth
85-
86-
if (layer.borderRadius !== style.borderRadius)
87-
layer.borderRadius = style.borderRadius
88-
89-
if (layer.clipRect !== style.clipRect) layer.clipRect = style.clipRect
90-
91-
if (layer.scale !== style.scale) layer.scale = style.scale
92-
93-
if (
94-
layer.translateX !== style.translateX ||
95-
layer.translateY !== style.translateY
96-
) {
97-
layer.translateX = style.translateX
98-
layer.translateY = style.translateY
99-
}
100-
101-
if (layer.zIndex !== style.zIndex) layer.zIndex = style.zIndex
102-
103-
// Shadow
104-
if (layer.shadowColor !== style.shadowColor)
105-
layer.shadowColor = style.shadowColor
106-
107-
if (layer.shadowBlur !== style.shadowBlur)
108-
layer.shadowBlur = style.shadowBlur
109-
110-
if (layer.shadowOffsetX !== style.shadowOffsetX)
111-
layer.shadowOffsetX = style.shadowOffsetX
112-
113-
if (layer.shadowOffsetY !== style.shadowOffsetY)
114-
layer.shadowOffsetY = style.shadowOffsetY
115-
}
116-
117116
applyCommonLayerProps = (prevProps, props) => {
118117
const layer = this.node
119118

@@ -131,7 +130,7 @@ export default class CanvasComponent {
131130
}
132131
}
133132

134-
this.setStyleFromProps(layer, props)
133+
setStyleFromProps(layer, props)
135134
}
136135

137136
getLayer = () => this.node

0 commit comments

Comments
 (0)