@instantdb/react 0.22.131 → 0.22.132
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/Cursors.d.ts +1 -1
- package/dist/commonjs/Cursors.d.ts.map +1 -1
- package/dist/commonjs/Cursors.js.map +1 -1
- package/dist/esm/Cursors.d.ts +1 -1
- package/dist/esm/Cursors.d.ts.map +1 -1
- package/dist/esm/Cursors.js.map +1 -1
- package/dist/standalone/index.js +729 -721
- package/dist/standalone/index.umd.cjs +13 -13
- package/package.json +4 -4
- package/src/Cursors.tsx +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type InstantReactRoom } from '@instantdb/react-common';
|
|
3
3
|
import type { RoomSchemaShape } from '@instantdb/core';
|
|
4
|
-
export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
|
|
4
|
+
export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends string & keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
|
|
5
5
|
spaceId?: string;
|
|
6
6
|
room: InstantReactRoom<any, RoomSchema, RoomType>;
|
|
7
7
|
style?: React.CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cursors.d.ts","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,OAAO,CACrB,UAAU,SAAS,eAAe,EAClC,QAAQ,SAAS,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"Cursors.d.ts","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,OAAO,CACrB,UAAU,SAAS,eAAe,EAClC,QAAQ,SAAS,MAAM,GAAG,MAAM,UAAU,EAC1C,EACA,EAAU,EACV,OAAO,EAAE,QAAQ,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,MAAM,GACP,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;KAC5C,KAAK,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,qHAqHA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cursors.js","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createElement,\n type ReactNode,\n type MouseEvent,\n type TouchEvent,\n type CSSProperties,\n} from 'react';\nimport { type InstantReactRoom } from '@instantdb/react-common';\nimport type { RoomSchemaShape } from '@instantdb/core';\n\nexport function Cursors<\n RoomSchema extends RoomSchemaShape,\n RoomType extends keyof RoomSchema,\n>({\n as = 'div',\n spaceId: _spaceId,\n room,\n className,\n style,\n userCursorColor,\n children,\n renderCursor,\n propagate,\n zIndex,\n}: {\n spaceId?: string;\n room: InstantReactRoom<any, RoomSchema, RoomType>;\n style?: React.CSSProperties;\n userCursorColor?: string;\n as?: any;\n className?: string;\n children?: ReactNode;\n renderCursor?: (props: {\n color: string;\n presence: RoomSchema[RoomType]['presence'];\n }) => ReactNode;\n propagate?: boolean;\n zIndex?: number;\n}) {\n const spaceId =\n _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;\n\n const cursorsPresence = room.usePresence({\n keys: [spaceId] as (keyof RoomSchema[RoomType]['presence'])[],\n });\n\n const fullPresence = room._core._reactor.getPresence(room.type, room.id);\n\n function publishCursor(\n rect: DOMRect,\n touch: { clientX: number; clientY: number },\n ) {\n const x = touch.clientX;\n const y = touch.clientY;\n const xPercent = ((x - rect.left) / rect.width) * 100;\n const yPercent = ((y - rect.top) / rect.height) * 100;\n cursorsPresence.publishPresence({\n [spaceId]: {\n x,\n y,\n xPercent,\n yPercent,\n color: userCursorColor,\n },\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onMouseMove(e: MouseEvent) {\n if (!propagate) {\n e.stopPropagation();\n }\n\n const rect = e.currentTarget.getBoundingClientRect();\n publishCursor(rect, e);\n }\n\n function onMouseOut(e: MouseEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onTouchMove(e: TouchEvent) {\n if (e.touches.length !== 1) {\n return;\n }\n\n const touch = e.touches[0];\n\n if (touch.target instanceof Element) {\n if (!propagate) {\n e.stopPropagation();\n }\n const rect = touch.target.getBoundingClientRect();\n publishCursor(rect, touch);\n }\n }\n\n function onTouchEnd(e: TouchEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n return createElement(\n as,\n {\n onMouseMove,\n onMouseOut,\n onTouchMove,\n onTouchEnd,\n className,\n style: {\n position: 'relative',\n ...style,\n },\n },\n [\n children,\n <div\n key={spaceId}\n style={{\n ...absStyles,\n ...inertStyles,\n zIndex: zIndex !== undefined ? zIndex : defaultZ,\n }}\n >\n {Object.entries(cursorsPresence.peers).map(([id, presence]) => {\n const cursor = presence[spaceId];\n if (!cursor) return null;\n\n return (\n <div\n key={id}\n style={{\n ...absStyles,\n transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`,\n transformOrigin: '0 0',\n transition: 'transform 100ms',\n }}\n >\n {renderCursor ? (\n renderCursor({\n color: cursor.color,\n presence: fullPresence?.peers[id],\n })\n ) : (\n <Cursor {...cursor} />\n )}\n </div>\n );\n })}\n </div>,\n ],\n );\n}\n\nfunction Cursor({ color }: { color: string }) {\n const size = 35;\n const fill = color || 'black';\n\n return (\n <svg\n style={{ height: size, width: size }}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n fill=\"rgba(0,0,0,.2)\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill=\"white\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill={fill}\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n <path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n </g>\n </svg>\n );\n}\n\nconst absStyles: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst inertStyles: CSSProperties = {\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n};\n\nconst defaultZ = 99999;\n"]}
|
|
1
|
+
{"version":3,"file":"Cursors.js","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":";;AAUA,0BAiJC;;AA3JD,iCAMe;AAIf,SAAgB,OAAO,CAGrB,EACA,EAAE,GAAG,KAAK,EACV,OAAO,EAAE,QAAQ,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,MAAM,GAeP;IACC,MAAM,OAAO,GACX,QAAQ,IAAI,0BAA0B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;IAEvE,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QACvC,IAAI,EAAE,CAAC,OAAO,CAA+C;KAC9D,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAEzE,SAAS,aAAa,CACpB,IAAa,EACb,KAA2C;QAE3C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;QACxB,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;QACxB,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;QACtD,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;QACtD,eAAe,CAAC,eAAe,CAAC;YAC9B,CAAC,OAAO,CAAC,EAAE;gBACT,CAAC;gBACD,CAAC;gBACD,QAAQ;gBACR,QAAQ;gBACR,KAAK,EAAE,eAAe;aACvB;SACkC,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,WAAW,CAAC,CAAa;QAChC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC;QAED,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACrD,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACzB,CAAC;IAED,SAAS,UAAU,CAAC,CAAa;QAC/B,eAAe,CAAC,eAAe,CAAC;YAC9B,CAAC,OAAO,CAAC,EAAE,SAAS;SACe,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,WAAW,CAAC,CAAa;QAChC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAE3B,IAAI,KAAK,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;YACD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAClD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,SAAS,UAAU,CAAC,CAAa;QAC/B,eAAe,CAAC,eAAe,CAAC;YAC9B,CAAC,OAAO,CAAC,EAAE,SAAS;SACe,CAAC,CAAC;IACzC,CAAC;IAED,OAAO,IAAA,qBAAa,EAClB,EAAE,EACF;QACE,WAAW;QACX,UAAU;QACV,WAAW;QACX,UAAU;QACV,SAAS;QACT,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,KAAK;SACT;KACF,EACD;QACE,QAAQ;QACR,gCAEE,KAAK,EAAE;gBACL,GAAG,SAAS;gBACZ,GAAG,WAAW;gBACd,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aACjD,YAEA,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE;gBAC5D,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;gBACjC,IAAI,CAAC,MAAM;oBAAE,OAAO,IAAI,CAAC;gBAEzB,OAAO,CACL,gCAEE,KAAK,EAAE;wBACL,GAAG,SAAS;wBACZ,SAAS,EAAE,aAAa,MAAM,CAAC,QAAQ,MAAM,MAAM,CAAC,QAAQ,IAAI;wBAChE,eAAe,EAAE,KAAK;wBACtB,UAAU,EAAE,iBAAiB;qBAC9B,YAEA,YAAY,CAAC,CAAC,CAAC,CACd,YAAY,CAAC;wBACX,KAAK,EAAE,MAAM,CAAC,KAAK;wBACnB,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;qBAClC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,MAAM,OAAK,MAAM,GAAI,CACvB,IAfI,EAAE,CAgBH,CACP,CAAC;YACJ,CAAC,CAAC,IA/BG,OAAO,CAgCR;KACP,CACF,CAAC;AACJ,CAAC;AAED,SAAS,MAAM,CAAC,EAAE,KAAK,EAAqB;IAC1C,MAAM,IAAI,GAAG,EAAE,CAAC;IAChB,MAAM,IAAI,GAAG,KAAK,IAAI,OAAO,CAAC;IAE9B,OAAO,CACL,iCACE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EACpC,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,EAAE,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,+BACE,IAAI,EAAC,gBAAgB,EACrB,SAAS,EAAC,6DAA6D,aAEvE,iCAAM,CAAC,EAAC,qDAAqD,GAAG,EAChE,iCAAM,CAAC,EAAC,wDAAwD,GAAG,IACjE,EACJ,+BACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6DAA6D,aAEvE,iCAAM,CAAC,EAAC,qDAAqD,GAAG,EAChE,iCAAM,CAAC,EAAC,wDAAwD,GAAG,IACjE,EACJ,+BACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,6DAA6D,aAEvE,iCAAM,CAAC,EAAC,iDAAiD,GAAG,EAC5D,iCAAM,CAAC,EAAC,+CAA+C,GAAG,IACxD,IACA,CACP,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAkB;IAC/B,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,WAAW,GAAkB;IACjC,QAAQ,EAAE,QAAQ;IAClB,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,MAAM;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,KAAK,CAAC","sourcesContent":["import {\n createElement,\n type ReactNode,\n type MouseEvent,\n type TouchEvent,\n type CSSProperties,\n} from 'react';\nimport { type InstantReactRoom } from '@instantdb/react-common';\nimport type { RoomSchemaShape } from '@instantdb/core';\n\nexport function Cursors<\n RoomSchema extends RoomSchemaShape,\n RoomType extends string & keyof RoomSchema,\n>({\n as = 'div',\n spaceId: _spaceId,\n room,\n className,\n style,\n userCursorColor,\n children,\n renderCursor,\n propagate,\n zIndex,\n}: {\n spaceId?: string;\n room: InstantReactRoom<any, RoomSchema, RoomType>;\n style?: React.CSSProperties;\n userCursorColor?: string;\n as?: any;\n className?: string;\n children?: ReactNode;\n renderCursor?: (props: {\n color: string;\n presence: RoomSchema[RoomType]['presence'];\n }) => ReactNode;\n propagate?: boolean;\n zIndex?: number;\n}) {\n const spaceId =\n _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;\n\n const cursorsPresence = room.usePresence({\n keys: [spaceId] as (keyof RoomSchema[RoomType]['presence'])[],\n });\n\n const fullPresence = room._core._reactor.getPresence(room.type, room.id);\n\n function publishCursor(\n rect: DOMRect,\n touch: { clientX: number; clientY: number },\n ) {\n const x = touch.clientX;\n const y = touch.clientY;\n const xPercent = ((x - rect.left) / rect.width) * 100;\n const yPercent = ((y - rect.top) / rect.height) * 100;\n cursorsPresence.publishPresence({\n [spaceId]: {\n x,\n y,\n xPercent,\n yPercent,\n color: userCursorColor,\n },\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onMouseMove(e: MouseEvent) {\n if (!propagate) {\n e.stopPropagation();\n }\n\n const rect = e.currentTarget.getBoundingClientRect();\n publishCursor(rect, e);\n }\n\n function onMouseOut(e: MouseEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onTouchMove(e: TouchEvent) {\n if (e.touches.length !== 1) {\n return;\n }\n\n const touch = e.touches[0];\n\n if (touch.target instanceof Element) {\n if (!propagate) {\n e.stopPropagation();\n }\n const rect = touch.target.getBoundingClientRect();\n publishCursor(rect, touch);\n }\n }\n\n function onTouchEnd(e: TouchEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n return createElement(\n as,\n {\n onMouseMove,\n onMouseOut,\n onTouchMove,\n onTouchEnd,\n className,\n style: {\n position: 'relative',\n ...style,\n },\n },\n [\n children,\n <div\n key={spaceId}\n style={{\n ...absStyles,\n ...inertStyles,\n zIndex: zIndex !== undefined ? zIndex : defaultZ,\n }}\n >\n {Object.entries(cursorsPresence.peers).map(([id, presence]) => {\n const cursor = presence[spaceId];\n if (!cursor) return null;\n\n return (\n <div\n key={id}\n style={{\n ...absStyles,\n transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`,\n transformOrigin: '0 0',\n transition: 'transform 100ms',\n }}\n >\n {renderCursor ? (\n renderCursor({\n color: cursor.color,\n presence: fullPresence?.peers[id],\n })\n ) : (\n <Cursor {...cursor} />\n )}\n </div>\n );\n })}\n </div>,\n ],\n );\n}\n\nfunction Cursor({ color }: { color: string }) {\n const size = 35;\n const fill = color || 'black';\n\n return (\n <svg\n style={{ height: size, width: size }}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n fill=\"rgba(0,0,0,.2)\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill=\"white\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill={fill}\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n <path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n </g>\n </svg>\n );\n}\n\nconst absStyles: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst inertStyles: CSSProperties = {\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n};\n\nconst defaultZ = 99999;\n"]}
|
package/dist/esm/Cursors.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type InstantReactRoom } from '@instantdb/react-common';
|
|
3
3
|
import type { RoomSchemaShape } from '@instantdb/core';
|
|
4
|
-
export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
|
|
4
|
+
export declare function Cursors<RoomSchema extends RoomSchemaShape, RoomType extends string & keyof RoomSchema>({ as, spaceId: _spaceId, room, className, style, userCursorColor, children, renderCursor, propagate, zIndex, }: {
|
|
5
5
|
spaceId?: string;
|
|
6
6
|
room: InstantReactRoom<any, RoomSchema, RoomType>;
|
|
7
7
|
style?: React.CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cursors.d.ts","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,OAAO,CACrB,UAAU,SAAS,eAAe,EAClC,QAAQ,SAAS,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"Cursors.d.ts","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,wBAAgB,OAAO,CACrB,UAAU,SAAS,eAAe,EAClC,QAAQ,SAAS,MAAM,GAAG,MAAM,UAAU,EAC1C,EACA,EAAU,EACV,OAAO,EAAE,QAAQ,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,MAAM,GACP,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;KAC5C,KAAK,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,qHAqHA"}
|
package/dist/esm/Cursors.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cursors.js","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createElement,\n type ReactNode,\n type MouseEvent,\n type TouchEvent,\n type CSSProperties,\n} from 'react';\nimport { type InstantReactRoom } from '@instantdb/react-common';\nimport type { RoomSchemaShape } from '@instantdb/core';\n\nexport function Cursors<\n RoomSchema extends RoomSchemaShape,\n RoomType extends keyof RoomSchema,\n>({\n as = 'div',\n spaceId: _spaceId,\n room,\n className,\n style,\n userCursorColor,\n children,\n renderCursor,\n propagate,\n zIndex,\n}: {\n spaceId?: string;\n room: InstantReactRoom<any, RoomSchema, RoomType>;\n style?: React.CSSProperties;\n userCursorColor?: string;\n as?: any;\n className?: string;\n children?: ReactNode;\n renderCursor?: (props: {\n color: string;\n presence: RoomSchema[RoomType]['presence'];\n }) => ReactNode;\n propagate?: boolean;\n zIndex?: number;\n}) {\n const spaceId =\n _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;\n\n const cursorsPresence = room.usePresence({\n keys: [spaceId] as (keyof RoomSchema[RoomType]['presence'])[],\n });\n\n const fullPresence = room._core._reactor.getPresence(room.type, room.id);\n\n function publishCursor(\n rect: DOMRect,\n touch: { clientX: number; clientY: number },\n ) {\n const x = touch.clientX;\n const y = touch.clientY;\n const xPercent = ((x - rect.left) / rect.width) * 100;\n const yPercent = ((y - rect.top) / rect.height) * 100;\n cursorsPresence.publishPresence({\n [spaceId]: {\n x,\n y,\n xPercent,\n yPercent,\n color: userCursorColor,\n },\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onMouseMove(e: MouseEvent) {\n if (!propagate) {\n e.stopPropagation();\n }\n\n const rect = e.currentTarget.getBoundingClientRect();\n publishCursor(rect, e);\n }\n\n function onMouseOut(e: MouseEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onTouchMove(e: TouchEvent) {\n if (e.touches.length !== 1) {\n return;\n }\n\n const touch = e.touches[0];\n\n if (touch.target instanceof Element) {\n if (!propagate) {\n e.stopPropagation();\n }\n const rect = touch.target.getBoundingClientRect();\n publishCursor(rect, touch);\n }\n }\n\n function onTouchEnd(e: TouchEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n return createElement(\n as,\n {\n onMouseMove,\n onMouseOut,\n onTouchMove,\n onTouchEnd,\n className,\n style: {\n position: 'relative',\n ...style,\n },\n },\n [\n children,\n <div\n key={spaceId}\n style={{\n ...absStyles,\n ...inertStyles,\n zIndex: zIndex !== undefined ? zIndex : defaultZ,\n }}\n >\n {Object.entries(cursorsPresence.peers).map(([id, presence]) => {\n const cursor = presence[spaceId];\n if (!cursor) return null;\n\n return (\n <div\n key={id}\n style={{\n ...absStyles,\n transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`,\n transformOrigin: '0 0',\n transition: 'transform 100ms',\n }}\n >\n {renderCursor ? (\n renderCursor({\n color: cursor.color,\n presence: fullPresence?.peers[id],\n })\n ) : (\n <Cursor {...cursor} />\n )}\n </div>\n );\n })}\n </div>,\n ],\n );\n}\n\nfunction Cursor({ color }: { color: string }) {\n const size = 35;\n const fill = color || 'black';\n\n return (\n <svg\n style={{ height: size, width: size }}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n fill=\"rgba(0,0,0,.2)\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill=\"white\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill={fill}\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n <path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n </g>\n </svg>\n );\n}\n\nconst absStyles: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst inertStyles: CSSProperties = {\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n};\n\nconst defaultZ = 99999;\n"]}
|
|
1
|
+
{"version":3,"file":"Cursors.js","sourceRoot":"","sources":["../../src/Cursors.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createElement,\n type ReactNode,\n type MouseEvent,\n type TouchEvent,\n type CSSProperties,\n} from 'react';\nimport { type InstantReactRoom } from '@instantdb/react-common';\nimport type { RoomSchemaShape } from '@instantdb/core';\n\nexport function Cursors<\n RoomSchema extends RoomSchemaShape,\n RoomType extends string & keyof RoomSchema,\n>({\n as = 'div',\n spaceId: _spaceId,\n room,\n className,\n style,\n userCursorColor,\n children,\n renderCursor,\n propagate,\n zIndex,\n}: {\n spaceId?: string;\n room: InstantReactRoom<any, RoomSchema, RoomType>;\n style?: React.CSSProperties;\n userCursorColor?: string;\n as?: any;\n className?: string;\n children?: ReactNode;\n renderCursor?: (props: {\n color: string;\n presence: RoomSchema[RoomType]['presence'];\n }) => ReactNode;\n propagate?: boolean;\n zIndex?: number;\n}) {\n const spaceId =\n _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`;\n\n const cursorsPresence = room.usePresence({\n keys: [spaceId] as (keyof RoomSchema[RoomType]['presence'])[],\n });\n\n const fullPresence = room._core._reactor.getPresence(room.type, room.id);\n\n function publishCursor(\n rect: DOMRect,\n touch: { clientX: number; clientY: number },\n ) {\n const x = touch.clientX;\n const y = touch.clientY;\n const xPercent = ((x - rect.left) / rect.width) * 100;\n const yPercent = ((y - rect.top) / rect.height) * 100;\n cursorsPresence.publishPresence({\n [spaceId]: {\n x,\n y,\n xPercent,\n yPercent,\n color: userCursorColor,\n },\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onMouseMove(e: MouseEvent) {\n if (!propagate) {\n e.stopPropagation();\n }\n\n const rect = e.currentTarget.getBoundingClientRect();\n publishCursor(rect, e);\n }\n\n function onMouseOut(e: MouseEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n function onTouchMove(e: TouchEvent) {\n if (e.touches.length !== 1) {\n return;\n }\n\n const touch = e.touches[0];\n\n if (touch.target instanceof Element) {\n if (!propagate) {\n e.stopPropagation();\n }\n const rect = touch.target.getBoundingClientRect();\n publishCursor(rect, touch);\n }\n }\n\n function onTouchEnd(e: TouchEvent) {\n cursorsPresence.publishPresence({\n [spaceId]: undefined,\n } as RoomSchema[RoomType]['presence']);\n }\n\n return createElement(\n as,\n {\n onMouseMove,\n onMouseOut,\n onTouchMove,\n onTouchEnd,\n className,\n style: {\n position: 'relative',\n ...style,\n },\n },\n [\n children,\n <div\n key={spaceId}\n style={{\n ...absStyles,\n ...inertStyles,\n zIndex: zIndex !== undefined ? zIndex : defaultZ,\n }}\n >\n {Object.entries(cursorsPresence.peers).map(([id, presence]) => {\n const cursor = presence[spaceId];\n if (!cursor) return null;\n\n return (\n <div\n key={id}\n style={{\n ...absStyles,\n transform: `translate(${cursor.xPercent}%, ${cursor.yPercent}%)`,\n transformOrigin: '0 0',\n transition: 'transform 100ms',\n }}\n >\n {renderCursor ? (\n renderCursor({\n color: cursor.color,\n presence: fullPresence?.peers[id],\n })\n ) : (\n <Cursor {...cursor} />\n )}\n </div>\n );\n })}\n </div>,\n ],\n );\n}\n\nfunction Cursor({ color }: { color: string }) {\n const size = 35;\n const fill = color || 'black';\n\n return (\n <svg\n style={{ height: size, width: size }}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n fill=\"rgba(0,0,0,.2)\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill=\"white\"\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n <path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n </g>\n <g\n fill={fill}\n transform=\"matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)\"\n >\n <path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n <path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n </g>\n </svg>\n );\n}\n\nconst absStyles: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst inertStyles: CSSProperties = {\n overflow: 'hidden',\n pointerEvents: 'none',\n userSelect: 'none',\n};\n\nconst defaultZ = 99999;\n"]}
|