Edit File by line

[44000] Fix | Delete

* @param value Array of control points.

[44001] Fix | Delete

* @param initialIndex Index of the position to test.

[44002] Fix | Delete

* @param newPosition New position of the control point.

[44003] Fix | Delete

* @param minDistance Distance considered to be overlapping.

[44004] Fix | Delete

[44005] Fix | Delete

* @return True if the point is overlapping.

[44006] Fix | Delete

[44007] Fix | Delete

function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {

[44008] Fix | Delete

const initialPosition = value[initialIndex].position;

[44009] Fix | Delete

const minPosition = Math.min(initialPosition, newPosition);

[44010] Fix | Delete

const maxPosition = Math.max(initialPosition, newPosition);

[44011] Fix | Delete

return value.some(({

[44012] Fix | Delete

position

[44013] Fix | Delete

}, index) => {

[44014] Fix | Delete

return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);

[44015] Fix | Delete

});

[44016] Fix | Delete

}

[44017] Fix | Delete

[44018] Fix | Delete

/**

[44019] Fix | Delete

* Adds a control point from an array and returns the new array.

[44020] Fix | Delete

[44021] Fix | Delete

* @param points Array of control points.

[44022] Fix | Delete

* @param position Position to insert the new point.

[44023] Fix | Delete

* @param color Color to update the control point at index.

[44024] Fix | Delete

[44025] Fix | Delete

* @return New array of control points.

[44026] Fix | Delete

[44027] Fix | Delete

function addControlPoint(points, position, color) {

[44028] Fix | Delete

const nextIndex = points.findIndex(point => point.position > position);

[44029] Fix | Delete

const newPoint = {

[44030] Fix | Delete

color,

[44031] Fix | Delete

position

[44032] Fix | Delete

};

[44033] Fix | Delete

const newPoints = points.slice();

[44034] Fix | Delete

newPoints.splice(nextIndex - 1, 0, newPoint);

[44035] Fix | Delete

return newPoints;

[44036] Fix | Delete

}

[44037] Fix | Delete

[44038] Fix | Delete

/**

[44039] Fix | Delete

* Removes a control point from an array and returns the new array.

[44040] Fix | Delete

[44041] Fix | Delete

* @param points Array of control points.

[44042] Fix | Delete

* @param index Index to remove.

[44043] Fix | Delete

[44044] Fix | Delete

* @return New array of control points.

[44045] Fix | Delete

[44046] Fix | Delete

function removeControlPoint(points, index) {

[44047] Fix | Delete

return points.filter((_point, pointIndex) => {

[44048] Fix | Delete

return pointIndex !== index;

[44049] Fix | Delete

});

[44050] Fix | Delete

}

[44051] Fix | Delete

/**

[44052] Fix | Delete

* Updates a control point from an array and returns the new array.

[44053] Fix | Delete

[44054] Fix | Delete

* @param points Array of control points.

[44055] Fix | Delete

* @param index Index to update.

[44056] Fix | Delete

* @param newPoint New control point to replace the index.

[44057] Fix | Delete

[44058] Fix | Delete

* @return New array of control points.

[44059] Fix | Delete

[44060] Fix | Delete

function updateControlPoint(points, index, newPoint) {

[44061] Fix | Delete

const newValue = points.slice();

[44062] Fix | Delete

newValue[index] = newPoint;

[44063] Fix | Delete

return newValue;

[44064] Fix | Delete

}

[44065] Fix | Delete

[44066] Fix | Delete

/**

[44067] Fix | Delete

* Updates the position of a control point from an array and returns the new array.

[44068] Fix | Delete

[44069] Fix | Delete

* @param points Array of control points.

[44070] Fix | Delete

* @param index Index to update.

[44071] Fix | Delete

* @param newPosition Position to move the control point at index.

[44072] Fix | Delete

[44073] Fix | Delete

* @return New array of control points.

[44074] Fix | Delete

[44075] Fix | Delete

function updateControlPointPosition(points, index, newPosition) {

[44076] Fix | Delete

if (isOverlapping(points, index, newPosition)) {

[44077] Fix | Delete

return points;

[44078] Fix | Delete

}

[44079] Fix | Delete

const newPoint = {

[44080] Fix | Delete

...points[index],

[44081] Fix | Delete

position: newPosition

[44082] Fix | Delete

};

[44083] Fix | Delete

return updateControlPoint(points, index, newPoint);

[44084] Fix | Delete

}

[44085] Fix | Delete

[44086] Fix | Delete

/**

[44087] Fix | Delete

* Updates the position of a control point from an array and returns the new array.

[44088] Fix | Delete

[44089] Fix | Delete

* @param points Array of control points.

[44090] Fix | Delete

* @param index Index to update.

[44091] Fix | Delete

* @param newColor Color to update the control point at index.

[44092] Fix | Delete

[44093] Fix | Delete

* @return New array of control points.

[44094] Fix | Delete

[44095] Fix | Delete

function updateControlPointColor(points, index, newColor) {

[44096] Fix | Delete

const newPoint = {

[44097] Fix | Delete

...points[index],

[44098] Fix | Delete

color: newColor

[44099] Fix | Delete

};

[44100] Fix | Delete

return updateControlPoint(points, index, newPoint);

[44101] Fix | Delete

}

[44102] Fix | Delete

[44103] Fix | Delete

/**

[44104] Fix | Delete

* Updates the position of a control point from an array and returns the new array.

[44105] Fix | Delete

[44106] Fix | Delete

* @param points Array of control points.

[44107] Fix | Delete

* @param position Position of the color stop.

[44108] Fix | Delete

* @param newColor Color to update the control point at index.

[44109] Fix | Delete

[44110] Fix | Delete

* @return New array of control points.

[44111] Fix | Delete

[44112] Fix | Delete

function updateControlPointColorByPosition(points, position, newColor) {

[44113] Fix | Delete

const index = points.findIndex(point => point.position === position);

[44114] Fix | Delete

return updateControlPointColor(points, index, newColor);

[44115] Fix | Delete

}

[44116] Fix | Delete

[44117] Fix | Delete

/**

[44118] Fix | Delete

* Gets the horizontal coordinate when dragging a control point with the mouse.

[44119] Fix | Delete

[44120] Fix | Delete

* @param mouseXcoordinate Horizontal coordinate of the mouse position.

[44121] Fix | Delete

* @param containerElement Container for the gradient picker.

[44122] Fix | Delete

[44123] Fix | Delete

* @return Whole number percentage from the left.

[44124] Fix | Delete

[44125] Fix | Delete

[44126] Fix | Delete

function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {

[44127] Fix | Delete

if (!containerElement) {

[44128] Fix | Delete

return;

[44129] Fix | Delete

}

[44130] Fix | Delete

const {

[44131] Fix | Delete

[44132] Fix | Delete

width

[44133] Fix | Delete

} = containerElement.getBoundingClientRect();

[44134] Fix | Delete

const absolutePositionValue = mouseXCoordinate - x;

[44135] Fix | Delete

return Math.round(clampPercent(absolutePositionValue * 100 / width));

[44136] Fix | Delete

}

[44137] Fix | Delete

[44138] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js

[44139] Fix | Delete

/**

[44140] Fix | Delete

* External dependencies

[44141] Fix | Delete

[44142] Fix | Delete

[44143] Fix | Delete

[44144] Fix | Delete

[44145] Fix | Delete

/**

[44146] Fix | Delete

* WordPress dependencies

[44147] Fix | Delete

[44148] Fix | Delete

[44149] Fix | Delete

[44150] Fix | Delete

[44151] Fix | Delete

[44152] Fix | Delete

[44153] Fix | Delete

/**

[44154] Fix | Delete

* Internal dependencies

[44155] Fix | Delete

[44156] Fix | Delete

[44157] Fix | Delete

[44158] Fix | Delete

[44159] Fix | Delete

[44160] Fix | Delete

[44161] Fix | Delete

[44162] Fix | Delete

[44163] Fix | Delete

[44164] Fix | Delete

[44165] Fix | Delete

[44166] Fix | Delete

[44167] Fix | Delete

function ControlPointButton({

[44168] Fix | Delete

isOpen,

[44169] Fix | Delete

position,

[44170] Fix | Delete

color,

[44171] Fix | Delete

...additionalProps

[44172] Fix | Delete

}) {

[44173] Fix | Delete

const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton);

[44174] Fix | Delete

const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;

[44175] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[44176] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[44177] Fix | Delete

"aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(

[44178] Fix | Delete

// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).

[44179] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),

[44180] Fix | Delete

"aria-describedby": descriptionId,

[44181] Fix | Delete

"aria-haspopup": "true",

[44182] Fix | Delete

"aria-expanded": isOpen,

[44183] Fix | Delete

className: dist_clsx('components-custom-gradient-picker__control-point-button', {

[44184] Fix | Delete

'is-active': isOpen

[44185] Fix | Delete

}),

[44186] Fix | Delete

...additionalProps

[44187] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {

[44188] Fix | Delete

id: descriptionId,

[44189] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')

[44190] Fix | Delete

})]

[44191] Fix | Delete

});

[44192] Fix | Delete

}

[44193] Fix | Delete

function GradientColorPickerDropdown({

[44194] Fix | Delete

isRenderedInSidebar,

[44195] Fix | Delete

className,

[44196] Fix | Delete

...props

[44197] Fix | Delete

}) {

[44198] Fix | Delete

// Open the popover below the gradient control/insertion point

[44199] Fix | Delete

const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({

[44200] Fix | Delete

placement: 'bottom',

[44201] Fix | Delete

offset: 8,

[44202] Fix | Delete

// Disabling resize as it would otherwise cause the popover to show

[44203] Fix | Delete

// scrollbars while dragging the color picker's handle close to the

[44204] Fix | Delete

// popover edge.

[44205] Fix | Delete

resize: false

[44206] Fix | Delete

}), []);

[44207] Fix | Delete

const mergedClassName = dist_clsx('components-custom-gradient-picker__control-point-dropdown', className);

[44208] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, {

[44209] Fix | Delete

isRenderedInSidebar: isRenderedInSidebar,

[44210] Fix | Delete

popoverProps: popoverProps,

[44211] Fix | Delete

className: mergedClassName,

[44212] Fix | Delete

...props

[44213] Fix | Delete

});

[44214] Fix | Delete

}

[44215] Fix | Delete

function ControlPoints({

[44216] Fix | Delete

disableRemove,

[44217] Fix | Delete

disableAlpha,

[44218] Fix | Delete

gradientPickerDomRef,

[44219] Fix | Delete

ignoreMarkerPosition,

[44220] Fix | Delete

value: controlPoints,

[44221] Fix | Delete

onChange,

[44222] Fix | Delete

onStartControlPointChange,

[44223] Fix | Delete

onStopControlPointChange,

[44224] Fix | Delete

__experimentalIsRenderedInSidebar

[44225] Fix | Delete

}) {

[44226] Fix | Delete

const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)();

[44227] Fix | Delete

const onMouseMove = event => {

[44228] Fix | Delete

if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {

[44229] Fix | Delete

return;

[44230] Fix | Delete

}

[44231] Fix | Delete

const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);

[44232] Fix | Delete

const {

[44233] Fix | Delete

initialPosition,

[44234] Fix | Delete

index,

[44235] Fix | Delete

significantMoveHappened

[44236] Fix | Delete

} = controlPointMoveState.current;

[44237] Fix | Delete

if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {

[44238] Fix | Delete

controlPointMoveState.current.significantMoveHappened = true;

[44239] Fix | Delete

}

[44240] Fix | Delete

onChange(updateControlPointPosition(controlPoints, index, relativePosition));

[44241] Fix | Delete

};

[44242] Fix | Delete

const cleanEventListeners = () => {

[44243] Fix | Delete

if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {

[44244] Fix | Delete

window.removeEventListener('mousemove', onMouseMove);

[44245] Fix | Delete

window.removeEventListener('mouseup', cleanEventListeners);

[44246] Fix | Delete

onStopControlPointChange();

[44247] Fix | Delete

controlPointMoveState.current.listenersActivated = false;

[44248] Fix | Delete

}

[44249] Fix | Delete

};

[44250] Fix | Delete

[44251] Fix | Delete

// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`

[44252] Fix | Delete

// This memoization would prevent the event listeners from being properly cleaned.

[44253] Fix | Delete

// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.

[44254] Fix | Delete

const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)();

[44255] Fix | Delete

cleanEventListenersRef.current = cleanEventListeners;

[44256] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[44257] Fix | Delete

return () => {

[44258] Fix | Delete

cleanEventListenersRef.current?.();

[44259] Fix | Delete

};

[44260] Fix | Delete

}, []);

[44261] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[44262] Fix | Delete

children: controlPoints.map((point, index) => {

[44263] Fix | Delete

const initialPosition = point?.position;

[44264] Fix | Delete

return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, {

[44265] Fix | Delete

isRenderedInSidebar: __experimentalIsRenderedInSidebar,

[44266] Fix | Delete

onClose: onStopControlPointChange,

[44267] Fix | Delete

renderToggle: ({

[44268] Fix | Delete

isOpen,

[44269] Fix | Delete

onToggle

[44270] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ControlPointButton, {

[44271] Fix | Delete

onClick: () => {

[44272] Fix | Delete

if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {

[44273] Fix | Delete

return;

[44274] Fix | Delete

}

[44275] Fix | Delete

if (isOpen) {

[44276] Fix | Delete

onStopControlPointChange();

[44277] Fix | Delete

} else {

[44278] Fix | Delete

onStartControlPointChange();

[44279] Fix | Delete

}

[44280] Fix | Delete

onToggle();

[44281] Fix | Delete

[44282] Fix | Delete

onMouseDown: () => {

[44283] Fix | Delete

if (window && window.addEventListener) {

[44284] Fix | Delete

controlPointMoveState.current = {

[44285] Fix | Delete

initialPosition,

[44286] Fix | Delete

index,

[44287] Fix | Delete

significantMoveHappened: false,

[44288] Fix | Delete

listenersActivated: true

[44289] Fix | Delete

};

[44290] Fix | Delete

onStartControlPointChange();

[44291] Fix | Delete

window.addEventListener('mousemove', onMouseMove);

[44292] Fix | Delete

window.addEventListener('mouseup', cleanEventListeners);

[44293] Fix | Delete

}

[44294] Fix | Delete

[44295] Fix | Delete

onKeyDown: event => {

[44296] Fix | Delete

if (event.code === 'ArrowLeft') {

[44297] Fix | Delete

// Stop propagation of the key press event to avoid focus moving

[44298] Fix | Delete

// to another editor area.

[44299] Fix | Delete

event.stopPropagation();

[44300] Fix | Delete

onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));

[44301] Fix | Delete

} else if (event.code === 'ArrowRight') {

[44302] Fix | Delete

// Stop propagation of the key press event to avoid focus moving

[44303] Fix | Delete

// to another editor area.

[44304] Fix | Delete

event.stopPropagation();

[44305] Fix | Delete

onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));

[44306] Fix | Delete

}

[44307] Fix | Delete

[44308] Fix | Delete

isOpen: isOpen,

[44309] Fix | Delete

position: point.position,

[44310] Fix | Delete

color: point.color

[44311] Fix | Delete

}, index),

[44312] Fix | Delete

renderContent: ({

[44313] Fix | Delete

onClose

[44314] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(dropdown_content_wrapper, {

[44315] Fix | Delete

paddingSize: "none",

[44316] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {

[44317] Fix | Delete

enableAlpha: !disableAlpha,

[44318] Fix | Delete

color: point.color,

[44319] Fix | Delete

onChange: color => {

[44320] Fix | Delete

onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString()));

[44321] Fix | Delete

}

[44322] Fix | Delete

}), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(h_stack_component, {

[44323] Fix | Delete

className: "components-custom-gradient-picker__remove-control-point-wrapper",

[44324] Fix | Delete

alignment: "center",

[44325] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[44326] Fix | Delete

onClick: () => {

[44327] Fix | Delete

onChange(removeControlPoint(controlPoints, index));

[44328] Fix | Delete

onClose();

[44329] Fix | Delete

[44330] Fix | Delete

variant: "link",

[44331] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')

[44332] Fix | Delete

})

[44333] Fix | Delete

})]

[44334] Fix | Delete

}),

[44335] Fix | Delete

style: {

[44336] Fix | Delete

left: `${point.position}%`,

[44337] Fix | Delete

transform: 'translateX( -50% )'

[44338] Fix | Delete

}

[44339] Fix | Delete

}, index);

[44340] Fix | Delete

})

[44341] Fix | Delete

});

[44342] Fix | Delete

}

[44343] Fix | Delete

function InsertPoint({

[44344] Fix | Delete

value: controlPoints,

[44345] Fix | Delete

onChange,

[44346] Fix | Delete

onOpenInserter,

[44347] Fix | Delete

onCloseInserter,

[44348] Fix | Delete

insertPosition,

[44349] Fix | Delete

disableAlpha,

[44350] Fix | Delete

__experimentalIsRenderedInSidebar

[44351] Fix | Delete

}) {

[44352] Fix | Delete

const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false);

[44353] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GradientColorPickerDropdown, {

[44354] Fix | Delete

isRenderedInSidebar: __experimentalIsRenderedInSidebar,

[44355] Fix | Delete

className: "components-custom-gradient-picker__inserter",

[44356] Fix | Delete

onClose: () => {

[44357] Fix | Delete

onCloseInserter();

[44358] Fix | Delete

[44359] Fix | Delete

renderToggle: ({

[44360] Fix | Delete

isOpen,

[44361] Fix | Delete

onToggle

[44362] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[44363] Fix | Delete

"aria-expanded": isOpen,

[44364] Fix | Delete

"aria-haspopup": "true",

[44365] Fix | Delete

onClick: () => {

[44366] Fix | Delete

if (isOpen) {

[44367] Fix | Delete

onCloseInserter();

[44368] Fix | Delete

} else {

[44369] Fix | Delete

setAlreadyInsertedPoint(false);

[44370] Fix | Delete

onOpenInserter();

[44371] Fix | Delete

}

[44372] Fix | Delete

onToggle();

[44373] Fix | Delete

[44374] Fix | Delete

className: "components-custom-gradient-picker__insert-point-dropdown",

[44375] Fix | Delete

icon: library_plus

[44376] Fix | Delete

}),

[44377] Fix | Delete

renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {

[44378] Fix | Delete

paddingSize: "none",

[44379] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LegacyAdapter, {

[44380] Fix | Delete

enableAlpha: !disableAlpha,

[44381] Fix | Delete

onChange: color => {

[44382] Fix | Delete

if (!alreadyInsertedPoint) {

[44383] Fix | Delete

onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString()));

[44384] Fix | Delete

setAlreadyInsertedPoint(true);

[44385] Fix | Delete

} else {

[44386] Fix | Delete

onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString()));

[44387] Fix | Delete

}

[44388] Fix | Delete

}

[44389] Fix | Delete

})

[44390] Fix | Delete

}),

[44391] Fix | Delete

style: insertPosition !== null ? {

[44392] Fix | Delete

left: `${insertPosition}%`,

[44393] Fix | Delete

transform: 'translateX( -50% )'

[44394] Fix | Delete

} : undefined

[44395] Fix | Delete

});

[44396] Fix | Delete

}

[44397] Fix | Delete

ControlPoints.InsertPoint = InsertPoint;

[44398] Fix | Delete

/* harmony default export */ const control_points = (ControlPoints);

[44399] Fix | Delete

[44400] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js

[44401] Fix | Delete

/**

[44402] Fix | Delete

* External dependencies

[44403] Fix | Delete

[44404] Fix | Delete

[44405] Fix | Delete

[44406] Fix | Delete

/**

[44407] Fix | Delete

* WordPress dependencies

[44408] Fix | Delete

[44409] Fix | Delete

[44410] Fix | Delete

[44411] Fix | Delete

/**

[44412] Fix | Delete

* Internal dependencies

[44413] Fix | Delete

[44414] Fix | Delete

[44415] Fix | Delete

[44416] Fix | Delete

[44417] Fix | Delete

[44418] Fix | Delete

[44419] Fix | Delete

const customGradientBarReducer = (state, action) => {

[44420] Fix | Delete

switch (action.type) {

[44421] Fix | Delete

case 'MOVE_INSERTER':

[44422] Fix | Delete

if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {

[44423] Fix | Delete

return {

[44424] Fix | Delete

id: 'MOVING_INSERTER',

[44425] Fix | Delete

insertPosition: action.insertPosition

[44426] Fix | Delete

};

[44427] Fix | Delete

}

[44428] Fix | Delete

break;

[44429] Fix | Delete

case 'STOP_INSERTER_MOVE':

[44430] Fix | Delete

if (state.id === 'MOVING_INSERTER') {

[44431] Fix | Delete

return {

[44432] Fix | Delete

id: 'IDLE'

[44433] Fix | Delete

};

[44434] Fix | Delete

}

[44435] Fix | Delete

break;

[44436] Fix | Delete

case 'OPEN_INSERTER':

[44437] Fix | Delete

if (state.id === 'MOVING_INSERTER') {

[44438] Fix | Delete

return {

[44439] Fix | Delete

id: 'INSERTING_CONTROL_POINT',

[44440] Fix | Delete

insertPosition: state.insertPosition

[44441] Fix | Delete

};

[44442] Fix | Delete

}

[44443] Fix | Delete

break;

[44444] Fix | Delete

case 'CLOSE_INSERTER':

[44445] Fix | Delete

if (state.id === 'INSERTING_CONTROL_POINT') {

[44446] Fix | Delete

return {

[44447] Fix | Delete

id: 'IDLE'

[44448] Fix | Delete

};

[44449] Fix | Delete

}

[44450] Fix | Delete

break;

[44451] Fix | Delete

case 'START_CONTROL_CHANGE':

[44452] Fix | Delete

if (state.id === 'IDLE') {

[44453] Fix | Delete

return {

[44454] Fix | Delete

id: 'MOVING_CONTROL_POINT'

[44455] Fix | Delete

};

[44456] Fix | Delete

}

[44457] Fix | Delete

break;

[44458] Fix | Delete

case 'STOP_CONTROL_CHANGE':

[44459] Fix | Delete

if (state.id === 'MOVING_CONTROL_POINT') {

[44460] Fix | Delete

return {

[44461] Fix | Delete

id: 'IDLE'

[44462] Fix | Delete

};

[44463] Fix | Delete

}

[44464] Fix | Delete

break;

[44465] Fix | Delete

}

[44466] Fix | Delete

return state;

[44467] Fix | Delete

};

[44468] Fix | Delete

const customGradientBarReducerInitialState = {

[44469] Fix | Delete

id: 'IDLE'

[44470] Fix | Delete

};

[44471] Fix | Delete

function CustomGradientBar({

[44472] Fix | Delete

background,

[44473] Fix | Delete

hasGradient,

[44474] Fix | Delete

value: controlPoints,

[44475] Fix | Delete

onChange,

[44476] Fix | Delete

disableInserter = false,

[44477] Fix | Delete

disableAlpha = false,

[44478] Fix | Delete

__experimentalIsRenderedInSidebar = false

[44479] Fix | Delete

}) {

[44480] Fix | Delete

const gradientMarkersContainerDomRef = (0,external_wp_element_namespaceObject.useRef)(null);

[44481] Fix | Delete

const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);

[44482] Fix | Delete

const onMouseEnterAndMove = event => {

[44483] Fix | Delete

if (!gradientMarkersContainerDomRef.current) {

[44484] Fix | Delete

return;

[44485] Fix | Delete

}

[44486] Fix | Delete

const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);

[44487] Fix | Delete

[44488] Fix | Delete

// If the insert point is close to an existing control point don't show it.

[44489] Fix | Delete

if (controlPoints.some(({

[44490] Fix | Delete

position

[44491] Fix | Delete

}) => {

[44492] Fix | Delete

return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;

[44493] Fix | Delete

})) {

[44494] Fix | Delete

if (gradientBarState.id === 'MOVING_INSERTER') {

[44495] Fix | Delete

gradientBarStateDispatch({

[44496] Fix | Delete

type: 'STOP_INSERTER_MOVE'

[44497] Fix | Delete

});

[44498] Fix | Delete

}

[44499] Fix | Delete

1 ...87 888990 91 ...149