@shijiu/jsview 1.9.719

package/dom/jsview-dom/src/dom-wrapper/ForgeExtension.js

@@ -0,0 +1,226 @@
+/* eslint-disable no-extra-boolean-cast */
+import Forge from "../engine-js/ForgeDefine"
+import URL from "./style/URL"
+class ForgeExtension {
+    static SetBackgroundColor(view, color, corner) {
+        // console.log("Forge.LayoutView.setColor(). color=" + color);
+        const colorTexture = ForgeExtension.TextureManager.GetColorTextureCached(color);
+        let cornerMask;
+        if (!!corner) {
+            cornerMask = new Forge.ViewRoundCornerMask(corner.topLeft, corner.topRight,
+                corner.bottomLeft, corner.bottomRight);
+        }
+        const textureSetting = new Forge.ExternalTextureSetting(colorTexture, cornerMask);
+        view.ResetTexture(textureSetting);
+    }
+
+    static SetBackgroundImage(view, backgroundImage, corner, onLoaded, tex_scale_down, color_type, apic_autoplay) {
+        let info = {};
+        if (typeof (backgroundImage) === "string") {
+            const url = new URL(backgroundImage);
+            if ((url instanceof URL) === false) {
+                throw Error("Bad Argument.", url)
+            }
+            info.url = url.href;
+        } else if (backgroundImage?.type == 'linear-gradient') {
+            info.gradient = backgroundImage;
+        }
+        // console.log("Forge.LayoutView.SetBackgroundImage(). url=", url);
+        let imageTexture;
+        if (info.gradient) {
+            if (info.gradient.colors?.length > 2) {
+                const colors = info.gradient.colors;
+                const bothEnds = [
+                    colors[0], colors[colors.length - 1]
+                ];
+                const stepPoints = colors.slice(1, colors.length - 1);
+                // console.log("ForgeExtension.SetBackgroundImage() multi color linear gradient.", info.gradient.colors);
+                imageTexture = ForgeExtension.TextureManager.CreateLinearGradientTexture(bothEnds, stepPoints);
+            } else if (info.gradient.colors?.length == 2) {
+                // console.log("ForgeExtension.SetBackgroundImage() two color linear gradient.", info.gradient.colors);
+                imageTexture = ForgeExtension.TextureManager.CreateMiniGradientTexture(true, info.gradient.colors[0], info.gradient.colors[1], info.gradient.rawValue);
+            } else {
+                console.warn("Failed to create backgroundImage gradient, bad colors.", info.gradient.colors)
+            }
+
+        } else if (info.url) {
+            if (info.url.includes(".gif") || info.url.includes(".webp")) {
+                imageTexture = ForgeExtension.TextureManager.GetGifImage(info.url, false, null, apic_autoplay);
+            } else {
+                imageTexture = ForgeExtension.TextureManager.GetImage2(info.url, false, tex_scale_down, color_type ? color_type : Forge.ColorSpace.RGBA_8888);
+            }
+        }
+
+        if (imageTexture) {
+            let cornerMask;
+            if (!!corner) {
+                cornerMask = new Forge.ViewRoundCornerMask(corner.topLeft, corner.topRight,
+                  corner.bottomLeft, corner.bottomRight);
+            }
+            const textureSetting = new Forge.ExternalTextureSetting(imageTexture, cornerMask);
+            view.ResetTexture(textureSetting);
+            if (!!onLoaded) {
+                let callback_token = imageTexture.RegisterLoadImageCallback(null, function () {
+                    // console.log("Forge.LayoutView.SetBackgroundImage(). ====== onLoaded=");
+                    onLoaded({ width: imageTexture.Width, height: imageTexture.Height });
+                });
+                view.RegisterDetachCallback(()=>{
+                    imageTexture.UnregisterLoadImageCallback(callback_token);
+                });
+            }
+        } else {
+            // 无效的url.href制作不出 imageTexture
+        }
+    }
+
+    static SetMaskedBackgroundImage(view, url, mask_url, url_color_type) {
+        if (typeof (url) === "string") {
+            url = new URL(url);
+        }
+        if ((url instanceof URL) === false) {
+            throw Error("Bad Argument.", url)
+        }
+
+        if (typeof (mask_url) === "string") {
+            mask_url = new URL(mask_url);
+        }
+        if ((mask_url instanceof URL) === false) {
+            throw Error("Bad Argument(MaskURL).", mask_url)
+        }
+
+        const image_texture = ForgeExtension.TextureManager.GetImage2(url.href, false, null, url_color_type ? url_color_type : Forge.ColorSpace.RGBA_8888);
+        if (image_texture) {
+            const mask_texture = ForgeExtension.TextureManager.GetImage2(mask_url.href, false, null, Forge.ColorSpace.RGBA_8888);
+            const texture_setting = new Forge.ExternalTextureSetting(image_texture, new Forge.ViewTextureMask(mask_texture));
+            view.ResetTexture(texture_setting);
+        } else {
+            // 无效的imageUrl制作不出 image_texture
+        }
+    }
+
+    static SetVideoTexture(view, color, corner) {
+        // console.log("Forge.LayoutView.setColor(). color=" + color);
+        const colorTexture = ForgeExtension.TextureManager.GetColorTexture(color);
+        let cornerMask;
+        if (!!corner) {
+            cornerMask = new Forge.ViewRoundCornerMask(corner.topLeft, corner.topRight,
+                corner.bottomLeft, corner.bottomRight);
+        }
+        const textureSetting = new Forge.TextureSetting(colorTexture, cornerMask);
+        view.ResetTexture(textureSetting);
+    }
+
+    static GetTextWidth(textParams) {
+        if (!textParams.str) {
+            textParams.str = "";
+        }
+        if (!textParams.font) {
+            textParams.font = Forge.TextUtils._sDefaultFont;
+        }
+        if (!textParams.size) {
+            textParams.size = Forge.TextUtils._sDefaultFontSize;
+        }
+        if (textParams.italic !== 'italic') {
+            textParams.italic = "";
+        }
+        if (textParams.bold !== 'bold') {
+            textParams.bold = "";
+        }
+
+        return window.PlatformUtils.GetTextWidth(textParams);
+    }
+
+    static RequestSwap() {
+        Forge.sRenderBridge.RequestSwap();
+    }
+
+    static SetImgTexSize(imgTex, imageSize) {
+        let newTexInfo = {
+            size: imageSize,
+            refNum: 0,
+        };
+        ForgeExtension.TextureInfo.Cache[imgTex.Source] = newTexInfo;
+    }
+
+    static RefImgTexSize(imgTex, onImageLoaded) {
+        let cachedTexInfo = ForgeExtension.TextureInfo.Cache[imgTex.Source];
+        if (!!cachedTexInfo) {
+            if (cachedTexInfo.refNum > 0) {
+                cachedTexInfo.refNum++;
+            } else {
+                cachedTexInfo.refNum = 1;
+            }
+            // console.log("ForgeExtension.RefImgTexSize(). sync call onImageLoaded()");
+            onImageLoaded(cachedTexInfo.size);
+        } else {
+            imgTex.RegisterLoadImageCallback(null, function () {
+                const imageSize = {
+                    width: imgTex.Width,
+                    height: imgTex.Height,
+                };
+                // console.log("ForgeExtension.RefImgTexSize(). async call onImageLoaded()");
+                onImageLoaded(imageSize);
+
+                let cachedTexInfo = ForgeExtension.TextureInfo.Cache[imgTex.Source];
+                if (!!cachedTexInfo) {
+                    if (cachedTexInfo.refNum > 0) {
+                        cachedTexInfo.refNum++;
+                    } else {
+                        cachedTexInfo.refNum = 1;
+                    }
+                } else {
+                    let newTexInfo = {
+                        size: imageSize,
+                        refNum: 1,
+                    };
+                    ForgeExtension.TextureInfo.Cache[imgTex.Source] = newTexInfo;
+                }
+            });
+        }
+    }
+
+    static UnrefImgTexSize(imgTex) {
+        if (!imgTex) {
+            return;
+        }
+
+        let cachedTexInfo = ForgeExtension.TextureInfo.Cache[imgTex.Source];
+        if (!!cachedTexInfo) {
+            cachedTexInfo.refNum--;
+            if (cachedTexInfo.refNum <= 0) {
+                ForgeExtension.TextureInfo.Unused.add(imgTex.Source);
+            }
+            // console.log("ForgeExtension.UnrefImgTexSize(). refNum=" + cachedTexInfo.refNum);
+        }
+    }
+
+    static ClearUnusedTexSize() { // 未测试, 慎用
+        for (let key of ForgeExtension.TextureInfo.Unused) {
+            let item = ForgeExtension.TextureInfo.Cache[key];
+            if (item.refNum < -2) { // 3次清除
+                delete ForgeExtension.TextureInfo.Cache[key];
+                ForgeExtension.TextureInfo.Unused.delete(key);
+                // console.log("ForgeExtension.ClearUnusedTexSize().", item);
+                continue;
+            }
+
+            if (item.refNum <= 0) {
+                item.refNum--;
+            } else { // 被重新使用
+                ForgeExtension.TextureInfo.Unused.delete(key);
+            }
+        }
+    }
+}
+
+ForgeExtension.TextureInfo = {
+    Cache: {},
+    Unused: new Set(),
+};
+ForgeExtension.TextureManager = null;
+ForgeExtension.RootView = null;
+ForgeExtension.RootActivity = null;
+ForgeExtension.HaltKeyEvent = false;
+
+export default ForgeExtension;
+

package/dom/jsview-dom/src/dom-wrapper/JsViewForgeApp.js

@@ -0,0 +1,85 @@
+/* eslint-disable no-extra-boolean-cast */
+import Forge from "../engine-js/ForgeDefine"
+import ForgeExtension from "./ForgeExtension"
+import KeyboardEvent from "./event/KeyboardEvent"
+import {JsvLazySyncCache} from "./utils/JsvLazySyncCache"
+import URL from "./style/URL"
+
+class JsViewForgeActivity {
+    constructor(manager) {
+        this.activity = new Forge.ReactActivity("JsViewForgeActivity", manager, this.OnKeyDown.bind(this), this.OnKeyUp.bind(this));
+        this._Init();
+    }
+
+    _Init() {
+        console.log("JsViewForgeActivity.OnCreate().");
+        ForgeExtension.TextureManager = this.activity.GetTextureManager();
+        ForgeExtension.RootView = new Forge.LayoutView();
+        ForgeExtension.RootActivity = this.activity;
+        document.jsvUpdateRootElement(ForgeExtension.RootView);
+        // SetContentView
+        let designed_map_set = null;
+        if (Forge.DesignMap) {
+            designed_map_set = Forge.DesignMap();
+        }
+        let rootWidth = (designed_map_set ? designed_map_set.width : 1280);
+        let rootHeight = Math.floor(rootWidth * 9 / 16);
+        this.activity.SetContentView(ForgeExtension.RootView, {x: 0, y: 0, width: rootWidth, height: rootHeight});
+
+        Forge.sRenderBridge.AddWillSwapListener("forgeSwap", () => {
+            JsvLazySyncCache.SyncAllCachedProperty();
+            ForgeExtension.ClearUnusedTexSize();
+        });
+        window.JsView.Dom.Render();
+    }
+
+    OnKeyDown(ev) {
+        if (!ForgeExtension.HaltKeyEvent) {
+            return false;
+        } else {
+            let event = new KeyboardEvent(KeyboardEvent.Type.KEYDOWN);
+            event.keyCode = ev.keyCode;
+            event.repeat = ev.repeat;
+            document.dispatchEvent(event);
+            return true;
+        }
+    }
+
+    OnKeyUp(ev) {
+        if (!ForgeExtension.HaltKeyEvent) {
+            return false;
+        } else {
+            let event = new KeyboardEvent(KeyboardEvent.Type.KEYUP);
+            event.keyCode = ev.keyCode;
+            event.key = KeyboardEvent.JsvGetKeyFromCode(event.keyCode);
+            event.repeat = ev.repeat;
+            document.dispatchEvent(event);
+            return true;
+        }
+    }
+}
+
+class JsViewForgeApp {
+    constructor(activity_manager) {
+        this._ActivityManager = activity_manager;
+        let jsvForgeActivity = new JsViewForgeActivity(activity_manager);
+        // Register activities
+        activity_manager.RegisterActivity(jsvForgeActivity.activity); // Home page activity
+
+        // Start home page
+        activity_manager.StartActivity(new Forge.Intent("JsViewForgeActivity"));
+    }
+}
+
+if (!!window.JsView) {
+    window.JsView.Dom = {
+        DesignMap: null, // Deprecated
+        Render: null,
+        Extension:ForgeExtension,
+        UrlRef: URL,
+    };
+
+    // Deprecated: 为了兼容已发布代码。
+    window.JsView.React = window.JsView.Dom;
+}
+export default JsViewForgeApp;

package/dom/jsview-dom/src/dom-wrapper/JsViewProxy.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-extra-boolean-cast */
+import AudioElement from "./node/AudioElement"
+import VideoElement from "./node/VideoElement"
+import MutationObserver from "./utils/MutationObserver"
+import Document from "./node/Document"
+import SVGElement from "./node/SVGElement"
+import Element from "./node/Element"
+import URL from "./style/URL"
+
+// 定义内部开发用的space
+window.JsvCode = {
+    Dom: {
+        StyleSheets: {}
+    }
+};
+
+// 将接口对接到浏览器标准API
+window.Audio = AudioElement;
+window.Video = VideoElement;
+window.MutationObserver = MutationObserver;
+
+if (!!window.JsView) {
+    console.log("Declare Dom Proxy.");
+
+    global.SVGElement = SVGElement;
+    global.Element = Element;
+
+    let url_ref = new URL(window.JsView.getAppUrl(), true);
+    if (window.location.applyUrlInfo) {
+        window.location.applyUrlInfo(url_ref);
+    } else {
+        window.location = url_ref;
+    }
+
+    window.addEventListener = function(type, listener) {
+        // console.log("window.addEventListener() type=" + type);
+    }
+
+    window.document = new Document();
+
+    // 为了支持MemoryHistory方式的Router而添加，JsView不支持WebHistory/WebHashHistory
+    window.history = {};
+
+    window.navigator = {
+        userAgent: "jsview-runtime"
+    }
+
+    window.HTMLIFrameElement = function() {
+    }
+}

package/dom/jsview-dom/src/dom-wrapper/event/AnimationEvent.js

@@ -0,0 +1,7 @@
+import Event from "./Event"
+class AnimationEvent extends Event {
+    stopPropagation() {
+        // TODO: 目前不确定需要做什么...
+    }
+}
+export default AnimationEvent;

package/dom/jsview-dom/src/dom-wrapper/event/Event.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-vars */
+class Event {
+    constructor(type) {
+        this.target = null;
+        this.timeStamp = Date.now();
+        this.type = type;
+    }
+	initEvent(eventTypeArg, canBubbleArg, cancelableArg) {
+		this.type = eventTypeArg;
+	}
+}
+export default Event;

package/dom/jsview-dom/src/dom-wrapper/event/FocusEvent.js

@@ -0,0 +1,9 @@
+import Event from "./Event"
+class FocusEvent extends Event {
+}
+
+FocusEvent.Type = {
+    FOCUS : 'focus',
+    BLUR  : 'blur',
+}
+export default FocusEvent;

package/dom/jsview-dom/src/dom-wrapper/event/KeyboardEvent.js

@@ -0,0 +1,43 @@
+import Event from "./Event"
+class KeyboardEvent extends Event {
+    constructor(type) {
+        super(type);
+        this.keyCode = -1;
+        this.key = -1;
+        this.repeat = 0;
+    }
+
+    static JsvGetKeyFromCode(keyCode) {
+        const keyMap = new Map([
+            [KeyboardEvent.KeyCode.Enter, KeyboardEvent.Key.Enter],
+            [KeyboardEvent.KeyCode.ArrowUp, KeyboardEvent.Key.ArrowUp],
+            [KeyboardEvent.KeyCode.ArrowDown, KeyboardEvent.Key.ArrowDown],
+            [KeyboardEvent.KeyCode.ArrowLeft, KeyboardEvent.Key.ArrowLeft],
+            [KeyboardEvent.KeyCode.ArrowRight, KeyboardEvent.Key.ArrowRight],
+        ]);
+
+        return keyMap[keyCode];
+    }
+}
+
+KeyboardEvent.Type = {
+    KEYDOWN: 'keydown',
+    KEYUP: 'keyup',
+}
+
+KeyboardEvent.Key = {
+    Enter: 'Enter',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+}
+
+KeyboardEvent.KeyCode = {
+    Enter: 13,
+    ArrowUp: 38,
+    ArrowDown: 40,
+    ArrowLeft: 37,
+    ArrowRight: 39,
+}
+export default KeyboardEvent;

package/dom/jsview-dom/src/dom-wrapper/event/LoadEvent.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-unused-vars */
+import Event from "./Event"
+class LoadEvent extends Event {
+	constructor(type) {
+		super("load");
+	}
+}
+export default LoadEvent;

package/dom/jsview-dom/src/dom-wrapper/index.js

@@ -0,0 +1,16 @@
+/**
+ * Created by luocf on 2020/1/17.
+ */
+export {default as JsViewForgeApp} from "./JsViewForgeApp"
+export {default as Document} from "./node/Document"
+export {default as HeadElement} from "./node/HeadElement"
+export {default as ForgeExtension} from "./ForgeExtension"
+export {default as Log } from "./utils/Log"
+export * from "./utils/JsvLazySyncCache"
+
+import Log from "./utils/Log"
+// Log.SetLevel(Log.Level.Debug);
+
+import "./JsViewProxy"
+
+Log.I("Using JsView Runtime");

package/dom/jsview-dom/src/dom-wrapper/node/AnchorElement.js

@@ -0,0 +1,24 @@
+import Element from "./Element"
+
+class AnchorElement extends Element {
+	constructor() {
+		super();
+
+		console.warn("Warnig: <a> is fake in JsView system");
+
+		this.href = ""
+		this.protocol = ""
+		this.host = ""
+		this.search = ""
+		this.hash = ""
+		this.hostname = ""
+		this.port = ""
+		this.pathname = ""
+	}
+
+	jsvGetTagName() {
+		return Element.TAG.ANCHOR;
+	}
+}
+
+export default AnchorElement;

package/dom/jsview-dom/src/dom-wrapper/node/AudioElement.js

@@ -0,0 +1,60 @@
+import Element from "./Element.js";
+import MediaElement from "./MediaElement";
+import Event from "../event/Event";
+import Forge from "../../engine-js/ForgeDefine";
+
+class AudioElement extends MediaElement {
+    constructor(src) {
+        super(src);
+        this.jsvOverrideMedia = false;
+        console.log("AudioElement.constructor()", this);
+    }
+
+    jsvGetTagName() {
+        return Element.TAG.AUDIO;
+    }
+
+    jsvInit() {
+        if (!this.jsvOverrideMedia) {
+            this.jsvMedia = new MediaElement.HOOKS.Audio();
+        }
+        super.jsvInit();
+        this.jsvOnLoaded();
+    }
+
+    jsvOnLoaded() {
+        this.jsvMediaView = new Forge.LayoutView();
+        this.jsvMainView.AddView(this.jsvMediaView);
+    }
+
+    jsvAddMediaListener(event) {
+        if (!this.jsvMedia) {
+            this.jsvInit();
+        }
+        this.jsvMedia.addEventListener(event, () => {
+            let ev = new Event(event);
+            ev.target = this;
+            this.dispatchEvent(ev);
+        });
+    }
+
+    jsvRelease() {
+        super.jsvRelease();
+        this.jsvMedia = null;
+    }
+
+    setAttribute(name, value) {
+        if (name == "data-jsv-audio-predownload") {
+            // 启用predownload模式，先下载再使用本地文件进行播放
+            // 解决一些平台audio无法直接播放网络文件的问题
+            if (!this.jsvMedia) {
+                this.jsvInit();
+            }
+            this.jsvMedia.predownload = true;
+            return;
+        }
+
+        super.setAttribute(name, value);
+    }
+}
+export default AudioElement;

package/dom/jsview-dom/src/dom-wrapper/node/Comment.js

@@ -0,0 +1,10 @@
+import Node from "./Node"
+class Comment extends Node {
+    constructor(content) {
+        // console.log("Comment.Comment() content=" + content);
+        super(Node.COMMENT_NODE)
+        this.textContent = content
+    }
+}
+
+export default Comment