mirror of
https://github.com/google/blockly.git
synced 2026-01-07 00:50:27 +01:00
Merge pull request #1828 from rachel-fenichel/feature/zoom_control_decomp
Decompose some functions for creating zoom controls SVG
This commit is contained in:
Rachel Fenichel
GitHub
@@ -93,106 +93,16 @@ Blockly.ZoomControls.prototype.top_ = 0;
|
||||
* @return {!Element} The zoom controls SVG group.
|
||||
*/
|
||||
Blockly.ZoomControls.prototype.createDom = function() {
|
||||
var workspace = this.workspace_;
|
||||
/* Here's the markup that will be generated:
|
||||
<g class="blocklyZoom">
|
||||
<clippath id="blocklyZoomoutClipPath837493">
|
||||
<rect width="32" height="32" y="77"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoomoutClipPath837493)"></image>
|
||||
<clippath id="blocklyZoominClipPath837493">
|
||||
<rect width="32" height="32" y="43"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoominClipPath837493)"></image>
|
||||
<clippath id="blocklyZoomresetClipPath837493">
|
||||
<rect width="32" height="32"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" y="-92" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoomresetClipPath837493)"></image>
|
||||
</g>
|
||||
*/
|
||||
this.svgGroup_ = Blockly.utils.createSvgElement('g',
|
||||
{'class': 'blocklyZoom'}, null);
|
||||
var clip;
|
||||
this.svgGroup_ =
|
||||
Blockly.utils.createSvgElement('g', {'class': 'blocklyZoom'}, null);
|
||||
|
||||
// Each filter/pattern needs a unique ID for the case of multiple Blockly
|
||||
// instances on a page. Browser behaviour becomes undefined otherwise.
|
||||
// https://neil.fraser.name/news/2015/11/01/
|
||||
var rnd = String(Math.random()).substring(2);
|
||||
|
||||
clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{'id': 'blocklyZoomoutClipPath' + rnd},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{'width': 32, 'height': 32, 'y': 77},
|
||||
clip);
|
||||
var zoomoutSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height, 'x': -64,
|
||||
'y': -15,
|
||||
'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
workspace.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{'id': 'blocklyZoominClipPath' + rnd},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{'width': 32, 'height': 32, 'y': 43},
|
||||
clip);
|
||||
var zoominSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height,
|
||||
'x': -32,
|
||||
'y': -49,
|
||||
'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
workspace.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{'id': 'blocklyZoomresetClipPath' + rnd},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{'width': 32, 'height': 32},
|
||||
clip);
|
||||
var zoomresetSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height, 'y': -92,
|
||||
'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
workspace.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
// Attach event listeners.
|
||||
Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
|
||||
workspace.markFocused();
|
||||
workspace.setScale(workspace.options.zoomOptions.startScale);
|
||||
workspace.scrollCenter();
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
Blockly.bindEventWithChecks_(zoominSvg, 'mousedown', null, function(e) {
|
||||
workspace.markFocused();
|
||||
workspace.zoomCenter(1);
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
Blockly.bindEventWithChecks_(zoomoutSvg, 'mousedown', null, function(e) {
|
||||
workspace.markFocused();
|
||||
workspace.zoomCenter(-1);
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
|
||||
this.createZoomOutSvg_(rnd);
|
||||
this.createZoomInSvg_(rnd);
|
||||
this.createZoomResetSvg_(rnd);
|
||||
return this.svgGroup_;
|
||||
};
|
||||
|
||||
@@ -251,3 +161,150 @@ Blockly.ZoomControls.prototype.position = function() {
|
||||
this.svgGroup_.setAttribute('transform',
|
||||
'translate(' + this.left_ + ',' + this.top_ + ')');
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the zoom in icon and its event handler.
|
||||
* @param {string} rnd The random string to use as a suffix in the clip path's
|
||||
* ID. These IDs must be unique in case there are multiple Blockly
|
||||
* instances on the same page.
|
||||
* @private
|
||||
*/
|
||||
Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) {
|
||||
/* This markup will be generated and added to the "blocklyZoom" group:
|
||||
<clippath id="blocklyZoomoutClipPath837493">
|
||||
<rect width="32" height="32" y="77"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoomoutClipPath837493)"></image>
|
||||
*/
|
||||
var ws = this.workspace_;
|
||||
var clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{
|
||||
'id': 'blocklyZoomoutClipPath' + rnd
|
||||
},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{
|
||||
'width': 32,
|
||||
'height': 32,
|
||||
'y': 77
|
||||
},
|
||||
clip);
|
||||
var zoomoutSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height, 'x': -64,
|
||||
'y': -15,
|
||||
'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
ws.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
// Attach listener.
|
||||
Blockly.bindEventWithChecks_(zoomoutSvg, 'mousedown', null, function(e) {
|
||||
ws.markFocused();
|
||||
ws.zoomCenter(-1);
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the zoom out icon and its event handler.
|
||||
* @param {string} rnd The random string to use as a suffix in the clip path's
|
||||
* ID. These IDs must be unique in case there are multiple Blockly
|
||||
* instances on the same page.
|
||||
* @private
|
||||
*/
|
||||
Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
|
||||
/* This markup will be generated and added to the "blocklyZoom" group:
|
||||
<clippath id="blocklyZoominClipPath837493">
|
||||
<rect width="32" height="32" y="43"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoominClipPath837493)"></image>
|
||||
*/
|
||||
var ws = this.workspace_;
|
||||
var clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{
|
||||
'id': 'blocklyZoominClipPath' + rnd
|
||||
},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{
|
||||
'width': 32,
|
||||
'height': 32,
|
||||
'y': 43
|
||||
},
|
||||
clip);
|
||||
var zoominSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height,
|
||||
'x': -32,
|
||||
'y': -49,
|
||||
'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
ws.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
// Attach listener.
|
||||
Blockly.bindEventWithChecks_(zoominSvg, 'mousedown', null, function(e) {
|
||||
ws.markFocused();
|
||||
ws.zoomCenter(1);
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the zoom reset icon and its event handler.
|
||||
* @param {string} rnd The random string to use as a suffix in the clip path's
|
||||
* ID. These IDs must be unique in case there are multiple Blockly
|
||||
* instances on the same page.
|
||||
* @private
|
||||
*/
|
||||
Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
|
||||
/* This markup will be generated and added to the "blocklyZoom" group:
|
||||
<clippath id="blocklyZoomresetClipPath837493">
|
||||
<rect width="32" height="32"></rect>
|
||||
</clippath>
|
||||
<image width="96" height="124" y="-92" xlink:href="media/sprites.png"
|
||||
clip-path="url(#blocklyZoomresetClipPath837493)"></image>
|
||||
*/
|
||||
var ws = this.workspace_;
|
||||
var clip = Blockly.utils.createSvgElement('clipPath',
|
||||
{
|
||||
'id': 'blocklyZoomresetClipPath' + rnd
|
||||
},
|
||||
this.svgGroup_);
|
||||
Blockly.utils.createSvgElement('rect',
|
||||
{
|
||||
'width': 32,
|
||||
'height': 32
|
||||
},
|
||||
clip);
|
||||
var zoomresetSvg = Blockly.utils.createSvgElement('image',
|
||||
{
|
||||
'width': Blockly.SPRITE.width,
|
||||
'height': Blockly.SPRITE.height, 'y': -92,
|
||||
'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'
|
||||
},
|
||||
this.svgGroup_);
|
||||
zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
|
||||
ws.options.pathToMedia + Blockly.SPRITE.url);
|
||||
|
||||
// Attach event listeners.
|
||||
Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
|
||||
ws.markFocused();
|
||||
ws.setScale(ws.options.zoomOptions.startScale);
|
||||
ws.scrollCenter();
|
||||
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
|
||||
e.stopPropagation(); // Don't start a workspace scroll.
|
||||
e.preventDefault(); // Stop double-clicking from selecting text.
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user