react-dnd#useDragLayer TypeScript Examples

The following examples show how to use react-dnd#useDragLayer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: QueryBuilderFilterPanel.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
FilterConditionDragLayer: React.FC = () => {
  const { itemType, item, isDragging, currentPosition } = useDragLayer(
    (monitor) => ({
      itemType: monitor.getItemType() as QUERY_BUILDER_FILTER_DND_TYPE,
      item: monitor.getItem<QueryBuilderFilterConditionDragSource | null>(),
      isDragging: monitor.isDragging(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentPosition: monitor.getClientOffset(),
    }),
  );

  if (
    !isDragging ||
    !item ||
    !Object.values(QUERY_BUILDER_FILTER_DND_TYPE).includes(itemType)
  ) {
    return null;
  }
  return (
    <div className="query-builder-filter-tree__drag-preview-layer">
      <div
        className="query-builder-filter-tree__drag-preview"
        // added some offset so the mouse doesn't overlap the label too much
        style={
          !currentPosition
            ? { display: 'none' }
            : {
                transform: `translate(${currentPosition.x + 20}px, ${
                  currentPosition.y + 10
                }px)`,
              }
        }
      >
        {item.node.dragLayerLabel}
      </div>
    </div>
  );
}
Example #2
Source File: QueryBuilderPostFilterPanel.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
PostFilterConditionDragLayer: React.FC = () => {
  const { itemType, item, isDragging, currentPosition } = useDragLayer(
    (monitor) => ({
      itemType: monitor.getItemType() as QUERY_BUILDER_POST_FILTER_DND_TYPE,
      item: monitor.getItem<QueryBuilderPostFilterConditionDragSource | null>(),
      isDragging: monitor.isDragging(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentPosition: monitor.getClientOffset(),
    }),
  );

  if (
    !isDragging ||
    !item ||
    !Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE).includes(itemType)
  ) {
    return null;
  }
  return (
    <div className="query-builder-post-filter-tree__drag-preview-layer">
      <div
        className="query-builder-post-filter-tree__drag-preview"
        // added some offset so the mouse doesn't overlap the label too much
        style={
          !currentPosition
            ? { display: 'none' }
            : {
                transform: `translate(${currentPosition.x + 20}px, ${
                  currentPosition.y + 10
                }px)`,
              }
        }
      >
        {item.node.dragLayerLabel}
      </div>
    </div>
  );
}
Example #3
Source File: QueryBuilderProjectionPanel.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
ProjectionColumnDragLayer: React.FC = () => {
  const { itemType, item, isDragging, currentPosition } = useDragLayer(
    (monitor) => ({
      itemType: monitor.getItemType(),
      item: monitor.getItem<QueryBuilderProjectionColumnDragSource | null>(),
      isDragging: monitor.isDragging(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentPosition: monitor.getClientOffset(),
    }),
  );

  if (
    !isDragging ||
    !item ||
    itemType !== QUERY_BUILDER_PROJECTION_DND_TYPE.PROJECTION_COLUMN
  ) {
    return null;
  }
  return (
    <div className="query-builder__projection__column__drag-preview-layer">
      <div
        className="query-builder__projection__column__drag-preview"
        // added some offset so the mouse doesn't overlap the label too much
        style={
          !currentPosition
            ? { display: 'none' }
            : {
                transform: `translate(${currentPosition.x + 20}px, ${
                  currentPosition.y + 10
                }px)`,
              }
        }
      >
        {item.columnState.columnName}
      </div>
    </div>
  );
}
Example #4
Source File: GenerationSpecificationEditor.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
ModelGenerationDragLayer: React.FC = () => {
  const { itemType, item, isDragging, currentPosition } = useDragLayer(
    (monitor) => ({
      itemType: monitor.getItemType(),
      item: monitor.getItem<GenerationSpecNodeDragSource | null>(),
      isDragging: monitor.isDragging(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentPosition: monitor.getClientOffset(),
    }),
  );
  if (!isDragging || !item || itemType !== CORE_DND_TYPE.GENERATION_SPEC_NODE) {
    return null;
  }
  return (
    <div className="generation-spec-model-generation-editor__item__drag-preview-layer">
      <div
        className="generation-spec-model-generation-editor__item__drag-preview"
        style={
          !currentPosition
            ? { display: 'none' }
            : {
                transform: `translate(${currentPosition.x + 20}px, ${
                  currentPosition.y + 10
                }px)`,
              }
        }
      >
        {item.nodeState.node.generationElement.value.name}
      </div>
    </div>
  );
}
Example #5
Source File: QueryBuilderExplorerPanel.tsx    From legend-studio with Apache License 2.0 5 votes vote down vote up 
QueryBuilderExplorerPropertyDragLayer = observer(
  (props: { queryBuilderState: QueryBuilderState }) => {
    const { queryBuilderState } = props;
    const explorerState = queryBuilderState.explorerState;
    const { itemType, item, isDragging, currentPosition } = useDragLayer(
      (monitor) => ({
        itemType: monitor.getItemType() as QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
        item: monitor.getItem<QueryBuilderExplorerTreeDragSource | null>(),
        isDragging: monitor.isDragging(),
        initialOffset: monitor.getInitialSourceClientOffset(),
        currentPosition: monitor.getClientOffset(),
      }),
    );

    if (
      !isDragging ||
      !item ||
      !Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE).includes(itemType)
    ) {
      return null;
    }
    return (
      <div className="query-builder-explorer-tree__drag-preview-layer">
        <div
          className="query-builder-explorer-tree__drag-preview"
          // added some offset so the mouse doesn't overlap the label too much
          style={
            !currentPosition
              ? { display: 'none' }
              : {
                  transform: `translate(${currentPosition.x + 20}px, ${
                    currentPosition.y + 10
                  }px)`,
                }
          }
        >
          {explorerState.humanizePropertyName
            ? prettyPropertyName(item.node.label)
            : item.node.label}
        </div>
      </div>
    );
  },
)
Example #6
Source File: QueryBuilderFunctionsExplorerPanel.tsx    From legend-studio with Apache License 2.0 5 votes vote down vote up 
QueryBuilderFunctionDragLayer = observer(
  (props: { queryBuilderState: QueryBuilderState }) => {
    const { itemType, item, isDragging, currentPosition } = useDragLayer(
      (monitor) => ({
        itemType:
          monitor.getItemType() as QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE,
        item: monitor.getItem<QueryBuilderFunctionsExplorerDragSource | null>(),
        isDragging: monitor.isDragging(),
        initialOffset: monitor.getInitialSourceClientOffset(),
        currentPosition: monitor.getClientOffset(),
      }),
    );
    if (
      !isDragging ||
      !item ||
      !Object.values(QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE).includes(
        itemType,
      ) ||
      item.node.dndType ===
        QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.PACKAGE
    ) {
      return null;
    }
    return (
      <div className="query-builder__functions-explorer__tree__drag-preview-layer">
        <div
          className="query-builder__functions-explorer__tree__drag-preview"
          style={
            !currentPosition
              ? { display: 'none' }
              : {
                  transform: `translate(${currentPosition.x + 20}px, ${
                    currentPosition.y + 10
                  }px)`,
                }
          }
        >
          {generateFunctionSignature(
            item.node.packageableElement as ConcreteFunctionDefinition,
            true,
          )}
        </div>
      </div>
    );
  },
)
Example #7
Source File: QueryBuilderParameterPanel.tsx    From legend-studio with Apache License 2.0 5 votes vote down vote up 
QueryBuilderParameterDragLayer = observer(
  (props: { queryBuilderState: QueryBuilderState }) => {
    const { itemType, item, isDragging, currentPosition } = useDragLayer(
      (monitor) => ({
        itemType:
          monitor.getItemType() as QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
        item: monitor.getItem<QueryBuilderParameterDragSource | null>(),
        isDragging: monitor.isDragging(),
        initialOffset: monitor.getInitialSourceClientOffset(),
        currentPosition: monitor.getClientOffset(),
      }),
    );

    if (
      !isDragging ||
      !item ||
      !Object.values(QUERY_BUILDER_PARAMETER_TREE_DND_TYPE).includes(itemType)
    ) {
      return null;
    }
    return (
      <div className="query-builder__parameters__drag-preview-layer">
        <div
          className="query-builder__parameters__drag-preview"
          style={
            !currentPosition
              ? { display: 'none' }
              : {
                  transform: `translate(${currentPosition.x + 20}px, ${
                    currentPosition.y + 10
                  }px)`,
                }
          }
        >
          {item.variable.variableName}
        </div>
      </div>
    );
  },
)
Example #8
Source File: index.tsx    From uno-game with MIT License 5 votes vote down vote up 
CustomCardDragPreview: React.FC = () => {
	const {
		itemType,
		isDragging,
		item,
		initialOffset,
		currentOffset,
	} = useDragLayer((monitor) => ({
		item: monitor.getItem() as DraggedCardItem,
		itemType: monitor.getItemType(),
		initialOffset: monitor.getInitialSourceClientOffset(),
		currentOffset: monitor.getSourceClientOffset(),
		isDragging: monitor.isDragging(),
	}))

	const classes = useStyles()
	const cardStore = useCardStore()

	const getItemStyles = (initialOffset: XYCoord | null, currentOffset: XYCoord | null) => {
		if (!initialOffset || !currentOffset) {
			return {
				display: "none",
			}
		}

		const { x, y } = currentOffset

		const transform = `translate(${x}px, ${y}px)`

		return {
			transform,
			WebkitTransform: transform,
			position: "relative" as const,
			width: 0,
		}
	}

	if (isDragging) {
		return (
			<div className={classes.container} >
				<div style={getItemStyles(initialOffset, currentOffset)}>
					{itemType === CARD_TYPE &&
            cardStore?.selectedCards?.length &&
            cardStore?.selectedCards?.every(card => card.type === item.cardType) ? (
							<>
								{cardStore?.selectedCards?.map((card, index) => (
									<img
										key={index}
										alt={card.name}
										src={card.src}
										className={item.className}
										style={{
											filter: "saturate(1.5)",
											left: +index * 20,
											position: "absolute",
										}}
									/>
								))}
							</>
						) : (
							<img
								alt={item.name}
								src={item.src}
								className={item.className}
								style={{ filter: "saturate(1.5)" }}
							/>
						)}
				</div>
			</div>
		)
	} else {
		return <React.Fragment />
	}
}
Example #9
Source File: index.tsx    From uno-game with MIT License 4 votes vote down vote up 
CardDeck: React.FC<CardDeckProps> = (props) => {
	const { cards, player } = props

	const { gameId } = useParams<{ gameId: string }>()

	const {
		isDraggingAnyCard,
	} = useDragLayer((monitor) => ({
		isDraggingAnyCard: monitor.isDragging(),
	}))

	const cardStore = useCardStore()
	const socketStore = useSocketStore()
	const socket = useSocket()
	const classes = useStyles()
	const customClasses = useCustomStyles({
		limitedNameWidth: 70,
		avatarTimerRemainingPercentage: buildPercentage(
			socketStore.gameRoundRemainingTimeInSeconds as number,
			socketStore.game?.maxRoundDurationInSeconds as number,
		),
	})

	const getCardInclination = (index: number) => {
		const isMiddleCard = Math.round(cards.length / 2) === index
		const isBeforeMiddleCard = index < Math.round(cards.length / 2)

		let inclination: number

		if (isMiddleCard) {
			inclination = 0
		} else if (isBeforeMiddleCard) {
			inclination = -Math.abs(index - Math.round(cards.length / 2))
		} else {
			inclination = Math.abs(Math.round(cards.length / 2) - index)
		}

		const delta = Device.isMobile ? 4 : 3

		return inclination * delta
	}

	const getCardElevation = (index: number) => {
		const isMiddleCard = Math.round(cards.length / 2) === index

		let elevation: number

		if (isMiddleCard) {
			elevation = 0
		} else {
			elevation = -Math.abs(index - Math.round(cards.length / 2))
		}

		const delta = Device.isMobile ? 3 : 7

		return elevation * delta
	}

	const onDragEnd = () => {
		cardStore.setSelectedCards([])
	}

	const isCardSelected = (cardId: string) => !!cardStore?.selectedCards?.some(card => card.id === cardId)

	const canBePartOfCurrentCombo = (cardType: CardTypes) => !!cardStore?.selectedCards?.some(card => card.type === cardType)

	const toggleSelectedCard = (cardId: string) => {
		const lastSelectedCards = cardStore.selectedCards
		const selectedCard = cards.find(card => card.id === cardId)
		const cardOnTopOfCardStack = (socketStore.game as Game).usedCards[0]
		const selectedCardTypes = lastSelectedCards?.map(card => card.type)

		const isAlreadySelected = isCardSelected(cardId)

		if (isAlreadySelected) {
			const cardsWithoutAlreadySelected = lastSelectedCards?.filter(card => card.id !== cardId)

			if (cardOnTopOfCardStack.color === selectedCard?.color) {
				if (cardsWithoutAlreadySelected[0] && cardsWithoutAlreadySelected[0].type === cardOnTopOfCardStack.type) {
					cardStore.setSelectedCards(cardsWithoutAlreadySelected)
				} else {
					cardStore.setSelectedCards([])
				}
			} else {
				cardStore.setSelectedCards(cardsWithoutAlreadySelected)
			}
		} else if ((selectedCard && selectedCardTypes?.includes(selectedCard.type)) || !selectedCardTypes?.length) {
			cardStore.setSelectedCards([
				...(lastSelectedCards || []),
				selectedCard as CardData,
			])
		}
	}

	const unselectAllCards = () => {
		cardStore.setSelectedCards([])
	}

	const handleClickOutsideCardDeck = () => {
		if (cardStore.selectedCards.length > 0) {
			unselectAllCards()
		}
	}

	const toggleOnlineStatus = () => {
		socket.toggleOnlineStatus(gameId)
	}

	return (
		<ClickAwayListener
			onClickAway={handleClickOutsideCardDeck}
		>
			<Grid
				container
				alignItems="flex-end"
				justify="center"
				className={classes.cardContainer}
			>
				<PlayerEffect
					playerId={player?.id}
				/>

				<Zoom in={player?.status === "afk"}>
					<Grid
						container
						className={classes.afkContainer}
					>
						<Grid
							container
							alignItems="center"
							justify="center"
							direction="column"
							className={classes.afkContent}
						>
							<Typography
								variant="body1"
								className={classes.afkInfo}
							>
								We noticed you are afk, so we are making random plays
								{" "}
								automatically for you. In case you want to keep playing by
								{" "}
								yourself, click on the button below.
							</Typography>

							<Divider orientation="horizontal" size={2} />

							<Button
								variant="contained"
								className={classes.afkButton}
								onClick={toggleOnlineStatus}
							>
								I'M HERE
							</Button>
						</Grid>
					</Grid>
				</Zoom>

				<Grid
					container
					className={classes.cardContent}
					style={{
						width: (cards?.length * CARD_WIDTH) + CARD_WIDTH,
					}}
				>
					{cards?.map((card, index) => (
						<DraggableCard
							key={card.id}
							card={card}
							className={classes.card}
							index={index}
							style={{
								transform: `rotate(${getCardInclination(index)}deg)`,
								bottom: getCardElevation(index),
								zIndex: (index + 2),
								left: index * CARD_WIDTH,
							}}
							onClick={() => toggleSelectedCard(card.id)}
							selected={isCardSelected(card.id)}
							isDraggingAnyCard={isDraggingAnyCard}
							isMoreThanOneCardBeingDragged={cardStore?.selectedCards?.length > 1}
							onDragEnd={onDragEnd}
							canBePartOfCurrentCombo={canBePartOfCurrentCombo(card.type)}
						/>
					))}
				</Grid>

				<Grid
					container
					justify="center"
					alignItems="center"
					className={classes.avatarContainer}
					style={{
						opacity: player?.isCurrentRoundPlayer ? 1 : 0.5,
					}}
				>
					<Avatar
						name={player?.name}
						size="small"
						className={player?.isCurrentRoundPlayer ? customClasses.avatarTimer : ""}
					/>

					<Divider orientation="vertical" size={2} />

					<Grid item>
						<Typography
							variant="h3"
							className={`${classes.title} ${customClasses.limitedName}`}
						>
							{player?.name}
						</Typography>

						{player?.id && (
							<Typography
								variant="h2"
								className={classes.description}
							>
								(You)
							</Typography>
						)}
					</Grid>
				</Grid>
			</Grid>
		</ClickAwayListener>
	)
}