refactor(boolean-props): omit is prefix

This commit is contained in:
moklick
2021-11-09 12:35:21 +01:00
parent 050bb3130f
commit a79e953ab3
13 changed files with 66 additions and 74 deletions
+1 -8
View File
@@ -55,14 +55,7 @@ const StressFlow = () => {
}, []); }, []);
return ( return (
<ReactFlow <ReactFlow nodes={nodes} edges={edges} onLoad={onLoad} onConnect={onConnect} onNodesChange={onNodesChange}>
onlyRenderVisibleElements
nodes={nodes}
edges={edges}
onLoad={onLoad}
onConnect={onConnect}
onNodesChange={onNodesChange}
>
<MiniMap /> <MiniMap />
<Controls /> <Controls />
<Background /> <Background />
+3 -3
View File
@@ -24,7 +24,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
data, data,
onClick, onClick,
onEdgeDoubleClick, onEdgeDoubleClick,
isSelected, selected,
animated, animated,
label, label,
labelStyle, labelStyle,
@@ -70,7 +70,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
'react-flow__edge', 'react-flow__edge',
`react-flow__edge-${type}`, `react-flow__edge-${type}`,
className, className,
{ selected: isSelected, animated, inactive, updating }, { selected, animated, inactive, updating },
]); ]);
const edgeElement = useMemo<Edge>(() => { const edgeElement = useMemo<Edge>(() => {
@@ -222,7 +222,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
id={id} id={id}
source={source} source={source}
target={target} target={target}
isSelected={isSelected} selected={selected}
animated={animated} animated={animated}
label={label} label={label}
labelStyle={labelStyle} labelStyle={labelStyle}
+21 -22
View File
@@ -23,7 +23,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
scale, scale,
xPos, xPos,
yPos, yPos,
isSelected, selected,
onClick, onClick,
onMouseEnter, onMouseEnter,
onMouseMove, onMouseMove,
@@ -45,7 +45,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
isInitialized, isInitialized,
snapToGrid, snapToGrid,
snapGrid, snapGrid,
isDragging, dragging,
resizeObserver, resizeObserver,
dragHandle, dragHandle,
zIndex, zIndex,
@@ -74,7 +74,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
...style, ...style,
}), }),
[ [
isSelected,
xPos, xPos,
yPos, yPos,
isSelectable, isSelectable,
@@ -91,28 +90,28 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
); );
const onMouseEnterHandler = useMemo(() => { const onMouseEnterHandler = useMemo(() => {
if (!onMouseEnter || isDragging) { if (!onMouseEnter || dragging) {
return; return;
} }
return (event: MouseEvent) => onMouseEnter(event, node); return (event: MouseEvent) => onMouseEnter(event, node);
}, [onMouseEnter, isDragging, node]); }, [onMouseEnter, dragging, node]);
const onMouseMoveHandler = useMemo(() => { const onMouseMoveHandler = useMemo(() => {
if (!onMouseMove || isDragging) { if (!onMouseMove || dragging) {
return; return;
} }
return (event: MouseEvent) => onMouseMove(event, node); return (event: MouseEvent) => onMouseMove(event, node);
}, [onMouseMove, isDragging, node]); }, [onMouseMove, dragging, node]);
const onMouseLeaveHandler = useMemo(() => { const onMouseLeaveHandler = useMemo(() => {
if (!onMouseLeave || isDragging) { if (!onMouseLeave || dragging) {
return; return;
} }
return (event: MouseEvent) => onMouseLeave(event, node); return (event: MouseEvent) => onMouseLeave(event, node);
}, [onMouseLeave, isDragging, node]); }, [onMouseLeave, dragging, node]);
const onContextMenuHandler = useMemo(() => { const onContextMenuHandler = useMemo(() => {
if (!onContextMenu) { if (!onContextMenu) {
@@ -128,7 +127,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
if (isSelectable) { if (isSelectable) {
unsetNodesSelection(); unsetNodesSelection();
if (!isSelected) { if (!selected) {
addSelectedElements([node]); addSelectedElements([node]);
} }
} }
@@ -136,7 +135,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onClick?.(event, node); onClick?.(event, node);
} }
}, },
[isSelectable, isSelected, isDraggable, onClick, node] [isSelectable, selected, isDraggable, onClick, node]
); );
const onDragStart = useCallback( const onDragStart = useCallback(
@@ -146,15 +145,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
if (selectNodesOnDrag && isSelectable) { if (selectNodesOnDrag && isSelectable) {
unsetNodesSelection(); unsetNodesSelection();
if (!isSelected) { if (!selected) {
addSelectedElements([node]); addSelectedElements([node]);
} }
} else if (!selectNodesOnDrag && !isSelected && isSelectable) { } else if (!selectNodesOnDrag && !selected && isSelectable) {
unselectNodesAndEdges(); unselectNodesAndEdges();
unsetNodesSelection(); unsetNodesSelection();
} }
}, },
[node, isSelected, selectNodesOnDrag, isSelectable, onNodeDragStart] [node, selected, selectNodesOnDrag, isSelectable, onNodeDragStart]
); );
const onDrag = useCallback( const onDrag = useCallback(
@@ -166,7 +165,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onNodeDrag(event as MouseEvent, node); onNodeDrag(event as MouseEvent, node);
} }
updateNodePosition({ id, isDragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } }); updateNodePosition({ id, dragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
}, },
[id, node, onNodeDrag] [id, node, onNodeDrag]
); );
@@ -175,8 +174,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
(event: DraggableEvent) => { (event: DraggableEvent) => {
// onDragStop also gets called when user just clicks on a node. // onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here // Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!isDragging) { if (!dragging) {
if (isSelectable && !selectNodesOnDrag && !isSelected) { if (isSelectable && !selectNodesOnDrag && !selected) {
addSelectedElements([node]); addSelectedElements([node]);
} }
@@ -187,12 +186,12 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
updateNodePosition({ updateNodePosition({
id: node.id, id: node.id,
isDragging: false, dragging: false,
}); });
onNodeDragStop?.(event as MouseEvent, node); onNodeDragStop?.(event as MouseEvent, node);
}, },
[node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, isDragging, isSelected] [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, dragging, selected]
); );
const onNodeDoubleClickHandler = useCallback( const onNodeDoubleClickHandler = useCallback(
@@ -226,7 +225,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
`react-flow__node-${type}`, `react-flow__node-${type}`,
className, className,
{ {
selected: isSelected, selected,
selectable: isSelectable, selectable: isSelectable,
parent: isParent, parent: isParent,
}, },
@@ -264,11 +263,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
type={type} type={type}
xPos={xPos} xPos={xPos}
yPos={yPos} yPos={yPos}
isSelected={isSelected} selected={selected}
isConnectable={isConnectable} isConnectable={isConnectable}
sourcePosition={sourcePosition} sourcePosition={sourcePosition}
targetPosition={targetPosition} targetPosition={targetPosition}
isDragging={isDragging} dragging={dragging}
dragHandle={dragHandle} dragHandle={dragHandle}
zIndex={zIndex} zIndex={zIndex}
/> />
+3 -3
View File
@@ -20,7 +20,7 @@ const selector = (s: ReactFlowState) => ({
transform: s.transform, transform: s.transform,
selectedNodesBbox: s.selectedNodesBbox, selectedNodesBbox: s.selectedNodesBbox,
selectionActive: s.selectionActive, selectionActive: s.selectionActive,
selectedNodes: s.nodes.filter((n) => n.isSelected), selectedNodes: s.nodes.filter((n) => n.selected),
snapToGrid: s.snapToGrid, snapToGrid: s.snapToGrid,
snapGrid: s.snapGrid, snapGrid: s.snapGrid,
updateNodePosition: s.updateNodePosition, updateNodePosition: s.updateNodePosition,
@@ -74,7 +74,7 @@ export default ({
x: data.deltaX, x: data.deltaX,
y: data.deltaY, y: data.deltaY,
}, },
isDragging: true, dragging: true,
}); });
}, },
[onSelectionDrag, selectedNodes, updateNodePosition] [onSelectionDrag, selectedNodes, updateNodePosition]
@@ -83,7 +83,7 @@ export default ({
const onStop = useCallback( const onStop = useCallback(
(event: MouseEvent) => { (event: MouseEvent) => {
updateNodePosition({ updateNodePosition({
isDragging: false, dragging: false,
}); });
onSelectionDragStop?.(event, selectedNodes); onSelectionDragStop?.(event, selectedNodes);
+2 -2
View File
@@ -9,8 +9,8 @@ interface SelectionListenerProps {
} }
const selectedElementsSelector = (s: ReactFlowState) => ({ const selectedElementsSelector = (s: ReactFlowState) => ({
selectedNodes: s.nodes.filter((n) => n.isSelected), selectedNodes: s.nodes.filter((n) => n.selected),
selectedEdges: s.edges.filter((e) => e.isSelected), selectedEdges: s.edges.filter((e) => e.selected),
}); });
// This is just a helper component for calling the onSelectionChange listener. // This is just a helper component for calling the onSelectionChange listener.
+1 -1
View File
@@ -167,7 +167,7 @@ const Edge = memo(
type={edgeType} type={edgeType}
data={edge.data} data={edge.data}
onClick={onEdgeClick} onClick={onEdgeClick}
isSelected={!!edge.isSelected} selected={!!edge.selected}
animated={edge.animated} animated={edge.animated}
label={edge.label} label={edge.label}
labelStyle={edge.labelStyle} labelStyle={edge.labelStyle}
+2 -2
View File
@@ -85,7 +85,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
isHidden={node.isHidden} isHidden={node.isHidden}
xPos={internals?.positionAbsolute?.x || 0} xPos={internals?.positionAbsolute?.x || 0}
yPos={internals?.positionAbsolute?.y || 0} yPos={internals?.positionAbsolute?.y || 0}
isDragging={node.isDragging} dragging={node.dragging}
isInitialized={isInitialized} isInitialized={isInitialized}
snapGrid={snapGrid} snapGrid={snapGrid}
snapToGrid={snapToGrid} snapToGrid={snapToGrid}
@@ -100,7 +100,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
onNodeDrag={props.onNodeDrag} onNodeDrag={props.onNodeDrag}
onNodeDragStop={props.onNodeDragStop} onNodeDragStop={props.onNodeDragStop}
scale={scale} scale={scale}
isSelected={!!node.isSelected} selected={!!node.selected}
isDraggable={isDraggable} isDraggable={isDraggable}
isSelectable={isSelectable} isSelectable={isSelectable}
isConnectable={isConnectable} isConnectable={isConnectable}
+2 -2
View File
@@ -29,8 +29,8 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
useEffect(() => { useEffect(() => {
const { nodes, edges } = store.getState(); const { nodes, edges } = store.getState();
const selectedNodes = nodes.filter((n) => n.isSelected); const selectedNodes = nodes.filter((n) => n.selected);
const selectedEdges = edges.filter((e) => e.isSelected); const selectedEdges = edges.filter((e) => e.selected);
if (deleteKeyPressed && (selectedNodes || selectedEdges)) { if (deleteKeyPressed && (selectedNodes || selectedEdges)) {
const connectedEdges = getConnectedEdges(selectedNodes, edges); const connectedEdges = getConnectedEdges(selectedNodes, edges);
+9 -9
View File
@@ -32,10 +32,10 @@ import { createNodeInternals } from './utils';
const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>(); const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
const createNodeOrEdgeSelectionChange = (isSelected: boolean) => (item: Node | Edge) => ({ const createNodeOrEdgeSelectionChange = (selected: boolean) => (item: Node | Edge) => ({
id: item.id, id: item.id,
type: 'select', type: 'select',
isSelected, selected,
}); });
const createStore = () => const createStore = () =>
@@ -141,11 +141,11 @@ const createStore = () =>
onNodesChange?.(nodesToChange); onNodesChange?.(nodesToChange);
}, },
updateNodePosition: ({ id, diff, isDragging }: NodeDiffUpdate) => { updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
const { onNodesChange, nodes, nodeExtent, nodeInternals } = get(); const { onNodesChange, nodes, nodeExtent, nodeInternals } = get();
if (onNodesChange) { if (onNodesChange) {
const matchingNodes = nodes.filter((n) => !!(n.isSelected || n.id === id)); const matchingNodes = nodes.filter((n) => !!(n.selected || n.id === id));
if (matchingNodes?.length) { if (matchingNodes?.length) {
onNodesChange( onNodesChange(
@@ -153,7 +153,7 @@ const createStore = () =>
const change: NodeDimensionChange = { const change: NodeDimensionChange = {
id: node.id, id: node.id,
type: 'dimensions', type: 'dimensions',
isDragging: !!isDragging, dragging: !!dragging,
}; };
if (diff) { if (diff) {
@@ -231,7 +231,7 @@ const createStore = () =>
}, },
unsetUserSelection: () => { unsetUserSelection: () => {
const { userSelectionRect, nodes } = get(); const { userSelectionRect, nodes } = get();
const selectedNodes = nodes.filter((node) => node.isSelected); const selectedNodes = nodes.filter((node) => node.selected);
const stateUpdate = { const stateUpdate = {
selectionActive: false, selectionActive: false,
@@ -281,7 +281,7 @@ const createStore = () =>
const { nodes, edges, onNodesChange, onEdgesChange } = get(); const { nodes, edges, onNodesChange, onEdgesChange } = get();
const nodesToUnselect = nodes.map((n) => { const nodesToUnselect = nodes.map((n) => {
n.isSelected = false; n.selected = false;
return createNodeOrEdgeSelectionChange(false)(n); return createNodeOrEdgeSelectionChange(false)(n);
}) as NodeChange[]; }) as NodeChange[];
const edgesToUnselect = edges.map(createNodeOrEdgeSelectionChange(false)) as EdgeChange[]; const edgesToUnselect = edges.map(createNodeOrEdgeSelectionChange(false)) as EdgeChange[];
@@ -322,8 +322,8 @@ const createStore = () =>
resetSelectedElements: () => { resetSelectedElements: () => {
const { nodes, edges, onNodesChange, onEdgesChange } = get(); const { nodes, edges, onNodesChange, onEdgesChange } = get();
const nodesToUnselect = nodes.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false)); const nodesToUnselect = nodes.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
const edgesToUnselect = edges.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false)); const edgesToUnselect = edges.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
if (nodesToUnselect.length) { if (nodesToUnselect.length) {
onNodesChange?.(nodesToUnselect as NodeChange[]); onNodesChange?.(nodesToUnselect as NodeChange[]);
+3 -3
View File
@@ -44,7 +44,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
height: node.height || null, height: node.height || null,
position: node.position, position: node.position,
positionAbsolute: node.position, positionAbsolute: node.position,
z: node.isDragging || node.isSelected ? 1000 : node.zIndex || 0, z: node.dragging || node.selected ? 1000 : node.zIndex || 0,
}; };
if (node.parentNode) { if (node.parentNode) {
internals.parentNode = node.parentNode; internals.parentNode = node.parentNode;
@@ -57,7 +57,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
const updatedInternals: NodeInternalsItem = nextNodeInternals.get(node.id)!; const updatedInternals: NodeInternalsItem = nextNodeInternals.get(node.id)!;
if (node.parentNode || parentNodes[node.id]) { if (node.parentNode || parentNodes[node.id]) {
let startingZ = updatedInternals.z; let startingZ = updatedInternals.z || 0;
if (!startingZ) { if (!startingZ) {
if (parentNodes[node.id] && node.parentNode) { if (parentNodes[node.id] && node.parentNode) {
@@ -69,7 +69,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, { const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
...node.position, ...node.position,
z: startingZ as number, z: startingZ,
}); });
updatedInternals.positionAbsolute = { updatedInternals.positionAbsolute = {
+14 -14
View File
@@ -15,13 +15,13 @@ export type NodeDimensionChange = {
dimensions?: Dimensions; dimensions?: Dimensions;
position?: XYPosition; position?: XYPosition;
handleBounds?: NodeHandleBounds; handleBounds?: NodeHandleBounds;
isDragging?: boolean; dragging?: boolean;
}; };
export type NodeSelectionChange = { export type NodeSelectionChange = {
id: string; id: string;
type: 'select'; type: 'select';
isSelected: boolean; selected: boolean;
}; };
export type NodeRemoveChange = { export type NodeRemoveChange = {
id: string; id: string;
@@ -74,8 +74,8 @@ export interface Node<T = any> {
targetPosition?: Position; targetPosition?: Position;
sourcePosition?: Position; sourcePosition?: Position;
isHidden?: boolean; isHidden?: boolean;
isSelected?: boolean; selected?: boolean;
isDragging?: boolean; dragging?: boolean;
draggable?: boolean; draggable?: boolean;
selectable?: boolean; selectable?: boolean;
connectable?: boolean; connectable?: boolean;
@@ -124,7 +124,7 @@ export interface Edge<T = any> {
className?: string; className?: string;
sourceNode?: Node; sourceNode?: Node;
targetNode?: Node; targetNode?: Node;
isSelected?: boolean; selected?: boolean;
markerStart?: EdgeMarkerType; markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType; markerEnd?: EdgeMarkerType;
} }
@@ -153,7 +153,7 @@ export interface WrapEdgeProps<T = any> {
data?: T; data?: T;
onClick?: (event: React.MouseEvent, edge: Edge) => void; onClick?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
isSelected: boolean; selected: boolean;
animated?: boolean; animated?: boolean;
label?: string | ReactNode; label?: string | ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
@@ -195,7 +195,7 @@ export interface EdgeProps<T = any> {
sourceY: number; sourceY: number;
targetX: number; targetX: number;
targetY: number; targetY: number;
isSelected?: boolean; selected?: boolean;
animated?: boolean; animated?: boolean;
sourcePosition: Position; sourcePosition: Position;
targetPosition: Position; targetPosition: Position;
@@ -231,13 +231,13 @@ export interface NodeProps<T = any> {
id: ElementId; id: ElementId;
type: string; type: string;
data: T; data: T;
isSelected: boolean; selected: boolean;
isConnectable: boolean; isConnectable: boolean;
xPos?: number; xPos?: number;
yPos?: number; yPos?: number;
targetPosition?: Position; targetPosition?: Position;
sourcePosition?: Position; sourcePosition?: Position;
isDragging?: boolean; dragging?: boolean;
dragHandle?: string; dragHandle?: string;
zIndex?: number; zIndex?: number;
} }
@@ -246,7 +246,7 @@ export interface NodeComponentProps<T = any> {
id: ElementId; id: ElementId;
type: string; type: string;
data: T; data: T;
isSelected?: boolean; selected?: boolean;
isConnectable: boolean; isConnectable: boolean;
transform?: Transform; transform?: Transform;
xPos?: number; xPos?: number;
@@ -263,7 +263,7 @@ export interface NodeComponentProps<T = any> {
onNodeDrag?: (node: Node) => void; onNodeDrag?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void; onNodeDragStop?: (node: Node) => void;
style?: CSSProperties; style?: CSSProperties;
isDragging?: boolean; dragging?: boolean;
dragHandle?: string; dragHandle?: string;
zIndex?: number; zIndex?: number;
} }
@@ -272,7 +272,7 @@ export interface WrapNodeProps<T = any> {
id: ElementId; id: ElementId;
type: string; type: string;
data: T; data: T;
isSelected: boolean; selected: boolean;
scale: number; scale: number;
xPos: number; xPos: number;
yPos: number; yPos: number;
@@ -299,7 +299,7 @@ export interface WrapNodeProps<T = any> {
isInitialized?: boolean; isInitialized?: boolean;
snapToGrid?: boolean; snapToGrid?: boolean;
snapGrid?: SnapGrid; snapGrid?: SnapGrid;
isDragging?: boolean; dragging?: boolean;
resizeObserver: ResizeObserver | null; resizeObserver: ResizeObserver | null;
dragHandle?: string; dragHandle?: string;
zIndex: number; zIndex: number;
@@ -410,7 +410,7 @@ export type NodePosUpdate = {
export type NodeDiffUpdate = { export type NodeDiffUpdate = {
id?: ElementId; id?: ElementId;
diff?: XYPosition; diff?: XYPosition;
isDragging?: boolean; dragging?: boolean;
}; };
export type FlowTransform = { export type FlowTransform = {
+3 -3
View File
@@ -9,7 +9,7 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
if (currentChange) { if (currentChange) {
switch (currentChange.type) { switch (currentChange.type) {
case 'select': { case 'select': {
res.push({ ...item, isSelected: currentChange.isSelected }); res.push({ ...item, selected: currentChange.selected });
return res; return res;
} }
case 'dimensions': { case 'dimensions': {
@@ -24,8 +24,8 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
updateItem.position = currentChange.position; updateItem.position = currentChange.position;
} }
if (typeof currentChange.isDragging !== 'undefined') { if (typeof currentChange.dragging !== 'undefined') {
updateItem.isDragging = currentChange.isDragging; updateItem.dragging = currentChange.dragging;
} }
res.push(updateItem); res.push(updateItem);
+2 -2
View File
@@ -149,7 +149,7 @@ export const getNodesInside = (
height: rect.height / tScale, height: rect.height / tScale,
}); });
return nodes.filter(({ selectable = true, position, width, height, isDragging }) => { return nodes.filter(({ selectable = true, position, width, height, dragging }) => {
if (excludeNonSelectableNodes && !selectable) { if (excludeNonSelectableNodes && !selectable) {
return false; return false;
} }
@@ -164,7 +164,7 @@ export const getNodesInside = (
typeof height === 'undefined' || typeof height === 'undefined' ||
width === null || width === null ||
height === null || height === null ||
isDragging dragging
) { ) {
// nodes are initialized with width and height = null // nodes are initialized with width and height = null
return true; return true;