@knotx/plugins-bounding 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +32 -33
- package/dist/index.d.cts +5 -6
- package/dist/index.d.mts +5 -6
- package/dist/index.d.ts +5 -6
- package/dist/index.mjs +32 -33
- package/package.json +10 -10
package/dist/index.cjs
CHANGED
|
@@ -86,7 +86,7 @@ const DEFAULT_CONNECT_HANDLE_POSITIONS = [
|
|
|
86
86
|
{ bottom: true },
|
|
87
87
|
{ left: true }
|
|
88
88
|
];
|
|
89
|
-
const
|
|
89
|
+
const DEFAULT_CONFIG = {
|
|
90
90
|
features: {
|
|
91
91
|
resize: true,
|
|
92
92
|
connect: true,
|
|
@@ -126,12 +126,11 @@ const DEFAULT_OPTIONS = {
|
|
|
126
126
|
}
|
|
127
127
|
};
|
|
128
128
|
class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.nodes()], _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _canvasScale_dec = [decorators.inject.canvas.transform((state) => state.scale)], _getResizeHandleAttributes_dec = [decorators.register("getCustomResizeHandleAttributes")], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _render_dec = [decorators.layer(core.Layer.Nodes, 1)], _a) {
|
|
129
|
-
constructor(
|
|
130
|
-
|
|
131
|
-
super();
|
|
132
|
-
this.options = options;
|
|
129
|
+
constructor() {
|
|
130
|
+
super(...arguments);
|
|
133
131
|
__runInitializers(_init, 5, this);
|
|
134
132
|
__publicField(this, "name", "bounding");
|
|
133
|
+
__publicField(this, "config");
|
|
135
134
|
__publicField(this, "nodes", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
136
135
|
__publicField(this, "getNode", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
137
136
|
__publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
@@ -151,19 +150,19 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
151
150
|
"data-resize-handle-position": position
|
|
152
151
|
};
|
|
153
152
|
})), __runInitializers(_init, 39, this);
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
153
|
+
}
|
|
154
|
+
init(config) {
|
|
155
|
+
var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
156
|
+
this.config = __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_CONFIG), config), {
|
|
157
|
+
features: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.features), config.features),
|
|
158
|
+
sizes: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.sizes), config.sizes),
|
|
157
159
|
styles: {
|
|
158
|
-
resizeHandle: __spreadValues(__spreadValues({}, (_a2 =
|
|
159
|
-
connectHandle: __spreadValues(__spreadValues({}, (_c =
|
|
160
|
-
boundingBox: __spreadValues(__spreadValues({}, (_e =
|
|
160
|
+
resizeHandle: __spreadValues(__spreadValues({}, (_a2 = DEFAULT_CONFIG.styles) == null ? void 0 : _a2.resizeHandle), (_b = config.styles) == null ? void 0 : _b.resizeHandle),
|
|
161
|
+
connectHandle: __spreadValues(__spreadValues({}, (_c = DEFAULT_CONFIG.styles) == null ? void 0 : _c.connectHandle), (_d = config.styles) == null ? void 0 : _d.connectHandle),
|
|
162
|
+
boundingBox: __spreadValues(__spreadValues({}, (_e = DEFAULT_CONFIG.styles) == null ? void 0 : _e.boundingBox), (_f = config.styles) == null ? void 0 : _f.boundingBox)
|
|
161
163
|
},
|
|
162
|
-
resize: __spreadValues(__spreadValues({},
|
|
164
|
+
resize: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.resize), config.resize)
|
|
163
165
|
});
|
|
164
|
-
}
|
|
165
|
-
init() {
|
|
166
|
-
var _a2, _b, _c, _d, _e, _f;
|
|
167
166
|
const resizeStart$ = new rxjs.Subject();
|
|
168
167
|
const resizeMove$ = new rxjs.Subject();
|
|
169
168
|
const resizeEnd$ = new rxjs.Subject();
|
|
@@ -196,10 +195,10 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
196
195
|
dy: event.dy / scale
|
|
197
196
|
});
|
|
198
197
|
};
|
|
199
|
-
if ((
|
|
198
|
+
if ((_g = this.config.features) == null ? void 0 : _g.resize) {
|
|
200
199
|
const currentInteractable = interact__default(`[data-plugin-id="${this.pluginId}"].${this.resizeHandleClassName}`).resizable({
|
|
201
200
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
202
|
-
inertia: (
|
|
201
|
+
inertia: (_h = this.config.resize) == null ? void 0 : _h.inertia,
|
|
203
202
|
cursorChecker: (_action, _interactable, element) => {
|
|
204
203
|
var _a3;
|
|
205
204
|
const position = (_a3 = element.getAttribute("data-resize-handle-position")) != null ? _a3 : "";
|
|
@@ -236,8 +235,8 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
236
235
|
let nextHeight = currentHeight;
|
|
237
236
|
let nextX = currentX;
|
|
238
237
|
let nextY = currentY;
|
|
239
|
-
const minWidth = (_b2 = (_a3 = this.
|
|
240
|
-
const minHeight = (_d2 = (_c2 = this.
|
|
238
|
+
const minWidth = (_b2 = (_a3 = this.config.resize) == null ? void 0 : _a3.minWidth) != null ? _b2 : 30;
|
|
239
|
+
const minHeight = (_d2 = (_c2 = this.config.resize) == null ? void 0 : _c2.minHeight) != null ? _d2 : 30;
|
|
241
240
|
if (position.includes("right")) {
|
|
242
241
|
nextWidth = Math.max(minWidth, currentWidth + moveEvent.dx);
|
|
243
242
|
}
|
|
@@ -306,11 +305,11 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
306
305
|
resizeMove$.complete();
|
|
307
306
|
resizeEnd$.complete();
|
|
308
307
|
});
|
|
309
|
-
if ((
|
|
308
|
+
if ((_i = this.config.features) == null ? void 0 : _i.boundingBox) {
|
|
310
309
|
const boundingInteractable = interact__default(`[data-plugin-id="${this.pluginId}"].${this.boundingBoxClassName}`).resizable({
|
|
311
|
-
enabled: (
|
|
310
|
+
enabled: (_j = this.config.features) == null ? void 0 : _j.resize,
|
|
312
311
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
313
|
-
inertia: (
|
|
312
|
+
inertia: (_k = this.config.resize) == null ? void 0 : _k.inertia,
|
|
314
313
|
cursorChecker: (action) => this.getCursorStyle(this.getPositionByEdges(action.edges)),
|
|
315
314
|
listeners: {
|
|
316
315
|
start: (event) => {
|
|
@@ -324,7 +323,7 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
324
323
|
end: endResize
|
|
325
324
|
}
|
|
326
325
|
});
|
|
327
|
-
(
|
|
326
|
+
(_l = this.subscription) == null ? void 0 : _l.add(() => boundingInteractable.unset());
|
|
328
327
|
}
|
|
329
328
|
}
|
|
330
329
|
}
|
|
@@ -336,7 +335,7 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
336
335
|
var _a2;
|
|
337
336
|
const nodes = core.use(() => this.nodes);
|
|
338
337
|
const pluginId = this.pluginId;
|
|
339
|
-
const nodesType = (_a2 = this.
|
|
338
|
+
const nodesType = (_a2 = this.config.resize) == null ? void 0 : _a2.nodesType;
|
|
340
339
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
341
340
|
"svg",
|
|
342
341
|
{
|
|
@@ -355,12 +354,12 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
355
354
|
if (nodesType && !nodesType.includes(type))
|
|
356
355
|
return null;
|
|
357
356
|
const { width, height } = measured;
|
|
358
|
-
const resizeSize = (_c = (_a3 = this.
|
|
359
|
-
const resizeStyles = (_f = (_d = this.
|
|
360
|
-
const connectSize = (_i = (_g = this.
|
|
361
|
-
const connectStyles = (_l = (_j = this.
|
|
357
|
+
const resizeSize = (_c = (_a3 = this.config.sizes) == null ? void 0 : _a3.resizeHandle) != null ? _c : (_b = DEFAULT_CONFIG.sizes) == null ? void 0 : _b.resizeHandle;
|
|
358
|
+
const resizeStyles = (_f = (_d = this.config.styles) == null ? void 0 : _d.resizeHandle) != null ? _f : (_e = DEFAULT_CONFIG.styles) == null ? void 0 : _e.resizeHandle;
|
|
359
|
+
const connectSize = (_i = (_g = this.config.sizes) == null ? void 0 : _g.connectHandle) != null ? _i : (_h = DEFAULT_CONFIG.sizes) == null ? void 0 : _h.connectHandle;
|
|
360
|
+
const connectStyles = (_l = (_j = this.config.styles) == null ? void 0 : _j.connectHandle) != null ? _l : (_k = DEFAULT_CONFIG.styles) == null ? void 0 : _k.connectHandle;
|
|
362
361
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { style: { pointerEvents: "auto" }, children: [
|
|
363
|
-
((_m = this.
|
|
362
|
+
((_m = this.config.features) == null ? void 0 : _m.boundingBox) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
364
363
|
"rect",
|
|
365
364
|
{
|
|
366
365
|
className: this.boundingBoxClassName,
|
|
@@ -371,12 +370,12 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
371
370
|
width,
|
|
372
371
|
height,
|
|
373
372
|
fill: "none",
|
|
374
|
-
stroke: (_o = (_n = this.
|
|
375
|
-
strokeWidth: (_q = (_p = this.
|
|
373
|
+
stroke: (_o = (_n = this.config.styles) == null ? void 0 : _n.boundingBox) == null ? void 0 : _o.stroke,
|
|
374
|
+
strokeWidth: (_q = (_p = this.config.styles) == null ? void 0 : _p.boundingBox) == null ? void 0 : _q.strokeWidth,
|
|
376
375
|
style: { pointerEvents: "auto" }
|
|
377
376
|
}
|
|
378
377
|
),
|
|
379
|
-
((_r = this.
|
|
378
|
+
((_r = this.config.features) == null ? void 0 : _r.resize) && ((_t = (_s = this.config.resize) == null ? void 0 : _s.handles) == null ? void 0 : _t.map((position, index) => {
|
|
380
379
|
let handleX = x;
|
|
381
380
|
let handleY = y;
|
|
382
381
|
const [xPosition, yPosition] = position.split("-");
|
|
@@ -413,7 +412,7 @@ class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.no
|
|
|
413
412
|
})
|
|
414
413
|
) }, `resize-${index}`);
|
|
415
414
|
})),
|
|
416
|
-
((_u = this.
|
|
415
|
+
((_u = this.config.features) == null ? void 0 : _u.connect) && DEFAULT_CONNECT_HANDLE_POSITIONS.map((position, index) => {
|
|
417
416
|
let handleX = x + width / 2;
|
|
418
417
|
let handleY = y + height / 2;
|
|
419
418
|
if (position.right)
|
package/dist/index.d.cts
CHANGED
|
@@ -33,7 +33,7 @@ interface ConnectHandlePosition {
|
|
|
33
33
|
left?: boolean;
|
|
34
34
|
}
|
|
35
35
|
type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
|
|
36
|
-
interface
|
|
36
|
+
interface BoundingConfig {
|
|
37
37
|
features?: {
|
|
38
38
|
resize?: boolean;
|
|
39
39
|
connect?: boolean;
|
|
@@ -77,9 +77,9 @@ interface BoundingOptions {
|
|
|
77
77
|
nodesType?: string[];
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
|
-
declare class Bounding extends BasePlugin<'bounding'> {
|
|
81
|
-
private options;
|
|
80
|
+
declare class Bounding extends BasePlugin<'bounding', BoundingConfig> {
|
|
82
81
|
name: "bounding";
|
|
82
|
+
private config;
|
|
83
83
|
nodes: NodeData[];
|
|
84
84
|
getNode: (id: string) => NodeData | undefined;
|
|
85
85
|
dispatchNodeOperation: (operation: NodeOperation) => void;
|
|
@@ -92,12 +92,11 @@ declare class Bounding extends BasePlugin<'bounding'> {
|
|
|
92
92
|
private connectHandleClassName;
|
|
93
93
|
private boundingBoxClassName;
|
|
94
94
|
private getResizeHandleAttributes;
|
|
95
|
-
|
|
96
|
-
init(): void;
|
|
95
|
+
init(config: BoundingConfig): void;
|
|
97
96
|
destroy(): void;
|
|
98
97
|
render(): JSX.Element;
|
|
99
98
|
private getCursorStyle;
|
|
100
99
|
private getPositionByEdges;
|
|
101
100
|
}
|
|
102
101
|
|
|
103
|
-
export { Bounding, type
|
|
102
|
+
export { Bounding, type BoundingConfig, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };
|
package/dist/index.d.mts
CHANGED
|
@@ -33,7 +33,7 @@ interface ConnectHandlePosition {
|
|
|
33
33
|
left?: boolean;
|
|
34
34
|
}
|
|
35
35
|
type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
|
|
36
|
-
interface
|
|
36
|
+
interface BoundingConfig {
|
|
37
37
|
features?: {
|
|
38
38
|
resize?: boolean;
|
|
39
39
|
connect?: boolean;
|
|
@@ -77,9 +77,9 @@ interface BoundingOptions {
|
|
|
77
77
|
nodesType?: string[];
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
|
-
declare class Bounding extends BasePlugin<'bounding'> {
|
|
81
|
-
private options;
|
|
80
|
+
declare class Bounding extends BasePlugin<'bounding', BoundingConfig> {
|
|
82
81
|
name: "bounding";
|
|
82
|
+
private config;
|
|
83
83
|
nodes: NodeData[];
|
|
84
84
|
getNode: (id: string) => NodeData | undefined;
|
|
85
85
|
dispatchNodeOperation: (operation: NodeOperation) => void;
|
|
@@ -92,12 +92,11 @@ declare class Bounding extends BasePlugin<'bounding'> {
|
|
|
92
92
|
private connectHandleClassName;
|
|
93
93
|
private boundingBoxClassName;
|
|
94
94
|
private getResizeHandleAttributes;
|
|
95
|
-
|
|
96
|
-
init(): void;
|
|
95
|
+
init(config: BoundingConfig): void;
|
|
97
96
|
destroy(): void;
|
|
98
97
|
render(): JSX.Element;
|
|
99
98
|
private getCursorStyle;
|
|
100
99
|
private getPositionByEdges;
|
|
101
100
|
}
|
|
102
101
|
|
|
103
|
-
export { Bounding, type
|
|
102
|
+
export { Bounding, type BoundingConfig, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };
|
package/dist/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ interface ConnectHandlePosition {
|
|
|
33
33
|
left?: boolean;
|
|
34
34
|
}
|
|
35
35
|
type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
|
|
36
|
-
interface
|
|
36
|
+
interface BoundingConfig {
|
|
37
37
|
features?: {
|
|
38
38
|
resize?: boolean;
|
|
39
39
|
connect?: boolean;
|
|
@@ -77,9 +77,9 @@ interface BoundingOptions {
|
|
|
77
77
|
nodesType?: string[];
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
|
-
declare class Bounding extends BasePlugin<'bounding'> {
|
|
81
|
-
private options;
|
|
80
|
+
declare class Bounding extends BasePlugin<'bounding', BoundingConfig> {
|
|
82
81
|
name: "bounding";
|
|
82
|
+
private config;
|
|
83
83
|
nodes: NodeData[];
|
|
84
84
|
getNode: (id: string) => NodeData | undefined;
|
|
85
85
|
dispatchNodeOperation: (operation: NodeOperation) => void;
|
|
@@ -92,12 +92,11 @@ declare class Bounding extends BasePlugin<'bounding'> {
|
|
|
92
92
|
private connectHandleClassName;
|
|
93
93
|
private boundingBoxClassName;
|
|
94
94
|
private getResizeHandleAttributes;
|
|
95
|
-
|
|
96
|
-
init(): void;
|
|
95
|
+
init(config: BoundingConfig): void;
|
|
97
96
|
destroy(): void;
|
|
98
97
|
render(): JSX.Element;
|
|
99
98
|
private getCursorStyle;
|
|
100
99
|
private getPositionByEdges;
|
|
101
100
|
}
|
|
102
101
|
|
|
103
|
-
export { Bounding, type
|
|
102
|
+
export { Bounding, type BoundingConfig, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };
|
package/dist/index.mjs
CHANGED
|
@@ -80,7 +80,7 @@ const DEFAULT_CONNECT_HANDLE_POSITIONS = [
|
|
|
80
80
|
{ bottom: true },
|
|
81
81
|
{ left: true }
|
|
82
82
|
];
|
|
83
|
-
const
|
|
83
|
+
const DEFAULT_CONFIG = {
|
|
84
84
|
features: {
|
|
85
85
|
resize: true,
|
|
86
86
|
connect: true,
|
|
@@ -120,12 +120,11 @@ const DEFAULT_OPTIONS = {
|
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
122
|
class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _canvasScale_dec = [inject.canvas.transform((state) => state.scale)], _getResizeHandleAttributes_dec = [register("getCustomResizeHandleAttributes")], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _render_dec = [layer(Layer.Nodes, 1)], _a) {
|
|
123
|
-
constructor(
|
|
124
|
-
|
|
125
|
-
super();
|
|
126
|
-
this.options = options;
|
|
123
|
+
constructor() {
|
|
124
|
+
super(...arguments);
|
|
127
125
|
__runInitializers(_init, 5, this);
|
|
128
126
|
__publicField(this, "name", "bounding");
|
|
127
|
+
__publicField(this, "config");
|
|
129
128
|
__publicField(this, "nodes", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
130
129
|
__publicField(this, "getNode", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
131
130
|
__publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
@@ -145,19 +144,19 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
145
144
|
"data-resize-handle-position": position
|
|
146
145
|
};
|
|
147
146
|
})), __runInitializers(_init, 39, this);
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
147
|
+
}
|
|
148
|
+
init(config) {
|
|
149
|
+
var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
150
|
+
this.config = __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_CONFIG), config), {
|
|
151
|
+
features: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.features), config.features),
|
|
152
|
+
sizes: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.sizes), config.sizes),
|
|
151
153
|
styles: {
|
|
152
|
-
resizeHandle: __spreadValues(__spreadValues({}, (_a2 =
|
|
153
|
-
connectHandle: __spreadValues(__spreadValues({}, (_c =
|
|
154
|
-
boundingBox: __spreadValues(__spreadValues({}, (_e =
|
|
154
|
+
resizeHandle: __spreadValues(__spreadValues({}, (_a2 = DEFAULT_CONFIG.styles) == null ? void 0 : _a2.resizeHandle), (_b = config.styles) == null ? void 0 : _b.resizeHandle),
|
|
155
|
+
connectHandle: __spreadValues(__spreadValues({}, (_c = DEFAULT_CONFIG.styles) == null ? void 0 : _c.connectHandle), (_d = config.styles) == null ? void 0 : _d.connectHandle),
|
|
156
|
+
boundingBox: __spreadValues(__spreadValues({}, (_e = DEFAULT_CONFIG.styles) == null ? void 0 : _e.boundingBox), (_f = config.styles) == null ? void 0 : _f.boundingBox)
|
|
155
157
|
},
|
|
156
|
-
resize: __spreadValues(__spreadValues({},
|
|
158
|
+
resize: __spreadValues(__spreadValues({}, DEFAULT_CONFIG.resize), config.resize)
|
|
157
159
|
});
|
|
158
|
-
}
|
|
159
|
-
init() {
|
|
160
|
-
var _a2, _b, _c, _d, _e, _f;
|
|
161
160
|
const resizeStart$ = new Subject();
|
|
162
161
|
const resizeMove$ = new Subject();
|
|
163
162
|
const resizeEnd$ = new Subject();
|
|
@@ -190,10 +189,10 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
190
189
|
dy: event.dy / scale
|
|
191
190
|
});
|
|
192
191
|
};
|
|
193
|
-
if ((
|
|
192
|
+
if ((_g = this.config.features) == null ? void 0 : _g.resize) {
|
|
194
193
|
const currentInteractable = interact(`[data-plugin-id="${this.pluginId}"].${this.resizeHandleClassName}`).resizable({
|
|
195
194
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
196
|
-
inertia: (
|
|
195
|
+
inertia: (_h = this.config.resize) == null ? void 0 : _h.inertia,
|
|
197
196
|
cursorChecker: (_action, _interactable, element) => {
|
|
198
197
|
var _a3;
|
|
199
198
|
const position = (_a3 = element.getAttribute("data-resize-handle-position")) != null ? _a3 : "";
|
|
@@ -230,8 +229,8 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
230
229
|
let nextHeight = currentHeight;
|
|
231
230
|
let nextX = currentX;
|
|
232
231
|
let nextY = currentY;
|
|
233
|
-
const minWidth = (_b2 = (_a3 = this.
|
|
234
|
-
const minHeight = (_d2 = (_c2 = this.
|
|
232
|
+
const minWidth = (_b2 = (_a3 = this.config.resize) == null ? void 0 : _a3.minWidth) != null ? _b2 : 30;
|
|
233
|
+
const minHeight = (_d2 = (_c2 = this.config.resize) == null ? void 0 : _c2.minHeight) != null ? _d2 : 30;
|
|
235
234
|
if (position.includes("right")) {
|
|
236
235
|
nextWidth = Math.max(minWidth, currentWidth + moveEvent.dx);
|
|
237
236
|
}
|
|
@@ -300,11 +299,11 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
300
299
|
resizeMove$.complete();
|
|
301
300
|
resizeEnd$.complete();
|
|
302
301
|
});
|
|
303
|
-
if ((
|
|
302
|
+
if ((_i = this.config.features) == null ? void 0 : _i.boundingBox) {
|
|
304
303
|
const boundingInteractable = interact(`[data-plugin-id="${this.pluginId}"].${this.boundingBoxClassName}`).resizable({
|
|
305
|
-
enabled: (
|
|
304
|
+
enabled: (_j = this.config.features) == null ? void 0 : _j.resize,
|
|
306
305
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
307
|
-
inertia: (
|
|
306
|
+
inertia: (_k = this.config.resize) == null ? void 0 : _k.inertia,
|
|
308
307
|
cursorChecker: (action) => this.getCursorStyle(this.getPositionByEdges(action.edges)),
|
|
309
308
|
listeners: {
|
|
310
309
|
start: (event) => {
|
|
@@ -318,7 +317,7 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
318
317
|
end: endResize
|
|
319
318
|
}
|
|
320
319
|
});
|
|
321
|
-
(
|
|
320
|
+
(_l = this.subscription) == null ? void 0 : _l.add(() => boundingInteractable.unset());
|
|
322
321
|
}
|
|
323
322
|
}
|
|
324
323
|
}
|
|
@@ -330,7 +329,7 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
330
329
|
var _a2;
|
|
331
330
|
const nodes = use(() => this.nodes);
|
|
332
331
|
const pluginId = this.pluginId;
|
|
333
|
-
const nodesType = (_a2 = this.
|
|
332
|
+
const nodesType = (_a2 = this.config.resize) == null ? void 0 : _a2.nodesType;
|
|
334
333
|
return /* @__PURE__ */ jsx(
|
|
335
334
|
"svg",
|
|
336
335
|
{
|
|
@@ -349,12 +348,12 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
349
348
|
if (nodesType && !nodesType.includes(type))
|
|
350
349
|
return null;
|
|
351
350
|
const { width, height } = measured;
|
|
352
|
-
const resizeSize = (_c = (_a3 = this.
|
|
353
|
-
const resizeStyles = (_f = (_d = this.
|
|
354
|
-
const connectSize = (_i = (_g = this.
|
|
355
|
-
const connectStyles = (_l = (_j = this.
|
|
351
|
+
const resizeSize = (_c = (_a3 = this.config.sizes) == null ? void 0 : _a3.resizeHandle) != null ? _c : (_b = DEFAULT_CONFIG.sizes) == null ? void 0 : _b.resizeHandle;
|
|
352
|
+
const resizeStyles = (_f = (_d = this.config.styles) == null ? void 0 : _d.resizeHandle) != null ? _f : (_e = DEFAULT_CONFIG.styles) == null ? void 0 : _e.resizeHandle;
|
|
353
|
+
const connectSize = (_i = (_g = this.config.sizes) == null ? void 0 : _g.connectHandle) != null ? _i : (_h = DEFAULT_CONFIG.sizes) == null ? void 0 : _h.connectHandle;
|
|
354
|
+
const connectStyles = (_l = (_j = this.config.styles) == null ? void 0 : _j.connectHandle) != null ? _l : (_k = DEFAULT_CONFIG.styles) == null ? void 0 : _k.connectHandle;
|
|
356
355
|
return /* @__PURE__ */ jsxs("g", { style: { pointerEvents: "auto" }, children: [
|
|
357
|
-
((_m = this.
|
|
356
|
+
((_m = this.config.features) == null ? void 0 : _m.boundingBox) && /* @__PURE__ */ jsx(
|
|
358
357
|
"rect",
|
|
359
358
|
{
|
|
360
359
|
className: this.boundingBoxClassName,
|
|
@@ -365,12 +364,12 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
365
364
|
width,
|
|
366
365
|
height,
|
|
367
366
|
fill: "none",
|
|
368
|
-
stroke: (_o = (_n = this.
|
|
369
|
-
strokeWidth: (_q = (_p = this.
|
|
367
|
+
stroke: (_o = (_n = this.config.styles) == null ? void 0 : _n.boundingBox) == null ? void 0 : _o.stroke,
|
|
368
|
+
strokeWidth: (_q = (_p = this.config.styles) == null ? void 0 : _p.boundingBox) == null ? void 0 : _q.strokeWidth,
|
|
370
369
|
style: { pointerEvents: "auto" }
|
|
371
370
|
}
|
|
372
371
|
),
|
|
373
|
-
((_r = this.
|
|
372
|
+
((_r = this.config.features) == null ? void 0 : _r.resize) && ((_t = (_s = this.config.resize) == null ? void 0 : _s.handles) == null ? void 0 : _t.map((position, index) => {
|
|
374
373
|
let handleX = x;
|
|
375
374
|
let handleY = y;
|
|
376
375
|
const [xPosition, yPosition] = position.split("-");
|
|
@@ -407,7 +406,7 @@ class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _getNode
|
|
|
407
406
|
})
|
|
408
407
|
) }, `resize-${index}`);
|
|
409
408
|
})),
|
|
410
|
-
((_u = this.
|
|
409
|
+
((_u = this.config.features) == null ? void 0 : _u.connect) && DEFAULT_CONNECT_HANDLE_POSITIONS.map((position, index) => {
|
|
411
410
|
let handleX = x + width / 2;
|
|
412
411
|
let handleY = y + height / 2;
|
|
413
412
|
if (position.right)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knotx/plugins-bounding",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.9",
|
|
5
5
|
"description": "Bounding Plugin for Knotx",
|
|
6
6
|
"author": "boenfu",
|
|
7
7
|
"license": "MIT",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dist"
|
|
30
30
|
],
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@knotx/plugins-canvas": "0.0.
|
|
32
|
+
"@knotx/plugins-canvas": "0.0.7"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@interactjs/actions": "^1.10.27",
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
"@interactjs/types": "^1.10.27",
|
|
39
39
|
"interactjs": "^1.10.27",
|
|
40
40
|
"rxjs": "^7.8.1",
|
|
41
|
-
"@knotx/core": "0.0.
|
|
42
|
-
"@knotx/decorators": "0.0.
|
|
43
|
-
"@knotx/render": "0.0.
|
|
41
|
+
"@knotx/core": "0.0.7",
|
|
42
|
+
"@knotx/decorators": "0.0.7",
|
|
43
|
+
"@knotx/render": "0.0.9"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@knotx/build-config": "0.0.
|
|
47
|
-
"@knotx/eslint-config": "0.0.
|
|
48
|
-
"@knotx/jsx": "0.0.
|
|
49
|
-
"@knotx/plugins-canvas": "0.0.
|
|
50
|
-
"@knotx/typescript-config": "0.0.
|
|
46
|
+
"@knotx/build-config": "0.0.7",
|
|
47
|
+
"@knotx/eslint-config": "0.0.7",
|
|
48
|
+
"@knotx/jsx": "0.0.7",
|
|
49
|
+
"@knotx/plugins-canvas": "0.0.7",
|
|
50
|
+
"@knotx/typescript-config": "0.0.7"
|
|
51
51
|
},
|
|
52
52
|
"scripts": {
|
|
53
53
|
"build": "unbuild --failOnWarn=false",
|