@cs-open/react-fabric 0.0.3

package/dist/types/types/store.d.ts

@@ -0,0 +1,59 @@
+import type { Canvas } from 'fabric';
+import type { OnNodeDrag, OnNodesChange, OnNodesDelete } from './component-props';
+import type { InternalNodeBase, Node } from './nodes';
+export type OnError = (id: string, message: string) => void;
+export type ReactFabricStore<NodeType extends Node = Node> = {
+    width: number;
+    height: number;
+    nodes: NodeType[];
+    onNodesChange: OnNodesChange | null;
+    hasDefaultNodes: boolean;
+    hasDefaultSelection: boolean;
+    hasDefaultDraggable: boolean;
+    domNode: HTMLDivElement | null;
+    zoom: number;
+    fitZoom: number;
+    manualZoom: number;
+    minManualZoom: number;
+    maxManualZoom: number;
+    isDragging: boolean;
+    selection?: boolean;
+    draggable: boolean;
+    lastPosX?: number;
+    lastPosY?: number;
+    scale: number;
+    defaultCentered?: boolean;
+    loading: boolean;
+    canvas: Canvas | null;
+    onNodeDragStart?: OnNodeDrag<NodeType>;
+    onNodeDrag?: OnNodeDrag<NodeType>;
+    onNodeDragStop?: OnNodeDrag<NodeType>;
+    onNodesDelete?: OnNodesDelete<NodeType>;
+    debug: boolean;
+    zoomable: boolean;
+    onError?: OnError;
+};
+export type UpdateNodePositions = (dragItems: Map<string, InternalNodeBase>, dragging?: boolean) => void;
+type Dimensions = {
+    width?: number;
+    height?: number;
+};
+export type ReactFabricActions = {
+    setDimensions: (dimensions: Dimensions) => void;
+    setLoading: (loading: boolean) => void;
+    setZoom: (zoom: number) => void;
+    setMinManualZoom: (minManualZoom: number) => void;
+    setMaxManualZoom: (maxManualZoom: number) => void;
+    reset: () => void;
+    setDraggable: (enable: boolean) => void;
+    setFitZoom: (zoom: number) => void;
+    setManualZoom: (zoom: number) => void;
+    setZoomable: (enable: boolean) => void;
+    setSelection: (selection: boolean) => void;
+    setDefaultSelection: (selection: boolean | undefined) => void;
+    setDefaultDraggable: (draggable: boolean | undefined) => void;
+    setIsDragging: (bool: boolean) => void;
+};
+export type ReactFabricState<NodeType extends Node = Node> = ReactFabricStore<NodeType> & ReactFabricActions;
+export {};
+//# sourceMappingURL=store.d.ts.map

package/dist/types/types/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/types/store.ts"],"names":[],"mappings":"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"}

package/dist/types/types/utils.d.ts

@@ -0,0 +1,6 @@
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type MyCapitalize<S extends string> = S extends `${infer A}:${infer B}:${infer C}` ? `on${Capitalize<A>}${Capitalize<B>}${Capitalize<C>}` : S extends `${infer A}:${infer B}` ? `on${Capitalize<A>}${Capitalize<B>}` : `on${Capitalize<S>}`;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/types/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GACrF,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,GACpD,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GAC/B,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,GACpC,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA"}

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export type UncontrolledProp = 'left' | 'top' | 'width' | 'height' | 'scaleX' | 'scaleY' | 'angle' | 'points' | 'path' | 'originX' | 'originY';
+export declare const UNCONTROLLED_PROPS: readonly UncontrolledProp[];
+export type DefaultProp = `default${Capitalize<UncontrolledProp>}`;
+export declare const DEFAULT_PROPS: readonly DefaultProp[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAA;AAGb,eAAO,MAAM,kBAAkB,EAY1B,SAAS,gBAAgB,EAAE,CAAA;AAGhC,MAAM,MAAM,WAAW,GAAG,UAAU,UAAU,CAAC,gBAAgB,CAAC,EAAE,CAAA;AAGlE,eAAO,MAAM,aAAa,EAErB,SAAS,WAAW,EAAE,CAAA"}

package/dist/types/utils/dom.d.ts

@@ -0,0 +1,3 @@
+import type { Dimensions } from '../types/utils';
+export declare const getDimensions: (node: HTMLCanvasElement) => Dimensions;
+//# sourceMappingURL=dom.d.ts.map

package/dist/types/utils/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEhD,eAAO,MAAM,aAAa,SAAU,iBAAiB,KAAG,UAGtD,CAAA"}

package/dist/types/utils/events.d.ts

@@ -0,0 +1,5 @@
+import type { CanvasEvents, GroupEvents, ObjectEvents } from 'fabric';
+import type { AllCanvasEvents } from '../types/canvas';
+import type { AllObjectEvents } from '../types/object';
+export declare const bindEvents: <T extends CanvasEvents | ObjectEvents | GroupEvents>(target: any, listeners: Partial<T extends CanvasEvents ? AllCanvasEvents : AllObjectEvents>) => () => void;
+//# sourceMappingURL=events.d.ts.map

package/dist/types/utils/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,YAAY,GAAG,YAAY,GAAG,WAAW,UACpE,GAAG,aACA,OAAO,CAAC,CAAC,SAAS,YAAY,GAAG,eAAe,GAAG,eAAe,CAAC,eAkB/E,CAAA"}

package/dist/types/utils/position.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 判断sunPosition是否在parentPosition内
+ * @param parentPosition 父级位置 (格式: x1,y1,x2,y2,x3,y3,x4,y4)
+ * @param sunPosition 子级位置 (格式: x1,y1,x2,y2,x3,y3,x4,y4)
+ * @returns boolean
+ */
+declare const includes: (parentPosition: string | number[], sunPosition: string | number[]) => boolean;
+export default includes;
+//# sourceMappingURL=position.d.ts.map

package/dist/types/utils/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/utils/position.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,mBAAoB,MAAM,GAAG,MAAM,EAAE,eAAe,MAAM,GAAG,MAAM,EAAE,YAelF,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/types/utils/props.d.ts

@@ -0,0 +1,4 @@
+import type { AllCanvasEvents } from '../types/canvas';
+export declare const splitListenerProps: <T extends Record<string, any>>(props: T) => [{ [K in keyof AllCanvasEvents]?: AllCanvasEvents[K]; }, Omit<T, keyof AllCanvasEvents>];
+export declare const transformDefaultProps: (defaultValues: Record<string, unknown>) => Record<string, unknown>;
+//# sourceMappingURL=props.d.ts.map

package/dist/types/utils/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/utils/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,SACvD,CAAC,KACP,CAAC,GAAG,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAE,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAYxF,CAAA;AAGD,eAAO,MAAM,qBAAqB,kBAAmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,4BAY3E,CAAA"}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@cs-open/react-fabric",
+  "type": "module",
+  "version": "0.0.3",
+  "description": "React Fabric",
+  "keywords": [
+    "@cs-open/react-fabric",
+    "fabric",
+    "react-fabric",
+    "canvas",
+    "fabric.js",
+    "fabricjs",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cs-open/react-fabric.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://cs-open.github.io/react-fabric/",
+  "bugs": {
+    "url": "https://github.com/cs-open/react-fabric/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@types/hammerjs": "^2.0.46",
+    "fabric": "^6.6.1",
+    "hammerjs": "^2.0.8",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.0.2",
+    "use-sync-external-store": "^1.4.0",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/fontfaceobserver": "^2.1.3",
+    "@types/hammerjs": "^2.0.46",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.15",
+    "cssnano": "^6.0.1",
+    "fabric": "^6.6.1",
+    "hammerjs": "^2.0.8",
+    "lodash-es": "^4.17.21",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^11.0.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-rename": "^0.6.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.28.1",
+    "tailwind-merge": "^3.0.2",
+    "use-sync-external-store": "^1.4.0",
+    "zustand": "^5.0.3",
+    "@cs-open/eslint-config": "0.0.0",
+    "@cs-open/rollup-config": "0.0.0",
+    "@cs-open/tsconfig": "0.0.0"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.5.2",
+    "@floating-ui/core": "^1.6.8",
+    "@types/lodash-es": "^4.17.12",
+    "fontfaceobserver": "^2.3.0"
+  },
+  "scripts": {
+    "dev": "concurrently \"rollup --config node:@cs-open/rollup-config --watch\" \"pnpm typecheck\"",
+    "build": "rimraf dist && concurrently \"rollup --config node:@cs-open/rollup-config --environment NODE_ENV:production\" \"pnpm tsc\"",
+    "tsc": "tsc -p tsconfig.json --declaration true --emitDeclarationOnly --declarationDir dist/types",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/ --dir dist ",
+    "css-watch": "pnpm css --watch",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  }
+}