From 59d6468a3527debb10097381c26c02b3f08153f6 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Mon, 10 Jun 2024 13:45:35 -0400 Subject: [PATCH 1/8] feat: clockwise option in schema --- src/gosling-schema/gosling.schema.json | 72 +++++++++++++++++++++++++ src/gosling-schema/gosling.schema.ts | 4 ++ src/gosling-schema/template.schema.json | 4 ++ 3 files changed, 80 insertions(+) diff --git a/src/gosling-schema/gosling.schema.json b/src/gosling-schema/gosling.schema.json index 4a1c1eba..52f6adbb 100644 --- a/src/gosling-schema/gosling.schema.json +++ b/src/gosling-schema/gosling.schema.json @@ -586,6 +586,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "data": { "$ref": "#/definitions/DataDeep" }, @@ -1226,6 +1230,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -1390,6 +1398,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -2012,6 +2024,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -2176,6 +2192,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -2858,6 +2878,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -4108,6 +4132,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -4435,6 +4463,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -4800,6 +4832,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -5183,6 +5219,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -5520,6 +5560,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -6080,6 +6124,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -6448,6 +6496,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -6605,6 +6657,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -7227,6 +7283,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -7384,6 +7444,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -8059,6 +8123,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "anyOf": [ { @@ -8981,6 +9049,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "data": { "$ref": "#/definitions/DataDeep" }, diff --git a/src/gosling-schema/gosling.schema.ts b/src/gosling-schema/gosling.schema.ts index d36ff29b..253aeed1 100644 --- a/src/gosling-schema/gosling.schema.ts +++ b/src/gosling-schema/gosling.schema.ts @@ -189,6 +189,10 @@ export interface CommonTrackDef extends CommonViewDef { * Specify the end angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`). */ endAngle?: number; // [0, 360] + /** + * Clockwise or anticlockwise (`{"layout": "circular"}`). __Default__: `false` + */ + clockwise?: boolean; // Internally used properties /** internal */ diff --git a/src/gosling-schema/template.schema.json b/src/gosling-schema/template.schema.json index c136c22a..9d936aa3 100644 --- a/src/gosling-schema/template.schema.json +++ b/src/gosling-schema/template.schema.json @@ -1249,6 +1249,10 @@ "description": "Proportion of the radius of the center white space.\n\n__Default:__ `0.3`", "type": "number" }, + "clockwise": { + "description": "Clockwise or anticlockwise (`{\"layout\": \"circular\"}`). __Default__: `false`", + "type": "boolean" + }, "color": { "$ref": "#/definitions/ChannelWithBase" }, From a0f3fea2301a738b7d7870b9492f1e51723a82d0 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 13:59:41 -0400 Subject: [PATCH 2/8] feat: axis track clockwise option --- src/tracks/gosling-genomic-axis/axis-track.ts | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/tracks/gosling-genomic-axis/axis-track.ts b/src/tracks/gosling-genomic-axis/axis-track.ts index a993620c..f5d1b0d6 100644 --- a/src/tracks/gosling-genomic-axis/axis-track.ts +++ b/src/tracks/gosling-genomic-axis/axis-track.ts @@ -46,6 +46,7 @@ type AxisTrackOptions = { tickFormat?: string; assembly?: Assembly; reverseOrientation?: boolean; + clockwise?: boolean; }; type TickLabelInfo = { importance: number; @@ -94,7 +95,8 @@ const config: TrackConfig = { stroke: '#ffffff', backgroundColor: 'transparent', showMousePosition: false, - tickColor: TICK_COLOR + tickColor: TICK_COLOR, + clockwise: false } }; @@ -523,7 +525,16 @@ const factory: PluginTrackFactory = (HGC, context, opti const outerRadius = this.options.outerRadius * factor; const r = (outerRadius + innerRadius) / 2.0; - const centerPos = cartesianToPolar(cx, width, r, width / 2.0, height / 2.0, startAngle, endAngle); + const centerPos = cartesianToPolar( + cx, + width, + r, + width / 2.0, + height / 2.0, + startAngle, + endAngle, + this.options.clockwise + ); textObj.x = centerPos.x; textObj.y = centerPos.y; @@ -549,7 +560,16 @@ const factory: PluginTrackFactory = (HGC, context, opti const ropePoints: PIXI.Point[] = []; const baseR = innerRadius + metric.height / 2.0 + 3; for (let i = maxX; i >= minX; i -= tw / 10.0) { - const p = cartesianToPolar(i, width, baseR, width / 2.0, height / 2.0, startAngle, endAngle); + const p = cartesianToPolar( + i, + width, + baseR, + width / 2.0, + height / 2.0, + startAngle, + endAngle, + this.options.clockwise + ); ropePoints.push(new HGC.libraries.PIXI.Point(p.x, p.y)); } From a5da8e80ad796ae94f842db8878cad5cfc305939 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 14:00:12 -0400 Subject: [PATCH 3/8] feat: clockwise option to axis track in compiler --- src/compiler/gosling-to-higlass.ts | 1 + src/compiler/higlass-model.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/compiler/gosling-to-higlass.ts b/src/compiler/gosling-to-higlass.ts index 6d5296f4..6b5bd98c 100644 --- a/src/compiler/gosling-to-higlass.ts +++ b/src/compiler/gosling-to-higlass.ts @@ -276,6 +276,7 @@ export function goslingToHiGlass( height: firstResolvedSpec.height, startAngle: firstResolvedSpec.startAngle, endAngle: firstResolvedSpec.endAngle, + clockwise: firstResolvedSpec.clockwise, theme }); } diff --git a/src/compiler/higlass-model.ts b/src/compiler/higlass-model.ts index bde61757..336ed52f 100644 --- a/src/compiler/higlass-model.ts +++ b/src/compiler/higlass-model.ts @@ -313,6 +313,7 @@ export class HiGlassModel { startAngle?: number; endAngle?: number; theme: Required; + clockwise?: boolean; } ) { if (!this.hg.views) return this; @@ -342,7 +343,7 @@ export class HiGlassModel { // circular axis: superpose an axis track on top of the `center` track this.addTrackToCombined({ ...axisTrackTemplate, - options: { ...axisTrackTemplate.options, layout: 'circular' } + options: { ...axisTrackTemplate.options, layout: 'circular', clockwise: options.clockwise} }); } else { // linear axis: place an axis track on the top, left, bottom, or right From c67dbfefd5f09d3b38c9e93c53d2c32b5dae409b Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 14:50:29 -0400 Subject: [PATCH 4/8] feat: clockwise brush --- src/compiler/create-higlass-models.ts | 3 ++- src/compiler/higlass-model.ts | 4 +++- src/core/utils/linking.ts | 3 ++- src/tracks/gosling-brush/brush-track.ts | 8 ++++++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/compiler/create-higlass-models.ts b/src/compiler/create-higlass-models.ts index dc1811a7..6fc47510 100644 --- a/src/compiler/create-higlass-models.ts +++ b/src/compiler/create-higlass-models.ts @@ -97,7 +97,8 @@ export function renderHiGlass( innerRadius: d.track.innerRadius!, outerRadius: d.track.outerRadius!, startAngle: d.track.startAngle!, - endAngle: d.track.endAngle! + endAngle: d.track.endAngle!, + clockwise: d.track.clockwise! } }; }); diff --git a/src/compiler/higlass-model.ts b/src/compiler/higlass-model.ts index 336ed52f..6246ce70 100644 --- a/src/compiler/higlass-model.ts +++ b/src/compiler/higlass-model.ts @@ -150,6 +150,7 @@ export class HiGlassModel { endAngle?: number; innerRadius?: number; outerRadius?: number; + clockwise?: boolean; } ) { if (!fromViewUid) return; @@ -169,7 +170,8 @@ export class HiGlassModel { startAngle: style?.startAngle, endAngle: style?.endAngle, innerRadius: style?.innerRadius, - outerRadius: style?.outerRadius + outerRadius: style?.outerRadius, + clockwise: style?.clockwise } }); return this; diff --git a/src/core/utils/linking.ts b/src/core/utils/linking.ts index 49df909d..263efb9b 100644 --- a/src/core/utils/linking.ts +++ b/src/core/utils/linking.ts @@ -53,7 +53,8 @@ export function getLinkingInfo(hgModel: HiGlassModel) { startAngle: spec.startAngle, endAngle: spec.endAngle, innerRadius: spec.innerRadius, - outerRadius: spec.outerRadius + outerRadius: spec.outerRadius, + clockwise: spec.clockwise } }); return; diff --git a/src/tracks/gosling-brush/brush-track.ts b/src/tracks/gosling-brush/brush-track.ts index 728b38d3..ee40dbed 100644 --- a/src/tracks/gosling-brush/brush-track.ts +++ b/src/tracks/gosling-brush/brush-track.ts @@ -253,8 +253,12 @@ function BrushTrack(HGC: any, ...args: any[]): any { const x1 = this._xScale(this.viewportXDomain[1]); const [w] = this.dimensions; - let e = valueToRadian(x0, w, this.options.startAngle, this.options.endAngle) + Math.PI / 2.0; - let s = valueToRadian(x1, w, this.options.startAngle, this.options.endAngle) + Math.PI / 2.0; + let e = + valueToRadian(x0, w, this.options.startAngle, this.options.endAngle, this.options.clockwise) + + Math.PI / 2.0; + let s = + valueToRadian(x1, w, this.options.startAngle, this.options.endAngle, this.options.clockwise) + + Math.PI / 2.0; [s, e] = this.cropExtent([s, e]); From 3d7213b61ce1381c793080bbd4f075c95ac6bba4 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 14:50:38 -0400 Subject: [PATCH 5/8] feat: polar clockwise option --- src/core/utils/polar.ts | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/core/utils/polar.ts b/src/core/utils/polar.ts index 1c4fa9f4..cade5d53 100644 --- a/src/core/utils/polar.ts +++ b/src/core/utils/polar.ts @@ -4,21 +4,35 @@ export const RADIAN_GAP = 0; //0.04; * Convert a value in a single-linear axis to a radian value. Anticlockwise, starts from 12 o'clock. * v span from zero to `max`. */ -export function valueToRadian(v: number, max: number, sa: number, ea: number, g?: number) { +export function valueToRadian(v: number, max: number, sa: number, ea: number, clockwise?: boolean) { const safeVal = Math.max(Math.min(max, v), 0); - const gap = g ?? RADIAN_GAP; + const gap = RADIAN_GAP; const radExtent = ((ea - sa) / 360) * Math.PI * 2 - gap * 2; const radStart = (sa / 360) * Math.PI * 2; - return -(radStart + (safeVal / max) * radExtent) - Math.PI / 2.0 - gap; + const result = -(radStart + (safeVal / max) * radExtent) - Math.PI / 2.0 - gap; + + if (clockwise) { + return -result - Math.PI; + } + return result; } /** * Convert a position in a cartesian system to a polar coordinate. */ -export function cartesianToPolar(x: number, max: number, r: number, cx: number, cy: number, sa: number, ea: number) { +export function cartesianToPolar( + x: number, + max: number, + r: number, + cx: number, + cy: number, + sa: number, + ea: number, + clockwise?: boolean +) { return { - x: cx + r * Math.cos(valueToRadian(x, max, sa, ea)), - y: cy + r * Math.sin(valueToRadian(x, max, sa, ea)) + x: cx + r * Math.cos(valueToRadian(x, max, sa, ea, clockwise)), + y: cy + r * Math.sin(valueToRadian(x, max, sa, ea, clockwise)) }; } From 7ad7516c8f8c3a410494ebb9a53a5dea79fadc22 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 15:01:48 -0400 Subject: [PATCH 6/8] feat: update polar test --- src/core/utils/polar.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/utils/polar.test.ts b/src/core/utils/polar.test.ts index 41f4293c..99ff652b 100644 --- a/src/core/utils/polar.test.ts +++ b/src/core/utils/polar.test.ts @@ -2,7 +2,7 @@ import { cartesianToPolar, pointsToDegree, valueToRadian } from './polar'; describe('Calculate polar coordinates correctly', () => { it('Polar', () => { - expect(valueToRadian(0, 100, 0, 360, 0)).toEqual(-Math.PI / 2.0); + expect(valueToRadian(0, 100, 0, 360)).toEqual(-Math.PI / 2.0); expect(cartesianToPolar(0, 100, 0, 0, 0, 0, 360)).toMatchObject({ x: 0, y: 0 }); }); From e06a9880491307b1170797fb5dc25979ef5a7312 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 15:02:05 -0400 Subject: [PATCH 7/8] feat: update marks --- src/core/mark/area.ts | 22 +++++++++++++++------- src/core/mark/bar.ts | 21 +++++++++++---------- src/core/mark/betweenLink.ts | 9 +++++---- src/core/mark/grid.ts | 22 ++++++++++++---------- src/core/mark/line.ts | 4 +++- src/core/mark/point.ts | 3 ++- src/core/mark/rect.ts | 11 ++++++----- src/core/mark/rule.ts | 21 +++++++++++---------- src/core/mark/text.ts | 11 +++++++---- src/core/mark/triangle.ts | 25 +++++++++++++------------ src/core/mark/withinLink.ts | 28 +++++++++++++++++++--------- 11 files changed, 104 insertions(+), 73 deletions(-) diff --git a/src/core/mark/area.ts b/src/core/mark/area.ts index e60a95ea..ef6438aa 100644 --- a/src/core/mark/area.ts +++ b/src/core/mark/area.ts @@ -21,6 +21,7 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; // TODO: should default values be filled already const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -104,7 +105,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPointsTop.push([pos.x, pos.y]); areaPointsBottom.push([pos.x, pos.y]); @@ -118,7 +120,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPointsTop.push([posTop.x, posTop.y]); @@ -130,7 +133,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPointsBottom.push([posBot.x, posBot.y]); @@ -144,7 +148,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPointsTop.push([pos.x, pos.y]); areaPointsBottom.push([pos.x, pos.y]); @@ -228,7 +233,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); baselinePoints.push([baselinePos.x, baselinePos.y]); @@ -245,7 +251,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPoints.push(pos.x, pos.y); @@ -260,7 +267,8 @@ export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Ti trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); areaPoints.push(curPos.x, curPos.y); diff --git a/src/core/mark/bar.ts b/src/core/mark/bar.ts index 366588dd..bdf9b1d8 100644 --- a/src/core/mark/bar.ts +++ b/src/core/mark/bar.ts @@ -27,6 +27,7 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -116,14 +117,14 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { const ye = isFlippedY ? barHeight + prevYEnd : rowHeight - y - prevYEnd; const nearR = trackOuterRadius - (ye / trackHeight) * trackRingSize; - const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(xs + barWidth, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(xs + barWidth, trackWidth, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color), color === 'none' ? 0 : actualOpacity); g.moveTo(sPos.x, sPos.y); - g.arc(cx, cy, nearR, startRad, endRad, true); - g.arc(cx, cy, farR, endRad, startRad, false); + g.arc(cx, cy, nearR, startRad, endRad, !isClockwise); + g.arc(cx, cy, farR, endRad, startRad, isClockwise); polygonForMouseEvents = Array.from(g.currentPath.points); g.closePath(); } else { @@ -207,14 +208,14 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { const farR = trackOuterRadius - (ys / trackHeight) * trackRingSize; const nearR = trackOuterRadius - (ye / trackHeight) * trackRingSize; - const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(xs + barWidth, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(xs + barWidth, trackWidth, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color), color === 'none' ? 0 : actualOpacity); g.moveTo(sPos.x, sPos.y); - g.arc(cx, cy, nearR, startRad, endRad, true); - g.arc(cx, cy, farR, endRad, startRad, false); + g.arc(cx, cy, nearR, startRad, endRad, !isClockwise); + g.arc(cx, cy, farR, endRad, startRad, isClockwise); polygonForMouseEvents = Array.from(g.currentPath.points); g.closePath(); } else { diff --git a/src/core/mark/betweenLink.ts b/src/core/mark/betweenLink.ts index d50df881..33041a50 100644 --- a/src/core/mark/betweenLink.ts +++ b/src/core/mark/betweenLink.ts @@ -23,6 +23,7 @@ export function drawBetweenLink(g: PIXI.Graphics, trackInfo: any, model: Gosling /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; const startAngle = spec.startAngle ?? 0; @@ -118,10 +119,10 @@ export function drawBetweenLink(g: PIXI.Graphics, trackInfo: any, model: Gosling // https://pixijs.download/dev/docs/PIXI.Graphics.html#bezierCurveTo const r = trackOuterRadius - (rowPosition / trackHeight) * trackRingSize; - const posX = cartesianToPolar(_x1, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posXE = cartesianToPolar(_x2, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posX1 = cartesianToPolar(_x3, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posX1E = cartesianToPolar(_x4, trackWidth, r, tcx, tcy, startAngle, endAngle); + const posX = cartesianToPolar(_x1, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posXE = cartesianToPolar(_x2, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posX1 = cartesianToPolar(_x3, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posX1E = cartesianToPolar(_x4, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); g.moveTo(posX.x, posX.y); diff --git a/src/core/mark/grid.ts b/src/core/mark/grid.ts index 5da425a0..2067cdc5 100644 --- a/src/core/mark/grid.ts +++ b/src/core/mark/grid.ts @@ -25,6 +25,7 @@ export function drawRowGrid(trackInfo: any, tm: GoslingTrackModel, theme: Requir /* circular parameters */ const circular = tm.spec().layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -72,9 +73,9 @@ export function drawRowGrid(trackInfo: any, tm: GoslingTrackModel, theme: Requir const farR = midR + strokeWidth / 2.0; const nearR = midR - strokeWidth / 2.0; - const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(0, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(0, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle, isClockwise); // For circular grid, we draw 'filled' arc w/ zero strokeWidth graphics.lineStyle( @@ -86,8 +87,8 @@ export function drawRowGrid(trackInfo: any, tm: GoslingTrackModel, theme: Requir graphics.beginFill(colorToHex(theme.axis.gridColor), 1); graphics.moveTo(trackX + sPos.x, trackY + sPos.y); - graphics.arc(trackX + cx, trackY + cy, nearR, startRad, endRad, true); - graphics.arc(trackX + cx, trackY + cy, farR, endRad, startRad, false); + graphics.arc(trackX + cx, trackY + cy, nearR, startRad, endRad, !isClockwise); + graphics.arc(trackX + cx, trackY + cy, farR, endRad, startRad, isClockwise); graphics.closePath(); } }); @@ -109,6 +110,7 @@ export function drawYGridQuantitative(trackInfo: any, tm: GoslingTrackModel, the /* circular parameters */ const circular = tm.spec().layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -185,9 +187,9 @@ export function drawYGridQuantitative(trackInfo: any, tm: GoslingTrackModel, the const farR = midR + strokeWidth / 2.0; const nearR = midR - strokeWidth / 2.0; - const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(0, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(0, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle, isClockwise); // For circular grid, we draw 'filled' arc w/ zero strokeWidth graphics.lineStyle( @@ -199,8 +201,8 @@ export function drawYGridQuantitative(trackInfo: any, tm: GoslingTrackModel, the graphics.beginFill(colorToHex(theme.axis.gridColor), 1); graphics.moveTo(trackX + sPos.x, trackY + sPos.y); - graphics.arc(trackX + cx, trackY + cy, nearR, startRad, endRad, true); - graphics.arc(trackX + cx, trackY + cy, farR, endRad, startRad, false); + graphics.arc(trackX + cx, trackY + cy, nearR, startRad, endRad, !isClockwise); + graphics.arc(trackX + cx, trackY + cy, farR, endRad, startRad, isClockwise); graphics.closePath(); }); } diff --git a/src/core/mark/line.ts b/src/core/mark/line.ts index 19543201..846f3c6b 100644 --- a/src/core/mark/line.ts +++ b/src/core/mark/line.ts @@ -19,6 +19,7 @@ export function drawLine(g: PIXI.Graphics, model: GoslingTrackModel, trackWidth: /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; // TODO: should default values be filled already const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -76,7 +77,8 @@ export function drawLine(g: PIXI.Graphics, model: GoslingTrackModel, trackWidth: trackCenterX, trackCenterY, startAngle, - endAngle + endAngle, + isClockwise ); if (i === 0) { diff --git a/src/core/mark/point.ts b/src/core/mark/point.ts index f270d42b..dab7feae 100644 --- a/src/core/mark/point.ts +++ b/src/core/mark/point.ts @@ -25,6 +25,7 @@ export function drawPoint(track: any, g: PIXI.Graphics, model: GoslingTrackModel /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; const startAngle = spec.startAngle ?? 0; @@ -72,7 +73,7 @@ export function drawPoint(track: any, g: PIXI.Graphics, model: GoslingTrackModel if (circular) { const r = trackOuterRadius - ((rowPosition + rowHeight - cy) / trackHeight) * trackRingSize; - const pos = cartesianToPolar(cx, trackWidth, r, tcx, tcy, startAngle, endAngle); + const pos = cartesianToPolar(cx, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color), actualOpacity); g.drawCircle(pos.x, pos.y, radius); diff --git a/src/core/mark/rect.ts b/src/core/mark/rect.ts index fedffcde..f0b550fa 100644 --- a/src/core/mark/rect.ts +++ b/src/core/mark/rect.ts @@ -17,6 +17,7 @@ export function drawRect(HGC: import('@higlass/types').HGC, track: any, tile: Ti /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -106,14 +107,14 @@ export function drawRect(HGC: import('@higlass/types').HGC, track: any, tile: Ti nearR = midR + absoluteHeight / 2.0; } - const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(xe, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(xe, trackWidth, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color === 'none' ? 'white' : color), color === 'none' ? 0 : actualOpacity); g.moveTo(sPos.x, sPos.y); - g.arc(cx, cy, nearR, startRad, endRad, true); - g.arc(cx, cy, farR, endRad, startRad, false); + g.arc(cx, cy, nearR, startRad, endRad, !isClockwise); + g.arc(cx, cy, farR, endRad, startRad, isClockwise); polygonForMouseEvent = Array.from(g.currentPath.points); g.closePath(); } else { diff --git a/src/core/mark/rule.ts b/src/core/mark/rule.ts index a47f5bd2..beda3fc9 100644 --- a/src/core/mark/rule.ts +++ b/src/core/mark/rule.ts @@ -17,6 +17,7 @@ export function drawRule(HGC: import('@higlass/types').HGC, trackInfo: any, tile /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -102,14 +103,14 @@ export function drawRule(HGC: import('@higlass/types').HGC, trackInfo: any, tile const farR = midR + strokeWidth / 2.0; const nearR = midR - strokeWidth / 2.0; - const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(0, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(0, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(0, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(trackWidth, trackWidth, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color), actualOpacity); g.moveTo(sPos.x, sPos.y); - g.arc(cx, cy, nearR, startRad, endRad, true); - g.arc(cx, cy, farR, endRad, startRad, false); + g.arc(cx, cy, nearR, startRad, endRad, !isClockwise); + g.arc(cx, cy, farR, endRad, startRad, isClockwise); g.closePath(); } else { if (dashed) { @@ -146,14 +147,14 @@ export function drawRule(HGC: import('@higlass/types').HGC, trackInfo: any, tile const farR = midR + strokeWidth / 2.0; const nearR = midR - strokeWidth / 2.0; - const sPos = cartesianToPolar(x, trackWidth, nearR, cx, cy, startAngle, endAngle); - const startRad = valueToRadian(x, trackWidth, startAngle, endAngle); - const endRad = valueToRadian(xe, trackWidth, startAngle, endAngle); + const sPos = cartesianToPolar(x, trackWidth, nearR, cx, cy, startAngle, endAngle, isClockwise); + const startRad = valueToRadian(x, trackWidth, startAngle, endAngle, isClockwise); + const endRad = valueToRadian(xe, trackWidth, startAngle, endAngle, isClockwise); g.beginFill(colorToHex(color), actualOpacity); g.moveTo(sPos.x, sPos.y); - g.arc(cx, cy, nearR, startRad, endRad, true); - g.arc(cx, cy, farR, endRad, startRad, false); + g.arc(cx, cy, nearR, startRad, endRad, !isClockwise); + g.arc(cx, cy, farR, endRad, startRad, isClockwise); g.closePath(); } else if (dashed) { const [dashSize, gapSize] = dashed; diff --git a/src/core/mark/text.ts b/src/core/mark/text.ts index 99abc256..cae7d72f 100644 --- a/src/core/mark/text.ts +++ b/src/core/mark/text.ts @@ -29,6 +29,7 @@ export function drawText(HGC: import('@higlass/types').HGC, trackInfo: any, tile /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -228,7 +229,7 @@ export function drawText(HGC: import('@higlass/types').HGC, trackInfo: any, tile if (circular) { const r = trackOuterRadius - ((rowPosition + rowHeight - y) / trackHeight) * trackRingSize; - const centerPos = cartesianToPolar(cx, trackWidth, r, tcx, tcy, startAngle, endAngle); + const centerPos = cartesianToPolar(cx, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); textGraphic.x = centerPos.x; textGraphic.y = centerPos.y; @@ -255,7 +256,7 @@ export function drawText(HGC: import('@higlass/types').HGC, trackInfo: any, tile const eventPointsFar: number[] = []; const eventPointsNear: number[] = []; for (let i = maxX; i >= minX; i -= tw / 10.0) { - const p = cartesianToPolar(i, trackWidth, r, tcx, tcy, startAngle, endAngle); + const p = cartesianToPolar(i, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); ropePoints.push(new HGC.libraries.PIXI.Point(p.x, p.y)); const pFar = cartesianToPolar( @@ -265,7 +266,8 @@ export function drawText(HGC: import('@higlass/types').HGC, trackInfo: any, tile tcx, tcy, startAngle, - endAngle + endAngle, + isClockwise ); const pNear = cartesianToPolar( i, @@ -274,7 +276,8 @@ export function drawText(HGC: import('@higlass/types').HGC, trackInfo: any, tile tcx, tcy, startAngle, - endAngle + endAngle, + isClockwise ); eventPointsFar.push(pFar.x, pFar.y); if (i === maxX) { diff --git a/src/core/mark/triangle.ts b/src/core/mark/triangle.ts index 4f981e37..9a7f0480 100644 --- a/src/core/mark/triangle.ts +++ b/src/core/mark/triangle.ts @@ -23,6 +23,7 @@ export function drawTriangle(g: PIXI.Graphics, model: GoslingTrackModel, trackWi /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; // TODO: should be smaller than Math.min(width, height) const startAngle = spec.startAngle ?? 0; @@ -77,24 +78,24 @@ export function drawTriangle(g: PIXI.Graphics, model: GoslingTrackModel, trackWi } if (spec.mark === 'triangleLeft') { - const p0 = cartesianToPolar(x1, trackWidth, r0, cx, cy, startAngle, endAngle); - const p1 = cartesianToPolar(x0, trackWidth, rm, cx, cy, startAngle, endAngle); - const p2 = cartesianToPolar(x1, trackWidth, r1, cx, cy, startAngle, endAngle); - const p3 = cartesianToPolar(x1, trackWidth, r0, cx, cy, startAngle, endAngle); + const p0 = cartesianToPolar(x1, trackWidth, r0, cx, cy, startAngle, endAngle, isClockwise); + const p1 = cartesianToPolar(x0, trackWidth, rm, cx, cy, startAngle, endAngle, isClockwise); + const p2 = cartesianToPolar(x1, trackWidth, r1, cx, cy, startAngle, endAngle, isClockwise); + const p3 = cartesianToPolar(x1, trackWidth, r0, cx, cy, startAngle, endAngle, isClockwise); polygon = [p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y]; } else if (spec.mark === 'triangleRight') { - const p0 = cartesianToPolar(x0, trackWidth, r0, cx, cy, startAngle, endAngle); - const p1 = cartesianToPolar(x1, trackWidth, rm, cx, cy, startAngle, endAngle); - const p2 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle); - const p3 = cartesianToPolar(x0, trackWidth, r0, cx, cy, startAngle, endAngle); + const p0 = cartesianToPolar(x0, trackWidth, r0, cx, cy, startAngle, endAngle, isClockwise); + const p1 = cartesianToPolar(x1, trackWidth, rm, cx, cy, startAngle, endAngle, isClockwise); + const p2 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle, isClockwise); + const p3 = cartesianToPolar(x0, trackWidth, r0, cx, cy, startAngle, endAngle, isClockwise); polygon = [p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y]; } else if (spec.mark === 'triangleBottom') { x0 = xm - markWidth / 2.0; x1 = xm + markWidth / 2.0; - const p0 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle); - const p1 = cartesianToPolar(x1, trackWidth, r1, cx, cy, startAngle, endAngle); - const p2 = cartesianToPolar(xm, trackWidth, r0, cx, cy, startAngle, endAngle); - const p3 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle); + const p0 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle, isClockwise); + const p1 = cartesianToPolar(x1, trackWidth, r1, cx, cy, startAngle, endAngle, isClockwise); + const p2 = cartesianToPolar(xm, trackWidth, r0, cx, cy, startAngle, endAngle, isClockwise); + const p3 = cartesianToPolar(x0, trackWidth, r1, cx, cy, startAngle, endAngle, isClockwise); polygon = [p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y]; } diff --git a/src/core/mark/withinLink.ts b/src/core/mark/withinLink.ts index 9c3ec4e4..9a82c2ee 100644 --- a/src/core/mark/withinLink.ts +++ b/src/core/mark/withinLink.ts @@ -23,6 +23,7 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT /* circular parameters */ const circular = spec.layout === 'circular'; + const isClockwise = spec.clockwise ?? false; const trackInnerRadius = spec.innerRadius ?? 220; const trackOuterRadius = spec.outerRadius ?? 300; const startAngle = spec.startAngle ?? 0; @@ -128,10 +129,10 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT // https://pixijs.download/dev/docs/PIXI.Graphics.html#bezierCurveTo const r = trackOuterRadius - (rowPosition / trackHeight) * trackRingSize; - const posX = cartesianToPolar(_x1, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posXE = cartesianToPolar(_x2, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posX1 = cartesianToPolar(_x3, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posX1E = cartesianToPolar(_x4, trackWidth, r, tcx, tcy, startAngle, endAngle); + const posX = cartesianToPolar(_x1, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posXE = cartesianToPolar(_x2, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posX1 = cartesianToPolar(_x3, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posX1E = cartesianToPolar(_x4, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); g.moveTo(posX.x, posX.y); @@ -240,7 +241,16 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT (flipY ? -1 : 1); const r = trackOuterRadius - (my / trackHeight) * trackRingSize; - const cmx = cartesianToPolar(mx, trackWidth, r, tcx, tcy, startAngle, endAngle); + const cmx = cartesianToPolar( + mx, + trackWidth, + r, + tcx, + tcy, + startAngle, + endAngle, + isClockwise + ); if (step % 20 === 0 || step === NUM_STEPS) { // we draw less points than the hidden points for mouse events @@ -256,8 +266,8 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT pathForMouseEvent = morePoints.flatMap(d => [d.x, d.y]); } else if (spec.style?.linkStyle === 'straight') { const r = trackOuterRadius - (rowPosition / trackHeight) * trackRingSize; - const posS = cartesianToPolar(x, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posE = cartesianToPolar(xe, trackWidth, r, tcx, tcy, startAngle, endAngle); + const posS = cartesianToPolar(x, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posE = cartesianToPolar(xe, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); const x1 = posS.x; const y1 = posS.y; @@ -279,8 +289,8 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT pathForMouseEvent = eventPoints.flatMap(d => [d.x, d.y]); } else { const r = trackOuterRadius - (rowPosition / trackHeight) * trackRingSize; - const posS = cartesianToPolar(x, trackWidth, r, tcx, tcy, startAngle, endAngle); - const posE = cartesianToPolar(xe, trackWidth, r, tcx, tcy, startAngle, endAngle); + const posS = cartesianToPolar(x, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); + const posE = cartesianToPolar(xe, trackWidth, r, tcx, tcy, startAngle, endAngle, isClockwise); const x1 = posS.x; const y1 = posS.y; From 21bc975784024ff8560ebb109ebcc8b64551ba7c Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 11 Jun 2024 16:20:40 -0400 Subject: [PATCH 8/8] fix: betweenLink, withinLink --- src/core/mark/betweenLink.ts | 4 ++-- src/core/mark/withinLink.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/core/mark/betweenLink.ts b/src/core/mark/betweenLink.ts index 33041a50..5bb49080 100644 --- a/src/core/mark/betweenLink.ts +++ b/src/core/mark/betweenLink.ts @@ -135,7 +135,7 @@ export function drawBetweenLink(g: PIXI.Graphics, trackInfo: any, model: Gosling trackOuterRadius, positionToRadian(posX1E.x, posX1E.y, tcx, tcy), positionToRadian(posX1.x, posX1.y, tcx, tcy), - false + isClockwise ); // inner curve @@ -147,7 +147,7 @@ export function drawBetweenLink(g: PIXI.Graphics, trackInfo: any, model: Gosling trackOuterRadius, positionToRadian(posXE.x, posXE.y, tcx, tcy), positionToRadian(posX.x, posX.y, tcx, tcy), - false + isClockwise ); g.endFill(); } else { diff --git a/src/core/mark/withinLink.ts b/src/core/mark/withinLink.ts index 9a82c2ee..eb959489 100644 --- a/src/core/mark/withinLink.ts +++ b/src/core/mark/withinLink.ts @@ -145,7 +145,7 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT trackOuterRadius, positionToRadian(posX1E.x, posX1E.y, tcx, tcy), positionToRadian(posX1.x, posX1.y, tcx, tcy), - false + isClockwise ); // inner curve @@ -157,7 +157,7 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT trackOuterRadius, positionToRadian(posXE.x, posXE.y, tcx, tcy), positionToRadian(posX.x, posX.y, tcx, tcy), - false + isClockwise ); pathForMouseEvent = Array.from(g.currentPath.points); g.endFill();