First of all drag and drop works correctly in my stages in version 4.3.0, so I just want to understand why I get the following problem with 4.3.3.
I have three stages. One sits in a container in a document in an iframe. The others sit in containers in the iframe's parent document, one displaying a complex layout of shapes and the other a single simple shape for testing. The document in the iframe which controls all the action has a viewfinder overlay that drags and drops correctly. However the shapes in the layout and test stages do not release on mouseup.
Any idea about what's going on would be appreciated ... I like to try and keep up to date.
Well, since I can't see any of your code I can only help so much, try doing the following.
For each shape that you have, add this attribute:
dragOnTop: false
example:
Kinetic.Rect({
fill: 'blue',
dragOnTop: false
});
Let me explain how I found an answer by first amending the structure. There is a holding file which contains shared files and two iframes - one for a machine-like index and one for a display each with its own scripts. The main shared file is nameset.json which lists all the objects and their key/value couplets. These are sent to 'fill out' the machine and display frameworks. I thought I could do the same with the Kinetic Global object, referring to the Global.stages array. It seems obvious now that each of the iframes needs its own Kinetic link (rather than pointer) and these need to be used to marry machine/display interactions like the map shown here. Anyway all the dragging and dropping works smoothly as promoted. Thanks for that!
Will mark as answered but if anyone has any comments would be pleased to read them.
Related
I have 3 different GUI containers/sections, one for showing resources, one for building, and one for inventory. Clicking anything in the resource and building sections works completely fine, the mouse is where it needs to be and clicking/hovering over a button will actually click/hover over the button.
The problem is only in the inventory GUI. I'm not sure how it's any different, so I don't know what I need to provide here for anyone to help me out, so please ask me for any extra info if you need it in the comments. I'm not sure if this is an issue with the code or the UI elements, or whatever else it might be. I'm going to provide some examples of this happening, though.
Here is a gif of what it looks like in the inventory (ignore the items not doing what they are supposed to): https://s3.gifyu.com/images/ezgif.com-gif-maker-37b00e5b2a1c164b2.gif
Here is a gift of me just hovering/clicking around in the inventory: https://s3.gifyu.com/images/ezgif.com-gif-maker97b27b8783d784c6.gif
Here is a gif of this working in the "Building" section: https://s9.gifyu.com/images/ezgif.com-gif-maker-287d7a9723f9db2b1.gif
Here is a gif of this working in the "Resources" section: https://s3.gifyu.com/images/ezgif.com-gif-maker-18662e4229ebd27a2.gif
Here are some images that might be useful. Here is the layout:
There is no difference when I select, for example, Building and Inventory. Here is a comparison:
I have looked around on Google for about 30 minutes, but I couldn't find anything related to this.
I have found the issue. The issue was with the slot prefab that was in the inventory screen, as it had text that was way bigger than it was: https://prnt.sc/uDRXz2Kr4kQr
I initially hadn't noticed this as simply clicking on the prefab itself shows that it's the right size: https://prnt.sc/BXQqAzMD-kWX
Resizing the text seems to fix the issue.
As seen in the attached video clip, I can move the items in container A to B without any problem. But if the speed of my drag increase, the list in the over container starts to behave abnormally. I tried the example multi container story but didn't capture this type of behavior.
Once the list items start to jump all over the place, if click on an item, it immediately switch place with another one, as the argument {over} is now not itself even in dragStart.
Sandbox: https://codesandbox.io/s/eloquent-kirch-t9r13j?file=/Dnd.js
Video: https://user-images.githubusercontent.com/83575213/170879626-de413f22-1236-4128-baec-c95363e61b47.mp4
Really appreciate any helps. Cheers
Apparently it was the issue from the dnd-kit library at version 6.0.6 or lower.
However this issue has been fixed in v6.0.7, you can see the PR here: https://github.com/clauderic/dnd-kit/pull/788
I had the same issue, it was the problem with arrays not updating after drag end. Dnd navigates by keys and it looks like there are more than 1 element with the same key in one array, that's why it is grabbing 2 elements at ones.
When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?
In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?
That's a nice question there. And yeah, for sure the server would fill up with unused images in some point. I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha. I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit. For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use.
I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.
First time here, I hope I'm doing it right and I hope I'm allowed to ask this here.
I'm making buffer layers out of points in QGIS 3.8.1 Zanzibar, it's 5 point layers and I need to generate the 5 corresponding buffers. They come out alright, but after I load a previously saved style for the layers the geometries simply disappear.
I have:
Ticked layer off and on, still gone.
Deactivated any other layer and make sure it's not hidden behind something else.
Zoomed to layer, not the problem, it zooms where they should be, they're just not visible
Checked for SRC, it's all good, all of them are the same.
Open attribute table, all the data is there and it's correct.
Left click on layer/layer visibility and made sure it is unchecked as it should, I also tried checking it to no avail.
Made the layers all over again, same result.
Went to Properties/Source/Query Builder and wrote this (I saw this in a vid where it worked):
"FIELD" LIKE "FIELD"
Where "FIELD" is a field of my attribute table, tested it correctly and applied...didn't work either.
Just one seemed to come out alright before doing all this, but I followed the exact same procedure for all of them.
Any ideas? Do I have to re-do the style all over again manually for every layer?
Thanks in advance!
I just found out what was wrong, I hope this helps someone in the future:
The style I saved was classifying data based on a particular column, wich of course, must exist and have the exact same name in the other layers in order to work. I just forgot to generate said column on the rest of the layers.
Cheers and thanks to the editor.
I'd like to create a twitter like stream out of a sap.m.list, hence when I get more data with a pulltorefresh control, I'd like to update the list with the additional rows, but should not move the list at all, and be hidden until the user scrolls the list down.
Any standard ways of doing this, or alternatively, custom CSS/JS recommended ways of doing this?
Thanks,
Matt
There's no need to drop down to jQuery here as OpenUI5 already contains the awesome iScroll library.
I've just setup a test app for you to have a look at here: https://github.com/js1972/ui5_pull_to_refresh.
Clone this; check the readme; then just run grunt serve to open the app in your default browser. You can use Chrome dev tools to emulate an iphone or android, etc.
I think this does what you're after - it works just like the GMail mobile app. You pull down to refresh items and at the end of the refresh your still looking at the same items but can now scroll up to see the new ones.
Will be interesting to see the performance if you have a thousand items... iScroll gives you allot of settings to play that may help (which aren't discussed in the UI5 SDK).
One thing to be careful of with browser scrolling is paint times. If the browser is not 100% done painting then iScroll can't calculate all the element dimensions it needs and you get strange results - typically just no scrolling. Sometimes you've just got to give a little time back to the browser by wrapping things in setTimeout(scroll_stuff, 0).
Hope this helps...
While not quite the answer I was after, looked into doing it another way, and provided you can work with automatically generated Id's that you'll need to calculate based on the row number, the following is one brute force way of doing it (I've borrowed it from another SO question and kept the animation for fun - Referenced SO Link):
var pOffset = $("#__item0-App--Main--MyList-76").position().top;
$("#App--Main--myPage-cont").animate({scrollTop: ( pOffset)}, 800);