@ckeditor/ckeditor5-widget 39.0.2 → 40.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,63 +1,63 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module widget/widgetresize/sizeview
7
- */
8
- import { View } from '@ckeditor/ckeditor5-ui';
9
- /**
10
- * A view displaying the proposed new element size during the resizing.
11
- */
12
- export default class SizeView extends View {
13
- constructor() {
14
- super();
15
- const bind = this.bindTemplate;
16
- this.setTemplate({
17
- tag: 'div',
18
- attributes: {
19
- class: [
20
- 'ck',
21
- 'ck-size-view',
22
- bind.to('_viewPosition', value => value ? `ck-orientation-${value}` : '')
23
- ],
24
- style: {
25
- display: bind.if('_isVisible', 'none', visible => !visible)
26
- }
27
- },
28
- children: [{
29
- text: bind.to('_label')
30
- }]
31
- });
32
- }
33
- /**
34
- * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
35
- *
36
- * @internal
37
- * @param options An object defining the resizer options, used for setting the proper size label.
38
- * @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
39
- */
40
- _bindToState(options, resizeState) {
41
- this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height) => width !== null && height !== null);
42
- this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents) => {
43
- if (options.unit === 'px') {
44
- return `${width}×${height}`;
45
- }
46
- else {
47
- return `${widthPercents}%`;
48
- }
49
- });
50
- this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight',
51
- // If the widget is too small to contain the size label, display the label above.
52
- (position, width, height) => width < 50 || height < 50 ? 'above-center' : position);
53
- }
54
- /**
55
- * A method used for cleaning up. It removes the bindings and hides the view.
56
- *
57
- * @internal
58
- */
59
- _dismiss() {
60
- this.unbind();
61
- this._isVisible = false;
62
- }
63
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module widget/widgetresize/sizeview
7
+ */
8
+ import { View } from '@ckeditor/ckeditor5-ui';
9
+ /**
10
+ * A view displaying the proposed new element size during the resizing.
11
+ */
12
+ export default class SizeView extends View {
13
+ constructor() {
14
+ super();
15
+ const bind = this.bindTemplate;
16
+ this.setTemplate({
17
+ tag: 'div',
18
+ attributes: {
19
+ class: [
20
+ 'ck',
21
+ 'ck-size-view',
22
+ bind.to('_viewPosition', value => value ? `ck-orientation-${value}` : '')
23
+ ],
24
+ style: {
25
+ display: bind.if('_isVisible', 'none', visible => !visible)
26
+ }
27
+ },
28
+ children: [{
29
+ text: bind.to('_label')
30
+ }]
31
+ });
32
+ }
33
+ /**
34
+ * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
35
+ *
36
+ * @internal
37
+ * @param options An object defining the resizer options, used for setting the proper size label.
38
+ * @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
39
+ */
40
+ _bindToState(options, resizeState) {
41
+ this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height) => width !== null && height !== null);
42
+ this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents) => {
43
+ if (options.unit === 'px') {
44
+ return `${width}×${height}`;
45
+ }
46
+ else {
47
+ return `${widthPercents}%`;
48
+ }
49
+ });
50
+ this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight',
51
+ // If the widget is too small to contain the size label, display the label above.
52
+ (position, width, height) => width < 50 || height < 50 ? 'above-center' : position);
53
+ }
54
+ /**
55
+ * A method used for cleaning up. It removes the bindings and hides the view.
56
+ *
57
+ * @internal
58
+ */
59
+ _dismiss() {
60
+ this.unbind();
61
+ this._isVisible = false;
62
+ }
63
+ }
@@ -1,125 +1,125 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module widget/widgetresize
7
- */
8
- import Resizer from './widgetresize/resizer';
9
- import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
10
- import { type Element, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
11
- import '../theme/widgetresize.css';
12
- /**
13
- * The widget resize feature plugin.
14
- *
15
- * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
16
- */
17
- export default class WidgetResize extends Plugin {
18
- /**
19
- * The currently selected resizer.
20
- *
21
- * @observable
22
- */
23
- selectedResizer: Resizer | null;
24
- /**
25
- * References an active resizer.
26
- *
27
- * Active resizer means a resizer which handle is actively used by the end user.
28
- *
29
- * @internal
30
- * @observable
31
- */
32
- _activeResizer: Resizer | null;
33
- /**
34
- * A map of resizers created using this plugin instance.
35
- */
36
- private _resizers;
37
- private _observer;
38
- private _redrawSelectedResizerThrottled;
39
- /**
40
- * @inheritDoc
41
- */
42
- static get pluginName(): "WidgetResize";
43
- /**
44
- * @inheritDoc
45
- */
46
- init(): void;
47
- /**
48
- * Redraws the selected resizer if there is any selected resizer and if it is visible.
49
- */
50
- redrawSelectedResizer(): void;
51
- /**
52
- * @inheritDoc
53
- */
54
- destroy(): void;
55
- /**
56
- * Marks resizer as selected.
57
- */
58
- select(resizer: Resizer): void;
59
- /**
60
- * Deselects currently set resizer.
61
- */
62
- deselect(): void;
63
- /**
64
- * @param options Resizer options.
65
- */
66
- attachTo(options: ResizerOptions): Resizer;
67
- /**
68
- * Returns a resizer created for a given view element (widget element).
69
- *
70
- * @param viewElement View element associated with the resizer.
71
- */
72
- getResizerByViewElement(viewElement: ViewContainerElement): Resizer | undefined;
73
- /**
74
- * Returns a resizer that contains a given resize handle.
75
- */
76
- private _getResizerByHandle;
77
- /**
78
- * @param domEventData Native DOM event.
79
- */
80
- private _mouseDownListener;
81
- /**
82
- * @param domEventData Native DOM event.
83
- */
84
- private _mouseMoveListener;
85
- private _mouseUpListener;
86
- }
87
- /**
88
- * Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
89
- */
90
- export interface ResizerOptions {
91
- /**
92
- * Editor instance associated with the resizer.
93
- */
94
- editor: Editor;
95
- modelElement: Element;
96
- /**
97
- * A view of an element to be resized. Typically it's the main widget's view instance.
98
- */
99
- viewElement: ViewContainerElement;
100
- unit?: 'px' | '%';
101
- /**
102
- * A callback to be executed once the resizing process is done.
103
- *
104
- * It receives a `Number` (`newValue`) as a parameter.
105
- *
106
- * For example, {@link module:image/imageresize~ImageResize} uses it to execute the resize image command
107
- * which puts the new value into the model.
108
- *
109
- * ```ts
110
- * {
111
- * editor,
112
- * modelElement: data.item,
113
- * viewElement: widget,
114
- *
115
- * onCommit( newValue ) {
116
- * editor.execute( 'resizeImage', { width: newValue } );
117
- * }
118
- * };
119
- * ```
120
- */
121
- onCommit: (newValue: string) => void;
122
- getResizeHost: (widgetWrapper: HTMLElement) => HTMLElement;
123
- getHandleHost: (widgetWrapper: HTMLElement) => HTMLElement;
124
- isCentered?: (resizer: Resizer) => boolean;
125
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module widget/widgetresize
7
+ */
8
+ import Resizer from './widgetresize/resizer';
9
+ import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
10
+ import { type Element, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
11
+ import '../theme/widgetresize.css';
12
+ /**
13
+ * The widget resize feature plugin.
14
+ *
15
+ * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
16
+ */
17
+ export default class WidgetResize extends Plugin {
18
+ /**
19
+ * The currently selected resizer.
20
+ *
21
+ * @observable
22
+ */
23
+ selectedResizer: Resizer | null;
24
+ /**
25
+ * References an active resizer.
26
+ *
27
+ * Active resizer means a resizer which handle is actively used by the end user.
28
+ *
29
+ * @internal
30
+ * @observable
31
+ */
32
+ _activeResizer: Resizer | null;
33
+ /**
34
+ * A map of resizers created using this plugin instance.
35
+ */
36
+ private _resizers;
37
+ private _observer;
38
+ private _redrawSelectedResizerThrottled;
39
+ /**
40
+ * @inheritDoc
41
+ */
42
+ static get pluginName(): "WidgetResize";
43
+ /**
44
+ * @inheritDoc
45
+ */
46
+ init(): void;
47
+ /**
48
+ * Redraws the selected resizer if there is any selected resizer and if it is visible.
49
+ */
50
+ redrawSelectedResizer(): void;
51
+ /**
52
+ * @inheritDoc
53
+ */
54
+ destroy(): void;
55
+ /**
56
+ * Marks resizer as selected.
57
+ */
58
+ select(resizer: Resizer): void;
59
+ /**
60
+ * Deselects currently set resizer.
61
+ */
62
+ deselect(): void;
63
+ /**
64
+ * @param options Resizer options.
65
+ */
66
+ attachTo(options: ResizerOptions): Resizer;
67
+ /**
68
+ * Returns a resizer created for a given view element (widget element).
69
+ *
70
+ * @param viewElement View element associated with the resizer.
71
+ */
72
+ getResizerByViewElement(viewElement: ViewContainerElement): Resizer | undefined;
73
+ /**
74
+ * Returns a resizer that contains a given resize handle.
75
+ */
76
+ private _getResizerByHandle;
77
+ /**
78
+ * @param domEventData Native DOM event.
79
+ */
80
+ private _mouseDownListener;
81
+ /**
82
+ * @param domEventData Native DOM event.
83
+ */
84
+ private _mouseMoveListener;
85
+ private _mouseUpListener;
86
+ }
87
+ /**
88
+ * Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
89
+ */
90
+ export interface ResizerOptions {
91
+ /**
92
+ * Editor instance associated with the resizer.
93
+ */
94
+ editor: Editor;
95
+ modelElement: Element;
96
+ /**
97
+ * A view of an element to be resized. Typically it's the main widget's view instance.
98
+ */
99
+ viewElement: ViewContainerElement;
100
+ unit?: 'px' | '%';
101
+ /**
102
+ * A callback to be executed once the resizing process is done.
103
+ *
104
+ * It receives a `Number` (`newValue`) as a parameter.
105
+ *
106
+ * For example, {@link module:image/imageresize~ImageResize} uses it to execute the resize image command
107
+ * which puts the new value into the model.
108
+ *
109
+ * ```ts
110
+ * {
111
+ * editor,
112
+ * modelElement: data.item,
113
+ * viewElement: widget,
114
+ *
115
+ * onCommit( newValue ) {
116
+ * editor.execute( 'resizeImage', { width: newValue } );
117
+ * }
118
+ * };
119
+ * ```
120
+ */
121
+ onCommit: (newValue: string) => void;
122
+ getResizeHost: (widgetWrapper: HTMLElement) => HTMLElement;
123
+ getHandleHost: (widgetWrapper: HTMLElement) => HTMLElement;
124
+ isCentered?: (resizer: Resizer) => boolean;
125
+ }