proton-native/docs/component_APIs/area.md

Area

A component onto which area components like rectangles or circles can be drawn.

Some props can be applied to all area components (including Area itself and children): see Area Props.

import React, { Component } from 'react';

import { render, Window, App, Area } from 'proton-native';

class Example extends Component {
  render() {
    return (
      <App>
        <Window title="Example" size={{ w: 500, h: 500 }}>
          <Area stroke="red" strokeWidth="10">
            <Area.Rectangle
              x="10"
              y="10"
              width="100"
              height="200"
              fill="blue"
            />
          </Area>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Props

• visible
• scrolling
• onMouseMove
• onMouseUp
• onMouseDown
• onMouseEnter
• onMouseLeave
• onKeyUp
• onKeyDown
• onSizeChange

Reference

visible

Whether the area can be seen.

Type	Required	Default
bool	No	true

scrolling

If set, a scrolling area is created. The specified width and height specify the size of the inner scrolling view.

Type	Required
object {h: number, w: number}	No

onMouseMove

Called when the mouse is moved over the area

Type	Required
function({x: number, y: number, width: number, height: number, buttons: Array<number>})	No

onMouseUp

Not working at the moment

Called when releasing a mouse button over the area.

Type	Required
function({x: number, y: number, width: number, height: number, button: number})	No

onMouseDown

Called when pressing a mouse button over the area. For a double click, the second click would fire an event with count: 2.

Type	Required
function({x: number, y: number, width: number, height: number, button: number, count: number})	No

onMouseEnter

Called when the mouse enters the area.

Type	Required
function()	No

onMouseLeave

Called when the mouse leaves the area.

Type	Required
function()	No

onKeyUp

Called when pressing a key. Return true to signal that this event got handled (always returning true will disable any menu accelerators).

Type	Required
function({key: string, extKey: string, modifierKey: string, modifiers: Array<string>})	No

onKeyDown

Called when releasing a key. Return true to signal that this event got handled (always returning true will disable any menu accelerators).

Type	Required
function({key: string, extKey: string, modifierKey: string, modifiers: Array<string>})	No

onSizeChange

Called when the area's size has changed.

Type	Required
function({ width: number, height: number })	No