Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Possible Issue with context menu as well as keyboard shortcuts on a "custom" canvas.

    My version is v10.1p_2015-12-18/Enterprise Deployment (built 2015-12-18).

    I'm using:
    - IE 11.0.96
    - Chrome Version 49.0.2623.110 m
    - Safari Version 9.0.3 (11601.4.4)

    I have a canvas subclass to wrap a third party text editor, called Ace.

    It works perfectly in Chrome, Firefox, and Safari, however, in IE, copy/paste keyboard shortcuts, as well as the context menu for copy/paste, is *not* working/getting called.

    Attached is a stripped down test-case.

    Please advise if I need to provide additional data or tests.

    Mitch.

    <!DOCTYPE html>
    <html style="overflow:hidden; height:100%;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Cognition Cockpit</title>

    <!-- editor script (added before SmartClient as per the DOM Integration & Third-party Components Guide) -->
    <script src="scripts/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

    <script src="scripts/jquery.min.js" type="text/javascript"></script>

    <script>var isomorphicDir="../Frameworks/isomorphic/";</script>
    <script>window.isc_useSimpleNames = false;</script>

    <script src = "../Frameworks/isomorphic/system/modules/ISC_Core.js" ></script>
    <script src = "../Frameworks/isomorphic/system/modules/ISC_Foundation.js" ></script>
    <script src = "../Frameworks/isomorphic/system/modules/ISC_Containers.js" ></script>
    <script src = "../Frameworks/isomorphic/system/modules/ISC_Grids.js" ></script>
    <script src = "../Frameworks/isomorphic/system/modules/ISC_Forms.js" ></script>
    <script src = "../Frameworks/isomorphic/system/modules/ISC_DataBinding.js" ></script>

    <!-- smart client custom scripts -->
    <script src="scripts/test.js"></script>

    </head>
    <body class="setRight" scroll="no" id="wholePage">
    <script>
    isc.Page.setAppImgDir( "[APP]../" );
    isc.setAutoDraw( false );
    // create the main page
    var MainApp = isc.CockpitIDEApp.create( {} );
    </script>
    </body>
    </html>

    Test and Ace Scripts:
    ==================
    test.js

    Since I can't give a zip file of the ace javascript, here is a link:[FONT=Arial][COLOR=#222222] [/COLOR][/FONT]https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict
    Tags: None
    #2
    You didn't actually say: have you tried testing ACE without SmartClient, and found the keyboard shortcuts working in IE11? Because it seems unlikely we'd be interfering here.

    Comment

      #3
      Sorry, I should have mentioned that. Yes, it does work properly in IE. See their site example and try context menu copy/paste as well as ctrl-c, ctrl-v: https://ace.c9.io/#nav=about

      Comment

        #4
        You can get this working by setting the canSelectText attribute to true on the canvas containing the third party editor HTML (the IDEEditor in your test case).
        It's not clear whether this is something we could handle better by default - we'll consider this offline and post again if we consider any framework changes to be appropriate.

        Regards
        Isomorphic Software

        Comment

          #5
          I have unfortunately encountered another issue with this custom canvas subclass using Ace.

          It again works perfectly with Chrome, Firefox, and Safari, however it fails in IE (tested on 10 and 11).
          It also works in IE without SmartClient (see https://ace.c9.io/#nav=about) and fails whether or not the canSelectText attribute is enabled.

          To reproduce:

          - Use the previously provided test files
          - Click in the editor and type Ma
          - Hit Ctrl-Space
          - Click on Namespace
          - Observe that it the dialog is dismissed and nothing is replaced in IE, all other browsers replace the text

          Please advise if I need to provide additional data or tests.

          Comment

            #6
            We're having trouble reproducing this one. We see the autoComplete pop up in the example on ace's site but aren't getting it on the attached test case (with both the referenced ace and jquery libs installed) on any browser.
            Can you verify that this is working as expected with the attached code (and nothing else) in Chrome / Firefox / Safari?

            Thanks
            Isomorphic Software

            Comment

              #7
              I appologize, please replace the IDEEditor draw function in test.js with the following and it should work:
              // Based on the DOM Integration & Third-party Components Guide,
              // override draw to set up the ace editor
              draw: function () {
              if (!this.readyToDraw()) return this;
              this.Super("draw", arguments);
              this.setSize();
              ace.require("ace/ext/language_tools");
              this.editor = ace.edit(this.getEditorID());
              this.editor.getSession().setMode("ace/mode/javascript");
              // enable autocompletion and snippets
              this.editor.setOptions({
              enableBasicAutocompletion: true
              });
              return this;
              },
              Last edited by mitch; 6 Jun 2016, 06:04.

              Comment

                #8
                Hi Mitch
                We're still having troubles here. We added the modified draw override as requested, and also added grabbed "ext-language_tools.js", and added <script src="ext-language_tools.js" type="text/javascript" charset="utf-8"></script> to the bootstrap to pick up the ext-language_tools.js file, and also added "mode-javascript.js" and "worker-javascript.js" to the filesystem as the console logged attempts to load these files.
                With these changes in place we *still* aren't seeing auto-complete options pop up when on Ctrl+Space

                We're probably missing some resources or config.
                Can you share the complete setup you have. IE: actual bootstrap file, actual test JS code, + the full required set of 3rd party JS files to get this result?

                It may be easiest to create a zip file of these resources and show it to us - if you can't upload it here, you can share it via support@isomorphic.com (be sure to reference this thread's URL)

                Thanks
                Isomorphic Software

                Comment

                  #9
                  I have attached the zip containing the required elements of the third party JS and test files. I believe the only remaining issue with the files I provided previously is that the z-index of the autocomplete popup had to be modified to 400000 to be visible in ext-language_tools.js. Sorry about the issues, please let me know if you need any additional information.

                  http://download.cognition.us/files/ietest.zip
                  http://download.cognition.us
                  Last edited by mitch; 7 Jun 2016, 05:10.

                  Comment

                    #10
                    Well - we spent some time on this trying to isolate where the framework could be interfering with their events, and finally realized that you can remove SmartClient entirely from the equation and still reproduce the problem.
                    Here's a very simple reworked version of the HTML file:

                    Code:
                    <!doctype html>
    <html style="overflow:hidden; height:100%;">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Cognition Cockpit</title>
            <!-- editor script (added before SmartClient as per the DOM Integration & Third-party Components Guide) -->
            <script src="scripts/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
            <script src="scripts/ace/src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
            
            <script src="scripts/jquery.min.js" type="text/javascript"></script>
                                            
        </head>
        <body class="setRight" id="wholePage">
            
            <div id="secondTest" style="position:absolute;left:400px;top:20px;width:500px;height:500px;border:1px solid red;">
            &nbsp;
            </div>
            <script>
            
                ace.require("ace/ext/language_tools");
                var editor = ace.edit("secondTest");
                editor.getSession().setMode("ace/mode/javascript");
                // enable autocompletion and snippets
                editor.setOptions({
                    enableBasicAutocompletion: true
                });            
            </script>
        </body>
</html>
                    This is essentially doing the same thing as the original test, except without loading SmartClient or embedding the editor in a Canvas - and it demonstrates the same behavior in Internet Explorer.

                    For what its worth - the problem appears to be that when you mousedown on the auto-complete menu, a blur event triggers the ace logic to hide the pop-up -- but we don't haven't investigated beyond that.

                    If you get different results from us, please let us know and we'll take another look

                    Thanks
                    Isomorphic Software

                    Comment

                      #11
                      Thank you for taking a look, we were able to resolve the issue by modifying ACE's library to deal with the click event on mousedown rather than click to avoid it closing the popup first.

                      Comment

                      Previous template Next
                      Working...
                      X