Merge branch 'dev'

Author: dinusv

plugins/squareone/tutorials/firstapplication/firstapplication.md

@@ -58,8 +58,8 @@ The VideoDecoderView already started playing our video. Now we can connect other
 Let's try to add a conversion to grayscale to our video. Within the root item, click the
 ['add']({livekeys-hover:livekeys://open/resources/FirstApplicationHighlight.qml#add-option;livekeys://open/resources/FirstApplicationRemoveHighlight.qml#add-option})
 option, select [Object]({livekeys-hover:livekeys://open/resources/FirstApplicationHighlight.qml#add-option-object;livekeys://open/resources/FirstApplicationRemoveHighlight.qml#add-option-object})
-then search and add the `GrayscaleView` item. Once added, in the input property, type
-'videoDecoderView.image', then hit the return key or click on the update button. You should see the grayscale version of our video playing.
+then search and add the `GrayscaleView` item. Once added, in the [input property]({livekeys-hover:livekeys://open/resources/FirstApplicationHighlight.qml#grayscale-input;livekeys://open/resources/FirstApplicationRemoveHighlight.qml#grayscale-input}), type
+`videoDecoderView.image`, then hit the return key or click on the update button. You should see the grayscale version of our video playing.
 
 ## Looking over the hierarchy
 

plugins/squareone/tutorials/firstapplication/resources/FirstApplicationHighlight.qml

@@ -302,21 +302,61 @@ WorkspaceControl{
                                             highlight.boxY = coords.y + editorCoords.y + 30
                                             highlight.box.width = 35
                                             highlight.box.height = 35
-
-                                            //INFO: Setting palette value
-//                                            palette.value = 'path_to_video'
-
                                         }
                                     }
-
                                 }
 
                             }
 
                         }
                     }
+                }
+            }
+        } else if ( fragment === 'grayscale-input' ){
+            var editorPane = lk.layers.workspace.panes.focusPane('editor')
+            if ( !editorPane )
+                return
+
+            var editor = editorPane.editor
+            var codeHandler = editor.documentHandler.codeHandler
+
+            var editingFragments = codeHandler.editingFragments()
+
+            for ( var i = 0; i < editingFragments.length; ++i ){
+                var itemEdit = editingFragments[i]
+                if ( itemEdit.type() === 'qml/QtQuick#Item' ){
+                    var childFragments = itemEdit.getChildFragments()
+                    for ( var j = 0; j < childFragments.length; ++j ){
+                        var decoderEdit = childFragments[j]
+                        if ( decoderEdit.type() === 'qml/lcvcore#GrayscaleView' ){
 
+                            var decoderChildren = decoderEdit.getChildFragments()
+
+                            for ( var k = 0; k < decoderChildren.length; ++k ){
+                                var inputProperty = decoderChildren[k]
+                                if ( inputProperty.identifier() === 'input' ){
+
+                                    var palettes = inputProperty.paletteList()
+
+                                    for ( var pi = 0; pi < palettes.length; ++pi ){
+                                        var palette = palettes[pi]
+                                        if ( palette.name === 'ConnectionPalette' ){
+                                            var coords = palette.item.mapToItem(editor, 0, 0)
+                                            var editorCoords = editorPane.mapGlobalPosition()
+
+                                            highlight = createHighlight(state)
+                                            highlight.boxX = coords.x + editorCoords.x
+                                            highlight.boxY = coords.y + editorCoords.y + 30
+                                            highlight.box.width = palette.item.width - 35
+                                            highlight.box.height = 35
+                                        }
+                                    }
+                                }
+
+                            }
 
+                        }
+                    }
                 }
             }
         }