Skip to content

Commit f0bdb43

Browse files
Ni55aNNi55aN
committed
update positionWatcher and dragging
1 parent 08c6e7b commit f0bdb43

9 files changed

Lines changed: 44 additions & 35 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
"@angular/common": ">= 12 < 17",
3333
"@angular/core": ">= 12 < 17",
3434
"@angular/elements": ">= 12 < 17",
35-
"rete": "^2.0.0-beta.8",
36-
"rete-area-plugin": "^2.0.0-beta.10",
37-
"rete-render-utils": "^2.0.0-beta.11",
35+
"rete": "^2.0.0-beta.9",
36+
"rete-area-plugin": "^2.0.0-beta.11",
37+
"rete-render-utils": "^2.0.0-beta.12",
3838
"rxjs": ">=6.6.0",
3939
"tslib": "^2.3.0",
4040
"zone.js": "~0.11.4 || ~0.12.0 || ~0.13.0"

‎src/presets/classic/index.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Type } from '@angular/core';
2-
import { ClassicPreset, getUID } from 'rete';
3-
import { AreaPlugin } from 'rete-area-plugin';
2+
import { ClassicPreset, getUID, Scope } from 'rete';
43
import { classicConnectionPath, loopConnectionPath, SocketPositionWatcher, getDOMSocketPosition } from 'rete-render-utils';
54
import { AngularArea2D, ClassicScheme, ExtractPayload } from './types';
65
import { NodeComponent } from './components/node/node.component';
@@ -9,18 +8,18 @@ import { ControlComponent } from './components/control/control.component';
98
import { ConnectionComponent } from './components/connection/connection.component';
109
import { ConnectionWrapperComponent } from './components/connection/connection-wrapper.component';
1110
import { Position } from '../../types';
12-
import { RenderPreset } from '../types'
11+
import { RenderPreset } from '../types'
1312

1413
type AngularComponent = Type<any>
15-
type CustomizationProps <Schemes extends ClassicScheme>= {
14+
type CustomizationProps<Schemes extends ClassicScheme> = {
1615
node?: (data: ExtractPayload<Schemes, 'node'>) => AngularComponent | null
1716
connection?: (data: ExtractPayload<Schemes, 'connection'>) => AngularComponent | null
1817
socket?: (data: ExtractPayload<Schemes, 'socket'>) => AngularComponent | null
1918
control?: (data: ExtractPayload<Schemes, 'control'>) => AngularComponent | null
2019
}
2120

2221
type ClassicProps<Schemes extends ClassicScheme, K> = {
23-
socketPositionWatcher?: SocketPositionWatcher<AreaPlugin<Schemes, K>>
22+
socketPositionWatcher?: SocketPositionWatcher<Scope<never, [K]>>
2423
customize?: CustomizationProps<Schemes>
2524
}
2625

@@ -35,9 +34,7 @@ export function setup<Schemes extends ClassicScheme, K extends AngularArea2D<Sch
3534

3635
return {
3736
attach(plugin) {
38-
if (!plugin.hasParent()) return
39-
40-
positionWatcher.attach(plugin.parentScope<AreaPlugin<Schemes, any>>(AreaPlugin))
37+
positionWatcher.attach(plugin as unknown as Scope<never, [K]>)
4138
},
4239
update(context) {
4340
const data = context.data.payload
@@ -89,13 +86,16 @@ export function setup<Schemes extends ClassicScheme, K extends AngularArea2D<Sch
8986
end: end || ((change: any) => positionWatcher.listen(target, 'input', targetInput, change)),
9087
path: async (start, end) => {
9188
const response = await plugin.emit({ type: 'connectionpath', data: { payload, points: [start, end] } })
89+
90+
if (!response) return ''
91+
9292
const { path, points } = response.data
9393
const curvature = 0.3
9494

9595
if (!path && points.length !== 2) throw new Error('cannot render connection with a custom number of points')
9696
if (!path) return payload.isLoop
97-
? loopConnectionPath(points as [Position, Position], curvature, 120)
98-
: classicConnectionPath(points as [Position, Position], curvature)
97+
? loopConnectionPath(points as [Position, Position], curvature, 120)
98+
: classicConnectionPath(points as [Position, Position], curvature)
9999

100100
return path
101101
},
@@ -120,8 +120,8 @@ export function setup<Schemes extends ClassicScheme, K extends AngularArea2D<Sch
120120
? control(context.data)
121121
: (
122122
context.data.payload instanceof ClassicPreset.InputControl
123-
? ControlComponent
124-
: null
123+
? ControlComponent
124+
: null
125125
)
126126

127127
if (component) {

‎src/presets/context-menu/components/item/item.component.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,23 @@ import { debounce } from '../../debounce';
1010
'data-testid': 'context-menu-item'
1111
}
1212
})
13-
export class ContextMenuItemComponent {
13+
export class ContextMenuItemComponent {
1414
@Input() subitems?: Item[]
1515
@Input() delay!: number
1616
@Output() select = new EventEmitter<void>();
1717
@Output() hide = new EventEmitter<void>();
1818

19-
@HostBinding('class.block') get block () { return true }
20-
@HostBinding('class.hasSubitems') get hasSubitems () { return this.subitems }
19+
@HostBinding('class.block') get block() { return true }
20+
@HostBinding('class.hasSubitems') get hasSubitems() { return this.subitems }
2121

2222
@HostListener('click', ['$event']) click(event: MouseEvent) {
2323
event.stopPropagation()
2424
this.select.emit()
2525
this.hide.emit()
2626
}
27+
@HostListener('pointerdown', ['$event']) pointerdown(event: PointerEvent) {
28+
event.stopPropagation()
29+
}
2730
@HostListener('wheel', ['$event']) wheel(event: MouseEvent) {
2831
event.stopPropagation()
2932
}
@@ -44,7 +47,7 @@ export class ContextMenuItemComponent {
4447
this.cdr.detectChanges()
4548
}
4649

47-
constructor(private cdr: ChangeDetectorRef) {
50+
constructor(private cdr: ChangeDetectorRef) {
4851
this.cdr.detach()
4952
}
5053
}

‎src/presets/minimap/components/mini-viewport/mini-viewport.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export class MiniViewportComponent {
1818
@Input() containerWidth!: number
1919
@Input() translate!: MinimapData['translate']
2020

21-
drag = useDrag((dx, dy) => this.onDrag(dx, dy))
21+
drag = useDrag((dx, dy) => this.onDrag(dx, dy), e => ({ x: e.pageX, y: e.pageY }))
2222

2323
@HostBinding('style.left') get styleLeft() {
2424
return this.px(this.scale(this.left))

‎src/presets/reroute/components/pin/pin.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ const pinSize = 20
1515
export class PinComponent implements OnChanges {
1616
@Input() position!: Position
1717
@Input() selected?: boolean
18+
@Input() getPointer!: () => Position
1819
@Output() menu = new EventEmitter<void>()
1920
@Output() translate = new EventEmitter<{ dx: number, dy: number }>()
2021
@Output() down = new EventEmitter<void>()
2122

2223
drag = useDrag((dx, dy) => {
2324
this.translate.emit({ dx, dy })
24-
})
25+
}, () => this.getPointer())
2526

2627
@HostBinding('class.selected') get _selected() {
2728
return this.selected
@@ -46,7 +47,7 @@ export class PinComponent implements OnChanges {
4647
this.menu.emit()
4748
}
4849

49-
constructor(private cdr: ChangeDetectorRef) {
50+
constructor(private cdr: ChangeDetectorRef) {
5051
// this.cdr.detach()
5152
}
5253

‎src/presets/reroute/components/pins/pins.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<reroute-pin *ngFor="let pin of pins; trackBy: track" [position]="pin.position" [selected]="pin.selected"
22
(menu)="menu && menu(pin.id)" (translate)="translate && translate(pin.id, $event.dx, $event.dy)"
3-
(down)="down && down(pin.id)"></reroute-pin>
3+
(down)="down && down(pin.id)" [getPointer]="getPointer"></reroute-pin>

‎src/presets/reroute/components/pins/pins.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
2-
import { Pin, PinData } from '../../types';
2+
import { Pin, PinData, Position } from '../../types';
33

44
@Component({
55
templateUrl: './pins.component.html'
@@ -10,8 +10,9 @@ export class PinsComponent implements OnChanges {
1010
@Input() down?: (id: string) => void
1111
@Input() translate?: (id: string, dx: number, dy: number) => void
1212
@Input() menu?: (id: string) => void
13+
@Input() getPointer?: () => Position
1314

14-
constructor(private cdr: ChangeDetectorRef) {
15+
constructor(private cdr: ChangeDetectorRef) {
1516
this.cdr.detach()
1617
}
1718

‎src/presets/reroute/index.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BaseSchemes } from 'rete';
2+
import { BaseAreaPlugin } from 'rete-area-plugin';
23

34
import { RenderPreset } from '../types'
45
import { PinsRender } from './types';
@@ -28,10 +29,9 @@ export function setup<Schemes extends BaseSchemes, K extends PinsRender>(props?:
2829
return null
2930
},
3031
mount(context, plugin) {
31-
const parent = plugin.parentScope()
32-
const emit = parent.emit.bind(parent)
32+
const area = plugin.parentScope<BaseAreaPlugin<Schemes, PinsRender>>(BaseAreaPlugin)
3333
const rendered = () => {
34-
emit({ type: 'rendered', data: context.data } as any)
34+
area.emit({ type: 'rendered', data: context.data })
3535
}
3636

3737
if (context.data.type === 'reroute-pins') {
@@ -41,7 +41,8 @@ export function setup<Schemes extends BaseSchemes, K extends PinsRender>(props?:
4141
props: {
4242
...getProps(),
4343
pins: context.data.data.pins,
44-
rendered
44+
rendered,
45+
getPointer: () => area.area.pointer
4546
}
4647
}
4748
}

‎src/shared/drag.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1+
import { Position } from '../types'
2+
13
type Translate = (dx: number, dy: number) => void
24
type StartEvent = { pageX: number, pageY: number }
35

4-
export function useDrag(translate: Translate) {
6+
export function useDrag(translate: Translate, getPointer: (e: StartEvent) => Position) {
57
return {
68
start(e: StartEvent) {
7-
let previous = { x: e.pageX, y: e.pageY }
9+
let previous = { ...getPointer(e) }
810

9-
function move(moveEvent: PointerEvent) {
10-
const dx = moveEvent.pageX - previous.x
11-
const dy = moveEvent.pageY - previous.y
11+
function move(moveEvent: MouseEvent) {
12+
const current = { ...getPointer(moveEvent) }
13+
const dx = current.x - previous.x
14+
const dy = current.y - previous.y
1215

13-
previous = { x: moveEvent.pageX, y: moveEvent.pageY }
16+
previous = current
1417

1518
translate(dx, dy)
1619
}

0 commit comments

Comments
 (0)