Class Interactive

constructor

• new Interactive(control_container_div, diagram_outer_svg?, inp_object_?, event_target?): Interactive

• Parameters

  • control_container_div: HTMLElement

    the div that contains the control elements
  • Optionaldiagram_outer_svg: SVGSVGElement

    the svg element that contains the diagram * only needed if you want to use the locator
  • Optionalinp_object_: {
        [key: string]: any;
    }

    the object that contains the variables * only needed if you want to use custom input object

    • [key: string]: any

  • event_target: HTML_INT_TARGET = HTML_INT_TARGET.SVG

  Returns Interactive

button_svg

control_container_div

custom_svg

Optionaldiagram_outer_svg

diagram_svg

display_mode

display_precision

dnd_svg

draw_function

event_target

inp_setter

inp_variables

intervals

locator_svg

registeredEventListenerRemoveFunctions

single_int_mode

button_click

• button_click(name, diagram, diagram_pressed, callback): void

• Create a click button

  Parameters

  • name: string

    name of the button
  • diagram: Diagram

    diagram of the button
  • diagram_pressed: Diagram

    diagram of the button when it is pressed
  • callback: (() => any)

    callback function when the button is clicked

    • • (): any

      • Returns any

  Returns void

button_click_hover

• button_click_hover(name, diagram, diagram_pressed, diagram_hover, callback): void

• Create a click button

  Parameters

  • name: string

    name of the button
  • diagram: Diagram

    diagram of the button
  • diagram_pressed: Diagram

    diagram of the button when it is pressed
  • diagram_hover: Diagram

    diagram of the button when it is hovered
  • callback: (() => any)

    callback function when the button is clicked

    • • (): any

      • Returns any

  Returns void

button_toggle

• button_toggle(name, diagram_on, diagram_off, state?, callback?): void

• Create a toggle button

  Parameters

  • name: string

    name of the button
  • diagram_on: Diagram

    diagram of the button when it is on
  • diagram_off: Diagram

    diagram of the button when it is off
  • state: boolean = false

    initial state of the button
  • Optionalcallback: ((name: string, state: boolean) => any)

    callback function when the button state is changed

    • • (name, state): any

      • Parameters

        • name: string
        • state: boolean

        Returns any

  Returns void

custom_object

• custom_object(id, classlist, diagram): SVGSVGElement

• Parameters

  • id: string

    id of the object
  • classlist: string[]

    list of classes of the object
  • diagram: Diagram

    diagram of the object

  Returns SVGSVGElement

  the svg element of the object

  Deprecated

  (use Interactive.custom_object_g() instead) This method will be removed in the next major release

  Create a custom interactive object

custom_object_g

• custom_object_g(id, classlist, diagram): SVGGElement

• Create a custom interactive object

  Parameters

  • id: string

    id of the object
  • classlist: string[]

    list of classes of the object
  • diagram: Diagram

    diagram of the object

  Returns SVGGElement

  the svg element of the object

dnd_container

• dnd_container(name, diagram, capacity?, config?): void

• Create a drag and drop container

  Parameters

  • name: string

    name of the container
  • diagram: Diagram

    diagram of the container
  • Optionalcapacity: number

    capacity of the container (default is 1)
  • Optionalconfig: dnd_container_config

    configuration of the container positioning the configuration is an object with the following format: {type:"horizontal-uniform"}, {type:"vertical-uniform"}, {type:"grid", value:[number, number]} {type:"horizontal", padding:number}, {type:"vertical", padding:number} {type:"flex-row", padding:number, vertical_alignment:VerticalAlignment, horizontal_alignment:HorizontalAlignment}

    you can also add custom region box for the target by adding custom_region_box: [Vector2, Vector2] in the config

    you can also add a sorting function for the target by adding sorting_function: (a: string, b: string) => number

  Returns void

dnd_draggable

• dnd_draggable(name, diagram, container_diagram?, callback?, onclickstart_callback?): void

• Create a drag and drop draggable

  Parameters

  • name: string

    name of the draggable
  • diagram: Diagram

    diagram of the draggable
  • Optionalcontainer_diagram: Diagram

    diagram of the container, if not provided, a container will be created automatically
  • Optionalcallback: ((name: string, pos: Vector2) => any)

    callback function (called after the draggable is moved)

    • • (name, pos): any

      • Parameters

        • name: string
        • pos: Vector2

        Returns any

  • Optionalonclickstart_callback: (() => any)

    callback function (called at the start of the drag)

    • • (): any

      • Returns any

  Returns void

dnd_draggable_to_container

• dnd_draggable_to_container(name, diagram, container_name, callback?, onclickstart_callback?): void

• Create a drag and drop draggable that is positioned into an existing container

  Parameters

  • name: string

    name of the draggable
  • diagram: Diagram

    diagram of the draggable
  • container_name: string

    name of the container
  • Optionalcallback: ((name: string, container: string) => any)

    callback function (called after the draggable is moved)

    • • (name, container): any

      • Parameters

        • name: string
        • container: string

        Returns any

  • Optionalonclickstart_callback: (() => any)

    callback function (called at the start of the drag)

    • • (): any

      • Returns any

  Returns void

dnd_initial_draw

• dnd_initial_draw(): void

• Returns void

dnd_move_to_container

• dnd_move_to_container(name, container_name): void

• Move a draggable to a container

  Parameters

  • name: string

    name of the draggable
  • container_name: string

    name of the container

  Returns void

dnd_register_drop_outside_callback

• dnd_register_drop_outside_callback(callback): void

• Register a callback function when a draggable is dropped outside of a container

  Parameters

  • callback: ((name: string) => any)

    callback function

    • • (name): any

      • Parameters

        • name: string

        Returns any

  Returns void

dnd_register_move_validation_function

• dnd_register_move_validation_function(fun): void

• Register a validation function when a draggable is moved to a container If the function return false, the draggable will not be moved

  Parameters

  • fun: ((draggable_name: string, target_name: string) => boolean)

    validation function

    • • (draggable_name, target_name): boolean

      • Parameters

        • draggable_name: string
        • target_name: string

        Returns boolean

  Returns void

dnd_reorder_tabindex

• dnd_reorder_tabindex(container_names): void

• reorder the tabindex of the containers

  Parameters

  • container_names: string[]

  Returns void

drag_and_drop_initial_draw

• drag_and_drop_initial_draw(): void

• alias for dnd_initial_draw

  Returns void

draw

• draw(): void

• Returns void

get

• get(variable_name): any

• Parameters

  • variable_name: string

  Returns any

get_diagram_svg

• get_diagram_svg(): SVGSVGElement

• Returns SVGSVGElement

get_dnd_container_content_size

• get_dnd_container_content_size(container_name): [number, number]

• Get the content size of a container

  Parameters

  • container_name: string

  Returns [number, number]

get_dnd_data

• get_dnd_data(): DragAndDropData

• Get the data of the drag and drop objects with the format: {container:string, content:string[]}[]

  Returns DragAndDropData

get_svg_element

• get_svg_element(metaname, force_recreate?): SVGSVGElement

• Parameters

  • metaname: string
  • force_recreate: boolean = false

  Returns SVGSVGElement

isTargetingDocument

• isTargetingDocument(): boolean

• Returns boolean

label

• label(variable_name, value, display_format_func?): void

• Parameters

  • variable_name: string
  • value: any
  • display_format_func: formatFunction = defaultFormat_f

  Returns void

locator

• locator(variable_name, value, radius, color?, track_diagram?, blink?, callback?): void

• Create a locator Locator is a draggable object that contain 2D coordinate information

  Parameters

  • variable_name: string

    name of the variable
  • value: Vector2

    initial value
  • radius: number

    radius of the locator draggable object
  • color: string = 'blue'

    color of the locator
  • Optionaltrack_diagram: Diagram

    if provided, the locator will snap to the closest point on the diagram
  • blink: boolean = true
  • Optionalcallback: ((locator_name: string, position: Vector2) => any)
    • • (locator_name, position): any

      • Parameters

        • locator_name: string
        • position: Vector2

        Returns any

  Returns void

locator_custom

• locator_custom(variable_name, value, diagram, track_diagram?, blink?, callback?, callback_rightclick?): void

• Create a locator with custom diagram object

  Parameters

  • variable_name: string

    name of the variable
  • value: Vector2

    initial value
  • diagram: Diagram

    diagram of the locator
  • Optionaltrack_diagram: Diagram

    if provided, the locator will snap to the closest point on the diagram
  • blink: boolean = true

    if true, the locator will blink
  • Optionalcallback: ((locator_name: string, position: Vector2) => any)

    callback function that will be called when the locator is moved

    • • (locator_name, position): any

      • Parameters

        • locator_name: string
        • position: Vector2

        Returns any

  • Optionalcallback_rightclick: ((locator_name: string) => any)

    callback function that will be called when the locator is right clicked

    • • (locator_name): any

      • Parameters

        • locator_name: string

        Returns any

  Returns void

locator_draw

• locator_draw(): void

• WARNING: deprecated use locator_initial_draw instead

  Returns void

locator_initial_draw

• locator_initial_draw(): void

• Returns void

remove_button

• remove_button(name): void

• Parameters

  • name: string

  Returns void

remove_dnd_draggable

• remove_dnd_draggable(name): void

• Parameters

  • name: string

  Returns void

remove_locator

• remove_locator(name): void

• Parameters

  • name: string

  Returns void

removeRegisteredEventListener

• removeRegisteredEventListener(): void

• Returns void

set

• set(variable_name, val): void

• Parameters

  • variable_name: string
  • val: any

  Returns void

set_dnd_content_sort

• set_dnd_content_sort(sort_content): void

• Set whether the content of the container should be sorted or not

  Parameters

  • sort_content: boolean

  Returns void

set_dnd_data

• set_dnd_data(data): void

• Set the data of the drag and drop objects with the format: {container:string, content:string[]}[]

  Parameters

  • data: DragAndDropData

  Returns void

set_focus_padding

• set_focus_padding(padding): void

• Parameters

  • padding: number

  Returns void

slider

• slider(variable_name, min?, max?, value?, step?, time?, display_format_func?): void

• Create a slider

  Parameters

  • variable_name: string

    name of the variable
  • min: number = 0

    minimum value
  • max: number = 100

    maximum value
  • value: number = 50

    initial value
  • step: number = -1

    step size
  • time: number = 1.5

    time of the animation in milliseconds
  • display_format_func: formatFunction = defaultFormat_f

    function to format the display of the value

  Returns void