@pie-lib/drag 2.2.9 → 2.3.1-beta.0

package/CHANGELOG.md

@@ -3,18 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.2.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.8...@pie-lib/drag@2.2.9) (2023-10-03)
-
+## [2.3.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.1-beta.0) (2025-07-20)
 
-### Bug Fixes
-
-* revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
+**Note:** Version bump only for package @pie-lib/drag
 
 
 
 
 
-## [2.2.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.7...@pie-lib/drag@2.2.8) (2023-10-01)
+# [2.3.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/drag
 
@@ -22,71 +19,58 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [2.2.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.6...@pie-lib/drag@2.2.7) (2023-09-27)
+# [2.4.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.4.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/drag
 
+# [2.3.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.3.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/drag
+
+## [2.2.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.8...@pie-lib/drag@2.2.9) (2023-10-03)
 
+### Bug Fixes
 
+- revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
 
-## [2.2.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.5...@pie-lib/drag@2.2.6) (2023-09-27)
+## [2.2.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.7...@pie-lib/drag@2.2.8) (2023-10-01)
 
 **Note:** Version bump only for package @pie-lib/drag
 
+## [2.2.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.6...@pie-lib/drag@2.2.7) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/drag
 
+## [2.2.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.5...@pie-lib/drag@2.2.6) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/drag
 
 ## [2.2.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.4...@pie-lib/drag@2.2.5) (2023-09-27)
 
-
 ### Bug Fixes
 
-* add required packages ([b0b6855](https://github.com/pie-framework/pie-lib/commit/b0b6855418a988ed6ea911c97425b89fbab2794d))
-
-
-
-
+- add required packages ([b0b6855](https://github.com/pie-framework/pie-lib/commit/b0b6855418a988ed6ea911c97425b89fbab2794d))
 
 ## [2.2.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.3...@pie-lib/drag@2.2.4) (2023-08-07)
 
-
 ### Bug Fixes
 
-* **drag:** create droppablePlaceholder for ICA PD-3050 ([b2e595e](https://github.com/pie-framework/pie-lib/commit/b2e595e66b331147064c6b72fa44ba756078f159))
-
-
-
-
+- **drag:** create droppablePlaceholder for ICA PD-3050 ([b2e595e](https://github.com/pie-framework/pie-lib/commit/b2e595e66b331147064c6b72fa44ba756078f159))
 
 ## [2.2.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.2...@pie-lib/drag@2.2.3) (2023-07-31)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 ## [2.2.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.1...@pie-lib/drag@2.2.2) (2023-07-24)
 
-
 ### Bug Fixes
 
-* **drag-in-the-blank:** add preview for draged items on touch backend, wip ([4e4bab6](https://github.com/pie-framework/pie-lib/commit/4e4bab63fb69e53d4cdff303d5bfd4fc18a5c7a0))
-
-
-
-
+- **drag-in-the-blank:** add preview for draged items on touch backend, wip ([4e4bab6](https://github.com/pie-framework/pie-lib/commit/4e4bab63fb69e53d4cdff303d5bfd4fc18a5c7a0))
 
 ## [2.2.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.0...@pie-lib/drag@2.2.1) (2023-06-24)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.2.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.19...@pie-lib/drag@2.2.0) (2023-06-12)
 
 ### Features

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.2.9",
+  "version": "2.3.1-beta.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/math-rendering": "2.5.18",
-    "@pie-lib/render-ui": "^4.15.9",
+    "@pie-lib/math-rendering": "^3.3.1-beta.0",
+    "@pie-lib/render-ui": "^4.16.1-beta.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.1",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dnd-multi-backend": "^6.0.2",
@@ -21,5 +23,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "9c15e6c0aa4c83e1018b9b1070c8dec4294e6ffe"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }

package/src/__tests__/__snapshots__/placeholder.test.jsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder snapshot className 1`] = `
+<div
+  className="placeholder bar"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot disabled: true 1`] = `
+<div
+  className="placeholder disabled"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot isOver: true 1`] = `
+<div
+  className="placeholder over"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot reqular 1`] = `
+<div
+  className="placeholder"
+  style={
+    Object {
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;
+
+exports[`placeholder snapshot specific grid rowsRepeatValue 1`] = `
+<div
+  className="placeholder"
+  style={
+    Object {
+      "gridTemplateColumns": "repeat(1, 1fr)",
+      "gridTemplateRows": "repeat(2, min-content)",
+      "minHeight": undefined,
+    }
+  }
+>
+   Foo 
+</div>
+`;

package/src/__tests__/placeholder.test.jsx

@@ -0,0 +1,48 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { PlaceHolder } from '../placeholder';
+
+describe('placeholder', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {
+        placeholder: 'placeholder',
+        disabled: 'disabled',
+        over: 'over',
+        number: 'number',
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<PlaceHolder {...props}> Foo </PlaceHolder>);
+  };
+
+  describe('snapshot', () => {
+    it('reqular', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('isOver: true', () => {
+      expect(wrapper({ isOver: true })).toMatchSnapshot();
+    });
+
+    it('disabled: true', () => {
+      expect(wrapper({ disabled: true })).toMatchSnapshot();
+    });
+
+    it('className', () => {
+      expect(wrapper({ className: 'bar' })).toMatchSnapshot();
+    });
+
+    it('specific grid rowsRepeatValue', () => {
+      const w = wrapper({
+        grid: {
+          rows: 2,
+          columns: 1,
+          rowsRepeatValue: 'min-content',
+        },
+      });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/uid-context.test.jsx

@@ -0,0 +1,21 @@
+import { createContext, createElement } from 'react';
+import { withUid } from '../uid-context';
+
+jest.mock('react', () => ({
+  createElement: jest.fn((c) => c),
+  createContext: jest.fn().mockReturnValue({
+    Consumer: jest.fn((fn) => fn),
+    Provider: jest.fn(),
+  }),
+}));
+
+describe('id-context', () => {
+  describe('withUid', () => {
+    it('calls createElement', () => {
+      const Wrapped = withUid(() => ({}));
+
+      const Consumer = Wrapped({});
+      expect(createElement).toBeCalledWith(expect.any(Function), null, expect.anything());
+    });
+  });
+});

package/src/drag-in-the-blank-dp.jsx

@@ -1,5 +1,5 @@
 import { DropTarget } from 'react-dnd';
-import { DroppablePlaceholder } from '../lib/droppable-placeholder';
+import { DroppablePlaceholder } from './droppable-placeholder';
 import dragType from './drag-type';
 
 export const spec = {

package/src/droppable-placeholder.jsx

@@ -4,12 +4,6 @@ import PropTypes from 'prop-types';
 
 const preventInteractionStyle = {
   flex: 1,
-  WebkitTouchCallout: 'none',
-  WebkitUserSelect: 'none',
-  KhtmlUserSelect: 'none',
-  MozUserSelect: 'none',
-  MsUserSelect: 'none',
-  UserSelect: 'none',
 };
 
 export class DroppablePlaceholder extends React.Component {
@@ -19,14 +13,23 @@ export class DroppablePlaceholder extends React.Component {
     isOver: PropTypes.bool,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     disabled: PropTypes.bool,
+    isVerticalPool: PropTypes.bool,
+    minHeight: PropTypes.number,
   };
 
   render() {
-    const { children, connectDropTarget, isOver, disabled, classes } = this.props;
+    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
 
     return connectDropTarget(
       <div style={preventInteractionStyle}>
-        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
+        <PlaceHolder
+          disabled={disabled}
+          isOver={isOver}
+          choiceBoard={true}
+          className={classes}
+          isVerticalPool={isVerticalPool}
+          minHeight={minHeight}
+        >
           {children}
         </PlaceHolder>
       </div>,

package/src/placeholder.jsx

@@ -3,9 +3,23 @@ import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import grey from '@material-ui/core/colors/grey';
+import { color } from '@pie-lib/render-ui';
 
 export const PlaceHolder = (props) => {
-  const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;
+  const {
+    children,
+    classes,
+    className,
+    isOver,
+    type,
+    grid,
+    disabled,
+    choiceBoard,
+    isCategorize,
+    isVerticalPool,
+    minHeight,
+  } = props;
+
   const names = classNames(
     classes.placeholder,
     disabled && classes.disabled,
@@ -19,14 +33,33 @@ export const PlaceHolder = (props) => {
   if (grid && grid.columns) {
     style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
   }
+
   if (grid && grid.rows) {
     const repeatValue = grid.rowsRepeatValue || '1fr';
 
     style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
   }
 
+  // The "type" is only sent through placement-ordering / placeholder
+  // It can be "choice" or "target"
+  // We apply a different style for the "choice" type
+  // For any other type, use a dashed black border and a white fill
+  if (type === 'choice') {
+    style.border = `1px solid ${color.borderLight()}`;
+    style.background = color.backgroundDark();
+  }
+
+  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
+
   return (
-    <div style={style} className={choiceBoard ? classes.board : names}>
+    <div
+      style={{ ...style, minHeight: minHeight }}
+      className={classNames(
+        classes.noSelectStyles,
+        choiceBoard ? boardStyle : names,
+        isVerticalPool && classes.verticalPool,
+      )}
+    >
       {children}
     </div>
   );
@@ -47,20 +80,31 @@ PlaceHolder.propTypes = {
   index: PropTypes.number,
   type: PropTypes.string,
   disabled: PropTypes.bool,
+  isCategorize: PropTypes.bool,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
 };
 
 const styles = (theme) => ({
+  noSelectStyles: {
+    WebkitTouchCallout: 'none',
+    WebkitUserSelect: 'none',
+    KhtmlUserSelect: 'none',
+    MozUserSelect: 'none',
+    MsUserSelect: 'none',
+    userSelect: 'none',
+  },
   placeholder: {
     width: '100%',
     height: '100%',
-    background: theme.palette.grey[200],
-    border: '1px solid #D1D1D1',
+    background: color.white(),
     transition: 'background-color 200ms linear, border-color 200ms linear',
     boxSizing: 'border-box',
     display: 'grid',
     gridRowGap: `${theme.spacing.unit}px`,
     gridColumnGap: `${theme.spacing.unit}px`,
     padding: theme.spacing.unit * 1,
+    border: `2px dashed ${color.black()}`,
   },
   disabled: {
     boxShadow: 'none',
@@ -71,15 +115,30 @@ const styles = (theme) => ({
     backgroundColor: `${grey[300]}`,
   },
   board: {
-    border: '1px solid #D1D1D1',
     padding: theme.spacing.unit,
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
-    minHeight: '200px',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  categorizeBoard: {
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
     justifyContent: 'center',
     overflow: 'hidden',
     touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  verticalPool: {
+    display: 'flex',
+    flexFlow: 'column wrap',
   },
 });
 

package/src/preview-component.jsx

@@ -1,26 +1,28 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { usePreview } from 'react-dnd-multi-backend';
-import { PreviewPrompt } from '@pie-lib/render-ui';
+import { PreviewPrompt, color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
 
 const styles = {
   maskBlank: {
-    border: '1px solid black',
-    color: 'black',
-    minWidth: '90px',
+    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: color.white(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
     minHeight: '32px',
-    height: 'auto',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
     maxWidth: '374px',
-    display: 'flex',
-    padding: '4px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '16px',
+    borderRadius: '3px',
+    padding: '12px',
   },
   ica: {
     backgroundColor: color.background(),
-    border: `1px solid ${color.primary()}`,
+    border: `1px solid ${color.borderDark()}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -71,36 +73,73 @@ const getPrompt = (itemType, item) => {
   }
 };
 
-const getCustomStyle = (itemType, item, style) => {
-  const baseStyle = {
-    ...style,
+const getCustomStyle = (itemType, item, touchPosition, style) => {
+  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
+  const top = style?.top || 0;
+  const left = style?.left || 0;
+  const position = style?.position || 'fixed';
+
+  return {
+    position,
+    top,
+    left,
+    transform,
     ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
     ...(item?.itemType === 'categorize' ? styles.categorize : {}),
     ...(itemType === 'Answer' ? styles.matchList : {}),
     ...(itemType === 'Tile' ? styles.placementOrdering : {}),
     ...(itemType === 'react-dnd-response' ? styles.ica : {}),
   };
-
-  return baseStyle;
 };
 
 const PreviewComponent = () => {
   const preview = usePreview();
   const { itemType, item, style, display } = preview;
+  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (event.touches.length > 0) {
+        const touch = event.touches[0];
+        const touchOffset = 1;
+        setTouchPosition({
+          x: (touch.clientX + touchOffset) / zoomLevel,
+          y: (touch.clientY + touchOffset) / zoomLevel,
+        });
+      }
+    },
+    [zoomLevel],
+  );
 
   const root = useRef(null);
 
   useEffect(() => {
     if (display && root.current) {
       renderMath(root.current);
+
+      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+      const zoomAffectedElement = document.querySelector('.padding') || document.body;
+
+      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
   }, [display, item?.choice?.value, item?.value, itemType, item]);
 
+  useEffect(() => {
+    const touchMoveListener = (event) => handleTouchMove(event);
+    if (display) {
+      window.addEventListener('touchmove', touchMoveListener);
+    }
+    return () => {
+      window.removeEventListener('touchmove', touchMoveListener);
+    };
+  }, [display, handleTouchMove]);
+
   if (!display) {
     return null;
   }
 
-  const customStyle = getCustomStyle(itemType, item, style);
+  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
 
   const prompt = getPrompt(itemType, item);
 

package/src/with-drag-context.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
+import MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';
 import { DndProvider } from 'react-dnd';
 import { TouchBackend } from 'react-dnd-touch-backend';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7,7 +7,10 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import PreviewComponent from './preview-component';
 
 const backends = [
-  { backend: HTML5Backend },
+  {
+    backend: HTML5Backend,
+    transition: MouseTransition,
+  },
   {
     backend: TouchBackend,
     options: { enableMouseEvents: true, enableTouchEvents: true },
@@ -17,9 +20,13 @@ const backends = [
   },
 ];
 
-export default (Component) => (props) => (
-  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>
-    <Component {...props} />
-    <PreviewComponent />
-  </DndProvider>
-);
+export default (Component) => (props) => {
+  const isClient = typeof window !== 'undefined';
+
+  return (
+    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>
+      <Component {...props} />
+      <PreviewComponent />
+    </DndProvider>
+  );
+};

package/README.md

@@ -1,3 +0,0 @@
-# @pie-lib/drag
-
-Some shared components for drag.