Skip to content

Commit 506c168

Browse files
aminyaaminya
committed
fix: convert CanvasDrawer to a normal class
Store the class instance in CanvasDrawer property
1 parent b3fc577 commit 506c168

File tree

3 files changed

+52
-48
lines changed

3 files changed

+52
-48
lines changed

‎lib/minimap-element.js‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const SPEC_MODE = atom.inSpecMode()
5959
*/
6060
class MinimapElement {
6161
static initClass () {
62-
include(this, CanvasDrawer, EventsDelegation, AncestorsMethods)
62+
include(this, EventsDelegation, AncestorsMethods)
6363
return element(this, 'atom-text-editor-minimap')
6464
}
6565

@@ -186,6 +186,11 @@ class MinimapElement {
186186
*/
187187
this.DOMStylesReader = new DOMStylesReader()
188188

189+
/**
190+
* This MinimapElement's CanvasDrawer
191+
*/
192+
this.CanvasDrawer = new CanvasDrawer()
193+
189194
// States
190195

191196
/**
@@ -276,9 +281,9 @@ class MinimapElement {
276281

277282
if (this.attached) {
278283
if (!this.smoothScrolling) {
279-
this.backLayer.canvas.style.cssText = ''
280-
this.tokensLayer.canvas.style.cssText = ''
281-
this.frontLayer.canvas.style.cssText = ''
284+
this.CanvasDrawer.backLayer.canvas.style.cssText = ''
285+
this.CanvasDrawer.tokensLayer.canvas.style.cssText = ''
286+
this.CanvasDrawer.frontLayer.canvas.style.cssText = ''
282287
} else {
283288
this.requestUpdate()
284289
}
@@ -492,9 +497,9 @@ class MinimapElement {
492497
* @access private
493498
*/
494499
initializeContent () {
495-
this.initializeCanvas()
500+
this.CanvasDrawer.initializeCanvas()
496501

497-
this.attachCanvases(this)
502+
this.CanvasDrawer.attachCanvases(this)
498503

499504
this.createVisibleArea()
500505
this.createControls()
@@ -514,7 +519,7 @@ class MinimapElement {
514519
),
515520

516521
this.subscribeTo(
517-
this.getFrontCanvas(),
522+
this.CanvasDrawer.getFrontCanvas(),
518523
{
519524
mousedown: (e) => { this.canvasPressed(extractMouseEventData(e)) },
520525
touchstart: (e) => { this.canvasPressed(extractTouchEventData(e)) }
@@ -638,7 +643,7 @@ class MinimapElement {
638643
this.quickSettingsElement = null
639644
})
640645

641-
const { top, left, right } = this.getFrontCanvas().getBoundingClientRect()
646+
const { top, left, right } = this.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
642647
this.quickSettingsElement.style.top = `${top}px`
643648
this.quickSettingsElement.attach()
644649

@@ -733,7 +738,7 @@ class MinimapElement {
733738
}),
734739

735740
this.minimap.onDidChange((change) => {
736-
this.pendingChanges.push(change)
741+
this.CanvasDrawer.pendingChanges.push(change)
737742
this.requestUpdate()
738743
}),
739744

@@ -742,9 +747,9 @@ class MinimapElement {
742747
if (type === 'line' ||
743748
type === 'highlight-under' ||
744749
type === 'background-custom') {
745-
this.pendingBackDecorationChanges.push(change)
750+
this.CanvasDrawer.pendingBackDecorationChanges.push(change)
746751
} else {
747-
this.pendingFrontDecorationChanges.push(change)
752+
this.CanvasDrawer.pendingFrontDecorationChanges.push(change)
748753
}
749754
this.requestUpdate()
750755
}),
@@ -826,7 +831,7 @@ class MinimapElement {
826831
if (!(this.attached && this.isVisible() && this.minimap)) { return }
827832
const minimap = this.minimap
828833
minimap.enableCache()
829-
const canvas = this.getFrontCanvas()
834+
const canvas = this.CanvasDrawer.getFrontCanvas()
830835

831836
const devicePixelRatio = this.minimap.getDevicePixelRatio()
832837
const visibleAreaLeft = minimap.getTextEditorScaledScrollLeft()
@@ -864,25 +869,25 @@ class MinimapElement {
864869

865870
if (this.smoothScrolling) {
866871
if (SPEC_MODE) {
867-
applyStyles(this.backLayer.canvas, { top: `${canvasTop}px` })
868-
applyStyles(this.tokensLayer.canvas, { top: `${canvasTop}px` })
869-
applyStyles(this.frontLayer.canvas, { top: `${canvasTop}px` })
872+
applyStyles(this.CanvasDrawer.backLayer.canvas, { top: `${canvasTop}px` })
873+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { top: `${canvasTop}px` })
874+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { top: `${canvasTop}px` })
870875
} else {
871876
let canvasTransform = makeTranslate(0, canvasTop, this.useHardwareAcceleration)
872877
if (devicePixelRatio !== 1) {
873878
const scale = 1 / devicePixelRatio
874879
canvasTransform += ` ${makeScale(scale, scale, this.useHardwareAcceleration)}`
875880
}
876-
applyStyles(this.backLayer.canvas, { transform: canvasTransform })
877-
applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
878-
applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
881+
applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
882+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
883+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
879884
}
880885
} else {
881886
const scale = 1 / devicePixelRatio
882887
const canvasTransform = makeScale(scale, scale, this.useHardwareAcceleration)
883-
applyStyles(this.backLayer.canvas, { transform: canvasTransform })
884-
applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
885-
applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
888+
applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
889+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
890+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
886891
}
887892

888893
if (this.minimapScrollIndicator && !this.scrollIndicator && minimap.canScroll()) {
@@ -911,7 +916,7 @@ class MinimapElement {
911916

912917
if (this.absoluteMode && this.adjustAbsoluteModeHeight) { this.updateCanvasesSize() }
913918

914-
this.updateCanvas()
919+
this.CanvasDrawer.updateCanvas()
915920
minimap.clearCache()
916921
}
917922

@@ -1029,14 +1034,14 @@ class MinimapElement {
10291034
const devicePixelRatio = this.minimap.getDevicePixelRatio()
10301035
const maxCanvasHeight = this.height + this.minimap.getLineHeight()
10311036
const newHeight = this.absoluteMode && this.adjustAbsoluteModeHeight ? Math.min(this.minimap.getHeight(), maxCanvasHeight) : maxCanvasHeight
1032-
const canvas = this.getFrontCanvas()
1037+
const canvas = this.CanvasDrawer.getFrontCanvas()
10331038

10341039
if (canvasWidth == null) {
10351040
canvasWidth = canvas.width / devicePixelRatio
10361041
}
10371042

10381043
if (canvasWidth !== canvas.width || newHeight !== canvas.height) {
1039-
this.setCanvasesSize(
1044+
this.CanvasDrawer.setCanvasesSize(
10401045
canvasWidth * devicePixelRatio,
10411046
newHeight * devicePixelRatio
10421047
)

‎lib/mixins/canvas-drawer.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict'
22

33
import { escapeRegExp } from 'underscore-plus'
4-
import Mixin from 'mixto'
54

65
import * as Main from '../main'
76
import CanvasLayer from '../canvas-layer'
@@ -13,7 +12,7 @@ import CanvasLayer from '../canvas-layer'
1312
* This mixin is injected in the `MinimapElement` prototype, so all these
1413
* methods are available on any `MinimapElement` instance.
1514
*/
16-
export default class CanvasDrawer extends Mixin {
15+
export default class CanvasDrawer {
1716
/**
1817
* Initializes the canvas elements needed to perform the `Minimap` rendering.
1918
*/

‎spec/minimap-element-spec.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ describe('MinimapElement', () => {
389389
})
390390

391391
it('renders the visible gutter decorations', () => {
392-
spyOn(minimapElement, 'drawGutterDecoration').andCallThrough()
392+
spyOn(minimapElement.CanvasDrawer, 'drawGutterDecoration').andCallThrough()
393393

394394
minimap.decorateMarker(editor.markBufferRange([[1, 0], [1, 10]]), { type: 'gutter', color: '#0000FF' })
395395
minimap.decorateMarker(editor.markBufferRange([[10, 0], [10, 10]]), { type: 'gutter', color: '#0000FF' })
@@ -403,8 +403,8 @@ describe('MinimapElement', () => {
403403
runs(() => {
404404
nextAnimationFrame()
405405

406-
expect(minimapElement.drawGutterDecoration).toHaveBeenCalled()
407-
expect(minimapElement.drawGutterDecoration.calls.length).toEqual(2)
406+
expect(minimapElement.CanvasDrawer.drawGutterDecoration).toHaveBeenCalled()
407+
expect(minimapElement.CanvasDrawer.drawGutterDecoration.calls.length).toEqual(2)
408408
})
409409
})
410410

@@ -423,8 +423,8 @@ describe('MinimapElement', () => {
423423
runs(() => {
424424
nextAnimationFrame()
425425

426-
expect(minimapElement.drawHighlightDecoration).toHaveBeenCalled()
427-
expect(minimapElement.drawHighlightDecoration.calls.length).toEqual(2)
426+
expect(minimapElement.CanvasDrawer.drawHighlightDecoration).toHaveBeenCalled()
427+
expect(minimapElement.CanvasDrawer.drawHighlightDecoration.calls.length).toEqual(2)
428428
})
429429
})
430430

@@ -587,8 +587,8 @@ describe('MinimapElement', () => {
587587

588588
describe('when the editor visibility change', () => {
589589
it('does not modify the size of the canvas', () => {
590-
const canvasWidth = minimapElement.getFrontCanvas().width
591-
const canvasHeight = minimapElement.getFrontCanvas().height
590+
const canvasWidth = minimapElement.CanvasDrawer.getFrontCanvas().width
591+
const canvasHeight = minimapElement.CanvasDrawer.getFrontCanvas().height
592592
editorElement.style.display = 'none'
593593

594594
minimapElement.measureHeightAndWidth()
@@ -599,8 +599,8 @@ describe('MinimapElement', () => {
599599
runs(() => {
600600
nextAnimationFrame()
601601

602-
expect(minimapElement.getFrontCanvas().width).toEqual(canvasWidth)
603-
expect(minimapElement.getFrontCanvas().height).toEqual(canvasHeight)
602+
expect(minimapElement.CanvasDrawer.getFrontCanvas().width).toEqual(canvasWidth)
603+
expect(minimapElement.CanvasDrawer.getFrontCanvas().height).toEqual(canvasHeight)
604604
})
605605
})
606606

@@ -693,7 +693,7 @@ describe('MinimapElement', () => {
693693
let [canvas, visibleArea, originalLeft, maxScroll] = []
694694

695695
beforeEach(() => {
696-
canvas = minimapElement.getFrontCanvas()
696+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
697697
visibleArea = minimapElement.visibleArea
698698
originalLeft = visibleArea.getBoundingClientRect().left
699699
maxScroll = minimap.getTextEditorMaxScrollTop()
@@ -784,7 +784,7 @@ describe('MinimapElement', () => {
784784

785785
atom.config.set('minimap.scrollAnimation', false)
786786

787-
canvas = minimapElement.getFrontCanvas()
787+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
788788
})
789789

790790
it('scrolls the editor to the line below the mouse', () => {
@@ -825,7 +825,7 @@ describe('MinimapElement', () => {
825825
atom.config.set('minimap.scrollAnimation', true)
826826
atom.config.set('minimap.scrollAnimationDuration', 300)
827827

828-
canvas = minimapElement.getFrontCanvas()
828+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
829829
})
830830

831831
it('scrolls the editor gradually to the line below the mouse', () => {
@@ -1127,7 +1127,7 @@ describe('MinimapElement', () => {
11271127

11281128
atom.config.set('minimap.scrollAnimation', false)
11291129

1130-
canvas = minimapElement.getFrontCanvas()
1130+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
11311131
mousedown(canvas)
11321132
})
11331133

@@ -1357,7 +1357,7 @@ describe('MinimapElement', () => {
13571357
})
13581358

13591359
it('adjusts the width of the minimap canvas', () => {
1360-
expect(minimapElement.getFrontCanvas().width / devicePixelRatio).toEqual(4)
1360+
expect(minimapElement.CanvasDrawer.getFrontCanvas().width / devicePixelRatio).toEqual(4)
13611361
})
13621362

13631363
it('offsets the minimap by the difference', () => {
@@ -1376,7 +1376,7 @@ describe('MinimapElement', () => {
13761376
})
13771377
runs(() => {
13781378
nextAnimationFrame()
1379-
expect(minimapElement.getFrontCanvas().width / devicePixelRatio).toEqual(4)
1379+
expect(minimapElement.CanvasDrawer.getFrontCanvas().width / devicePixelRatio).toEqual(4)
13801380
})
13811381
})
13821382
})
@@ -1694,7 +1694,7 @@ describe('MinimapElement', () => {
16941694
})
16951695

16961696
it('positions the quick settings view next to the minimap', () => {
1697-
const minimapBounds = minimapElement.getFrontCanvas().getBoundingClientRect()
1697+
const minimapBounds = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
16981698
const settingsBounds = quickSettingsElement.getBoundingClientRect()
16991699

17001700
expect(realOffsetTop(quickSettingsElement)).toBeCloseTo(minimapBounds.top, 0)
@@ -1721,7 +1721,7 @@ describe('MinimapElement', () => {
17211721
})
17221722

17231723
it('positions the quick settings view next to the minimap', () => {
1724-
const minimapBounds = minimapElement.getFrontCanvas().getBoundingClientRect()
1724+
const minimapBounds = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
17251725

17261726
expect(realOffsetTop(quickSettingsElement)).toBeCloseTo(minimapBounds.top, 0)
17271727
expect(realOffsetLeft(quickSettingsElement)).toBeCloseTo(minimapBounds.right, 0)
@@ -1755,12 +1755,12 @@ describe('MinimapElement', () => {
17551755
})
17561756

17571757
it('adjusts the size of the control div to fit in the minimap', () => {
1758-
expect(controls.clientWidth).toEqual(minimapElement.getFrontCanvas().clientWidth / devicePixelRatio)
1758+
expect(controls.clientWidth).toEqual(minimapElement.CanvasDrawer.getFrontCanvas().clientWidth / devicePixelRatio)
17591759
})
17601760

17611761
it('positions the controls div over the canvas', () => {
17621762
const controlsRect = controls.getBoundingClientRect()
1763-
const canvasRect = minimapElement.getFrontCanvas().getBoundingClientRect()
1763+
const canvasRect = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
17641764
expect(controlsRect.left).toEqual(canvasRect.left)
17651765
expect(controlsRect.right).toEqual(canvasRect.right)
17661766
})
@@ -1771,12 +1771,12 @@ describe('MinimapElement', () => {
17711771
})
17721772

17731773
it('adjusts the size of the control div to fit in the minimap', () => {
1774-
expect(controls.clientWidth).toEqual(minimapElement.getFrontCanvas().clientWidth / devicePixelRatio)
1774+
expect(controls.clientWidth).toEqual(minimapElement.CanvasDrawer.getFrontCanvas().clientWidth / devicePixelRatio)
17751775
})
17761776

17771777
it('positions the controls div over the canvas', () => {
17781778
const controlsRect = controls.getBoundingClientRect()
1779-
const canvasRect = minimapElement.getFrontCanvas().getBoundingClientRect()
1779+
const canvasRect = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
17801780
expect(controlsRect.left).toEqual(canvasRect.left)
17811781
expect(controlsRect.right).toEqual(canvasRect.right)
17821782
})
@@ -1797,7 +1797,7 @@ describe('MinimapElement', () => {
17971797
})
17981798

17991799
it('positions the quick settings view next to the minimap', () => {
1800-
const minimapBounds = minimapElement.getFrontCanvas().getBoundingClientRect()
1800+
const minimapBounds = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
18011801

18021802
expect(realOffsetTop(quickSettingsElement)).toBeNear(minimapBounds.top, 1)
18031803
expect(realOffsetLeft(quickSettingsElement)).toBeNear(minimapBounds.right, 1)

0 commit comments

Comments
 (0)