On Windows, I can create a Webdialog in my extension with an <a href="./path/to/component.skp"> tag. I can drag-n-drop this tag from the Webdialog to the model and it will import the .skp file. This will import a locally stored .skp file from my extension folder.
However, that does not work on Mac. I believe it has something to do with how Mac windows need to be clicked in order to activate. Does anyone know of a way to create such a drag and drop icon for Mac?
Thanks.
can you make a gif of it working on Windows…
there are a couple of new tricks i’ve been testing that may get around the focus issue, but I’ve never attempted to drag’n’drop anything into SU except from Finder…
I suspect you’ll need to use the icon/anchor to send an import command to SU, so the skp is attached to the mouse when you leave the dialog…
edit: here’s a little test…
john
The comparison is unfair. Drag and drop has long been built into the Windows API. I believe that the SketchUp Installer for Windows registers several drag-and-drop file handlers for SketchUp associated file extensions. (ie, SKP, SKB, SKM, etc.) Also standard image files of various extensions can be drag-and-dropped into SketchUp.
The Ruby code here …
wd = UI::WebDialog.new('Drag and Drop',true,'test',800,600,100,200,true)
#>> #<UI::WebDialog:0x0000000ab98f98>
wd.set_url('file:///C:/Users/Dan/Documents/SketchUp/SketchUp 2015/Models')
wd.show
… produces the following nice scrollable / sortable (by clicking column headers) / sizable (by dragging column header margins), etc. (No Javascript / No framework needed. MSIE knows how to display FTP directories, and it does not care if they are local directories.)
I can grab any of the SKP items and drop them into the model. Also can grab the PNG image and drop that into SketchUp as an image component.
(I can also do normal things we can do in the normal file explorer window, such as rename files, delete them, etc. “Open With…” via the right-click menu. Etc.)
EDIT:
Actually SketchUp drag and drop handler is smart enough not to allow us to drop the last autosave of a file into itself. (But it allows dropping all the previous autosaves.)
To answer the question, when you begin dragging on Windows, a thumbnail image appears under the system arrow cursor, as soon as you drag out of the window, a window drag message is sent to the window behind the cursor (so those windows / applications can respond to the dragged object.) When you move over the SketchUp client (modeling) window, (the thumbnail image disappears,) and the cursor changes to the MoveTool cursor (temporarily whilst the component is being loaded into the definition list collection,) then when it is ready, the cursor changes to the place component cursor and component instance is attached to the cursor ready for “dropping” (which is actually a place component operation.) Once placed, the instance is left “select highlighted”.
ADD: So yea, it looks almost the same as your “test_selector” item (in the gif above.) Except that yours leaves the MoveTool cursor active all the way through to placement. I don’t think that is a big deal. The cursor change might just be a quirk of the drop handler’s implementation.
EDIT(2): BTW, I do not see this component place cursor in the images folder. It is white left facing arrow cursor with a dashed box in the lower right. (Maybe it did not get SVG’ed last cycle?)
cheers for that explanation @DanRathbun, I had no idea Windows could do that…
on a mac you’d use model.import with UI.openpanel and a click select even though drag’n’drop works from there…
I assumed the OP meant something like the Component Browser in a dlg… [ as he uses <a href=]
a better example of that would be with an image button on a mac…
we’ll never know unless @swishstar returns…
john
Yes, I agree, that is likely what he has done. And perhaps MSIE on Windows can automatically use the thumbnail images within the SKP files, using the same thumbnail handler (“ThumbsUp.dll”) that the file explorer uses.
Hi John and Dan. Thanks for the quick answers. I’m sorry but I am out of
the office today or I’d respond more. I will get you the screencast of
what I was talking about. But yes , I am implementing something like the
component browser in a dialogue.
STEVE
(I’m mobile. Sorry for short answers)
Hi guys. I’m back. Sorry again for not being available to clarify. So yes, I am creating an html page in my extension. I’m opening that page with the webdialog. In that html, I have a few anchor tags with an href using a relative path to some models I’m shipping with the extension.
On Windows, with the webdialog active, I can drag that anchor (which does happen to have a static jpg as a background-image) to the model and it will import the skp component. See animation below:
However, on Mac, the anchor gets dragged and only the text path of the href tries to drop onto the model. See animation below:
@john_drivenupthewall: I’d be interested to see how you did your animation example. It looks exactly like what I was trying to do. You said you used a button and did that kick off the model.import? I missed what you were trying to say there.
Thanks again!
I’m still trying to get the User experience worked out, before I want to share the code openly…
basically a button onClick event, sends an action callback to import the skp…
on a mac this ‘normally’ takes three Clicks or a Cmd Click, but varies depending on the dialogs focus…
if not Focused:
the first click focuses the dlg, the second clicks the button and the third focuses the viewport, and in this case, that would place the component blindly…
A CmdClick however will do exactly what we want and the comp will be attached to the cursor…
if Focused:
it becomes a two click operation, with the same bad outcome…
CmdClick works like two clicks i.e. badly…
over at SCF dev forum we’ve been looking for a better option for at least six years…
this is my latest stab at it…
the ideal for the changing of the SU cursor is to never hold focus on the dlg…
I use a combination of ‘vanilla’ javascript and ruby to manipulate the ‘focus’ between the dialog and the SU viewport…
the ‘trick’ will hinder the use of many other ‘expected’ events like tooltips, focus rings, but some may be possible by other means…
e.g. in this gif, I take advantage on osx’s ability to scroll an ‘out of focus’ window…
With your dialog it looks like your using a jQuery image gallery, that would need focus to work and may impede how this works…
I personally I’m not a fan of js libraries for most webDialogs…
Is your Extension Commercial?
john
If there was / is equivalent drag events and handlers for WebKit like those non-standard ones for MSIE (things would be simpler.)
@swishstar or @Barry,
occasionally when testing this code I get a sudden death BugSplat Crash Report #23231 and was wondering if the report shed any light on why?
there doesn’t seem to be a pattern, although it’s never on the first couple…
john
@john_drivenupthewall: Thanks for the overview of what you’re working on. Yeah, I can see where the onclick could be used to model.import the component and I can now see the clicks in your animation. As you know, I was hoping to imitate the drag-n-drop feel (i.e. single click and drag then let go). I did a little more experimenting with dragging from Finder, and I can see that even from there, there is not a preview of the component until you release the mouse.
Therefore, I’m assuming the closest I can come to imitating a “windows-like drag-n-drop behavior” on a Mac is to imitate the drag-n-drop behavior from Finder. The closest I can come to that is attached. It is simply an “ondragstart()” event (for Mac only) that will call Ruby to model.import the model. And similar to Finder, you have to release the mouse in SketchUp before it will give you the component. Note: for Windows users, I leave the native (non-standard) drag-n-drop behavior of the anchor tag.
There are 3 differences between dragging from Finder and dragging from this WebDialog:
The last two are also minor differences from the Finder example (IMHO) but still kind of rough in the UX department. While they’re still not ideal, that’s the closest I could come so far.
And to answer your question: yes, this is a commercial product, but I can share at least this much with everyone as this is standard stuff.
@DanRathbun: BTW: thanks for all your answers too. You had some great technical tips that, when combined with John’s got me at least this far.
And note to all: my goal was to imitate the drag-n-drop behavior, but I’m thinking that I may go with @john_drivenupthewall’s approach of doing a (click, reposition cursor, click again to drop the component) approach. I just have to teach the end users that method instead of what they requested.
However… if anyone can get me closer to true/forced drag-n-drop behavior, that would be awesome!
c3d_dragndrop_test.zip (1.2 MB)
STEVE
@Barry and @john_drivenupthewall: BTW, I also got Splats whenever I used “ondrag()” instead of “ondragstart” or “ondragend”. I think it was because the ondrag constantly updates, while the last 2 update only once, therefore sending the command off to Ruby only once. I don’t know what John was working on, but I thought I’d mention it.
STEVE
some of the clicks in the gifs are just me and gifs…
I PM a test script so you can evaluate what really happens…
john
