@babylonjs/inspector 5.8.2 → 5.10.0

package/dist/babylon.inspector.bundle.max.js

@@ -120,7 +120,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "#canvas-zone {\n  display: grid;\n  grid-template-columns: 100%;\n  grid-template-rows: 1fr 30px 10px 40px;\n  overflow: hidden;\n  position: relative; }\n  #canvas-zone #graph {\n    grid-column: 1;\n    grid-row: 1;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 100%;\n    overflow: hidden;\n    position: relative; }\n    #canvas-zone #graph #svg-graph-grid {\n      grid-column: 1;\n      grid-row: 1;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 1; }\n      #canvas-zone #graph #svg-graph-grid:focus {\n        outline: none; }\n    #canvas-zone #graph #svg-graph-horizontal {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      pointer-events: none;\n      z-index: 1; }\n      #canvas-zone #graph #svg-graph-horizontal:focus {\n        outline: none; }\n    #canvas-zone #graph #dark-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      background: #111111;\n      opacity: 0.2;\n      pointer-events: none;\n      position: absolute; }\n    #canvas-zone #graph #block-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      width: 40px;\n      height: 100%;\n      background: #222222;\n      z-index: 1; }\n    #canvas-zone #graph #svg-graph-curves {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      z-index: 2; }\n      #canvas-zone #graph #svg-graph-curves:focus {\n        outline: none; }\n    #canvas-zone #graph #selection-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      width: calc(100% - 40px);\n      height: 100%;\n      pointer-events: none;\n      position: absolute;\n      left: 40px;\n      visibility: hidden;\n      border: 1px dashed white; }\n  #canvas-zone #range-frame-bar {\n    grid-column: 1;\n    grid-row: 4;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    pointer-events: none;\n    display: grid;\n    grid-template-rows: 100%;\n    grid-template-columns: 100%;\n    pointer-events: none;\n    user-select: none; }\n    #canvas-zone #range-frame-bar #svg-range-frames {\n      grid-column: 1;\n      grid-row: 1;\n      width: 100%;\n      height: 100%; }\n  #canvas-zone #frame-bar {\n    grid-column: 1;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    pointer-events: none;\n    display: grid;\n    grid-template-rows: 100%;\n    grid-template-columns: 40px 1fr; }\n    #canvas-zone #frame-bar #angle-unit {\n      grid-column: 1;\n      grid-row: 1;\n      background: #111111; }\n    #canvas-zone #frame-bar #frames {\n      grid-column: 1 / 3;\n      grid-row: 1;\n      width: 100%;\n      height: 100%;\n      display: grid;\n      grid-template-rows: 100%;\n      grid-template-columns: 100%; }\n      #canvas-zone #frame-bar #frames #svg-frames {\n        margin-left: 40px;\n        grid-column: 1;\n        grid-row: 1;\n        width: calc(100% - 40px);\n        height: 100%; }\n  #canvas-zone #play-head-control {\n    grid-column: 1;\n    grid-row: 2;\n    position: absolute;\n    height: 30px;\n    left: 40px;\n    width: calc(100% - 40px); }\n  #canvas-zone #play-head {\n    grid-column: 1;\n    grid-row: 1 / 3;\n    position: absolute;\n    top: 0;\n    height: calc(100% - 5px);\n    width: 22px;\n    margin-left: 40px;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 1fr 22px;\n    transform: translateX(-50%);\n    pointer-events: none;\n    z-index: 3; }\n    #canvas-zone #play-head #play-head-bar {\n      grid-row: 1;\n      grid-column: 1;\n      justify-self: center;\n      width: 1.5px;\n      background: #ffffff;\n      height: 100%;\n      pointer-events: none; }\n    #canvas-zone #play-head #play-head-circle {\n      grid-row: 2;\n      grid-column: 1;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      background: #ffffff;\n      font-family: \"acumin-pro-condensed\";\n      font-size: 8pt;\n      display: grid;\n      align-content: center;\n      justify-content: center;\n      color: #555555;\n      cursor: pointer; }\n  #canvas-zone #angle-mode {\n    grid-column: 1;\n    grid-row: 2;\n    width: 40px;\n    height: 100%;\n    z-index: 1;\n    background: #222222; }\n", "",{"version":3,"sources":["webpack://./../../../dev/inspector/dist/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/canvas.scss"],"names":[],"mappings":"AAAA;EACI,aAAa;EACb,2BAA2B;EAC3B,sCAAsC;EACtC,gBAAgB;EAChB,kBAAkB,EAAA;EALtB;IAQQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,2BAA2B;IAC3B,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB,EAAA;IAjB1B;MAoBY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY;MACZ,oBAAoB;MAKpB,UAAU,EAAA;MA7BtB;QA2BgB,aAAa,EAAA;IA3B7B;MAiCY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,oBAAoB;MAKpB,UAAU,EAAA;MA3CtB;QAyCgB,aAAa,EAAA;IAzC7B;MA+CY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,mBAAmB;MACnB,YAAY;MACZ,oBAAoB;MACpB,kBAAkB,EAAA;IAvD9B;MA2DY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY;MACZ,mBAAmB;MACnB,UAAU,EAAA;IAhEtB;MAoEY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,UAAU,EAAA;MAzEtB;QA4EgB,aAAa,EAAA;IA5E7B;MAiFY,cAAc;MACd,WAAW;MACX,wBAAwB;MACxB,YAAY;MACZ,oBAAoB;MACpB,kBAAkB;MAClB,UAAU;MACV,kBAAkB;MAElB,wBAAwB,EAAA;EA1FpC;IA+FQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,oBAAoB;IACpB,aAAa;IACb,wBAAwB;IACxB,2BAA2B;IAC3B,oBAAoB;IACpB,iBAAiB,EAAA;IAzGzB;MA4GY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY,EAAA;EA/GxB;IAoHQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,oBAAoB;IAEpB,aAAa;IACb,wBAAwB;IACxB,+BAA+B,EAAA;IA7HvC;MAgIY,cAAc;MACd,WAAW;MACX,mBAAmB,EAAA;IAlI/B;MAsIY,kBAAkB;MAElB,WAAW;MACX,WAAW;MACX,YAAY;MACZ,aAAa;MACb,wBAAwB;MACxB,2BAA2B,EAAA;MA7IvC;QAgJgB,iBAAiB;QACjB,cAAc;QACd,WAAW;QACX,wBAAwB;QACxB,YAAY,EAAA;EApJ5B;IA0JQ,cAAc;IACd,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,UAAU;IACV,wBAAwB,EAAA;EA/JhC;IAmKQ,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,MAAM;IACN,wBAAwB;IACxB,WAAW;IACX,iBAAiB;IACjB,aAAa;IACb,2BAA2B;IAC3B,4BAA4B;IAC5B,2BAA2B;IAC3B,oBAAoB;IACpB,UAAU,EAAA;IA/KlB;MAkLY,WAAW;MACX,cAAc;MACd,oBAAoB;MACpB,YAAY;MACZ,mBAAmB;MACnB,YAAY;MACZ,oBAAoB,EAAA;IAxLhC;MA4LY,WAAW;MACX,cAAc;MACd,WAAW;MACX,YAAY;MACZ,kBAAkB;MAClB,mBAAmB;MACnB,mCAAmC;MACnC,cAAc;MACd,aAAa;MACb,qBAAqB;MACrB,uBAAuB;MACvB,cAAc;MACd,eAAe,EAAA;EAxM3B;IA6MQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,UAAU;IACV,mBAAmB,EAAA","sourcesContent":["#canvas-zone {\r\n    display: grid;\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 1fr 30px 10px 40px;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    #graph {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 100%;\r\n        overflow: hidden;\r\n        position: relative;\r\n\r\n        #svg-graph-grid {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n            z-index: 1;\r\n        }\r\n\r\n        #svg-graph-horizontal {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            pointer-events: none;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n            z-index: 1;\r\n        }\r\n\r\n        #dark-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            background: #111111;\r\n            opacity: 0.2;\r\n            pointer-events: none;\r\n            position: absolute;\r\n        }\r\n\r\n        #block-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 40px;\r\n            height: 100%;\r\n            background: #222222;\r\n            z-index: 1;\r\n        }\r\n\r\n        #svg-graph-curves {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            z-index: 2;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n        }\r\n\r\n        #selection-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 40px;\r\n            visibility: hidden;\r\n\r\n            border: 1px dashed white;\r\n        }\r\n    }\r\n\r\n    #range-frame-bar {\r\n        grid-column: 1;\r\n        grid-row: 4;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        pointer-events: none;\r\n        display: grid;\r\n        grid-template-rows: 100%;\r\n        grid-template-columns: 100%;\r\n        pointer-events: none;\r\n        user-select: none;\r\n\r\n        #svg-range-frames {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n    }\r\n\r\n    #frame-bar {\r\n        grid-column: 1;\r\n        grid-row: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        pointer-events: none;\r\n\r\n        display: grid;\r\n        grid-template-rows: 100%;\r\n        grid-template-columns: 40px 1fr;\r\n\r\n        #angle-unit {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            background: #111111;\r\n        }\r\n\r\n        #frames {\r\n            grid-column: 1 / 3;\r\n\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n            display: grid;\r\n            grid-template-rows: 100%;\r\n            grid-template-columns: 100%;\r\n\r\n            #svg-frames {\r\n                margin-left: 40px;\r\n                grid-column: 1;\r\n                grid-row: 1;\r\n                width: calc(100% - 40px);\r\n                height: 100%;\r\n            }\r\n        }\r\n    }\r\n\r\n    #play-head-control {\r\n        grid-column: 1;\r\n        grid-row: 2;\r\n        position: absolute;\r\n        height: 30px;\r\n        left: 40px;\r\n        width: calc(100% - 40px);\r\n    }\r\n\r\n    #play-head {\r\n        grid-column: 1;\r\n        grid-row: 1 / 3;\r\n        position: absolute;\r\n        top: 0;\r\n        height: calc(100% - 5px);\r\n        width: 22px;\r\n        margin-left: 40px;\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 1fr 22px;\r\n        transform: translateX(-50%);\r\n        pointer-events: none;\r\n        z-index: 3;\r\n\r\n        #play-head-bar {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            justify-self: center;\r\n            width: 1.5px;\r\n            background: #ffffff;\r\n            height: 100%;\r\n            pointer-events: none;\r\n        }\r\n\r\n        #play-head-circle {\r\n            grid-row: 2;\r\n            grid-column: 1;\r\n            width: 22px;\r\n            height: 22px;\r\n            border-radius: 50%;\r\n            background: #ffffff;\r\n            font-family: \"acumin-pro-condensed\";\r\n            font-size: 8pt;\r\n            display: grid;\r\n            align-content: center;\r\n            justify-content: center;\r\n            color: #555555;\r\n            cursor: pointer;\r\n        }\r\n    }\r\n\r\n    #angle-mode {\r\n        grid-column: 1;\r\n        grid-row: 2;\r\n        width: 40px;\r\n        height: 100%;\r\n        z-index: 1;\r\n        background: #222222;\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, "#canvas-zone {\n  display: grid;\n  grid-template-columns: 100%;\n  grid-template-rows: 30px 1fr 10px 40px;\n  overflow: hidden;\n  position: relative; }\n  #canvas-zone #graph {\n    grid-column: 1;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 100%;\n    overflow: hidden;\n    position: relative; }\n    #canvas-zone #graph #svg-graph-grid {\n      grid-column: 1;\n      grid-row: 1;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 1; }\n      #canvas-zone #graph #svg-graph-grid:focus {\n        outline: none; }\n    #canvas-zone #graph #svg-graph-horizontal {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      pointer-events: none;\n      z-index: 1; }\n      #canvas-zone #graph #svg-graph-horizontal:focus {\n        outline: none; }\n    #canvas-zone #graph #dark-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      background: #111111;\n      opacity: 0.2;\n      pointer-events: none;\n      position: absolute; }\n    #canvas-zone #graph #block-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      width: 40px;\n      height: 100%;\n      background: #222222;\n      z-index: 1; }\n    #canvas-zone #graph #svg-graph-curves {\n      grid-column: 1;\n      grid-row: 1;\n      margin-left: 40px;\n      width: calc(100% - 40px);\n      height: 100%;\n      z-index: 2; }\n      #canvas-zone #graph #svg-graph-curves:focus {\n        outline: none; }\n    #canvas-zone #graph #selection-rectangle {\n      grid-column: 1;\n      grid-row: 1;\n      width: calc(100% - 40px);\n      height: 100%;\n      pointer-events: none;\n      position: absolute;\n      left: 40px;\n      visibility: hidden;\n      border: 1px dashed white; }\n  #canvas-zone #range-frame-bar {\n    grid-column: 1;\n    grid-row: 4;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    pointer-events: none;\n    display: grid;\n    grid-template-rows: 100%;\n    grid-template-columns: 100%;\n    pointer-events: none;\n    user-select: none; }\n    #canvas-zone #range-frame-bar #svg-range-frames {\n      grid-column: 1;\n      grid-row: 1;\n      width: 100%;\n      height: 100%; }\n  #canvas-zone #frame-bar {\n    grid-column: 1;\n    grid-row: 1;\n    width: 100%;\n    height: 100%;\n    background: #222222;\n    pointer-events: none;\n    display: grid;\n    grid-template-rows: 100%;\n    grid-template-columns: 40px 1fr; }\n    #canvas-zone #frame-bar #angle-unit {\n      grid-column: 1;\n      grid-row: 1;\n      background: #111111; }\n    #canvas-zone #frame-bar #frames {\n      grid-column: 1 / 3;\n      grid-row: 1;\n      width: 100%;\n      height: 100%;\n      display: grid;\n      grid-template-rows: 100%;\n      grid-template-columns: 100%; }\n      #canvas-zone #frame-bar #frames #svg-frames {\n        margin-left: 40px;\n        grid-column: 1;\n        grid-row: 1;\n        width: calc(100% - 40px);\n        height: 100%; }\n  #canvas-zone #play-head-control {\n    grid-column: 1;\n    grid-row: 1;\n    position: absolute;\n    height: 30px;\n    left: 40px;\n    width: calc(100% - 40px); }\n  #canvas-zone #play-head-control-2 {\n    grid-column: 1;\n    grid-row: 4;\n    position: absolute;\n    height: 30px;\n    left: 0px;\n    width: 100%; }\n  #canvas-zone #play-head {\n    grid-column: 1;\n    grid-row: 1 / 3;\n    position: absolute;\n    top: 0;\n    height: calc(100% - 5px);\n    width: 22px;\n    margin-left: 40px;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 22px 1fr;\n    transform: translateX(-50%);\n    pointer-events: none;\n    z-index: 3; }\n    #canvas-zone #play-head #play-head-bar {\n      grid-row: 2;\n      grid-column: 1;\n      justify-self: center;\n      width: 1.5px;\n      background: #ffffff;\n      height: 100%;\n      pointer-events: none; }\n    #canvas-zone #play-head #play-head-circle {\n      grid-row: 1;\n      grid-column: 1;\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      background: #ffffff;\n      font-family: \"acumin-pro-condensed\";\n      font-size: 8pt;\n      display: grid;\n      align-content: center;\n      justify-content: center;\n      color: #555555;\n      cursor: pointer; }\n  #canvas-zone #angle-mode {\n    grid-column: 1;\n    grid-row: 1;\n    width: 40px;\n    height: 100%;\n    z-index: 1;\n    background: #222222; }\n", "",{"version":3,"sources":["webpack://./../../../dev/inspector/dist/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/canvas.scss"],"names":[],"mappings":"AAAA;EACI,aAAa;EACb,2BAA2B;EAC3B,sCAAsC;EACtC,gBAAgB;EAChB,kBAAkB,EAAA;EALtB;IAQQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,2BAA2B;IAC3B,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB,EAAA;IAjB1B;MAoBY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY;MACZ,oBAAoB;MAKpB,UAAU,EAAA;MA7BtB;QA2BgB,aAAa,EAAA;IA3B7B;MAiCY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,oBAAoB;MAKpB,UAAU,EAAA;MA3CtB;QAyCgB,aAAa,EAAA;IAzC7B;MA+CY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,mBAAmB;MACnB,YAAY;MACZ,oBAAoB;MACpB,kBAAkB,EAAA;IAvD9B;MA2DY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY;MACZ,mBAAmB;MACnB,UAAU,EAAA;IAhEtB;MAoEY,cAAc;MACd,WAAW;MACX,iBAAiB;MACjB,wBAAwB;MACxB,YAAY;MACZ,UAAU,EAAA;MAzEtB;QA4EgB,aAAa,EAAA;IA5E7B;MAiFY,cAAc;MACd,WAAW;MACX,wBAAwB;MACxB,YAAY;MACZ,oBAAoB;MACpB,kBAAkB;MAClB,UAAU;MACV,kBAAkB;MAElB,wBAAwB,EAAA;EA1FpC;IA+FQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,oBAAoB;IACpB,aAAa;IACb,wBAAwB;IACxB,2BAA2B;IAC3B,oBAAoB;IACpB,iBAAiB,EAAA;IAzGzB;MA4GY,cAAc;MACd,WAAW;MACX,WAAW;MACX,YAAY,EAAA;EA/GxB;IAoHQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,oBAAoB;IAEpB,aAAa;IACb,wBAAwB;IACxB,+BAA+B,EAAA;IA7HvC;MAgIY,cAAc;MACd,WAAW;MACX,mBAAmB,EAAA;IAlI/B;MAsIY,kBAAkB;MAElB,WAAW;MACX,WAAW;MACX,YAAY;MACZ,aAAa;MACb,wBAAwB;MACxB,2BAA2B,EAAA;MA7IvC;QAgJgB,iBAAiB;QACjB,cAAc;QACd,WAAW;QACX,wBAAwB;QACxB,YAAY,EAAA;EApJ5B;IA0JQ,cAAc;IACd,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,UAAU;IACV,wBAAwB,EAAA;EA/JhC;IAmKQ,cAAc;IACd,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,SAAS;IACT,WAAW,EAAA;EAxKnB;IA4KQ,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,MAAM;IACN,wBAAwB;IACxB,WAAW;IACX,iBAAiB;IACjB,aAAa;IACb,2BAA2B;IAC3B,4BAA4B;IAC5B,2BAA2B;IAC3B,oBAAoB;IACpB,UAAU,EAAA;IAxLlB;MA2LY,WAAW;MACX,cAAc;MACd,oBAAoB;MACpB,YAAY;MACZ,mBAAmB;MACnB,YAAY;MACZ,oBAAoB,EAAA;IAjMhC;MAqMY,WAAW;MACX,cAAc;MACd,WAAW;MACX,YAAY;MACZ,kBAAkB;MAClB,mBAAmB;MACnB,mCAAmC;MACnC,cAAc;MACd,aAAa;MACb,qBAAqB;MACrB,uBAAuB;MACvB,cAAc;MACd,eAAe,EAAA;EAjN3B;IAsNQ,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;IACZ,UAAU;IACV,mBAAmB,EAAA","sourcesContent":["#canvas-zone {\r\n    display: grid;\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 30px 1fr 10px 40px;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    #graph {\r\n        grid-column: 1;\r\n        grid-row: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 100%;\r\n        overflow: hidden;\r\n        position: relative;\r\n\r\n        #svg-graph-grid {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n            z-index: 1;\r\n        }\r\n\r\n        #svg-graph-horizontal {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            pointer-events: none;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n            z-index: 1;\r\n        }\r\n\r\n        #dark-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            background: #111111;\r\n            opacity: 0.2;\r\n            pointer-events: none;\r\n            position: absolute;\r\n        }\r\n\r\n        #block-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 40px;\r\n            height: 100%;\r\n            background: #222222;\r\n            z-index: 1;\r\n        }\r\n\r\n        #svg-graph-curves {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            margin-left: 40px;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            z-index: 2;\r\n\r\n            &:focus {\r\n                outline: none;\r\n            }\r\n        }\r\n\r\n        #selection-rectangle {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: calc(100% - 40px);\r\n            height: 100%;\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 40px;\r\n            visibility: hidden;\r\n\r\n            border: 1px dashed white;\r\n        }\r\n    }\r\n\r\n    #range-frame-bar {\r\n        grid-column: 1;\r\n        grid-row: 4;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        pointer-events: none;\r\n        display: grid;\r\n        grid-template-rows: 100%;\r\n        grid-template-columns: 100%;\r\n        pointer-events: none;\r\n        user-select: none;\r\n\r\n        #svg-range-frames {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n    }\r\n\r\n    #frame-bar {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #222222;\r\n        pointer-events: none;\r\n\r\n        display: grid;\r\n        grid-template-rows: 100%;\r\n        grid-template-columns: 40px 1fr;\r\n\r\n        #angle-unit {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            background: #111111;\r\n        }\r\n\r\n        #frames {\r\n            grid-column: 1 / 3;\r\n\r\n            grid-row: 1;\r\n            width: 100%;\r\n            height: 100%;\r\n            display: grid;\r\n            grid-template-rows: 100%;\r\n            grid-template-columns: 100%;\r\n\r\n            #svg-frames {\r\n                margin-left: 40px;\r\n                grid-column: 1;\r\n                grid-row: 1;\r\n                width: calc(100% - 40px);\r\n                height: 100%;\r\n            }\r\n        }\r\n    }\r\n\r\n    #play-head-control {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        position: absolute;\r\n        height: 30px;\r\n        left: 40px;\r\n        width: calc(100% - 40px);\r\n    }\r\n\r\n    #play-head-control-2 {\r\n        grid-column: 1;\r\n        grid-row: 4;\r\n        position: absolute;\r\n        height: 30px;\r\n        left: 0px;\r\n        width: 100%;\r\n    }\r\n\r\n    #play-head {\r\n        grid-column: 1;\r\n        grid-row: 1 / 3;\r\n        position: absolute;\r\n        top: 0;\r\n        height: calc(100% - 5px);\r\n        width: 22px;\r\n        margin-left: 40px;\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 22px 1fr;\r\n        transform: translateX(-50%);\r\n        pointer-events: none;\r\n        z-index: 3;\r\n\r\n        #play-head-bar {\r\n            grid-row: 2;\r\n            grid-column: 1;\r\n            justify-self: center;\r\n            width: 1.5px;\r\n            background: #ffffff;\r\n            height: 100%;\r\n            pointer-events: none;\r\n        }\r\n\r\n        #play-head-circle {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            width: 22px;\r\n            height: 22px;\r\n            border-radius: 50%;\r\n            background: #ffffff;\r\n            font-family: \"acumin-pro-condensed\";\r\n            font-size: 8pt;\r\n            display: grid;\r\n            align-content: center;\r\n            justify-content: center;\r\n            color: #555555;\r\n            cursor: pointer;\r\n        }\r\n    }\r\n\r\n    #angle-mode {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        width: 40px;\r\n        height: 100%;\r\n        z-index: 1;\r\n        background: #222222;\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -148,7 +148,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "#curve-editor {\n  background: #333333;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-rows: 40px calc(100% - 85px) 45px;\n  grid-template-columns: 10px 210px 10px 1fr 10px; }\n  #curve-editor #top-bar {\n    background: #333333;\n    grid-row: 1;\n    grid-column: 1 / 6;\n    width: 100%;\n    height: 100%; }\n  #curve-editor #bottom-bar {\n    background: #333333;\n    grid-row: 3;\n    grid-column: 1 / 6;\n    width: 100%;\n    height: 100%; }\n  #curve-editor #canvas-zone {\n    grid-row: 2;\n    grid-column: 4;\n    width: 100%;\n    height: 100%;\n    background: #333333; }\n  #curve-editor #sidebar {\n    grid-row: 2;\n    grid-column: 2;\n    width: 100%;\n    height: 100%;\n    background: #111111; }\n  #curve-editor .action-button:hover {\n    background: #666666;\n    color: white;\n    cursor: pointer; }\n  #curve-editor .action-button.active {\n    background: #111111; }\n  #curve-editor .action-button:active {\n    transform-origin: 50% 50%;\n    transform: scale(0.96); }\n  #curve-editor .push-button {\n    cursor: pointer; }\n    #curve-editor .push-button.active {\n      background: #666666; }\n  #curve-editor .text-input {\n    color: white;\n    background: #000000;\n    font-family: \"acumin-pro-condensed\";\n    font-size: 11pt;\n    border: 0;\n    margin: 3px 1px;\n    text-align: end;\n    padding-right: 4px; }\n    #curve-editor .text-input:focus {\n      outline: none; }\n", "",{"version":3,"sources":["webpack://./../../../dev/inspector/dist/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/curveEditor.scss"],"names":[],"mappings":"AAAA;EACI,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,+CAA+C;EAC/C,+CAA+C,EAAA;EANnD;IASQ,mBAAmB;IACnB,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY,EAAA;EAbpB;IAiBQ,mBAAmB;IACnB,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY,EAAA;EArBpB;IAyBQ,WAAW;IACX,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB,EAAA;EA7B3B;IAiCQ,WAAW;IACX,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB,EAAA;EArC3B;IA0CY,mBAAmB;IACnB,YAAY;IACZ,eAAe,EAAA;EA5C3B;IAgDY,mBAAmB,EAAA;EAhD/B;IAoDY,yBAAyB;IACzB,sBAAsB,EAAA;EArDlC;IA0DQ,eAAe,EAAA;IA1DvB;MA4DY,mBAAmB,EAAA;EA5D/B;IAiEQ,YAAY;IACZ,mBAAmB;IACnB,mCAAmC;IACnC,eAAe;IACf,SAAS;IACT,eAAe;IACf,eAAe;IACf,kBAAkB,EAAA;IAxE1B;MA2EY,aAAa,EAAA","sourcesContent":["#curve-editor {\r\n    background: #333333;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-template-rows: 40px calc(100% - 85px) 45px;\r\n    grid-template-columns: 10px 210px 10px 1fr 10px;\r\n\r\n    #top-bar {\r\n        background: #333333;\r\n        grid-row: 1;\r\n        grid-column: 1 / 6;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    #bottom-bar {\r\n        background: #333333;\r\n        grid-row: 3;\r\n        grid-column: 1 / 6;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    #canvas-zone {\r\n        grid-row: 2;\r\n        grid-column: 4;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #333333;\r\n    }\r\n\r\n    #sidebar {\r\n        grid-row: 2;\r\n        grid-column: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #111111;\r\n    }\r\n\r\n    .action-button {\r\n        &:hover {\r\n            background: #666666;\r\n            color: white;\r\n            cursor: pointer;\r\n        }\r\n\r\n        &.active {\r\n            background: #111111;\r\n        }\r\n\r\n        &:active {\r\n            transform-origin: 50% 50%;\r\n            transform: scale(0.96);\r\n        }\r\n    }\r\n\r\n    .push-button {\r\n        cursor: pointer;\r\n        &.active {\r\n            background: #666666;\r\n        }\r\n    }\r\n\r\n    .text-input {\r\n        color: white;\r\n        background: #000000;\r\n        font-family: \"acumin-pro-condensed\";\r\n        font-size: 11pt;\r\n        border: 0;\r\n        margin: 3px 1px;\r\n        text-align: end;\r\n        padding-right: 4px;\r\n\r\n        &:focus {\r\n            outline: none;\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, "#curve-editor {\n  background: #333333;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-rows: 40px calc(100% - 85px) 45px;\n  grid-template-columns: 10px 210px 10px 1fr 10px; }\n  #curve-editor #top-bar {\n    background: #333333;\n    grid-row: 1;\n    grid-column: 1 / 6;\n    width: 100%;\n    height: 100%; }\n  #curve-editor #bottom-bar {\n    background: #333333;\n    grid-row: 3;\n    grid-column: 1 / 6;\n    width: 100%;\n    height: 100%; }\n  #curve-editor #canvas-zone {\n    grid-row: 2;\n    grid-column: 4;\n    width: 100%;\n    height: 100%;\n    background: #333333; }\n  #curve-editor #sidebar {\n    grid-row: 2;\n    grid-column: 2;\n    width: 100%;\n    height: 100%;\n    background: #111111; }\n  #curve-editor .action-button:hover {\n    background: #666666;\n    color: white;\n    cursor: pointer; }\n  #curve-editor .action-button.active {\n    background: #111111; }\n  #curve-editor .action-button:active {\n    transform-origin: 50% 50%;\n    transform: scale(0.96); }\n  #curve-editor .push-button {\n    cursor: pointer; }\n    #curve-editor .push-button.active {\n      background: #666666; }\n  #curve-editor .text-input {\n    color: white;\n    background: #000000;\n    font-family: \"acumin-pro-condensed\";\n    font-size: 11pt;\n    border: 0;\n    margin: 3px 1px;\n    text-align: end;\n    padding-right: 4px; }\n    #curve-editor .text-input:focus {\n      outline: none; }\n    #curve-editor .text-input:disabled {\n      background: #444444;\n      border: #555555 solid 1px; }\n", "",{"version":3,"sources":["webpack://./../../../dev/inspector/dist/components/actionTabs/tabs/propertyGrids/animations/curveEditor/scss/curveEditor.scss"],"names":[],"mappings":"AAAA;EACI,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,+CAA+C;EAC/C,+CAA+C,EAAA;EANnD;IASQ,mBAAmB;IACnB,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY,EAAA;EAbpB;IAiBQ,mBAAmB;IACnB,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY,EAAA;EArBpB;IAyBQ,WAAW;IACX,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB,EAAA;EA7B3B;IAiCQ,WAAW;IACX,cAAc;IACd,WAAW;IACX,YAAY;IACZ,mBAAmB,EAAA;EArC3B;IA0CY,mBAAmB;IACnB,YAAY;IACZ,eAAe,EAAA;EA5C3B;IAgDY,mBAAmB,EAAA;EAhD/B;IAoDY,yBAAyB;IACzB,sBAAsB,EAAA;EArDlC;IA0DQ,eAAe,EAAA;IA1DvB;MA4DY,mBAAmB,EAAA;EA5D/B;IAiEQ,YAAY;IACZ,mBAAmB;IACnB,mCAAmC;IACnC,eAAe;IACf,SAAS;IACT,eAAe;IACf,eAAe;IACf,kBAAkB,EAAA;IAxE1B;MA2EY,aAAa,EAAA;IA3EzB;MA+EY,mBAAmB;MACnB,yBAAyB,EAAA","sourcesContent":["#curve-editor {\r\n    background: #333333;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-template-rows: 40px calc(100% - 85px) 45px;\r\n    grid-template-columns: 10px 210px 10px 1fr 10px;\r\n\r\n    #top-bar {\r\n        background: #333333;\r\n        grid-row: 1;\r\n        grid-column: 1 / 6;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    #bottom-bar {\r\n        background: #333333;\r\n        grid-row: 3;\r\n        grid-column: 1 / 6;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    #canvas-zone {\r\n        grid-row: 2;\r\n        grid-column: 4;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #333333;\r\n    }\r\n\r\n    #sidebar {\r\n        grid-row: 2;\r\n        grid-column: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: #111111;\r\n    }\r\n\r\n    .action-button {\r\n        &:hover {\r\n            background: #666666;\r\n            color: white;\r\n            cursor: pointer;\r\n        }\r\n\r\n        &.active {\r\n            background: #111111;\r\n        }\r\n\r\n        &:active {\r\n            transform-origin: 50% 50%;\r\n            transform: scale(0.96);\r\n        }\r\n    }\r\n\r\n    .push-button {\r\n        cursor: pointer;\r\n        &.active {\r\n            background: #666666;\r\n        }\r\n    }\r\n\r\n    .text-input {\r\n        color: white;\r\n        background: #000000;\r\n        font-family: \"acumin-pro-condensed\";\r\n        font-size: 11pt;\r\n        border: 0;\r\n        margin: 3px 1px;\r\n        text-align: end;\r\n        padding-right: 4px;\r\n\r\n        &:focus {\r\n            outline: none;\r\n        }\r\n\r\n        &:disabled {\r\n            background: #444444;\r\n            border: #555555 solid 1px;\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -54884,6 +54884,8 @@ class Context {
         this.onClipLengthDecreased = new core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onInterpolationModeSet = new core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onSelectToActivated = new core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this.onRangeFrameBarResized = new core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__.Observable();
+        this.onPlayheadMoved = new core_Animations_animation__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.lockLastFrameValue = false;
         this.lockLastFrameFrame = false;
         // value frame inTangent outTangent
@@ -55216,7 +55218,7 @@ class TextInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", title: this.props.tooltip, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), className: "text-input" + (this.props.className ? " " + this.props.className : ""), onChange: (evt) => this._onChange(this.props.complement ? evt.target.value.replace(this.props.complement, "") : evt.target.value), onKeyPress: (evt) => this._onKeyPress(evt), value: (this.state.value || "") + (!this.state.isFocused && this.props.complement ? this.props.complement : ""), id: this.props.id }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", title: this.props.tooltip, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), className: "text-input" + (this.props.className ? " " + this.props.className : ""), onChange: (evt) => this._onChange(this.props.complement ? evt.target.value.replace(this.props.complement, "") : evt.target.value), onKeyPress: (evt) => this._onKeyPress(evt), value: (this.state.value || "") + (!this.state.isFocused && this.props.complement ? this.props.complement : ""), id: this.props.id, disabled: this.props.disabled }));
     }
 }
 
@@ -55262,7 +55264,7 @@ class CanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "canvas-zone" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_graphComponent__WEBPACK_IMPORTED_MODULE_3__.GraphComponent, { globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_frameBarComponent__WEBPACK_IMPORTED_MODULE_2__.FrameBarComponent, { globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_playHeadComponent__WEBPACK_IMPORTED_MODULE_4__.PlayHeadComponent, { context: this.props.context, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_rangeFrameBarComponent__WEBPACK_IMPORTED_MODULE_5__.RangeFrameBarComponent, { context: this.props.context, globalState: this.props.globalState }), this.props.context.activeAnimations.length > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "angle-mode" })] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "canvas-zone" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_frameBarComponent__WEBPACK_IMPORTED_MODULE_2__.FrameBarComponent, { globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_graphComponent__WEBPACK_IMPORTED_MODULE_3__.GraphComponent, { globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_playHeadComponent__WEBPACK_IMPORTED_MODULE_4__.PlayHeadComponent, { context: this.props.context, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_rangeFrameBarComponent__WEBPACK_IMPORTED_MODULE_5__.RangeFrameBarComponent, { context: this.props.context, globalState: this.props.globalState }), this.props.context.activeAnimations.length > 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "angle-mode" })] })));
     }
 }
 
@@ -57033,12 +57035,18 @@ class PlayHeadComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._graphAbsoluteWidth = 788;
         this._viewScale = 1;
         this._offsetX = 0;
+        this._offsetRange = 10;
+        this._viewWidth = 748;
+        this._rangeWidthToPlayheadWidth = 40;
         this.state = {};
         this._playHead = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         this._playHeadCircle = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         this._onActiveAnimationChangedObserver = this.props.context.onActiveAnimationChanged.add(() => {
             this.forceUpdate();
         });
+        this._onRangeFrameBarResizedObserver = this.props.context.onRangeFrameBarResized.add((width) => {
+            this._viewWidth = width - this._rangeWidthToPlayheadWidth;
+        });
         this._onBeforeRenderObserver = this.props.context.scene.onBeforeRenderObservable.add(() => {
             var _a;
             if (this.props.context.activeAnimations.length === 0) {
@@ -57056,16 +57064,16 @@ class PlayHeadComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 this._moveHead(0);
             }
         });
-        this.props.context.onMoveToFrameRequired.add((frame) => {
+        this._onMoveToFrameRequiredObserver = this.props.context.onMoveToFrameRequired.add((frame) => {
             this.props.context.moveToFrame(frame);
             this._moveHead(frame);
         });
-        this.props.context.onGraphMoved.add((x) => {
+        this._onGraphMovedObserver = this.props.context.onGraphMoved.add((x) => {
             this._offsetX = x;
             this.forceUpdate();
             this._moveHead(this.props.context.activeFrame);
         });
-        this.props.context.onGraphScaled.add((scale) => {
+        this._onGraphScaledObserver = this.props.context.onGraphScaled.add((scale) => {
             this._viewScale = 1 / scale;
             this.forceUpdate();
             this._moveHead(this.props.context.activeFrame);
@@ -57078,18 +57086,18 @@ class PlayHeadComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._playHead.current.style.left = this._frameToPixel(frame) + "px";
         this._playHeadCircle.current.innerHTML = frame.toFixed(0);
         this.props.context.activeFrame = frame;
+        this.props.context.onPlayheadMoved.notifyObservers(frame);
     }
     _frameToPixel(frame) {
         const minFrame = this.props.context.referenceMinFrame;
         const maxFrame = this.props.context.referenceMaxFrame;
         return (((frame - minFrame) / (maxFrame - minFrame)) * this._graphAbsoluteWidth + this._offsetX) * this._viewScale;
     }
-    _pixelToFrame(pixel) {
+    _pixelToFrame(pixel, locator) {
+        const { minFrame, maxFrame, width, offset, scale } = locator;
         const animation = this.props.context.activeAnimations[0];
         const keys = animation.getKeys();
-        const minFrame = this.props.context.referenceMinFrame;
-        const maxFrame = this.props.context.referenceMaxFrame;
-        return Math.max(((pixel / this._viewScale - this._offsetX) / this._graphAbsoluteWidth) * (maxFrame - minFrame) + minFrame, keys[0].frame);
+        return Math.max(((pixel / scale - offset) / width) * (maxFrame - minFrame) + minFrame, keys[0].frame);
     }
     componentWillUnmount() {
         if (this._onBeforeRenderObserver) {
@@ -57099,20 +57107,52 @@ class PlayHeadComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (this._onActiveAnimationChangedObserver) {
             this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver);
         }
+        if (this._onRangeFrameBarResizedObserver) {
+            this.props.context.onRangeFrameBarResized.remove(this._onRangeFrameBarResizedObserver);
+        }
+        if (this._onMoveToFrameRequiredObserver) {
+            this.props.context.onMoveToFrameRequired.remove(this._onMoveToFrameRequiredObserver);
+        }
+        if (this._onGraphMovedObserver) {
+            this.props.context.onGraphMoved.remove(this._onGraphMovedObserver);
+        }
+        if (this._onGraphScaledObserver) {
+            this.props.context.onGraphScaled.remove(this._onGraphScaledObserver);
+        }
     }
-    _onPointerDown(evt) {
+    _getPixelValues(isRange) {
+        let minFrame, maxFrame, width, offset, scale;
+        if (isRange) {
+            minFrame = this.props.context.fromKey;
+            maxFrame = this.props.context.toKey;
+            width = this._viewWidth;
+            offset = this._offsetRange;
+            scale = 1;
+        }
+        else {
+            minFrame = this.props.context.referenceMinFrame;
+            maxFrame = this.props.context.referenceMaxFrame;
+            width = this._graphAbsoluteWidth;
+            offset = this._offsetX;
+            scale = this._viewScale;
+        }
+        return { minFrame, maxFrame, width, offset, scale };
+    }
+    _onPointerDown(evt, isRange) {
         evt.preventDefault();
         this._pointerIsDown = true;
         evt.currentTarget.setPointerCapture(evt.pointerId);
-        const frame = this._pixelToFrame(evt.nativeEvent.offsetX);
+        const locator = this._getPixelValues(isRange);
+        const frame = this._pixelToFrame(evt.nativeEvent.offsetX, locator);
         this.props.context.moveToFrame(frame);
         this._moveHead(frame);
     }
-    _onPointerMove(evt) {
+    _onPointerMove(evt, isRange) {
         if (!this._pointerIsDown) {
             return;
         }
-        const frame = this._pixelToFrame(evt.nativeEvent.offsetX);
+        const locator = this._getPixelValues(isRange);
+        const frame = this._pixelToFrame(evt.nativeEvent.offsetX, locator);
         this.props.context.moveToFrame(frame);
         this._moveHead(frame);
     }
@@ -57124,7 +57164,7 @@ class PlayHeadComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (this.props.context.activeAnimations.length === 0) {
             return null;
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "play-head", ref: this._playHead }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-bar" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-circle", ref: this._playHeadCircle })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-control", onPointerDown: (evt) => this._onPointerDown(evt), onPointerMove: (evt) => this._onPointerMove(evt), onPointerUp: (evt) => this._onPointerUp(evt) })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "play-head", ref: this._playHead }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-bar" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-circle", ref: this._playHeadCircle })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-control", onPointerDown: (evt) => this._onPointerDown(evt, false), onPointerMove: (evt) => this._onPointerMove(evt, false), onPointerUp: (evt) => this._onPointerUp(evt) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "play-head-control-2", onPointerDown: (evt) => this._onPointerDown(evt, true), onPointerMove: (evt) => this._onPointerMove(evt, true), onPointerUp: (evt) => this._onPointerUp(evt) })] }));
     }
 }
 
@@ -57165,12 +57205,21 @@ class RangeFrameBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
             this._computeSizes();
             this.forceUpdate();
         });
+        this._onPlayheadMovedObserver = this.props.context.onPlayheadMoved.add(() => {
+            this.forceUpdate();
+        });
         this.props.context.onFrameSet.add(() => {
             if (!this._isMounted) {
                 return;
             }
             this.forceUpdate();
         });
+        this._onFrameManuallyEnteredObserver = this.props.context.onFrameManuallyEntered.add(() => {
+            if (!this._isMounted) {
+                return;
+            }
+            this.forceUpdate();
+        });
         this.props.context.onRangeUpdated.add(() => {
             if (!this._isMounted) {
                 return;
@@ -57185,6 +57234,12 @@ class RangeFrameBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         if (this._onActiveAnimationChangedObserver) {
             this.props.context.onActiveAnimationChanged.remove(this._onActiveAnimationChangedObserver);
         }
+        if (this._onPlayheadMovedObserver) {
+            this.props.context.onPlayheadMoved.remove(this._onPlayheadMovedObserver);
+        }
+        if (this._onFrameManuallyEnteredObserver) {
+            this.props.context.onFrameManuallyEntered.remove(this._onFrameManuallyEnteredObserver);
+        }
         this._isMounted = false;
     }
     _computeSizes() {
@@ -57192,6 +57247,7 @@ class RangeFrameBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
             return;
         }
         this._viewWidth = this._svgHost.current.clientWidth;
+        this.props.context.onRangeFrameBarResized.notifyObservers(this._viewWidth);
         this.forceUpdate();
     }
     _dropKeyFrames(animation) {
@@ -57208,6 +57264,20 @@ class RangeFrameBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                 } }, "frame-line" + k.frame + i));
         });
     }
+    _buildActiveFrame() {
+        if (this.props.context.activeFrame === null || this.props.context.activeFrame === undefined) {
+            return null;
+        }
+        const from = this.props.context.fromKey;
+        const to = this.props.context.toKey;
+        const range = to - from;
+        const convertRatio = range / this._viewWidth;
+        const x = (this.props.context.activeFrame - from) / convertRatio;
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("line", { x1: x, y1: "0px", x2: x, y2: "40px", style: {
+                stroke: "#ffffff",
+                strokeWidth: 0.5,
+            } }, "line-activeFrame"));
+    }
     _buildFrames() {
         if (this.props.context.activeAnimations.length === 0) {
             return null;
@@ -57244,7 +57314,7 @@ class RangeFrameBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         const viewBox = `${-this._offsetX} 0 ${this._viewWidth + this._offsetX * 4} 40`;
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "range-frame-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("svg", Object.assign({ id: "svg-range-frames", viewBox: viewBox, ref: this._svgHost }, { children: [this._buildFrames(), this.props.context.activeAnimations.map((a) => {
                         return this._dropKeyFrames(a);
-                    })] })) })));
+                    }), this._buildActiveFrame()] })) })));
     }
 }
 
@@ -58279,7 +58349,11 @@ class TopBarComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     }
     render() {
         const hasActiveAnimations = this.props.context.activeAnimations.length > 0;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "top-bar" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "top-bar-logo", src: _assets_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_5__ }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "top-bar-parent-name" }, { children: this.props.context.title })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_textInputComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputComponent, { className: hasActiveAnimations && this.state.frameControlEnabled ? "" : "disabled", isNumber: true, value: this.state.keyFrameValue, tooltip: "Frame", id: "key-frame", onValueAsNumberChanged: (newValue) => this.props.context.onFrameManuallyEntered.notifyObservers(newValue), globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_textInputComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputComponent, { className: hasActiveAnimations && this.state.valueControlEnabled ? "" : "disabled", isNumber: true, value: this.state.keyValue, tooltip: "Value", id: "key-value", onValueAsNumberChanged: (newValue) => this.props.context.onValueManuallyEntered.notifyObservers(newValue), globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: hasActiveAnimations ? "" : "disabled", tooltip: "New key", id: "new-key", globalState: this.props.globalState, context: this.props.context, icon: _assets_newKeyIcon_svg__WEBPACK_IMPORTED_MODULE_6__, onClick: () => this.props.context.onCreateOrUpdateKeyPointRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { tooltip: "Frame canvas", id: "frame-canvas", globalState: this.props.globalState, context: this.props.context, icon: _assets_frameIcon_svg__WEBPACK_IMPORTED_MODULE_7__, onClick: () => this.props.context.onFrameRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Flatten tangent", id: "flatten-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_flatTangentIcon_svg__WEBPACK_IMPORTED_MODULE_8__, onClick: () => this.props.context.onFlattenTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Linear tangent", id: "linear-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_linearTangentIcon_svg__WEBPACK_IMPORTED_MODULE_9__, onClick: () => this.props.context.onLinearTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Break tangent", id: "break-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_breakTangentIcon_svg__WEBPACK_IMPORTED_MODULE_10__, onClick: () => this.props.context.onBreakTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Unify tangent", id: "unify-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_unifyTangentIcon_svg__WEBPACK_IMPORTED_MODULE_11__, onClick: () => this.props.context.onUnifyTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Step tangent", id: "step-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_stepTangentIcon_svg__WEBPACK_IMPORTED_MODULE_12__, onClick: () => this.props.context.onStepTangentRequired.notifyObservers() })] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "top-bar" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "top-bar-logo", src: _assets_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_5__ }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "top-bar-parent-name" }, { children: this.props.context.title })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_textInputComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputComponent, { className: hasActiveAnimations && this.state.frameControlEnabled ? "" : "disabled", isNumber: true, value: this.state.keyFrameValue, tooltip: "Frame", id: "key-frame", onValueAsNumberChanged: (newValue) => {
+                        if (newValue !== 0) {
+                            this.props.context.onFrameManuallyEntered.notifyObservers(newValue);
+                        }
+                    }, globalState: this.props.globalState, context: this.props.context, disabled: parseFloat(this.state.keyFrameValue) === 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_textInputComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputComponent, { className: hasActiveAnimations && this.state.valueControlEnabled ? "" : "disabled", isNumber: true, value: this.state.keyValue, tooltip: "Value", id: "key-value", onValueAsNumberChanged: (newValue) => this.props.context.onValueManuallyEntered.notifyObservers(newValue), globalState: this.props.globalState, context: this.props.context }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: hasActiveAnimations ? "" : "disabled", tooltip: "New key", id: "new-key", globalState: this.props.globalState, context: this.props.context, icon: _assets_newKeyIcon_svg__WEBPACK_IMPORTED_MODULE_6__, onClick: () => this.props.context.onCreateOrUpdateKeyPointRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { tooltip: "Frame canvas", id: "frame-canvas", globalState: this.props.globalState, context: this.props.context, icon: _assets_frameIcon_svg__WEBPACK_IMPORTED_MODULE_7__, onClick: () => this.props.context.onFrameRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Flatten tangent", id: "flatten-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_flatTangentIcon_svg__WEBPACK_IMPORTED_MODULE_8__, onClick: () => this.props.context.onFlattenTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Linear tangent", id: "linear-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_linearTangentIcon_svg__WEBPACK_IMPORTED_MODULE_9__, onClick: () => this.props.context.onLinearTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Break tangent", id: "break-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_breakTangentIcon_svg__WEBPACK_IMPORTED_MODULE_10__, onClick: () => this.props.context.onBreakTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Unify tangent", id: "unify-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_unifyTangentIcon_svg__WEBPACK_IMPORTED_MODULE_11__, onClick: () => this.props.context.onUnifyTangentRequired.notifyObservers() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_controls_actionButtonComponent__WEBPACK_IMPORTED_MODULE_2__.ActionButtonComponent, { className: this.props.context.activeKeyPoints && this.props.context.activeKeyPoints.length > 0 ? "" : "disabled", tooltip: "Step tangent", id: "step-tangent", globalState: this.props.globalState, context: this.props.context, icon: _assets_stepTangentIcon_svg__WEBPACK_IMPORTED_MODULE_12__, onClick: () => this.props.context.onStepTangentRequired.notifyObservers() })] })));
     }
 }