Skip to content

Commit 101d001

Browse files
aminyaaminya
committed
fix: convert CanvasDrawer to a normal class
Store the class instance in CanvasDrawer property
1 parent 61a8494 commit 101d001

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
@@ -58,7 +58,7 @@ const SPEC_MODE = atom.inSpecMode()
5858
*/
5959
class MinimapElement {
6060
static initClass () {
61-
include(this, CanvasDrawer, EventsDelegation, AncestorsMethods)
61+
include(this, EventsDelegation, AncestorsMethods)
6262
return element(this, 'atom-text-editor-minimap')
6363
}
6464

@@ -177,6 +177,11 @@ class MinimapElement {
177177
*/
178178
this.quickSettingsElement = undefined
179179

180+
/**
181+
* This MinimapElement's CanvasDrawer
182+
*/
183+
this.CanvasDrawer = new CanvasDrawer()
184+
180185
// States
181186

182187
/**
@@ -267,9 +272,9 @@ class MinimapElement {
267272

268273
if (this.attached) {
269274
if (!this.smoothScrolling) {
270-
this.backLayer.canvas.style.cssText = ''
271-
this.tokensLayer.canvas.style.cssText = ''
272-
this.frontLayer.canvas.style.cssText = ''
275+
this.CanvasDrawer.backLayer.canvas.style.cssText = ''
276+
this.CanvasDrawer.tokensLayer.canvas.style.cssText = ''
277+
this.CanvasDrawer.frontLayer.canvas.style.cssText = ''
273278
} else {
274279
this.requestUpdate()
275280
}
@@ -471,9 +476,9 @@ class MinimapElement {
471476
* @access private
472477
*/
473478
initializeContent () {
474-
this.initializeCanvas()
479+
this.CanvasDrawer.initializeCanvas()
475480

476-
this.attachCanvases(this)
481+
this.CanvasDrawer.attachCanvases(this)
477482

478483
this.createVisibleArea()
479484
this.createControls()
@@ -493,7 +498,7 @@ class MinimapElement {
493498
),
494499

495500
this.subscribeTo(
496-
this.getFrontCanvas(),
501+
this.CanvasDrawer.getFrontCanvas(),
497502
{
498503
mousedown: (e) => { this.canvasPressed(extractMouseEventData(e)) },
499504
touchstart: (e) => { this.canvasPressed(extractTouchEventData(e)) }
@@ -617,7 +622,7 @@ class MinimapElement {
617622
this.quickSettingsElement = null
618623
})
619624

620-
const { top, left, right } = this.getFrontCanvas().getBoundingClientRect()
625+
const { top, left, right } = this.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
621626
this.quickSettingsElement.style.top = `${top}px`
622627
this.quickSettingsElement.attach()
623628

@@ -693,7 +698,7 @@ class MinimapElement {
693698
}),
694699

695700
this.minimap.onDidChange((change) => {
696-
this.pendingChanges.push(change)
701+
this.CanvasDrawer.pendingChanges.push(change)
697702
this.requestUpdate()
698703
}),
699704

@@ -702,9 +707,9 @@ class MinimapElement {
702707
if (type === 'line' ||
703708
type === 'highlight-under' ||
704709
type === 'background-custom') {
705-
this.pendingBackDecorationChanges.push(change)
710+
this.CanvasDrawer.pendingBackDecorationChanges.push(change)
706711
} else {
707-
this.pendingFrontDecorationChanges.push(change)
712+
this.CanvasDrawer.pendingFrontDecorationChanges.push(change)
708713
}
709714
this.requestUpdate()
710715
}),
@@ -786,7 +791,7 @@ class MinimapElement {
786791
if (!(this.attached && this.isVisible() && this.minimap)) { return }
787792
const minimap = this.minimap
788793
minimap.enableCache()
789-
const canvas = this.getFrontCanvas()
794+
const canvas = this.CanvasDrawer.getFrontCanvas()
790795

791796
const devicePixelRatio = this.minimap.getDevicePixelRatio()
792797
const visibleAreaLeft = minimap.getTextEditorScaledScrollLeft()
@@ -824,25 +829,25 @@ class MinimapElement {
824829

825830
if (this.smoothScrolling) {
826831
if (SPEC_MODE) {
827-
applyStyles(this.backLayer.canvas, { top: `${canvasTop}px` })
828-
applyStyles(this.tokensLayer.canvas, { top: `${canvasTop}px` })
829-
applyStyles(this.frontLayer.canvas, { top: `${canvasTop}px` })
832+
applyStyles(this.CanvasDrawer.backLayer.canvas, { top: `${canvasTop}px` })
833+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { top: `${canvasTop}px` })
834+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { top: `${canvasTop}px` })
830835
} else {
831836
let canvasTransform = makeTranslate(0, canvasTop, this.useHardwareAcceleration)
832837
if (devicePixelRatio !== 1) {
833838
const scale = 1 / devicePixelRatio
834839
canvasTransform += ` ${makeScale(scale, scale, this.useHardwareAcceleration)}`
835840
}
836-
applyStyles(this.backLayer.canvas, { transform: canvasTransform })
837-
applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
838-
applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
841+
applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
842+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
843+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
839844
}
840845
} else {
841846
const scale = 1 / devicePixelRatio
842847
const canvasTransform = makeScale(scale, scale, this.useHardwareAcceleration)
843-
applyStyles(this.backLayer.canvas, { transform: canvasTransform })
844-
applyStyles(this.tokensLayer.canvas, { transform: canvasTransform })
845-
applyStyles(this.frontLayer.canvas, { transform: canvasTransform })
848+
applyStyles(this.CanvasDrawer.backLayer.canvas, { transform: canvasTransform })
849+
applyStyles(this.CanvasDrawer.tokensLayer.canvas, { transform: canvasTransform })
850+
applyStyles(this.CanvasDrawer.frontLayer.canvas, { transform: canvasTransform })
846851
}
847852

848853
if (this.minimapScrollIndicator && !this.scrollIndicator && minimap.canScroll()) {
@@ -871,7 +876,7 @@ class MinimapElement {
871876

872877
if (this.absoluteMode && this.adjustAbsoluteModeHeight) { this.updateCanvasesSize() }
873878

874-
this.updateCanvas()
879+
this.CanvasDrawer.updateCanvas()
875880
minimap.clearCache()
876881
}
877882

@@ -989,14 +994,14 @@ class MinimapElement {
989994
const devicePixelRatio = this.minimap.getDevicePixelRatio()
990995
const maxCanvasHeight = this.height + this.minimap.getLineHeight()
991996
const newHeight = this.absoluteMode && this.adjustAbsoluteModeHeight ? Math.min(this.minimap.getHeight(), maxCanvasHeight) : maxCanvasHeight
992-
const canvas = this.getFrontCanvas()
997+
const canvas = this.CanvasDrawer.getFrontCanvas()
993998

994999
if (canvasWidth == null) {
9951000
canvasWidth = canvas.width / devicePixelRatio
9961001
}
9971002

9981003
if (canvasWidth !== canvas.width || newHeight !== canvas.height) {
999-
this.setCanvasesSize(
1004+
this.CanvasDrawer.setCanvasesSize(
10001005
canvasWidth * devicePixelRatio,
10011006
newHeight * devicePixelRatio
10021007
)

‎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 { domStylesReader } from '../main'
@@ -18,7 +17,7 @@ let thisSpec
1817
* This mixin is injected in the `MinimapElement` prototype, so all these
1918
* methods are available on any `MinimapElement` instance.
2019
*/
21-
export default class CanvasDrawer extends Mixin {
20+
export default class CanvasDrawer {
2221
/**
2322
* Initializes the canvas elements needed to perform the `Minimap` rendering.
2423
*/

‎spec/minimap-element-spec.js‎

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

392392
it('renders the visible gutter decorations', () => {
393-
spyOn(minimapElement, 'drawGutterDecoration').andCallThrough()
393+
spyOn(minimapElement.CanvasDrawer, 'drawGutterDecoration').andCallThrough()
394394

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

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

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

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

@@ -588,8 +588,8 @@ describe('MinimapElement', () => {
588588

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

595595
minimapElement.measureHeightAndWidth()
@@ -600,8 +600,8 @@ describe('MinimapElement', () => {
600600
runs(() => {
601601
nextAnimationFrame()
602602

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

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

696696
beforeEach(() => {
697-
canvas = minimapElement.getFrontCanvas()
697+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
698698
visibleArea = minimapElement.visibleArea
699699
originalLeft = visibleArea.getBoundingClientRect().left
700700
maxScroll = minimap.getTextEditorMaxScrollTop()
@@ -785,7 +785,7 @@ describe('MinimapElement', () => {
785785

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

788-
canvas = minimapElement.getFrontCanvas()
788+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
789789
})
790790

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

829-
canvas = minimapElement.getFrontCanvas()
829+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
830830
})
831831

832832
it('scrolls the editor gradually to the line below the mouse', () => {
@@ -1128,7 +1128,7 @@ describe('MinimapElement', () => {
11281128

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

1131-
canvas = minimapElement.getFrontCanvas()
1131+
canvas = minimapElement.CanvasDrawer.getFrontCanvas()
11321132
mousedown(canvas)
11331133
})
11341134

@@ -1356,7 +1356,7 @@ describe('MinimapElement', () => {
13561356
})
13571357

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

13621362
it('offsets the minimap by the difference', () => {
@@ -1375,7 +1375,7 @@ describe('MinimapElement', () => {
13751375
})
13761376
runs(() => {
13771377
nextAnimationFrame()
1378-
expect(minimapElement.getFrontCanvas().width / devicePixelRatio).toEqual(4)
1378+
expect(minimapElement.CanvasDrawer.getFrontCanvas().width / devicePixelRatio).toEqual(4)
13791379
})
13801380
})
13811381
})
@@ -1693,7 +1693,7 @@ describe('MinimapElement', () => {
16931693
})
16941694

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

16991699
expect(realOffsetTop(quickSettingsElement)).toBeCloseTo(minimapBounds.top, 0)
@@ -1720,7 +1720,7 @@ describe('MinimapElement', () => {
17201720
})
17211721

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

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

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

17601760
it('positions the controls div over the canvas', () => {
17611761
const controlsRect = controls.getBoundingClientRect()
1762-
const canvasRect = minimapElement.getFrontCanvas().getBoundingClientRect()
1762+
const canvasRect = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
17631763
expect(controlsRect.left).toEqual(canvasRect.left)
17641764
expect(controlsRect.right).toEqual(canvasRect.right)
17651765
})
@@ -1770,12 +1770,12 @@ describe('MinimapElement', () => {
17701770
})
17711771

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

17761776
it('positions the controls div over the canvas', () => {
17771777
const controlsRect = controls.getBoundingClientRect()
1778-
const canvasRect = minimapElement.getFrontCanvas().getBoundingClientRect()
1778+
const canvasRect = minimapElement.CanvasDrawer.getFrontCanvas().getBoundingClientRect()
17791779
expect(controlsRect.left).toEqual(canvasRect.left)
17801780
expect(controlsRect.right).toEqual(canvasRect.right)
17811781
})
@@ -1796,7 +1796,7 @@ describe('MinimapElement', () => {
17961796
})
17971797

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

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

0 commit comments

Comments
 (0)