Skip to content

Commit fd95bb1

Browse files
thisandagainthisandagain
committed
WIP: New zoom controls
1 parent a4b0e2d commit fd95bb1

File tree

7 files changed

+111
-83
lines changed

7 files changed

+111
-83
lines changed

‎core/css.js

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -558,15 +558,7 @@ Blockly.Css.CONTENT = [
558558
'}',
559559

560560
'.blocklyZoom>image {',
561-
'opacity: .4;',
562-
'}',
563-
564-
'.blocklyZoom>image:hover {',
565-
'opacity: .6;',
566-
'}',
567-
568-
'.blocklyZoom>image:active {',
569-
'opacity: .8;',
561+
'opacity: 1;',
570562
'}',
571563

572564
/* Darken flyout scrollbars due to being on a grey background. */

‎core/options.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ Blockly.Options = function(options) {
5656
languageTree.getElementsByTagName('category').length);
5757
var hasTrashcan = options['trashcan'];
5858
if (hasTrashcan === undefined) {
59-
hasTrashcan = hasCategories;
59+
hasTrashcan = false;
6060
}
6161
var hasCollapse = options['collapse'];
6262
if (hasCollapse === undefined) {

‎core/zoom_controls.js

Lines changed: 104 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,27 @@ Blockly.ZoomControls = function(workspace) {
3939
this.workspace_ = workspace;
4040
};
4141

42+
/**
43+
* Zoom in icon path.
44+
* @type {string}
45+
* @private
46+
*/
47+
Blockly.ZoomControls.prototype.ZOOM_IN_PATH = 'zoom-in.svg';
48+
49+
/**
50+
* Zoom out icon path.
51+
* @type {string}
52+
* @private
53+
*/
54+
Blockly.ZoomControls.prototype.ZOOM_OUT_PATH = 'zoom-out.svg';
55+
56+
/**
57+
* Zoom reset icon path.
58+
* @type {string}
59+
* @private
60+
*/
61+
Blockly.ZoomControls.prototype.ZOOM_RESET_PATH = 'zoom-reset.svg';
62+
4263
/**
4364
* Width of the zoom controls.
4465
* @type {number}
@@ -51,7 +72,14 @@ Blockly.ZoomControls.prototype.WIDTH_ = 32;
5172
* @type {number}
5273
* @private
5374
*/
54-
Blockly.ZoomControls.prototype.HEIGHT_ = 110;
75+
Blockly.ZoomControls.prototype.HEIGHT_ = 112;
76+
77+
/**
78+
* Distance between each zoom control.
79+
* @type {number}
80+
* @private
81+
*/
82+
Blockly.ZoomControls.prototype.MARGIN_BETWEEN_ = 8;
5583

5684
/**
5785
* Distance between zoom controls and bottom edge of workspace.
@@ -95,92 +123,98 @@ Blockly.ZoomControls.prototype.top_ = 0;
95123
Blockly.ZoomControls.prototype.createDom = function() {
96124
var workspace = this.workspace_;
97125
/* Here's the markup that will be generated:
98-
<g class="blocklyZoom">
99-
<clippath id="blocklyZoomoutClipPath837493">
100-
<rect width="32" height="32" y="77"></rect>
101-
</clippath>
102-
<image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png"
103-
clip-path="url(#blocklyZoomoutClipPath837493)"></image>
104-
<clippath id="blocklyZoominClipPath837493">
105-
<rect width="32" height="32" y="43"></rect>
106-
</clippath>
107-
<image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png"
108-
clip-path="url(#blocklyZoominClipPath837493)"></image>
109-
<clippath id="blocklyZoomresetClipPath837493">
110-
<rect width="32" height="32"></rect>
111-
</clippath>
112-
<image width="96" height="124" y="-92" xlink:href="media/sprites.png"
113-
clip-path="url(#blocklyZoomresetClipPath837493)"></image>
126+
<g class="blocklyZoom" transform="translate(822,594)">
127+
<image width="32" height="32" y="0" xlink:href="../media/zoom-in.svg">
128+
</image>
129+
<image width="32" height="32" y="40" xlink:href="../media/zoom-out.svg">
130+
</image>
131+
<image width="32" height="32" y="80" xlink:href="../media/zoom-reset.svg">
132+
</image>
114133
</g>
115134
*/
116-
this.svgGroup_ = Blockly.utils.createSvgElement('g',
117-
{'class': 'blocklyZoom'}, null);
135+
this.svgGroup_ = Blockly.utils.createSvgElement(
136+
'g',
137+
{'class': 'blocklyZoom'},
138+
null
139+
);
118140
var rnd = String(Math.random()).substring(2);
119141

120-
var clip = Blockly.utils.createSvgElement('clipPath',
121-
{'id': 'blocklyZoomoutClipPath' + rnd},
122-
this.svgGroup_);
123-
Blockly.utils.createSvgElement('rect',
124-
{'width': 32, 'height': 32, 'y': 77},
125-
clip);
126-
var zoomoutSvg = Blockly.utils.createSvgElement('image',
127-
{'width': Blockly.SPRITE.width,
128-
'height': Blockly.SPRITE.height, 'x': -64,
129-
'y': -15,
130-
'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'},
131-
this.svgGroup_);
132-
zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
133-
workspace.options.pathToMedia + Blockly.SPRITE.url);
134-
135-
var clip = Blockly.utils.createSvgElement('clipPath',
136-
{'id': 'blocklyZoominClipPath' + rnd},
137-
this.svgGroup_);
138-
Blockly.utils.createSvgElement('rect',
139-
{'width': 32, 'height': 32, 'y': 43},
140-
clip);
141-
var zoominSvg = Blockly.utils.createSvgElement('image',
142-
{'width': Blockly.SPRITE.width,
143-
'height': Blockly.SPRITE.height,
144-
'x': -32,
145-
'y': -49,
146-
'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'},
147-
this.svgGroup_);
148-
zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
149-
workspace.options.pathToMedia + Blockly.SPRITE.url);
150-
151-
var clip = Blockly.utils.createSvgElement('clipPath',
152-
{'id': 'blocklyZoomresetClipPath' + rnd},
153-
this.svgGroup_);
154-
Blockly.utils.createSvgElement('rect',
155-
{'width': 32, 'height': 32},
156-
clip);
157-
var zoomresetSvg = Blockly.utils.createSvgElement('image',
158-
{'width': Blockly.SPRITE.width,
159-
'height': Blockly.SPRITE.height, 'y': -92,
160-
'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'},
161-
this.svgGroup_);
162-
zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
163-
workspace.options.pathToMedia + Blockly.SPRITE.url);
142+
/**
143+
* Zoom in control.
144+
* @type {SVGElement}
145+
*/
146+
var zoominSvg = Blockly.utils.createSvgElement(
147+
'image',
148+
{
149+
'width': this.WIDTH_,
150+
'height': this.WIDTH_,
151+
'y': 0
152+
},
153+
this.svgGroup_
154+
);
155+
zoominSvg.setAttributeNS(
156+
'http://www.w3.org/1999/xlink',
157+
'xlink:href',
158+
workspace.options.pathToMedia + this.ZOOM_IN_PATH
159+
);
160+
161+
/**
162+
* Zoom out control.
163+
* @type {SVGElement}
164+
*/
165+
var zoomoutSvg = Blockly.utils.createSvgElement(
166+
'image',
167+
{
168+
'width': this.WIDTH_,
169+
'height': this.WIDTH_,
170+
'y': (this.WIDTH_ * 1) + (this.MARGIN_BETWEEN_ * 1)
171+
},
172+
this.svgGroup_
173+
);
174+
zoomoutSvg.setAttributeNS(
175+
'http://www.w3.org/1999/xlink',
176+
'xlink:href',
177+
workspace.options.pathToMedia + this.ZOOM_OUT_PATH
178+
);
179+
180+
/**
181+
* Zoom reset control.
182+
* @type {SVGElement}
183+
*/
184+
var zoomresetSvg = Blockly.utils.createSvgElement(
185+
'image',
186+
{
187+
'width': this.WIDTH_,
188+
'height': this.WIDTH_,
189+
'y': (this.WIDTH_ * 2) + (this.MARGIN_BETWEEN_ * 2)
190+
},
191+
this.svgGroup_
192+
);
193+
zoomresetSvg.setAttributeNS(
194+
'http://www.w3.org/1999/xlink',
195+
'xlink:href',
196+
workspace.options.pathToMedia + this.ZOOM_RESET_PATH
197+
);
164198

165199
// Attach event listeners.
166-
Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
200+
Blockly.bindEventWithChecks_(zoominSvg, 'mousedown', null, function(e) {
167201
workspace.markFocused();
168-
workspace.setScale(workspace.options.zoomOptions.startScale);
169-
workspace.scrollCenter();
202+
workspace.zoomCenter(1);
170203
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
171204
e.stopPropagation(); // Don't start a workspace scroll.
172205
e.preventDefault(); // Stop double-clicking from selecting text.
173206
});
174-
Blockly.bindEventWithChecks_(zoominSvg, 'mousedown', null, function(e) {
207+
Blockly.bindEventWithChecks_(zoomoutSvg, 'mousedown', null, function(e) {
175208
workspace.markFocused();
176-
workspace.zoomCenter(1);
209+
workspace.zoomCenter(-1);
177210
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
178211
e.stopPropagation(); // Don't start a workspace scroll.
179212
e.preventDefault(); // Stop double-clicking from selecting text.
180213
});
181-
Blockly.bindEventWithChecks_(zoomoutSvg, 'mousedown', null, function(e) {
214+
Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
182215
workspace.markFocused();
183-
workspace.zoomCenter(-1);
216+
workspace.setScale(workspace.options.zoomOptions.startScale);
217+
workspace.scrollCenter();
184218
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
185219
e.stopPropagation(); // Don't start a workspace scroll.
186220
e.preventDefault(); // Stop double-clicking from selecting text.

‎media/zoom-in.svg

Lines changed: 1 addition & 0 deletions
Loading

‎media/zoom-out.svg

Lines changed: 1 addition & 0 deletions
Loading

‎media/zoom-reset.svg

Lines changed: 1 addition & 0 deletions
Loading

‎tests/vertical_playground.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
toolbox: toolbox,
7272
toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
7373
horizontalLayout: side == 'top' || side == 'bottom',
74-
trashcan: true,
7574
sounds: soundsEnabled,
7675
zoom: {
7776
controls: true,
@@ -92,7 +91,7 @@
9291
dragShadowOpacity: 0.6
9392
}
9493
});
95-
94+
9695
if (sessionStorage) {
9796
// Restore previously displayed text.
9897
var text = sessionStorage.getItem('textarea');
@@ -101,7 +100,7 @@
101100
}
102101
taChange();
103102
}
104-
103+
105104
if (sessionStorage) {
106105
// Restore event logging state.
107106
var state = sessionStorage.getItem('logEvents');

0 commit comments

Comments
 (0)