@openglobus/og 0.17.2 → 0.18.0

package/src/{og/control/timeline/TimelineView.js → control/timeline/TimelineView.ts}

@@ -1,9 +1,8 @@
-'use strict';
-
-import { ButtonGroup } from "../../ui/ButtonGroup.js";
-import { ToggleButton } from "../../ui/ToggleButton.js";
-import { View } from '../../ui/View.js';
-import { TimelineModel } from './TimelineModel.js';
+import {EventsHandler} from "../../Events";
+import {ButtonGroup} from "../../ui/ButtonGroup";
+import {IViewParams, View, ViewEventsList} from '../../ui/View';
+import {ToggleButton} from "../../ui/ToggleButton";
+import {TimelineModel} from './TimelineModel';
 import {
     addSeconds,
     createCanvasHTML,
@@ -12,11 +11,35 @@ import {
     drawText,
     getNearestTimeLeft,
     getScale
-} from './timelineUtils.js';
+} from './timelineUtils';
+import {MouseEventExt} from "../../input/MouseHandler";
+
+interface ITimelineViewParams extends IViewParams {
+    currentDate?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    fillStyle?: string
+}
 
 const SECONDS_TO_MILLISECONDS = 1000.0;
 const MILLISECONDS_TO_SECONDS = 1.0 / SECONDS_TO_MILLISECONDS;
-const EVENT_LIST = [
+
+type TimelineViewEventsList = [
+    'startdrag',
+    'stopdrag',
+    'startdragcurrent',
+    'stopdragcurrent',
+    'setcurrent',
+    'reset',
+    'play',
+    'playback',
+    'pause',
+    'visibility'
+];
+
+const TIMELINEVIEW_EVENTS: TimelineViewEventsList = [
     'startdrag',
     'stopdrag',
     'startdragcurrent',
@@ -58,12 +81,39 @@ const TEMPLATE =
 
 </div>`;
 
-class TimelineView extends View {
 
-    constructor(options = {}) {
+class TimelineView extends View<TimelineModel> {
+
+    public override events: EventsHandler<TimelineViewEventsList> & EventsHandler<ViewEventsList>;
+    public fillStyle: string;
+    public $controls: HTMLElement | null;
+    protected _frameEl: HTMLElement | null;
+    protected _currentEl: HTMLElement | null;
+    protected _canvasEl: HTMLCanvasElement;
+    protected _ctx: CanvasRenderingContext2D;
+    protected _isMouseOver: boolean;
+    protected _isDragging: boolean;
+    protected _isCurrentDragging: boolean;
+    protected _isCurrentMouseOver: boolean;
+    protected _minWidth: number;
+    protected _canvasScale: number;
+    protected _millisecondsInPixel: number;
+    protected _clickPosX: number;
+    protected _clickRangeStart: Date;
+    protected _clickRangeEnd: Date;
+    protected _clickCurrentDate: Date;
+    protected _clickTime: number;
+    protected _clickDelay: number;
+    protected _onResizeObserver_: () => void;
+    protected _resizeObserver: ResizeObserver;
+    protected _pauseBtn: ToggleButton;
+    protected _playBtn: ToggleButton;
+    protected _buttons: ButtonGroup;
+    protected _visibility: boolean;
+
+    constructor(options: ITimelineViewParams = {}) {
         super({
             template: TEMPLATE,
-            eventList: EVENT_LIST,
             model: new TimelineModel({
                 rangeStart: options.rangeStart,
                 rangeEnd: options.rangeEnd,
@@ -73,14 +123,17 @@ class TimelineView extends View {
             })
         });
 
+        //@ts-ignore
+        this.events = this.events.registerNames(TIMELINEVIEW_EVENTS);
+
         this.fillStyle = options.fillStyle || SCALE_FILL_COLOR;
 
-        this.$controls;
+        this.$controls = null;
 
         this._frameEl = null;
         this._currentEl = null;
         this._canvasEl = createCanvasHTML();
-        this._ctx = this._canvasEl.getContext('2d');
+        this._ctx = this._canvasEl.getContext('2d')!;
 
         this._isMouseOver = false;
         this._isDragging = false;
@@ -119,78 +172,76 @@ class TimelineView extends View {
             buttons: [this._pauseBtn, this._playBtn]
         })
 
-        this._visibility = null;
+        this._visibility = false;
     }
 
-    _onResizeObserver() {
+    protected _onResizeObserver() {
         this.resize();
     }
 
-    get canvasScale() {
+    public get canvasScale(): number {
         return this._canvasScale;
     }
 
-    set canvasScale(scale) {
+    public set canvasScale(scale: number) {
         if (scale !== this._canvasScale) {
             this._canvasScale = scale;
             this.resize();
         }
     }
 
-    resize() {
+    public resize() {
         this._resize();
         this.draw();
     }
 
-    afterRender(parentNode) {
+    public override afterRender(parentNode: HTMLElement) {
         this.resize();
     }
 
-    render() {
+    public override render(): this {
         super.render();
 
         this.$controls = this.select(".og-timeline-controls");
 
         this._frameEl = this.select(".og-timeline-frame");
         this._currentEl = this.select(".og-timeline-current");
-        this.select(".og-timeline-frame .og-timeline-scale").appendChild(this._canvasEl);
+        this.select(".og-timeline-frame .og-timeline-scale")!.appendChild(this._canvasEl);
 
-        this._resizeObserver.observe(this.el);
+        this._resizeObserver.observe(this.el!);
 
-        this.model.on("change", () => {
+        this.model.events.on("change", () => {
             this.draw()
         });
 
-        this.model.on("current", (d) => {
+        this.model.events.on("current", (d: Date) => {
             this._drawCurrent();
-            this._events.dispatch(this._events.setcurrent, d);
+            this.events.dispatch(this.events.setcurrent, d);
         });
 
-        this._canvasEl.addEventListener("mouseenter", this._onMouseEnter.bind(this));
-        this._canvasEl.addEventListener("mouseout", this._onMouseOut.bind(this));
+        this._canvasEl.addEventListener("mouseenter", this._onMouseEnter);
+        this._canvasEl.addEventListener("mouseout", this._onMouseOut);
 
-        this._currentEl.addEventListener("mouseenter", this._onCurrentMouseEnter.bind(this));
-        this._currentEl.addEventListener("mouseout", this._onCurrentMouseOut.bind(this));
+        this._currentEl!.addEventListener("mouseenter", this._onCurrentMouseEnter);
+        this._currentEl!.addEventListener("mouseout", this._onCurrentMouseOut);
 
-        document.body.addEventListener("mousemove", this._onMouseMove.bind(this));
-        document.body.addEventListener("mousedown", this._onMouseDown.bind(this));
-        document.body.addEventListener("mouseup", this._onMouseUp.bind(this));
-        document.body.addEventListener("mousewheel", this._onMouseWheel.bind(this));
-        document.body.addEventListener("wheel", this._onMouseWheelFF.bind(this));
+        document.body.addEventListener("mousemove", this._onMouseMove);
+        document.body.addEventListener("mousedown", this._onMouseDown);
+        document.body.addEventListener("mouseup", this._onMouseUp);
+        document.body.addEventListener("wheel", this._onMouseWheelFF);
 
-        this._playBtn.appendTo(this.$controls);
-        this._pauseBtn.appendTo(this.$controls);
+        this._playBtn.appendTo(this.$controls!);
+        this._pauseBtn.appendTo(this.$controls!);
 
         if (this.model.stopped()) {
             this._pauseBtn.setActive(true, true);
             this._pauseBtn.preventClick = true;
-        }
-        else {
+        } else {
             this._playBtn.setActive(true, true);
             this._playBtn.preventClick = true;
         }
 
-        this._buttons.on("change", (btn) => {
+        this._buttons.events.on("change", (btn: ToggleButton) => {
             switch (btn.name) {
                 case "play":
                     this.play();
@@ -228,58 +279,60 @@ class TimelineView extends View {
         return this;
     }
 
-    setVisibility(visibility) {
+    public setVisibility(visibility: boolean) {
         if (visibility !== this._visibility) {
             this._visibility = visibility;
-            if (visibility) {
-                this.el.style.display = "block";
-            } else {
-                this.el.style.display = "none";
+            if (this.el) {
+                if (visibility) {
+                    this.el.style.display = "block";
+                } else {
+                    this.el.style.display = "none";
+                }
             }
-            this._events.dispatch(this._events.visibility, visibility);
+            this.events.dispatch(this.events.visibility, visibility);
         }
     }
 
-    reset() {
+    public reset() {
         this.model.stop();
-        this._events.dispatch(this._events.reset, this.model);
+        this.events.dispatch(this.events.reset, this.model);
     }
 
-    play() {
+    public play() {
         this.model.multiplier = Math.abs(this.model.multiplier);
         this.model.play();
-        this._events.dispatch(this._events.play, this.model);
+        this.events.dispatch(this.events.play, this.model);
     }
 
-    pause() {
+    public pause() {
         this.model.stop();
-        this._events.dispatch(this._events.pause, this.model);
+        this.events.dispatch(this.events.pause, this.model);
     }
 
-    playBack() {
+    public playBack() {
         this.model.multiplier = -1 * Math.abs(this.model.multiplier);
         this.model.play();
-        this._events.dispatch(this._events.playback, this.model);
+        this.events.dispatch(this.events.playback, this.model);
     }
 
-    _onMouseWheel(e) {
+    protected _onMouseWheel = (e: MouseEventExt) => {
         if (this._isMouseOver) {
             let rect = this._canvasEl.getBoundingClientRect();
             let pointerPosX = e.clientX - rect.left,
                 pointerCenterOffsetX = -(pointerPosX - this.clientWidth * 0.5);
             let pointerTime = this.model.rangeStartTime + this._millisecondsInPixel * pointerPosX;
-            this._zoom(pointerTime, pointerCenterOffsetX, Math.sign(e.wheelDelta));
+            this._zoom(pointerTime, pointerCenterOffsetX, Math.sign(e.wheelDelta!));
         } else if (this._isCurrentMouseOver) {
             let pointerCenterOffsetX = -((this.model.currentTime - this.model.rangeStartTime) / this._millisecondsInPixel - this.clientWidth * 0.5);
-            this._zoom(this.model.currentTime, pointerCenterOffsetX, Math.sign(e.wheelDelta));
+            this._zoom(this.model.currentTime, pointerCenterOffsetX, Math.sign(e.wheelDelta!));
         }
     }
 
-    _onMouseWheelFF(e) {
+    protected _onMouseWheelFF = (e: MouseEventExt) => {
         this._onMouseWheel(e);
     }
 
-    _zoom(pointerTime, pointerCenterOffsetX, dir) {
+    protected _zoom(pointerTime: number, pointerCenterOffsetX: number, dir: number) {
         let centerTime = this.model.rangeStartTime + 0.5 * this.model.range;
 
         let centerTimeOffset = (pointerTime - centerTime) * MILLISECONDS_TO_SECONDS;
@@ -303,7 +356,7 @@ class TimelineView extends View {
         }
     }
 
-    _onMouseDown(e) {
+    protected _onMouseDown = (e: MouseEvent) => {
         if (this._isMouseOver) {
             this._isDragging = true;
             document.body.classList.add("og-timeline-unselectable");
@@ -314,7 +367,7 @@ class TimelineView extends View {
             this._clickRangeStart = this.model.rangeStart;
             this._clickRangeEnd = this.model.rangeEnd;
 
-            this._events.dispatch(this._events.startdrag, e);
+            this.events.dispatch(this.events.startdrag, e);
         } else if (this._isCurrentMouseOver) {
             this._isCurrentDragging = true;
             document.body.classList.add("og-timeline-unselectable");
@@ -323,11 +376,11 @@ class TimelineView extends View {
 
             this._clickCurrentDate = this.model.current;
 
-            this._events.dispatch(this._events.startdragcurrent, e);
+            this.events.dispatch(this.events.startdragcurrent, e);
         }
     }
 
-    _onMouseUp(e) {
+    protected _onMouseUp = (e: MouseEvent) => {
         if (this._isDragging) {
             this._isDragging = false;
             document.body.classList.remove("og-timeline-unselectable");
@@ -335,35 +388,35 @@ class TimelineView extends View {
                 let rect = this._canvasEl.getBoundingClientRect();
                 let current = new Date(this.model.rangeStartTime + (e.clientX - rect.left) * this._millisecondsInPixel);
                 this.model.current = current;
-                this._events.dispatch(this._events.stopdrag, current);
-                this._events.dispatch(this._events.setcurrent, current);
+                this.events.dispatch(this.events.stopdrag, current);
+                this.events.dispatch(this.events.setcurrent, current);
             } else {
-                this._events.dispatch(this._events.stopdrag, this.model.current);
+                this.events.dispatch(this.events.stopdrag, this.model.current);
             }
         } else if (this._isCurrentDragging) {
             this._isCurrentDragging = false;
             document.body.classList.remove("og-timeline-unselectable");
-            this._events.dispatch(this._events.stopdragcurrent, this.model.current);
+            this.events.dispatch(this.events.stopdragcurrent, this.model.current);
         }
     }
 
-    _onMouseEnter() {
+    protected _onMouseEnter = () => {
         this._isMouseOver = true;
     }
 
-    _onMouseOut() {
+    protected _onMouseOut = () => {
         this._isMouseOver = false;
     }
 
-    _onCurrentMouseEnter() {
+    protected _onCurrentMouseEnter = () => {
         this._isCurrentMouseOver = true;
     }
 
-    _onCurrentMouseOut() {
+    protected _onCurrentMouseOut = () => {
         this._isCurrentMouseOver = false;
     }
 
-    _onMouseMove(e) {
+    protected _onMouseMove = (e: MouseEvent) => {
         if (this._isDragging) {
             let offsetSec = (this._clickPosX - e.clientX) * this._millisecondsInPixel * MILLISECONDS_TO_SECONDS;
             this.model.set(addSeconds(this._clickRangeStart, offsetSec), addSeconds(this._clickRangeEnd, offsetSec))
@@ -376,16 +429,16 @@ class TimelineView extends View {
         }
     }
 
-    get clientWidth() {
+    public get clientWidth(): number {
         return this._canvasEl ? this._canvasEl.width / this._canvasScale : 0;
     }
 
-    get clientHeight() {
+    public get clientHeight(): number {
         return this._canvasEl ? this._canvasEl.height / this._canvasScale : 0;
     }
 
-    _resize() {
-        if (this._canvasEl && this._frameEl) {
+    protected _resize() {
+        if (this._frameEl) {
             this._canvasEl.width = this._frameEl.clientWidth * this._canvasScale;
             this._canvasEl.height = this._frameEl.clientHeight * this._canvasScale;
             this._canvasEl.style.width = `${this._frameEl.clientWidth}px`;
@@ -394,69 +447,65 @@ class TimelineView extends View {
         }
     }
 
-    getOffsetbyTime(milliseconds) {
+    public getOffsetByTime(milliseconds: number): number {
         return (milliseconds - this.model.rangeStartTime) / this._millisecondsInPixel;
     }
 
-    remove() {
+    public override remove() {
         super.remove();
         this.model.stop();
     }
 
-    _clearCanvas() {
-        if (this._ctx) {
-            this._ctx.fillStyle = this.fillStyle;
-            this._ctx.fillRect(0, 0, this.clientWidth * this._canvasScale, this.clientHeight * this._canvasScale);
-        }
+    protected _clearCanvas() {
+        this._ctx.fillStyle = this.fillStyle;
+        this._ctx.fillRect(0, 0, this.clientWidth * this._canvasScale, this.clientHeight * this._canvasScale);
     }
 
-    _drawCurrent() {
+    protected _drawCurrent() {
         let curPosX = (this.model.currentTime - this.model.rangeStartTime) / this._millisecondsInPixel;
         if (this.model.current < this.model.rangeStart || this.model.current > this.model.rangeEnd) {
-            this._currentEl.style.display = "none";
+            this._currentEl!.style.display = "none";
         } else {
-            this._currentEl.style.display = "block";
-            this._currentEl.style.transform = `translateX(${curPosX}px)`;
+            this._currentEl!.style.display = "block";
+            this._currentEl!.style.transform = `translateX(${curPosX}px)`;
         }
     }
 
-    draw() {
-        if (this._ctx) {
-            this._millisecondsInPixel = (this.model.range / this.clientWidth);
-            let minWidthMs = this._minWidth * this._millisecondsInPixel;
-            let scaleData = getScale(minWidthMs * MILLISECONDS_TO_SECONDS);
-            if (scaleData) {
+    public draw() {
+        this._millisecondsInPixel = (this.model.range / this.clientWidth);
+        let minWidthMs = this._minWidth * this._millisecondsInPixel;
+        let scaleData = getScale(minWidthMs * MILLISECONDS_TO_SECONDS);
+        if (scaleData) {
 
-                this._clearCanvas();
+            this._clearCanvas();
 
-                let scaleMs = scaleData[0] * SECONDS_TO_MILLISECONDS,
-                    scalePx = scaleMs / this._millisecondsInPixel,
-                    segCount = scaleData[1];
+            let scaleMs = scaleData[0] * SECONDS_TO_MILLISECONDS,
+                scalePx = scaleMs / this._millisecondsInPixel,
+                segCount = scaleData[1];
 
-                let originTime = getNearestTimeLeft(this.model.rangeStartTime, scaleMs);
+            let originTime = getNearestTimeLeft(this.model.rangeStartTime, scaleMs);
 
-                let showMillisconds = scaleData[0] < 1.0,
-                    showTime = scaleData[0] < 86400.0;
+            let showMilliseconds = scaleData[0] < 1.0,
+                showTime = scaleData[0] < 86400.0;
 
-                for (let i = originTime, rangeEnd = this.model.rangeEndTime + scaleMs; i < rangeEnd; i += scaleMs) {
-                    let x = this.getOffsetbyTime(i);
-                    if (x >= 0 && x <= this.clientWidth * this._canvasScale) {
-                        drawNotch(this._ctx, x * this._canvasScale, 10 * this._canvasScale, 2 * this._canvasScale, SCALE_NOTCH_COLOR);
-                    }
-                    for (let j = 1; j < segCount; j++) {
-                        let xx = x + j * (scalePx / segCount);
-                        if (xx >= 0 && xx <= this.clientWidth * this._canvasScale) {
-                            drawNotch(this._ctx, xx * this._canvasScale, 5 * this._canvasScale, 1 * this._canvasScale, SCALE_NOTCH_COLOR);
-                        }
+            for (let i = originTime, rangeEnd = this.model.rangeEndTime + scaleMs; i < rangeEnd; i += scaleMs) {
+                let x = this.getOffsetByTime(i);
+                if (x >= 0 && x <= this.clientWidth * this._canvasScale) {
+                    drawNotch(this._ctx, x * this._canvasScale, 10 * this._canvasScale, 2 * this._canvasScale, SCALE_NOTCH_COLOR);
+                }
+                for (let j = 1; j < segCount; j++) {
+                    let xx = x + j * (scalePx / segCount);
+                    if (xx >= 0 && xx <= this.clientWidth * this._canvasScale) {
+                        drawNotch(this._ctx, xx * this._canvasScale, 5 * this._canvasScale, 1 * this._canvasScale, SCALE_NOTCH_COLOR);
                     }
-                    drawText(this._ctx, dateToStr(new Date(i), showTime, showMillisconds), x * this._canvasScale, 26 * this._canvasScale, "24px monospace", SCALE_TIME_COLOR, "center");
                 }
-
-                this._drawCurrent();
+                drawText(this._ctx, dateToStr(new Date(i), showTime, showMilliseconds), x * this._canvasScale, 26 * this._canvasScale, "24px monospace", SCALE_TIME_COLOR, "center");
             }
+
+            this._drawCurrent();
         }
     }
 }
 
-export { TimelineView };
+export {TimelineView};
 

package/src/{og/control/timeline/timelineUtils.js → control/timeline/timelineUtils.ts}

@@ -1,12 +1,13 @@
-'use strict';
+import * as math from '../../math';
 
-import * as math from '../../math.js';
+type BaselineType = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
+type AlignType = "center" | "end" | "left" | "right" | "start";
 
-export function addSeconds(date, seconds) {
+export function addSeconds(date: Date, seconds: number): Date {
     return new Date(+date + seconds * 1000);
 }
 
-export function dateToStr(date, showTime = true, showMilliseconds = false) {
+export function dateToStr(date: Date, showTime: boolean = true, showMilliseconds: boolean = false): string {
 
     let month = MONTHS[date.getMonth()],
         day = date.getUTCDate(),
@@ -28,15 +29,15 @@ export function dateToStr(date, showTime = true, showMilliseconds = false) {
     return `${month} ${day} ${year}`;
 }
 
-export function createCanvasHTML() {
+export function createCanvasHTML(): HTMLCanvasElement {
     return document.createElement("canvas");
 }
 
-export function getNearestTimeLeft(t, div) {
+export function getNearestTimeLeft(t: number, div: number): number {
     return t - (t % div);
 }
 
-export function drawNotch(ctx, xOffset = 0, size = 10, thickness = 2, color = "white") {
+export function drawNotch(ctx: CanvasRenderingContext2D, xOffset: number = 0, size: number = 10, thickness: number = 2, color: string = "white") {
     ctx.lineWidth = thickness;
     ctx.strokeStyle = color;
     ctx.beginPath();
@@ -45,7 +46,7 @@ export function drawNotch(ctx, xOffset = 0, size = 10, thickness = 2, color = "w
     ctx.stroke();
 }
 
-export function drawText(ctx, text, x, y, font = "12px Arial", fillStyle = "black", align = "left", baseLine = "bottom", rotDeg) {
+export function drawText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, font: string = "12px Arial", fillStyle: string = "black", align: AlignType = "left", baseLine: BaselineType = "bottom", rotDeg: number = 0) {
     ctx.save();
     ctx.translate(x, y);
     ctx.rotate(rotDeg * math.RADIANS);
@@ -57,7 +58,7 @@ export function drawText(ctx, text, x, y, font = "12px Arial", fillStyle = "blac
     ctx.restore();
 }
 
-export const SCALES = [
+export const SCALES: [number, number][] = [
     [0.001, 10],
     [0.002, 10],
     [0.005, 10],
@@ -108,7 +109,7 @@ export const SCALES = [
     [31536000000.0, 10], // 1000years
 ];
 
-export function getScale(seconds) {
+export function getScale(seconds: number) {
     for (let i = 0, len = SCALES.length; i < len; i++) {
         if (SCALES[i][0] > seconds) {
             return SCALES[i - 1];

package/src/{og/control → control}/visibleExtent/Segment.js

@@ -2,16 +2,16 @@
 
 import { Box } from "../../bv/Box.js";
 import { Sphere } from "../../bv/Sphere.js";
-import { Extent } from "../../Extent.js";
+import { Extent } from "../../Extent";
 import { Layer } from "../../layer/Layer.js";
-import { LonLat } from "../../LonLat.js";
+import { LonLat } from "../../LonLat";
 import { Ray } from "../../math/Ray.js";
-import { Vec3 } from "../../math/Vec3.js";
-import * as mercator from "../../mercator.js";
+import { Vec3 } from "../../math/Vec3";
+import * as mercator from "../../mercator";
 import { EPSG3857 } from "../../proj/EPSG3857.js";
 import { E, N, NOTRENDERING, OPSIDE, S, W } from "../../quadTree/quadTree.js";
 import * as segmentHelper from "../../segment/segmentHelper.js";
-import { getMatrixSubArray } from "../../utils/shared.js";
+import { getMatrixSubArray } from "../../utils/shared";
 
 export const MAX_NORMAL_ZOOM = 7;
 

package/src/{og/control → control}/visibleExtent/VisibleExtent.js

@@ -1,8 +1,6 @@
-"use strict";
-
-import { Slice } from "../../segment/Slice.js";
-import { Control } from "../Control.js";
-import * as shaders from "./drawnode.js";
+import { Slice } from "../../segment/Slice";
+import { Control } from "../Control";
+import * as shaders from "./drawnode";
 
 function rewriteSlice() {
     Slice.prototype.init = function (segment) {
@@ -39,11 +37,7 @@ function rewriteSlice() {
     };
 }
 
-/**
- * @class
- * @extends {Control}
- */
-class VisibleExtent extends Control {
+export class VisibleExtent extends Control {
     constructor() {
         super();
 
@@ -73,8 +67,7 @@ class VisibleExtent extends Control {
     }
 }
 
-export function visibleExtent() {
-    return new VisibleExtent();
-}
-
-export { VisibleExtent };
+/**
+ * @deprecated 
+ */
+export const visibleExtent = () => new VisibleExtent();

package/src/{og/control/visibleExtent/drawnode.js → control/visibleExtent/drawnode.ts}

@@ -1,6 +1,4 @@
-"use strict";
-
-import { Program } from "../../webgl/Program.js";
+import { Program } from "../../webgl/Program";
 
 // REMEMBER!
 // src*(1)+dest*(1-src.alpha)