@ckeditor/ckeditor5-widget 47.6.1 → 48.0.0-alpha.0

package/src/widgetresize/resizer.js

@@ -1,390 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module widget/widgetresize/resizer
- */
-import { Template } from '@ckeditor/ckeditor5-ui';
-import { Rect, ObservableMixin, compareArrays } from '@ckeditor/ckeditor5-utils';
-import { WidgetResizeState } from './resizerstate.js';
-import { SizeView } from './sizeview.js';
-/**
- * Represents a resizer for a single resizable object.
- */
-export class WidgetResizer extends /* #__PURE__ */ ObservableMixin() {
-    /**
-     * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
-     *
-     * Note that a new state is created for each resize transaction.
-     */
-    _state;
-    /**
-     * A view displaying the proposed new element size during the resizing.
-     */
-    _sizeView;
-    /**
-     * Options passed to the {@link #constructor}.
-     */
-    _options;
-    /**
-     * A wrapper that is controlled by the resizer. This is usually a widget element.
-     */
-    _viewResizerWrapper = null;
-    /**
-     * The width of the resized {@link module:widget/widgetresize~WidgetResizerOptions#viewElement viewElement} before the resizing started.
-     */
-    _initialViewWidth;
-    /**
-     * @param options Resizer options.
-     */
-    constructor(options) {
-        super();
-        this._options = options;
-        this.set('isEnabled', true);
-        this.set('isSelected', false);
-        this.bind('isVisible').to(this, 'isEnabled', this, 'isSelected', (isEnabled, isSelected) => isEnabled && isSelected);
-        this.decorate('begin');
-        this.decorate('cancel');
-        this.decorate('commit');
-        this.decorate('updateSize');
-        this.on('commit', event => {
-            // State might not be initialized yet. In this case, prevent further handling and make sure that the resizer is
-            // cleaned up (#5195).
-            if (!this.state.proposedWidth && !this.state.proposedWidthPercents) {
-                this._cleanup();
-                event.stop();
-            }
-        }, { priority: 'high' });
-    }
-    /**
-     * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
-     *
-     * Note that a new state is created for each resize transaction.
-     */
-    get state() {
-        return this._state;
-    }
-    /**
-     * Makes resizer visible in the UI.
-     */
-    show() {
-        const editingView = this._options.editor.editing.view;
-        editingView.change(writer => {
-            writer.removeClass('ck-hidden', this._viewResizerWrapper);
-        });
-    }
-    /**
-     * Hides resizer in the UI.
-     */
-    hide() {
-        const editingView = this._options.editor.editing.view;
-        editingView.change(writer => {
-            writer.addClass('ck-hidden', this._viewResizerWrapper);
-        });
-    }
-    /**
-     * Attaches the resizer to the DOM.
-     */
-    attach() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const that = this;
-        const widgetElement = this._options.viewElement;
-        const editingView = this._options.editor.editing.view;
-        editingView.change(writer => {
-            const viewResizerWrapper = writer.createUIElement('div', {
-                class: 'ck ck-reset_all ck-widget__resizer'
-            }, function (domDocument) {
-                const domElement = this.toDomElement(domDocument);
-                that._appendHandles(domElement);
-                that._appendSizeUI(domElement);
-                return domElement;
-            });
-            // Append the resizer wrapper to the widget's wrapper.
-            writer.insert(writer.createPositionAt(widgetElement, 'end'), viewResizerWrapper);
-            writer.addClass('ck-widget_with-resizer', widgetElement);
-            this._viewResizerWrapper = viewResizerWrapper;
-            if (!this.isVisible) {
-                this.hide();
-            }
-        });
-        this.on('change:isVisible', () => {
-            if (this.isVisible) {
-                this.show();
-                this.redraw();
-            }
-            else {
-                this.hide();
-            }
-        });
-    }
-    /**
-     * Starts the resizing process.
-     *
-     * Creates a new {@link #state} for the current process.
-     *
-     * @fires begin
-     * @param domResizeHandle Clicked handle.
-     */
-    begin(domResizeHandle) {
-        this._state = new WidgetResizeState(this._options);
-        this._sizeView._bindToState(this._options, this.state);
-        this._initialViewWidth = this._options.viewElement.getStyle('width');
-        this.state.begin(domResizeHandle, this._getHandleHost(), this._getResizeHost());
-    }
-    /**
-     * Updates the proposed size based on `domEventData`.
-     *
-     * @fires updateSize
-     */
-    updateSize(domEventData) {
-        const newSize = this._proposeNewSize(domEventData);
-        const editingView = this._options.editor.editing.view;
-        editingView.change(writer => {
-            const unit = this._options.unit || '%';
-            const newWidth = (unit === '%' ? newSize.widthPercents : newSize.width) + unit;
-            writer.setStyle('width', newWidth, this._options.viewElement);
-        });
-        // Get an actual image width, and:
-        // * reflect this size to the resize wrapper
-        // * apply this **real** size to the state
-        const domHandleHost = this._getHandleHost();
-        const domHandleHostRect = new Rect(domHandleHost);
-        const handleHostWidth = Math.round(domHandleHostRect.width);
-        const handleHostHeight = Math.round(domHandleHostRect.height);
-        // Handle max-width limitation.
-        const domResizeHostRect = new Rect(domHandleHost);
-        newSize.width = Math.round(domResizeHostRect.width);
-        newSize.height = Math.round(domResizeHostRect.height);
-        this.redraw(domHandleHostRect);
-        this.state.update({
-            ...newSize,
-            handleHostWidth,
-            handleHostHeight
-        });
-    }
-    /**
-     * Applies the geometry proposed with the resizer.
-     *
-     * @fires commit
-     */
-    commit() {
-        const unit = this._options.unit || '%';
-        const newValue = (unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth) + unit;
-        // Both cleanup and onCommit callback are very likely to make view changes. Ensure that it is made in a single step.
-        this._options.editor.editing.view.change(() => {
-            this._cleanup();
-            this._options.onCommit(newValue);
-        });
-    }
-    /**
-     * Cancels and rejects the proposed resize dimensions, hiding the UI.
-     *
-     * @fires cancel
-     */
-    cancel() {
-        this._cleanup();
-    }
-    /**
-     * Destroys the resizer.
-     */
-    destroy() {
-        this.cancel();
-    }
-    /**
-     * Redraws the resizer.
-     *
-     * @param handleHostRect Handle host rectangle might be given to improve performance.
-     */
-    redraw(handleHostRect) {
-        const domWrapper = this._domResizerWrapper;
-        // Refresh only if resizer exists in the DOM.
-        if (!existsInDom(domWrapper)) {
-            return;
-        }
-        const widgetWrapper = domWrapper.parentElement;
-        const handleHost = this._getHandleHost();
-        const resizerWrapper = this._viewResizerWrapper;
-        const currentDimensions = [
-            resizerWrapper.getStyle('width'),
-            resizerWrapper.getStyle('height'),
-            resizerWrapper.getStyle('left'),
-            resizerWrapper.getStyle('top')
-        ];
-        let newDimensions;
-        if (widgetWrapper.isSameNode(handleHost)) {
-            const clientRect = handleHostRect || new Rect(handleHost);
-            newDimensions = [
-                clientRect.width + 'px',
-                clientRect.height + 'px',
-                undefined,
-                undefined
-            ];
-        }
-        // In case a resizing host is not a widget wrapper, we need to compensate
-        // for any additional offsets the resize host might have. E.g. wrapper padding
-        // or simply another editable. By doing that the border and resizers are shown
-        // only around the resize host.
-        else {
-            newDimensions = [
-                handleHost.offsetWidth + 'px',
-                handleHost.offsetHeight + 'px',
-                handleHost.offsetLeft + 'px',
-                handleHost.offsetTop + 'px'
-            ];
-        }
-        // Make changes to the view only if the resizer should actually get new dimensions.
-        // Otherwise, if View#change() was always called, this would cause EditorUI#update
-        // loops because the WidgetResize plugin listens to EditorUI#update and updates
-        // the resizer.
-        // https://github.com/ckeditor/ckeditor5/issues/7633
-        if (compareArrays(currentDimensions, newDimensions) !== 'same') {
-            this._options.editor.editing.view.change(writer => {
-                writer.setStyle({
-                    width: newDimensions[0],
-                    height: newDimensions[1],
-                    left: newDimensions[2],
-                    top: newDimensions[3]
-                }, resizerWrapper);
-            });
-        }
-    }
-    containsHandle(domElement) {
-        return this._domResizerWrapper.contains(domElement);
-    }
-    static isResizeHandle(domElement) {
-        return domElement.classList.contains('ck-widget__resizer__handle');
-    }
-    /**
-     * Cleans up the context state.
-     */
-    _cleanup() {
-        this._sizeView._dismiss();
-        const editingView = this._options.editor.editing.view;
-        editingView.change(writer => {
-            writer.setStyle('width', this._initialViewWidth, this._options.viewElement);
-        });
-    }
-    /**
-     * Calculates the proposed size as the resize handles are dragged.
-     *
-     * @param domEventData Event data that caused the size update request. It should be used to calculate the proposed size.
-     */
-    _proposeNewSize(domEventData) {
-        const state = this.state;
-        const currentCoordinates = extractCoordinates(domEventData);
-        const isCentered = this._options.isCentered ? this._options.isCentered(this) : true;
-        // Enlargement defines how much the resize host has changed in a given axis. Naturally it could be a negative number
-        // meaning that it has been shrunk.
-        //
-        // +----------------+--+
-        // |                |  |
-        // |       img      |  |
-        // |  /handle host  |  |
-        // +----------------+  | ^
-        // |                   | | - enlarge y
-        // +-------------------+ v
-        // 					<-->
-        // 					 enlarge x
-        const enlargement = {
-            x: state._referenceCoordinates.x - (currentCoordinates.x + state.originalWidth),
-            y: (currentCoordinates.y - state.originalHeight) - state._referenceCoordinates.y
-        };
-        if (isCentered && state.activeHandlePosition.endsWith('-right')) {
-            enlargement.x = currentCoordinates.x - (state._referenceCoordinates.x + state.originalWidth);
-        }
-        // Objects needs to be resized twice as much in horizontal axis if centered, since enlargement is counted from
-        // one resized corner to your cursor. It needs to be duplicated to compensate for the other side too.
-        if (isCentered) {
-            enlargement.x *= 2;
-        }
-        // const resizeHost = this._getResizeHost();
-        // The size proposed by the user. It does not consider the aspect ratio.
-        let width = Math.abs(state.originalWidth + enlargement.x);
-        let height = Math.abs(state.originalHeight + enlargement.y);
-        // Dominant determination must take the ratio into account.
-        const dominant = width / state.aspectRatio > height ? 'width' : 'height';
-        if (dominant == 'width') {
-            height = width / state.aspectRatio;
-        }
-        else {
-            width = height * state.aspectRatio;
-        }
-        return {
-            width: Math.round(width),
-            height: Math.round(height),
-            widthPercents: Math.min(Math.round(state.originalWidthPercents / state.originalWidth * width * 100) / 100, 100)
-        };
-    }
-    /**
-     * Obtains the resize host.
-     *
-     * Resize host is an object that receives dimensions which are the result of resizing.
-     */
-    _getResizeHost() {
-        const widgetWrapper = this._domResizerWrapper.parentElement;
-        return this._options.getResizeHost(widgetWrapper);
-    }
-    /**
-     * Obtains the handle host.
-     *
-     * Handle host is an object that the handles are aligned to.
-     *
-     * Handle host will not always be an entire widget itself. Take an image as an example. The image widget
-     * contains an image and a caption. Only the image should be surrounded with handles.
-     */
-    _getHandleHost() {
-        const widgetWrapper = this._domResizerWrapper.parentElement;
-        return this._options.getHandleHost(widgetWrapper);
-    }
-    /**
-     * DOM container of the entire resize UI.
-     *
-     * Note that this property will have a value only after the element bound with the resizer is rendered
-     * (otherwise `null`).
-     */
-    get _domResizerWrapper() {
-        return this._options.editor.editing.view.domConverter.mapViewToDom(this._viewResizerWrapper);
-    }
-    /**
-     * Renders the resize handles in the DOM.
-     *
-     * @param domElement The resizer wrapper.
-     */
-    _appendHandles(domElement) {
-        const resizerPositions = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
-        for (const currentPosition of resizerPositions) {
-            domElement.appendChild((new Template({
-                tag: 'div',
-                attributes: {
-                    class: `ck-widget__resizer__handle ${getResizerClass(currentPosition)}`
-                }
-            }).render()));
-        }
-    }
-    /**
-     * Sets up the {@link #_sizeView} property and adds it to the passed `domElement`.
-     */
-    _appendSizeUI(domElement) {
-        this._sizeView = new SizeView();
-        // Make sure icon#element is rendered before passing to appendChild().
-        this._sizeView.render();
-        domElement.appendChild(this._sizeView.element);
-    }
-}
-/**
- * @param resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
- * @returns A prefixed HTML class name for the resizer element
- */
-function getResizerClass(resizerPosition) {
-    return `ck-widget__resizer__handle-${resizerPosition}`;
-}
-function extractCoordinates(event) {
-    return {
-        x: event.pageX,
-        y: event.pageY
-    };
-}
-function existsInDom(element) {
-    return element && element.ownerDocument && element.ownerDocument.contains(element);
-}

package/src/widgetresize/resizerstate.js

@@ -1,165 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module widget/widgetresize/resizerstate
- */
-import { ObservableMixin, Rect } from '@ckeditor/ckeditor5-utils';
-import { calculateResizeHostPercentageWidth } from '../utils.js';
-/**
- * Stores the internal state of a single resizable object.
- */
-export class WidgetResizeState extends /* #__PURE__ */ ObservableMixin() {
-    /**
-     * The reference point of the resizer where the dragging started. It is used to measure the distance the user cursor
-     * traveled, so how much the image should be enlarged.
-     * This information is only known after the DOM was rendered, so it will be updated later.
-     *
-     * @internal
-     */
-    _referenceCoordinates;
-    /**
-     * Resizer options.
-     */
-    _options;
-    /**
-     * The original width (pixels) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalWidth;
-    /**
-     * The original height (pixels) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalHeight;
-    /**
-     * The original width (percents) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalWidthPercents;
-    /**
-     * A width to height ratio of the resized image.
-     *
-     * @readonly
-     */
-    _aspectRatio;
-    /**
-     * @param options Resizer options.
-     */
-    constructor(options) {
-        super();
-        this.set('activeHandlePosition', null);
-        this.set('proposedWidthPercents', null);
-        this.set('proposedWidth', null);
-        this.set('proposedHeight', null);
-        this.set('proposedHandleHostWidth', null);
-        this.set('proposedHandleHostHeight', null);
-        this._options = options;
-        this._referenceCoordinates = null;
-    }
-    /**
-     * The original width (pixels) of the resized object when the resize process was started.
-     */
-    get originalWidth() {
-        return this._originalWidth;
-    }
-    /**
-     * The original height (pixels) of the resized object when the resize process was started.
-     */
-    get originalHeight() {
-        return this._originalHeight;
-    }
-    /**
-     * The original width (percents) of the resized object when the resize process was started.
-     */
-    get originalWidthPercents() {
-        return this._originalWidthPercents;
-    }
-    /**
-     * A width to height ratio of the resized image.
-     */
-    get aspectRatio() {
-        return this._aspectRatio;
-    }
-    /**
-     *
-     * @param domResizeHandle The handle used to calculate the reference point.
-     */
-    begin(domResizeHandle, domHandleHost, domResizeHost) {
-        const clientRect = new Rect(domHandleHost);
-        this.activeHandlePosition = getHandlePosition(domResizeHandle);
-        this._referenceCoordinates = getAbsoluteBoundaryPoint(domHandleHost, getOppositePosition(this.activeHandlePosition));
-        this._originalWidth = clientRect.width;
-        this._originalHeight = clientRect.height;
-        this._aspectRatio = clientRect.width / clientRect.height;
-        const widthStyle = domResizeHost.style.width;
-        if (widthStyle && widthStyle.match(/^\d+(\.\d*)?%$/)) {
-            this._originalWidthPercents = parseFloat(widthStyle);
-        }
-        else {
-            this._originalWidthPercents = calculateResizeHostPercentageWidth(domResizeHost, clientRect);
-        }
-    }
-    update(newSize) {
-        this.proposedWidth = newSize.width;
-        this.proposedHeight = newSize.height;
-        this.proposedWidthPercents = newSize.widthPercents;
-        this.proposedHandleHostWidth = newSize.handleHostWidth;
-        this.proposedHandleHostHeight = newSize.handleHostHeight;
-    }
-}
-/**
- * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
- *
- * @param resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
- */
-function getAbsoluteBoundaryPoint(element, resizerPosition) {
-    const elementRect = new Rect(element);
-    const positionParts = resizerPosition.split('-');
-    const ret = {
-        x: positionParts[1] == 'right' ? elementRect.right : elementRect.left,
-        y: positionParts[0] == 'bottom' ? elementRect.bottom : elementRect.top
-    };
-    ret.x += element.ownerDocument.defaultView.scrollX;
-    ret.y += element.ownerDocument.defaultView.scrollY;
-    return ret;
-}
-/**
- * @param resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
- * @returns A prefixed HTML class name for the resizer element.
- */
-function getResizerHandleClass(resizerPosition) {
-    return `ck-widget__resizer__handle-${resizerPosition}`;
-}
-/**
- * Determines the position of a given resize handle.
- *
- * @param domHandle Handle used to calculate the reference point.
- * @returns Returns a string like `"top-left"` or `undefined` if not matched.
- */
-function getHandlePosition(domHandle) {
-    const resizerPositions = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
-    for (const position of resizerPositions) {
-        if (domHandle.classList.contains(getResizerHandleClass(position))) {
-            return position;
-        }
-    }
-}
-/**
- * @param position Like `"top-left"`.
- * @returns Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
- */
-function getOppositePosition(position) {
-    const parts = position.split('-');
-    const replacements = {
-        top: 'bottom',
-        bottom: 'top',
-        left: 'right',
-        right: 'left'
-    };
-    return `${replacements[parts[0]]}-${replacements[parts[1]]}`;
-}

package/src/widgetresize/sizeview.js

@@ -1,65 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module widget/widgetresize/sizeview
- */
-import { View } from '@ckeditor/ckeditor5-ui';
-/**
- * A view displaying the proposed new element size during the resizing.
- *
- * @internal
- */
-export class SizeView extends View {
-    constructor() {
-        super();
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-size-view',
-                    bind.to('_viewPosition', value => value ? `ck-orientation-${value}` : '')
-                ],
-                style: {
-                    display: bind.if('_isVisible', 'none', visible => !visible)
-                }
-            },
-            children: [{
-                    text: bind.to('_label')
-                }]
-        });
-    }
-    /**
-     * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
-     *
-     * @internal
-     * @param options An object defining the resizer options, used for setting the proper size label.
-     * @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
-     */
-    _bindToState(options, resizeState) {
-        this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height) => width !== null && height !== null);
-        this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents) => {
-            if (options.unit === 'px') {
-                return `${width}×${height}`;
-            }
-            else {
-                return `${widthPercents}%`;
-            }
-        });
-        this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', 
-        // If the widget is too small to contain the size label, display the label above.
-        (position, width, height) => width < 50 || height < 50 ? 'above-center' : position);
-    }
-    /**
-     * A method used for cleaning up. It removes the bindings and hides the view.
-     *
-     * @internal
-     */
-    _dismiss() {
-        this.unbind();
-        this._isVisible = false;
-    }
-}