API / geotoolkit / controls / tools / RubberBand / RubberBand
tools.RubberBand.RubberBand
RubberBand tool supports several events as shown below and it has several built-in functions to customise the tool.
The rendering is based on the RubberBandRenderMode.
Events [Events](../enums/geotoolkit.controls.tools.rubberband.events.md)
| Event | Arguments | Description |
|---|---|---|
| onZoomStart | [RubberBandEventArgs](../classes/geotoolkit.controls.tools.rubberbandeventargs.rubberbandeventargs.md) | This Event is fired when the RubberBand Tool left button click occurs. |
| onZoomEnd | [RubberBandEventArgs](../classes/geotoolkit.controls.tools.rubberbandeventargs.rubberbandeventargs.md) | This Event is fired when the RubberBand Tool left button click is released. |
| onRangeChanged | [RubberBandEventArgs](../classes/geotoolkit.controls.tools.rubberbandeventargs.rubberbandeventargs.md) | This Event is fired when the RubberBand Tool is moving. |
Tool name: 'rubberband'
Example
// In order to enable the rubberband tool for widgets:
widget.getToolByName('rubberband').setEnabled(true);Example
//To get the dimensions of a selected region from the rubber band tool:
import {Events} from '@int/geotoolkit/controls/tools/RubberBand';
...
rubberband.on(Events.onZoomEnd, (eventType, sender, evt) => {
// evt is instance of @int/geotoolkit/controls/tools/RubberBandEventArgs
const rect = evt.getArea();
...
} );Example
//To create new horizontal rubber-band tool and attach it to the specific group, it will be limited by group model limits
import {RubberBandRenderMode} from '@int/geotoolkit/controls/tools/RubberBandRenderMode';
new RubberBand(group, RubberBandRenderMode.Horizontal)↳
RubberBand
Constructors
| [new RubberBand(layer, mode)](/solutions/geotoolkit/apis/classes/geotoolkit.controls.tools.rubberband.rubberband.md#new rubberband(layer, mode)) | [new RubberBand(options)](/solutions/geotoolkit/apis/classes/geotoolkit.controls.tools.rubberband.rubberband.md#new rubberband(options)) |
|---|
Methods
Css Properties
| Name | Type | Description |
|---|---|---|
acceptemptyrect | boolean | Does rubber band accept empty rect |
autodisabled | boolean | Does rubber band automatically disabled on zoom end |
enabled | boolean | Enabled state |
fillstyle | string | Rubber band fillstyle |
fillstyle | FillStyle | Rubber band fillstyle |
fillstyle-color | string | Color in CSS form |
fillstyle-evenoddmode | boolean | Even-odd fill mode |
fillstyle-fillpattern | Pattern | Pattern |
fillstyle-fillpattern-containername | string | An optional container name, which creates an image pattern. This parameter is used for serialization if you want to save are reference to pattern instead of the pattern itself |
fillstyle-fillpattern-patternname | string | Name of this pattern for indexing |
fillstyle-fillpattern-scalable | boolean | Flag that sets scalability of the pattern coordinates, or relative to the shape it is filling (It is not supported) |
fillstyle-foreground | string | Foreground color |
fillstyle-pattern | Pattern | Pattern |
layer | CompositeNode | Manipulator layer |
layer-clipping | boolean | Enable clipping, this does not consider the clipstyle, it is related to bounds-clipping |
layer-clipstyle | ClipStyle | Clipping style |
layer-clipstyle-evenodd | boolean | True if evenodd mode is on ('nonzero' mode otherwise) |
layer-clipstyle-geometry | GraphicsPath | Clipping geometry |
layer-clipstyle-geometry-bounds | Rect | Bounds |
layer-clipstyle-geometry-bounds-height | number | Height |
layer-clipstyle-geometry-bounds-readonly | boolean | Readonly |
layer-clipstyle-geometry-bounds-width | number | Width |
layer-clipstyle-geometry-bounds-x | number | Left |
layer-clipstyle-geometry-bounds-y | number | Top |
layer-clipstyle | GraphicsPath | Clipping style |
layer-cssclass | string | The css class name of this node |
layer-csscursor | string | CSS cursor associated with node |
layer-cssstyle | string | CSS style to be applied to inserted elements |
layer-id | string | number | Id of the node, its a unique identifier |
layer-infinity | boolean | Mode to render outside the model limits |
layer-localtransform | Transformation | Local transformation |
layer-localtransform-dx | number | X axis translation |
layer-localtransform-dy | number | Y axis translation |
layer-localtransform-xx | number | X scale |
layer-localtransform-xy | number | Xy skew |
layer-localtransform-yx | number | Yx skew |
layer-localtransform-yy | number | Y scale |
layer-margins | number | string | It has properties for specifying the margins for each side |
layer-name | string | Name of the node. It is often used for debugging purposes or to simplify queries |
layer-opacity | number | Node opacity (from 0 to 1). If it is undefined or null it inherits property from the parent. It changes globalAlpha on the rendering context |
layer-opacityblendmode | BlendMode | Node opacity mode to blend it |
layer-scalescrollstrategy | ScaleScrollStrategy | Scale scroll strategy |
layer-scalescrollstrategy-enabled | boolean | Enable flag |
layer-selectable | boolean | Selectable node, a boolean to determine if selection should consider this node |
layer-tag | any | Custom information associated with node. It is a user object which can be used by client code to store information or attach an application object to the shape |
layer-transform | string | Additional CSS transformation applied to node or 'none' |
layer-transform | Transformation | Additional CSS transformation applied to node or 'none' |
layer-visible | boolean | Visibility of the node, a boolean to determine if the node should be rendered or not |
layer-z-index | number | Define node z-index |
linestyle | string | Rubber band linestyle |
linestyle | LineStyle | Rubber band linestyle |
linestyle-color | string | Color in CSS form |
linestyle-fill | string | Optional fill style to be used to fill lines generated with this style |
linestyle-fill | FillStyle | Optional fill style to be used to fill lines generated with this style |
linestyle-linecap | CapStyle | The line cap style |
linestyle-linedashoffset | number | Line dash offset of dashed line |
linestyle-linejoin | JoinStyle | The line join style |
linestyle-pixelsnapmode | boolean | Pixel Snap Mode, default( |
linestyle-scalable | boolean | True if width should depend on transformation |
linestyle-unit | string | Optional unit for the width |
linestyle-width | number | string | The line thickness |
mode | RubberBandRenderMode | Rubber mode |
mouseradius | number | Device radius for mouse events |
name | string | Name of the tool used like cross-hair etc |
restrictionarea | Rect | Specify restriction area |
touchradius | number | Device radius for touch events |
Constructors
• new RubberBand(layer?, mode?)
Creates RubberBand
| Name | Type | Description |
|---|---|---|
Optional layer | CompositeNode<Node> | manipulator layer |
Optional mode | RubberBandRenderMode | name of the tool used like rubberband etc |
AbstractRubberTool.constructor
• new RubberBand(options?)
Creates RubberBand
| Name | Type | Description |
|---|---|---|
Optional options | Options | properties object |
AbstractRubberTool.constructor
Methods
▸ addListener(eventName, listener): RubberBand
add event listener. The listener receives the message when the system event happens.
Deprecated
since 4.0 use .on() instead. Note that 3 args callback should be used in subscription via .on(): (eventType, source, args)
| Name | Type | Description |
|---|---|---|
eventName | string | event name or unique event identifier |
listener | Function | the event listener |
AbstractRubberTool.addListener
▸ captureMouseUp(): void
listen to window mouse events in order to catch a mouse up action outside of the tool container DOM element. useful for example when you pan and release click outside of DOM element.
void
AbstractRubberTool.captureMouseUp
▸ dispose(): void
Dispose tool.
void
▸ fireEvent(eventName, eventArgs?): void
This method is Protected. Fire an Event.
Deprecated
since 4.0 use .notify() instead. Note that 3 args callback should be used in subscription via .on()
| Name | Type | Description |
|---|---|---|
eventName | string | event name |
Optional eventArgs | any | contains info of the event |
void
▸ getAcceptEmptyRect(): boolean
Return empty rect flag
boolean
empty rect flag
▸ getClassName(): string
string
AbstractRubberTool.getClassName
▸ Protected getContainerModelLimits(): Rect
Return container model limits in which rubber band is drawn. By default it returns manipulator layer visible model limits
area of model limits
AbstractRubberTool.getContainerModelLimits
▸ Protected getEventRadius(eventArgs): number
Returns device radius for the provided event
| Name | Type | Description |
|---|---|---|
eventArgs | EventArgs | contains info of the event |
number
AbstractRubberTool.getEventRadius
▸ getFillStyle(): FillStyle
Return fill style
fillStyle current fill style
▸ getLineStyle(): LineStyle
Return line style
lineStyle current line style
▸ getManipulatorLayer(): CompositeNode<Node>
return manipulator layer
layer
AbstractRubberTool.getManipulatorLayer
▸ getMinDimension(): Dimension
Get minimum selection dimension
▸ getMinDimensionMode(): MinimumDimensionMode
Get minimum dimension mode
▸ getMode(): RubberBandRenderMode
Gets rubberband rendering mode
size mode
▸ getMouseButtons(): MouseButtons
Gets mouse buttons set for selection
this
AbstractRubberTool.getMouseButtons
▸ getMouseRadius(): number
Returns current device radius for mouse events
number
AbstractRubberTool.getMouseRadius
▸ getName(): string
return tool name if any
string
name of the tool
▸ getParentTool(): AbstractCompositeTool
Gets parent tool
parent tool
AbstractRubberTool.getParentTool
▸ getProperties(context?): OptionsOut
Gets all the properties pertaining to this object
| Name | Type | Description |
|---|---|---|
Optional context | ISerializationContext | serialization context |
properties object
AbstractRubberTool.getProperties
▸ getProperty(name): any
Gets dynamic property by name. These properties can be used as a property bags
| Name | Type | Description |
|---|---|---|
name | string | property name |
any
AbstractRubberTool.getProperty
▸ getPropertyKeys(): string[]
Returns known properties keys
string[]
AbstractRubberTool.getPropertyKeys
▸ getRestrictionArea(): Rect
Get restriction area
restriction area
▸ getRoot(): AbstractCompositeTool
Gets root tool
parent tool
▸ getRubberBandRenderMode(): RubberBandRenderMode
Return the way the rectangle is displayed
AbstractRubberTool.getRubberBandRenderMode
▸ getTouchRadius(): number
Returns current device radius for touch events
number
AbstractRubberTool.getTouchRadius
▸ hasEventListener(type, callback?): boolean
Check if a list of event listeners for this type contains this listener
| Name | Type | Description |
|---|---|---|
type | string | type of event or property |
Optional callback | Function | to be called, if null, check if any callback is registered |
boolean
AbstractRubberTool.hasEventListener
▸ isActive(): boolean
return active state
boolean
▸ isAutoDisabled(): boolean
Get auto-disabled mode
boolean
does the RB automatically disable itself on zoom End
▸ isDisposed(): boolean
Returns whether this object has been disposed
boolean
▸ Protected isDoubleClick(point, eventArgs?): boolean
returns true if double clicked
| Name | Type | Description |
|---|---|---|
point | Point | Click point |
Optional eventArgs | EventArgs | optional event args to verify double click |
boolean
AbstractRubberTool.isDoubleClick
▸ isEnabled(): boolean
returns enable state
boolean
state
▸ isSilent(): boolean
Return true if the event dispatcher doesn't notify any events
boolean
▸ isTouchEvent(eventArgs): boolean
return true if the event is a touch event and false otherwise.
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | contains info of the event |
boolean
AbstractRubberTool.isTouchEvent
▸ notify<E>(type, source, args?): RubberBand
Notify listeners
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | event types |
source | RubberBand | of the event |
Optional args | EventMap[E] | arguments of the event |
this
▸ off<E>(type?, callback?): RubberBand
Detach listener on event. Calling .off() with no arguments removes all attached listeners. Calling .off(type) with no callback removes all attached listeners for specific type.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
Optional type | E | type of the event |
Optional callback | (eventType: E, sender: RubberBand, args: EventMap[E]) => void | function to be called |
this
▸ on<E>(type, callback): RubberBand
Attach listener on event that will be called whenever the specified event is delivered to the target
If the callback function is already in the list of event listeners for this target, the function is not added a second time.
If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an "on" call, the second function will also be added to the list of event listeners for that target.
TypeScript hint: in case of creating derived tool with own events, EventMap should be extended and .on() and .notify() methods redeclared, see sample.Example
// Using in derived tool
import type {EventMap as EventMapBase} from '@int/geotoolkit/controls/tools/AbstractTool';
export type EventMap = EventMapBase & {
[MyToolEvents.onValueChanged]: MyToolEventArgs
}
export enum MyToolEvents {
onValueChanged = 'onValueChanged'
}
export class MyTool extends AbstractTool {
public declare on: <E extends keyof EventMap>(type: E, callback: (eventType: E, sender: this, args: EventMap[E]) => void) => this;
protected declare notify: <E extends keyof EventMap>(type: E, source: AbstractTool, args?: EventMap[E]) => this;
public declare off: <E extends keyof EventMap>(type: E, callback?: (eventType: E, sender: this, args: EventMap[E]) => void) => this;
// ...
}| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | type of event or property |
callback | (eventType: E, sender: RubberBand, args: EventMap[E]) => void | to be called |
▸ Protected onActiveStateChanged(): void
Fires
void
AbstractRubberTool.onActiveStateChanged
▸ Protected onEnabledStateChanged(): void
Fires
void
AbstractRubberTool.onEnabledStateChanged
▸ Protected onMouseDown(eventArgs): void
| Name | Type |
|---|---|
eventArgs | EventArgs |
void
▸ Protected onMouseMove(eventArgs): void
| Name | Type |
|---|---|
eventArgs | EventArgs |
void
▸ Protected onMouseUp(eventArgs): void
| Name | Type |
|---|---|
eventArgs | EventArgs |
void
▸ pageToCanvas(eventArgs, externalPlot?): Object
return position relative to the canvas
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | parentElement the parent HTML element |
Optional externalPlot | Plot | plot |
Object
| Name | Type |
|---|---|
x | number |
y | number |
AbstractRubberTool.pageToCanvas
▸ pointToModel(model, eventArgs): Point
converts device coordinates to inner coordinates of node
| Name | Type | Description |
|---|---|---|
model | Node | the model |
eventArgs | Point | EventArgs | arguments of the event OR point in device (plot) coordinates. |
AbstractRubberTool.pointToModel
▸ removeListener(eventName, listener?): RubberBand
remove event listener. The listener reveives the message when the system event happens.
Deprecated
since 4.0 use .off() instead.
| Name | Type | Description |
|---|---|---|
eventName | string | event name |
Optional listener | Function | Function[] | the event listener, if null, remove all listeners for the event |
AbstractRubberTool.removeListener
▸ setAcceptEmptyRect(acceptEmptyRect): RubberBand
Set empty rect flag
| Name | Type | Description |
|---|---|---|
acceptEmptyRect | boolean | empty rect flag |
this
▸ setActive(active): RubberBand
set active state
Fires
| Name | Type | Description |
|---|---|---|
active | boolean | set active state |
▸ setAutoDisabled(mode): RubberBand
Set auto-disabled mode
| Name | Type | Description |
|---|---|---|
mode | boolean | does the RB automatically disable itself on zoom End |
this
▸ setEnabled(enabled): RubberBand
set enable state
Fires
Fires
| Name | Type | Description |
|---|---|---|
enabled | boolean | sets the enabled state |
this
▸ setFillStyle(fillStyle, merge?): RubberBand
Sets fill style
| Name | Type | Description |
|---|---|---|
fillStyle | Type | a new fill style |
Optional merge | boolean | true if you want to merge fillStyle with existing attribute, false by default |
this
▸ setLineStyle(lineStyle, merge?): RubberBand
Sets line style
| Name | Type | Description |
|---|---|---|
lineStyle | Type | line style or options |
Optional merge | boolean | true if you want to merge lineStyle with existing attribute, false by default |
this
▸ setMinDimension(minDimension, isInDevice?): RubberBand
set minimum selection dimension
| Name | Type | Description |
|---|---|---|
minDimension | Dimension | minimum selection dimension |
Optional isInDevice | boolean | true if in device coordinates |
this
▸ setMinDimensionMode(mode): RubberBand
set minimum dimension mode
Example
import {Dimension} from '@int/geotoolkit/util/Dimension';
import {MinimumDimensionMode} from '@int/geotoolkit/controls/tools/RubberBand';
...
// The rubberband tool has several configuration options for controlling the maximum amount of zoom.
// First get rubber band tool
const rubberBandTool = widget.getToolByName('rubberband');
// The setMinDimension property can be used to limit the minimum box zoom to some fixed amount.
// Optional second parameter specifies whether to use model or device coordinates;
const minVerticalUnitsZoom = 50;
const useDeviceCoordinates = false;
rubberBandTool.setMinDimension(new Dimension(0, minVerticalUnitsZoom), useDeviceCoordinates);
// The setMinDimensionMode can be used to specify how the start/end should be adjusted if the minimum zoom level limit is reached.
// The smartMode expands highlighted area around selection
rubberBandTool.setMinDimensionMode(MinimumDimensionMode.Smart);
// The hardMode expands highlighted area from the start point
rubberBandTool.setMinDimensionMode(MinimumDimensionMode.Hard);| Name | Type | Description |
|---|---|---|
mode | MinimumDimensionMode | minimum dimension mode |
this
▸ setMode(mode): RubberBand
Sets rubberband rendering mode
| Name | Type | Description |
|---|---|---|
mode | RubberBandRenderMode | rubberband rendering mode |
this
▸ setMouseButtons(button): RubberBand
Sets mouse buttons for selection
| Name | Type | Description |
|---|---|---|
button | MouseButtons | mouse button |
this
AbstractRubberTool.setMouseButtons
▸ setMouseRadius(radius): RubberBand
Sets device radius for mouse events
| Name | Type | Description |
|---|---|---|
radius | number | radius for mouse events |
this
AbstractRubberTool.setMouseRadius
▸ setName(name): RubberBand
set tool name
| Name | Type | Description |
|---|---|---|
name | string | the tool name |
▸ setProperties(properties?): RubberBand
Sets all the properties pertaining to this object
| Name | Type | Description |
|---|---|---|
Optional properties | Options | An object containing the properties to set |
this
AbstractRubberTool.setProperties
▸ setProperty(name, value): RubberBand
Sets dynamic property by name
| Name | Type | Description |
|---|---|---|
name | string | property name |
value | any | property value |
this
AbstractRubberTool.setProperty
▸ setRestrictionArea(restrictionArea): RubberBand
Set restriction area
| Name | Type | Description |
|---|---|---|
restrictionArea | Rect | restriction area |
▸ setRubberBandRenderMode(mode): RubberBand
Set the way the rectangle has to be displayed
| Name | Type | Description |
|---|---|---|
mode | RubberBandRenderMode | the way the rectangle has to be displayed |
AbstractRubberTool.setRubberBandRenderMode
▸ setSettings(options?): RubberBand
Set Settings
| Name | Type | Description |
|---|---|---|
Optional options | Options | object containing options |
this
▸ setSilent(bool): RubberBand
Set silent mode
| Name | Type | Description |
|---|---|---|
bool | boolean | flag to enable silent mode |
this
▸ setSlotEnabled(eventName, value, target?): RubberBand
Sets slot enabled
| Name | Type | Description |
|---|---|---|
eventName | string | eventName |
value | boolean | value |
Optional target | EventTarget | target |
AbstractRubberTool.setSlotEnabled
▸ setSlots(slots?, merge?): RubberBand
Sets new slots.
Example
const slots = {
'pointerdown': (event: EventArgs) => {
// event is an instance of @int/geotoolkit/controls/tools/EventArgs
...
}
};
tool.setSlots(slots);| Name | Type | Description |
|---|---|---|
Optional slots | Record<string, Slot | Slot[] | (eventArgs: EventArgs) => void> | type of system events |
Optional merge | boolean | set to true if you want to merge with existing slots |
this
▸ setTarget(node): RubberBand
Sets callback for selecting target Node from scene
| Name | Type | Description |
|---|---|---|
node | Node | target node |
▸ setTouchRadius(radius): RubberBand
Sets device radius for touch events
| Name | Type | Description |
|---|---|---|
radius | number | radius for touch events |
this
AbstractRubberTool.setTouchRadius
▸ Protected start(eventArgs?): RubberBand
start
| Name | Type | Description |
|---|---|---|
Optional eventArgs | EventArgs | event args |
▸ Protected stop(): RubberBand
stop
▸ toggle(): RubberBand
switch enable state to opposite state
▸ Static canvasToClient(plotPoint, plot): Point
Convert plot coordinates to global coordinates
AbstractRubberTool.canvasToClient
▸ Static clientToCanvas(nativeEvent, plot): Point
Convert global coordinates to plot coordinates
| Name | Type | Description |
|---|---|---|
nativeEvent | Event | native browser event |
plot | Plot | plot with canvas |
AbstractRubberTool.clientToCanvas
▸ Static getClassName(): string
string
AbstractRubberTool.getClassName
▸ Static getExclusiveTool(plot): AbstractTool
return exclusive tool associated with plot
| Name | Type | Description |
|---|---|---|
plot | Plot | plot |
tool
AbstractRubberTool.getExclusiveTool
▸ Static getNativeEventName(eventName): string[]
Returns native event name
| Name | Type | Description |
|---|---|---|
eventName | string | W3C Pointer Events Recommendation name |
string[]
AbstractRubberTool.getNativeEventName
▸ Static isTouchEvent(eventArgs): eventArgs is TouchEvent
return true if the event is a touch event and false otherwise.
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | contains info of the event |
eventArgs is TouchEvent
AbstractRubberTool.isTouchEvent
▸ Static lock(plot, tool): void
Set exclusive tool for plot
| Name | Type | Description |
|---|---|---|
plot | Plot | plot |
tool | AbstractTool | tool |
void
▸ Static setDefaultMouseRadius(radius): void
Sets default device radius for mouse events
| Name | Type | Description |
|---|---|---|
radius | number | radius for mouse events |
void
AbstractRubberTool.setDefaultMouseRadius
▸ Static setDefaultTouchRadius(radius): void
Sets default device radius for touch events
| Name | Type | Description |
|---|---|---|
radius | number | radius for touch events |
void
AbstractRubberTool.setDefaultTouchRadius
▸ Static unlock(value): void
Remove exclusive tool from plot
| Name | Type | Description |
|---|---|---|
value | AbstractTool | Plot | value |
void