How to set a "onClick" event of custom zoom control?

[fu6...@gmail.com]

Hi Beka,

I added two custom zoom controls. Where can I set the "onClick" events. Thank you.

//Blockly.mainWorkspace.undo(true);

Blockly.ZoomControls.prototype.createZoomNextSvg_=function(a){

this.zoomNextGroup_=Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.G,{"class":"blocklyZoom"},this.svgGroup_);

var b=Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.CLIPPATH,{id:"blocklyZoomnextClipPath"+a},this.zoomNextGroup_);

Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.RECT,{width:32,height:32},b);

Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.IMAGE,{width:Blockly.SPRITE.width,height:Blockly.SPRITE.height,x:-128,y:-92,"clip-path":"url(#blocklyZoomnextClipPath"+a+")"},this.zoomNextGroup_)

.setAttributeNS(Blockly.utils.dom.XLINK_NS,"xlink:href",this.workspace_.options.pathToMedia+Blockly.SPRITE.url);

this.onZoomNextWrapper_=Blockly.browserEvents.conditionalBind(this.zoomNextGroup_,"mousedown",null,this.zoom_.bind(this,-1))

};


//Blockly.mainWorkspace.undo(false);

Blockly.ZoomControls.prototype.createZoomPreviousSvg_=function(a){

this.zoomPreviousGroup_=Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.G,{"class":"blocklyZoom"},this.svgGroup_);

var b=Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.CLIPPATH,{id:"blocklyZoompreviousClipPath"+a},this.zoomPreviousGroup_);

Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.RECT,{width:32,height:32},b);

Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.IMAGE,{width:Blockly.SPRITE.width,height:Blockly.SPRITE.height,x:-96,y:-92,"clip-path":"url(#blocklyZoompreviousClipPath"+a+")"},this.zoomPreviousGroup_)

.setAttributeNS(Blockly.utils.dom.XLINK_NS,"xlink:href",this.workspace_.options.pathToMedia+Blockly.SPRITE.url);

this.onZoomPreviousWrapper_=Blockly.browserEvents.conditionalBind(this.zoomPreviousGroup_,"mousedown",null,this.zoom_.bind(this,-1))

};

[Beka Westberg]

Hello,

It looks to me like you're already binding your events =)

```

this.onZoomNextWrapper_ = Blockly.browserEvents.conditionalBind(this.zoomNextGroup_, "mousedown", null, this.zoom_.bind(this,-1));

// etc...

this.onZoomPreviousWrapper_ = Blockly.browserEvents.conditionalBind(this.zoomPreviousGroup_, "mousedown", null, this.zoom_.bind(this,-1));

```

If you want to change what function the events call, you can change the last parameter to the conditionalBind function:

```

// Change the code highlighted in yellow

this.onZoomPreviousWrapper_ = Blockly.browserEvents.conditionalBind(this.zoomPreviousGroup_, "mousedown", null, this.zoom_.bind(this,-1));

```

Or if you want to change the event from "mousedown" to "click":

```

// Change the code highlighted in yellow

this.onZoomPreviousWrapper_ = Blockly.browserEvents.conditionalBind(this.zoomPreviousGroup_, "mousedown", null, this.zoom_.bind(this,-1));

```

I hope that helps! If you have any further questions please reply =)

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/cb56c788-a879-47c0-bc0a-3a7a6bf6aea5n%40googlegroups.com.

[fu6...@gmail.com]

I am Sorry. My English is not good. I want to write the "mousedown" function for my custom zoom control as below. I don't know how to do it.

ZoomPrevious.mousedown = function(e) {

    Blockly.mainWorkspace.undo(false);

}

ZoomNext.mousedown = function(e) {

    Blockly.mainWorkspace.undo(true);

}

bwes...@google.com 在 2021年8月24日 星期二上午6:48:19 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

I did it.

Blockly.ZoomControls.prototype.createZoomNextSvg_=function(a){

// etc...

this.onZoomNextWrapper_=Blockly.browserEvents.conditionalBind(this.zoomNextGroup_,"mousedown",null,this.next_.bind(this))

};

Blockly.ZoomControls.prototype.createZoomPreviousSvg_=function(a){

        // etc...

this.onZoomPreviousWrapper_=Blockly.browserEvents.conditionalBind(this.zoomPreviousGroup_,"mousedown",null,this.previous_.bind(this))

};

Blockly.ZoomControls.prototype.previous_=function(a){Blockly.mainWorkspace.undo(false);};

Blockly.ZoomControls.prototype.next_=function(a){ Blockly.mainWorkspace.undo(true);};

[Beka Westberg]

Yay I'm glad you got it working! Thank you for sharing your completed code =) That is always very helpful for future people who run into the same problem!

Best wishes,

Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/627a9603-8289-4932-8813-be984e3fefe2n%40googlegroups.com.