B4J=true
Group=Default Group
ModulesStructureVersion=1
Type=Class
Version=8.5
@EndOfDesignText@
'Custom BANano View class

'Uncomment the events you want to show to the user and implement the HandleEvents in DesignerCreateView 
'#Event: Focus (event As BANanoEvent)
'#Event: Blur (event As BANanoEvent)
'#Event: Resize (event As BANanoEvent)
'#Event: Scroll (event As BANanoEvent)
'#Event: Keydown (event As BANanoEvent)
'#Event: KeyPress (event As BANanoEvent)
'#Event: KeyUp (event As BANanoEvent)
'#Event: Click (event As BANanoEvent)
'#Event: ContextMenu (event As BANanoEvent)
'#Event: Dblclick (event As BANanoEvent)
'#Event: MouseDown (event As BANanoEvent)
'#Event: MouseEnter (event As BANanoEvent)
'#Event: MouseLeave (event As BANanoEvent)
'#Event: MouseMove (event As BANanoEvent)
'#Event: MouseOver (event As BANanoEvent)
'#Event: MouseOut (event As BANanoEvent)
'#Event: MouseUp (event As BANanoEvent)
'#Event: Wheel (event As BANanoEvent)
'#Event: Drag (event As BANanoEvent)
'#Event: DragEnd (event As BANanoEvent)
'#Event: DragEnter (event As BANanoEvent)
'#Event: DragStart (event As BANanoEvent)
'#Event: DragLeave (event As BANanoEvent)
'#Event: DragOver (event As BANanoEvent)
'#Event: Drop (event As BANanoEvent)
'#Event: TouchCancel (event As BANanoEvent)
'#Event: TouchEnd (event As BANanoEvent)
'#Event: TouchEnter (event As BANanoEvent)
'#Event: TouchLeave (event As BANanoEvent)
'#Event: TouchMove (event As BANanoEvent)
'#Event: TouchStart (event As BANanoEvent)
'#Event: Change (event As BANanoEvent)

' Properties that will be show in the ABStract Designer.  They will be passed in the props map in DesignerCreateView (Case Sensitive!)
'''#DesignerProperty: Key: Classes, DisplayName: Classes, FieldType: String, DefaultValue: , Description: Classes added to the HTML tag.
'''#DesignerProperty: Key: Style, DisplayName: Style, FieldType: String, DefaultValue: , Description: Styles added to the HTML tag. Must be a json String.
#DesignerProperty: Key: MarginLeft, DisplayName: Margin Left, FieldType: String, DefaultValue: 100, Description: Margin Left
'''#DesignerProperty: Key: MarginRight, DisplayName: Margin Right, FieldType: String, DefaultValue: , Description: Margin Right
'''#DesignerProperty: Key: MarginTop, DisplayName: Margin Top, FieldType: String, DefaultValue: , Description: Margin Top
'''#DesignerProperty: Key: MarginBottom, DisplayName: Margin Bottom, FieldType: String, DefaultValue: , Description: Margin Bottom
'''#DesignerProperty: Key: PaddingLeft, DisplayName: Padding Left, FieldType: String, DefaultValue: , Description: Padding Left
'''#DesignerProperty: Key: PaddingRight, DisplayName: Padding Right, FieldType: String, DefaultValue: , Description: Padding Right
'''#DesignerProperty: Key: PaddingTop, DisplayName: Padding Top, FieldType: String, DefaultValue: , Description: Padding Top
'''#DesignerProperty: Key: PaddingBottom, DisplayName: Padding Bottom, FieldType: String, DefaultValue: , Description: Padding Bottom

#DesignerProperty: Key: ChartWidth, DisplayName: Chart Width, FieldType: String, DefaultValue: 1000, Description: Chart Width
#DesignerProperty: Key: ChartHeight, DisplayName: Chart Height, FieldType: String, DefaultValue: 600, Description: Chart Height

Sub Class_Globals
    Private BANano As BANano 'ignore
	Private mName As String 'ignore
	Private mEventName As String 'ignore
	Private mCallBack As Object 'ignore
	Private mTarget As BANanoElement 'ignore
	Private mElement As BANanoElement 'ignore
	
	Private mClasses As String = ""
	Private mStyle As String = ""
	Public chartWidth As String = ""
	Public chartHeight As String = ""
	Private MarginLeft As String = ""
	Private plot As BANanoObject
End Sub

Public Sub Initialize (CallBack As Object, Name As String, EventName As String)
	mName = Name
	mEventName = EventName.ToLowerCase
	mCallBack = CallBack	
End Sub

' this is the place where you create the view in html and run initialize javascript
Public Sub DesignerCreateView (Target As BANanoElement, Props As Map)
	mTarget = Target
	Log("mTarget name: " & mTarget.Name)
	If Props <> Null Then
		mClasses = Props.Get("Classes")
		mStyle = Props.Get("Style")
		chartWidth = Props.Get("ChartWidth")
		chartHeight = Props.Get("ChartHeight")
		MarginLeft = Props.Get("MarginLeft")
	End If
	
	Dim exStyle As String = BuildExStyle
	mElement = mTarget.Append($"<div id="${mName}" class="${mClasses}" style="${exStyle}${mStyle}"></div>"$).Get("#" & mName)
	'''Log("melement: " & mTarget.Append($"<div id="${mName}" class="${mClasses}" style="${exStyle}${mStyle}"></div>"$).GetHTML)
	Log("mElement: " & mElement.Name)
	'' defining events is very simple. Note that it has to be run AFTER adding it to the HTML DOM! eventName must be lowercase!
	'mElement.HandleEvents("click", mCallBack, mEventName & "_click")
	'mElement.HandleEvents("mouseenter", Me, "mouseenter")

End Sub

'''Public Sub InitializePlotly(xData As String, yData As String, Title As String)
'''	plot.Initialize("Plotly")
'''	Dim Data As BANanoObject
'''	Dim var As BANanoObject
'''	Dim layout As BANanoObject
'''	Dim mTitle As String = Title
'''	var = $"var trace1 = {
'''	x: ${xData},
'''	y: ${yData},
'''	mode: 'lines',
'''	name: 'Scatter'
'''	};
'''	
'''	_data = [trace1];
'''	
'''	var _layout = {
'''	title: '${Title}'};"$
'''
'''	Log("evaluate: " & BANano.Eval(var))
'''	Log("layout: " & layout)
'''	Log("data: " & Data)
'''	plot.RunMethod("newPlot", Array("plotlychart1", Data, layout))
'''
'''End Sub

Public Sub InitializePlotly(Title As String, xData() As Double, yData() As Double)
	plot.Initialize("Plotly")
    
'''	Dim body As BANanoElement
'''	body.Initialize("#body")
'''	body.Append($"<div id="chart" style="width:${chartWidth}px;height:${chartHeight}px;"></div>"$)
    
	Dim element As String = "plotlychart1"
	Dim coords As List = Array(CreateMap("x": xData, "y": yData))
	Dim margin As Map = CreateMap("margin": CreateMap("t": MarginLeft&"px;"))
	Dim settings As Map = CreateMap("showSendToCloud": True)
	Dim layout As Map = CreateMap("title": $"${Title}"$)
	
	Log("coords: " & coords)
	Log("margin: " & margin)
	Log("settings: " & settings)
    
	plot.RunMethod("newPlot", Array(element, coords, layout, margin, settings))
End Sub

public Sub AddToParent(targetID As String)
	mTarget = BANano.GetElement("#" & targetID.ToLowerCase)
	DesignerCreateView(mTarget, Null)
End Sub

public Sub Remove()
	mTarget.Empty
	BANano.SetMeToNull
End Sub

public Sub Trigger(event As String, params() As String)
	If mElement <> Null Then
		mElement.Trigger(event, params)
	End If
End Sub

public Sub BuildExStyle() As String
	Dim sb As StringBuilder
	sb.Initialize
	If MarginLeft <> "" Then sb.Append("margin-left: " & MarginLeft & "px;")
'''	If MarginRight <> "" Then sb.Append("margin-right: " & MarginRight & ";")
'''	If MarginTop <> "" Then sb.Append("margin-top: " & MarginTop & ";")
'''	If MarginBottom <> "" Then sb.Append("margin-bottom: " & MarginBottom & ";")
'''	If PaddingLeft <> "" Then sb.Append("padding-left: " & PaddingLeft & ";")
'''	If PaddingRight <> "" Then sb.Append("padding-right: " & PaddingRight & ";")
'''	If PaddingTop <> "" Then sb.Append("padding-top: " & PaddingTop & ";")
'''	If PaddingBottom <> "" Then sb.Append("padding-bottom: " & PaddingBottom & ";")
	If chartWidth <> "" Then sb.Append("width: " & chartWidth&"px" & ";")
	If chartHeight <> "" Then sb.Append("height: " & chartHeight&"px" & ";")
	Return sb.ToString
End Sub

#Region Property Getters and Setters
public Sub setClasses(Classes As String)
	If mElement <> Null Then
		mElement.AddClass(Classes)
	End If
	mClasses = Classes
End Sub

public Sub getClasses() As String
	Return mClasses
End Sub

' must be a json string
' e.g. $"{ "width": "200px", "height": "200px", "background": "green", "border-radius": "5px" }"$
public Sub setStyle(Style As String)
	If mElement <> Null Then
		mElement.SetStyle(Style)
	End If
	mStyle = Style
End Sub

public Sub getStyle() As String
	Return mStyle
End Sub
#End Region

#Region Internal Events

#End Region