github/rough
1
1
Fork 0
mirror of https://github.com/rough-stuff/rough.git synced 2026-04-22 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

async support

Browse Source
This commit is contained in:
Preet Shihn
2018-03-18 00:46:19 -07:00
parent 4fb126913f
commit de03a1ffec
5 changed files with 373 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
dist/rough.js vendored
View File

@@ -1500,11 +1500,11 @@ class RoughGenerator {
}
path(d, options) {
const o = this._options(options);
const paths = [];
if (!d) {
return paths;
return this._drawable('path', paths, o);
}
const o = this._options(options);
if (o.fill) {
if (o.fillStyle === 'solid') {
let shape = { type: 'path2Dfill', path: d };
@@ -1553,11 +1553,130 @@ class RoughGenerator {
}
}
class RoughGeneratorAsync extends RoughGenerator {
async line(x1, y1, x2, y2, options) {
const o = this._options(options);
return this._drawable('line', [await this.lib.line(x1, y1, x2, y2, o)], o);
}
async rectangle(x, y, width, height, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
const xc = [x, x + width, x + width, x];
const yc = [y, y, y + height, y + height];
if (o.fillStyle === 'solid') {
paths.push(await this.lib.solidFillShape(xc, yc, o));
} else {
paths.push(await this.lib.hachureFillShape(xc, yc, o));
}
}
paths.push(await this.lib.rectangle(x, y, width, height, o));
return this._drawable('rectangle', paths, o);
}
async ellipse(x, y, width, height, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
if (o.fillStyle === 'solid') {
const shape = await this.lib.ellipse(x, y, width, height, o);
shape.type = 'fillPath';
paths.push(shape);
} else {
paths.push(await this.lib.hachureFillEllipse(x, y, width, height, o));
}
}
paths.push(await this.lib.ellipse(x, y, width, height, o));
return this._drawable('ellipse', paths, o);
}
async circle(x, y, diameter, options) {
let ret = await this.ellipse(x, y, diameter, diameter, options);
ret.shape = 'circle';
return ret;
}
async linearPath(points, options) {
const o = this._options(options);
return this._drawable('linearPath', [await this.lib.linearPath(points, false, o)], o);
}
async polygon(points, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
let xc = [], yc = [];
for (let p of points) {
xc.push(p[0]);
yc.push(p[1]);
}
if (o.fillStyle === 'solid') {
paths.push(await this.lib.solidFillShape(xc, yc, o));
} else {
paths.push(await this.lib.hachureFillShape(xc, yc, o));
}
}
paths.push(await this.lib.linearPath(points, true, o));
return this._drawable('polygon', paths, o);
}
async arc(x, y, width, height, start, stop, closed, options) {
const o = this._options(options);
const paths = [];
if (closed && o.fill) {
if (o.fillStyle === 'solid') {
let shape = await this.lib.arc(x, y, width, height, start, stop, true, false, o);
shape.type = 'fillPath';
paths.push(shape);
} else {
paths.push(await this.lib.hachureFillArc(x, y, width, height, start, stop, o));
}
}
paths.push(await this.lib.arc(x, y, width, height, start, stop, closed, true, o));
return this._drawable('arc', paths, o);
}
async curve(points, options) {
const o = this._options(options);
return this._drawable('curve', [await this.lib.curve(points, o)], o);
}
async path(d, options) {
const o = this._options(options);
const paths = [];
if (!d) {
return this._drawable('path', paths, o);
}
if (o.fill) {
if (o.fillStyle === 'solid') {
let shape = { type: 'path2Dfill', path: d };
paths.push(shape);
} else {
const size = this._computePathSize(d);
let xc = [0, size[0], size[0], 0];
let yc = [0, 0, size[1], size[1]];
let shape = await this.lib.hachureFillShape(xc, yc, o);
shape.type = 'path2Dpattern';
shape.size = size;
shape.path = d;
paths.push(shape);
}
}
paths.push(await this.lib.svgPath(d, o));
return this._drawable('path', paths, o);
}
}
class RoughCanvas {
constructor(canvas, config) {
this.gen = new RoughGenerator(config, canvas);
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this._init(config);
}
_init(config) {
this.gen = new RoughGenerator(config, this.canvas);
}
static createRenderer() {
@@ -1704,8 +1823,71 @@ class RoughCanvas {
}
}
class RoughCanvasAsync extends RoughCanvas {
_init(config) {
this.gen = new RoughGeneratorAsync(config, this.canvas);
}
async line(x1, y1, x2, y2, options) {
let d = await this.gen.line(x1, y1, x2, y2, options);
this.draw(d);
return d;
}
async rectangle(x, y, width, height, options) {
let d = await this.gen.rectangle(x, y, width, height, options);
this.draw(d);
return d;
}
async ellipse(x, y, width, height, options) {
let d = await this.gen.ellipse(x, y, width, height, options);
this.draw(d);
return d;
}
async circle(x, y, diameter, options) {
let d = await this.gen.circle(x, y, diameter, options);
this.draw(d);
return d;
}
async linearPath(points, options) {
let d = await this.gen.linearPath(points, options);
this.draw(d);
return d;
}
async polygon(points, options) {
let d = await this.gen.polygon(points, options);
this.draw(d);
return d;
}
async arc(x, y, width, height, start, stop, closed, options) {
let d = await this.gen.arc(x, y, width, height, start, stop, closed, options);
this.draw(d);
return d;
}
async curve(points, options) {
let d = await this.gen.curve(points, options);
this.draw(d);
return d;
}
async path(d, options) {
let drawing = await this.gen.path(d, options);
this.draw(drawing);
return drawing;
}
}
var index = {
canvas(canvas, config) {
if (config && config.async) {
return new RoughCanvasAsync(canvas, config);
}
return new RoughCanvas(canvas, config);
},
createRenderer() {

2
dist/rough.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
src/canvas.js
View File

@@ -1,11 +1,15 @@
import { RoughGenerator } from './generator.js'
import { RoughGenerator, RoughGeneratorAsync } from './generator.js'
import { RoughRenderer } from './renderer.js';
export class RoughCanvas {
constructor(canvas, config) {
this.gen = new RoughGenerator(config, canvas);
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this._init(config);
}
_init(config) {
this.gen = new RoughGenerator(config, this.canvas);
}
static createRenderer() {
@@ -150,4 +154,64 @@ export class RoughCanvas {
ctx.stroke();
}
}
}
export class RoughCanvasAsync extends RoughCanvas {
_init(config) {
this.gen = new RoughGeneratorAsync(config, this.canvas);
}
async line(x1, y1, x2, y2, options) {
let d = await this.gen.line(x1, y1, x2, y2, options);
this.draw(d);
return d;
}
async rectangle(x, y, width, height, options) {
let d = await this.gen.rectangle(x, y, width, height, options);
this.draw(d);
return d;
}
async ellipse(x, y, width, height, options) {
let d = await this.gen.ellipse(x, y, width, height, options);
this.draw(d);
return d;
}
async circle(x, y, diameter, options) {
let d = await this.gen.circle(x, y, diameter, options);
this.draw(d);
return d;
}
async linearPath(points, options) {
let d = await this.gen.linearPath(points, options);
this.draw(d);
return d;
}
async polygon(points, options) {
let d = await this.gen.polygon(points, options);
this.draw(d);
return d;
}
async arc(x, y, width, height, start, stop, closed, options) {
let d = await this.gen.arc(x, y, width, height, start, stop, closed, options);
this.draw(d);
return d;
}
async curve(points, options) {
let d = await this.gen.curve(points, options);
this.draw(d);
return d;
}
async path(d, options) {
let drawing = await this.gen.path(d, options);
this.draw(drawing);
return drawing;
}
}

119
src/generator.js
View File

@@ -141,11 +141,11 @@ export class RoughGenerator {
}
path(d, options) {
const o = this._options(options);
const paths = [];
if (!d) {
return paths;
return this._drawable('path', paths, o);
}
const o = this._options(options);
if (o.fill) {
if (o.fillStyle === 'solid') {
let shape = { type: 'path2Dfill', path: d };
@@ -192,4 +192,119 @@ export class RoughGenerator {
size[1] = Math.min(size[1] * 4, this.canvas.height);
return size;
}
}
export class RoughGeneratorAsync extends RoughGenerator {
async line(x1, y1, x2, y2, options) {
const o = this._options(options);
return this._drawable('line', [await this.lib.line(x1, y1, x2, y2, o)], o);
}
async rectangle(x, y, width, height, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
const xc = [x, x + width, x + width, x];
const yc = [y, y, y + height, y + height];
if (o.fillStyle === 'solid') {
paths.push(await this.lib.solidFillShape(xc, yc, o))
} else {
paths.push(await this.lib.hachureFillShape(xc, yc, o));
}
}
paths.push(await this.lib.rectangle(x, y, width, height, o));
return this._drawable('rectangle', paths, o);
}
async ellipse(x, y, width, height, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
if (o.fillStyle === 'solid') {
const shape = await this.lib.ellipse(x, y, width, height, o);
shape.type = 'fillPath';
paths.push(shape);
} else {
paths.push(await this.lib.hachureFillEllipse(x, y, width, height, o));
}
}
paths.push(await this.lib.ellipse(x, y, width, height, o));
return this._drawable('ellipse', paths, o);
}
async circle(x, y, diameter, options) {
let ret = await this.ellipse(x, y, diameter, diameter, options);
ret.shape = 'circle';
return ret;
}
async linearPath(points, options) {
const o = this._options(options);
return this._drawable('linearPath', [await this.lib.linearPath(points, false, o)], o);
}
async polygon(points, options) {
const o = this._options(options);
const paths = [];
if (o.fill) {
let xc = [], yc = [];
for (let p of points) {
xc.push(p[0]);
yc.push(p[1]);
}
if (o.fillStyle === 'solid') {
paths.push(await this.lib.solidFillShape(xc, yc, o));
} else {
paths.push(await this.lib.hachureFillShape(xc, yc, o));
}
}
paths.push(await this.lib.linearPath(points, true, o));
return this._drawable('polygon', paths, o);
}
async arc(x, y, width, height, start, stop, closed, options) {
const o = this._options(options);
const paths = [];
if (closed && o.fill) {
if (o.fillStyle === 'solid') {
let shape = await this.lib.arc(x, y, width, height, start, stop, true, false, o);
shape.type = 'fillPath';
paths.push(shape);
} else {
paths.push(await this.lib.hachureFillArc(x, y, width, height, start, stop, o));
}
}
paths.push(await this.lib.arc(x, y, width, height, start, stop, closed, true, o));
return this._drawable('arc', paths, o);
}
async curve(points, options) {
const o = this._options(options);
return this._drawable('curve', [await this.lib.curve(points, o)], o);
}
async path(d, options) {
const o = this._options(options);
const paths = [];
if (!d) {
return this._drawable('path', paths, o);
}
if (o.fill) {
if (o.fillStyle === 'solid') {
let shape = { type: 'path2Dfill', path: d };
paths.push(shape);
} else {
const size = this._computePathSize(d);
let xc = [0, size[0], size[0], 0];
let yc = [0, 0, size[1], size[1]];
let shape = await this.lib.hachureFillShape(xc, yc, o);
shape.type = 'path2Dpattern';
shape.size = size;
shape.path = d;
paths.push(shape);
}
}
paths.push(await this.lib.svgPath(d, o));
return this._drawable('path', paths, o);
}
}

5
src/index.js
View File

@@ -1,7 +1,10 @@
import { RoughCanvas } from './canvas.js';
import { RoughCanvas, RoughCanvasAsync } from './canvas.js';
export default {
canvas(canvas, config) {
if (config && config.async) {
return new RoughCanvasAsync(canvas, config);
}
return new RoughCanvas(canvas, config);
},
createRenderer() {