From 9fe76b9c82c7e6040a4dcca00c417183a6fcb130 Mon Sep 17 00:00:00 2001 From: bubkoo Date: Wed, 6 Jan 2021 10:50:18 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20should=20support=20multi?= =?UTF-8?q?=20knobs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x6/src/addon/knob/index.ts | 39 ++++++++++++++++++-- packages/x6/src/graph/hook.ts | 55 +++++++++++++++++------------ packages/x6/src/graph/knob.ts | 20 +++++------ packages/x6/src/model/cell.ts | 2 +- 4 files changed, 80 insertions(+), 36 deletions(-) diff --git a/packages/x6/src/addon/knob/index.ts b/packages/x6/src/addon/knob/index.ts index 75a72af6100..3121e04f004 100644 --- a/packages/x6/src/addon/knob/index.ts +++ b/packages/x6/src/addon/knob/index.ts @@ -16,7 +16,14 @@ export class Knob extends Widget { } protected get metadata() { - return this.cell.prop('knob') as Knob.Metadata + const meta = this.cell.prop('knob') + if (Array.isArray(meta)) { + if (this.options.index != null) { + return meta[this.options.index] + } + return null + } + return meta as Knob.Metadata } protected init(options: Knob.Options) { @@ -42,6 +49,8 @@ export class Knob extends Widget { this.view.on('node:rotate:mousedown', this.onTransform, this) this.view.on('node:resize:mouseup', this.onTransformed, this) this.view.on('node:rotate:mouseup', this.onTransformed, this) + this.view.on('cell:knob:mousedown', this.onKnobMouseDown, this) + this.view.on('cell:knob:mouseup', this.onKnobMouseUp, this) super.startListening() } @@ -60,6 +69,8 @@ export class Knob extends Widget { this.view.off('node:rotate:mousedown', this.onTransform, this) this.view.off('node:resize:mouseup', this.onTransformed, this) this.view.off('node:rotate:mouseup', this.onTransformed, this) + this.view.off('cell:knob:mousedown', this.onKnobMouseDown, this) + this.view.off('cell:knob:mouseup', this.onKnobMouseUp, this) super.stopListening() } @@ -93,14 +104,32 @@ export class Knob extends Widget { } } - protected onTransform() { + protected hide() { this.container.style.display = 'none' } - protected onTransformed() { + protected show() { this.container.style.display = '' } + protected onTransform() { + this.hide() + } + + protected onTransformed() { + this.show() + } + + protected onKnobMouseDown({ knob }: { knob: Knob }) { + if (this.cid !== knob.cid) { + this.hide() + } + } + + protected onKnobMouseUp() { + this.show() + } + protected notify(name: string, evt: JQuery.TriggeredEvent) { if (this.view) { const e = this.view.normalizeEvent(evt) as JQuery.MouseDownEvent @@ -112,6 +141,7 @@ export class Knob extends Widget { cell: this.cell, x: localPoint.x, y: localPoint.y, + knob: this, }) if (this.cell.isNode()) { @@ -122,6 +152,7 @@ export class Knob extends Widget { cell: this.cell, x: localPoint.x, y: localPoint.y, + knob: this, }) } else if (this.cell.isEdge()) { this.view.notify(`edge:${name}`, { @@ -131,6 +162,7 @@ export class Knob extends Widget { cell: this.cell, x: localPoint.x, y: localPoint.y, + knob: this, }) } } @@ -214,6 +246,7 @@ export class Knob extends Widget { export namespace Knob { export interface Options extends Widget.Options { className?: string + index?: number } interface UpdateArgs { diff --git a/packages/x6/src/graph/hook.ts b/packages/x6/src/graph/hook.ts index f7cb436eabd..5c1cc6e2aa6 100644 --- a/packages/x6/src/graph/hook.ts +++ b/packages/x6/src/graph/hook.ts @@ -147,7 +147,8 @@ export class Hook extends Base implements Hook.IHook { ...options, ...widgetOptions, }) - } if (options.clearAll) { + } + if (options.clearAll) { Transform.removeInstances(this.graph) } @@ -171,31 +172,41 @@ export class Hook extends Base implements Hook.IHook { Knob.removeInstances(this.graph) } - const knob = node.prop('knob') as Knob.Metadata - if (knob) { - if (knob.enabled === false) { - return null - } + localOptions.clearAll = false + + const knob = node.prop('knob') as Knob.Metadata | Knob.Metadata[] + const widgets: Knob[] = [] + const meta = Array.isArray(knob) ? knob : [knob] + + meta.forEach((knob, index) => { + if (knob) { + if (knob.enabled === false) { + return + } - if ( - typeof knob.enabled === 'function' && - knob.enabled.call(this.graph, node) === false - ) { - return null + if ( + typeof knob.enabled === 'function' && + knob.enabled.call(this.graph, node) === false + ) { + return + } + } else { + return } - } else { - return null - } - if (options.enabled) { - return new Knob({ - node, - graph: this.graph, - ...localOptions, - }) - } + if (options.enabled) { + widgets.push( + new Knob({ + node, + index, + graph: this.graph, + ...localOptions, + }), + ) + } + }) - return null + return widgets } protected getTransformOptions(node: Node) { diff --git a/packages/x6/src/graph/knob.ts b/packages/x6/src/graph/knob.ts index 0878add3daf..18f9d5e7ea1 100644 --- a/packages/x6/src/graph/knob.ts +++ b/packages/x6/src/graph/knob.ts @@ -4,7 +4,7 @@ import { Base } from './base' import { EventArgs } from './events' export class KnobManager extends Base { - protected widgets: Map = new Map() + protected widgets: Map = new Map() protected get isSelectionEnabled() { return this.options.selecting.enabled === true @@ -28,27 +28,27 @@ export class KnobManager extends Base { protected onNodeMouseUp({ node }: EventArgs['node:mouseup']) { if (!this.isSelectionEnabled) { - const widget = this.graph.hook.createKnob(node, { clearAll: true }) - if (widget) { - this.widgets.set(node, widget) + const widgets = this.graph.hook.createKnob(node, { clearAll: true }) + if (widgets) { + this.widgets.set(node, widgets) } } } protected onNodeSelected({ node }: EventArgs['node:selected']) { if (this.isSelectionEnabled) { - const widget = this.graph.hook.createKnob(node, { clearAll: false }) - if (widget) { - this.widgets.set(node, widget) + const widgets = this.graph.hook.createKnob(node, { clearAll: false }) + if (widgets) { + this.widgets.set(node, widgets) } } } protected onNodeUnSelected({ node }: EventArgs['node:unselected']) { if (this.isSelectionEnabled) { - const widget = this.widgets.get(node) - if (widget) { - widget.dispose() + const widgets = this.widgets.get(node) + if (widgets) { + widgets.forEach((widget) => widget.dispose()) } this.widgets.delete(node) } diff --git a/packages/x6/src/model/cell.ts b/packages/x6/src/model/cell.ts index 59e0f899237..88051a8d05a 100644 --- a/packages/x6/src/model/cell.ts +++ b/packages/x6/src/model/cell.ts @@ -1379,7 +1379,7 @@ export namespace Cell { zIndex?: number visible?: boolean data?: any - knob?: Knob.Metadata + knob?: Knob.Metadata | Knob.Metadata[] } export interface Defaults extends Common {}