@magnetman103/react-native-sketch-canvas
Version:
A fork of react native sketch canvas from sourcetoad for modification.
183 lines (174 loc) • 7.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.OnChangeEventType = void 0;
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _handlePermissions = require("./handlePermissions.js");
var _SketchCanvasNativeComponent = _interopRequireWildcard(require("./specs/SketchCanvasNativeComponent.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Define types directly in this file
let OnChangeEventType = exports.OnChangeEventType = /*#__PURE__*/function (OnChangeEventType) {
OnChangeEventType["PathsUpdate"] = "pathsUpdate";
OnChangeEventType["Save"] = "save";
return OnChangeEventType;
}({}); // Define DrawCanvas props interface
// Define the ref interface to expose methods
const DrawCanvas = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
const canvasRef = _react.default.useRef(null);
// Track these values with refs instead of state
const screenScale = _react.default.useRef(_reactNative.Platform.OS === 'ios' ? 1 : _reactNative.PixelRatio.get());
const size = _react.default.useRef({
width: 0,
height: 0
});
const initialized = _react.default.useRef(false);
// Process text for display
const processText = text => {
text && text.forEach(t => t.fontColor = (0, _reactNative.processColor)(t.fontColor));
return text;
};
const getProcessedText = (0, _memoizeOne.default)(text => {
const textCopy = text ? text.map(t => Object.assign({}, t)) : null;
return processText(textCopy);
});
// Method implementations
const clear = () => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.clear(canvasRef.current);
}
};
const addPath = data => {
if (initialized.current) {
const pathData = data.path.data.map(p => {
const coor = p.split(',').map(pp => parseFloat(pp).toFixed(2));
return `${coor[0] * screenScale.current * size.current.width / data.size.width},${coor[1] * screenScale.current * size.current.height / data.size.height}`;
});
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.addPath(canvasRef.current, data.path.id, (0, _reactNative.processColor)(data.path.color), data.path.width ? data.path.width * screenScale.current : 0, pathData);
}
}
};
const deletePath = id => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.deletePath(canvasRef.current, id);
}
};
const save = (imageType, transparent, folder, filename, includeImage, includeText, cropToImageSize) => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.save(canvasRef.current, imageType, folder, filename, transparent, includeImage, includeText, cropToImageSize);
}
};
const getBase64 = (imageType, transparent, includeImage, includeText, cropToImageSize) => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.transferToBase64(canvasRef.current, imageType, transparent, includeImage, includeText, cropToImageSize);
}
};
const addPoint = (x, y) => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.addPoint(canvasRef.current, parseFloat((x * screenScale.current).toString()), parseFloat((y * screenScale.current).toString()));
}
};
const newPath = (id, color, width) => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.newPath(canvasRef.current, id, (0, _reactNative.processColor)(color), width ? width * screenScale.current : 0);
}
};
const endPath = () => {
if (canvasRef.current) {
_SketchCanvasNativeComponent.Commands.endPath(canvasRef.current);
}
};
// Handle permissions on mount
_react.default.useEffect(() => {
const setupPermissions = async () => {
await (0, _handlePermissions.requestPermissions)(props.permissionDialogTitle || '', props.permissionDialogMessage || '');
};
setupPermissions();
}, [props.permissionDialogTitle, props.permissionDialogMessage]);
// Process paths when component updates
_react.default.useEffect(() => {
// Process any initial paths
if (initialized.current && props.pathsToProcess.length > 0) {
props.pathsToProcess.forEach(p => addPath(p));
}
}, [props.pathsToProcess]);
// Expose methods via ref
(0, _react.useImperativeHandle)(ref, () => ({
clear,
addPath,
deletePath,
newPath,
addPoint,
endPath,
save,
getBase64
}));
// Default props
const defaultProps = {
style: null,
strokeColor: '#000000',
strokeWidth: 3,
onPathsChange: () => {},
onStrokeStart: (_x, _y) => {},
onStrokeChanged: () => {},
onStrokeEnd: () => {},
onSketchSaved: () => {},
onGenerateBase64: () => {},
user: null,
text: null,
localSourceImage: null,
permissionDialogTitle: '',
permissionDialogMessage: '',
pathsToProcess: [],
paths: [],
currentPath: null
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SketchCanvasNativeComponent.default, {
ref: canvasRef,
style: props.style || defaultProps.style,
onLayout: e => {
size.current = {
width: e.nativeEvent.layout.width,
height: e.nativeEvent.layout.height
};
initialized.current = true;
// Process any initial paths after layout
if (props.pathsToProcess.length > 0) {
props.pathsToProcess.forEach(p => addPath(p));
}
},
onChange: e => {
const {
eventType,
pathsUpdate,
success,
path
} = e.nativeEvent || {};
const isSuccess = success !== undefined;
const isSave = eventType === OnChangeEventType.Save;
const isPathsUpdate = eventType === OnChangeEventType.PathsUpdate;
if (!isSave && isPathsUpdate) {
props.onPathsChange?.(pathsUpdate);
} else if (isSave) {
props.onSketchSaved?.(success, path);
} else if (isSuccess) {
props.onSketchSaved?.(success, '');
}
},
onGenerateBase64: e => {
props.onGenerateBase64?.(e.nativeEvent || {});
},
onCanvasReady: () => {
props.onCanvasReady?.();
},
localSourceImage: props.localSourceImage,
text: getProcessedText(props.text)
});
});
var _default = exports.default = DrawCanvas;
//# sourceMappingURL=DrawCanvas.js.map