diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index aab937faa..b82f45be2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -16,6 +16,9 @@ function newStrategyPart () { payload: undefined, codeEditor: undefined, partTitle: undefined, + isExecuting: undefined, + highlight: highlight, + unHighlight: unHighlight, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -35,11 +38,15 @@ function newStrategyPart () { thisObject.container.frame.position.y = 0 let icon + let executingIcon let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId let selfDisplaceEventSubscriptionId + let isHighlighted + let highlightCounter = 0 + return thisObject function finalize () { @@ -128,10 +135,30 @@ function newStrategyPart () { } iconPhysics() + highlightPhisycs() + } + + function highlightPhisycs () { + highlightCounter-- + if (highlightCounter < 0) { + highlightCounter = 0 + isHighlighted = false + } + } + + function highlight () { + isHighlighted = true + highlightCounter = 30 + } + + function unHighlight () { + // isHighlighted = false + // highlightCounter = 0 } function iconPhysics () { icon = canvas.strategySpace.iconByPartType.get(thisObject.payload.node.type) + executingIcon = canvas.strategySpace.iconByPartType.get('attractive') } function onFocus () { @@ -173,7 +200,6 @@ function newStrategyPart () { function drawOnFocus () { if (thisObject.isOnFocus === true) { drawConnectingLine() - thisObject.menu.drawBackground() if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.drawBackground() @@ -186,10 +212,12 @@ function newStrategyPart () { if (thisObject.codeEditor !== undefined) { if (thisObject.codeEditor.visible === false) { drawBodyAndPicture() + thisObject.menu.drawBackground() thisObject.menu.drawForeground() } } else { drawBodyAndPicture() + thisObject.menu.drawBackground() thisObject.menu.drawForeground() } } @@ -253,7 +281,7 @@ function newStrategyPart () { let label if (radius > 6) { - const MAX_LABEL_LENGTH = 30 + const MAX_LABEL_LENGTH = 20 label = thisObject.payload.subTitle label = addIndexNumber(label) @@ -327,7 +355,7 @@ function newStrategyPart () { let radius = thisObject.container.frame.radius if (radius > 0.5) { - const VISIBLE_RADIUS = 5 + let VISIBLE_RADIUS = 5 let visiblePosition = { x: thisObject.container.frame.position.x, @@ -346,12 +374,27 @@ function newStrategyPart () { browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS - 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' browserCanvasContext.fill() + + if (isHighlighted === true) { + VISIBLE_RADIUS = thisObject.container.frame.radius + let OPACITY = highlightCounter / 30 + + browserCanvasContext.beginPath() + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + + browserCanvasContext.lineWidth = 10 + browserCanvasContext.setLineDash([4, 20]) + browserCanvasContext.stroke() + } } /* Image */ @@ -365,5 +408,21 @@ function newStrategyPart () { thisObject.payload.floatingObject.currentImageSize) } } + + if (executingIcon !== undefined) { + if (icon.canDrawIcon === true) { + if (thisObject.isExecuting) { + const DISTANCE_FROM_CENTER = 40 + const EXECUTING_ICON_SIZE = 20 + + browserCanvasContext.drawImage( + icon, position.x - EXECUTING_ICON_SIZE / 2, + position.y - EXECUTING_ICON_SIZE / 2 - DISTANCE_FROM_CENTER, + EXECUTING_ICON_SIZE, + EXECUTING_ICON_SIZE) + } + } + } } } + diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index a4715cd3b..db121269f 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -186,8 +186,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - iconPathOn: 'attractive', - iconPathOff: 'attractive', + iconPathOn: 'pyramid', + iconPathOff: 'pyramid', relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, @@ -216,8 +216,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - iconPathOn: 'attractive', - iconPathOff: 'attractive', + iconPathOn: 'pyramid', + iconPathOff: 'pyramid', relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, @@ -246,8 +246,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - iconPathOn: 'attractive', - iconPathOff: 'attractive', + iconPathOn: 'pyramid', + iconPathOff: 'pyramid', relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, @@ -353,8 +353,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - iconPathOn: 'attractive', - iconPathOff: 'attractive', + iconPathOn: 'pyramid', + iconPathOff: 'pyramid', relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 999a9838d..7a9c0d166 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -47,7 +47,7 @@ function newStrategySpace () { ['Stop', 'pixel'], ['Take Profit', 'competition'], ['Phase', 'placeholder'], - ['Situation', 'attractive'], + ['Situation', 'pyramid'], ['Condition', 'testing'] ] @@ -64,7 +64,7 @@ function newStrategySpace () { 'analysis-1', 'approve', 'attach', - 'attractive', + 'pyramid', 'brainstorming', 'broken-link', 'chat',