Hello. There are a few problems with ZIM 018. Because ZIM 017 did not have these problems. 1. Tap does not work on mobile. It clicks directly. There are buttons that I slide inside the window. There is no problem with ZIM 017. There is a problem with ZIM 018. Maybe this situation is caused by a change in window. Because the 2nd problem. The situation is related to window. I will show the 2nd problem with a video.
The first window list is with ZIM 018 and the second is with ZIM 017. The window list with ZIM 018 is behaving strangely.
Maybe it's due to a change in List.
When I made a detailed review and comparison, the ZIM.tap function works very well on mobile devices in ZIM 016 version. It does not work on mobile devices in ZIM 017 and ZIM 018. I updated the ZIM 018 function as follows. It worked very well. But I do not know if it will cause other problems. Could you please review it? Also, with the new change, ZIM.Tile creates a bad image at the end of the list in ZIM.Window. Could you review it too?
zim.tap = function(obj, call, distance, time, once, dbl, dblTime, call2, call3, call4, cursor) {
var sig = "obj, call, distance, time, once, dbl, dblTime, call2, call3, call4, cursor";
var duo; if (duo = zob(zim.tap, arguments, sig)) return duo;
z_d("47.8");
if (zot(obj) || zot(call) || typeof call != "function") return;
if (zot(distance)) distance = zim.handCursor ? (dbl ? 100 : 50) : (dbl ? 10 : 5);
var timeType = getTIME(time);
if (zot(time)) time = timeType == "s" ? 8 : 8000;
if (zot(once)) once = false;
if (zot(dbl)) dbl = false;
if (zot(dblTime)) {
dblTime = timeType == "s" ? (call4 ? 0.5 : 1) : (call4 ? 500 : 1000);
}
if (zot(cursor)) cursor = "pointer";
if (cursor !== false) obj.cur(cursor);
var firstTap = false;
var doubleCheck = false;
var firstUp;
if (dbl) {
obj.zimDblClickDownEvent = obj.on("mousedown", function(e) {
firstUp = false;
if (firstTap) { firstTap = false; return; }
firstTap = true;
if (e.currentTarget.type == "List") {
if (e.target.type == "WindowBacking") return;
var local = e.currentTarget.globalToLocal(e.stageX / zim.scaX, e.stageY / zim.scaY);
if (local.y <= 0) return;
}
var lastX = e.stageX / zim.scaX;
var lastY = e.stageY / zim.scaY;
var startTime = Date.now();
var upStageX, upStageY;
doubleCheck = true;
if (obj.zimDoubleTimeout) clearTimeout(obj.zimDoubleTimeout);
obj.zimDoubleTimeout = setTimeout(function() {
doubleCheck = false;
firstTap = false;
if (obj.zimDblClickUpEvent) obj.off("pressup", obj.zimDblClickUpEvent);
if (firstUp && call4) {
if (Math.abs(lastX + lastY - upStageX / zim.scaX - upStageY / zim.scaY) < distance) {
if (obj.excludeTap) return;
call4(e);
} else if (call2) call2(e);
}
}, timeType == "s" ? dblTime * 1000 : dblTime);
obj.zimDblClickUpEvent = obj.on("pressup", function(e) {
upStageX = e.stageX;
upStageY = e.stageY;
firstUp = true;
if (firstTap) {
if (call3) call3(e);
return;
} else if (!doubleCheck) return;
if (Math.abs(lastX + lastY - e.stageX / zim.scaX - e.stageY / zim.scaY) < distance &&
Date.now() - startTime < (timeType == "s" ? time * 1000 : time)) {
if (obj.excludeTap) return;
clearTimeout(obj.zimDoubleTimeout);
call(e);
if (once) {
obj.off("mousedown", obj.zimDblClickDownEvent);
obj.zimDblClickDownEvent = null;
if (obj.cursor) obj.cur("default");
}
} else if (call2) call2(e);
e.remove();
});
});
} else {
obj.zimClickDownEvent = obj.on("mousedown", function(e) {
if (e.currentTarget.type == "List") {
if (e.target.type == "WindowBacking") return;
var local = e.currentTarget.globalToLocal(e.stageX / zim.scaX, e.stageY / zim.scaY);
if (local.y <= 0) return;
}
var lastX = e.stageX / zim.scaX;
var lastY = e.stageY / zim.scaY;
var startTime = Date.now();
obj.zimClickUpEvent = obj.on("pressup", function(e) {
if (Math.abs(lastX - e.stageX / zim.scaX) < distance &&
Math.abs(lastY - e.stageY / zim.scaY) < distance &&
Date.now() - startTime < (timeType == "s" ? time * 1000 : time)) {
if (obj.excludeTap) return;
call(e);
if (once) {
obj.off("mousedown", obj.zimClickDownEvent);
obj.zimClickDownEvent = null;
if (obj.cursor) obj.cur("default");
}
} else if (call2) call2(e);
e.remove();
});
});
}
return obj;
};
ZIM tap() has been changed to act by default like a mousedown on mobile. You can set tap() to not act like a mousedown by setting the new mobileUp parameter to true. That will allow it to work as expected to drag things in a Window for instance. We have set that to true by default for things in a List - but not a Window - I suppose, we could set it to default to true in a Window as well... as the usual use of a Window would be so we can scroll. Okay... that sounds good - will do some testing and let you know if we change it.
Will check on the window issue now.
We took a look, and the window scroll at the end seems good for us - check it out here and see if there is something different about yours.
https://zimjs.com/test9/window.html
Note that we have forced mobile. And we have adjusted ZIM 018 to automatically set mobileUp:true for tap() if inside a Window.
M = true; // force mobile true for this demonstration
const w = new Window({padding:10}).center();
const t = new Tile(new Circle(40,red), 3, 10, 10, 10).tap(e=>{
e.target.alp(.5);
S.update();
});
w.add(t);
M=false When I set it to , the tap problem was solved. The interesting thing is that M=true works in your example. If I set it to M=true, tap does not work with both touch and mouse. My problem continues at the Window end with Tile. It does not work with Tile in ZIM016.
When set to unique:false, the stretching is fine. I think there is a problem when it is unique:true. But I need to set it to unique:true.
Do not set M for production. We just did it to test mobile on the desktop. Make sure you clear your cache fully. It works fine for us.
Does our Tile example behave properly when dragged? And is this on Desktop and Mobile - or just mobile? We have made a second example with unique to true and it works for us. https://zimjs.com/test9/window2.html
const w = new Window({padding:10}).center();
const parts = [new Circle(), new Rectangle(), new Button(), new Rectangle(), new Button(), new Triangle()];
const t = new Tile(parts, 1,6, 0,20, true).tap(e=>{
e.target.alp(.5);
S.update();
});
w.add(t);
Ah... maybe you have the wrong row number? We may have made the size of the Tile be based items - whereas before perhaps not... I can't remember as we did change around some Tile things. [EDIT - we just checked using a wrong row number and it still works]
const tile = new Tile(listeMenuEleman, 5, listeMenuEleman.length, 30, 30, true);
const window = new Window({
backgroundColor:"rgba(0,0,0,.005)",
borderWidth:3,
corner:5,
borderColor: "rgba(0,0,0,.1)",
width: tile.width + 70,
//width: 800,
height: 550,
scrollBarDrag: true,
padding: 30,
scrollWheel:false,
});
stage.addChild(window)
window.x=1440/2-window.width/2
window.y=200
window.scrollBar.alpha = 1;
window.scrollBar.color = white;
window.scrollBar.size = 15;
window.resize();
window.add(tile);
This is my code. I don't know if there are any errors.
seems pretty good. You have 5 columns but in your video there are 4 columns. Probably does not matter. What you could try is simplify, do some testing to see what about your tile is breaking ZIM 018. Or send us all the code and we can test. It seems to be working fine on our simple tests.
MenuButonExtend=class MenuButonExtend extends Container {
constructor(options={}) {
super();
this.genislik=options.width||200;
this.yukseklik=options.height||150
this.color=options.color||"#d9f4cb"
this.kenarlikColor=options.kenarlikColor||"#fefefe"
this.metin=options.metin||null
this.resim=options.resim||null
this.link=options.link||null
this.butonKatmanAlt=new Rectangle(this.genislik,this.yukseklik,this.color,this.kenarlikColor,15,5)
this.butonKatmanGolge=new Rectangle(this.genislik,this.yukseklik,"#000","#000",1,5)
this.butonKatmanGolge.alpha=.5
this.butonKatmanGolge.x=-2
this.butonKatmanGolge.y=2
this.butonKatmanUst=new Rectangle(this.genislik,this.yukseklik,this.color,this.kenarlikColor,0,5)
if(this.resim!=null){
this.resimSprite=new asset(this.resim)
this.resimSprite.center(this.butonKatmanUst)
}
if(this.metin!=null){
this.yazı = new Label({ text: this.metin, size: 25, font: "Arial", color: black, align: "center" })
this.yazı.labelWidth = this.butonKatmanAlt.width - 5
this.yazı.center(this.butonKatmanUst)
}
// this.tap(e => {
// window.open(this.link, "_self")
// })
M=false
this.tap({call:funLinkCagirma,mobileUp:true})
var _this=this
function funLinkCagirma(e){
console.log("martin")
window.open(_this.link, "_self")
}
// this.on("click",function(){
// window.open(this.link,"_self")
// })
this.addChild(this.butonKatmanAlt,this.butonKatmanGolge,this.butonKatmanUst)
}
}
I have a class like this. To create menu buttons.
var basketAtma=new MenuButonExtend({
color:"#5DADE2",
//metin:"Şut Çekme Futbol Oyunu",
resim:"resimler/matematikMenuResimler/basketAtma.png",
link:"../basketAtma/index.html",
})
In this example, would you try entering a value of 4 or greater instead of the initial value of 1?
const t = new Tile(parts, 4,6, 0,20, true).tap(e=>{
e.target.alp(.5);
S.update();
});
w.add(t);
Ah... that is what it is. If you outline() the tile (not in the window) you get this:
In 017 it did not look like this - it collapsed to the only the elements:
Okay - we will see why it no longer collapses. We did do work on setting out dimensions for items to properly align items. We must have done this for every row and column - and here... we have extra rows and columns.
Will have to look this afternoon - so 4 or 5 hours from now...
1 Like
Ok thank you. Right now I'm temporarily adding it to the container with for and then adding it to the window. Of course it's more practical with tile.
Ah... solved it. In ZIM 018 we added up the spacing for the rows, which in the window 2 example is 8 rows-1 which is 7 spacings. But the count cut off the rows at just 2. So with a spacingH of 20 that is an extra (7-2)*20 = 100 pixels on the height. We have to figure the actual rows used by count and do the spacing calculations for that. So working through that and will patch and let you know.
ooo - it was a simple little fix:
for (i=0; i<((count && Math.ceil(count/cols)<rows)?Math.ceil(count/cols)-1:rows-1); i++) {
probably should move that out of the loop and into a variable before the loop so it does not calculate it each time...
Okay - that has been patched in ZIM 018. Thanks! Do a refresh.