From d0d30917225ade4ea7abf7a6f287633b07d9f89b Mon Sep 17 00:00:00 2001 From: David Anthony Bau Date: Thu, 7 Jul 2016 11:38:36 -0400 Subject: [PATCH 1/4] Style --- css/droplet.css | 19 +++++++++++++-- src/controller.coffee | 56 +++++++++++++++++++++++++++++++++---------- 2 files changed, 61 insertions(+), 14 deletions(-) diff --git a/css/droplet.css b/css/droplet.css index eb751b5f..0c14ffa7 100644 --- a/css/droplet.css +++ b/css/droplet.css @@ -84,17 +84,20 @@ width: 100%; /*overflow: hidden;*/ } -.droplet-palette-header { +.droplet-palette-header-wrapper { z-index: 257; position: absolute; top: 0; left: 0; width: 100%; background-color: #FFF; - line-height: 10px; border-spacing: 4px; border-bottom: 2px solid #000; +} +.droplet-palette-header { display: table; + width: 100%; + line-height: 10px; } .droplet-palette-header-row { display: table-row; @@ -386,3 +389,15 @@ text { fill: '#88F' stroke: '#88F' } +.droplet-palette-search-wrapper { + height: 30px; + width: 100%; +} +.droplet-palette-search { + width: 100%; + height: 100%; + border-right: none; + border-left: none; + border-top: 1px solid #888; + border-bottom: 1px solid #888; +} diff --git a/src/controller.coffee b/src/controller.coffee index f0162909..b857ced6 100644 --- a/src/controller.coffee +++ b/src/controller.coffee @@ -200,10 +200,6 @@ exports.Editor = class Editor # Main canvas first @mainCanvas = document.createElementNS SVG_STANDARD, 'svg' - #@mainCanvasWrapper = document.createElementNS SVG_STANDARD, 'g' - #@mainCanvas = document.createElementNS SVG_STANDARD, 'g' - #@mainCanvas.appendChild @mainCanvasWrapper - #@mainCanvasWrapper.appendChild @mainCanvas @mainCanvas.setAttribute 'class', 'droplet-main-canvas' @mainCanvas.setAttribute 'shape-rendering', 'optimizeSpeed' @@ -372,7 +368,7 @@ exports.Editor = class Editor # Stop mousedown event default behavior so that # we don't get bad selections - if event.type is 'mousedown' + if event.type is 'mousedown' and event.target isnt @paletteSearch event.preventDefault?() event.returnValue = false return false @@ -780,8 +776,8 @@ Editor::clearPalette = -> # TODO remove and remove all references to Editor::clearPaletteHighlightCanvas = -> # TODO remove and remove all references to -Editor::redrawPalette = -> - return unless @session?.currentPaletteBlocks? +Editor::redrawPalette = (garbageCollect = true) -> + return unless @session?.activePaletteBlocks? @clearPalette() @@ -793,7 +789,7 @@ Editor::redrawPalette = -> # of the last bottom edge of a palette block. lastBottomEdge = PALETTE_TOP_MARGIN - for entry in @session.currentPaletteBlocks + for entry in @session.activePaletteBlocks # Layout this block paletteBlockView = @session.paletteView.getViewNodeFor entry.block paletteBlockView.layout PALETTE_LEFT_MARGIN, lastBottomEdge @@ -816,7 +812,10 @@ Editor::redrawPalette = -> @paletteCanvas.style.height = lastBottomEdge + 'px' - @session.paletteView.garbageCollect() + if garbageCollect + @session.paletteView.garbageCollect() + else + @session.paletteView.cleanupDraw() Editor::rebuildPalette = -> return unless @session?.currentPaletteBlocks? @@ -1986,11 +1985,37 @@ class FloatingOperation # This happens at population time. hook 'populate', 0, -> # Create the hierarchical menu element. + @paletteHeaderWrapper = document.createElement 'div' + @paletteHeaderWrapper.className = 'droplet-palette-header-wrapper' + @paletteHeader = document.createElement 'div' @paletteHeader.className = 'droplet-palette-header' # Append the element. - @paletteElement.appendChild @paletteHeader + @paletteElement.appendChild @paletteHeaderWrapper + @paletteHeaderWrapper.appendChild @paletteHeader + + # Search box + @paletteSearchWrapper = document.createElement 'div' + @paletteSearchWrapper.className = 'droplet-palette-search-wrapper' + + @paletteSearch = document.createElement 'input' + @paletteSearch.className = 'droplet-palette-search' + @paletteSearch.setAttribute 'placeholder', 'Filter blocks' + + @paletteSearch.style.paddingLeft = PALETTE_LEFT_MARGIN + @paletteSearch.style.fontFamily = @session.fontFamily + @paletteSearch.style.fontSize = @session.fontSize + + @paletteSearch.addEventListener 'input', => + @paletteScroller.scrollTop = 0 + searchTerm = @paletteSearch.value + @session.activePaletteBlocks = @session.currentPaletteBlocks.filter (block) -> + block.block.stringify()[...searchTerm.length] is searchTerm + @redrawPalette false + + @paletteHeaderWrapper.appendChild @paletteSearchWrapper + @paletteSearchWrapper.appendChild @paletteSearch if @session? @setPalette @session.paletteGroups @@ -2080,6 +2105,7 @@ Editor::changePaletteGroup = (group) -> # Record that we are the selected group now @session.currentPaletteGroup = paletteGroup.name @session.currentPaletteBlocks = paletteGroup.parsedBlocks + @session.activePaletteBlocks = paletteGroup.parsedBlocks.slice 0 @session.currentPaletteMetadata = paletteGroup.parsedBlocks # Unapply the "selected" style to the current palette group header @@ -2114,7 +2140,7 @@ hook 'mousedown', 6, (point, event, state) -> state.consumedHitTest = true return - for entry in @session.currentPaletteBlocks + for entry in @session.activePaletteBlocks hitTestResult = @hitTest palettePoint, entry.block, @session.paletteView if hitTestResult? @@ -3097,6 +3123,8 @@ Editor::scrollCursorToEndOfDocument = -> # Pressing the up-arrow moves the cursor up. hook 'keydown', 0, (event, state) -> + if event.target is @paletteSearch + return if event.which is UP_ARROW_KEY @clearLassoSelection() prev = @getCursor().prev ? @getCursor().start?.prev @@ -3153,6 +3181,8 @@ hook 'keydown', 0, (event, state) -> return if event.which isnt BACKSPACE_KEY return + if event.target is @paletteSearch + return if state.capturedBackspace return @@ -3832,7 +3862,7 @@ Editor::resizeMainScroller = -> @mainScroller.style.height = "#{@dropletElement.clientHeight}px" hook 'resize_palette', 0, -> - @paletteScroller.style.top = "#{@paletteHeader.clientHeight}px" + @paletteScroller.style.top = "#{@paletteHeaderWrapper.clientHeight}px" @session.viewports.palette.height = @paletteScroller.clientHeight @session.viewports.palette.width = @paletteScroller.clientWidth @@ -4679,6 +4709,7 @@ hook 'populate', 1, -> @redrawMain() hook 'keydown', 0, (event, state) -> + return if event.target is @paletteSearch if event.which in command_modifiers unless @cursorAtSocket() x = document.body.scrollLeft @@ -4691,6 +4722,7 @@ hook 'keydown', 0, (event, state) -> @copyPasteInput.setSelectionRange 0, @copyPasteInput.value.length hook 'keyup', 0, (point, event, state) -> + return if event.target is @paletteSearch if event.which in command_modifiers if @cursorAtSocket() @hiddenInput.focus() From 17a5ea01d0aa493217e455aecdad8637eaddefa9 Mon Sep 17 00:00:00 2001 From: David Anthony Bau Date: Thu, 7 Jul 2016 12:04:09 -0400 Subject: [PATCH 2/4] Focus on palette switch --- src/controller.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/src/controller.coffee b/src/controller.coffee index b857ced6..d843bca5 100644 --- a/src/controller.coffee +++ b/src/controller.coffee @@ -2079,6 +2079,7 @@ Editor::setPalette = (paletteGroups) -> clickHandler = => do updatePalette + @paletteSearch.focus() paletteGroupHeader.addEventListener 'click', clickHandler paletteGroupHeader.addEventListener 'touchstart', clickHandler From def28f695cac09a70b9e32216ad966c4050cd2bd Mon Sep 17 00:00:00 2001 From: David Anthony Bau Date: Thu, 7 Jul 2016 15:02:26 -0400 Subject: [PATCH 3/4] Add color defaults --- src/view.coffee | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/view.coffee b/src/view.coffee index 9fb3302f..68da6732 100644 --- a/src/view.coffee +++ b/src/view.coffee @@ -121,6 +121,10 @@ exports.View = class View unless option of @opts @opts[option] = DEFAULT_OPTIONS[option] + for color of DEFAULT_OPTIONS.colors + unless color of @opts.colors + @opts.colors[color] = DEFAULT_OPTIONS.colors[color] + # Simple method for clearing caches clearCache: -> @beginDraw() From ecd780675c8735ac069f33c02db3bd2cf7d0e01d Mon Sep 17 00:00:00 2001 From: David Anthony Bau Date: Fri, 8 Jul 2016 11:06:07 -0400 Subject: [PATCH 4/4] Substring instead of prefix --- src/controller.coffee | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/controller.coffee b/src/controller.coffee index f906ba28..f5dbc527 100644 --- a/src/controller.coffee +++ b/src/controller.coffee @@ -2018,8 +2018,9 @@ hook 'populate', 0, -> @paletteSearch.addEventListener 'input', => @paletteScroller.scrollTop = 0 searchTerm = @paletteSearch.value - @session.activePaletteBlocks = @session.currentPaletteBlocks.filter (block) -> - block.block.stringify()[...searchTerm.length] is searchTerm + @session.activePaletteBlocks = @session.currentPaletteBlocks.filter((block) -> + block.block.stringify().indexOf(searchTerm) >= 0 + ) @redrawPalette false @paletteHeaderWrapper.appendChild @paletteSearchWrapper