Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1324024

Browse files
committed
find breakpoint for shorty issue + fmt
1 parent 3393315 commit 1324024

File tree

14 files changed

+132
-85
lines changed

14 files changed

+132
-85
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030

3131
# 2.0.0
3232

33-
- **BREAKING** Editable SVG element creation function has moved to `blobs.xml(tagName)`.
33+
- **BREAKING** Editable SVG element creation function has moved to
34+
`blobs.xml(tagName)`.
3435
- Added `"blobs/v2"`
3536
- 30% smaller compressed size
3637
- Supports canvas rendering

‎README.legacy.md

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
The legacy API exists to preserve compatibility for users importing the package using a `script` tag. Because [unpkg.com](https://unpkg.com) serves the latest version of the package if no version is specified, I can't break backwards compatibility, even with a major release. This API also preserves a few features that could potentially still be useful to some users (guide rendering and editable svg).
1+
The legacy API exists to preserve compatibility for users importing the package
2+
using a `script` tag. Because [unpkg.com](https://unpkg.com) serves the latest
3+
version of the package if no version is specified, I can't break backwards
4+
compatibility, even with a major release. This API also preserves a few features
5+
that could potentially still be useful to some users (guide rendering and
6+
editable svg).
27

38
---
49

@@ -19,9 +24,13 @@ const blobs = require("blobs");
1924
const svg = blobs(options);
2025
```
2126

22-
![](https://svgsaur.us?t=&w=5&h=32&b=fdcc56)![](https://svgsaur.us/?t=WARNING&w=103&h=32&s=16&y=21&x=12&b=feefcd&f=arial&o=b) ![](https://svgsaur.us?t=&w=1&h=48&)
27+
![](https://svgsaur.us?t=&w=5&h=32&b=fdcc56)
28+
![](https://svgsaur.us/?t=WARNING&w=103&h=32&s=16&y=21&x=12&b=feefcd&f=arial&o=b)
29+
![](https://svgsaur.us?t=&w=1&h=48&)
2330

24-
_Options are **not** [sanitized](https://en.wikipedia.org/wiki/HTML_sanitization). Never trust raw user-submitted values in the options._
31+
_Options are **not**
32+
[sanitized](https://en.wikipedia.org/wiki/HTML_sanitization). Never trust raw
33+
user-submitted values in the options._
2534

2635
## Options
2736

@@ -46,7 +55,8 @@ _Options are **not** [sanitized](https://en.wikipedia.org/wiki/HTML_sanitization
4655

4756
_Either `stroke` or `color` must be defined._
4857

49-
_Guides will use stroke color and width if defined. Otherwise, they default to `black` stroke with width of `1`._
58+
_Guides will use stroke color and width if defined. Otherwise, they default to
59+
`black` stroke with width of `1`._
5060

5161
##### Example Options Object
5262

@@ -67,13 +77,16 @@ const options = {
6777

6878
## Advanced
6979

70-
If you need to edit the output svg for your use case, blobs also allows for _editable_ output.
80+
If you need to edit the output svg for your use case, blobs also allows for
81+
_editable_ output.
7182

7283
```typescript
7384
const editableSvg = blobs.editable(options);
7485
```
7586

76-
The output of this function is a data structure that represents a nested svg document. This structure can be changed and rendered to a string using its `render` function.
87+
The output of this function is a data structure that represents a nested svg
88+
document. This structure can be changed and rendered to a string using its
89+
`render` function.
7790

7891
```typescript
7992
editableSvg.attributes.width = 1000;

‎demo/content.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import {addCanvas, addTitle, colors, sizes} from "./internal/layout";
22
import {
3-
point,
4-
drawOpen,
53
calcBouncePercentage,
4+
drawClosed,
65
drawLine,
6+
drawOpen,
77
drawPoint,
8-
tempStyles,
9-
drawClosed,
108
forceStyles,
9+
point,
10+
tempStyles,
1111
} from "./internal/canvas";
1212
import {
13-
split,
13+
coordPoint,
14+
distance,
1415
expandHandle,
15-
splitLine,
1616
forPoints,
1717
mapPoints,
18-
coordPoint,
19-
distance,
2018
mod,
2119
shift,
20+
split,
21+
splitLine,
2222
} from "../internal/util";
2323
import {timingFunctions} from "../internal/animate/timing";
2424
import {Coord, Point} from "../internal/types";
@@ -83,7 +83,10 @@ addCanvas(
8383

8484
for (let x = 0; x < gridCountX; x++) {
8585
for (let y = 0; y < gridCountY; y++) {
86-
const curr = {x: x * gridSize + gridSize / 2, y: y * gridSize + gridSize / 2};
86+
const curr = {
87+
x: x * gridSize + gridSize / 2,
88+
y: y * gridSize + gridSize / 2,
89+
};
8790
const d = distance(curr, center);
8891
const opacity = Math.max(
8992
0,

‎demo/example.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,13 @@ const renderFrame = () => {
3939
drawDebugClosed(ctx, p, 60);
4040
if (p.length) drawPoint(ctx, p[0], 400);
4141

42-
const fps = 5;
42+
const handleLength = p[0]?.handleIn.length;
43+
if (handleLength < 100) {
44+
console.log("shorty detected: ", handleLength);
45+
return;
46+
}
47+
48+
const fps = 20;
4349
setTimeout(() => requestAnimationFrame(renderFrame), 1000 / fps);
4450
return;
4551
}
@@ -94,7 +100,11 @@ const loopAnimation = (): void => {
94100
canvas.onclick = () => {
95101
extraPoints++;
96102
animation.transition(
97-
genFrame({duration: 400, timingFunction: "elasticEnd0", blobOptions: {extraPoints}}),
103+
genFrame({
104+
duration: 400,
105+
timingFunction: "elasticEnd0",
106+
blobOptions: {extraPoints},
107+
}),
98108
);
99109
};
100110

‎demo/internal/canvas.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {TimingFunc} from "../../internal/animate/timing";
22
import {Coord, Point} from "../../internal/types";
33
import {expandHandle, forPoints, mod, rad} from "../../internal/util";
44
import {isDebug} from "../internal/debug";
5-
import {sizes,colors} from "../internal/layout";
5+
import {colors,sizes} from "../internal/layout";
66

77
export const forceStyles = (ctx: CanvasRenderingContext2D, fn: () => void) => {
88
if (!(ctx as any).forcedStyles) (ctx as any).forcedStyles = 0;
@@ -25,7 +25,12 @@ export const tempStyles = (ctx: CanvasRenderingContext2D, style: () => void, fn:
2525
};
2626

2727
export const rotateAround = (
28-
options: {ctx: CanvasRenderingContext2D; angle: number; cx: number; cy: number},
28+
options: {
29+
ctx: CanvasRenderingContext2D;
30+
angle: number;
31+
cx: number;
32+
cy: number;
33+
},
2934
fn: () => void,
3035
) => {
3136
tempStyles(

‎internal/animate/interpolate.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Point} from "../types";
2-
import {split,splitLine,mod, smooth, mapPoints} from "../util";
2+
import {mapPoints,mod, smooth, split,splitLine} from "../util";
33

44
// Interpolates between angles a and b. Angles are normalized to avoid unnecessary rotation.
55
// Direction is chosen to produce the smallest possible movement.
@@ -21,7 +21,9 @@ const interpolateAngle = (percentage: number, a: number, b: number): number => {
2121
// same number of points. Easing effects can be applied to the percentage given to this function.
2222
// Percentages outside the 0-1 range are supported.
2323
export const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
24-
if (a.length !== b.length) throw new Error("must have equal number of points");
24+
if (a.length !== b.length) {
25+
throw new Error("must have equal number of points");
26+
}
2527

2628
// Clamped range for use in values that could look incorrect otherwise.
2729
// ex. Handles that invert if their value goes negative (creates loops at corners).

‎internal/animate/prepare.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {
2-
length,
3-
reverse,
4-
shift,
5-
insertCount,
6-
distance,
7-
mod,
82
angleOf,
93
coordEqual,
10-
mapPoints,
4+
distance,
115
forPoints,
6+
insertCount,
7+
length,
8+
mapPoints,
9+
mod,
10+
reverse,
11+
shift,
1212
} from "../util";
1313
import {Point} from "../types";
1414

‎internal/animate/state.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Point} from "../types";
2-
import {RenderCache,InternalKeyframe,renderFramesAt,transitionFrames,Keyframe} from "./frames";
2+
import {InternalKeyframe,Keyframe,RenderCache,renderFramesAt,transitionFrames} from "./frames";
33

44
interface CallbackKeyframe extends Keyframe {
55
callback?: () => void;

‎internal/animate/testing/script.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {interpolateBetweenSmooth} from "../interpolate";
22
import {divide, prepare} from "../prepare";
33
import {Coord, Point} from "../../types";
4-
import {length, insertAt, insertCount, rad,mod,mapPoints,forPoints} from "../../util";
5-
import {clear, drawInfo,drawClosed} from "../../render/canvas";
4+
import {forPoints, insertAt, insertCount, length,mapPoints,mod,rad} from "../../util";
5+
import {clear, drawClosed,drawInfo} from "../../render/canvas";
66
import {genBlob, genFromOptions} from "../../gen";
77
import {rand} from "../../rand";
88
import * as blobs2 from "../../../public/blobs";
@@ -370,7 +370,10 @@ const genBlobAnimation = (
370370
};
371371

372372
const genCustomAnimation = (speed: number, offset: number) => {
373-
const noHandles = {handleIn: {angle: 0, length: 0}, handleOut: {angle: 0, length: 0}};
373+
const noHandles = {
374+
handleIn: {angle: 0, length: 0},
375+
handleOut: {angle: 0, length: 0},
376+
};
374377
const animation = blobs2Animate.canvasPath();
375378
const loopAnimation = (immediate: boolean = false) => {
376379
const size = 200;

‎internal/check.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ export const checkKeyframeOptions = (keyframe: any) => {
1717
typeCheck(`duration`, duration, ["number"]);
1818
if (duration && duration < 0) throw `duration is invalid "${duration}".`;
1919
typeCheck(`timingFunction`, timingFunction, ["string", "undefined"]);
20-
if (timingFunction && !(timingFunctions as any)[timingFunction])
20+
if (timingFunction && !(timingFunctions as any)[timingFunction]){
2121
throw `".timingFunction" is not recognized "${timingFunction}".`;
22+
}
2223
typeCheck(`callback`, callback, ["function", "undefined"]);
2324
};
2425

@@ -27,9 +28,13 @@ export const checkBlobOptions = (blobOptions: any) => {
2728
const {seed, extraPoints, randomness, size} = blobOptions;
2829
typeCheck(`blobOptions.seed`, seed, ["string", "number"]);
2930
typeCheck(`blobOptions.extraPoints`, extraPoints, ["number"]);
30-
if (extraPoints < 0) throw `blobOptions.extraPoints is invalid "${extraPoints}".`;
31+
if (extraPoints < 0) {
32+
throw `blobOptions.extraPoints is invalid "${extraPoints}".`;
33+
}
3134
typeCheck(`blobOptions.randomness`, randomness, ["number"]);
32-
if (randomness < 0) throw `blobOptions.randomness is invalid "${randomness}".`;
35+
if (randomness < 0) {
36+
throw `blobOptions.randomness is invalid "${randomness}".`;
37+
}
3338
typeCheck(`blobOptions.size`, size, ["number"]);
3439
if (size < 0) throw `blobOptions.size is invalid "${size}".`;
3540
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /