js-draw 0.18.2 → 0.20.0

package/dist/bundledStyles.js

@@ -0,0 +1 @@
+(()=>{"use strict";var r={786:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,'.clr-picker {\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  position: absolute;\r\n  width: 200px;\r\n  z-index: 1000;\r\n  border-radius: 10px;\r\n  background-color: #fff;\r\n  justify-content: flex-end;\r\n  direction: ltr;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  -moz-user-select: none;\r\n  -webkit-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.clr-picker.clr-open,\r\n.clr-picker[data-inline="true"] {\r\n  display: flex;\r\n}\r\n\r\n.clr-picker[data-inline="true"] {\r\n  position: relative;\r\n}\r\n\r\n.clr-gradient {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100px;\r\n  margin-bottom: 15px;\r\n  border-radius: 3px 3px 0 0;\r\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker {\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin: -6px 0 0 -6px;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 8px;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-hue {\r\n  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\r\n}\r\n\r\n.clr-hue,\r\n.clr-alpha {\r\n  position: relative;\r\n  width: calc(100% - 40px);\r\n  height: 8px;\r\n  margin: 5px 20px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.clr-alpha span {\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border-radius: inherit;\r\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\r\n}\r\n\r\n.clr-hue input,\r\n.clr-alpha input {\r\n  position: absolute;\r\n  width: calc(100% + 16px);\r\n  height: 16px;\r\n  left: -8px;\r\n  top: -4px;\r\n  margin: 0;\r\n  background-color: transparent;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-hue div,\r\n.clr-alpha div {\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 16px;\r\n  left: 0;\r\n  top: 50%;\r\n  margin-left: -8px;\r\n  transform: translateY(-50%);\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  box-shadow: 0 0 1px #888;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-alpha div:before {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n}\r\n\r\n.clr-format {\r\n  display: none;\r\n  order: 1;\r\n  width: calc(100% - 40px);\r\n  margin: 0 20px 20px;\r\n}\r\n\r\n.clr-segmented {\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 1px solid #ddd;\r\n  border-radius: 15px;\r\n  box-sizing: border-box;\r\n  color: #999;\r\n  font-size: 12px;\r\n}\r\n\r\n.clr-segmented input,\r\n.clr-segmented legend {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  left: 0;\r\n  top: 0;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-segmented label {\r\n  flex-grow: 1;\r\n  margin: 0;\r\n  padding: 4px 0;\r\n  font-size: inherit;\r\n  font-weight: normal;\r\n  line-height: initial;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-segmented label:first-of-type {\r\n  border-radius: 10px 0 0 10px;\r\n}\r\n\r\n.clr-segmented label:last-of-type {\r\n  border-radius: 0 10px 10px 0;\r\n}\r\n\r\n.clr-segmented input:checked + label {\r\n  color: #fff;\r\n  background-color: #666;\r\n}\r\n\r\n.clr-swatches {\r\n  order: 2;\r\n  width: calc(100% - 32px);\r\n  margin: 0 16px;\r\n}\r\n\r\n.clr-swatches div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  padding-bottom: 12px;\r\n  justify-content: center;\r\n}\r\n\r\n.clr-swatches button {\r\n  position: relative;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 0 4px 6px 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-swatches button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\ninput.clr-color {\r\n  order: 1;\r\n  width: calc(100% - 80px);\r\n  height: 32px;\r\n  margin: 15px 20px 20px auto;\r\n  padding: 0 10px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 16px;\r\n  color: #444;\r\n  background-color: #fff;\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n  text-align: center;\r\n  box-shadow: none;\r\n}\r\n\r\ninput.clr-color:focus {\r\n  outline: none;\r\n  border: 1px solid #1e90ff;\r\n}\r\n\r\n.clr-close,\r\n.clr-clear {\r\n  display: none;\r\n  order: 2;\r\n  height: 24px;\r\n  margin: 0 20px 20px;\r\n  padding: 0 20px;\r\n  border: 0;\r\n  border-radius: 12px;\r\n  color: #fff;\r\n  background-color: #666;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-close {\r\n  display: block;\r\n  margin: 0 20px 20px auto;\r\n}\r\n\r\n.clr-preview {\r\n  position: relative;\r\n  width: 32px;\r\n  height: 32px;\r\n  margin: 15px 0 20px 20px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\n.clr-preview:before,\r\n.clr-preview:after {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n}\r\n\r\n.clr-preview:after {\r\n  border: 0;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\n.clr-preview button {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: transparent;\r\n  text-indent: -9999px;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker,\r\n.clr-hue div,\r\n.clr-alpha div,\r\n.clr-color {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-field {\r\n  display: inline-block;\r\n  position: relative;\r\n  color: transparent;\r\n}\r\n\r\n.clr-field input {\r\n  margin: 0;\r\n  direction: ltr;\r\n}\r\n\r\n.clr-field.clr-rtl input {\r\n  text-align: right;\r\n}\r\n\r\n.clr-field button {\r\n  position: absolute;\r\n  width: 30px;\r\n  height: 100%;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-field.clr-rtl button {\r\n  right: auto;\r\n  left: 0;\r\n}\r\n\r\n.clr-field button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\r\n}\r\n\r\n.clr-alpha,\r\n.clr-alpha div,\r\n.clr-swatches button,\r\n.clr-preview:before,\r\n.clr-field button {\r\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\r\n  background-position: 0 0, 4px 4px;\r\n  background-size: 8px 8px;\r\n}\r\n\r\n.clr-marker:focus {\r\n  outline: none;\r\n}\r\n\r\n.clr-keyboard-nav .clr-marker:focus,\r\n.clr-keyboard-nav .clr-hue input:focus + div,\r\n.clr-keyboard-nav .clr-alpha input:focus + div,\r\n.clr-keyboard-nav .clr-segmented input:focus + label {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\r\n}\r\n\r\n.clr-picker[data-alpha="false"] .clr-alpha {\r\n  display: none;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] {\r\n  padding-top: 16px;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] .clr-gradient,\r\n.clr-picker[data-minimal="true"] .clr-hue,\r\n.clr-picker[data-minimal="true"] .clr-alpha,\r\n.clr-picker[data-minimal="true"] .clr-color,\r\n.clr-picker[data-minimal="true"] .clr-preview {\r\n  display: none;\r\n}\r\n\r\n/** Dark theme **/\r\n\r\n.clr-dark {\r\n  background-color: #444;\r\n}\r\n\r\n.clr-dark .clr-segmented {\r\n  border-color: #777;\r\n}\r\n\r\n.clr-dark .clr-swatches button:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\r\n}\r\n\r\n.clr-dark input.clr-color {\r\n  color: #fff;\r\n  border-color: #777;\r\n  background-color: #555;\r\n}\r\n\r\n.clr-dark input.clr-color:focus {\r\n  border-color: #1e90ff;\r\n}\r\n\r\n.clr-dark .clr-preview:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\r\n}\r\n\r\n.clr-dark .clr-alpha,\r\n.clr-dark .clr-alpha div,\r\n.clr-dark .clr-swatches button,\r\n.clr-dark .clr-preview:before {\r\n  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\r\n}\r\n\r\n/** Polaroid theme **/\r\n\r\n.clr-picker.clr-polaroid {\r\n  border-radius: 6px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-picker.clr-polaroid:before {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 10px;\r\n  left: 20px;\r\n  top: -10px;\r\n  border: solid transparent;\r\n  border-width: 0 8px 10px 8px;\r\n  border-bottom-color: currentColor;\r\n  box-sizing: border-box;\r\n  color: #fff;\r\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-dark:before {\r\n  color: #444;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-left:before {\r\n  left: auto;\r\n  right: 20px;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-top:before {\r\n  top: auto;\r\n  bottom: -10px;\r\n  transform: rotateZ(180deg);\r\n}\r\n\r\n.clr-polaroid .clr-gradient {\r\n  width: calc(100% - 20px);\r\n  height: 120px;\r\n  margin: 10px;\r\n  border-radius: 3px;\r\n}\r\n\r\n.clr-polaroid .clr-hue,\r\n.clr-polaroid .clr-alpha {\r\n  width: calc(100% - 30px);\r\n  height: 10px;\r\n  margin: 6px 15px;\r\n  border-radius: 5px;\r\n}\r\n\r\n.clr-polaroid .clr-hue div,\r\n.clr-polaroid .clr-alpha div {\r\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-polaroid .clr-format {\r\n  width: calc(100% - 20px);\r\n  margin: 0 10px 15px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches {\r\n  width: calc(100% - 12px);\r\n  margin: 0 6px;\r\n}\r\n.clr-polaroid .clr-swatches div {\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n.clr-polaroid input.clr-color {\r\n  width: calc(100% - 60px);\r\n  margin: 10px 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-clear {\r\n  margin: 0 10px 15px 10px;\r\n}\r\n\r\n.clr-polaroid .clr-close {\r\n  margin: 0 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-preview {\r\n  margin: 10px 0 15px 10px;\r\n}\r\n\r\n/** Large theme **/\r\n\r\n.clr-picker.clr-large {\r\n  width: 275px;\r\n}\r\n\r\n.clr-large .clr-gradient {\r\n  height: 150px;\r\n}\r\n\r\n.clr-large .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n/** Pill (horizontal) theme **/\r\n\r\n.clr-picker.clr-pill {\r\n  width: 380px;\r\n  padding-left: 180px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-pill .clr-gradient {\r\n  position: absolute;\r\n  width: 180px;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  margin-bottom: 0;\r\n  border-radius: 3px 0 0 3px;\r\n}\r\n\r\n.clr-pill .clr-hue {\r\n  margin-top: 20px;\r\n}',""]);const l=a},59:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(771),d=o(443),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n",""]);const p=c},771:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(350),d=o(519),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}",""]);const p=c},350:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},519:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/* Override the default transform and margin-left */\n\tmargin-left: 0 !important;\n\ttransform: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},324:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},611:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},34:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},443:(r,n,o)=>{o.d(n,{Z:()=>s});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(611),d=o(324),c=o(34),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([r.id,"",""]);const s=p},645:r=>{r.exports=function(r){var n=[];return n.toString=function(){return this.map((function(n){var o="",t=void 0!==n[5];return n[4]&&(o+="@supports (".concat(n[4],") {")),n[2]&&(o+="@media ".concat(n[2]," {")),t&&(o+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),o+=r(n),t&&(o+="}"),n[2]&&(o+="}"),n[4]&&(o+="}"),o})).join("")},n.i=function(r,o,t,e,i){"string"==typeof r&&(r=[[null,r,void 0]]);var a={};if(t)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(a[d]=!0)}for(var c=0;c<r.length;c++){var p=[].concat(r[c]);t&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),n.push(p))}},n}},81:r=>{r.exports=function(r){return r[1]}},379:r=>{var n=[];function o(r){for(var o=-1,t=0;t<n.length;t++)if(n[t].identifier===r){o=t;break}return o}function t(r,t){for(var i={},a=[],l=0;l<r.length;l++){var d=r[l],c=t.base?d[0]+t.base:d[0],p=i[c]||0,s="".concat(c," ").concat(p);i[c]=p+1;var u=o(s),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==u)n[u].references++,n[u].updater(b);else{var h=e(b,t);t.byIndex=l,n.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(r,n){var o=n.domAPI(n);o.update(r);return function(n){if(n){if(n.css===r.css&&n.media===r.media&&n.sourceMap===r.sourceMap&&n.supports===r.supports&&n.layer===r.layer)return;o.update(r=n)}else o.remove()}}r.exports=function(r,e){var i=t(r=r||[],e=e||{});return function(r){r=r||[];for(var a=0;a<i.length;a++){var l=o(i[a]);n[l].references--}for(var d=t(r,e),c=0;c<i.length;c++){var p=o(i[c]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}i=d}}},569:r=>{var n={};r.exports=function(r,o){var t=function(r){if(void 0===n[r]){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(r){o=null}n[r]=o}return n[r]}(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},216:r=>{r.exports=function(r){var n=document.createElement("style");return r.setAttributes(n,r.attributes),r.insert(n,r.options),n}},565:(r,n,o)=>{r.exports=function(r){var n=o.nc;n&&r.setAttribute("nonce",n)}},795:r=>{r.exports=function(r){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=r.insertStyleElement(r);return{update:function(o){!function(r,n,o){var t="";o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {"));var e=void 0!==o.layer;e&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,e&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}");var i=o.sourceMap;i&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(t,r,n.options)}(n,r,o)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(n)}}}},589:r=>{r.exports=function(r,n){if(n.styleSheet)n.styleSheet.cssText=r;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(r))}}}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={id:t,exports:{}};return r[t](i,i.exports,o),i.exports}o.n=r=>{var n=r&&r.__esModule?()=>r.default:()=>r;return o.d(n,{a:n}),n},o.d=(r,n)=>{for(var t in n)o.o(n,t)&&!o.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:n[t]})},o.o=(r,n)=>Object.prototype.hasOwnProperty.call(r,n),o.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.nc=void 0;var t={};(()=>{o.r(t);var r=o(379),n=o.n(r),e=o(795),i=o.n(e),a=o(569),l=o.n(a),d=o(565),c=o.n(d),p=o(216),s=o.n(p),u=o(589),b=o.n(u),h=o(59),g={};g.styleTagTransform=b(),g.setAttributes=c(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();n()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var f=o(786),x={};x.styleTagTransform=b(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=s();n()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=t})();

package/dist/cjs/src/Color4.d.ts

@@ -1,3 +1,4 @@
+import Vec3 from './math/Vec3';
 export default class Color4 {
     /** Red component. Should be in the range [0, 1]. */
     readonly r: number;
@@ -36,6 +37,13 @@ export default class Color4 {
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
     static average(colors: Color4[]): Color4;
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV(): Vec3;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/cjs/src/Color4.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Color4 = void 0;
+const Vec3_1 = __importDefault(require("./math/Vec3"));
 class Color4 {
     constructor(
     /** Red component. Should be in the range [0, 1]. */
@@ -150,6 +154,69 @@ class Color4 {
         }
         return new Color4(averageR, averageG, averageB, averageA);
     }
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV() {
+        // Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        //
+        // HUE:
+        // First, consider the unit cube. Rotate it such that one vertex is at the origin
+        // of a plane and its three neighboring vertices are equidistant from that plane:
+        //
+        //         /\
+        //       /  | \
+        //   2 /    3   \ 1
+        //     \    |   /
+        //       \  | /
+        //   .     \/      .
+        //
+        //        .
+        //
+        // Let z be up and (x, y, 0) be in the plane.
+        //
+        // Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
+        // lie along the x axis.
+        //
+        // Because R is a unit vector and R, G, B are equidistant from the plane, they must
+        // form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
+        //
+        //       /|
+        //    1/  | (√3)/2
+        //    /   |
+        //      1/2
+        //
+        const minComponent = Math.min(this.r, this.g, this.b);
+        const maxComponent = Math.max(this.r, this.g, this.b);
+        const chroma = maxComponent - minComponent;
+        let hue;
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        if (chroma === 0) {
+            hue = 0;
+        }
+        else if (this.r >= this.g && this.r >= this.b) {
+            hue = ((this.g - this.b) / chroma) % 6;
+        }
+        else if (this.g >= this.r && this.g >= this.b) {
+            hue = (this.b - this.r) / chroma + 2;
+        }
+        else {
+            hue = (this.r - this.g) / chroma + 4;
+        }
+        // Convert to degree representation, then to radians.
+        hue *= 60;
+        hue *= Math.PI / 180;
+        // Ensure positivity.
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        const value = maxComponent;
+        const saturation = value > 0 ? chroma / value : 0;
+        return Vec3_1.default.of(hue, saturation, value);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/cjs/src/Editor.d.ts

@@ -53,7 +53,7 @@ export interface EditorSettings {
 export declare class Editor {
     private container;
     private renderingRegion;
-    /** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
+    /** Manages drawing surfaces/{@link AbstractRenderer}s. */
     display: Display;
     /**
      * Handles undo/redo.
@@ -95,7 +95,7 @@ export declare class Editor {
     readonly viewport: Viewport;
     /** @internal */
     readonly localization: EditorLocalization;
-    /** {@link lib!EditorSettings.iconProvider} */
+    /** {@link EditorSettings.iconProvider} */
     readonly icons: IconProvider;
     /**
      * Controls the list of tools. See

package/dist/cjs/src/Editor.js

@@ -60,7 +60,7 @@ const fileToBase64_1 = __importDefault(require("./util/fileToBase64"));
 const uniteCommands_1 = __importDefault(require("./commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("./tools/SelectionTool/SelectionTool"));
 const Erase_1 = __importDefault(require("./commands/Erase"));
-const ImageBackground_1 = __importStar(require("./components/ImageBackground"));
+const BackgroundComponent_1 = __importStar(require("./components/BackgroundComponent"));
 const sendPenEvent_1 = __importDefault(require("./testing/sendPenEvent"));
 /**
  * The main entrypoint for the full editor.
@@ -258,8 +258,8 @@ class Editor {
             if (evt.ctrlKey || evt.metaKey) {
                 delta = Vec3_1.default.of(0, 0, evt.deltaY);
             }
-            // Ensure that `pos` is relative to `this.container`
-            const bbox = this.container.getBoundingClientRect();
+            // Ensure that `pos` is relative to `this.renderingRegion`
+            const bbox = this.renderingRegion.getBoundingClientRect();
             const pos = Vec2_1.Vec2.of(evt.clientX, evt.clientY).minus(Vec2_1.Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: types_1.InputEvtType.WheelEvt,
@@ -845,7 +845,7 @@ class Editor {
         // Find a background component, if one exists.
         // Use the last (topmost) background component if there are multiple.
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground_1.default) {
+            if (component instanceof BackgroundComponent_1.default) {
                 background = component;
             }
         }
@@ -857,8 +857,8 @@ class Editor {
     setBackgroundColor(color) {
         let background = this.getTopmostBackgroundComponent();
         if (!background) {
-            const backgroundType = color.eq(Color4_1.default.transparent) ? ImageBackground_1.BackgroundType.None : ImageBackground_1.BackgroundType.SolidColor;
-            background = new ImageBackground_1.default(backgroundType, color);
+            const backgroundType = color.eq(Color4_1.default.transparent) ? BackgroundComponent_1.BackgroundType.None : BackgroundComponent_1.BackgroundType.SolidColor;
+            background = new BackgroundComponent_1.default(backgroundType, color);
             return this.image.addElement(background);
         }
         else {
@@ -873,7 +873,7 @@ class Editor {
         var _a;
         const backgroundColors = [];
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground_1.default) {
+            if (component instanceof BackgroundComponent_1.default) {
                 backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4_1.default.transparent);
             }
         }

package/dist/cjs/src/SVGLoader.js

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgStyleAttributesDataKey = exports.svgAttributesDataKey = exports.defaultSVGViewRect = void 0;
 const Color4_1 = __importDefault(require("./Color4"));
-const ImageBackground_1 = __importStar(require("./components/ImageBackground"));
+const BackgroundComponent_1 = __importStar(require("./components/BackgroundComponent"));
 const ImageComponent_1 = __importDefault(require("./components/ImageComponent"));
 const Stroke_1 = __importDefault(require("./components/Stroke"));
 const SVGGlobalAttributesObject_1 = __importDefault(require("./components/SVGGlobalAttributesObject"));
@@ -68,14 +68,13 @@ class SVGLoader {
     // If [computedStyles] is given, it is preferred to directly accessing node's style object.
     getStyle(node, computedStyles) {
         var _a, _b, _c, _d, _f, _g;
-        const style = {
-            fill: Color4_1.default.transparent,
-        };
+        let fill = Color4_1.default.transparent;
+        let stroke;
         // If possible, use computedStyles (allows property inheritance).
         const fillAttribute = (_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.fill) !== null && _b !== void 0 ? _b : node.style.fill;
         if (fillAttribute) {
             try {
-                style.fill = Color4_1.default.fromString(fillAttribute);
+                fill = Color4_1.default.fromString(fillAttribute);
             }
             catch (e) {
                 console.error('Unknown fill color,', fillAttribute);
@@ -91,7 +90,7 @@ class SVGLoader {
                 }
                 const strokeColor = Color4_1.default.fromString(strokeAttribute);
                 if (strokeColor.a > 0) {
-                    style.stroke = {
+                    stroke = {
                         width,
                         color: strokeColor,
                     };
@@ -101,6 +100,10 @@ class SVGLoader {
                 console.error('Error parsing stroke data:', e);
             }
         }
+        const style = {
+            fill,
+            stroke,
+        };
         return style;
     }
     strokeDataFromElem(node) {
@@ -176,11 +179,69 @@ class SVGLoader {
         });
     }
     addBackground(node) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
-            const fill = Color4_1.default.fromString((_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill) !== null && _b !== void 0 ? _b : 'black');
-            const elem = new ImageBackground_1.default(ImageBackground_1.BackgroundType.SolidColor, fill);
-            yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, elem));
+            // If a grid background,
+            if (node.classList.contains(BackgroundComponent_1.backgroundTypeToClassNameMap[BackgroundComponent_1.BackgroundType.Grid])) {
+                let foregroundStr;
+                let backgroundStr;
+                let gridStrokeWidthStr;
+                // If a group,
+                if (node.tagName.toLowerCase() === 'g') {
+                    // We expect exactly two children. One of these is the solid
+                    // background of the grid
+                    if (node.children.length !== 2) {
+                        yield this.addUnknownNode(node);
+                        return;
+                    }
+                    const background = node.children[0];
+                    const grid = node.children[1];
+                    backgroundStr = background.getAttribute('fill');
+                    foregroundStr = grid.getAttribute('stroke');
+                    gridStrokeWidthStr = grid.getAttribute('stroke-width');
+                }
+                else {
+                    backgroundStr = node.getAttribute('fill');
+                    foregroundStr = node.getAttribute('stroke');
+                    gridStrokeWidthStr = node.getAttribute('stroke-width');
+                }
+                // Default to a transparent background.
+                backgroundStr !== null && backgroundStr !== void 0 ? backgroundStr : (backgroundStr = Color4_1.default.transparent.toHexString());
+                // A grid must have a foreground color specified.
+                if (!foregroundStr) {
+                    yield this.addUnknownNode(node);
+                    return;
+                }
+                // Extract the grid size from the class name
+                let gridSize = undefined;
+                for (const className of node.classList) {
+                    if (className.startsWith(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix)) {
+                        const sizeStr = className.substring(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix.length);
+                        gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
+                    }
+                }
+                let gridStrokeWidth = undefined;
+                if (gridStrokeWidthStr) {
+                    gridStrokeWidth = parseFloat(gridStrokeWidthStr);
+                }
+                const backgroundColor = Color4_1.default.fromString(backgroundStr);
+                let foregroundColor = Color4_1.default.fromString(foregroundStr);
+                // Should the foreground color be determined automatically?
+                if (!node.classList.contains(BackgroundComponent_1.imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
+                    foregroundColor = undefined;
+                }
+                const elem = BackgroundComponent_1.default.ofGrid(backgroundColor, gridSize, foregroundColor, gridStrokeWidth);
+                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
+            }
+            // Otherwise, if just a <path/>, it's a solid color background.
+            else if (node.tagName.toLowerCase() === 'path') {
+                const fill = Color4_1.default.fromString((_c = (_b = node.getAttribute('fill')) !== null && _b !== void 0 ? _b : node.style.fill) !== null && _c !== void 0 ? _c : 'black');
+                const elem = new BackgroundComponent_1.default(BackgroundComponent_1.BackgroundType.SolidColor, fill);
+                yield ((_d = this.onAddComponent) === null || _d === void 0 ? void 0 : _d.call(this, elem));
+            }
+            else {
+                yield this.addUnknownNode(node);
+            }
         });
     }
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
@@ -348,10 +409,14 @@ class SVGLoader {
             let visitChildren = true;
             switch (node.tagName.toLowerCase()) {
                 case 'g':
-                    // Continue -- visit the node's children.
+                    if (node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) {
+                        yield this.addBackground(node);
+                        visitChildren = false;
+                    }
+                    // Otherwise, continue -- visit the node's children.
                     break;
                 case 'path':
-                    if (node.classList.contains(ImageBackground_1.imageBackgroundCSSClassName)) {
+                    if (node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) {
                         yield this.addBackground(node);
                     }
                     else {

package/dist/cjs/src/Viewport.d.ts

@@ -50,6 +50,8 @@ export declare class Viewport {
      */
     getScaleFactorToNearestPowerOfTen(): number;
     private getScaleFactorToNearestPowerOf;
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    static getGridSize(scaleFactor: number): number;
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;

package/dist/cjs/src/Viewport.js

@@ -104,10 +104,14 @@ class Viewport {
         const scaleFactor = this.getScaleFactor();
         return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
     }
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    static getGridSize(scaleFactor) {
+        return 50 / scaleFactor;
+    }
     snapToGrid(canvasPos) {
+        const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
         const snapCoordinate = (coordinate) => {
-            const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
-            const roundFactor = scaleFactor / 50;
+            const roundFactor = 1 / Viewport.getGridSize(scaleFactor);
             const snapped = Math.round(coordinate * roundFactor) / roundFactor;
             return snapped;
         };

package/dist/cjs/src/components/AbstractComponent.d.ts

@@ -26,13 +26,13 @@ export default abstract class AbstractComponent {
     /**
      * Attach data that can be used while exporting the component (e.g. to SVG).
      *
-     * This is intended for use by a {@link ImageLoader}.
+     * This is intended for use by an {@link ImageLoader}.
      */
     attachLoadSaveData(key: string, data: LoadSaveData): void;
     /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
-    /** @returns the bounding box of  */
+    /** @returns the bounding box of this. */
     getBBox(): Rect2;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;

package/dist/cjs/src/components/AbstractComponent.js

@@ -32,7 +32,7 @@ class AbstractComponent {
         }
     }
     // Returns a unique ID for this element.
-    // @see { @link lib!EditorImage.lookupElement }
+    // @see { @link EditorImage.lookupElement }
     getId() {
         return this.id;
     }
@@ -45,7 +45,7 @@ class AbstractComponent {
     /**
      * Attach data that can be used while exporting the component (e.g. to SVG).
      *
-     * This is intended for use by a {@link ImageLoader}.
+     * This is intended for use by an {@link ImageLoader}.
      */
     attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
@@ -60,7 +60,7 @@ class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of  */
+    /** @returns the bounding box of this. */
     getBBox() {
         return this.contentBBox;
     }

package/dist/cjs/src/components/{ImageBackground.d.ts → BackgroundComponent.d.ts}

@@ -11,32 +11,52 @@ import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
 export declare enum BackgroundType {
     SolidColor = 0,
-    None = 1
+    Grid = 1,
+    None = 2
 }
 export declare const imageBackgroundCSSClassName = "js-draw-image-background";
-export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+export declare const imageBackgroundGridSizeCSSPrefix = "js-draw-image-background-grid-";
+export declare const imageBackgroundNonAutomaticSecondaryColorCSSClassName = "js-draw-image-background-non-automatic-secondary-color";
+export declare const backgroundTypeToClassNameMap: {
+    1: string;
+    0: string;
+    2: string;
+};
+export default class BackgroundComponent extends AbstractComponent implements RestyleableComponent {
     private backgroundType;
     private mainColor;
     protected contentBBox: Rect2;
     private viewportSizeChangeListener;
+    private gridSize;
+    private gridStrokeWidth;
+    private secondaryColor;
     readonly isRestylableComponent: true;
     constructor(backgroundType: BackgroundType, mainColor: Color4);
+    static ofGrid(backgroundColor: Color4, gridSize?: number, gridColor?: Color4, gridStrokeWidth?: number): BackgroundComponent;
+    getBackgroundType(): BackgroundType;
+    getMainColor(): Color4;
+    getSecondaryColor(): Color4 | null;
+    getGridSize(): number;
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
     onAddToImage(image: EditorImage): void;
     onRemoveFromImage(): void;
     private recomputeBBox;
+    private generateGridPath;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     isSelectable(): boolean;
     isBackground(): boolean;
     protected serializeToJSON(): {
         mainColor: string;
+        secondaryColor: string | undefined;
         backgroundType: BackgroundType;
+        gridSize: number;
+        gridStrokeWidth: number;
     };
     protected applyTransformation(_affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;
-    static deserializeFromJSON(json: any): ImageBackground;
+    static deserializeFromJSON(json: any): BackgroundComponent;
 }