Permalink
Browse files

RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas…

…-Designer, Chrome-Extensions, Ffmpeg.js, getScreenId, gumAdpater, video-conferencing and WebRTC-Scalable-Broadcast updated.
  • Loading branch information...
1 parent 9347157 commit b9bce6d7e2c669f4a1265c9791803e4645b1d11c @muaz-khan committed Oct 14, 2016
Showing with 54,348 additions and 6,274 deletions.
  1. +23 −3 Canvas-Designer/README.md
  2. +1 −1 Canvas-Designer/bower.json
  3. +2 −2 Canvas-Designer/canvas-designer-widget.js
  4. +50 −25 Canvas-Designer/dev/common.js
  5. +32 −17 Canvas-Designer/dev/decorator.js
  6. +4 −48 Canvas-Designer/dev/marker-handler.js
  7. +24 −23 Canvas-Designer/index.html
  8. +2 −1 Canvas-Designer/multiple.html
  9. +1 −1 Canvas-Designer/package.json
  10. +689 −643 Canvas-Designer/widget.html
  11. +87 −91 Canvas-Designer/widget.js
  12. +3 −3 Canvas-Designer/widget.min.js
  13. +10 −0 Chrome-Extensions/.gitignore
  14. +22 −10 Chrome-Extensions/desktopCapture-p2p/desktop-capturing.js
  15. +2 −2 Chrome-Extensions/desktopCapture-p2p/manifest.json
  16. +17 −5 Chrome-Extensions/desktopCapture-p2p/viewer.html
  17. +3 −3 Chrome-Extensions/screen-recording/RecordRTC.min.js
  18. +103 −76 Chrome-Extensions/screen-recording/background.js
  19. +31 −8 Chrome-Extensions/screen-recording/content-script.js
  20. BIN Chrome-Extensions/screen-recording/images/help.png
  21. +4 −3 Chrome-Extensions/screen-recording/manifest.json
  22. +10 −7 Chrome-Extensions/screen-recording/options.html
  23. +41 −30 Chrome-Extensions/screen-recording/options.js
  24. +6 −0 DataChannel/DataChannel.js
  25. +6 −0 DataChannel/dev/DataConnector.js
  26. +1 −0 DetectRTC/.gitignore
  27. +6 −4 DetectRTC/DetectRTC.js
  28. +2 −2 DetectRTC/DetectRTC.min.js
  29. +6 −6 DetectRTC/README.md
  30. +2 −2 DetectRTC/bower.json
  31. +3 −1 DetectRTC/dev/detectPrivateBrowsing.js
  32. +1 −1 DetectRTC/dev/getBrowserInfo.js
  33. +1 −1 DetectRTC/dev/isMobile.js
  34. +7 −1 DetectRTC/index.html
  35. +2 −2 DetectRTC/package.json
  36. +25 −7 MediaStreamRecorder/AudioStreamRecorder/MediaRecorderWrapper.js
  37. +34 −6 MediaStreamRecorder/AudioStreamRecorder/StereoAudioRecorderHelper.js
  38. +62 −15 MediaStreamRecorder/MediaStreamRecorder.js
  39. +3 −3 MediaStreamRecorder/MediaStreamRecorder.min.js
  40. +13 −1 MediaStreamRecorder/README.md
  41. +1 −1 MediaStreamRecorder/bower.json
  42. +2 −1 MediaStreamRecorder/common/MediaStreamRecorder.js
  43. +57 −18 MediaStreamRecorder/demos/audio-recorder.html
  44. +50 −7 MediaStreamRecorder/demos/video-recorder.html
  45. +1 −1 MediaStreamRecorder/package.json
  46. +1 −1 RTCMultiConnection/Gruntfile.js
  47. +21 −7 RTCMultiConnection/README.md
  48. +311 −422 RTCMultiConnection/RTCMultiConnection.js
  49. +5 −5 RTCMultiConnection/RTCMultiConnection.min.js
  50. +56 −2 RTCMultiConnection/Scalable-Broadcast.js
  51. +34 −0 RTCMultiConnection/Signaling-Server.js
  52. +2 −2 RTCMultiConnection/bower.json
  53. +4 −1 RTCMultiConnection/demos/Audio+ScreenSharing.html
  54. +5 −2 RTCMultiConnection/demos/Audio+Video+TextChat+FileSharing.html
  55. +4 −1 RTCMultiConnection/demos/Audio-Conferencing.html
  56. +5 −2 RTCMultiConnection/demos/Cross-Domain-Screen-Capturing.html
  57. +5 −2 RTCMultiConnection/demos/Disconnect+Rejoin.html
  58. +9 −6 RTCMultiConnection/demos/Files-Scalable-Broadcast.html
  59. +5 −2 RTCMultiConnection/demos/Firebase-Demo.html
  60. +354 −0 RTCMultiConnection/demos/Pre-recorded-Media-Streaming.html
  61. +6 −3 RTCMultiConnection/demos/PubNub-Demo.html
  62. +1 −0 RTCMultiConnection/demos/README.md
  63. +23 −8 RTCMultiConnection/demos/Scalable-Broadcast.html
  64. +10 −7 RTCMultiConnection/demos/Scalable-Screen-Broadcast.html
  65. +10 −7 RTCMultiConnection/demos/Scalable-Screen-plus-Audio-Broadcast.html
  66. +5 −2 RTCMultiConnection/demos/StreamHasData.html
  67. +5 −2 RTCMultiConnection/demos/TextChat+FileSharing.html
  68. +5 −2 RTCMultiConnection/demos/Video-Conferencing.html
  69. +8 −5 RTCMultiConnection/demos/addStream-in-Chat-room.html
  70. +9 −6 RTCMultiConnection/demos/admin-guest.html
  71. +4 −1 RTCMultiConnection/demos/applyConstraints.html
  72. +5 −2 RTCMultiConnection/demos/change-resolutions.html
  73. +4 −1 RTCMultiConnection/demos/checkPresence.html
  74. +4 −1 RTCMultiConnection/demos/custom-socket-event.html
  75. +39 −10 RTCMultiConnection/demos/file-sharing.html
  76. +4 −1 RTCMultiConnection/demos/getPublicModerators.html
  77. +255 −146 RTCMultiConnection/demos/index.html
  78. +5 −2 RTCMultiConnection/demos/replaceTrack.html
  79. +4 −1 RTCMultiConnection/demos/screen-sharing.html
  80. +5 −2 RTCMultiConnection/demos/share-part-of-screen.html
  81. +4 −1 RTCMultiConnection/demos/switch-cameras.html
  82. +4 −1 RTCMultiConnection/demos/video-broadcasting.html
  83. +95 −11 RTCMultiConnection/dev/DetectRTC.js
  84. +3 −1 RTCMultiConnection/dev/FileBufferReader.js
  85. +4 −4 RTCMultiConnection/dev/FirebaseConnection.js
  86. +4 −4 RTCMultiConnection/dev/PubNubConnection.js
  87. +43 −4 RTCMultiConnection/dev/RTCMultiConnection.js
  88. +101 −39 RTCMultiConnection/dev/RTCPeerConnection.js
  89. +7 −4 RTCMultiConnection/dev/Screen-Capturing.js
  90. +13 −7 RTCMultiConnection/dev/SignalRConnection.js
  91. +4 −4 RTCMultiConnection/dev/SipConnection.js
  92. +29 −14 RTCMultiConnection/dev/SocketConnection.js
  93. +8 −2 RTCMultiConnection/dev/StreamsHandler.js
  94. +7 −7 {getScreenId.js → RTCMultiConnection/dev}/getScreenId.js
  95. +19 −5 RTCMultiConnection/dev/getUserMedia.js
  96. +8 −2 RTCMultiConnection/dev/globals.js
  97. +11 −5 RTCMultiConnection/dev/gumadapter.js
  98. +3 −1 RTCMultiConnection/dist/rmc3.fbr.js
  99. +2 −2 RTCMultiConnection/dist/rmc3.fbr.min.js
  100. +311 −422 RTCMultiConnection/dist/rmc3.js
  101. +5 −5 RTCMultiConnection/dist/rmc3.min.js
  102. +7 −6 RTCMultiConnection/docs/README.md
  103. +162 −7 RTCMultiConnection/docs/api.md
  104. +122 −0 RTCMultiConnection/docs/getting-started.md
  105. +6 −3 RTCMultiConnection/docs/how-to-use.md
  106. +20 −10 RTCMultiConnection/docs/installation-guide.md
  107. +134 −59 RTCMultiConnection/docs/ios-android.md
  108. +24 −0 RTCMultiConnection/docs/tips-tricks.md
  109. +9 −7 RTCMultiConnection/docs/upgrade.md
  110. +1 −1 RTCMultiConnection/logs.json
  111. +1 −1 RTCMultiConnection/package.json
  112. +99 −51 RTCMultiConnection/server.js
  113. +234 −147 RTCMultiConnection/v2.2.2/demos/audio-video-screen-sharing-recording.html
  114. +36 −13 RTCMultiConnection/v2.2.2/demos/audioconferencing.html
  115. +47 −21 RTCMultiConnection/v2.2.2/demos/session-reinitiation.html
  116. +233 −69 RTCMultiConnection/v2.2.2/demos/stream-mp3-live.html
  117. +40 −17 RTCMultiConnection/v2.2.2/demos/video-broadcasting.html
  118. +36 −14 RTCMultiConnection/v2.2.2/demos/videoconferencing.html
  119. +2 −0 RecordRTC/.gitignore
  120. +66 −52 RecordRTC/AudioVideo-on-Firefox.html
  121. +14 −13 RecordRTC/Canvas-Recording/Canvas-Animation-Recording.html
  122. +7 −1 RecordRTC/Canvas-Recording/README.md
  123. +179 −192 RecordRTC/Canvas-Recording/index.html
  124. +8 −15 RecordRTC/Canvas-Recording/record-canvas-drawings.html
  125. +235 −0 RecordRTC/Canvas-Recording/webpage-recording.html
  126. +66 −43 RecordRTC/MRecordRTC/index.html
  127. +8 −3 RecordRTC/README.md
  128. +66 −52 RecordRTC/Record-Mp3-or-Wav.html
  129. +66 −52 RecordRTC/RecordRTC-to-PHP/index.html
  130. +52 −30 RecordRTC/RecordRTC.js
  131. +3 −3 RecordRTC/RecordRTC.min.js
  132. +1 −1 RecordRTC/bower.json
  133. +21 −23 RecordRTC/dev/CanvasRecorder.js
  134. +1 −1 RecordRTC/dev/Cross-Browser-Declarations.js
  135. +19 −4 RecordRTC/dev/MediaStreamRecorder.js
  136. +10 −1 RecordRTC/dev/RecordRTC.js
  137. +123 −67 RecordRTC/index.html
  138. +20,613 −2,431 RecordRTC/libs/screenshot-dev.js
  139. +10 −4 RecordRTC/libs/screenshot.js
  140. +1 −1 RecordRTC/package.json
  141. +18 −0 RecordRTC/webgl/README.md
  142. BIN RecordRTC/webgl/assets/DST-Canopy.mp3
  143. BIN RecordRTC/webgl/assets/DST-Canopy.ogg
  144. BIN RecordRTC/webgl/assets/blank.cur
  145. +198 −0 RecordRTC/webgl/assets/duck.dae
  146. BIN RecordRTC/webgl/assets/duck.png
  147. BIN RecordRTC/webgl/assets/duckCM.png
  148. BIN RecordRTC/webgl/assets/icon.png
  149. BIN RecordRTC/webgl/assets/pickup.mp3
  150. BIN RecordRTC/webgl/assets/pickup.ogg
  151. BIN RecordRTC/webgl/assets/planeDiffuse.png
  152. +84 −0 RecordRTC/webgl/assets/scene.xml
  153. +375 −0 RecordRTC/webgl/assets/seymourplane_triangulate.dae
  154. +256 −0 RecordRTC/webgl/assets/target.dae
  155. BIN RecordRTC/webgl/assets/waterheight.jpg
  156. BIN RecordRTC/webgl/assets/waternormal.jpg
  157. +100 −0 RecordRTC/webgl/index.html
  158. +231 −0 RecordRTC/webgl/logic.js
  159. +131 −0 RecordRTC/webgl/plotly.html
  160. +138 −0 RecordRTC/webgl/style.css
  161. +1 −0 RecordRTC/webgl/vendor/README.md
  162. +33 −0 RecordRTC/webgl/vendor/backbone-min.js
  163. +854 −0 RecordRTC/webgl/vendor/buzz.js
  164. +28 −0 RecordRTC/webgl/vendor/glge-compiled-min.js
  165. +24,102 −0 RecordRTC/webgl/vendor/glge-compiled.js
  166. +4 −0 RecordRTC/webgl/vendor/jquery-1.7.1.min.js
  167. +31 −0 RecordRTC/webgl/vendor/underscore-min.js
  168. +348 −0 RecordRTC/webgl/view.js
  169. +13 −3 WebRTC-Scalable-Broadcast/README.md
  170. +281 −31 docs/TURN-server-installation-guide.html
  171. +49 −10 ffmpeg/audio-plus-canvas-recording.html
  172. +190 −99 getScreenId.js/README.md
  173. +0 −90 getScreenId.js/getScreenId.html
  174. +274 −0 getScreenId.js/getStats.js
  175. +311 −307 getScreenId.js/index.html
  176. +41 −0 getScreenId.js/package.json
  177. +74 −0 getScreenId.js/server.js
  178. +1 −1 gumadapter/README.md
  179. +2 −1 gumadapter/package.json
  180. +1 −5 video-conferencing/README.md
  181. +28 −21 video-conferencing/index.html
@@ -3,6 +3,8 @@
* Main demo: https://www.webrtc-experiment.com/Canvas-Designer/
* Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html
+YouTube video: https://www.youtube.com/watch?v=pvAj5l_v3cM
+
[![npm](https://img.shields.io/npm/v/canvas-designer.svg)](https://npmjs.org/package/canvas-designer) [![downloads](https://img.shields.io/npm/dm/canvas-designer.svg)](https://npmjs.org/package/canvas-designer) [![Build Status: Linux](https://travis-ci.org/muaz-khan/Canvas-Designer.png?branch=master)](https://travis-ci.org/muaz-khan/Canvas-Designer)
> "Collaborative" [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) i.e. Canvas-Drawing tool allows you draw bezier/quadratic curves, rectangles, circles and lines. You can also set strokes, back/forth colors and much more. You can draw using pencils, erase drawing, type texts etc. You can [easily add your own tools](https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute).
@@ -51,9 +53,10 @@ The correct name for `dragSingle` should be: `drag-move-resize last-selected-sha
The correct name for `dragMultiple` should be: `drag-move all-shapes`.
-**Upcoming** tools & features:
+### Upcoming tools
-1. Resize all shapes at once (currently you can resize last selected shape only)
+1. Allow users to add video-streams or screen-streams or existing-webm-mp4-videos
+2. Resize all shapes at once (currently you can resize last selected shape only)
# Features
@@ -463,6 +466,10 @@ var yourNewToolIconHandler = {
You can check other `*-handler.js` from [`dev`](https://github.com/muaz-khan/Canvas-Designer/tree/master/dev) directory to get the idea how exactly it works.
+Now open [`Gruntfile.js#L43`](https://github.com/muaz-khan/Canvas-Designer/blob/master/Gruntfile.js#L43) and add link to your new file: `dev/events-handler.js`.
+
+Now compile all your changes using `grunt`.
+
## Fifth Step
Open [`events-handler.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/events-handler.js) and make sure that your above `yourNewToolIconHandler` object is called for mouse up/down/move events.
@@ -525,7 +532,18 @@ Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/
This allows end-users to copy your shape's code and use anywhere on their own web-pages.
-For more information:
+Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js) file; there is a function [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67) inside the "common" object – which is aimed to output into textarea element.
+
+You don't have to change [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67). For simplicity purpose, code is separated in different functions/properties that you've to edit:
+
+1. [`forLoop`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L363)
+2. [`absoluteNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L105)
+3. [`relativeShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L158)
+4. [`relativeNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L281)
+
+Search for `p[0] === 'line'` and add similar code-blocks for your shape (new-tool-icon) as well.
+
+### For more information
* https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute
@@ -540,6 +558,8 @@ ctrl+c (copy last-selected shape)
ctrl+v (paste last-copied shape)
```
+`ctrl+mousedown` allows you quickly copy/paste all shapes. (i.e. ctrl button + mouse down)
+
# Contributors
1. [Muaz Khan](https://github.com/muaz-khan)
@@ -1,7 +1,7 @@
{
"name": "canvas-designer",
"preferGlobal": false,
- "version": "1.0.8",
+ "version": "1.0.9",
"author": {
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
@@ -75,7 +75,7 @@ function CanvasDesigner() {
designer.iframe.style.width = '100%';
designer.iframe.style.height = '100%';
designer.iframe.style.border = 0;
-
+
window.removeEventListener('message', onMessage);
window.addEventListener('message', onMessage, false);
@@ -108,7 +108,7 @@ function CanvasDesigner() {
designer.toDataURL = function(format, callback) {
dataURLListener = callback;
-
+
if (!designer.iframe) return;
designer.postMessage({
genDataURL: true,
@@ -303,31 +303,36 @@ var common = {
if (p[0] === 'arc') {
output += 'context.beginPath();\n' + 'context.arc(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + point[2] + ', ' + point[3] + ', 0, ' + point[4] + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'pencil') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'marker') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'eraser') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'line') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'arrow') {
@@ -345,13 +350,15 @@ var common = {
if (p[0] === 'quadratic') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.quadraticCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (p[0] === 'bezier') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.bezierCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ', ' + getPoint(point[6], x, 'x') + ', ' + getPoint(point[7], y, 'y') + ');\n'
- + this.strokeOrFill(p[2]);
+ +
+ this.strokeOrFill(p[2]);
}
if (i !== length - 1) output += '\n\n';
@@ -363,66 +370,84 @@ var common = {
forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n'
// globals
- + ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'
+ +
+ ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'
- + '\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n'
+ +
+ '\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n'
// line
- + ' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// arrow
- + ' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n'
// pencil
- + ' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// marker
- + ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// text
- + ' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n'
// eraser
- + ' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// arc
- + ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n'
+ +
+ ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n'
// rect
- + ' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n'
+ +
+ ' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n'
- + ' }\n\n'
+ +
+ ' }\n\n'
// quadratic
- + ' if(p[0] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n'
// bezier
- + ' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n'
+ +
+ ' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n'
// end-fill
- + ' context.stroke();\n' + ' context.fill();\n'
+ +
+ ' context.stroke();\n' + ' context.fill();\n'
- + '}',
+ +
+ '}',
strokeFillText: '\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n' + ' if(lineWidth) { \n' + '\tcontext.globalAlpha = globalAlpha;\n' + '\tcontext.globalCompositeOperation = globalCompositeOperation;\n' + '\tcontext.lineCap = lineCap;\n' + '\tcontext.lineJoin = lineJoin;\n'
- + '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n'
+ +
+ '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n'
- + ' context.stroke();\n' + ' context.fill();\n'
+ +
+ ' context.stroke();\n' + ' context.fill();\n'
- + '}',
+ +
+ '}',
strokeOrFill: function(p) {
if (!this.prevProps || this.prevProps !== p.join(',')) {
this.prevProps = p.join(',');
@@ -307,17 +307,10 @@ window.addEventListener('load', function() {
} else document.getElementById('pencil-icon').style.display = 'none';
function decorateMarker() {
+
function hexToRGBA(h, alpha) {
return 'rgba(' + hexToRGB(h).join(',') + ',' + alpha + ')';
}
-
- function doneHandler() {
- markerContainer.style.display = 'none';
-
- markerLineWidth = strokeStyleText.value;
- markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha);
- }
-
var colors = [
['FFFFFF', '006600', '000099', 'CC0000', '8C4600'],
['CCCCCC', '00CC00', '6633CC', 'FF0000', 'B28500'],
@@ -342,18 +335,25 @@ window.addEventListener('load', function() {
bindEvent(context, 'Marker');
var markerContainer = find('marker-container'),
+ markerColorContainer = find('marker-fill-colors'),
strokeStyleText = find('marker-stroke-style'),
markerColorsList = find("marker-colors-list"),
fillStyleText = find('marker-fill-style'),
+ markerSelectedColor = find('marker-selected-color'),
+ markerSelectedColor2 = find('marker-selected-color-2'),
btnMarkerDone = find('marker-done'),
canvas = context.canvas,
alpha = 0.2;
// START INIT MARKER
- markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha);
- var html = '';
+
+ markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha)
+
+ markerSelectedColor.style.backgroundColor =
+ markerSelectedColor2.style.backgroundColor = '#' + fillStyleText.value;
+
colors.forEach(function(colorRow) {
var row = '<tr>';
@@ -362,25 +362,28 @@ window.addEventListener('load', function() {
})
row += '</tr>';
- html += row;
- });
-
- markerColorsList.innerHTML = html;
+ markerColorsList.innerHTML += row;
+ })
// console.log(markerColorsList.getElementsByTagName('td'))
Array.prototype.slice.call(markerColorsList.getElementsByTagName('td')).forEach(function(td) {
addEvent(td, 'mouseover', function() {
var elColor = td.getAttribute('data-color');
+ markerSelectedColor2.style.backgroundColor = '#' + elColor;
fillStyleText.value = elColor
});
addEvent(td, 'click', function() {
var elColor = td.getAttribute('data-color');
+ markerSelectedColor.style.backgroundColor =
+ markerSelectedColor2.style.backgroundColor = '#' + elColor;
+
fillStyleText.value = elColor;
- doneHandler();
+
+ markerColorContainer.style.display = 'none';
});
- });
+ })
// END INIT MARKER
@@ -394,7 +397,17 @@ window.addEventListener('load', function() {
fillStyleText.focus();
});
- addEvent(btnMarkerDone, 'click', doneHandler);
+ addEvent(btnMarkerDone, 'click', function() {
+ markerContainer.style.display = 'none';
+ markerColorContainer.style.display = 'none';
+
+ markerLineWidth = strokeStyleText.value;
+ markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha);
+ });
+
+ addEvent(markerSelectedColor, 'click', function() {
+ markerColorContainer.style.display = 'block';
+ });
}
if (tools.marker === true) {
@@ -717,10 +730,12 @@ function hideContainers() {
var additionalContainer = find('additional-container'),
colorsContainer = find('colors-container'),
markerContainer = find('marker-container'),
+ markerColorContainer = find('marker-fill-colors'),
lineWidthContainer = find('line-width-container');
additionalContainer.style.display =
colorsContainer.style.display =
+ markerColorContainer.style.display =
markerContainer.style.display =
lineWidthContainer.style.display = 'none';
}
Oops, something went wrong.

0 comments on commit b9bce6d

Please sign in to comment.