@archireport/react-native-svg-draw 2.3.2 → 3.0.0

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.
Files changed (44) hide show
  1. package/README.md +34 -35
  2. package/lib/commonjs/components/DrawCore/DrawContext.js +4 -1
  3. package/lib/commonjs/components/DrawCore/DrawContext.js.map +1 -1
  4. package/lib/commonjs/components/DrawCore/DrawPad.js +9 -3
  5. package/lib/commonjs/components/DrawCore/DrawPad.js.map +1 -1
  6. package/lib/commonjs/components/DrawCore/DrawProvider.js +16 -2
  7. package/lib/commonjs/components/DrawCore/DrawProvider.js.map +1 -1
  8. package/lib/commonjs/components/DrawCore/index.js +65 -71
  9. package/lib/commonjs/components/DrawCore/index.js.map +1 -1
  10. package/lib/commonjs/components/DrawCore/useDrawHook.js +15 -13
  11. package/lib/commonjs/components/DrawCore/useDrawHook.js.map +1 -1
  12. package/lib/commonjs/components/DrawWithOptions/index.js +7 -11
  13. package/lib/commonjs/components/DrawWithOptions/index.js.map +1 -1
  14. package/lib/module/components/DrawCore/DrawContext.js +4 -1
  15. package/lib/module/components/DrawCore/DrawContext.js.map +1 -1
  16. package/lib/module/components/DrawCore/DrawPad.js +10 -4
  17. package/lib/module/components/DrawCore/DrawPad.js.map +1 -1
  18. package/lib/module/components/DrawCore/DrawProvider.js +17 -3
  19. package/lib/module/components/DrawCore/DrawProvider.js.map +1 -1
  20. package/lib/module/components/DrawCore/index.js +65 -71
  21. package/lib/module/components/DrawCore/index.js.map +1 -1
  22. package/lib/module/components/DrawCore/useDrawHook.js +15 -13
  23. package/lib/module/components/DrawCore/useDrawHook.js.map +1 -1
  24. package/lib/module/components/DrawWithOptions/index.js +8 -12
  25. package/lib/module/components/DrawWithOptions/index.js.map +1 -1
  26. package/lib/typescript/components/DrawCore/DrawContext.d.ts +3 -0
  27. package/lib/typescript/components/DrawCore/DrawContext.d.ts.map +1 -1
  28. package/lib/typescript/components/DrawCore/DrawPad.d.ts +2 -1
  29. package/lib/typescript/components/DrawCore/DrawPad.d.ts.map +1 -1
  30. package/lib/typescript/components/DrawCore/DrawProvider.d.ts.map +1 -1
  31. package/lib/typescript/components/DrawCore/index.d.ts +2 -1
  32. package/lib/typescript/components/DrawCore/index.d.ts.map +1 -1
  33. package/lib/typescript/components/DrawCore/useDrawHook.d.ts +4 -1
  34. package/lib/typescript/components/DrawCore/useDrawHook.d.ts.map +1 -1
  35. package/lib/typescript/components/DrawWithOptions/index.d.ts +1 -1
  36. package/lib/typescript/components/DrawWithOptions/index.d.ts.map +1 -1
  37. package/package.json +1 -1
  38. package/src/components/DrawCore/DrawContext.tsx +6 -0
  39. package/src/components/DrawCore/DrawPad.tsx +76 -67
  40. package/src/components/DrawCore/DrawProvider.tsx +23 -1
  41. package/src/components/DrawCore/index.tsx +63 -63
  42. package/src/components/DrawCore/useDrawHook.tsx +12 -7
  43. package/src/components/DrawWithOptions/index.tsx +10 -11
  44. package/src/types.d.ts +5 -3
package/README.md CHANGED
@@ -49,7 +49,7 @@ import { DrawWithOptions } from 'react-native-svg-draw';
49
49
  import LinearGradient from 'react-native-linear-gradient';
50
50
 
51
51
  // ...
52
- <DrawWithOptions linearGradient={LinearGradient} />
52
+ <DrawWithOptions linearGradient={LinearGradient} />;
53
53
  ```
54
54
 
55
55
  ### Expo
@@ -59,7 +59,7 @@ import { DrawWithOptions } from 'react-native-svg-draw';
59
59
  import { LinearGradient } from 'expo-linear-gradient';
60
60
 
61
61
  // ...
62
- <DrawWithOptions linearGradient={LinearGradient} />
62
+ <DrawWithOptions linearGradient={LinearGradient} />;
63
63
  ```
64
64
 
65
65
  ---
@@ -74,14 +74,14 @@ Fast and easy way to use the lib.
74
74
  Example :
75
75
 
76
76
  ```jsx
77
- <DrawWithOptions
78
- linearGradient={LinearGradient}
79
- image={require('./pexels-sebastian-palomino-2847766.jpg')}
80
- close={() => true}
81
- takeSnapshot={(snap) => {
82
- snap.then((uri) => console.log('snapShot uri:', uri));
83
- }}
84
- />
77
+ <DrawWithOptions
78
+ linearGradient={LinearGradient}
79
+ image={require('./pexels-sebastian-palomino-2847766.jpg')}
80
+ close={() => true}
81
+ actionWithSnapShotUri={async (uri) => {
82
+ console.log('snapShot uri:', uri);
83
+ }}
84
+ />
85
85
  ```
86
86
 
87
87
  ### Use your own "DrawWithOptions" component
@@ -90,14 +90,12 @@ You can create your own "DrawWithOptions" component and customize the ui.
90
90
 
91
91
  You will need to use `DrawCore` component wrapped in `DrawProvider` context.
92
92
 
93
-
94
93
  ```jsx
95
94
  <DrawProvider>
96
- <DrawCore image={require('./pexels-sebastian-palomino-2847766.jpg')}/>
95
+ <DrawCore image={require('./pexels-sebastian-palomino-2847766.jpg')} />
97
96
  </DrawProvider>
98
97
  ```
99
98
 
100
-
101
99
  Then you can use the hook "useDrawHook" inside your components to interact with the context. This hook expose a lot of functions and objects that can be used to interact with the `DrawCore`.
102
100
 
103
101
  ```js
@@ -113,17 +111,17 @@ Then you can use the hook "useDrawHook" inside your components to interact with
113
111
 
114
112
  #### useDrawHook
115
113
 
116
- | Name | Type | Description |
117
- | --------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
118
- | `strokeWidth` | shared value(number) | Object from react-native-reanimated, get and set value => strokeWidth.value |
119
- | `color` | shared value(hslColor) | Object from react-native-reanimated, get and set value => color.value |
120
- | `onColorStrokeChange` | function | Function use when changing color or strokeWidth is done to memorize action for undo |
121
- | `drawState` | object | Get the selected `drawingMode` : 'singleHead','doubleHead','rectangle','ellipse','text','pen', `cancelEnabled` is true when last action can be canceled, `doneItems` contains all previous draw items and `screenStates` helps to go back in time (cancel pops last state) |
122
- | `dispatchDrawStates` | function | Can be used to update `drawingMode` |
123
- | `itemIsSelected` | shared value(boolean) | Object from react-native-reanimated Indicate if an item is selected, to get value => itemIsSelected.value |
124
- | `cancelLastAction` | function | Call this function when user press your undo button |
125
- | `takeSnapshot` | function | This async function will return the uri of your drawing |
126
- | `deleteSelectedItem` | function | Call this function when you want to delete the selected item |
114
+ | Name | Type | Description |
115
+ | --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
116
+ | `strokeWidth` | shared value(number) | Object from react-native-reanimated, get and set value => strokeWidth.value |
117
+ | `color` | shared value(hslColor) | Object from react-native-reanimated, get and set value => color.value |
118
+ | `onColorStrokeChange` | function | Function use when changing color or strokeWidth is done to memorize action for undo |
119
+ | `drawState` | object | Get the selected `drawingMode` : 'singleHead','doubleHead','rectangle','ellipse','text','pen', `cancelEnabled` is true when last action can be canceled, `doneItems` contains all previous draw items and `screenStates` helps to go back in time (cancel pops last state) |
120
+ | `dispatchDrawStates` | function | Can be used to update `drawingMode` |
121
+ | `itemIsSelected` | shared value(boolean) | Object from react-native-reanimated Indicate if an item is selected, to get value => itemIsSelected.value |
122
+ | `cancelLastAction` | function | Call this function when user press your undo button |
123
+ | `takeSnapshot` | function | This function will trigger the snapshot |
124
+ | `deleteSelectedItem` | function | Call this function when you want to delete the selected item |
127
125
 
128
126
  ### Recommendation
129
127
 
@@ -137,13 +135,13 @@ Component with header and footer, based on DrawCore
137
135
 
138
136
  #### Properties
139
137
 
140
- | Name | Type | Description |
141
- | ---------------- | --------------- | ---------------------------------------------------------------------------------------- |
142
- | `close` | function | (optional) called when cross is pressed |
143
- | `takeSnapshot` | function | (optional) called when send button (at the top right) is pressed |
144
- | `linearGradient` | React Component | implementation used for linear gradient (differs between expo and bare react native app) |
145
- | `image` | image | (optional) background picture |
146
- | `backgroundColor` | string | (optional) background color of the draw zone |
138
+ | Name | Type | Description |
139
+ | ----------------- | --------------- | ---------------------------------------------------------------------------------------- |
140
+ | `close` | function | (optional) called when cross is pressed |
141
+ | `takeSnapshot` | function | (optional) called when send button (at the top right) is pressed |
142
+ | `linearGradient` | React Component | implementation used for linear gradient (differs between expo and bare react native app) |
143
+ | `image` | image | (optional) background picture |
144
+ | `backgroundColor` | string | (optional) background color of the draw zone |
147
145
 
148
146
  ### DrawCore
149
147
 
@@ -151,10 +149,11 @@ Component where the user can draw
151
149
 
152
150
  #### Properties
153
151
 
154
- | Name | Type | Description |
155
- | ----------------- | ------ | -------------------------------------------- |
156
- | `image` | image | (optional) background picture |
157
- | `backgroundColor` | string | (optional) background color of the draw zone |
152
+ | Name | Type | Description |
153
+ | ----------------------- | -------- | ---------------------------------------------------------------------------------------- |
154
+ | `image` | image | (optional) background picture |
155
+ | `backgroundColor` | string | (optional) background color of the draw zone |
156
+ | `actionWithSnapShotUri` | function | (optional) a function receving uri of generated image and doing something of your choise |
158
157
 
159
158
  ## Contributing
160
159
 
package/lib/commonjs/components/DrawCore/DrawContext.js CHANGED
@@ -12,7 +12,10 @@ const DrawContext = /*#__PURE__*/(0, _react.createContext)({
12
12
  drawingMode: 'ellipse',
13
13
  cancelEnabled: false
14
14
  },
15
- dispatchDrawStates: () => true
15
+ dispatchDrawStates: () => true,
16
+ doSnapshot: () => {},
17
+ snapShotRequested: false,
18
+ setSnapShotRequested: () => {}
16
19
  });
17
20
  exports.DrawContext = DrawContext;
18
21
  //# sourceMappingURL=DrawContext.js.map
package/lib/commonjs/components/DrawCore/DrawContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["DrawContext","createContext","drawState","doneItems","screenStates","drawingMode","cancelEnabled","dispatchDrawStates"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawContext.tsx"],"mappings":";;;;;;AACA;AAKO,MAAMA,WAAW,gBAAG,IAAAC,oBAAa,EASrC;EACDC,SAAS,EAAE;IACTC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,CAAC,EAAE,CAAC;IAClBC,WAAW,EAAE,SAAS;IACtBC,aAAa,EAAE;EACjB,CAAC;EACDC,kBAAkB,EAAE,MAAM;AAC5B,CAAC,CAAC;AAAC"}
1
+ {"version":3,"names":["DrawContext","createContext","drawState","doneItems","screenStates","drawingMode","cancelEnabled","dispatchDrawStates","doSnapshot","snapShotRequested","setSnapShotRequested"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawContext.tsx"],"mappings":";;;;;;AACA;AAKO,MAAMA,WAAW,gBAAG,IAAAC,oBAAa,EAYrC;EACDC,SAAS,EAAE;IACTC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,CAAC,EAAE,CAAC;IAClBC,WAAW,EAAE,SAAS;IACtBC,aAAa,EAAE;EACjB,CAAC;EACDC,kBAAkB,EAAE,MAAM,IAAI;EAC9BC,UAAU,EAAE,MAAM,CAAC,CAAC;EACpBC,iBAAiB,EAAE,KAAK;EACxBC,oBAAoB,EAAE,MAAM,CAAC;AAC/B,CAAC,CAAC;AAAC"}
package/lib/commonjs/components/DrawCore/DrawPad.js CHANGED
@@ -18,12 +18,18 @@ const DrawPad = _ref => {
18
18
  doneItems,
19
19
  onPressItem,
20
20
  onTextHeightChange,
21
- addBackground = false
21
+ addBackground = false,
22
+ ratioImage = 1
22
23
  } = _ref;
23
24
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.default, {
24
25
  style: addBackground ? {
25
26
  backgroundColor: 'white'
26
- } : null
27
+ } : null,
28
+ preserveAspectRatio: "xMinYMin slice",
29
+ height: "100%",
30
+ width: "100%"
31
+ }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.G, {
32
+ scale: ratioImage
27
33
  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Circle, {
28
34
  id: "selectionIndicator",
29
35
  fill: "#3a6cff",
@@ -77,7 +83,7 @@ const DrawPad = _ref => {
77
83
  key: index,
78
84
  item: item,
79
85
  onPress: onPressItem(item, index)
80
- })), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedItem.default, null)), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedText.default, {
86
+ })), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedItem.default, null))), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedText.default, {
81
87
  currentItem: currentItem,
82
88
  onHeightChange: onTextHeightChange
83
89
  }));
package/lib/commonjs/components/DrawCore/DrawPad.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","addBackground","backgroundColor","map","item","index"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawPad.tsx"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA0B;AAAA;AAAA;AAI1B,MAAMA,OAAO,GAAG,QAYV;EAAA,IAZW;IACfC,WAAW;IACXC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,aAAa,GAAG;EAOlB,CAAC;EACC,oBACE,yEACE,6BAAC,uBAAG;IAAC,KAAK,EAAEA,aAAa,GAAG;MAAEC,eAAe,EAAE;IAAQ,CAAC,GAAG;EAAK,gBAC9D,6BAAC,oBAAI,qBACH,6BAAC,sBAAM;IACL,EAAE,EAAC,oBAAoB;IACvB,IAAI,EAAC,SAAS;IACd,CAAC,EAAE,EAAG;IACN,EAAE,EAAE,CAAE;IACN,EAAE,EAAE,CAAE;IACN,WAAW,EAAE,CAAE;IACf,MAAM,EAAC;EAAO,EACd,eACF,6BAAC,sBAAM;IACL,EAAE,EAAC,WAAW;IACd,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,oBAAoB;IAC3B,MAAM,EAAC,gBAAgB;IACvB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eACT,6BAAC,sBAAM;IACL,EAAE,EAAC,gBAAgB;IACnB,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,kBAAkB;IACzB,MAAM,EAAC,gBAAgB;IACvB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eAET,6BAAC,sBAAM;IACL,EAAE,EAAC,MAAM;IACT,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,gBAAgB;IACvB,MAAM,EAAC,cAAc;IACrB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eAET,6BAAC,sBAAM;IACL,EAAE,EAAC,WAAW;IACd,WAAW,EAAE,gBAAgC;IAC7C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,mBAAG;IAAC,IAAI,EAAC;EAAqB,EAAG,CAC3B,CACJ,EAENJ,SAAS,CAACK,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzB,6BAAC,aAAI;IAAC,GAAG,EAAEA,KAAM;IAAC,IAAI,EAAED,IAAK;IAAC,OAAO,EAAEL,WAAW,CAACK,IAAI,EAAEC,KAAK;EAAE,EACjE,CAAC,eAEF,6BAAC,4BAAmB,OAAG,CACnB,eACN,6BAAC,4BAAmB;IAClB,WAAW,EAAER,WAAY;IACzB,cAAc,EAAEG;EAAmB,EACnC,CACD;AAEP,CAAC;AAAC,eAEaJ,OAAO;AAAA"}
1
+ {"version":3,"names":["DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","addBackground","ratioImage","backgroundColor","map","item","index"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawPad.tsx"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA0B;AAAA;AAAA;AAI1B,MAAMA,OAAO,GAAG,QAcV;EAAA,IAdW;IACfC,WAAW;IACXC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG;EAQf,CAAC;EACC,oBACE,yEACE,6BAAC,uBAAG;IACF,KAAK,EAAED,aAAa,GAAG;MAAEE,eAAe,EAAE;IAAQ,CAAC,GAAG,IAAK;IAC3D,mBAAmB,EAAC,gBAAgB;IACpC,MAAM,EAAC,MAAM;IACb,KAAK,EAAC;EAAM,gBAEZ,6BAAC,iBAAC;IAAC,KAAK,EAAED;EAAW,gBACnB,6BAAC,oBAAI,qBACH,6BAAC,sBAAM;IACL,EAAE,EAAC,oBAAoB;IACvB,IAAI,EAAC,SAAS;IACd,CAAC,EAAE,EAAG;IACN,EAAE,EAAE,CAAE;IACN,EAAE,EAAE,CAAE;IACN,WAAW,EAAE,CAAE;IACf,MAAM,EAAC;EAAO,EACd,eACF,6BAAC,sBAAM;IACL,EAAE,EAAC,WAAW;IACd,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,oBAAoB;IAC3B,MAAM,EAAC,gBAAgB;IACvB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eACT,6BAAC,sBAAM;IACL,EAAE,EAAC,gBAAgB;IACnB,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,kBAAkB;IACzB,MAAM,EAAC,gBAAgB;IACvB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eAET,6BAAC,sBAAM;IACL,EAAE,EAAC,MAAM;IACT,WAAW,EAAE,aAA6B;IAC1C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,wBAAQ;IACP,MAAM,EAAC,gBAAgB;IACvB,MAAM,EAAC,cAAc;IACrB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACK,eAET,6BAAC,sBAAM;IACL,EAAE,EAAC,WAAW;IACd,WAAW,EAAE,gBAAgC;IAC7C,IAAI,EAAC,GAAG;IACR,IAAI,EAAC,GAAG;IACR,MAAM,EAAC;EAAM,gBAEb,6BAAC,mBAAG;IAAC,IAAI,EAAC;EAAqB,EAAG,CAC3B,CACJ,EAENJ,SAAS,CAACM,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzB,6BAAC,aAAI;IAAC,GAAG,EAAEA,KAAM;IAAC,IAAI,EAAED,IAAK;IAAC,OAAO,EAAEN,WAAW,CAACM,IAAI,EAAEC,KAAK;EAAE,EACjE,CAAC,eAEF,6BAAC,4BAAmB,OAAG,CACrB,CACA,eACN,6BAAC,4BAAmB;IAClB,WAAW,EAAET,WAAY;IACzB,cAAc,EAAEG;EAAmB,EACnC,CACD;AAEP,CAAC;AAAC,eAEaJ,OAAO;AAAA"}
package/lib/commonjs/components/DrawCore/DrawProvider.js CHANGED
@@ -87,7 +87,18 @@ const DrawProvider = _ref => {
87
87
  const currentItem = (0, _reactNativeReanimated.useSharedValue)(null);
88
88
  const viewShot = (0, _react.useRef)(null);
89
89
  const doubleArrowTextInput = (0, _react.useRef)(null);
90
+ const [snapShotRequested, setSnapShotRequested] = (0, _react.useState)(false);
90
91
  const [drawState, dispatchDrawStates] = (0, _react.useReducer)(reducerDrawStates, initialState);
92
+ const doSnapshot = (0, _react.useCallback)(() => {
93
+ if (currentItem !== null && currentItem !== void 0 && currentItem.value) {
94
+ dispatchDrawStates({
95
+ type: 'ADD_DONE_ITEM',
96
+ item: currentItem.value
97
+ });
98
+ currentItem.value = null;
99
+ }
100
+ setSnapShotRequested(true);
101
+ }, [currentItem, dispatchDrawStates]);
91
102
  const contextValue = (0, _react.useMemo)(() => ({
92
103
  drawState,
93
104
  dispatchDrawStates,
@@ -96,8 +107,11 @@ const DrawProvider = _ref => {
96
107
  currentItem,
97
108
  itemIsSelected,
98
109
  viewShot,
99
- doubleArrowTextInput
100
- }), [drawState, dispatchDrawStates, strokeWidth, color, currentItem, itemIsSelected, viewShot, doubleArrowTextInput]);
110
+ doubleArrowTextInput,
111
+ doSnapshot,
112
+ snapShotRequested,
113
+ setSnapShotRequested
114
+ }), [drawState, dispatchDrawStates, strokeWidth, color, currentItem, itemIsSelected, viewShot, doubleArrowTextInput, doSnapshot, snapShotRequested, setSnapShotRequested]);
101
115
  return /*#__PURE__*/_react.default.createElement(_DrawContext.DrawContext.Provider, {
102
116
  value: contextValue
103
117
  }, children);
package/lib/commonjs/components/DrawCore/DrawProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["initialState","doneItems","screenStates","cancelEnabled","drawingMode","reducerDrawStates","drawState","action","type","Keyboard","dismiss","concat","item","newDoneItems","splice","indice","currentItem","data","width","height","len","length","newScreenStates","pop","DrawProvider","children","itemIsSelected","useSharedValue","strokeWidth","color","viewShot","useRef","doubleArrowTextInput","dispatchDrawStates","useReducer","contextValue","useMemo"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawProvider.tsx"],"mappings":"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"}
1
+ {"version":3,"names":["initialState","doneItems","screenStates","cancelEnabled","drawingMode","reducerDrawStates","drawState","action","type","Keyboard","dismiss","concat","item","newDoneItems","splice","indice","currentItem","data","width","height","len","length","newScreenStates","pop","DrawProvider","children","itemIsSelected","useSharedValue","strokeWidth","color","viewShot","useRef","doubleArrowTextInput","snapShotRequested","setSnapShotRequested","useState","dispatchDrawStates","useReducer","doSnapshot","useCallback","value","contextValue","useMemo"],"sourceRoot":"../../../../src","sources":["components/DrawCore/DrawProvider.tsx"],"mappings":"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"}
package/lib/commonjs/components/DrawCore/index.js CHANGED
@@ -187,7 +187,8 @@ const DrawCore = _ref => {
187
187
  var _textInputRef$current4;
188
188
  let {
189
189
  image,
190
- backgroundColor
190
+ backgroundColor,
191
+ actionWithSnapShotUri
191
192
  } = _ref;
192
193
  const {
193
194
  drawState,
@@ -197,8 +198,34 @@ const DrawCore = _ref => {
197
198
  currentItem,
198
199
  itemIsSelected,
199
200
  viewShot,
200
- doubleArrowTextInput
201
+ doubleArrowTextInput,
202
+ captureSnapshot,
203
+ snapShotRequested,
204
+ setSnapShotRequested
201
205
  } = (0, _useDrawHook.default)();
206
+ const [drawRegion, setDrawRegion] = (0, _react.useState)(null);
207
+ const [imageSize, setImageSize] = (0, _react.useState)(null);
208
+ const [originalImageSize, setOriginalImageSize] = (0, _react.useState)(null);
209
+ (0, _react.useEffect)(() => {
210
+ if (snapShotRequested) {
211
+ setSnapShotRequested(false);
212
+ setNewLayoutRequested(true);
213
+ if (imageSize !== null && imageSize !== void 0 && imageSize.height && originalImageSize !== null && originalImageSize !== void 0 && originalImageSize.height && originalImageSize !== null && originalImageSize !== void 0 && originalImageSize.width && image) {
214
+ setOpacity(0);
215
+ setRatioImage(originalImageSize.height / (imageSize === null || imageSize === void 0 ? void 0 : imageSize.height));
216
+ setImageSize(originalImageSize);
217
+ } else if (!image && drawRegion !== null && drawRegion !== void 0 && drawRegion.height) {
218
+ const width = 1500;
219
+ const height = width / 1.3333333;
220
+ setOpacity(0);
221
+ setRatioImage(height / drawRegion.height);
222
+ setImageSize({
223
+ width,
224
+ height
225
+ });
226
+ }
227
+ }
228
+ }, [snapShotRequested, drawRegion === null || drawRegion === void 0 ? void 0 : drawRegion.height, image, imageSize === null || imageSize === void 0 ? void 0 : imageSize.height, originalImageSize, setSnapShotRequested]);
202
229
  const onCancelChangeWrapper = arg => {
203
230
  dispatchDrawStates({
204
231
  type: 'SET_CANCEL_ENABLED',
@@ -206,9 +233,6 @@ const DrawCore = _ref => {
206
233
  });
207
234
  };
208
235
  const mode = (0, _reactNativeReanimated.useSharedValue)('pen');
209
- const [drawRegion, setDrawRegion] = (0, _react.useState)(null);
210
- const [originalImageSize, setOriginalImageSize] = (0, _react.useState)(null);
211
- const [imageSize, setImageSize] = (0, _react.useState)(null);
212
236
  const drawContainer = (0, _react.useRef)(null);
213
237
  const [textVal, setTextVal] = (0, _react.useState)('');
214
238
  const initialItem = (0, _reactNativeReanimated.useSharedValue)(null);
@@ -243,19 +267,15 @@ const DrawCore = _ref => {
243
267
 
244
268
  const textFocusState = (0, _react.useCallback)(() => {
245
269
  var _doubleArrowTextInput;
246
- //setShowTextInputState(true);
247
- console.log('textFocusState');
248
270
  doubleArrowTextInput === null || doubleArrowTextInput === void 0 ? void 0 : (_doubleArrowTextInput = doubleArrowTextInput.current) === null || _doubleArrowTextInput === void 0 ? void 0 : _doubleArrowTextInput.focus();
249
271
  }, [doubleArrowTextInput]);
250
272
  const textFocus = (0, _react.useCallback)(() => {
251
273
  var _textInputRef$current;
252
- console.log('textFocus');
253
274
  (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
254
275
  }, []);
255
276
  (0, _react.useEffect)(() => {
256
277
  var _currentItem$value2;
257
278
  if (((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.type) === 'text') {
258
- console.log('use effect text');
259
279
  showTextInput.value = true;
260
280
  textFocus();
261
281
  currentItem.value = {
@@ -269,7 +289,7 @@ const DrawCore = _ref => {
269
289
  }, [currentItem, showTextInput, textFocus, textVal]);
270
290
  const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
271
291
  onStart: (_ref2, ctx) => {
272
- var _currentItem$value3, _currentItem$value4;
292
+ var _currentItem$value3;
273
293
  let {
274
294
  x: startX,
275
295
  y: startY
@@ -277,12 +297,8 @@ const DrawCore = _ref => {
277
297
  ctx.startX = startX;
278
298
  ctx.startY = startY;
279
299
  ctx.newlyCreated = false;
280
- console.log('**********************************');
281
- console.log('onGestureEvent');
282
- //panPosition.value = withTiming(RIGHT_PANE_WIDTH);
283
- console.log('onStart', (_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type);
284
300
  initialItem.value = currentItem.value;
285
- switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
301
+ switch ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) {
286
302
  case 'ellipse':
287
303
  const cx = typeof currentItem.value.data.cx === 'string' ? parseFloat(currentItem.value.data.cx) : currentItem.value.data.cx || 0;
288
304
  const cy = typeof currentItem.value.data.cy === 'string' ? parseFloat(currentItem.value.data.cy) : currentItem.value.data.cy || 0;
@@ -358,18 +374,14 @@ const DrawCore = _ref => {
358
374
  const yText = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
359
375
  const widthText = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
360
376
  const heightText = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
361
- console.log(heightText);
362
- console.log(widthText);
363
377
  if (startX <= xText + THRESHOLD && startX >= xText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
364
378
  ctx.zone = 'LEFT';
365
379
  } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
366
380
  ctx.zone = 'RIGHT';
367
381
  } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
368
382
  ctx.zone = 'CENTER';
369
- console.log('on active center');
370
383
  } else {
371
384
  ctx.zone = 'OUT';
372
- console.log('on active out');
373
385
  initialItem.value = null;
374
386
  ctx.newlyCreated = true;
375
387
  (0, _reactNativeReanimated.runOnJS)(setTextVal)('');
@@ -398,8 +410,6 @@ const DrawCore = _ref => {
398
410
  ctx.zone = 'OUT';
399
411
  initialItem.value = null;
400
412
  if (drawState.drawingMode === 'text') {
401
- /* NEW GEOFF */
402
- console.log('on active out');
403
413
  ctx.newlyCreated = true;
404
414
  (0, _reactNativeReanimated.runOnJS)(setTextVal)('');
405
415
  drawNewItem(mode, currentItem, addDoneItem, {
@@ -418,7 +428,7 @@ const DrawCore = _ref => {
418
428
  }
419
429
  },
420
430
  onActive: (_ref3, ctx) => {
421
- var _currentItem$value5, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
431
+ var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
422
432
  let {
423
433
  x: currentX,
424
434
  y: currentY,
@@ -432,7 +442,6 @@ const DrawCore = _ref => {
432
442
  newlyCreated
433
443
  } = ctx;
434
444
  if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
435
- console.log('on active out');
436
445
  ctx.newlyCreated = true;
437
446
  /*
438
447
  if (mode.value === 'text') {
@@ -449,7 +458,7 @@ const DrawCore = _ref => {
449
458
  itemIsSelected.value = true;
450
459
  onCancelChangeWrapper && (0, _reactNativeReanimated.runOnJS)(onCancelChangeWrapper)(true);
451
460
  }
452
- switch ((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) {
461
+ switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
453
462
  case 'pen':
454
463
  if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
455
464
  currentItem.value = {
@@ -718,7 +727,6 @@ const DrawCore = _ref => {
718
727
  }
719
728
  break;
720
729
  case 'text':
721
- console.log('on active text');
722
730
  if (((_initialItem$value30 = initialItem.value) === null || _initialItem$value30 === void 0 ? void 0 : _initialItem$value30.type) === currentItem.value.type) {
723
731
  var _initialItem$value31, _initialItem$value32, _initialItem$value33, _initialItem$value34, _initialItem$value35, _initialItem$value36, _initialItem$value37, _initialItem$value38, _initialItem$value39, _initialItem$value40, _initialItem$value41, _initialItem$value42;
724
732
  const xText = typeof ((_initialItem$value31 = initialItem.value) === null || _initialItem$value31 === void 0 ? void 0 : _initialItem$value31.data.x) === 'string' ? parseFloat((_initialItem$value32 = initialItem.value) === null || _initialItem$value32 === void 0 ? void 0 : _initialItem$value32.data.x) : ((_initialItem$value33 = initialItem.value) === null || _initialItem$value33 === void 0 ? void 0 : _initialItem$value33.data.x) || 0;
@@ -786,11 +794,11 @@ const DrawCore = _ref => {
786
794
  }
787
795
  },
788
796
  onEnd: _event => {
789
- var _currentItem$value6, _currentItem$value7;
790
- if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'doubleArrows') {
797
+ var _currentItem$value5, _currentItem$value6;
798
+ if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'doubleArrows') {
791
799
  (0, _reactNativeReanimated.runOnJS)(textFocusState)();
792
800
  }
793
- if (((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'text') {
801
+ if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'text') {
794
802
  (0, _reactNativeReanimated.runOnJS)(textFocus)();
795
803
  currentItem.value = {
796
804
  type: currentItem.value.type,
@@ -809,7 +817,6 @@ const DrawCore = _ref => {
809
817
  });
810
818
  const sudDidShow = _reactNative.Keyboard.addListener('keyboardDidShow', event => {
811
819
  // avoid events triggered by InputAccessoryView
812
- console.log('keyboardDidShow dc');
813
820
  if (event.endCoordinates.height > 100) {
814
821
  showTextInput.value = true;
815
822
  }
@@ -828,12 +835,12 @@ const DrawCore = _ref => {
828
835
  color: color === null || color === void 0 ? void 0 : color.value
829
836
  };
830
837
  }, _ref4 => {
831
- var _currentItem$value8;
838
+ var _currentItem$value7;
832
839
  let {
833
840
  strokeWidth: sw,
834
841
  color: c
835
842
  } = _ref4;
836
- switch ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.type) {
843
+ switch ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) {
837
844
  case 'singleHead':
838
845
  case 'doubleHead':
839
846
  case 'doubleArrows':
@@ -859,12 +866,10 @@ const DrawCore = _ref => {
859
866
  }
860
867
  }, [strokeWidth.value, color === null || color === void 0 ? void 0 : color.value]);
861
868
  const onPressItem = (0, _react.useCallback)((item, index) => () => {
862
- console.log('onPressItem');
863
- itemIsSelected.value = true;
864
869
  const previousItem = currentItem.value;
870
+ itemIsSelected.value = true;
865
871
  strokeWidth.value = item.strokeWidth;
866
872
  color.value = item.color;
867
- console.log('item', item);
868
873
  currentItem.value = item;
869
874
  deleteDoneItem(index);
870
875
  if (previousItem) {
@@ -915,11 +920,11 @@ const DrawCore = _ref => {
915
920
  onTextHeightUpdate(currentItem, textBaseHeight, height);
916
921
  }, [currentItem, textBaseHeight]);
917
922
  const calculateSizes = (0, _react.useCallback)((imageWidth, imageHeight) => {
923
+ setOriginalImageSize({
924
+ width: imageWidth,
925
+ height: imageHeight
926
+ });
918
927
  if (drawRegion) {
919
- setOriginalImageSize({
920
- width: imageWidth,
921
- height: imageHeight
922
- });
923
928
  const ratioImageHeight = Math.round(imageHeight * drawRegion.width / imageWidth * 100) / 100;
924
929
  if (ratioImageHeight < drawRegion.height) {
925
930
  setImageSize({
@@ -949,35 +954,18 @@ const DrawCore = _ref => {
949
954
 
950
955
  // do not remove keyboard will appear over the drawing frame and not shift it
951
956
  (0, _reactNativeReanimated.useAnimatedKeyboard)();
952
-
953
- /*
954
- const onEndEditingTextInput = useCallback(() => {
955
- console.log('onEndEditingTextInput');
956
- setShowTextInputState(false);
957
- if (currentItem.value && currentItem.value.type === 'doubleArrows') {
958
- console.log(currentItem.value.text);
959
- addScreenStates(currentItem.value);
960
- }
961
- }, [currentItem, addScreenStates]);
962
- const onChangeText = useCallback(
963
- (value: string) => {
964
- if (
965
- value &&
966
- currentItem.value &&
967
- currentItem.value.type === 'doubleArrows'
968
- ) {
969
- console.log('******************');
970
- console.log(value);
971
- console.log(currentItem.value);
972
- currentItem.value = {
973
- ...currentItem.value,
974
- text: value,
975
- };
957
+ const [newLayoutRequested, setNewLayoutRequested] = (0, _react.useState)(false);
958
+ const onLayout = (0, _react.useCallback)(async () => {
959
+ if (newLayoutRequested) {
960
+ setNewLayoutRequested(false);
961
+ const uri = await captureSnapshot();
962
+ if (uri && typeof actionWithSnapShotUri === 'function') {
963
+ await actionWithSnapShotUri(uri);
976
964
  }
977
- },
978
- [currentItem]
979
- );
980
- */
965
+ }
966
+ }, [actionWithSnapShotUri, newLayoutRequested, captureSnapshot]);
967
+ const [ratioImage, setRatioImage] = (0, _react.useState)(1);
968
+ const [opacity, setOpacity] = (0, _react.useState)(1);
981
969
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
982
970
  style: styles.container
983
971
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -996,7 +984,11 @@ const DrawCore = _ref => {
996
984
  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
997
985
  onGestureEvent: onGestureEvent
998
986
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
999
- style: imageSize || drawRegion
987
+ style: {
988
+ ...(imageSize || drawRegion),
989
+ opacity: opacity
990
+ },
991
+ onLayout: onLayout
1000
992
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
1001
993
  ref: drawContainer
1002
994
  }, image ? imageSize && originalImageSize ? /*#__PURE__*/_react.default.createElement(_reactNativeViewShot.default, {
@@ -1013,21 +1005,23 @@ const DrawCore = _ref => {
1013
1005
  currentItem: currentItem,
1014
1006
  doneItems: drawState.doneItems,
1015
1007
  onPressItem: onPressItem,
1016
- onTextHeightChange: onTextHeightChange
1008
+ onTextHeightChange: onTextHeightChange,
1009
+ ratioImage: ratioImage
1017
1010
  }))) : null : drawRegion ? /*#__PURE__*/_react.default.createElement(_reactNativeViewShot.default, {
1018
1011
  ref: viewShot,
1019
1012
  options: {
1020
1013
  format: 'jpg',
1021
1014
  quality: 1,
1022
- ...drawRegion
1015
+ ...(imageSize || drawRegion)
1023
1016
  },
1024
- style: drawRegion
1017
+ style: imageSize || drawRegion
1025
1018
  }, /*#__PURE__*/_react.default.createElement(_DrawPad.default, {
1026
1019
  addBackground: true,
1027
1020
  currentItem: currentItem,
1028
1021
  doneItems: drawState.doneItems,
1029
1022
  onPressItem: onPressItem,
1030
- onTextHeightChange: onTextHeightChange
1023
+ onTextHeightChange: onTextHeightChange,
1024
+ ratioImage: ratioImage
1031
1025
  })) : null))), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
1032
1026
  ref: textInputRef,
1033
1027
  style: styles.textInput,