@ephox/acid - npm Package Compare versions

Comparing version 2.0.5 to 3.0.1

lib/main/ts/ephox/acid/api/colour/HexColour.js

@@ -23,3 +23,3 @@ import { Optional } from '@ephox/katamari';
     var hex = component.toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
+    return (hex.length === 1 ? '0' + hex : hex).toUpperCase();
 };
@@ -26,0 +26,0 @@ var fromRgba = function (rgbaColour) {

lib/main/ts/ephox/acid/api/Main.d.ts

@@ -5,3 +5,4 @@ import * as ColourPicker from '../gui/ColourPicker';
 import * as RgbaColour from './colour/RgbaColour';
-export { HexColour, HsvColour, RgbaColour, ColourPicker };
+import * as Transformations from './colour/Transformations';
+export { HexColour, HsvColour, RgbaColour, ColourPicker, Transformations };
 //# sourceMappingURL=Main.d.ts.map

lib/main/ts/ephox/acid/api/Main.js

@@ -5,3 +5,4 @@ import * as ColourPicker from '../gui/ColourPicker';
 import * as RgbaColour from './colour/RgbaColour';
-export { HexColour, HsvColour, RgbaColour, ColourPicker };
+import * as Transformations from './colour/Transformations';
+export { HexColour, HsvColour, RgbaColour, ColourPicker, Transformations };
 //# sourceMappingURL=Main.js.map

lib/main/ts/ephox/acid/gui/ColourEvents.d.ts

 import { CustomEvent, SliderTypes } from '@ephox/alloy';
+import { Hex } from '../api/colour/ColourTypes';
 declare const fieldsUpdate: string;
@@ -11,3 +12,6 @@ declare const sliderUpdate: string;
 }
+export interface FieldsUpdateEvent extends CustomEvent {
+    readonly hex: Hex;
+}
 export { fieldsUpdate, sliderUpdate, paletteUpdate };
 //# sourceMappingURL=ColourEvents.d.ts.map

lib/main/ts/ephox/acid/gui/ColourPicker.js

@@ -1,8 +0,7 @@
-import { AddEventsBehaviour, AlloyEvents, Behaviour, Composing, Keying, Memento, Sketcher } from '@ephox/alloy';
+import { AddEventsBehaviour, AlloyEvents, Behaviour, Composing, Keying, Memento, Sketcher, Slider } from '@ephox/alloy';
 import { FieldSchema } from '@ephox/boulder';
 import { Arr, Cell, Fun } from '@ephox/katamari';
-import * as HexColour from '../api/colour/HexColour';
 import * as HsvColour from '../api/colour/HsvColour';
 import * as RgbaColour from '../api/colour/RgbaColour';
-import { calcHex } from './Calculations';
+import * as Transformations from '../api/colour/Transformations';
 import * as ColourEvents from './ColourEvents';
@@ -16,12 +15,14 @@ import * as HueSlider from './components/HueSlider';
         var sbPalette = SaturationBrightnessPalette.paletteFactory(translate, getClass);
+        var hueSliderToDegrees = function (hue) { return (100 - hue) / 100 * 360; };
+        var hueDegreesToSlider = function (hue) { return 100 - (hue / 360) * 100; };
         var state = {
-            paletteRgba: Cell(RgbaColour.red)
+            paletteRgba: Cell(RgbaColour.red),
+            paletteHue: Cell(0)
         };
+        var memSlider = Memento.record(HueSlider.sliderFactory(translate, getClass));
         var memPalette = Memento.record(sbPalette.sketch({}));
         var memRgb = Memento.record(rgbForm.sketch({}));
-        var updatePalette = function (anyInSystem, hex) {
+        var updatePalette = function (anyInSystem, _hex, hue) {
             memPalette.getOpt(anyInSystem).each(function (palette) {
-                var rgba = RgbaColour.fromHex(hex);
-                state.paletteRgba.set(rgba);
-                sbPalette.setRgba(palette, rgba);
+                sbPalette.setHue(palette, hue);
             });
@@ -34,27 +35,52 @@ };
         };
-        var runUpdates = function (anyInSystem, hex, updates) {
+        var updateSlider = function (anyInSystem, _hex, hue) {
+            memSlider.getOpt(anyInSystem).each(function (slider) {
+                Slider.setValue(slider, { y: hueDegreesToSlider(hue) });
+            });
+        };
+        var updatePaletteThumb = function (anyInSystem, hex) {
+            memPalette.getOpt(anyInSystem).each(function (palette) {
+                sbPalette.setThumb(palette, hex);
+            });
+        };
+        var updateState = function (hex, hue) {
+            var rgba = RgbaColour.fromHex(hex);
+            state.paletteRgba.set(rgba);
+            state.paletteHue.set(hue);
+        };
+        var runUpdates = function (anyInSystem, hex, hue, updates) {
+            updateState(hex, hue);
             Arr.each(updates, function (update) {
-                update(anyInSystem, hex);
+                update(anyInSystem, hex, hue);
             });
         };
-        var paletteUpdates = function () {
+        var onPaletteUpdate = function () {
             var updates = [updateFields];
             return function (form, simulatedEvent) {
                 var value = simulatedEvent.event.value;
-                var oldRgb = state.paletteRgba.get();
-                var hsvColour = HsvColour.fromRgb(oldRgb);
-                var newHsvColour = HsvColour.hsvColour(hsvColour.hue, value.x, (100 - value.y));
-                var rgb = RgbaColour.fromHsv(newHsvColour);
-                var nuHex = HexColour.fromRgba(rgb);
-                runUpdates(form, nuHex, updates);
+                var oldHue = state.paletteHue.get();
+                var newHsv = HsvColour.hsvColour(oldHue, value.x, (100 - value.y));
+                var newHex = Transformations.hsvToHex(newHsv);
+                runUpdates(form, newHex, oldHue, updates);
             };
         };
-        var sliderUpdates = function () {
+        var onSliderUpdate = function () {
             var updates = [updatePalette, updateFields];
             return function (form, simulatedEvent) {
-                var value = simulatedEvent.event.value;
-                var hex = calcHex(value.y);
-                runUpdates(form, hex, updates);
+                var hue = hueSliderToDegrees(simulatedEvent.event.value.y);
+                var oldRgb = state.paletteRgba.get();
+                var oldHsv = HsvColour.fromRgb(oldRgb);
+                var newHsv = HsvColour.hsvColour(hue, oldHsv.saturation, oldHsv.value);
+                var newHex = Transformations.hsvToHex(newHsv);
+                runUpdates(form, newHex, hue, updates);
             };
         };
+        var onFieldsUpdate = function () {
+            var updates = [updatePalette, updateSlider, updatePaletteThumb];
+            return function (form, simulatedEvent) {
+                var hex = simulatedEvent.event.hex;
+                var hsv = Transformations.hexToHsv(hex);
+                runUpdates(form, hex, hsv.hue, updates);
+            };
+        };
         return {
@@ -65,3 +91,3 @@ uid: detail.uid,
                 memPalette.asSpec(),
-                HueSlider.sliderFactory(translate, getClass),
+                memSlider.asSpec(),
                 memRgb.asSpec()
@@ -71,5 +97,5 @@ ],
                 AddEventsBehaviour.config('colour-picker-events', [
-                    // AlloyEvents.run(ColourEvents.fieldsUpdate(), fieldsUpdates()),
-                    AlloyEvents.run(ColourEvents.paletteUpdate, paletteUpdates()),
-                    AlloyEvents.run(ColourEvents.sliderUpdate, sliderUpdates())
+                    AlloyEvents.run(ColourEvents.fieldsUpdate, onFieldsUpdate()),
+                    AlloyEvents.run(ColourEvents.paletteUpdate, onPaletteUpdate()),
+                    AlloyEvents.run(ColourEvents.sliderUpdate, onSliderUpdate())
                 ]),
@@ -76,0 +102,0 @@ Composing.config({

lib/main/ts/ephox/acid/gui/components/RgbForm.js

@@ -170,2 +170,5 @@ import { __assign } from "tslib";
                 var hex = copyRgbToHex(form, rgb);
+                AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate, {
+                    hex: hex
+                });
                 updatePreview(form, hex);
@@ -172,0 +175,0 @@ });

lib/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.d.ts

 import { AlloyComponent, Sketcher } from '@ephox/alloy';
-import { Rgba } from '../../api/colour/ColourTypes';
+import { Hex } from '../../api/colour/ColourTypes';
 export interface SaturationBrightnessPaletteDetail extends Sketcher.SingleSketchDetail {
@@ -8,3 +8,4 @@ }
 export interface SaturationBrightnessPaletteSketcher extends Sketcher.SingleSketch<SaturationBrightnessPaletteSpec> {
-    setRgba: (slider: AlloyComponent, colour: Rgba) => void;
+    setHue: (slider: AlloyComponent, hue: number) => void;
+    setThumb: (slider: AlloyComponent, hex: Hex) => void;
 }
@@ -11,0 +12,0 @@ declare const paletteFactory: (_translate: (key: string) => string, getClass: (key: string) => string) => SaturationBrightnessPaletteSketcher;

lib/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.js

 import { AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, Slider } from '@ephox/alloy';
 import { Fun, Optional } from '@ephox/katamari';
+import * as HsvColour from '../../api/colour/HsvColour';
 import * as RgbaColour from '../../api/colour/RgbaColour';
@@ -44,7 +45,12 @@ import * as ColourEvents from '../ColourEvents';
     };
-    var setSliderColour = function (slider, rgba) {
-        // Very open to a better way of doing this.
+    var setPaletteHue = function (slider, hue) {
         var canvas = slider.components()[0].element.dom;
+        var hsv = HsvColour.hsvColour(hue, 100, 100);
+        var rgba = RgbaColour.fromHsv(hsv);
         setColour(canvas, RgbaColour.toString(rgba));
     };
+    var setPaletteThumb = function (slider, hex) {
+        var hsv = HsvColour.fromRgb(RgbaColour.fromHex(hex));
+        Slider.setValue(slider, { x: hsv.saturation, y: 100 - hsv.value });
+    };
     var factory = function (_detail) {
@@ -80,3 +86,3 @@ var getInitialValue = Fun.constant({
                 mode: 'xy',
-                getInitialValue: getInitialValue
+                getInitialValue: getInitialValue,
             },
@@ -98,4 +104,7 @@ rounded: false,
         apis: {
-            setRgba: function (_apis, slider, rgba) {
-                setSliderColour(slider, rgba);
+            setHue: function (_apis, slider, hue) {
+                setPaletteHue(slider, hue);
+            },
+            setThumb: function (_apis, slider, hex) {
+                setPaletteThumb(slider, hex);
             }
@@ -102,0 +111,0 @@ },

lib/test/ts/atomic/ConversionsTest.js

@@ -10,4 +10,4 @@ import { assert, UnitTest } from '@ephox/bedrock-client';
     var hexWhite = HexColour.fromRgba(rgbaWhite);
-    assert.eq('ffffff', hexWhite.value);
+    assert.eq('FFFFFF', hexWhite.value);
 });
 //# sourceMappingURL=ConversionsTest.js.map

package.json

 {
   "name": "@ephox/acid",
   "description": "Color library including Alloy UI component for a color picker",
-  "version": "2.0.5",
+  "version": "3.0.1",
   "repository": {
@@ -10,6 +10,6 @@ "type": "git",
   "dependencies": {
-    "@ephox/alloy": "^8.1.3",
-    "@ephox/boulder": "^5.0.5",
-    "@ephox/katamari": "^7.1.3",
-    "@ephox/sugar": "^7.1.1",
+    "@ephox/alloy": "^8.2.1",
+    "@ephox/boulder": "^5.0.7",
+    "@ephox/katamari": "^7.2.1",
+    "@ephox/sugar": "^7.1.3",
     "tslib": "^2.0.0"
@@ -25,3 +25,3 @@ },
     "tsconfig.json",
-    "readme.md",
+    "README.md",
     "LEGAL.txt",
@@ -40,3 +40,3 @@ "CHANGELOG.txt",
   },
-  "gitHead": "d5160f5bf01a61fa4ae91656f4eaac1cf5654492"
+  "gitHead": "17afb1a332b0093cbc017a0d40b1651b55b2a196"
 }

src/main/ts/ephox/acid/api/colour/HexColour.ts

@@ -32,3 +32,3 @@ import { Optional } from '@ephox/katamari';
   const hex = component.toString(16);
-  return hex.length === 1 ? '0' + hex : hex;
+  return (hex.length === 1 ? '0' + hex : hex).toUpperCase();
 };
@@ -35,0 +35,0 @@

src/main/ts/ephox/acid/api/Main.ts

@@ -5,2 +5,3 @@ import * as ColourPicker from '../gui/ColourPicker';
 import * as RgbaColour from './colour/RgbaColour';
+import * as Transformations from './colour/Transformations';
 
@@ -11,3 +12,4 @@ export {
   RgbaColour,
-  ColourPicker
+  ColourPicker,
+  Transformations
 };

src/main/ts/ephox/acid/gui/ColourEvents.ts

 import { CustomEvent, SliderTypes } from '@ephox/alloy';
 import { Id } from '@ephox/katamari';
+import { Hex } from '../api/colour/ColourTypes';
 
@@ -16,2 +17,6 @@ const fieldsUpdate = Id.generate('rgb-hex-update');
 
+export interface FieldsUpdateEvent extends CustomEvent {
+  readonly hex: Hex;
+}
+
 export {
@@ -18,0 +23,0 @@ fieldsUpdate,

src/main/ts/ephox/acid/gui/ColourPicker.ts

 import {
-  AddEventsBehaviour, AlloyComponent, AlloyEvents, Behaviour, Composing, Keying, Memento, RawDomSchema, SimulatedEvent, Sketcher
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, Behaviour, Composing, Keying, Memento, RawDomSchema, SimulatedEvent, Sketcher, Slider
 } from '@ephox/alloy';
@@ -7,6 +7,5 @@ import { FieldSchema } from '@ephox/boulder';
 import { Hex } from '../api/colour/ColourTypes';
-import * as HexColour from '../api/colour/HexColour';
 import * as HsvColour from '../api/colour/HsvColour';
 import * as RgbaColour from '../api/colour/RgbaColour';
-import { calcHex } from './Calculations';
+import * as Transformations from '../api/colour/Transformations';
 import * as ColourEvents from './ColourEvents';
@@ -40,6 +39,14 @@ import * as HueSlider from './components/HueSlider';
 
+    const hueSliderToDegrees = (hue: number): number => (100 - hue) / 100 * 360;
+    const hueDegreesToSlider = (hue: number): number => 100 - (hue / 360) * 100;
+
     const state = {
-      paletteRgba: Cell(RgbaColour.red)
+      paletteRgba: Cell(RgbaColour.red),
+      paletteHue: Cell(0)
     };
 
+    const memSlider = Memento.record(
+      HueSlider.sliderFactory(translate, getClass)
+    );
+
     const memPalette = Memento.record(
@@ -52,7 +59,5 @@ sbPalette.sketch({})
 
-    const updatePalette = (anyInSystem: AlloyComponent, hex: Hex) => {
+    const updatePalette = (anyInSystem: AlloyComponent, _hex: Hex, hue: number) => {
       memPalette.getOpt(anyInSystem).each((palette) => {
-        const rgba = RgbaColour.fromHex(hex);
-        state.paletteRgba.set(rgba);
-        sbPalette.setRgba(palette, rgba);
+        sbPalette.setHue(palette, hue);
       });
@@ -67,30 +72,62 @@ };
 
-    const runUpdates = (anyInSystem: AlloyComponent, hex: Hex, updates: ((anyInSystem: AlloyComponent, hex: Hex) => void)[]) => {
+    const updateSlider = (anyInSystem: AlloyComponent, _hex: Hex, hue: number) => {
+      memSlider.getOpt(anyInSystem).each((slider) => {
+        Slider.setValue(slider, { y: hueDegreesToSlider(hue) });
+      });
+    };
+
+    const updatePaletteThumb = (anyInSystem: AlloyComponent, hex: Hex) => {
+      memPalette.getOpt(anyInSystem).each((palette) => {
+        sbPalette.setThumb(palette, hex);
+      });
+    };
+
+    const updateState = (hex: Hex, hue: number) => {
+      const rgba = RgbaColour.fromHex(hex);
+      state.paletteRgba.set(rgba);
+      state.paletteHue.set(hue);
+    };
+
+    const runUpdates = (anyInSystem: AlloyComponent, hex: Hex, hue: number, updates: ((anyInSystem: AlloyComponent, hex: Hex, hue: number) => void)[]) => {
+      updateState(hex, hue);
       Arr.each(updates, (update) => {
-        update(anyInSystem, hex);
+        update(anyInSystem, hex, hue);
       });
     };
 
-    const paletteUpdates = () => {
+    const onPaletteUpdate = () => {
       const updates = [ updateFields ];
       return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.PaletteUpdateEvent>) => {
         const value = simulatedEvent.event.value;
-        const oldRgb = state.paletteRgba.get();
-        const hsvColour = HsvColour.fromRgb(oldRgb);
-        const newHsvColour = HsvColour.hsvColour(hsvColour.hue, value.x, (100 - value.y));
-        const rgb = RgbaColour.fromHsv(newHsvColour);
-        const nuHex = HexColour.fromRgba(rgb);
-        runUpdates(form, nuHex, updates);
+        const oldHue = state.paletteHue.get();
+        const newHsv = HsvColour.hsvColour(oldHue, value.x, (100 - value.y));
+        const newHex = Transformations.hsvToHex(newHsv);
+
+        runUpdates(form, newHex, oldHue, updates);
       };
     };
 
-    const sliderUpdates = () => {
+    const onSliderUpdate = () => {
       const updates = [ updatePalette, updateFields ];
       return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.SliderUpdateEvent>) => {
-        const value = simulatedEvent.event.value;
-        const hex = calcHex(value.y);
-        runUpdates(form, hex, updates);
+        const hue = hueSliderToDegrees(simulatedEvent.event.value.y);
+        const oldRgb = state.paletteRgba.get();
+        const oldHsv = HsvColour.fromRgb(oldRgb);
+        const newHsv = HsvColour.hsvColour(hue, oldHsv.saturation, oldHsv.value);
+        const newHex = Transformations.hsvToHex(newHsv);
+
+        runUpdates(form, newHex, hue, updates);
       };
     };
 
+    const onFieldsUpdate = () => {
+      const updates = [ updatePalette, updateSlider, updatePaletteThumb ];
+      return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.FieldsUpdateEvent>) => {
+        const hex = simulatedEvent.event.hex;
+        const hsv = Transformations.hexToHsv(hex);
+
+        runUpdates(form, hex, hsv.hue, updates);
+      };
+    };
+
     return {
@@ -101,3 +138,3 @@ uid: detail.uid,
         memPalette.asSpec(),
-        HueSlider.sliderFactory(translate, getClass),
+        memSlider.asSpec(),
         memRgb.asSpec()
@@ -108,5 +145,5 @@ ],
         AddEventsBehaviour.config('colour-picker-events', [
-          // AlloyEvents.run(ColourEvents.fieldsUpdate(), fieldsUpdates()),
-          AlloyEvents.run(ColourEvents.paletteUpdate, paletteUpdates()),
-          AlloyEvents.run(ColourEvents.sliderUpdate, sliderUpdates())
+          AlloyEvents.run(ColourEvents.fieldsUpdate, onFieldsUpdate()),
+          AlloyEvents.run(ColourEvents.paletteUpdate, onPaletteUpdate()),
+          AlloyEvents.run(ColourEvents.sliderUpdate, onSliderUpdate())
         ]),
@@ -113,0 +150,0 @@ Composing.config({

src/main/ts/ephox/acid/gui/components/RgbForm.ts

@@ -243,2 +243,5 @@ import {
         const hex = copyRgbToHex(form, rgb);
+        AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate, {
+          hex
+        });
         updatePreview(form, hex);
@@ -245,0 +248,0 @@ });

src/main/ts/ephox/acid/gui/components/SaturationBrightnessPalette.ts

 import { AlloyComponent, AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, SketchSpec, Slider, SliderTypes, UiSketcher } from '@ephox/alloy';
 import { Fun, Optional } from '@ephox/katamari';
-import { Rgba } from '../../api/colour/ColourTypes';
+import { Hex } from '../../api/colour/ColourTypes';
+import * as HsvColour from '../../api/colour/HsvColour';
 import * as RgbaColour from '../../api/colour/RgbaColour';
@@ -16,3 +17,4 @@ import * as ColourEvents from '../ColourEvents';
 export interface SaturationBrightnessPaletteSketcher extends Sketcher.SingleSketch<SaturationBrightnessPaletteSpec> {
-  setRgba: (slider: AlloyComponent, colour: Rgba) => void;
+  setHue: (slider: AlloyComponent, hue: number) => void;
+  setThumb: (slider: AlloyComponent, hex: Hex) => void;
 }
@@ -65,8 +67,14 @@
 
-  const setSliderColour = (slider: AlloyComponent, rgba: Rgba): void => {
-    // Very open to a better way of doing this.
+  const setPaletteHue = (slider: AlloyComponent, hue: number): void => {
     const canvas = slider.components()[0].element.dom;
+    const hsv = HsvColour.hsvColour(hue, 100, 100);
+    const rgba = RgbaColour.fromHsv(hsv);
     setColour(canvas, RgbaColour.toString(rgba));
   };
 
+  const setPaletteThumb = (slider: AlloyComponent, hex: Hex): void => {
+    const hsv = HsvColour.fromRgb(RgbaColour.fromHex(hex));
+    Slider.setValue(slider, { x: hsv.saturation, y: 100 - hsv.value });
+  };
+
   const factory: UiSketcher.SingleSketchFactory<SaturationBrightnessPaletteDetail, SaturationBrightnessPaletteSpec> = (_detail): SketchSpec => {
@@ -106,3 +114,3 @@ const getInitialValue = Fun.constant({
         mode: 'xy',
-        getInitialValue
+        getInitialValue,
       },
@@ -125,4 +133,7 @@ rounded: false,
     apis: {
-      setRgba: (_apis: {}, slider: AlloyComponent, rgba: Rgba) => {
-        setSliderColour(slider, rgba);
+      setHue: (_apis: {}, slider: AlloyComponent, hue: number) => {
+        setPaletteHue(slider, hue);
+      },
+      setThumb: (_apis: {}, slider: AlloyComponent, hex: Hex) => {
+        setPaletteThumb(slider, hex);
       }
@@ -129,0 +140,0 @@ },

src/test/ts/atomic/ConversionsTest.ts

@@ -13,3 +13,3 @@ import { assert, UnitTest } from '@ephox/bedrock-client';
   const hexWhite = HexColour.fromRgba(rgbaWhite);
-  assert.eq('ffffff', hexWhite.value);
+  assert.eq('FFFFFF', hexWhite.value);
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153935

increased by18.28%

Number of package files

80

increased by6.67%

Lines of code

2063

increased by19.11%

Dependency changes

• Updated@ephox/alloy@^8.2.1

• Updated@ephox/boulder@^5.0.7

• Updated@ephox/katamari@^7.2.1

• Updated@ephox/sugar@^7.1.3