122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
|
import type * as p from "@bokehjs/core/properties"
|
||
|
|
import type {StyleSheetLike} from "@bokehjs/core/dom"
|
||
|
|
import {ImportedStyleSheet} from "@bokehjs/core/dom"
|
||
|
|
import {ModelEvent} from "@bokehjs/core/bokeh_events"
|
||
|
|
import {HTMLBox, HTMLBoxView} from "./layout"
|
||
|
|
import type {Attrs} from "@bokehjs/core/types"
|
||
|
|
|
||
|
|
export class JSONEditEvent extends ModelEvent {
|
||
|
|
constructor(readonly data: any) {
|
||
|
|
super()
|
||
|
|
}
|
||
|
|
|
||
|
|
protected override get event_values(): Attrs {
|
||
|
|
return {model: this.origin, data: this.data}
|
||
|
|
}
|
||
|
|
|
||
|
|
static {
|
||
|
|
this.prototype.event_name = "json_edit"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export class JSONEditorView extends HTMLBoxView {
|
||
|
|
declare model: JSONEditor
|
||
|
|
|
||
|
|
editor: any
|
||
|
|
_menu_context: any
|
||
|
|
|
||
|
|
override connect_signals(): void {
|
||
|
|
super.connect_signals()
|
||
|
|
const {data, disabled, templates, menu, mode, search, schema} = this.model.properties
|
||
|
|
this.on_change([data], () => this.editor.update(this.model.data))
|
||
|
|
this.on_change([templates], () => {
|
||
|
|
this.editor.options.templates = this.model.templates
|
||
|
|
})
|
||
|
|
this.on_change([menu], () => {
|
||
|
|
this.editor.options.menu = this.model.menu
|
||
|
|
})
|
||
|
|
this.on_change([search], () => {
|
||
|
|
this.editor.options.search = this.model.search
|
||
|
|
})
|
||
|
|
this.on_change([schema], () => {
|
||
|
|
this.editor.options.schema = this.model.schema
|
||
|
|
})
|
||
|
|
this.on_change([disabled, mode], () => {
|
||
|
|
const mode = this.model.disabled ? "view": this.model.mode
|
||
|
|
this.editor.setMode(mode)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
override stylesheets(): StyleSheetLike[] {
|
||
|
|
const styles = super.stylesheets()
|
||
|
|
for (const css of this.model.css) {
|
||
|
|
styles.push(new ImportedStyleSheet(css))
|
||
|
|
}
|
||
|
|
return styles
|
||
|
|
}
|
||
|
|
|
||
|
|
override remove(): void {
|
||
|
|
super.remove()
|
||
|
|
this.editor.destroy()
|
||
|
|
}
|
||
|
|
|
||
|
|
override render(): void {
|
||
|
|
super.render()
|
||
|
|
const mode = this.model.disabled ? "view": this.model.mode
|
||
|
|
this.editor = new (window as any).JSONEditor(this.shadow_el, {
|
||
|
|
menu: this.model.menu,
|
||
|
|
mode,
|
||
|
|
onChangeJSON: (json: any) => {
|
||
|
|
this.model.data = json
|
||
|
|
},
|
||
|
|
onSelectionChange: (start: any, end: any) => {
|
||
|
|
this.model.selection = [start, end]
|
||
|
|
},
|
||
|
|
search: this.model.search,
|
||
|
|
schema: this.model.schema,
|
||
|
|
templates: this.model.templates,
|
||
|
|
})
|
||
|
|
this.editor.set(this.model.data)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export namespace JSONEditor {
|
||
|
|
export type Attrs = p.AttrsOf<Props>
|
||
|
|
export type Props = HTMLBox.Props & {
|
||
|
|
css: p.Property<string[]>
|
||
|
|
data: p.Property<any>
|
||
|
|
menu: p.Property<boolean>
|
||
|
|
mode: p.Property<string>
|
||
|
|
search: p.Property<boolean>
|
||
|
|
selection: p.Property<any[]>
|
||
|
|
schema: p.Property<any>
|
||
|
|
templates: p.Property<any[]>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface JSONEditor extends JSONEditor.Attrs {}
|
||
|
|
|
||
|
|
export class JSONEditor extends HTMLBox {
|
||
|
|
declare properties: JSONEditor.Props
|
||
|
|
|
||
|
|
constructor(attrs?: Partial<JSONEditor.Attrs>) {
|
||
|
|
super(attrs)
|
||
|
|
}
|
||
|
|
|
||
|
|
static override __module__ = "panel.models.jsoneditor"
|
||
|
|
|
||
|
|
static {
|
||
|
|
this.prototype.default_view = JSONEditorView
|
||
|
|
this.define<JSONEditor.Props>(({Any, List, Bool, Str}) => ({
|
||
|
|
css: [ List(Str), [] ],
|
||
|
|
data: [ Any, {} ],
|
||
|
|
mode: [ Str, "tree" ],
|
||
|
|
menu: [ Bool, true ],
|
||
|
|
search: [ Bool, true ],
|
||
|
|
selection: [ List(Any), [] ],
|
||
|
|
schema: [ Any, null ],
|
||
|
|
templates: [ List(Any), [] ],
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
}
|