Update painter example

jnordberg · Oct 25, 2019 · 0a41fdc · 0a41fdc
1 parent f12d193
commit 0a41fdc
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 18 deletions.
diff --git a/examples/painter/Makefile b/examples/painter/Makefile
@@ -1,11 +1,15 @@
 
-SHELL := /bin/bash
-PATH  := ./node_modules/.bin:$(PATH)
+PATH  := $(PATH):$(PWD)/node_modules/.bin
+SHELL := env PATH=$(PATH) /bin/bash
 
 .PHONY: preview
 preview: node_modules protocol/service.d.ts protocol/service.js
 	wintersmith preview --chdir client
 
+.PHONY: server
+preview: node_modules protocol/service.d.ts protocol/service.js
+	ts-node server/server.ts
+
 protocol/service.js: node_modules protocol/service.proto
 	pbjs -t static-module -w commonjs protocol/service.proto -o protocol/service.js
 

diff --git a/examples/painter/README.md b/examples/painter/README.md
@@ -5,6 +5,14 @@ Live version [up here](https://johan-nordberg.com/wspainter)
 
 ## Develop
 
+In two separate terminals run:
+
 ```
 make preview
 ```
+
+and
+
+```
+make server
+```
diff --git a/examples/painter/package.json b/examples/painter/package.json
@@ -5,19 +5,19 @@
     "canvas": "./client/canvas.js"
   },
   "dependencies": {
-    "@types/lru-cache": "^4.0.0",
-    "@types/sharp": "^0.17.1",
-    "canvas": "^1.6.11",
-    "lru-cache": "^4.0.2",
-    "protobufjs": "6.8.6",
-    "sharp": "^0.20.5",
-    "ts-node": "^7.0.0",
+    "@types/lru-cache": "^5.1.0",
+    "@types/sharp": "^0.23.0",
+    "canvas": "^2.6.0",
+    "lru-cache": "^5.1.1",
+    "protobufjs": "^6.8.8",
+    "sharp": "^0.23.1",
+    "ts-node": "^8.4.1",
     "tsify": "^4.0.0",
-    "typescript": "^2.9.2",
-    "wintersmith": "^2.3.6",
-    "wintersmith-browserify": "^1.2.1",
+    "typescript": "^3.6.4",
+    "wintersmith": "^2.5.0",
+    "wintersmith-browserify": "^1.3.0",
     "wintersmith-livereload": "^1.0.0",
     "wintersmith-nunjucks": "^2.0.0",
-    "wsrpc": "^1.3.0"
+    "wsrpc": "^1.4.1"
   }
 }
diff --git a/examples/painter/server/server.ts b/examples/painter/server/server.ts
@@ -11,7 +11,7 @@ import * as shared from './../shared/paint'
 
 const proto = protobuf.loadSync(`${ __dirname }/../protocol/service.proto`)
 
-const canvas = new Canvas(shared.canvasWidth, shared.canvasHeight)
+const canvas = Canvas.createCanvas(shared.canvasWidth, shared.canvasHeight)
 const ctx = canvas.getContext('2d')
 ctx.patternQuality = 'fast'
 ctx.filter = 'fast'
@@ -33,7 +33,7 @@ async function saveCanvas() {
     const imageData = ctx.getImageData(0, 0, width, height)
     const imageBuffer = Buffer.from(imageData.data.buffer)
     await sharp(imageBuffer, {raw: {channels: 4, width, height}})
-        .background('#ffffff').flatten()
+        .flatten({ background: '#ffffff'})
         .jpeg({quality: 90, chromaSubsampling: '4:4:4'})
         .toFile('canvas.jpeg')
 }
@@ -94,7 +94,7 @@ server.implement('getCanvas', async (request: CanvasRequest) => {
     switch (request.encoding) {
         case CanvasRequest.Encoding.JPEG:
             responseImage = await image
-                .background('#ffffff').flatten().jpeg().toBuffer()
+                .flatten({ background: '#ffffff' }).jpeg().toBuffer()
             break
         case CanvasRequest.Encoding.WEBP:
             responseImage = await image.webp().toBuffer()

diff --git a/examples/painter/shared/paint.ts b/examples/painter/shared/paint.ts
@@ -6,7 +6,7 @@ export const canvasWidth = process.env['CANVAS_WIDTH'] ? parseInt(process.env['C
 export const canvasHeight = process.env['CANVAS_HEIGHT'] ? parseInt(process.env['CANVAS_HEIGHT']) :4096
 export const brushSize = 124
 
-const brushCache = LRUCache<number, HTMLCanvasElement>({max: 20})
+const brushCache = new LRUCache<number, HTMLCanvasElement>({max: 20})
 const brushImage = new Canvas.Image()
 brushImage.src = require('./brush')
 
@@ -19,7 +19,7 @@ function createCanvas(width: number, height: number):HTMLCanvasElement {
         rv.height = height
         return rv
     } else {
-        return new Canvas(width, height)
+        return new Canvas.createCanvas(width, height)
     }
 }