|
@@ -0,0 +1,72 @@
|
|
|
+var app = (function() {
|
|
|
+ var width = window.innerWidth;
|
|
|
+ var height = window.innerHeight;
|
|
|
+ var layers = [];
|
|
|
+ var _layer = [];
|
|
|
+
|
|
|
+ var stage = new Konva.Stage({
|
|
|
+ container: "container",
|
|
|
+ width: width,
|
|
|
+ height: height
|
|
|
+ });
|
|
|
+
|
|
|
+ var screen = {
|
|
|
+ width: width,
|
|
|
+ height: height
|
|
|
+ };
|
|
|
+
|
|
|
+ function createLayer() {
|
|
|
+ var sequence = 0;
|
|
|
+ if (layers == null || layers.length == 0) {
|
|
|
+ sequence++;
|
|
|
+ } else {
|
|
|
+ sequence = layers.length + 1;
|
|
|
+ }
|
|
|
+ var layer = { sequence: sequence, layer: new Konva.Layer() };
|
|
|
+ layers.push(layer);
|
|
|
+ if (currentLayer() == undefined && _layer.length == 0) {
|
|
|
+ _layer = [];
|
|
|
+ _layer.push(layer);
|
|
|
+ }
|
|
|
+ return layer;
|
|
|
+ }
|
|
|
+
|
|
|
+ function bootstrap() {
|
|
|
+ createLayer();
|
|
|
+ configureDragAndDrop();
|
|
|
+ layer = currentLayer();
|
|
|
+ }
|
|
|
+
|
|
|
+ function currentLayer() {
|
|
|
+ if (_layer[0] == undefined) return undefined;
|
|
|
+ return _layer[0].layer;
|
|
|
+ }
|
|
|
+
|
|
|
+ function configureDragAndDrop() {
|
|
|
+ stage.on("click tap", function(e) {
|
|
|
+ if (e.target === stage) {
|
|
|
+ stage.find("Transformer").destroy();
|
|
|
+ layer.draw();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ stage.find("Transformer").destroy();
|
|
|
+
|
|
|
+ var tr = new Konva.Transformer({
|
|
|
+ anchorStrokeWidth: 2
|
|
|
+ });
|
|
|
+ layer.add(tr);
|
|
|
+ tr.attachTo(e.target);
|
|
|
+ layer.draw();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ stage: stage,
|
|
|
+ currentLayer: currentLayer,
|
|
|
+ createLayer: createLayer,
|
|
|
+ screen: screen,
|
|
|
+ bootstrap: bootstrap,
|
|
|
+ layers: layers
|
|
|
+ };
|
|
|
+})();
|