Class Interactive

constructor

• new Interactive(
      control_container_div: HTMLElement,
      diagram_outer_svg?: SVGSVGElement,
      inp_object_?: { [key: string]: any },
      event_target?: HTML_INT_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
  • 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: string,
      diagram: Diagram,
      diagram_pressed: Diagram,
      callback: () => any,
  ): 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

  Returns void

button_click_hover

• button_click_hover(
      name: string,
      diagram: Diagram,
      diagram_pressed: Diagram,
      diagram_hover: Diagram,
      callback: () => any,
  ): 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

  Returns void

button_toggle

• button_toggle(
      name: string,
      diagram_on: Diagram,
      diagram_off: Diagram,
      state?: boolean,
      callback?: (name: string, state: boolean) => any,
  ): 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

  Returns void

custom_object

• custom_object(id: string, classlist: string[], diagram: 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: string, classlist: string[], diagram: 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: string,
      diagram: Diagram,
      capacity?: number,
      config?: dnd_container_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: string,
      diagram: Diagram,
      container_diagram?: Diagram,
      callback?: (name: string, pos: Vector2) => any,
      onclickstart_callback?: () => any,
  ): 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)
  • Optionalonclickstart_callback: () => any

    callback function (called at the start of the drag)

  Returns void

dnd_draggable_to_container

• dnd_draggable_to_container(
      name: string,
      diagram: Diagram,
      container_name: string,
      callback?: (name: string, container: string) => any,
      onclickstart_callback?: () => any,
  ): 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)
  • Optionalonclickstart_callback: () => any

    callback function (called at the start of the drag)

  Returns void

dnd_initial_draw

• dnd_initial_draw(): void

  Returns void

dnd_move_to_container

• dnd_move_to_container(name: string, container_name: string): 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: (name: string) => any): void

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

  Parameters

  • callback: (name: string) => any

    callback function

  Returns void

dnd_register_move_validation_function

• dnd_register_move_validation_function(
      fun: (draggable_name: string, target_name: string) => boolean,
  ): 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

  Returns void

dnd_reorder_tabindex

• dnd_reorder_tabindex(container_names: string[]): 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: string): 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: string): [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: string, force_recreate?: boolean): SVGSVGElement

  Parameters

  • metaname: string
  • force_recreate: boolean = false

  Returns SVGSVGElement

isTargetingDocument

• isTargetingDocument(): boolean

  Returns boolean

label

• label(
      variable_name: string,
      value: any,
      display_format_func?: formatFunction,
  ): void

  Parameters

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

  Returns void

locator

• locator(
      variable_name: string,
      value: Vector2,
      radius: number,
      color?: string,
      track_diagram?: Diagram,
      blink?: boolean,
      callback?: (locator_name: string, position: Vector2) => any,
  ): 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

  Returns void

locator_custom

• locator_custom(
      variable_name: string,
      value: Vector2,
      diagram: Diagram,
      track_diagram?: Diagram,
      blink?: boolean,
      callback?: (locator_name: string, position: Vector2) => any,
      callback_rightclick?: (locator_name: string) => any,
  ): 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
  • Optionalcallback_rightclick: (locator_name: string) => any

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

  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: string): void

  Parameters

  • name: string

  Returns void

remove_dnd_draggable

• remove_dnd_draggable(name: string): void

  Parameters

  • name: string

  Returns void

remove_locator

• remove_locator(name: string): void

  Parameters

  • name: string

  Returns void

removeRegisteredEventListener

• removeRegisteredEventListener(): void

  Returns void

set

• set(variable_name: string, val: any): void

  Parameters

  • variable_name: string
  • val: any

  Returns void

set_dnd_content_sort

• set_dnd_content_sort(sort_content: boolean): 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: DragAndDropData): 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: number): void

  Parameters

  • padding: number

  Returns void

set_global_scale_factor

• set_global_scale_factor(factor: number): void

  Parameters

  • factor: number

  Returns void

slider

• slider(
      variable_name: string,
      min?: number,
      max?: number,
      value?: number,
      step?: number,
      time?: number,
      display_format_func?: formatFunction,
  ): 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