Skip to content

Commit 600bdd7

Browse files
nazarpunknazarpunk
committed
refactor
1 parent d5d573d commit 600bdd7

30 files changed

+562
-577
lines changed

‎.idea/codeStyles/Project.xml

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Writerside/cfg/js/.eslintrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"no-unsafe-optional-chaining": "off",
2828
"no-console": "warn",
2929
"no-eq-null": "warn",
30+
"no-cond-assign": "off",
3031
"no-case-declarations": "off"
3132
}
3233
}

‎Writerside/cfg/js/core/cartesian.js

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,12 @@ class Cartesian {
6060
#axisY = true
6161
#height = 0
6262
round = false
63-
/** @type {Point[]} */ points = []
64-
/** @type {Point[]} */ drawPoint = []
65-
6663
/** @type {Point|null} */ dragPoint = null
6764

68-
/** @type {Segment[]} */ drawSegment = []
69-
/** @type {Rect[]} */ drawRect = []
70-
/** @type {Polygon[]} */ drawPolygon = []
65+
/** @type {Point[]} */ points = []
66+
/** @type {Segment[]} */ segments = []
67+
/** @type {Rect[]} */ rects = []
68+
/** @type {Polygon[]} */ polygons = []
7169

7270
/**
7371
* @param {boolean} x
@@ -84,10 +82,6 @@ class Cartesian {
8482
} = {}
8583
) {
8684
this.#axisY = y
87-
this.drawPoint = []
88-
this.drawSegment = []
89-
this.drawRect = []
90-
this.drawPolygon = []
9185

9286
// -- vars
9387
const draw = this.#draw
@@ -232,7 +226,7 @@ class Cartesian {
232226
}
233227

234228
// -- round
235-
for (const p of this.points) p.round = this.round
229+
for (const p of this.points) p.round = p.roundIgnore ? false : this.round
236230

237231
return this
238232
}
@@ -253,11 +247,11 @@ class Cartesian {
253247
const ox = this.#ox
254248
const oy = this.#oy
255249

256-
const points = [...this.drawPoint].sort((a, b) => a.y - b.y)
250+
const points = [...this.points].sort((a, b) => a.y - b.y)
257251

258252
ctx.lineWidth = dpr
259253

260-
/** @type {Point[]} */ const pointI = []
254+
/** @type {Point[]} */ const pointRI = []
261255

262256
// -- point
263257
for (const p of points) {
@@ -266,15 +260,12 @@ class Cartesian {
266260
p.cr = p.radius * dpr
267261

268262
if (p.hidden) continue
269-
for (const pp of pointI) {
270-
const da = (p.cx - pp.cx) ** 2 + (p.cy - pp.cy) ** 2
271-
const db = (p.cr + pp.cr) ** 2
272-
273-
if (da < db) {
274-
p.cr += (2 * dpr) * (1 - da / db)
275-
}
263+
for (const cp of pointRI) {
264+
const da = (p.cx - cp.cx) ** 2 + (p.cy - cp.cy) ** 2
265+
const db = (p.cr + cp.cr) ** 2
266+
if (da < db) p.cr += (2 * dpr) * (1 - da / db)
276267
}
277-
pointI.push(p)
268+
pointRI.push(p)
278269

279270
ctx.beginPath()
280271
ctx.fillStyle = p.color.fillStyle
@@ -387,58 +378,57 @@ class Cartesian {
387378
ctx.closePath()
388379
}
389380

390-
for (const s of this.drawSegment) {
391-
const ax = s.a.cx, ay = s.a.cy
392-
const bx = s.b.cx, by = s.b.cy
381+
for (const s of this.segments) {
382+
const ax = s.A.cx, ay = s.A.cy
383+
const bx = s.B.cx, by = s.B.cy
393384

394385
const dash = s.dash.map(v => v * dpr)
395386

396-
const dx = s.b.cx - s.a.cx, dy = s.b.cy - s.a.cy
387+
const dx = s.B.cx - s.A.cx, dy = s.B.cy - s.A.cy
397388
const angle = Math.atan2(dy, dx)
398389

399390
ctx.save()
400-
_clipPoint(s.a)
401-
_clipPoint(s.b)
391+
_clipPoint(s.A)
392+
_clipPoint(s.B)
402393
if (s.line >= 0) {
403-
_segment(ax, ay, bx, by, s.a.color, s.b.color, dash)
394+
_segment(ax, ay, bx, by, s.A.color, s.B.color, dash)
404395
}
405396
if (s.line > 0) {
406397
const ld = this.#canvasWidth + this.#canvasHeight
407398
const cos = Math.cos(angle) * ld
408399
const sin = Math.sin(angle) * ld
409400

410401
if (s.line >= 3 || s.line === 1) {
411-
_segment(ax, ay, ax - cos, ay - sin, s.a.color, null, dash)
402+
_segment(ax, ay, ax - cos, ay - sin, s.A.color, null, dash)
412403
}
413404
if (s.line >= 3 || s.line === 2) {
414-
_segment(bx, by, bx + cos, by + sin, s.b.color, null, dash)
405+
_segment(bx, by, bx + cos, by + sin, s.B.color, null, dash)
415406
}
416407
}
417408
ctx.restore()
418-
419409
if (s.name.length > 0) {
420-
ctx.strokeStyle = s.b.color.strokeStyle
410+
ctx.fillStyle = s.B.color.strokeStyle
421411
ctx.font = `${14 * dpr}px ${fontFamily}`
422412
ctx.textAlign = 'left'
423413
const m = ctx.measureText(s.name)
424414
const th = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent
425-
ctx.fillText(s.name, bx + s.b.cr + 8 * dpr, by + th * .5)
415+
ctx.fillText(s.name, bx + s.B.cr + 8 * dpr, by + th * .5)
426416
}
427417
}
428418

429419
// -- rect
430-
for (const r of this.drawRect) {
431-
const ax = r.a.cx, ay = r.a.cy
432-
const bx = r.b.cx, by = r.b.cy
420+
for (const r of this.rects) {
421+
const ax = r.A.cx, ay = r.A.cy
422+
const bx = r.B.cx, by = r.B.cy
433423

434424
const grad = ctx.createLinearGradient(ax, ay, bx, by)
435-
grad.addColorStop(0, r.a.color.strokeStyle)
436-
grad.addColorStop(1, r.b.color.strokeStyle)
425+
grad.addColorStop(0, r.A.color.strokeStyle)
426+
grad.addColorStop(1, r.B.color.strokeStyle)
437427
ctx.strokeStyle = grad
438428

439429
ctx.save()
440-
_clipPoint(r.a)
441-
_clipPoint(r.b)
430+
_clipPoint(r.A)
431+
_clipPoint(r.B)
442432

443433
ctx.beginPath()
444434

@@ -455,8 +445,8 @@ class Cartesian {
455445
ctx.restore()
456446

457447
// -- polygon
458-
for (const p of this.drawPolygon) {
459-
if (p.points.length < 2) continue
448+
for (const p of this.polygons) {
449+
if (p.hidden || p.points.length < 2) continue
460450

461451
ctx.beginPath()
462452
ctx.moveTo(p.points[0].cx, p.points[0].cy)
@@ -465,6 +455,7 @@ class Cartesian {
465455
}
466456
ctx.fillStyle = p.color.fillStyle
467457
//ctx.strokeStyle = p.color.strokeStyle
458+
//ctx.stroke()
468459
ctx.fill('evenodd')
469460
ctx.closePath()
470461
}

‎Writerside/cfg/js/core/cubic.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1+
// https://github.com/WebKit/WebKit/blob/main/Source/WebCore/platform/graphics/UnitBezier.h
12
// https://codepen.io/onedayitwillmake/pen/nJjYRp
23

34
class Cubic {
4-
constructor(p1x, p1y, p2x, p2y) {
5+
/**
6+
* @param {number} p1x
7+
* @param {number} p1y
8+
* @param {number} p2x
9+
* @param {number} p2y
10+
* @param name
11+
*/
12+
constructor(p1x, p1y, p2x, p2y, {name = ''} = {}) {
513
this.cx = 3.0 * p1x
614
this.bx = 3.0 * (p2x - p1x) - this.cx
715
this.ax = 1.0 - this.cx - this.bx
816

917
this.cy = 3.0 * p1y
1018
this.by = 3.0 * (p2y - p1y) - this.cy
1119
this.ay = 1.0 - this.cy - this.by
20+
21+
this.name = name
1222
}
1323

1424
#sampleCurveX(t) {

‎Writerside/cfg/js/core/observe.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
const elem = document.getElementById(id)
77
if (elem === null || !elem.isConnected) return
88
if (!CanvasDraw.map.get(id)) return
9+
if (elem.dataset.skip === '1') return
10+
911
elem.textContent = ''
1012
elem.appendChild(document.createElement(id))
1113
}

‎Writerside/cfg/js/core/point.js

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,36 @@ class Point {
44
* @param {number} y
55
* @param {string} name
66
* @param {Color} color
7+
* @param {number[]} dash
8+
* @param {boolean} round
9+
* @param {boolean} roundIgnore
10+
* @param {boolean} hidden
11+
* @param {boolean} drag
712
* @param {boolean} dragX
813
* @param {boolean} dragY
9-
* @param {number[]} dash
10-
* @param round
11-
* @param hidden
1214
*/
1315
constructor(x, y, {
1416
name = '',
1517
color = Color.pointA,
16-
dragX = true,
17-
dragY = true,
1818
dash = [],
1919
round = false,
20+
roundIgnore = false,
2021
hidden = false,
22+
drag = true,
23+
dragX = true,
24+
dragY = true,
2125
} = {}) {
2226
this.#x = x
2327
this.#y = y
2428
this.name = name
2529
this.color = color
26-
this.dragX = dragX
27-
this.dragY = dragY
28-
this.round = round
2930
this.dash = dash
31+
this.round = round
32+
this.roundIgnore = roundIgnore
3033
this.hidden = hidden
34+
35+
this.dragX = drag && dragX
36+
this.dragY = drag && dragY
3137
}
3238

3339
#x = 0
@@ -38,45 +44,38 @@ class Point {
3844
/** @type {number} */ cy = 0
3945
/** @type {number} */ cr = 0
4046

41-
/**
42-
* @param {Cartesian} ctx
43-
* @return {this}
44-
*/
45-
push(ctx) {
46-
if (ctx instanceof Cartesian) {
47-
ctx.drawPoint.push(this)
48-
}
49-
return this
47+
get #round() {
48+
return this.round && !this.roundIgnore
5049
}
5150

5251
get x() {
53-
return this.round ? Math.round(this.#x) : this.#x
52+
return this.#round ? Math.round(this.#x) : this.#x
5453
}
5554

5655
/** @param {number} x */ set x(x) {
5756
this.#x = x
5857
}
5958

6059
get y() {
61-
return this.round ? Math.round(this.#y) : this.#y
60+
return this.#round ? Math.round(this.#y) : this.#y
6261
}
6362

6463
/** @param {number} y */ set y(y) {
6564
this.#y = y
6665
}
6766

6867
/** @return {string} */ get xs() {
69-
const out = this.#x.toFixed(this.round ? 0 : 2)
68+
const out = this.#x.toFixed(this.#round ? 0 : 2)
7069
return out === '-0' ? '0' : out
7170
}
7271

7372
/** @return {string} */ get xsabs() {
74-
const out = Math.abs(this.#x).toFixed(this.round ? 0 : 2)
73+
const out = Math.abs(this.#x).toFixed(this.#round ? 0 : 2)
7574
return out === '-0' ? '0' : out
7675
}
7776

7877
/** @return {string} */ get ys() {
79-
const out = this.#y.toFixed(this.round ? 0 : 2)
78+
const out = this.#y.toFixed(this.#round ? 0 : 2)
8079
return out === '-0' ? '0' : out
8180
}
8281

@@ -103,13 +102,14 @@ class Point {
103102
}
104103

105104
get dragCan() {
106-
return this.dragX || this.dragY
105+
return !this.hidden && (this.dragX || this.dragY)
107106
}
108107

109108
/**
110109
* @param {Point} b
111110
* @param {Cartesian} c
112111
* @return {Point}
112+
* @deprecated
113113
*/
114114
parent(b, c) {
115115
if (this.#x > b.#x) {

‎Writerside/cfg/js/core/polygon.js

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
class Polygon {
2-
32
/**
43
* @param {Color} color
54
* @param {Point[]} points
5+
* @param hidden
66
*/
77
constructor(points, {
8-
color = Color.polygon
8+
color = Color.polygon,
9+
hidden = false
910
} = {}) {
10-
1111
this.color = color
1212
this.points = points
13+
this.hidden = hidden
1314
}
1415

1516
/** @type {Point[]} */ points = []
16-
17-
/**
18-
* @param {Cartesian} ctx
19-
* @return {this}
20-
*/
21-
draw(ctx) {
22-
if (ctx instanceof Cartesian) {
23-
ctx.drawPolygon.push(this)
24-
}
25-
return this
26-
}
2717
}

0 commit comments

Comments
 (0)