制作templates/image - Githubissues

Zacharia2 commented 1 year ago

关键在于我如何拿到关于某个具体条目的DOM对象，传递给绘制方法，让它显示出来。

js 获取dom元素的八种方法：https://blog.csdn.net/change_any_time/article/details/79721554

data-tiddler-title="Procedure Definitions"

这是一个条目DOM

triggeringWidget.domNode.closest("[role='article']");

展示条目就可以获取到它。 let ele = document.querySelector('[data-tiddler-title="Procedure Definitions"]');

//querySelector只能获取到第一个匹配的元素
let ele = document.querySelector('[data-id="123"]');
console.log(ele.length);
console.log(ele.innerHTML);

//querySelectorAll可以获取到多个匹配的值,如果只有一个,可以通过下标[0]来取值
let elelist = document.querySelectorAll('[data-id="123"]');
console.log(elelist.length);
console.log(elelist[0].innerHTML);

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
转换得到的就是一个生成好的canvas元素

View小工具可以生成一些格式，默认取当前条目。

范本条目与文本引用密不可分。

可以制作一个小工具效仿view根据当我条目变量生成图片数据并返回。

然后根据案例使用tw机制下载到本地。参考林一二的导出文件。

Zacharia2 commented 1 year ago

$:/core/modules/widgets/view.js

使用微件定义，现代插件的定义，并在then函数里面直接写插入dom结果。大概也可以实现返回值的效果。

https://github.com/tiddly-gittly/Modern.TiddlyDev/tree/master/src%2Fdoc%2Ftutorials%2Fzh

tid2img

只要可以在条目中正常显示，就可以保存下来。

Zacharia2 commented 1 year ago

也可以使用隔段时间问询，有了没，没有，有了没，有了。间隔100ms

Zacharia2 commented 1 year ago

https://www.jianshu.com/p/c1b8b89c4905

Zacharia2 commented 1 year ago

关键在于我能在主函数种得到返回值吗？

Zacharia2 commented 1 year ago

function himmel(gen) {
  const item = gen.next()
  if (item.done) {
    return item.value
  }

  const { value, done } = item
  if (value instanceof Promise) {
    value.then((e) => himmel(gen))
  } else {
    himmel(gen)
  }
}
``

```js
function* baum() {
  yield delay(300).then(() => console.log(1))
  yield console.log(2)
  yield delay(300).then(() => console.log(3))
  yield console.log(4)
}

Zacharia2 commented 1 year ago

最根本的问题是我是否可以得到条目的dom对象。

Zacharia2 commented 1 year ago

$:/plugins/tiddlywiki/innerwiki/screenshot.js

Zacharia2 commented 1 year ago

container 会得到微件渲染后的条目内容

var title = "Procedure Definitions";
var parser = $tw.wiki.parseTiddler(title),
    variables = { currentTiddler: title },
    widgetNode = $tw.wiki.makeWidget(parser, { variables: variables }),
    container = $tw.fakeDocument.createElement("div");
widgetNode.render(container, null);

Zacharia2 commented 1 year ago

getValue(){
    var tiddler = this.wiki.getTiddler(this.viewTitle);

    if(tiddler) {
      value = tiddler.fields["text"];
    }
    this.wiki.renderText("text/html","text/vnd.tiddlywiki",this.getValueAsText(),{
      parseAsInline: mode !== "block",
      parentWidget: this
    });
  }

$tw.wiki.renderText("text/html","text/vnd.tiddlywiki",value,{parseAsInline: false,parentWidget: this});
var value1 = tiddler.getFieldString("text");
var tiddler = $tw.wiki.getTiddler("ViewWidget")
$tw.wiki.renderTiddler("text/html","ViewWidget")

Zacharia2 commented 1 year ago

在同步代码时空中，一旦有段代码块使用异步时间，那么就不可能回到同步代码时空，只能使用异步代码时空规则在异步时空中执行顺序规则。

Zacharia2 commented 1 year ago

干脆，直接在then方法最后设置标识，isFinish，在异步外部，下面写提供wihle循环判断的阻塞代码，等待异步完成在执行阻塞后面的代码。

简而言之，就是设置一个标识，等待拿饭卡的人回来将标识变成绿色，否则我会一直看标识是否变成绿色，直到变成绿色在继续。

阻塞对于微件来说并不可行。会阻塞整体的进程。

Zacharia2 commented 1 year ago

还有一种插件设计思路，处理好结果渲染显示出来，然后拿到这个dom。

<$tiddler tiddler="ViewWidget"> <$transclude $tiddler="$:/core/templates/static.tiddler.html"/> </$tiddler>

能拿到html，干脆直接js加载展示，然后获取dom

能不能拿到这个值？

Zacharia2 commented 1 year ago

var parser = new DOMParser();
var htmlDoc = parser.parseFromString("<html><head><title>titleTest</title></head><body><p>Hello World!</p></body></html>", 'text/html');
console.log(htmlDoc.getElementsByTagName( 'p' ).length)

Zacharia2 commented 1 year ago

这是一个交互窗口导引对话匡，保存在 SampleWizard 条目。

您可以 <$button message="tm-modal" param="SampleWizard2">嵌套导引</$button>.

Zacharia2 commented 1 year ago

import { widget as Widget } from '$:/core/modules/widgets/widget.js';
import { IChangedTiddlers } from 'tiddlywiki';

class ExampleWidget extends Widget {
  refresh(_changedTiddlers: IChangedTiddlers) {
    return false;
  }

  render(parent: Element, nextSibling: Element) {
    this.parentDomNode = parent;
    this.execute();
    const containerElement = $tw.utils.domMaker('p', {
      text: 'This is a widget!',
    });
    nextSibling === null ? parent.append(containerElement) : nextSibling.before(containerElement);
    this.domNodes.push(containerElement);
  }
}

exports['tid2png'] = ExampleWidget;

Zacharia2 commented 1 year ago

dom要附加到Window上。

Zacharia2 commented 1 year ago

done

Zacharia2 commented 1 year ago

$tw.utils.querySelectorSafe(selector,baseElement);

Zacharia2 commented 1 year ago

wikify 的用法案例

<$list filter="[all[current]!is[system]]" variable=nul>
    <$wikify text={{!!text}} name="compiled" output="html">
        <$list filter="[all[current]addprefix[$:/snapshot/]has[title]]" variable=nul>
            <$button tooltip="Refresh currentTiddler/snapshot" message="tm-copy-to-clipboard" param=<<compiled>>
                class="tc-btn-invisible" >
                <$action-setfield $tiddler={{{ [all[current]addprefix[$:/snapshot/]] }}} $field="text"
                    $value=<<compiled>> />
                <$action-setfield $tiddler={{{ [all[current]addprefix[$:/snapshot/]] }}} $field=hide-body
                    $value="yes" />
                {{$:/PSaT/snapshot/camera-image-on}}
            </$button>
        </$list>

        <$list filter="[all[current]addprefix[$:/snapshot/]!has[title]]" variable=nul>
            <$button tooltip="Create currentTiddler/snapshot" message="tm-copy-to-clipboard" param=<<compiled>>
                class="tc-btn-invisible" >
                <$action-setfield $tiddler={{{ [all[current]addprefix[$:/snapshot/]] }}} $field="text"
                    $value=<<compiled>> />
                <$action-setfield $tiddler=<<folded-state>> text="hide"/>
                    {{$:/PSaT/snapshot/camera-image}}
            </$button>
        </$list>

    </$wikify>
</$list>

---

<$list filter="[all[current]prefix[$:/snapshot/]]" variable=snapshot-tiddler>
    <$button tooltip="Delete snapshot" class="tc-btn-invisible">
        <$tiddler tiddler={{{ [all[current]removeprefix[$:/snapshot/]] }}}>
            <$action-setfield $tiddler=<<folded-state>> text="show"/>
        </$tiddler>
        <$action-deletetiddler $tiddler=<<snapshot-tiddler>>/>
        <$action-sendmessage $message="tm-close-tiddler" $param=<<snapshot-tiddler>> />
        {{ $:/PSaT/snapshot/no-camera}}
    </$button>
</$list>

Zacharia2 commented 1 year ago

<$list filter="[all[current]!match[$:/PSaT/snapshot/viewTemplate]]  +[addprefix[$:/snapshot/]has[title]]"
    variable=shapshot-tiddler>
    {{||$:/PSaT/snapshot/button}}
    <$button tooltip="Open snapshot Tiddler" to=<<shapshot-tiddler>> class="tc-btn-invisible">
        {{$:/core/images/file}}
    </$button>
        {{||$:/core/ui/Buttons/fold}}

    <$tiddler tiddler=<<shapshot-tiddler>> >
        {{||$:/PSaT/snapshot/delete-unfold-button}}<br>
        <div style="border: 1px solid gray; border-style: dotted; padding: 0px 5px 0px 5px;">
            <$transclude />
        </div>
    </$tiddler>

</$list>

Zacharia2 commented 1 year ago

wikify 的用法案例

<$let target-text={{Java包管理软件!!text}} Snapshot-tiddler="Snapshot/Java包管理软件" >

    <$wikify text=<<target-text>> name="compiled" output="html">
        <$button tooltip="Create" message="tm-copy-to-clipboard" param=<<compiled>>>
            <$action-setfield $tiddler=<<Snapshot-tiddler>> $field="text" $value=<<compiled>> />
            Create
        </$button>
        <$button tooltip="Delete">
            <$action-deletetiddler $tiddler=<<Snapshot-tiddler>> />
            <$action-sendmessage $message="tm-close-tiddler" $param=<<Snapshot-tiddler>> />
            Delete
        </$button>
    </$wikify>

    <$tiddler tiddler=<<Snapshot-tiddler>>>
        <div style="border: 1px solid gray; border-style: dotted; padding: 0px 5px 0px 5px;">
            <$transclude />
        </div>
    </$tiddler>
</$let>

tiddly-gittly / Tid2PNG

制作templates/image #7