Source: singletons/workspace.js

  1. Syntree.config_maps.workspace = {};
  2. Syntree.config_maps.workspace.accept_unmapped_config = false;
  3. Syntree.config_maps.workspace.map = {
  4.     /**
  5.      * Is the tutorial enabled?
  6.      *
  7.      * @type {boolean}
  8.      *
  9.      * @see Syntree.Tutorial
  10.      *
  11.      * @memberof Syntree.Workspace
  12.      */
  13.     tutorial_enabled: {
  14.         require: 'boolean',
  15.         default_value: false,
  16.     },
  17.     /**
  18.      * Is uploading enabled?
  19.      *
  20.      * @type {boolean}
  21.      *
  22.      * @see Syntree.Tutorial
  23.      *
  24.      * @memberof Syntree.Workspace
  25.      */
  26.     upload_enabled: {
  27.         require: 'boolean',
  28.         default_value: true,
  29.     },
  30.     /**
  31.      * Path to a PHP script for exporting a tree.
  32.      * Script should return a download link for an export file on success, or false on failure.
  33.      *
  34.      * @type {string}
  35.      *
  36.      * @see Syntree.Workspace._eventExprt
  37.      *
  38.      * @memberof Syntree.Workspace
  39.      */
  40.     export_tree_script: {
  41.         require: 'string',
  42.         default_value: '#undefined',
  43.     },
  44.     /**
  45.      * Is focus checking enabled?
  46.      * Focus checking is for if the app is embedded within a larger page.
  47.      * It prevents confusion about whether or not the app has focus.
  48.      *
  49.      * @type {boolean}
  50.      *
  51.      * @memberof Syntree.Workspace
  52.      */
  53.     focus_checking_enabled: {
  54.         require: 'boolean',
  55.         default_value: false,
  56.     },
  57. };
  60. /**
  61.  * @class
  62.  * @classdesc Workspace is in charge of taking user input, sanitizing it, and sending it to the appropriate lower-level control structure.
  63.  */
  64. Syntree.Workspace = {
  66.     initialize: function(config_matrix) {
  67.         Syntree.Lib.config(config_matrix, this);
  69.         // Make changes to environment based on initialization parameters.
  71.         // Tutorial.
  72.         if (this.tutorial_enabled) {
  73.             $(document)
  74.                 .ready(
  75.                     function() {
  76.                         modal_open('tutorial');
  77.                     })
  78.                 .on(
  79.                     'click',
  80.                     '.button_modal__begin-tutorial',
  81.                     function() {
  82.                         Syntree.Tutorial.start();
  83.                     })
  84.                 .on(
  85.                     'click',
  86.                     '.toolbar_button__tutorial',
  87.                     function() {
  88.                         Syntree.Workspace._eventRewatchTutorial();
  89.                     }
  90.                 );
  91.         } else {
  92.             $('.toolbar_button__tutorial').remove();
  93.         }
  95.         // Export functionality.
  96.         if (Syntree.Lib.checkType(this.export_tree_script, 'undefined')) {
  97.             $('.toolbar_button__export').remove();
  98.             $('.modal_export').remove();
  99.         }
  101.         // Upload functionality.
  102.         if (!this.upload_enabled) {
  103.             $('.toolbar_button__upload').remove();
  104.         }
  108.         // Focus checking.
  109.         if (this.focus_checking_enabled) {
  110.             $('#workspace_container').prepend('<div class="focus_check_overlay"></div>');
  111.             $('body').prepend('<div class="focus_check_underlay"></div>');
  112.             $('.focus_check_underlay').hide();
  113.             this.focused = false;
  114.         }
  116.         this._attachEventListeners();
  118.         this.page = new Syntree.Page();
  119.         this.page.addTree(); // Adds the default tree.
  120.         this.page.select(this.page.tree.getRoot());
  121.     },
  123.     /**
  124.      * Attach various event listeners needed for processing user input. This function is a convenience only, used so that [initialize()]{@link Workspace.initialize}) is a bit less cluttered.
  125.      */
  126.     _attachEventListeners: function() {
  127.         // This stuff is to fix dragging, which as default triggers on right click.
  128.         // We want it to NOT trigger on right click, so we maintain Workspace.rightClick
  129.         // for the drag functions to check.
  130.         $(document)
  131.             .on(
  132.                 'mousedown',
  133.                 function(e) {
  134.                     if (e.which === 3) {
  135.                         Syntree.Workspace.rightClick = true;
  136.                     };
  137.                 })
  138.             .on(
  139.                 'mouseup',
  140.                 function(e) {
  141.                     if (e.which === 3) {
  142.                         Syntree.Workspace.rightClick = false;
  143.                     };
  144.                 }
  145.             );
  146.         window.onblur = function() {
  147.             Syntree.Workspace.rightClick = false;
  148.         }
  149.         // --------------------------------------------------------------------------
  151.         // Basic events, funneled to event functions below
  152.         $(document)
  153.             .on(
  154.                 'click',
  155.                 '.arrow, .arrow-shadow',
  156.                 function(e) {
  157.                     Syntree.Workspace._eventArrowClick(e);
  158.                 })
  159.             .on(
  160.                 'click',
  161.                 '.branch, .branch-shadow, .triangle',
  162.                 function(e) {
  163.                     Syntree.Workspace._eventBranchClick(e);
  164.                 })
  165.             .on(
  166.                 'click',
  167.                 '.triangle-button',
  168.                 function(e) {
  169.                     Syntree.Workspace._eventTriangleButtonClick(e);
  170.                 })
  171.             .on(
  172.                 'click',
  173.                 '.node-label',
  174.                 function(e) {
  175.                     Syntree.Workspace._eventNodeClick(e);
  176.                 })
  177.             .on(
  178.                 'click',
  179.                 '.delete_button',
  180.                 function() {
  181.                     Syntree.Workspace._eventDel();
  182.                 })
  183.             .on(
  184.                 'click',
  185.                 '#page-background',
  186.                 function(e) {
  187.                     Syntree.Workspace._eventBGClick(e);
  188.                 })
  189.             .on(
  190.                 'dblclick',
  191.                 '.node-label, .highlight',
  192.                 function() {
  193.                     Syntree.Workspace._eventEnter();
  194.                 })
  195.             .on(
  196.                 'input',
  197.                 '.editor',
  198.                 function() {
  199.                     Syntree.Workspace._eventEditorTyping();
  200.                 })
  201.             .on(
  202.                 'keydown',
  203.                 function(e) {
  204.                     if ((Syntree.Workspace.focus_checking_enabled && Syntree.Workspace.focused) ||
  205.                         !Syntree.Workspace.focus_checking_enabled) {
  207.                             if (e.keyCode === 13) { // Enter
  208.                                 Syntree.Workspace._eventEnter();
  209.                             } else if (e.keyCode === 37) { // Left arrow key
  210.                                 Syntree.Workspace._eventLeft(e);
  211.                             } else if (e.keyCode === 38) { // Up arrow key
  212.                                 Syntree.Workspace._eventUp();
  213.                                 return false;
  214.                             } else if (e.keyCode === 39) { // Right arrow key
  215.                                 Syntree.Workspace._eventRight(e);
  216.                             } else if (e.keyCode === 40) { // Down arrow key
  217.                                 Syntree.Workspace._eventDown(e);
  218.                                 return false;
  219.                             } else if (e.keyCode === 46) { // Delete key
  220.                                 Syntree.Workspace._eventDel();
  221.                             } else if (e.keyCode === 27) { // Esc key
  222.                                 Syntree.Workspace._eventEsc();
  223.                             } else if (e.keyCode === 90 && e.ctrlKey) { // CTRL + Z
  224.                                 Syntree.Workspace._eventUndo();
  225.                             }
  226.                     }
  227.                 }
  228.             );
  230.         // Focus checking.
  231.         if (Syntree.Workspace.focus_checking_enabled) {
  232.             $(document)
  233.                 .on(
  234.                     'click',
  235.                     '.focus_check_overlay',
  236.                     function() {
  237.                         Syntree.Workspace._eventFocus();
  238.                     })
  239.                 .on(
  240.                     'click',
  241.                     '.focus_check_underlay',
  242.                     function() {
  243.                         Syntree.Workspace._eventUnfocus()
  244.                     }
  245.                 );
  246.         }
  248.         // Exporting trees.
  249.         if (Syntree.Lib.checkType(this.export_tree_script, 'string')) {
  250.             $(document)
  251.                 .on(
  252.                     'click',
  253.                     '.modal_section__filetype .modal_label',
  254.                     function(e) {
  255.                         Syntree.Workspace._eventFiletypeLabelClick(e);
  256.                     })
  257.                 .on(
  258.                     'click',
  259.                     '.button_modal__export',
  260.                     function() {
  261.                         $(this).addClass('loading');
  262.                         var type = $('.modal_section__filetype input:checked').val();
  263.                         if (type === 'bracket-file') {
  264.                             Syntree.Workspace._eventExportBrackets();
  265.                         } else if (type === 'tree-file') {
  266.                             Syntree.Workspace._eventExportTreeFile();
  267.                         } else if (type === 'png') {
  268.                             Syntree.Workspace._eventExportImage();
  269.                         }
  270.                         $(this).removeClass('loading');
  271.                     }
  272.                 );
  273.         }
  275.         // Uploading trees.
  276.         if (this.upload_enabled) {
  277.             $(document).on(
  278.                 'click',
  279.                 '.toolbar_button__upload',
  280.                 function() {
  281.                     Syntree.Workspace._eventUpload();
  282.                 });
  283.         }
  285.         // Saving trees.
  286.         if (Syntree.Lib.checkType(this.save_tree_script, 'string')) {
  287.             $(document).on(
  288.                 'click',
  289.                 '.toolbar_button__save',
  290.                 function(){
  291.                     Syntree.Workspace._eventSave();
  292.                 });
  293.         }
  295.         // Opening trees.
  296.         if (Syntree.Lib.checkType(this.get_trees_script, 'string')) {
  297.             $(document).on(
  298.                 'click',
  299.                 '.toolbar_button__open',
  300.                 function() {
  301.                     $.post(Syntree.Workspace.get_trees_script, {}, function(result) {
  302.                         $('.modal_section__trees').html(result);
  303.                     });
  304.             });
  305.         }
  306.     },
  308.     /**
  309.      * Code to run when a branch's triangle button is clicked.
  310.      *
  311.      * @see Syntree.Branch
  312.      */
  313.     _eventTriangleButtonClick: function(e) {
  314.         var clicked = e.currentTarget;
  315.         var clickedId = $(clicked).attr('id');
  316.         var id = Number(clickedId.substr(clickedId.lastIndexOf('-') + 1, clickedId.length));
  317.         Syntree.Workspace.page.allElements[id].triangleToggle();
  318.     },
  320.     /**
  321.      * Code to run when a branch is clicked.
  322.      *
  323.      * @see Syntree.Branch
  324.      * @see Syntree.Page.select
  325.      */
  326.     _eventBranchClick: function(e) {
  327.         var clicked = e.currentTarget;
  328.         var clickedId = $(clicked).attr('id');
  329.         var id = Number(clickedId.substr(clickedId.lastIndexOf('-') + 1, clickedId.length));
  330.         Syntree.Workspace.page.select(Syntree.Workspace.page.allElements[id]);
  331.     },
  333.     /**
  334.      * Code to run when an arrow is clicked.
  335.      *
  336.      * @see Syntree.Arrow
  337.      * @see Syntree.Page.select
  338.      */
  339.     _eventArrowClick: function(e) {
  340.         var clicked = e.currentTarget;
  341.         var clickedId = $(clicked).attr('id');
  342.         var id = Number(clickedId.substr(clickedId.lastIndexOf('-') + 1, clickedId.length));
  343.         Syntree.Workspace.page.select(Syntree.Workspace.page.allElements[id]);
  344.     },
  346.     /**
  347.      * Code to run when a user requests a tutorial restart/rewatch.
  348.      *
  349.      * @see Syntree.Tutorial
  350.      */
  351.     _eventRewatchTutorial: function() {
  352.         var check;
  353.         if (Syntree.Tutorial.running) {
  354.             check = confirm('Restart tutorial?');
  355.         } else {
  356.             check = confirm('This will delete any work you have open. Start tutorial anyway?');
  357.         }
  358.         if (check) {
  359.             Syntree.Workspace.page.tree.delete();
  360.             Syntree.Workspace.page.addTree();
  361.             Syntree.Workspace.page.select(Syntree.Workspace.page.tree.getRoot());
  362.             Syntree.Tutorial.start();
  363.         }
  364.     },
  366.     /**
  367.      * Code to run when a user attempts to undo an action.
  368.      *
  369.      * @see Syntree.History.undo
  370.      * @see Syntree.Action
  371.      */
  372.     _eventUndo: function() {
  373.         Syntree.History.undo();
  374.     },
  376.     /**
  377.      * Code to run when a Node is clicked.
  378.      *
  379.      * @see Syntree.Node
  380.      */
  381.     _eventNodeClick: function(e) {
  382.         // clickedNode = Syntree.Lib.checkArg(clickedNode, 'svgtextelement');
  383.         var node = Syntree.Workspace.page.allElements[$(e.currentTarget).attr('id').split('-')[1]];
  384.         if (e.ctrlKey) {
  385.             var a = this.page.createMovementArrow(node);
  386.             if (Syntree.Lib.checkType(a, 'arrow')) {
  387.                 Syntree.Workspace.page.select(a);
  388.                 return false;
  389.             }
  390.         }
  391.         Syntree.Workspace.page.select(node);
  392.     },
  394.     /**
  395.      * Code to run when the user presses the left arrow key.
  396.      *
  397.      * @see Syntree.Page#navigateHorizontal
  398.      */
  399.     _eventLeft: function(e) {
  400.         if (e.shiftKey && e.ctrlKey) {
  401.             this.page.navigateHorizontal('left', true);
  402.         } else {
  403.             if ($(document.activeElement).hasClass('editor') && $(document.activeElement).val() !== '') {
  404.                 return;
  405.             }
  406.             this.page.navigateHorizontal('left');
  407.         }
  408.     },
  410.     /**
  411.      * Code to run when the user presses the right arrow key.
  412.      *
  413.      * @see Syntree.Page#navigateHorizontal
  414.      */
  415.     _eventRight: function(e) {
  416.         if (e.shiftKey && e.ctrlKey) {
  417.             this.page.navigateHorizontal('right', true);
  418.         } else {
  419.             if ($(document.activeElement).hasClass('editor') && $(document.activeElement).val() !== '') {
  420.                 return;
  421.             }
  422.             this.page.navigateHorizontal('right');
  423.         }
  424.     },
  426.     /**
  427.      * Code to run when the user presses the up arrow key.
  428.      *
  429.      * @see Syntree.Page#navigateUp
  430.      */
  431.     _eventUp: function() {
  432.         this.page.navigateUp();
  433.     },
  435.     /**
  436.      * Code to run when the user presses the down arrow key.
  437.      *
  438.      * @see Syntree.Page#navigateDown
  439.      */
  440.     _eventDown: function(e) {
  441.         this.page.navigateDown();
  442.     },
  444.     /**
  445.      * Code to run when the user tries to delete an [Element]{@link Syntree.Element}.
  446.      */
  447.     _eventDel: function() {
  448.         var selected = Syntree.Workspace.page.getSelected();
  449.         if (Syntree.Lib.checkType(selected, 'node')) {
  450.             if (Syntree.Workspace.page.tree.root === selected) {
  451.                 var children = Syntree.Workspace.page.tree.root.getChildren().slice();
  452.                 var c = 0;
  453.                 while (c < children.length) {
  454.                     var tree = new Syntree.Tree({
  455.                         root: children[c],
  456.                     })
  457.                     Syntree.Workspace.page.deleteTree(tree);
  458.                     c++;
  459.                 }
  460.             } else {
  461.                 var tree = new Syntree.Tree({
  462.                     root: selected,
  463.                 })
  464.                 Syntree.Workspace.page.deleteTree(tree);
  465.             }
  466.             Syntree.Workspace.page.deselect();
  467.             if (!Syntree.Lib.checkType(Syntree.Workspace.page.getSelected(), 'node')) {
  468.                 Syntree.Workspace.page.select(Syntree.Workspace.page.tree.getRoot());
  469.             }
  470.         } else {
  471.             selected.delete();
  472.         }
  473.     },
  475.     /**
  476.      * Code to run when the user presses the ESC key.
  477.      */
  478.     _eventEsc: function() {
  479.         this.page.nodeEditing('cancel');
  480.     },
  482.     /**
  483.      * Code to run when the user types in a [Node]{@link Syntree.Node} editor.
  484.      */
  485.     _eventEditorTyping: function() {
  486.         this.page.nodeEditing('update');
  487.     },
  489.     /**
  490.      * Code to run when the user clicks a file type option in the export modal.
  491.      * Updates the displayed file suffix.
  492.      */
  493.     _eventFiletypeLabelClick: function(e) {
  494.         var clicked = $(e.currentTarget).children('input');
  495.         if ($(clicked).val() == 'bracket-file') {
  496.             $('.modal_option__fname span').text('.txt');
  497.         } else if ($(clicked).val() == 'tree-file') {
  498.             $('.modal_option__fname span').text('.tree');
  499.         } else if ($(clicked).val() == 'png') {
  500.             $('.modal_option__fname span').text('.png');
  501.         }
  502.     },
  504.     /**
  505.      * Code for exporting the current tree as an image (png).
  506.      */
  507.     _eventExportImage: function() {
  508.         // Get the tree's bounding path, and other initial values.
  509.         var path = Syntree.Workspace.page.tree._getPath();
  511.         var width = path.rightBound - path.leftBound;
  512.         var height = path.bottomBound - path.topBound;
  514.         var offsetX = (-1 * path.leftBound + 25);
  515.         var offsetY = (-1 * path.topBound + 25);
  517.         // Get the SVG data.
  518.         var svgstring = '<svg>' + this.page.getSVGString() + '</svg>';
  520.         // Set up the canvas size.
  521.         $('#export-image-canvas').attr('width', (width + 50));
  522.         $('#export-image-canvas').attr('height', (height + 50));
  524.         // Use canvg to paint the SVG data to the canvas.
  525.         canvg('export-image-canvas', svgstring, {
  526.             offsetX: (-1 * (path.leftBound - 25)),
  527.             offsetY: (-1 * (path.topBound - 25)),
  528.         });
  530.         // Download the image.
  531.         var canvas = document.getElementById('export-image-canvas');
  532.         var imgd = canvas.toDataURL('image/png');
  533.         var link = '<a id="temp-file-download" href="' + imgd + '" download="mytree.png"></a>';
  534.         $('body').append(link);
  535.         $(link)[0].click();
  536.     },
  538.     /**
  539.      * Code for exporting the current tree as a tree file.
  540.      */
  541.     _eventExportTreeFile: function() {
  542.         var fname = $('.modal_option__fname input').val();
  543.         var treestring = this.page.tree.getTreestring();
  544.         if (Syntree.Lib.checkType(this.export_tree_script, 'string')) {
  545.             $.post(this.export_tree_script, {fname: fname, type: 'tree-file', treestring: treestring}, function(link){
  546.                 $('body').append(link);
  547.                 $('#temp-file-download')[0].click();
  548.                 $('#temp-file-download').remove();
  549.             })
  551.         }
  552.     },
  554.     /**
  555.      * Code for exporting the current tree as bracket notation (.txt file).
  556.      */
  557.     _eventExportBrackets: function() {
  558.         $('.loading-icon').show();
  559.         // Get fname
  560.         var fname = $('.modal_option__fname input').val();
  561.         // Get brackets
  562.         var brackets = this.page.tree.getBracketNotation();
  563.         // Post it
  564.         if (Syntree.Lib.checkType(this.export_tree_script, 'string')) {
  565.             $.post(this.export_tree_script, {fname: fname, type: 'bracket-file', brackets: brackets}, function(link) {
  566.                 $('body').append(link);
  567.                 $('#temp-file-download')[0].click();
  568.                 $('#temp-file-download').remove();
  569.                 $('.loading-icon').hide();
  570.             });
  571.         }
  572.     },
  574.     /**
  575.      * Code to run when the user presses Enter.
  576.      */
  577.     _eventEnter: function() {
  578.         this.page.nodeEditing('toggle');
  579.     },
  581.     toString: function() {
  582.         return '[object Workspace]';
  583.     },
  585.     _eventFocus: function() {
  586.         $('.focus_check_overlay').hide();
  587.         $('.focus_check_underlay').show();
  588.         window.scrollTo($('#workspace').offset().left,$('#workspace').offset().top);
  589.         // $('body').css('overflow','hidden');
  590.         $('#workspace_container').css('z-index',103);
  591.         this.focused = true;
  592.     },
  594.     _eventUnfocus: function() {
  595.         $('.focus_check_overlay').show();
  596.         $('.focus_check_underlay').hide();
  597.         $('body').css('overflow','initial');
  598.         $('#workspace_container').css('z-index',0);
  599.         this.focused = false;
  600.     },
  602.     // IMPORTANT:
  603.     // All this stuff is on hold. Please ignore it.
  604.     _eventBGClick: function(e) {
  605.         return; //temporary
  606.         var x = e.pageX - $('#workspace').offset().left;
  607.         var y = e.pageY - $('#workspace').offset().top;
  608.         var nearest = this.page.getNearestNode(x,y);
  609.         var newNode = new Syntree.Node(0,0);
  611.         if (Syntree.Lib.checkType(nearest, 'object')) {
  612.             if (nearest.deltaY < -10) {
  613.                 if (nearest.deltaX > 0) {
  614.                     nearest.node.addChild(newNode,0);
  615.                 } else {
  616.                     nearest.node.addChild(newNode);
  617.                 }
  618.             } else {
  619.                 var childIndex = nearest.node.getParent().getChildren().indexOf(nearest.node);
  620.                 if (nearest.deltaX > 0) {
  621.                     nearest.node.addChild(newNode,childIndex);
  622.                 } else {
  623.                     nearest.node.addChild(newNode,childIndex+1);
  624.                 }
  625.             }
  626.         }
  627.     },
  629.     _eventUpload: function() {
  630.         var W = this;
  631.         $('body').append('<input type="file" id="temp-choose-file">');
  632.         $('#temp-choose-file').change(function() {
  633.             var f = document.getElementById('temp-choose-file').files[0];
  634.             if (f) {
  635.                 var reader = new FileReader();
  636.                 reader.readAsText(f, 'UTF-8');
  637.                 reader.onload = function (e) {
  638.                     W.page.openTree(e.target.result);
  639.                 }
  640.                 reader.onerror = function (e) {
  641.                     alert('Unable to read file. Please upload a .tree file.')
  642.                 }
  643.             }
  644.             $('#temp-choose-file').remove();
  645.         });
  646.         $('#temp-choose-file').click();
  647.     },
  649.     _eventSave: function() {
  650.         var treestring = this.page.tree.getTreestring();
  651.         var W = this;
  652.         if (Syntree.Lib.checkType(this.save_tree_script, 'string')) {
  653.             $.post(this.save_tree_script,{treestring:treestring,treeid:this.page.tree.getId()},function(result){
  654.                 if (Number(result)) {
  655.                     if (!Syntree.Lib.checkType(Syntree.Workspace.page.tree.getId(), 'number')) {
  656.                         W.page.tree.setId(Number(result));
  657.                     }
  658.                     alert('Saved');
  659.                 } else {
  660.                     alert('Sorry, there was a problem saving your tree');
  661.                 }
  662.             });
  663.         }
  664.     },
  666. }